/* ===== Aik Kaam Toh Kardo — brand tokens ===== */
:root{
  --lime: #BDD426;
  --lime-deep: #8FA81F;
  --cream: #F9ECC6;
  --cream-2: #F1E1AF;
  --ink: #171310;
  --kraft: #CA9B59;
  --forest: #16281F;

  --font-display: "Baloo 2", system-ui, sans-serif;   /* wordmark, marquee, and all headings — the funky brand voice */
  --font-body: "Inter", system-ui, sans-serif;         /* body copy and UI */

  --ease: cubic-bezier(.16,1,.3,1);
  --shadow-sm: 0 1px 2px rgba(23,19,16,.05), 0 2px 8px rgba(23,19,16,.06);
  --shadow-md: 0 14px 30px -14px rgba(23,19,16,.28);
  --shadow-lg: 0 22px 46px -18px rgba(23,19,16,.34);

  --radius-lg: 22px;
  --radius-md: 14px;
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

/* content column widens on bigger screens instead of staying frozen at 1180px forever */
@media (min-width:1280px){ :root{ --maxw:1240px; } }
@media (min-width:1600px){ :root{ --maxw:1360px; --pad:clamp(48px,4.6vw,88px); } }
@media (min-width:1920px){ :root{ --maxw:1500px; } }
@media (min-width:2200px){ :root{ --maxw:1660px; --pad:clamp(64px,4.6vw,120px); } html{ font-size:17.5px; } }
@media (min-width:2400px){ :root{ --maxw:1780px; } html{ font-size:18px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ margin:0; }
p{ margin:0; }

/* subtle paper grain overlay for texture */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:0.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scroll progress rail */
.scroll-rail{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:50; background:transparent; }
.scroll-rail__fill{ height:100%; width:0%; background:var(--lime-deep); transform-origin:left; }

/* ===== shared bits ===== */
.kicker{
  font-family:var(--font-body); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.76rem; color:var(--lime-deep); margin:0 0 12px;
}
.kicker--onDark{ color:var(--lime); }
.kicker--onLime{ color:var(--ink); opacity:.62; }

.section__title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3.2vw, 2.5rem);
  line-height:1.15; font-weight:800; max-width:19ch; letter-spacing:-.01em;
}
.section__title--onDark{ color:var(--cream); }

/* content column: width is the real readable measure, --pad is gutter on top of it (not eaten by it) */
.section{
  width:100%; max-width:calc(var(--maxw) + var(--pad) * 2); margin:0 auto;
  padding:clamp(60px, 4.5vw + 2.5vh, 128px) var(--pad);
}
.section__head{ margin-bottom:clamp(36px,5vw,60px); }
.section__head--onDark{ margin-bottom:clamp(28px,4vw,44px); }

@media (min-width:1600px){
  .section__title{ font-size:clamp(2.5rem,2.2vw,3.2rem); max-width:22ch; }
  .section__head{ margin-bottom:clamp(44px,3.6vw,72px); }
}
@media (min-width:1920px){
  .section__title{ font-size:clamp(3rem,2.1vw,3.6rem); }
}

/* button: funky sticker style — thick border, hard offset shadow, playful tilt */
.cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  background:var(--lime); color:var(--ink);
  padding:15px 28px; border-radius:999px;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  text-decoration:none;
  transform:rotate(-1.3deg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cta:hover{ transform:rotate(0deg) translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.cta:active{ transform:rotate(0deg) translate(1px,1px); box-shadow:3px 3px 0 var(--ink); }
.cta--lg{ padding:18px 34px; font-size:1.08rem; }
.cta--dark{ background:var(--ink); color:var(--cream); border-color:var(--cream); }

/* reveal-on-scroll */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(80px,10vh,110px) var(--pad) clamp(64px,9vh,90px);
  overflow-x:clip; overflow-y:visible;
  background:var(--cream);
}
.hero__pattern{ position:absolute; inset:0; z-index:0; opacity:.045; pointer-events:none; overflow:hidden; }
.hero__patternSvg{ width:100%; height:100%; }

.hero__glow{
  position:absolute; left:50%; top:38%; width:min(720px,90vw); height:min(720px,90vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(189,212,38,.28) 0%, rgba(189,212,38,0) 68%);
  z-index:0; pointer-events:none;
}

.hero__inner{ position:relative; z-index:2; max-width:640px; }

.badge-mark{
  display:inline-flex; gap:6px; margin-bottom:20px;
  font-family:var(--font-display); font-weight:800; font-size:.8rem; letter-spacing:.06em;
}
.badge-mark span{
  background:var(--ink); color:var(--lime); padding:5px 9px; border-radius:8px;
  transform:rotate(-4deg); box-shadow:var(--shadow-sm); display:inline-block;
}
.badge-mark span:last-child{ background:var(--lime); color:var(--ink); transform:rotate(3deg); }

.wordmark{ font-family:var(--font-display); font-size:clamp(2.1rem, 5.8vw, 3.7rem); line-height:0.98; font-weight:800; }
.wordmark__line{
  display:block; color:var(--lime);
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink), 2px  2px 0 var(--ink),
    -2px  0   0 var(--ink), 2px  0   0 var(--ink),
     0   -2px 0 var(--ink), 0    2px 0 var(--ink),
     5px  5px 0 var(--ink);
}
.wordmark__line + .wordmark__line{ margin-top:.1em; }

.hero__promise{
  margin:16px 0 0; font-family:var(--font-body); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:clamp(.82rem,1.5vw,.98rem); color:var(--ink); opacity:.72;
}
.hero__promise-dot{ color:var(--lime-deep); margin:0 2px; }

.hero__sub{
  margin:16px auto 26px; max-width:42ch; font-size:clamp(.96rem,1.3vw,1.08rem); line-height:1.6; color:var(--ink); opacity:.9;
}

.hero__rider{
  position:relative; z-index:2; width:min(230px, 38vw); margin-top:clamp(24px,4vh,40px);
  will-change:transform;
}
.rider-svg{ width:100%; height:auto; }
.rider-svg--sm{ width:100%; }

.scroll-cue{
  position:absolute; left:50%; bottom:clamp(18px,3vh,32px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:.4;
  animation:cueBounce 2.4s ease-in-out infinite;
  transition:opacity .4s var(--ease);
}
@keyframes cueBounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }

/* hero scales up properly instead of staying a fixed-size island on bigger screens */
@media (min-width:1280px){
  .hero__inner{ max-width:760px; }
  .wordmark{ font-size:clamp(3.4rem,4.6vw,4.4rem); }
  .hero__rider{ width:min(300px,22vw); }
  .hero__glow{ width:min(900px,62vw); height:min(900px,62vw); }
}
@media (min-width:1600px){
  .hero__inner{ max-width:880px; }
  .wordmark{ font-size:clamp(4rem,4.4vw,5.4rem); }
  .hero__sub{ font-size:1.18rem; max-width:44ch; }
  .hero__rider{ width:min(380px,20vw); }
  .hero__glow{ width:min(1180px,58vw); height:min(1180px,58vw); }
}
@media (min-width:1920px){
  .hero__inner{ max-width:980px; }
  .wordmark{ font-size:clamp(4.6rem,4.2vw,6.2rem); }
  .hero__rider{ width:min(440px,19vw); }
}

/* tall phones / tablets: let the hero actually fill the height instead of floating in a box */
@media (max-width:767.98px) and (min-height:760px){
  .wordmark{ font-size:clamp(2.5rem, 11.5vw, 3.35rem); }
  .hero__rider{ width:min(320px, 66vw); margin-top:clamp(28px, 5vh, 52px); }
  .hero__sub{ max-width:34ch; margin:18px auto 30px; }
  .hero__promise{ font-size:.92rem; }
}
@media (min-width:768px) and (max-width:1279.98px) and (min-height:900px){
  .hero__inner{ max-width:720px; }
  .wordmark{ font-size:clamp(3rem, 7.4vw, 4.3rem); }
  .hero__rider{ width:min(340px, 40vw); margin-top:clamp(32px,5vh,56px); }
  .hero__sub{ font-size:1.1rem; max-width:40ch; }
  .hero__glow{ width:min(900px,105vw); height:min(900px,105vw); }
}

/* ================= SERVICES ================= */
.service-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:clamp(16px,2vw,28px);
}
.service-card{
  background:var(--cream-2); border-radius:20px;
  border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  padding:28px 24px;
  transform:rotate(var(--tilt));
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:nth-child(1){ --tilt:-1.4deg; }
.service-card:nth-child(2){ --tilt:1.2deg; }
.service-card:nth-child(3){ --tilt:-1deg; }
.service-card:nth-child(4){ --tilt:1.5deg; }
.service-card:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:9px 9px 0 var(--ink); }
.service-card__iconWrap{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:14px; margin-bottom:18px;
  background:var(--lime); border:2.5px solid var(--ink);
}
.service-card__icon{ width:24px; height:24px; }
.service-card h3{
  font-family:var(--font-display); font-weight:800; margin-bottom:8px; letter-spacing:-.01em;
  font-size:clamp(1.1rem, 1.05vw + .8rem, 1.34rem);
}
.service-card p{
  line-height:1.55; opacity:.78;
  font-size:clamp(.92rem, .5vw + .78rem, 1.02rem);
}

@media (min-width:768px) and (max-width:1023.98px){
  .service-grid{ grid-template-columns:repeat(2,1fr); max-width:760px; margin-inline:auto; }
}
/* force a clean 4-up row from here on — auto-fit alone can strand a lone 4th card in an awkward, half-empty row */
@media (min-width:1024px){
  .service-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1600px){
  .service-card{ padding:34px 30px; }
  .service-card__iconWrap{ width:64px; height:64px; border-radius:16px; }
  .service-card__icon{ width:28px; height:28px; }
}

/* ================= JOURNEY (self-looping) ================= */
.journey{ position:relative; background:var(--forest); overflow:hidden; }

.journey__inner{
  width:100%; max-width:calc(var(--maxw) + var(--pad) * 2); margin:0 auto; padding-inline:var(--pad);
}
.journey__inner--head{ padding-top:clamp(64px, 4vw + 3vh, 120px); padding-bottom:0; }
.journey__inner--beats{ padding-top:0; padding-bottom:clamp(64px, 4vw + 3vh, 120px); }

.journey__roadWrap{ width:100%; padding-inline:var(--pad); }
.journey__road{
  position:relative; height:clamp(96px, 9vw + 4vh, 190px);
  margin:clamp(10px,3vh,20px) 0 clamp(24px,4.5vh,36px);
}
.journey__roadSvg{ position:absolute; inset:0; width:100%; height:100%; }

/* fallback for browsers without motion-path support: straight slide */
.journey__rider{
  position:absolute; top:6px; left:0; width:clamp(88px, 8vw, 180px);
  transform:translateX(-8%);
  animation:rideLoopFallback var(--ride-dur, 8s) var(--ease) infinite;
  animation-play-state:paused;
}
.journey.is-inview .journey__rider{ animation-play-state:running; }

@keyframes rideLoopFallback{
  0%   { transform:translateX(-8%); opacity:0; }
  6%   { opacity:1; }
  92%  { transform:translateX(680%); opacity:1; }
  97%  { opacity:0; }
  100% { opacity:0; transform:translateX(-8%); }
}

/* modern browsers: rider genuinely rides the curved road (offset-path set via JS to match actual pixel size) */
@supports (offset-path: path("M0 0 L1 1")){
  .journey__rider{
    top:0; left:0; transform:translate(-50%,-62%);
    offset-rotate:0deg;
    offset-distance:0%;
    animation:rideLoop var(--ride-dur, 8s) var(--ease) infinite;
  }
  @keyframes rideLoop{
    0%   { offset-distance:0%;   opacity:0; }
    6%   { opacity:1; }
    92%  { offset-distance:100%; opacity:1; }
    97%  { offset-distance:100%; opacity:0; }
    100% { offset-distance:0%;   opacity:0; }
  }
}

.journey__beats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,36px);
  text-align:center;
}
.beat{ opacity:.4; animation:beatPulse var(--ride-dur, 8s) ease-in-out infinite; animation-play-state:paused; }
.journey.is-inview .beat{ animation-play-state:running; }
.beat[data-beat="0"]{ animation-delay:0s; }
.beat[data-beat="1"]{ animation-delay:calc(var(--ride-dur, 8s) / 3); }
.beat[data-beat="2"]{ animation-delay:calc(var(--ride-dur, 8s) / 3 * 2); }

@keyframes beatPulse{
  0%   { opacity:.4; }
  10%  { opacity:1; }
  32%  { opacity:1; }
  46%  { opacity:.4; }
  100% { opacity:.4; }
}

.beat__tag{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:var(--font-display); font-weight:800; color:var(--ink); background:var(--lime);
  font-size:clamp(1rem,2.4vw,1.28rem); letter-spacing:.01em;
  padding:9px 20px; border-radius:999px; border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  margin:0 auto 16px;
}
.beat__tag i{ width:7px; height:7px; border-radius:50%; background:var(--ink); flex:none; }
.beat p{
  color:var(--cream); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.6; opacity:.9;
  max-width:26ch; margin:0 auto;
}

@media (min-width:1600px){
  .journey__road{ height:clamp(150px,10vw,240px); }
}
@media (min-width:768px) and (max-width:1023.98px){
  .journey__beats{ gap:clamp(14px,2.4vw,24px); }
  .beat p{ font-size:clamp(.98rem,1.6vw,1.12rem); max-width:22ch; }
}
@media (max-width:767.98px){
  .journey__beats{ grid-template-columns:1fr; gap:22px; max-width:34ch; margin-inline:auto; }
}

/* ================= MARQUEE ================= */
.marquee{
  background:var(--lime);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  overflow:hidden; padding:22px 0;
}
.marquee__track{
  display:flex; align-items:center; gap:28px; white-space:nowrap; width:max-content;
  animation:marquee 20s linear infinite;
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.2rem,2.8vw,1.7rem); color:var(--ink);
  letter-spacing:.01em;
}
.marquee__dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); opacity:.5; flex:none; }
/* track holds 4 copies of the word list; travelling one quarter loops seamlessly with three copies always on screen */
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-25%);} }

@media (min-width:1280px){
  .marquee{ padding:30px 0; }
  .marquee__track{ font-size:2rem; gap:36px; animation-duration:26s; }
}
@media (min-width:1920px){
  .marquee{ padding:40px 0; }
  .marquee__track{ font-size:2.5rem; gap:48px; animation-duration:32s; }
}

/* ================= COVERAGE ================= */
.coverage__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,4vw,72px); align-items:center;
}
.coverage__text{ margin:18px 0 28px; font-size:1.02rem; line-height:1.75; max-width:42ch; opacity:.82; }
.coverage__map{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.coverage__art{ max-width:520px; }

@media (min-width:1600px){
  .coverage__text{ font-size:1.14rem; max-width:46ch; }
  .coverage__art{ max-width:600px; }
}

/* ================= CLOSER ================= */
.closer{ background:var(--lime); padding:clamp(88px,12vw,144px) var(--pad); text-align:center; }
.closer__inner{ max-width:640px; margin:0 auto; }
.closer__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem,5.6vw,3.4rem); color:var(--ink); margin-bottom:12px;
}
.closer__sub{ display:block; font-size:1.05rem; margin-bottom:32px; opacity:.72; }

@media (min-width:1280px){
  .closer__inner{ max-width:760px; }
  .closer__title{ font-size:clamp(3.4rem,4.4vw,4.4rem); }
  .closer__sub{ font-size:1.18rem; }
  .cta--lg{ padding:20px 40px; font-size:1.16rem; }
}
@media (min-width:1920px){
  .closer__inner{ max-width:900px; }
  .closer__title{ font-size:clamp(4.4rem,4vw,5.6rem); }
  .closer__sub{ font-size:1.3rem; margin-bottom:40px; }
}

/* ================= FOOTER ================= */
.footer{
  background:var(--ink); color:var(--cream); text-align:center; padding:38px var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.85rem;
}
.footer p{ opacity:.6; }
.footer__mark{ font-family:var(--font-display); font-weight:800; color:var(--lime); letter-spacing:.1em; }

@media (min-width:1600px){
  .footer{ padding:56px var(--pad); font-size:.95rem; gap:14px; }
  .footer__mark{ font-size:1.2rem; }
}

/* ================= RESPONSIVE ================= */

/* tablet landscape / small laptop: two-column grids get breathing room, no cramped slabs */
@media (min-width:1024px) and (max-width:1279.98px){
  .coverage__grid{ gap:clamp(28px,3.5vw,48px); }
}

/* tablet (portrait through ~1024px) */
@media (max-width:1023.98px){
  .coverage__grid{ grid-template-columns:1fr; }
  .coverage__art{ order:-1; width:100%; max-width:min(460px, 62vh); margin-inline:auto; }
}

/* large phone / small tablet portrait */
@media (max-width:767.98px){
  .service-grid{ grid-template-columns:1fr; }
}

/* small phones */
@media (max-width:559.98px){
  .cta{ width:100%; justify-content:center; transform:none; }
  .cta:hover{ transform:translateY(-2px); }
  .cta--lg{ padding:16px 22px; font-size:1rem; }
  .closer .cta{ width:auto; max-width:100%; white-space:normal; text-align:center; }
  .hero__glow{ width:130vw; height:130vw; }
  .coverage__art{ order:-1; }
}

@media (max-width:359.98px){
  .wordmark{ font-size:clamp(2rem, 8.6vw, 2.5rem); }
  .hero__sub{ font-size:.9rem; }
  .closer .cta{ border-radius:18px; padding:14px 18px; font-size:.95rem; }
}

/* laptop / short window: sections shouldn't stack 250px+ of empty padding between them */
@media (min-width:1024px) and (min-height:561px) and (max-height:760px){
  .section{ padding-block:clamp(56px,7vh,84px); }
  .journey__inner--head{ padding-top:clamp(48px,6vh,72px); }
  .journey__inner--beats{ padding-bottom:clamp(48px,6vh,72px); }
  .closer{ padding-block:clamp(64px,9vh,104px); }
}

/* short / landscape viewports: the hero must never force scroll or clip content */
@media (min-height:561px) and (max-height:760px){
  .hero{ padding-top:clamp(40px,7vh,64px); padding-bottom:clamp(36px,6vh,56px); }
  .hero__rider{ width:min(190px,26vw); margin-top:14px; }
  .wordmark{ font-size:clamp(1.9rem,4.4vw,2.7rem); }
  .hero__sub{ margin:12px auto 18px; }
  .badge-mark{ margin-bottom:12px; }
  .scroll-cue{ display:none; }
  .journey__road{ height:64px; margin:6px 0 18px; }
  .journey__beats .beat p{ font-size:.98rem; }
}

/* very short (landscape phones) */
@media (max-height:559.98px){
  .hero{ min-height:auto; padding-top:28px; padding-bottom:20px; }
  .badge-mark{ margin-bottom:8px; }
  .wordmark{ font-size:clamp(1.35rem,4.2vw,1.8rem); }
  .wordmark__line{ text-shadow:-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px 1.5px 0 var(--ink),3px 3px 0 var(--ink); }
  .hero__promise{ margin-top:8px; font-size:.72rem; }
  .hero__sub{ margin:8px auto 14px; font-size:.82rem; }
  .cta--lg{ padding:12px 22px; font-size:.9rem; }
  .hero__rider{ width:min(140px,24vw); margin-top:10px; }
  .scroll-cue{ display:none; }
  .section{ padding-block:clamp(44px,8vw,72px); }
  .coverage__art{ max-width:min(360px, 58vh); }
}

/* devices that can't hover shouldn't get a hover-only lift state stuck "on" after tap */
@media (hover:none){
  .cta:hover{ transform:rotate(-1.3deg); box-shadow:5px 5px 0 var(--ink); }
  .service-card:hover{ transform:rotate(var(--tilt)); box-shadow:6px 6px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ transition:none; opacity:1; transform:none; }
  .marquee__track{ animation:none; }
  .scroll-cue{ animation:none; }
  .journey__rider{ animation:none !important; offset-distance:30%; opacity:1; }
  .beat{ animation:none !important; opacity:1; }
}