/* ==========================================================================
   Landing page. Mobile first; desktop (>= 1024px) in calc(N * var(--u)).
   The steps and about band are sticky scroll scenes driven by home.js;
   What We Offer is a plain section (service rows + photo).
   ========================================================================== */

.page-home h2 { font-weight: 600; }
/* Section headings and subtitles share one scale (--fs-h2 / --fs-sub, set per breakpoint in base.css). */
.offer__head h2, .steps h2, .impact h2, .why__head h2, .faq__intro h2 {
  font-size: var(--fs-h2); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); text-wrap: balance;
}

/* ───────────── Hero ─────────────
   Measurements from the 1920px reference. Mobile (< 768px) uses the same spacing x 0.75.
   Header: 76px desktop (overlays the hero), 64px mobile (in flow). */
/* overflow-x: clip keeps the glow from widening the page without breaking sticky children. */
.hero-wrap { position: relative; overflow-x: clip; }
.hero { position: relative; padding: 48px var(--gutter) 64px; text-align: center; overflow: hidden; } /* bottom room: the phone shadow fades out before the edge */
/* Header over the banner (home only): no bar of its own, so the contour lines, glow and grain run up behind it.
   Desktop: the header already overlays the banner and does not scroll with the page.
   Below 1024px it is sticky, so the banner slides up under it (64px) and the header turns solid again once
   the page scrolls (header-scrolled, from base.js). Without JS it stays solid. */
.page-hero .site-header { background: transparent; }
@media (max-width: 1023.98px) {
  .page-hero .hero-wrap { margin-top: -64px; }
  .page-hero .hero { padding-top: 112px; }
  .page-hero .site-header { transition: transform 300ms var(--ease-out), background-color 250ms ease; }
  html:not(.js) .page-hero .site-header, .page-hero.header-scrolled .site-header {
    background: var(--bg-header); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .page-hero:not(.header-scrolled) .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .page-hero .hero { padding-top: 148px; } }
@media (prefers-reduced-motion: reduce) { .page-hero .site-header { transition: none; } }
.hero__text { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
/* Trust pill: a 1px ring with a light that travels around it (same effect on every screen size). */
.hero-badge {
  position: relative; display: inline-flex; min-height: 32px; border-radius: 999px;
  padding: 1px; border: 0; overflow: hidden; background: var(--divider);
}
.hero-badge__spin {
  display: block; position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 250deg, rgba(255, 255, 255, 0.85) 320deg, rgba(255, 255, 255, 0) 360deg);
  animation: badge-spin 6s linear infinite;
}
.hero-badge__inner { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 11px 0 4px; border-radius: inherit; background: var(--bg-paper); }
.hero-badge__faces { display: flex; flex: none; }
.hero-badge__faces img { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg-paper); object-fit: cover; position: relative; }
.hero-badge__faces img + img { margin-left: -8px; }
.hero-badge__faces img:nth-child(1) { z-index: 3; }
.hero-badge__faces img:nth-child(2) { z-index: 2; }
.hero-badge__faces img:nth-child(3) { z-index: 1; }
.hero-badge__label { font-size: 12px; font-weight: 500; }
.hero h1 {
  margin-top: 20px; font-size: clamp(30px, 8.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; /* same weight/tracking as desktop; 3 even lines */
  color: #FFFFFF; text-wrap: balance;
}
/* Banner light and grain, under the stage light. Top to bottom: a fine monochrome grain over the whole banner;
   a soft lime halo around the phones (wider and fainter than .hero-glow's core, centred low so it stays below
   the store buttons); the deep green light rising from behind the phones. Faded out towards the banner's
   bottom edge so there is no visible cut where the next section begins. */
.hero::before {
  --hero-halo: 38% 30% at 50% 76%;
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse var(--hero-halo), rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--primary-rgb), 0.07) 50%, rgba(var(--primary-rgb), 0) 100%),
    radial-gradient(42% 34% at 50% 82%, rgba(var(--primary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0) 100%),
    radial-gradient(75% 58% at 50% 84%, rgba(46, 140, 90, 0.26) 0%, rgba(46, 140, 90, 0.08) 55%, rgba(46, 140, 90, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 24%);
  mask-image: linear-gradient(to top, transparent 0, #000 24%);
}
@media (max-width: 767.98px) {
  /* Phones start higher in the narrow banner: halo raised and widened to sit behind them. */
  .hero::before { --hero-halo: 70% 30% at 50% 70%; }
}
/* Stage light: a soft beam falling from above the header onto the headline and phones (the phone glow is
   its floor). No lines or pattern, so nothing competes with the text; the beam lifts the background behind
   the headline by only a few percent. Static. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 40% at 50% -6%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 100%),
    conic-gradient(from 180deg at 50% -14%, rgba(255, 255, 255, 0) 150deg, rgba(var(--primary-rgb), 0.05) 165deg, rgba(255, 255, 255, 0.065) 180deg, rgba(var(--primary-rgb), 0.05) 195deg, rgba(255, 255, 255, 0) 210deg);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%);
  mask-image: linear-gradient(to top, transparent 0, #000 22%);
}
/* "Future": lime, with the About section's hand-drawn underline, drawn left to right after load. */
.hero-hl { position: relative; display: inline-block; color: var(--lime); }
.hero-hl__line {
  position: absolute; left: 0; bottom: -0.12em; width: 100%; height: 0.17em; overflow: visible;
  clip-path: inset(-4px calc(100% + 4px) -4px -4px); animation: hero-hl-draw 700ms ease-in-out 600ms forwards;
}
.hero-hl__line path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes hero-hl-draw { to { clip-path: inset(-4px -4px -4px -4px); } }
@media (prefers-reduced-motion: reduce) { .hero-hl__line { animation: none; clip-path: none; } }
.hero__sub { margin-top: 14px; max-width: 32ch; margin-inline: auto; font-size: 16px; line-height: 1.5; font-weight: 400; color: rgba(255, 255, 255, 0.9); text-wrap: balance; }
.hero .store-btns { margin: 24px auto 0; max-width: 420px; }

/* Phones: same size, gap centred on the page, right phone dropped. --pw width, --pp frame padding,
   --ph height (from the screenshots' 780 x 1600 shape). No rotation. */
.hero__phones {
  --pw: min(43vw, 190px); --gap: 12px; --drop: 32px;
  --ph: calc(var(--pw) * 1516 / 674);  /* the phone renders are 674 x 1516 */
  position: relative; margin: 40px auto 0; height: calc(var(--ph) + var(--drop));
}
.hero-phone { position: absolute; top: 0; z-index: 1; width: var(--pw); height: auto; }
.hero-phone--1 { left: calc(50% - var(--gap) / 2 - var(--pw)); }
.hero-phone--2 { left: calc(50% + var(--gap) / 2); top: var(--drop); }
/* Glow behind the phones only, centred on the gap: lime core low down, soft green halo above it.
   Sized from the phone height so it ends at the bottom of the phones; the elliptical mask makes that end a
   soft curve (no flat cut where the hero stops), with room to spare when the scroll animation enlarges it. */
.hero-glow {
  position: absolute; left: 50%; top: calc(var(--drop) - var(--ph) * 0.6); width: 1000px; height: calc(var(--ph) * 1.6); margin-left: -500px; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 85%); mask-image: radial-gradient(closest-side, #000 40%, transparent 85%);
  background:
    radial-gradient(22% 38% at 50% 72%, rgba(var(--primary-rgb), 0.65) 0%, rgba(var(--primary-rgb), 0) 100%),
    radial-gradient(30% 60% at 50% 60%, rgba(46, 140, 90, 0.55) 0%, rgba(46, 140, 90, 0) 100%);
}
@media (max-width: 767.98px) {
  /* Phones are small here: a taller glow so the light pool reads like the desktop one. */
  .hero-glow { top: calc(var(--drop) - var(--ph) * 0.75); height: calc(var(--ph) * 1.8); width: 160vw; margin-left: -80vw; }
  .hero-phone__img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.45)); }
}
/* Phones are finished 3D renders (device + Aakri screen, turned in toward the centre), transparent
   around the device. Neutral shadow follows the device outline. */
.hero-phone picture { display: block; }
.hero-phone__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }

@media (min-width: 768px) {
  .hero { padding: 84px 32px 40px; }
  .hero__text { max-width: none; }
  .hero h1 { margin-top: 28px; font-size: clamp(40px, 5.4vw, 52px); }
  .hero__sub { margin-top: 16px; max-width: none; font-size: 20px; }
  .hero .store-btns { margin-top: 28px; max-width: none; }
  .hero__phones { --pw: clamp(200px, 14.5vw, 275px); --gap: 50px; --drop: 60px; margin-top: 60px; }
  /* Sized so the lime core fades out about 400px either side of centre at 1920px. */
  .hero-glow { width: max(1000px, calc(1800 * var(--u))); margin-left: min(-500px, calc(-900 * var(--u))); }
}
@media (min-width: 1024px) {
  /* Desktop: positions and sizes from the 1920px reference. */
  .hero { padding: calc(186 * var(--u)) 32px 40px; } /* trust pill 186 design px from the top, under the overlaid header */
  .hero h1 { margin-top: calc(34 * var(--u)); font-size: max(38px, calc(78 * var(--u))); line-height: 1.103; font-weight: 700; letter-spacing: calc(-2.5 * var(--u)); }
  .hero__sub { margin-top: calc(22 * var(--u)); font-size: max(16px, calc(21 * var(--u))); line-height: 1.476; }
  .hero .store-btns { margin-top: calc(34 * var(--u)); max-width: none; }
  .hero-glow { opacity: 0.7; transform: scale(0.7); transform-origin: 50% 60%; will-change: transform, opacity; }
  .hero { margin: 0 calc(5 * var(--u)); border-radius: 0 0 calc(150 * var(--u)) calc(150 * var(--u)); }
  .hero__text { will-change: opacity, transform; }
  .hero-badge { min-height: max(32px, calc(46 * var(--u))); }
  .hero-badge__spin {
    display: block; position: absolute; left: 50%; top: 50%;
    width: calc(600 * var(--u)); height: calc(600 * var(--u)); margin: calc(-300 * var(--u)) 0 0 calc(-300 * var(--u));
    background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 250deg, rgba(255, 255, 255, 0.85) 320deg, rgba(255, 255, 255, 0) 360deg);
    animation: badge-spin 6s linear infinite;
  }
  .hero-badge__inner { gap: max(8px, calc(10 * var(--u))); padding: 0 max(12px, calc(16 * var(--u))) 0 max(4px, calc(7 * var(--u))); }
  .hero-badge__faces img { width: max(22px, calc(30 * var(--u))); height: max(22px, calc(30 * var(--u))); border-width: 2px; }
  .hero-badge__faces img + img { margin-left: calc(-9 * var(--u)); }
  .hero-badge__label { font-size: max(12px, calc(16 * var(--u))); color: var(--text); white-space: nowrap; }
  .hero-phone { will-change: transform; }
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-badge__spin { animation: none; } }

/* ───────────── What We Offer: the pickup map ─────────────
   The services are stops on Aakri's pickup route.
   Default (mobile, tablet, no JS): the route runs down the left, every stop shown in full.
   Desktop with JS (home.js adds .is-map): a contour map with the route and three stop pins; choosing a stop
   drives the van along the route (the road it covers lights up) and shows that stop's card beside the map. */
.offer { position: relative; padding: var(--section-y) var(--gutter) 0; background: var(--bg); }
.offer__inner { max-width: 640px; margin: 0 auto; }
.offer__head p { margin-top: 12px; font-size: var(--fs-sub); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }

.route { margin-top: 36px; }
.route__map { display: none; }

/* Stacked route: a dotted lime road down the left, one marker per stop. */
.route__stops { position: relative; list-style: none; margin: 0; padding: 0 0 0 60px; display: flex; flex-direction: column; gap: 44px; }
.route__stops::before {
  content: ''; position: absolute; left: 21px; top: 22px; bottom: 0; width: 0;
  border-left: 2px dotted rgba(var(--primary-rgb), 0.55);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.stop { position: relative; }
.stop__marker {
  position: absolute; left: -60px; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid rgba(var(--primary-rgb), 0.55); color: var(--lime);
}
.stop__marker svg { width: 20px; height: 20px; }
/* Scroll progress (home.js sets --fill): a solid lime line grows over the dotted one, and each marker lights
   when the line reaches it. */
.route__stops::after {
  content: ''; position: absolute; left: 21px; top: 22px; bottom: 0; width: 2px; background: var(--lime);
  transform: scaleY(var(--fill, 0)); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.stop__marker { z-index: 1; transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.stop__marker.is-reached { background: var(--lime); border-color: var(--lime); color: var(--on-lime); box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.14); }
.stop__media { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-paper); }
.stop__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--divider); pointer-events: none; }
.stop__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Body: title, then a three-line description ending in the arrow to the service page.
   The text is sized from the body's own width (container query), so it keeps three lines on every screen. */
.stop__body { padding-top: 16px; container-type: inline-size; }
.stop__title { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.stop__text { margin-top: 8px; max-width: 23.5em; font-size: clamp(14px, calc(100cqi / 23.5), 18px); line-height: 1.65; color: var(--text-secondary); } /* max-width: still three lines once the font reaches its 18px cap */
.stop__end { white-space: nowrap; }
/* Minimal arrow: a plain lime arrow right after the last word (no chip), stepping forward on hover.
   The negative block margins keep it from making the last line taller than the others. */
.stop__go {
  position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  margin: -0.4em 0 -0.3em 0.35em; color: var(--lime); transition: color 200ms ease;
}
.stop__go svg { width: 1.15em; height: 1.15em; transition: transform 250ms var(--ease-out); }
.stop__go::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; } /* 44px tap area */
.stop__go:hover { color: var(--lime-hover); }
.stop__go:hover svg { transform: translateX(4px); }
.stop__go:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }

@media (min-width: 768px) {
  .offer__inner { max-width: 880px; }
  .route { margin-top: 44px; }
  .route__stops { gap: 48px; }
  .stop { display: grid; grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr); column-gap: 28px; align-items: center; }
  .stop__media { aspect-ratio: 4 / 3; }
  .stop__body { padding-top: 0; }
  .stop__title { font-size: 22px; }
}

/* ── Desktop: the map ── */
@media (min-width: 1024px) {
  .offer { padding: calc(120 * var(--u)) 0 calc(140 * var(--u)); }
  /* Pulled up under the hero: the hero phones rise as you scroll, which leaves empty space at the
     bottom of the hero; the transparent top lets What We Offer follow straight after the mockups. */
  .hero-wrap + .offer {
    margin-top: calc(-200 * var(--u));
    background: linear-gradient(to bottom, transparent 0, var(--bg) calc(120 * var(--u)), var(--bg) 100%);
  }
  /* Scroll scene (home.js adds .offer--pinned on screens at least 700px tall, motion allowed): the section is
     three screens tall and its content stays pinned in view while the scroll drives the van along the route. */
  .offer--pinned { height: calc(120 * var(--u) + 300vh); height: calc(120 * var(--u) + 300svh); padding-bottom: 0; }
  .offer--pinned .offer__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  /* Same edges as the header; the heading centres above the map. */
  .offer__inner { width: 100%; max-width: none; padding: 0 var(--edge); } /* width: in the pinned flex column, the auto margins would otherwise shrink it to its content */
  .offer__head { text-align: center; }
  .offer__head p { margin-top: calc(14 * var(--u)); }

  .route.is-map {
    margin-top: calc(48 * var(--u));
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: max(28px, calc(48 * var(--u))); align-items: center;
  }

  /* Map: contour lines (the banner's), the road as a faint dotted line, the travelled part in lime. */
  .is-map .route__map {
    display: block; position: relative; aspect-ratio: 600 / 450;
    border-radius: var(--radius-card); border: 1px solid var(--divider); background: var(--bg-paper);
    isolation: isolate;
  }
  .is-map .route__map::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.16;
    background: url("../img/hero-contours.svg") 50% 70% / cover no-repeat;
  }
  .route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
  /* A faint solid road. (A dotted stroke-dasharray here crashed Chrome's renderer while scrolling, even at 1 9.) */
  .route__road { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; stroke-linecap: round; }
  .route__trail { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; }
  .route__van-dot { fill: var(--lime); }
  .route__van-ring { fill: rgba(var(--primary-rgb), 0.16); stroke: rgba(var(--primary-rgb), 0.5); stroke-width: 1; }
  /* Entrance (once, when the map scrolls into view): the road fades in, then the van and its trail.
     (No clip-path draw-in here: clipping these paths crashed Chrome's renderer.) */
  .route__road { opacity: 0; transition: opacity 900ms ease; }
  .route.is-in .route__road { opacity: 1; }
  .route__trail, .route__van { opacity: 0; transition: opacity 400ms ease 600ms; }
  .route.is-in .route__trail, .route.is-in .route__van { opacity: 1; }

  /* Pins sit on the road at their viewBox coordinates. */
  .route__pin {
    position: absolute; left: calc(var(--x) / 600 * 100%); top: calc(var(--y) / 450 * 100%); z-index: 1;
    width: max(44px, calc(52 * var(--u))); height: max(44px, calc(52 * var(--u))); margin: calc(max(44px, calc(52 * var(--u))) / -2) 0 0 calc(max(44px, calc(52 * var(--u))) / -2);
    padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--text-secondary);
  }
  .route__dot {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
    background: var(--bg-paper); border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
  }
  .route__dot svg { width: 46%; height: 46%; }
  .route__label {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    padding: 6px 12px; border-radius: 999px; white-space: nowrap;
    font-size: max(13px, calc(15 * var(--u))); font-weight: 600; color: var(--text-secondary);
    background: rgba(var(--bg-rgb), 0.85); border: 1px solid var(--divider);
    transition: color 300ms ease, border-color 300ms ease;
  }
  .route__pin[data-side="above"] .route__label { top: auto; bottom: calc(100% + 10px); }
  .route__pin[data-align="start"] .route__label { left: -6px; transform: none; }
  .route__pin[data-align="end"] .route__label { left: auto; right: -6px; transform: none; }
  .route__pin:hover .route__dot { border-color: rgba(var(--primary-rgb), 0.6); color: var(--text-primary); }
  .route__pin:hover .route__label { color: var(--text-primary); }
  .route__pin.is-active { color: var(--on-lime); }
  .route__pin.is-active .route__dot { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.14); }
  .route__pin.is-active .route__label { color: var(--text-primary); border-color: rgba(var(--primary-rgb), 0.5); }
  .route__pin:focus-visible { outline: none; }
  .route__pin:focus-visible .route__dot { outline: 2px solid var(--lime); outline-offset: 4px; }

  /* Card: the selected stop. All three share one grid cell, so the card never changes height. */
  .is-map .route__stops { padding: 0; display: grid; gap: 0; }
  .is-map .route__stops::before, .is-map .route__stops::after, .is-map .stop__marker { display: none; }
  .is-map .stop {
    grid-area: 1 / 1; display: block;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  }
  /* The outgoing card is gone before the new one fades in, so their text never overlaps. */
  .is-map .stop.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 350ms ease 160ms, transform 450ms var(--ease-out) 160ms; }
  .is-map .stop__media { aspect-ratio: 16 / 10; }
  .stop__body { padding-top: calc(24 * var(--u)); }
  .stop__title { font-size: max(20px, calc(28 * var(--u))); }
  .stop__text { margin-top: calc(12 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .route__road, .route__trail, .route__van, .route__dot, .route__label, .stop__go, .stop__go svg { transition: none !important; }
  .stop__go:hover svg { transform: none; }
  .is-map .stop, .is-map .stop.is-active { transform: none; transition: none; }
  .route__stops::after { display: none; }
  .stop__marker { transition: none; }
}

/* ───────────── Get Started (steps) ───────────── */
.steps { position: relative; height: calc(100vh * 3.4); height: calc(100svh * 3.4); margin-top: var(--section-y); overflow-x: clip; }
.steps__pin {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  padding: 24px var(--gutter); display: flex; flex-direction: column;
  transition: top 300ms var(--ease-out), height 300ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .steps__pin, .ab-story__pin { transition: none; } }
.steps__fit { flex: 1; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.steps__col { display: flex; flex-direction: column; align-items: center; }
.seg-toggle {
  display: inline-flex; padding: 3px; margin-bottom: 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--divider);
}
.seg-toggle button {
  position: relative; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; background: transparent; color: var(--text-secondary);
  transition: background-color 250ms ease, color 250ms ease;
}
.seg-toggle button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.seg-toggle button.is-active { background: var(--lime); color: var(--on-lime); }
/* Show only the steps of the selected tab (data-mode on the section, set by home.js). */
[data-steps]:not([data-mode="org"]) [data-step-set="org"],
[data-steps][data-mode="org"] [data-step-set="individual"] { display: none !important; }
.steps h2 { text-align: center; }
/* Grows up to the phone's own height (440px); any spare height is split above and below the block. */
.steps__phone { position: relative; flex: 1; min-height: 0; max-height: 440px; margin-top: 20px; display: flex; justify-content: center; }
/* Green floor light behind the phone (same gradient as the hero glow): anchored at the phone's base, fading upward. */
.steps-glow {
  position: absolute; left: 50%; bottom: 0; width: 240vw; height: 120%; z-index: 0; pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 85%); mask-image: radial-gradient(closest-side, #000 40%, transparent 85%);
  background:
    radial-gradient(22% 38% at 50% 72%, rgba(var(--primary-rgb), 0.55) 0%, rgba(var(--primary-rgb), 0) 100%),
    radial-gradient(30% 60% at 50% 60%, rgba(46, 140, 90, 0.45) 0%, rgba(46, 140, 90, 0) 100%);
}
.steps-phone {
  position: relative; z-index: 1; height: 100%; max-height: 440px; aspect-ratio: 230 / 472;
  border-radius: 40px; padding: 2px;
  background: linear-gradient(145deg, #8F8F8F 0%, #4C4C4C 18%, #2D2D2D 50%, #575757 82%, #9C9C9C 100%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.steps-phone__key { position: absolute; width: 3px; border-radius: 2px; background: #6C6C6C; }
.steps-phone__key--1 { left: -2px; top: 22%; height: 9%; }
.steps-phone__key--2, .steps-phone__key--3 { display: none; }
.steps-phone__key--4 { right: -2px; top: 27%; height: 14%; }
.steps-phone__bezel { position: relative; width: 100%; height: 100%; border-radius: 38px; background: #050505; padding: 7px; }
.steps-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 31px; overflow: hidden; background: #000; }
.steps-phone__img {
  /* The app screenshots are within ~2% of the screen's shape, so they fill it exactly (no side crop). */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
  opacity: 0; transition: opacity 350ms ease;
}
.steps-phone__img.is-active { opacity: 1; }
/* The screenshots include the app's own bottom navigation, so the mock home-indicator bar is hidden. */
.steps-phone__bar { display: none; }
.steps-phone__glare { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 32%); pointer-events: none; z-index: 6; }
/* 44px tall buttons, 3px bars centred in them (same position as the design's 20px rows). */
.steps__segs { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.steps__segs button { height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; }
.steps__segs button > span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.steps__segs [data-step-seg] { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.steps__active { min-height: 96px; }
.step-active { display: grid; grid-template-columns: 36px minmax(0, 1fr); }
.step-active[hidden] { display: none; }
.step-active__num { font-size: 14px; line-height: 26px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-primary); }
.step-active > div { display: flex; flex-direction: column; gap: 6px; }
.step-active__title { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--text-primary); }
.step-active__text { font-size: 14px; line-height: 1.55; color: var(--text-dim); }

@media (min-width: 1024px) {
  /* home.js measures the column and sets --gs-bh / --gs-h when it is taller than the design's 800. */
  .steps {
    height: var(--gs-h, calc(1910 * var(--u))); margin-top: 20px;
    padding-top: var(--gs-top, calc((100vh - 800 * var(--u)) / 2)); padding-bottom: var(--gs-pad-b, 0px);
    background: var(--bg);
  }
  .steps__pin { top: var(--gs-top, calc((100vh - 800 * var(--u)) / 2)); height: var(--gs-bh, calc(800 * var(--u))); padding: 0; display: block; }
  .steps__fit {
    display: grid; grid-template-columns: minmax(0, calc(700 * var(--u))) calc(370 * var(--u)); justify-content: space-between;
    align-items: start; max-width: none; width: calc(100% - 2 * var(--edge)); /* same edges as the header */
    margin: 0 0 0 var(--edge); padding-top: calc(20 * var(--u));
    transform: scale(var(--gs-fit, 1)); transform-origin: calc(700 * var(--u)) 0;
  }
  .steps__col { align-items: flex-start; }
  .seg-toggle { padding: calc(4 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .seg-toggle button { min-height: max(30px, calc(36 * var(--u))); padding: 0 max(14px, calc(18 * var(--u))); font-size: max(13px, calc(14 * var(--u))); }
  .seg-toggle button::after { display: none; }
  .steps h2 { text-align: left; text-wrap: initial; }
  .steps__intro { margin-top: calc(16 * var(--u)); max-width: max(320px, calc(560 * var(--u))); font-size: var(--fs-sub); line-height: 1.55; color: var(--text-secondary); }
  .steps__list { list-style: none; margin: calc(24 * var(--u)) 0 0; padding: 0; width: 100%; border-bottom: 1px solid var(--border); }
  .step-row {
    width: 100%; padding: calc(12 * var(--u)) 0; border: 0; border-top: 1px solid var(--border); background: none;
    display: grid; grid-template-columns: max(36px, calc(48 * var(--u))) minmax(0, 1fr); column-gap: calc(8 * var(--u));
    text-align: left; cursor: pointer;
  }
  .step-row__num { font-size: max(13px, calc(14 * var(--u))); line-height: 1.857; font-weight: 700; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.62); transition: color 300ms ease; }
  .step-row.is-active .step-row__num { color: var(--text-primary); }
  .step-row__body { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
  .step-row__title { font-size: max(16px, calc(23 * var(--u))); line-height: 1.333; font-weight: 600; color: rgba(255, 255, 255, 0.62); transition: color 300ms ease; }
  .step-row__text { font-size: max(14px, calc(18 * var(--u))); line-height: 1.55; color: rgba(255, 255, 255, 0.5); max-width: 54ch; transition: color 300ms ease; }
  .step-row:hover .step-row__title, .step-row.is-active .step-row__title { color: var(--text-primary); }
  .step-row.is-active .step-row__text { color: var(--text-secondary); }

  .steps__phone { margin: 0; display: block; min-height: 0; max-height: none; align-self: stretch; }
  .steps-glow { width: 420%; height: 125%; }
  .steps-phone {
    width: 100%; height: 100%; max-height: calc(760 * var(--u)); aspect-ratio: auto;
    border-radius: calc(62 * var(--u)); padding: calc(3 * var(--u));
    box-shadow: 0 calc(50 * var(--u)) calc(90 * var(--u)) calc(-30 * var(--u)) rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.6);
  }
  .steps-phone__key { display: block; width: calc(4 * var(--u)); background: linear-gradient(90deg, #3C3C3C, #8C8C8C 50%, #3C3C3C); }
  .steps-phone__key--1 { left: calc(-3 * var(--u)); top: calc(150 * var(--u)); height: calc(30 * var(--u)); }
  .steps-phone__key--2 { left: calc(-3 * var(--u)); top: calc(205 * var(--u)); height: calc(56 * var(--u)); }
  .steps-phone__key--3 { left: calc(-3 * var(--u)); top: calc(272 * var(--u)); height: calc(56 * var(--u)); }
  .steps-phone__key--4 { right: calc(-3 * var(--u)); top: calc(230 * var(--u)); height: calc(88 * var(--u)); }
  .steps-phone__bezel { border-radius: calc(59 * var(--u)); padding: calc(11 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
  .steps-phone__screen { border-radius: calc(48 * var(--u)); }
  .steps-phone__img { transform: translateY(calc(12 * var(--u))); transition: opacity 160ms ease-in, transform 160ms ease-in; }
  .steps-phone__img.is-active { transform: none; transition: opacity 300ms var(--ease-out) 160ms, transform 300ms var(--ease-out) 160ms; }
}

/* ───────────── Impact ─────────────
   Text + 2x2 figures | Kerala dot map, over a faint landscape strip along the bottom.
   ≥1024: exactly one viewport tall. The map and strip SVGs are generated by
   website/tools/build_impact_svgs.py. home.js adds .is-in once (30% visible): fade-ups,
   count-ups, dots revealed north to south, landscape drawn in, then slow CSS loops. */
.impact {
  --im-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --band: 90px;
  position: relative; overflow: hidden; background: var(--bg);
  padding: var(--section-y) 0 calc(48px + var(--band));
}
.impact__inner { position: relative; z-index: 1; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }

.impact__sub { margin-top: 12px; max-width: 520px; font-size: var(--fs-sub); line-height: 1.55; color: var(--text-secondary); }

/* 2 x 2 figures, hairline dividers between cells only */
.impact__kpis { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.im-kpi { min-width: 0; padding: 20px 0 20px 16px; }
.im-kpi:nth-child(odd) { padding-left: 0; padding-right: 16px; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.im-kpi:nth-child(-n+2) { padding-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.im-kpi:nth-child(n+3) { padding-bottom: 0; }
.im-kpi__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.im-kpi__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.im-kpi__val { font-size: clamp(26px, 8.4vw, 32px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.im-kpi__unit { font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.im-kpi__label { margin-top: 10px; font-size: 16px; line-height: 1.4; font-weight: 500; color: #FFFFFF; }

/* Map */
.impact__map { position: relative; display: flex; flex-direction: column; align-items: center; }
.impact__stage { position: relative; width: 100%; display: flex; justify-content: center; }
.impact__stage::before {
  content: ''; position: absolute; left: -30%; right: -30%; top: -10%; bottom: -15%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(16% 22% at 56% 64%, rgba(var(--primary-rgb), 0.16) 0%, rgba(var(--primary-rgb), 0.06) 50%, rgba(var(--primary-rgb), 0) 100%),
    radial-gradient(24% 32% at 55% 56%, rgba(46, 140, 90, 0.22) 0%, rgba(46, 140, 90, 0.08) 50%, rgba(46, 140, 90, 0) 100%);
  transition: opacity 1.4s var(--im-ease) 0.3s;
}
.km { position: relative; z-index: 1; display: block; height: 440px; width: auto; max-width: 100%; overflow: visible; }
.km-dots circle {
  fill: rgba(255, 255, 255, 0.2);
  transition: opacity 0.5s var(--im-ease) calc(0.2s + var(--t) * 1.1s), fill 0.6s var(--im-ease) calc(1.4s + var(--t) * 0.5s);
}
.km-dots .lit { fill: var(--lime); }
.km-hub { cursor: pointer; outline: none; }
.km-hub__dot { fill: var(--lime); transition: opacity 0.5s var(--im-ease) calc(1.8s + var(--i) * 0.1s); }
.km-hub:focus-visible .km-hub__dot { stroke: #FFFFFF; stroke-width: 2; }
.km-hub__ring { fill: none; stroke: var(--lime); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.impact__tip {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 14px));
  padding: 6px 10px; border-radius: 8px; background: #161916; border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px; line-height: 1.4; white-space: nowrap; color: #FFFFFF; opacity: 0; transition: opacity 0.15s;
}
.impact__tip.is-shown { opacity: 1; }

/* Landscape strip */
.impact__scene {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--band); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.impact__scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.impact__scene .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--im-ease); }
.impact__scene .far { stroke: rgba(255, 255, 255, 0.10); stroke-width: 1.2; }
.impact__scene .near { stroke: rgba(var(--primary-rgb), 0.38); stroke-width: 1.4; }
.impact__scene .palm { stroke: rgba(var(--primary-rgb), 0.55); stroke-width: 1.5; }
.impact__scene .water { stroke: rgba(var(--primary-rgb), 0.22); stroke-width: 1.2; }
.impact__scene .boat { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.3; }
.impact__scene .sway { transform-box: fill-box; transform-origin: 50% 100%; }

/* Birds gliding above the map (desktop) */
.impact__birds { display: none; position: absolute; top: 12%; right: 6%; width: 38%; height: 80px; z-index: 0; pointer-events: none; transition: opacity 1s var(--im-ease) 1.2s; }
.impact__bird { position: absolute; left: 0; width: 22px; height: 10px; color: rgba(255, 255, 255, 0.45); }
.impact__bird svg { display: block; width: 100%; height: 100%; overflow: visible; }
.impact__bird path { transform-origin: 50% 70%; }

/* Entrance: hidden only when JS will reveal it */
.im-rv { transition: opacity 0.7s var(--im-ease) var(--d, 0ms), transform 0.7s var(--im-ease) var(--d, 0ms); }
.js .impact:not(.is-in) .im-rv { opacity: 0; transform: translateY(16px); }
.js .impact:not(.is-in) .impact__stage::before,
.js .impact:not(.is-in) .km-dots circle,
.js .impact:not(.is-in) .km-hub__dot,
.js .impact:not(.is-in) .impact__birds { opacity: 0; }
.js .impact:not(.is-in) .km-dots .lit { fill: rgba(255, 255, 255, 0.2); }
.js .impact:not(.is-in) .impact__scene .ln { stroke-dashoffset: 1; }
.impact.is-in .km-hub__ring { animation: km-pulse 2.4s var(--im-ease) calc(2s + var(--i) * 0.6s) infinite; }
.impact.is-in .sway { animation: im-sway 7s ease-in-out infinite alternate; }
.impact.is-in .ripple { animation: im-ripple 6s ease-in-out infinite alternate; }
.impact.is-in .drift { animation: im-drift 26s ease-in-out infinite alternate; }
.impact.is-in .impact__bird { animation: im-fly 28s linear infinite; }
.impact.is-in .impact__bird path { animation: im-flap 1.1s ease-in-out infinite alternate; }
@keyframes km-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes im-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes im-ripple { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes im-drift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
@keyframes im-fly { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(22vw, -14px); } 92% { opacity: 1; } 100% { transform: translate(44vw, 6px); opacity: 0; } }
@keyframes im-flap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

@media (min-width: 768px) {
  .impact { --band: clamp(64px, 7.8vw, 150px); padding: var(--section-y) 0 calc(96px + var(--band)); }
  .impact__sub { margin-top: 14px; }
  .impact__kpis { margin-top: 40px; }
  .im-kpi { padding: 26px 32px; }
  .im-kpi:nth-child(odd) { padding-left: 0; padding-right: 32px; }
  .im-kpi:nth-child(-n+2) { padding-top: 0; }
  .im-kpi__head { flex-direction: row; align-items: center; gap: 14px; }
  .im-kpi__val { white-space: nowrap; }
  .im-kpi__val { font-size: 40px; }
  .km { height: min(60vh, 480px); }
}

@media (min-width: 1024px) {
  /* One viewport tall: content centred above the landscape strip. Same edges as the navbar. */
  .impact { height: 100vh; height: 100svh; display: flex; align-items: center; padding: 0 0 var(--band); }
  .impact__inner {
    width: 100%; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 5vw, 80px);
    padding: 0 var(--edge);
  }
  .impact h2 { font-size: min(var(--fs-h2), max(30px, 6.4vh)); } /* one viewport tall: shrinks on short screens */
  .impact__sub { margin-top: clamp(10px, 1.6vh, 14px); font-size: min(var(--fs-sub), max(15px, 2.1vh)); }
  .impact__kpis { margin-top: clamp(22px, 4.4vh, 52px); }
  .im-kpi { padding: clamp(16px, 2.8vh, 30px) clamp(20px, 2.4vw, 36px); }
  .im-kpi:nth-child(odd) { padding-left: 0; }
  .im-kpi:nth-child(even) { padding-right: 0; } /* the grid's outer edge: room for number + unit on one line */
  .im-kpi:nth-child(-n+2) { padding-top: 0; }
  .im-kpi__head { gap: clamp(12px, 1.2vw, 18px); }
  .im-kpi__val { font-size: clamp(28px, min(2.4vw, 5vh), 48px); }
  .im-kpi__label { margin-top: clamp(8px, 1.2vh, 12px); }
  .km { height: min(66vh, 600px); }
  .impact__birds { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .im-rv, .impact__stage::before, .km-dots circle, .km-hub__dot, .impact__scene .ln, .impact__birds { transition: none !important; }
  .impact .km-hub__ring, .impact .sway, .impact .ripple, .impact .drift, .impact .impact__bird, .impact .impact__bird path { animation: none !important; }
  .impact__birds { display: none !important; }
}

/* ───────────── About band (word reveal) ───────────── */
.about-band { position: relative; height: calc(100vh * 2.4); height: calc(100svh * 2.4); margin-top: 40px; }
.about-band__pin {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  transition: top 300ms var(--ease-out), height 300ms var(--ease-out);
  padding: 0 var(--gutter); max-width: calc(720px + 2 * var(--gutter)); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.about-band__text { font-size: clamp(24px, 4.2vw, 34px); line-height: 1.4; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; text-wrap: balance; }
.ab-w { display: inline-block; color: var(--text-primary); }
.ab-w--hl { color: inherit; }
.ab-w__line { display: none; }
.about-band__cta { margin-top: 32px; }
.js .ab-w { opacity: 0.08; transform: translateY(14px); }
.js .about-band__cta { opacity: 0; transform: translateY(12px); }

@media (min-width: 1024px) {
  .about-band { height: calc(2000 * var(--u)); margin-top: 0; background: var(--bg-2); }
  .about-band__pin { top: 0; height: 100vh; padding: 0 32px; max-width: none; }
  .about-band__text { max-width: max(640px, calc(1000 * var(--u))); font-size: max(26px, calc(48 * var(--u))); line-height: 1.35; letter-spacing: calc(-0.5 * var(--u)); }
  .js .ab-w { opacity: 1; transform: none; filter: none; color: #3A3A3A; transition: color 220ms ease; }
  .js .ab-w.is-on { color: var(--text-primary); }
  .js .ab-w--hl.is-on { color: inherit; }
  .ab-w--hl { position: relative; }
  /* Underlines draw left to right. A clip is used rather than stroke-dashoffset:
     dashes with pathLength are unreliable together with non-scaling-stroke. */
  .ab-w__line {
    display: block; position: absolute; left: 0; bottom: -0.2em;
    width: calc(100% + 0.28em); height: 0.17em; overflow: visible;
    clip-path: inset(-4px calc(100% + 4px) -4px -4px); transition: clip-path 500ms ease-in-out var(--d, 0ms);
  }
  .ab-w__line--end { width: 100%; }
  .ab-w__line.is-on { clip-path: inset(-4px -4px -4px -4px); }
  .ab-w__line path { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .about-band__cta { margin-top: calc(48 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .ab-w { opacity: 1; transform: none; filter: none; }
  .js .about-band__cta { opacity: 1; transform: none; }
}

/* ───────────── Why AAKRI ───────────── */
.why { padding: var(--section-y) var(--gutter) 0; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; }
.why__head { text-align: center; }
.why__eyebrow { display: block; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--text-secondary); }
.why__head h2 { margin-top: 8px; }
.why__head p { margin-top: 12px; font-size: var(--fs-sub); line-height: 1.55; color: var(--text-secondary); }
.why__grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-card {
  min-width: 0; padding: 18px; border-radius: var(--radius-card); background: var(--surface-why); border: 1px solid var(--border-why);
  display: flex; flex-direction: column; gap: 18px; transition: border-color 200ms ease;
}
.why-card__visual {
  position: relative; min-height: 150px; border-radius: 12px; background: var(--surface-why-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.why-card__text { display: flex; flex-direction: column; gap: 6px; }
.why-card h3 { font-size: 19px; line-height: 1.37; font-weight: 600; color: var(--text-primary); text-wrap: balance; }
.why-card__text p { font-size: 14px; line-height: 1.6; color: var(--text-grey); }

.why-chips { flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; }
.why-chips::before, .why-chips::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 14%; pointer-events: none; }
.why-chips::before { left: 0; background: linear-gradient(90deg, var(--surface-why-2), transparent); }
.why-chips::after { right: 0; background: linear-gradient(270deg, var(--surface-why-2), transparent); }
.why-chips__row { display: flex; width: max-content; animation: marquee 60s linear infinite; will-change: transform; }
.why-chips__row--b { animation-direction: reverse; }
.why-chips__half { display: flex; gap: 8px; padding-right: 8px; }
.chip {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-why);
  font-size: 13px; line-height: 1.38; font-weight: 500; color: var(--text-secondary); white-space: nowrap;
}
.chip svg { display: none; width: 12px; height: 12px; color: var(--lime); }

.why-checks { position: relative; display: flex; flex-direction: column; gap: 16px; padding-block: 16px; }
.why-checks__line { position: absolute; left: 12px; top: 32px; bottom: 32px; width: 2px; background: var(--lime); }
.why-checks__item { position: relative; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.why-checks__dot { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--lime); color: var(--on-lime); display: flex; align-items: center; justify-content: center; }
.why-checks__dot svg { width: 13px; height: 13px; }

.why-card[data-why="2"] .why-card__visual { padding: 16px; }
.why-notif { width: 100%; max-width: 290px; padding: 14px; border-radius: 14px; background: #fff; display: flex; align-items: center; gap: 12px; }
.why-notif__icon { width: 34px; height: 34px; border-radius: 9px; background: #1F1F1F; color: var(--lime); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.why-notif__icon svg { width: 16px; height: 16px; }
.why-notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.why-notif__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; }
.why-notif__title { font-size: 13px; line-height: 1.38; font-weight: 700; color: var(--on-lime); }
.why-notif__time { font-size: 11px; line-height: 1.6; color: #616161; white-space: nowrap; }
.why-notif__text { font-size: 12px; line-height: 1.33; color: #404040; }

.why-seal { display: flex; align-items: center; gap: 16px; padding: 16px; }
.why-seal__ring { position: relative; width: 60px; height: 60px; flex-shrink: 0; color: var(--lime); }
.why-seal__circle { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.why-seal__circle circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.why-seal__icon { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.why-seal__text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.why-seal__text span:first-child { font-size: 12px; line-height: 1.33; color: var(--text-grey); }
.why-seal__text span:last-child { font-size: 16px; line-height: 1.375; font-weight: 700; color: var(--text-primary); }

@media (min-width: 1024px) {
  .why { padding: var(--section-y) 0 0; max-width: none; background: var(--bg-2); }
  .why__eyebrow { font-size: max(14px, calc(16 * var(--u))); }
  .why__head h2 { margin-top: calc(10 * var(--u)); }
  .why__head p { margin-top: calc(14 * var(--u)); }
  .why__grid {
    width: calc(1200 * var(--u)); margin: calc(56 * var(--u)) auto 0;
    grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(20 * var(--u));
  }
  .why-card { padding: calc(28 * var(--u)); gap: calc(24 * var(--u)); }
  .why-card:hover { border-color: rgba(var(--primary-rgb), 0.35); }
  .why-card--wide { grid-column: span 7; }
  .why-card--narrow { grid-column: span 5; }
  .why-card__visual { min-height: max(150px, calc(200 * var(--u))); border-radius: calc(20 * var(--u)); }
  .why-card__text { gap: calc(8 * var(--u)); }
  .why-card h3 { font-size: max(19px, calc(22 * var(--u))); line-height: 1.364; }
  .why-card__text p { font-size: max(14px, calc(16 * var(--u))); }

  .why-chips { gap: calc(14 * var(--u)); }
  .why-chips__half { gap: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); }
  .chip { gap: calc(8 * var(--u)); padding: max(7px, calc(8 * var(--u))) max(14px, calc(16 * var(--u))); font-size: max(13px, calc(14 * var(--u))); line-height: 1.429; }
  .chip svg { display: block; width: max(11px, calc(12 * var(--u))); height: max(11px, calc(12 * var(--u))); }
  .why-card--chips:hover .why-chips__row { animation-play-state: paused; }

  .why-checks { gap: max(16px, calc(22 * var(--u))); }
  .why-checks__line { left: max(12px, calc(13 * var(--u))); top: calc(16px + max(13px, calc(14 * var(--u)))); bottom: calc(16px + max(13px, calc(14 * var(--u)))); width: 2px; }
  .why-checks__item { gap: calc(14 * var(--u)); font-size: max(14px, calc(15 * var(--u))); line-height: 1.333; }
  .why-checks__dot { width: max(26px, calc(28 * var(--u))); height: max(26px, calc(28 * var(--u))); }
  .why-checks__dot svg { width: max(13px, calc(14 * var(--u))); height: max(13px, calc(14 * var(--u))); }

  .why-notif { width: max(260px, calc(300 * var(--u))); max-width: 100%; padding: max(14px, calc(16 * var(--u))); border-radius: calc(16 * var(--u)); gap: calc(12 * var(--u)); }
  .why-notif__icon { width: max(34px, calc(36 * var(--u))); height: max(34px, calc(36 * var(--u))); border-radius: calc(10 * var(--u)); }
  .why-notif__icon svg { width: max(16px, calc(18 * var(--u))); height: max(16px, calc(18 * var(--u))); }
  .why-notif__title { font-size: max(13px, calc(14 * var(--u))); line-height: 1.286; }
  .why-notif__time { font-size: max(11px, calc(12 * var(--u))); line-height: 1.333; }
  .why-notif__text { font-size: max(12px, calc(13 * var(--u))); line-height: 1.308; }

  .why-seal { gap: calc(20 * var(--u)); }
  .why-seal__ring { width: max(60px, calc(72 * var(--u))); height: max(60px, calc(72 * var(--u))); }
  .why-seal__icon { width: max(28px, calc(32 * var(--u))); height: max(28px, calc(32 * var(--u))); margin: calc(max(28px, calc(32 * var(--u))) / -2) 0 0 calc(max(28px, calc(32 * var(--u))) / -2); }
  .why-seal__text { gap: calc(4 * var(--u)); }
  .why-seal__text span:first-child { font-size: max(12px, calc(13 * var(--u))); line-height: 1.385; }
  .why-seal__text span:last-child { font-size: max(16px, calc(18 * var(--u))); line-height: 1.333; }

  .js .why__grid.is-armed .why-card { opacity: 0; transform: translateY(24px); }
  .js .why__grid.is-shown .why-card { opacity: 1; transform: none; transition: opacity 500ms ease-out var(--d, 0ms), transform 500ms ease-out var(--d, 0ms), border-color 200ms ease; }
}
@media (prefers-reduced-motion: reduce) { .why-chips__row { animation: none; } }

/* ───────────── Partners ───────────── */
.partners { padding: var(--section-y) 0 0; text-align: center; }
.partners__label { padding-inline: var(--gutter); font-size: 14px; line-height: 1.43; font-weight: 500 !important; color: var(--text-grey); }
.partners__viewport {
  margin-top: 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.partners__track { --marquee-dur: 86s; }
.partners__half { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.partners__logo { width: 100px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.partners__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 200ms ease; }

@media (min-width: 1024px) {
  /* 342 for the strip itself plus the 192 of open space the design leaves before the FAQ. */
  .partners { background: var(--bg-2); }
  .partners__label { font-size: max(14px, calc(15 * var(--u))); line-height: 1.467; }
  .partners__viewport {
    width: calc(1400 * var(--u)); margin: calc(40 * var(--u)) auto 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .partners__track { --marquee-dur: 40s; }
  .partners__viewport:hover .partners__track { animation-play-state: paused; }
  .partners__half { gap: calc(72 * var(--u)); padding-right: calc(72 * var(--u)); }
  .partners__logo { width: max(100px, calc(140 * var(--u))); height: max(32px, calc(40 * var(--u))); }
  .partners__logo img:hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .partners__track { width: 100%; }
  .partners__half { flex-wrap: wrap; justify-content: center; row-gap: 24px; padding: 0 var(--gutter); }
  .partners__half + .partners__half { display: none; }
}

/* ───────────── FAQ ───────────── */
.faq { padding: var(--section-y) var(--gutter) 0; max-width: calc(800px + 2 * var(--gutter)); margin: 0 auto; }
.faq__intro p { margin-top: 12px; font-size: var(--fs-sub); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.faq .faq-list { margin-top: 28px; }
/* Contact Us + Book on WhatsApp, side by side. */
.faq__btns { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.faq__btns.m-only > * { flex: 1 1 160px; }
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(var(--primary-rgb), 0.55);
  color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.btn-wa svg { width: 18px; height: 18px; color: var(--lime); }
.btn-wa:hover { border-color: var(--lime); background: rgba(var(--primary-rgb), 0.08); color: var(--text); }

@media (min-width: 1024px) {
  .faq {
    /* Same edges as the header; no fixed height, so no empty band before the download strip. */
    max-width: none; width: auto; margin: 0 var(--edge); padding: var(--section-y) 0 0;
    display: grid; grid-template-columns: minmax(0, calc(560 * var(--u))) minmax(0, 1fr); column-gap: calc(96 * var(--u)); align-items: start;
  }
  .faq__intro p { margin-top: calc(16 * var(--u)); max-width: 40ch; }
  .faq__btns { margin-top: calc(28 * var(--u)); gap: calc(12 * var(--u)); }
  .btn-wa { min-height: max(44px, calc(50 * var(--u))); padding: 0 max(20px, calc(25 * var(--u))); font-size: max(14px, calc(17 * var(--u))); }
  .faq .faq-list { margin-top: 0; }
}

/* ───────────── Reduced motion: lay scroll scenes out statically ───────────── */
@media (prefers-reduced-motion: reduce) {
  .steps, .about-band { height: auto !important; }
  .steps__pin, .about-band__pin { position: static; height: auto; }
  .steps__pin { padding-bottom: 40px; }
  .steps__phone { flex: none; height: 440px; }
  .about-band__pin { padding-block: 96px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .steps { padding-block: calc(120 * var(--u)); }
  .steps__fit { transform: none; }
  .steps__phone { height: auto; }
  .about-band__pin { min-height: 100vh; }
}