/* ─────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ── Browser surfaces ── */
::selection { background: rgba(255, 107, 53, 0.22); color: inherit; }
:focus-visible { outline: 2px solid #FF6B35; outline-offset: 3px; border-radius: 2px; }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #FAF6EF; }
::-webkit-scrollbar-thumb { background: #FF6B35; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #E55A28; }

/* Skip navigation */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange, #FF6B35);
  color: #fff;
  padding: 12px 24px;
  font-family: var(--font-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────
   DESIGN TOKENS
   12-col grid · 1440px viewport · 56px outer margin · 24px gap
   col-w = (1440 - 2×56 - 11×24) / 12 = 88.67px
───────────────────────────────────────────────── */
:root {
  --outer:   56px;
  --gap:     24px;
  --cols:    12;

  /* Derived — reference only; grid uses 1fr */
  --col-w: calc((1440px - 2 * 56px - 11 * 24px) / 12); /* 88.67px */

  /* Brand */
  --orange:    #FF6B35;
  --cream:     #FAF6EF;
  --amber:     #F5D898;
  --near-black:#1A1A1A;

  /* Typography */
  --font-display: 'Dela Gothic One', display, sans-serif;
  --font-ui:      'Plus Jakarta Sans', system-ui, sans-serif; /* ignore-value overused-font "Plus Jakarta Sans" */
}

/* ─────────────────────────────────────────────────
   BASE
───────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  background: var(--cream);
  overflow-x: hidden;
  color: var(--near-black);
}

/* Offset fixed header when scrolling to anchors */
section[id] {
  scroll-margin-top: 80px;
}

/* ─────────────────────────────────────────────────
   HEADER  — fixed transparent overlay
───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 112px;
  background: transparent;
}

/* ── Adaptive nav colour tokens ──
   dark  = header over orange / visually heavy section → cream text
   light = header over cream / amber section            → near-black text  */
.site-header {
  --nav-color:  var(--cream);
  --nav-hover:  #fff;
  --nav-active: var(--amber);
}
.site-header[data-nav-theme="light"] {
  --nav-color:  var(--near-black);
  --nav-hover:  var(--orange);
  --nav-active: var(--orange);
}

/* 12-col grid · 4 cols left nav · 4 cols logo · 4 cols right nav */
.nav-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  padding-inline: var(--outer);
  height: 100%;
  align-items: center;
}

.nav-left {
  grid-column: 1 / 5;    /* cols 1–4 */
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Logo · cols 5–8 · auto-centred at 720px = viewport mid */
.logo-center {
  grid-column: 5 / 9;
  justify-self: center;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-right {
  grid-column: 9 / 13;   /* cols 9–12 */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* Nav links — colour driven by token set on the header */
.nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--nav-color);
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: color 0.3s ease;
}
.nav-link:hover    { color: var(--nav-hover); }
.nav-link.is-active { color: var(--nav-active); }

/* Logo assets */
.logo-img {
  height: 130px;
  width: auto;
  display: block;
  mix-blend-mode: normal;
  transform-origin: center top;
  transition: transform 0.35s ease, filter 0.3s ease;
}
/* Compact: scale logo down without touching height (avoids layout recalc) */
.site-header.is-scrolled .logo-img {
  transform: scale(0.6);
}
.site-header.is-scrolled .logo-z        { font-size: 38px; }
.site-header.is-scrolled .logo-wordmark { font-size: 10px; }

/* Logo on dark sections (orange hero) — invert to cream/white so it's visible */
.site-header[data-nav-theme="dark"] .logo-img {
  filter: brightness(0) invert(1);
}
/* Fallback text — cream on dark, orange on light */
.site-header[data-nav-theme="dark"] .logo-z,
.site-header[data-nav-theme="dark"] .logo-wordmark {
  color: var(--cream);
  transition: color 0.3s ease;
}
.logo-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.logo-z {
  font-family: var(--font-display);
  font-size: 54px;
  color: var(--orange);
  font-weight: 400;
}
.logo-wordmark {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 3.5px;
  text-transform: uppercase;
}

/* Download App pill */
.nav-pill-cta {
  background: var(--orange) !important;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.12s;
}
.nav-pill-cta:hover { background: #E55A28 !important; }

/* ─────────────────────────────────────────────────
   HERO  ≈ 840px
   Layout: 12-col grid for text; absolute for characters
───────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 740px;
  max-height: 960px;
  padding-top: 112px;
  background: var(--orange);
  overflow: hidden;
  clip-path: inset(0);   /* clips text-shadow bleed that overflow:hidden misses */

  /* Grid — text column is a grid child; characters stay absolute */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  padding-inline: var(--outer);
}


/* Background SVG — absolutely fills hero behind everything */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Diagonal depth shapes — subtle background movement only */
.bg-s1 { fill: #A83000; opacity: 0.10; }
.bg-s2 { fill: #FF9060; opacity: 0.07; }
.bg-s3 { fill: #C83800; opacity: 0.09; }
.bg-s4 { fill: #FFB070; opacity: 0.05; }


/* ── Headline text column ──
   Grid child · cols 1–6 · left ~49% of content width
   Headline glyphs overflow grid intentionally (editorial bleed into character zone) */
.hero-text-col {
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: start;
  padding-top: 28px;
  min-width: 0;          /* prevent grid blowout */
  position: relative;    /* z-index requires a positioning context */
  z-index: 5;
}


.headline {
  display: flex;
  flex-direction: column;
}

.hl {
  display: block;
  font-family: var(--font-display);
  line-height: 0.93;
  white-space: nowrap;
  text-shadow:
    /* Phase 1 — 1px steps, sharp letter-shape precision (1–100px) */
    1px 1px 0 rgba(0,0,0,.45), 2px 2px 0 rgba(0,0,0,.45), 3px 3px 0 rgba(0,0,0,.45), 4px 4px 0 rgba(0,0,0,.45), 5px 5px 0 rgba(0,0,0,.45),
    6px 6px 0 rgba(0,0,0,.45), 7px 7px 0 rgba(0,0,0,.45), 8px 8px 0 rgba(0,0,0,.45), 9px 9px 0 rgba(0,0,0,.45), 10px 10px 0 rgba(0,0,0,.45),
    11px 11px 0 rgba(0,0,0,.45), 12px 12px 0 rgba(0,0,0,.45), 13px 13px 0 rgba(0,0,0,.45), 14px 14px 0 rgba(0,0,0,.45), 15px 15px 0 rgba(0,0,0,.45),
    16px 16px 0 rgba(0,0,0,.45), 17px 17px 0 rgba(0,0,0,.45), 18px 18px 0 rgba(0,0,0,.45), 19px 19px 0 rgba(0,0,0,.45), 20px 20px 0 rgba(0,0,0,.45),
    21px 21px 0 rgba(0,0,0,.45), 22px 22px 0 rgba(0,0,0,.45), 23px 23px 0 rgba(0,0,0,.45), 24px 24px 0 rgba(0,0,0,.45), 25px 25px 0 rgba(0,0,0,.45),
    26px 26px 0 rgba(0,0,0,.45), 27px 27px 0 rgba(0,0,0,.45), 28px 28px 0 rgba(0,0,0,.45), 29px 29px 0 rgba(0,0,0,.45), 30px 30px 0 rgba(0,0,0,.45),
    31px 31px 0 rgba(0,0,0,.45), 32px 32px 0 rgba(0,0,0,.45), 33px 33px 0 rgba(0,0,0,.45), 34px 34px 0 rgba(0,0,0,.45), 35px 35px 0 rgba(0,0,0,.45),
    36px 36px 0 rgba(0,0,0,.45), 37px 37px 0 rgba(0,0,0,.45), 38px 38px 0 rgba(0,0,0,.45), 39px 39px 0 rgba(0,0,0,.45), 40px 40px 0 rgba(0,0,0,.45),
    41px 41px 0 rgba(0,0,0,.45), 42px 42px 0 rgba(0,0,0,.45), 43px 43px 0 rgba(0,0,0,.45), 44px 44px 0 rgba(0,0,0,.45), 45px 45px 0 rgba(0,0,0,.45),
    46px 46px 0 rgba(0,0,0,.45), 47px 47px 0 rgba(0,0,0,.45), 48px 48px 0 rgba(0,0,0,.45), 49px 49px 0 rgba(0,0,0,.45), 50px 50px 0 rgba(0,0,0,.45),
    51px 51px 0 rgba(0,0,0,.45), 52px 52px 0 rgba(0,0,0,.45), 53px 53px 0 rgba(0,0,0,.45), 54px 54px 0 rgba(0,0,0,.45), 55px 55px 0 rgba(0,0,0,.45),
    56px 56px 0 rgba(0,0,0,.45), 57px 57px 0 rgba(0,0,0,.45), 58px 58px 0 rgba(0,0,0,.45), 59px 59px 0 rgba(0,0,0,.45), 60px 60px 0 rgba(0,0,0,.45),
    61px 61px 0 rgba(0,0,0,.45), 62px 62px 0 rgba(0,0,0,.45), 63px 63px 0 rgba(0,0,0,.45), 64px 64px 0 rgba(0,0,0,.45), 65px 65px 0 rgba(0,0,0,.45),
    66px 66px 0 rgba(0,0,0,.45), 67px 67px 0 rgba(0,0,0,.45), 68px 68px 0 rgba(0,0,0,.45), 69px 69px 0 rgba(0,0,0,.45), 70px 70px 0 rgba(0,0,0,.45),
    71px 71px 0 rgba(0,0,0,.45), 72px 72px 0 rgba(0,0,0,.45), 73px 73px 0 rgba(0,0,0,.45), 74px 74px 0 rgba(0,0,0,.45), 75px 75px 0 rgba(0,0,0,.45),
    76px 76px 0 rgba(0,0,0,.45), 77px 77px 0 rgba(0,0,0,.45), 78px 78px 0 rgba(0,0,0,.45), 79px 79px 0 rgba(0,0,0,.45), 80px 80px 0 rgba(0,0,0,.45),
    81px 81px 0 rgba(0,0,0,.45), 82px 82px 0 rgba(0,0,0,.45), 83px 83px 0 rgba(0,0,0,.45), 84px 84px 0 rgba(0,0,0,.45), 85px 85px 0 rgba(0,0,0,.45),
    86px 86px 0 rgba(0,0,0,.45), 87px 87px 0 rgba(0,0,0,.45), 88px 88px 0 rgba(0,0,0,.45), 89px 89px 0 rgba(0,0,0,.45), 90px 90px 0 rgba(0,0,0,.45),
    91px 91px 0 rgba(0,0,0,.45), 92px 92px 0 rgba(0,0,0,.45), 93px 93px 0 rgba(0,0,0,.45), 94px 94px 0 rgba(0,0,0,.45), 95px 95px 0 rgba(0,0,0,.45),
    96px 96px 0 rgba(0,0,0,.45), 97px 97px 0 rgba(0,0,0,.45), 98px 98px 0 rgba(0,0,0,.45), 99px 99px 0 rgba(0,0,0,.45), 100px 100px 0 rgba(0,0,0,.45),
    /* Phase 2 — 5px steps, solid (100–500px) */
    105px 105px 0 rgba(0,0,0,.45), 110px 110px 0 rgba(0,0,0,.45), 115px 115px 0 rgba(0,0,0,.45), 120px 120px 0 rgba(0,0,0,.45), 125px 125px 0 rgba(0,0,0,.45),
    130px 130px 0 rgba(0,0,0,.45), 135px 135px 0 rgba(0,0,0,.45), 140px 140px 0 rgba(0,0,0,.45), 145px 145px 0 rgba(0,0,0,.45), 150px 150px 0 rgba(0,0,0,.45),
    155px 155px 0 rgba(0,0,0,.45), 160px 160px 0 rgba(0,0,0,.45), 165px 165px 0 rgba(0,0,0,.45), 170px 170px 0 rgba(0,0,0,.45), 175px 175px 0 rgba(0,0,0,.45),
    180px 180px 0 rgba(0,0,0,.45), 185px 185px 0 rgba(0,0,0,.45), 190px 190px 0 rgba(0,0,0,.45), 195px 195px 0 rgba(0,0,0,.45), 200px 200px 0 rgba(0,0,0,.45),
    205px 205px 0 rgba(0,0,0,.45), 210px 210px 0 rgba(0,0,0,.45), 215px 215px 0 rgba(0,0,0,.45), 220px 220px 0 rgba(0,0,0,.45), 225px 225px 0 rgba(0,0,0,.45),
    230px 230px 0 rgba(0,0,0,.45), 235px 235px 0 rgba(0,0,0,.45), 240px 240px 0 rgba(0,0,0,.45), 245px 245px 0 rgba(0,0,0,.45), 250px 250px 0 rgba(0,0,0,.45),
    255px 255px 0 rgba(0,0,0,.45), 260px 260px 0 rgba(0,0,0,.45), 265px 265px 0 rgba(0,0,0,.45), 270px 270px 0 rgba(0,0,0,.45), 275px 275px 0 rgba(0,0,0,.45),
    280px 280px 0 rgba(0,0,0,.45), 285px 285px 0 rgba(0,0,0,.45), 290px 290px 0 rgba(0,0,0,.45), 295px 295px 0 rgba(0,0,0,.45), 300px 300px 0 rgba(0,0,0,.45),
    305px 305px 0 rgba(0,0,0,.45), 310px 310px 0 rgba(0,0,0,.45), 315px 315px 0 rgba(0,0,0,.45), 320px 320px 0 rgba(0,0,0,.45), 325px 325px 0 rgba(0,0,0,.45),
    330px 330px 0 rgba(0,0,0,.45), 335px 335px 0 rgba(0,0,0,.45), 340px 340px 0 rgba(0,0,0,.45), 345px 345px 0 rgba(0,0,0,.45), 350px 350px 0 rgba(0,0,0,.45),
    355px 355px 0 rgba(0,0,0,.45), 360px 360px 0 rgba(0,0,0,.45), 365px 365px 0 rgba(0,0,0,.45), 370px 370px 0 rgba(0,0,0,.45), 375px 375px 0 rgba(0,0,0,.45),
    380px 380px 0 rgba(0,0,0,.45), 385px 385px 0 rgba(0,0,0,.45), 390px 390px 0 rgba(0,0,0,.45), 395px 395px 0 rgba(0,0,0,.45), 400px 400px 0 rgba(0,0,0,.45),
    405px 405px 0 rgba(0,0,0,.45), 410px 410px 0 rgba(0,0,0,.45), 415px 415px 0 rgba(0,0,0,.45), 420px 420px 0 rgba(0,0,0,.45), 425px 425px 0 rgba(0,0,0,.45),
    430px 430px 0 rgba(0,0,0,.45), 435px 435px 0 rgba(0,0,0,.45), 440px 440px 0 rgba(0,0,0,.45), 445px 445px 0 rgba(0,0,0,.45), 450px 450px 0 rgba(0,0,0,.45),
    455px 455px 0 rgba(0,0,0,.45), 460px 460px 0 rgba(0,0,0,.45), 465px 465px 0 rgba(0,0,0,.45), 470px 470px 0 rgba(0,0,0,.45), 475px 475px 0 rgba(0,0,0,.45),
    480px 480px 0 rgba(0,0,0,.45), 485px 485px 0 rgba(0,0,0,.45), 490px 490px 0 rgba(0,0,0,.45), 495px 495px 0 rgba(0,0,0,.45), 500px 500px 0 rgba(0,0,0,.45),
    /* Phase 2 continued — 5px steps to 830px (fills letter holes via dense stamp overlap) */
    505px 505px 0 rgba(0,0,0,.45), 510px 510px 0 rgba(0,0,0,.45), 515px 515px 0 rgba(0,0,0,.45), 520px 520px 0 rgba(0,0,0,.45), 525px 525px 0 rgba(0,0,0,.45),
    530px 530px 0 rgba(0,0,0,.45), 535px 535px 0 rgba(0,0,0,.45), 540px 540px 0 rgba(0,0,0,.45), 545px 545px 0 rgba(0,0,0,.45), 550px 550px 0 rgba(0,0,0,.45),
    555px 555px 0 rgba(0,0,0,.45), 560px 560px 0 rgba(0,0,0,.45), 565px 565px 0 rgba(0,0,0,.45), 570px 570px 0 rgba(0,0,0,.45), 575px 575px 0 rgba(0,0,0,.45),
    580px 580px 0 rgba(0,0,0,.45), 585px 585px 0 rgba(0,0,0,.45), 590px 590px 0 rgba(0,0,0,.45), 595px 595px 0 rgba(0,0,0,.45), 600px 600px 0 rgba(0,0,0,.45),
    605px 605px 0 rgba(0,0,0,.45), 610px 610px 0 rgba(0,0,0,.45), 615px 615px 0 rgba(0,0,0,.45), 620px 620px 0 rgba(0,0,0,.45), 625px 625px 0 rgba(0,0,0,.45),
    630px 630px 0 rgba(0,0,0,.45), 635px 635px 0 rgba(0,0,0,.45), 640px 640px 0 rgba(0,0,0,.45), 645px 645px 0 rgba(0,0,0,.45), 650px 650px 0 rgba(0,0,0,.45),
    655px 655px 0 rgba(0,0,0,.45), 660px 660px 0 rgba(0,0,0,.45), 665px 665px 0 rgba(0,0,0,.45), 670px 670px 0 rgba(0,0,0,.45), 675px 675px 0 rgba(0,0,0,.45),
    680px 680px 0 rgba(0,0,0,.45), 685px 685px 0 rgba(0,0,0,.45), 690px 690px 0 rgba(0,0,0,.45), 695px 695px 0 rgba(0,0,0,.45), 700px 700px 0 rgba(0,0,0,.45),
    705px 705px 0 rgba(0,0,0,.45), 710px 710px 0 rgba(0,0,0,.45), 715px 715px 0 rgba(0,0,0,.45), 720px 720px 0 rgba(0,0,0,.45), 725px 725px 0 rgba(0,0,0,.45),
    730px 730px 0 rgba(0,0,0,.45), 735px 735px 0 rgba(0,0,0,.45), 740px 740px 0 rgba(0,0,0,.45), 745px 745px 0 rgba(0,0,0,.45), 750px 750px 0 rgba(0,0,0,.45),
    755px 755px 0 rgba(0,0,0,.45), 760px 760px 0 rgba(0,0,0,.45), 765px 765px 0 rgba(0,0,0,.45), 770px 770px 0 rgba(0,0,0,.45), 775px 775px 0 rgba(0,0,0,.45),
    780px 780px 0 rgba(0,0,0,.45), 785px 785px 0 rgba(0,0,0,.45), 790px 790px 0 rgba(0,0,0,.45), 795px 795px 0 rgba(0,0,0,.45), 800px 800px 0 rgba(0,0,0,.45),
    805px 805px 0 rgba(0,0,0,.45), 810px 810px 0 rgba(0,0,0,.45), 815px 815px 0 rgba(0,0,0,.45), 820px 820px 0 rgba(0,0,0,.45), 825px 825px 0 rgba(0,0,0,.45),
    830px 830px 0 rgba(0,0,0,.45);
}

/* Size + colour hierarchy — sizes tuned so each line fills the same ~410px width (-30%) */
.hl-1 { color: var(--amber); font-size: 119px; letter-spacing: -3px; }  /* SPEND 5 chars */
.hl-2 { color: var(--cream); font-size: 88px;  letter-spacing: -2px; }  /* ON FOOD, 7 chars */
.hl-3 { color: var(--amber); font-size: 185px; letter-spacing: -4px; }  /* NOT 3 chars — dominant */
.hl-4 { color: var(--cream); font-size: 92px;  letter-spacing: -2px; }  /* ON FEES 7 chars */

/* Sub copy + CTA */
.hero-sub {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.hero-copy {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.68;
  color: var(--cream);
  margin-bottom: 0;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  padding: 15px 32px;
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.2px;
  transition: background 0.15s, transform 0.15s;
}
.hero-cta-btn:hover { background: #fff; color: var(--orange); border-color: transparent; transform: translateX(2px); }
.hero-cta-btn svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────────
   SECTION 2 — CITY STORY  ≈ 900px
   Philippine neighbourhood illustration + 4-character group
───────────────────────────────────────────────── */
.city-story {
  position: relative;
  height: 900px;
  overflow: hidden;
  background: #F5D898;
}

.city-backdrop {
  position: absolute;
  inset: 0;
  background-color: #F8E9A0;              /* warm sky fallback if image fails */
  background-image: url('assets/city-bg.jpg');
  background-image: image-set(url('assets/webp/city-bg-sm.webp') type('image/webp'), url('assets/city-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Light scrim — keeps headline legible over the sky zone */
.city-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(253,233,181,0.20) 0%,
    rgba(253,233,181,0.00) 35%,
    rgba(253,233,181,0.00) 100%
  );
}

/* ── Headline group ── */
.city-headline-group {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 20;    /* above character-stage (15) — text always readable */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.city-eyebrow {
  font-family: var(--font-display);
  font-size: 38px;
  color: var(--orange);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 10px;
}

.city-headline {
  font-family: var(--font-display);
  font-size: 92px;
  color: var(--near-black);
  letter-spacing: -2px;
  line-height: 0.88;
  margin: 0 0 28px;
}

.city-copy {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 500;
  color: var(--near-black);
  line-height: 1.65;
  max-width: 560px;
  white-space: normal;
  text-align: center;
  margin: 0 auto;
  text-shadow:
    0 0 20px rgba(248, 233, 160, 0.95),
    0 0 40px rgba(248, 233, 160, 0.70);
}

/* ── Editorial poster character composition ── */
.city-story__characters {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 15;
  pointer-events: none;
  user-select: none;
}

.character {
  position: absolute;
}

.character img {
  display: block;
  width: 100%;
  height: auto;
}

/* MERCHANT — entering left frame, upper body / torso only, hip+legs cropped */
.character--merchant {
  width: 416px;
  top: 424px;
  left: -93px;
  z-index: 2;
}

/* CUSTOMER (jumping boy) — large, arm prominent, lower body cropped at bottom */
.character--customer {
  width: 479px;
  top: 514px;
  left: 135px;
  z-index: 4;
}

/* CENTER MAN (man+bags) — primary anchor; centered, bag in foreground */
.character--center {
  width: 642px;
  top: 343px;
  left: 399px;
  z-index: 3;
}

/* RIDER — aggressively cropped right and bottom; face/handlebars visible */
.character--rider {
  width: 496px;
  top: 534px;
  right: -140px;
  z-index: 2;
}

/* Drop-shadows follow the transparent PNG silhouette — two layers: contact + ambient */
.character--merchant img {
  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,0.26))
    drop-shadow(0 24px 48px rgba(0,0,0,0.20));
}
.character--customer img {
  filter:
    drop-shadow(0 5px 6px rgba(0,0,0,0.20))
    drop-shadow(0 20px 40px rgba(0,0,0,0.17));
}
.character--center img {
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,0.28))
    drop-shadow(0 30px 60px rgba(0,0,0,0.22));
}
.character--rider img {
  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,0.24))
    drop-shadow(0 24px 48px rgba(0,0,0,0.18));
}

/* ─────────────────────────────────────────────────
   SECTION 3 — CUSTOMERS
   Clean editorial · cream bg · ORDER + character
───────────────────────────────────────────────── */
.customer-section {
  position: relative;
  background: var(--cream);
  min-height: 680px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.customer-section__content {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-inline: var(--outer);
}

/* ── Left copy column ~58% ── */
.customer-section__copy {
  flex: 0 0 58%;
  max-width: 58%;
  padding-right: 40px;
  padding-top: 80px;
  padding-bottom: 80px;
  z-index: 2;
}

.cust-order-word {
  font-family: var(--font-display);
  font-size: 92px;
  color: var(--orange);
  line-height: 0.88;
  letter-spacing: -3px;
  margin-bottom: 16px;
}

.cust-headline {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.0;
  letter-spacing: -1.5px;
  margin-bottom: 36px;
  max-width: 660px;
}

.cust-hl-black { color: var(--near-black); }
.cust-hl-orange { color: var(--orange); }

.cust-body {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--near-black);
  max-width: 440px;
  margin: 0;
}

.cust-features {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  margin-bottom: 40px;
}
.cust-feature {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.cust-feature__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.cust-feature__label {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 3px;
  letter-spacing: -0.2px;
}
.cust-feature__desc {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(28,18,9,0.62);
}

.cust-statement {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--near-black);
  max-width: 440px;
  margin-top: 28px;
  margin-bottom: 40px;
}

.cust-badges {
  display: flex;
  gap: 14px;
  align-items: center;
}

.cust-badge {
  display: block;
  text-decoration: none;
  transition: opacity 0.2s;
}
.cust-badge:hover { opacity: 0.85; }
.cust-badge svg { display: block; }

/* ── Right character column ~42% ── */
.customer-section__visual {
  flex: 1;
  position: relative;
  align-self: stretch;
  min-height: 100%;
}

.cust-character {
  position: absolute;
  bottom: -410px;
  right: -10px;
  height: 1056px;
  width: auto;
  display: block;
  /* Fade dark halo into cream background */
  -webkit-mask-image: radial-gradient(ellipse 82% 88% at 50% 42%, black 52%, transparent 80%);
  mask-image:         radial-gradient(ellipse 82% 88% at 50% 42%, black 52%, transparent 80%);
}

/* ─────────────────────────────────────────────────
   CHARACTER IMAGES
   Absolute positioned — intentional grid-column crossing
   z-index ladder: bg (0) → girl (3) → text (5) → rider (9)
───────────────────────────────────────────────── */
/* Transparent wrapper on desktop — characters still position relative to hero section */
.hero-char-col {
  display: contents;
}

.char {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Rider — dominant right · visual zone ~52–58% from left
   height 940px > hero — dramatic top+bottom crop */
.char-rider {
  right: 20px;
  top: 60px;
  height: 804px;
  width: auto;
  z-index: 9;
}

/* Girl — below-left of rider, duo composition */
.char-girl {
  left: 518px;
  bottom: -121px;
  height: 588px;
  width: auto;
  z-index: 10; /* above rider (9) — girl is in front */
  -webkit-mask-image: radial-gradient(ellipse 86% 88% at 50% 38%, black 52%, transparent 84%);
  mask-image:         radial-gradient(ellipse 86% 88% at 50% 38%, black 52%, transparent 84%);
}

/* ═══════════════════════════════════════════════════
   SECTION 4 — RIDERS
═══════════════════════════════════════════════════ */
.riders-section {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  display: flex;
  align-items: stretch;
  background-color: #000;
}

/* Layer 1: background illustration — city-bg darkened to night */
.riders-bg {
  position: absolute;
  inset: 0;
  background: url('assets/scene-gb.png') center center / cover no-repeat;
  background-image: image-set(url('assets/webp/scene-gb-sm.webp') type('image/webp'), url('assets/scene-gb.png') type('image/png'));
  z-index: 0;
}

/* Layer 2: dark gradient so right-side text stays readable */
.riders-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(6, 8, 22, 0.55) 0%,
    rgba(6, 8, 22, 0.30) 42%,
    rgba(6, 8, 22, 0.70) 58%,
    rgba(6, 8, 22, 0.80) 100%
  );
  z-index: 1;
}

/* Layer 3: rider character — anchored bottom-left, crops at section edges */
.riders-character {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.riders-char-img {
  position: absolute;
  bottom: 0;
  left: -50px;
  height: 87%;
  width: auto;
  display: block;
}

/* Layer 4: text content — right half */
.riders-content {
  position: relative;
  z-index: 3;
  margin-left: 46%;
  padding: 72px var(--outer) 72px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 620px;
}

/* DELIVER eyebrow */
.riders-eyebrow {
  font-family: var(--font-display);
  font-size: 92px;
  color: var(--cream);
  line-height: 0.88;
  letter-spacing: -3px;
  margin-bottom: 12px;
}

/* Main headline */
.riders-headline {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 28px;
}
.riders-hl-white  { color: var(--cream); }
.riders-hl-orange { color: var(--orange); }

/* Supporting body copy */
.riders-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.72;
  color: rgba(250,246,239,0.82);
  margin-bottom: 18px;
}

/* Secondary callout */
.riders-callout {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 36px;
}
.riders-callout-white  { color: var(--cream); }
.riders-callout-orange {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}
.riders-callout-orange:hover { text-decoration: underline; }

/* Benefits row */
.riders-benefits {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 44px;
}

.riders-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.riders-benefit__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.riders-benefit__copy { display: flex; flex-direction: column; gap: 3px; }

.riders-benefit__label {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
}

.riders-benefit__desc {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(250,246,239,0.60);
}

/* CTA button */
.riders-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  padding: 15px 32px;
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s, transform 0.15s;
}
.riders-cta:hover { background: #fff; color: var(--orange); border-color: transparent; transform: translateX(2px); }
.riders-cta svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   RIDER MODAL
═══════════════════════════════════════════════════ */

/* Scroll lock */
body.modal-open { overflow: hidden; }

/* Backdrop + centering wrapper */
.rider-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2000;
  padding: 40px 24px;
  overflow-y: auto;
}
.rider-modal-wrap[aria-hidden="true"] { display: none; }

/* Modal panel */
.rider-modal {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 820px;
  background: var(--cream);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

/* Close button */
.rider-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(28,18,9,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--near-black);
  z-index: 10;
  transition: background 0.15s;
}
.rider-modal__close:hover { background: rgba(28,18,9,0.15); }

/* Left: form column */
.rider-modal__main {
  flex: 1;
  padding: 40px 36px 40px 40px;
  min-width: 0;
}

/* Heading */
.rider-modal__heading {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--near-black);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

/* Subhead */
.rider-modal__subhead {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(28,18,9,0.65);
  margin-bottom: 28px;
}

/* Form grid — 2 columns */
.rider-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 16px;
}

.rider-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rider-form__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
}

.rider-form__req    { color: var(--orange); }
.rider-form__optional {
  font-weight: 400;
  color: rgba(28,18,9,0.45);
  font-size: 12px;
}

.rider-form__input {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(28,18,9,0.15);
  border-radius: 10px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.15s;
}
.rider-form__input::placeholder { color: rgba(28,18,9,0.35); }
.rider-form__input:focus { border-color: var(--orange); }
.rider-form__input--error { border-color: #dc2626; }

/* Select wrapper */
.rider-form__select-wrap {
  position: relative;
}
.rider-form__select {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(28,18,9,0.15);
  border-radius: 10px;
  padding: 10px 36px 10px 13px;
  width: 100%;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.rider-form__select:focus { border-color: var(--orange); }
.rider-form__select--error { border-color: #dc2626; }
.rider-form__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(28,18,9,0.45);
}

/* Error messages */
.rider-form__error {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: #dc2626;
  min-height: 14px;
}

/* Radio row */
.rider-form__radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 16px;
}

.rider-form__radios {
  display: flex;
  gap: 20px;
  margin-top: 2px;
}

.rider-form__radio-label {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.rider-form__radio-label input[type="radio"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
}

/* Consent */
.rider-form__consent {
  margin-bottom: 24px;
}
.rider-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(28,18,9,0.75);
  cursor: pointer;
}
.rider-form__checkbox-label input[type="checkbox"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Submit button */
.rider-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  padding: 13px 28px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.rider-form__submit:hover { background: #e05520; transform: translateX(2px); }

/* ── Success view ── */
.rider-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  min-height: 400px;
}
.rider-modal__success-icon { margin-bottom: 20px; }
.rider-modal__success-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--near-black);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  outline: none;
}
.rider-modal__success-body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(28,18,9,0.65);
  margin-bottom: 32px;
}
.rider-modal__success-close {
  background: var(--orange);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  padding: 13px 40px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s;
}
.rider-modal__success-close:hover { background: #e05520; }

/* ── Right sidebar ── */
.rider-modal__sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rider-modal__sidebar-helmet {
  margin-bottom: 20px;
}
.rider-modal__helmet-img {
  width: 120px;
  height: auto;
  display: block;
  filter: invert(42%) sepia(80%) saturate(600%) hue-rotate(340deg) brightness(95%);
}

.rider-modal__sidebar-heading {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--near-black);
  letter-spacing: -0.2px;
  text-align: center;
  margin-bottom: 20px;
}

.rider-modal__sidebar-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.rider-modal__sidebar-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rider-modal__sidebar-benefits svg { flex-shrink: 0; margin-top: 2px; }
.rider-modal__sidebar-benefits strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--near-black);
  margin-bottom: 2px;
}
.rider-modal__sidebar-benefits span {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(28,18,9,0.55);
}

/* ═══════════════════════════════════════════════════
   MERCHANT SECTION
═══════════════════════════════════════════════════ */

.merchant-section {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* Storefront scene layer — absolute behind content */
.merchant-section__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* INSERT: background-image: url('assets/merchant-scene.png') center right / auto 100% no-repeat; */
}

/* Inner flex row */
.merchant-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-inline: var(--outer);
}

/* Left copy column */
.merchant-section__copy {
  flex: 0 0 56%;
  max-width: 56%;
  padding-right: 48px;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* SELL — same scale as ORDER / DELIVER / DELIVERED */
.merchant-sell-word {
  font-family: var(--font-display);
  font-size: 92px;
  color: var(--orange);
  line-height: 0.88;
  letter-spacing: -3px;
  margin-bottom: 14px;
}

/* Supporting headline */
.merchant-headline {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -1px;
  margin-bottom: 28px;
}
.merchant-hl-dark   { color: var(--near-black); }
.merchant-hl-orange { color: var(--orange); }

/* Body copy */
.merchant-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.72;
  color: var(--near-black);
  max-width: 520px;
  margin-bottom: 20px;
}

/* Statement */
.merchant-statement {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.72;
  color: var(--near-black);
  max-width: 520px;
  margin-bottom: 40px;
}

/* Benefits — 2 items, matches cust-feature checkmark format */
.merchant-benefits {
  display: flex;
  gap: 28px;
  margin-bottom: 44px;
}

.merchant-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.merchant-benefit__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.merchant-benefit__text { display: flex; flex-direction: column; gap: 3px; }

.merchant-benefit__label {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--near-black);
}

.merchant-benefit__desc {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(28,18,9,0.62);
}

/* CTA */
.merchant-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  padding: 15px 32px;
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s, transform 0.15s;
}
.merchant-cta:hover { background: var(--near-black); color: #fff; border-color: transparent; transform: translateX(2px); }
.merchant-cta svg { flex-shrink: 0; }

/* Right: visual — absolute within section, right half */
.merchant-section__visual {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 52%;
  overflow: hidden;
  pointer-events: none;
}

.merchant-character {
  position: absolute;
  inset: 0;
}

.merchant-char-img {
  position: absolute;
  bottom: 20%;
  left: 60%;
  transform: translateX(-50%);
  height: 80%;
  width: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════
   MERCHANT MODAL
═══════════════════════════════════════════════════ */

/* Backdrop + centering wrapper */
.merchant-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2000;
  padding: 40px 24px;
  overflow-y: auto;
}
.merchant-modal-wrap[aria-hidden="true"] { display: none; }

/* Modal panel */
.merchant-modal {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 860px;
  background: var(--cream);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

/* Close button */
.merchant-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(28,18,9,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--near-black);
  z-index: 10;
  transition: background 0.15s;
}
.merchant-modal__close:hover { background: rgba(28,18,9,0.15); }

/* Left: form column */
.merchant-modal__main {
  flex: 1;
  padding: 40px 36px 40px 40px;
  min-width: 0;
}

/* Heading */
.merchant-modal__heading {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--near-black);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

/* Subhead */
.merchant-modal__subhead {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(28,18,9,0.65);
  margin-bottom: 28px;
}

/* Form grid — 2 columns */
.merchant-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 16px;
}

.merchant-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.merchant-form__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
}

.merchant-form__req     { color: var(--orange); }
.merchant-form__optional {
  font-weight: 400;
  color: rgba(28,18,9,0.45);
  font-size: 12px;
}

.merchant-form__input {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(28,18,9,0.15);
  border-radius: 10px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.15s;
}
.merchant-form__input::placeholder { color: rgba(28,18,9,0.35); }
.merchant-form__input:focus { border-color: var(--orange); }
.merchant-form__input--error { border-color: #dc2626; }

/* Select wrapper */
.merchant-form__select-wrap { position: relative; }
.merchant-form__select {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(28,18,9,0.15);
  border-radius: 10px;
  padding: 10px 36px 10px 13px;
  width: 100%;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.merchant-form__select:focus { border-color: var(--orange); }
.merchant-form__select--error { border-color: #dc2626; }
.merchant-form__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(28,18,9,0.45);
}

/* Error messages */
.merchant-form__error {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: #dc2626;
  min-height: 14px;
}

/* Radio row */
.merchant-form__radio-row {
  margin-bottom: 16px;
}

.merchant-form__radios {
  display: flex;
  gap: 20px;
  margin-top: 2px;
}

.merchant-form__radio-label {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.merchant-form__radio-label input[type="radio"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
}

/* Consent */
.merchant-form__consent { margin-bottom: 24px; }
.merchant-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(28,18,9,0.75);
  cursor: pointer;
}
.merchant-form__checkbox-label input[type="checkbox"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Submit button */
.merchant-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  padding: 13px 28px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.merchant-form__submit:hover { background: #e05520; transform: translateX(2px); }

/* ── Success view ── */
.merchant-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  min-height: 400px;
}
.merchant-modal__success-icon { margin-bottom: 20px; }
.merchant-modal__success-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--near-black);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  outline: none;
}
.merchant-modal__success-body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(28,18,9,0.65);
  margin-bottom: 32px;
}
.merchant-modal__success-close {
  background: var(--orange);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  padding: 13px 40px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s;
}
.merchant-modal__success-close:hover { background: #e05520; }

/* ── Right sidebar ── */
.merchant-modal__sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.merchant-modal__sidebar-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 107, 53, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.merchant-modal__sidebar-heading {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--near-black);
  letter-spacing: -0.2px;
  text-align: center;
  margin-bottom: 20px;
}

.merchant-modal__sidebar-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.merchant-modal__sidebar-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.merchant-modal__sidebar-benefits svg { flex-shrink: 0; margin-top: 2px; }
.merchant-modal__sidebar-benefits strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--near-black);
  margin-bottom: 2px;
}
.merchant-modal__sidebar-benefits span {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(28,18,9,0.55);
}

/* ═══════════════════════════════════════════════════
   TERRITORY PARTNER SECTION — GROW
═══════════════════════════════════════════════════ */

.partner-section {
  position: relative;
  background: #FEFAE8;
  overflow: hidden;
  min-height: 860px;
}


/* Inner flex row — no padding-inline; visual column bleeds to edge */
.partner-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 860px;
}

/* LEFT: visual column — in flex flow so it anchors the left half */
.partner-section__visual {
  flex: 0 0 46%;
  position: relative;
  min-height: 860px;
  overflow: hidden;
}

/* Network SVG illustration — fills the visual column */
.partner-section__network {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.partner-network-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Character — positioned within the visual column */
.partner-character {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.partner-char-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 92%;
  width: auto;
  display: block;
}

/* RIGHT: copy column */
.partner-section__copy {
  flex: 1;
  padding-left: 60px;
  padding-right: var(--outer);
  padding-top: 80px;
  padding-bottom: 80px;
  max-width: 54%;
}

/* GROW — exact same scale as ORDER / DELIVER / SELL */
.partner-grow-word {
  font-family: var(--font-display);
  font-size: 92px;
  color: var(--orange);
  line-height: 0.88;
  letter-spacing: -3px;
  margin-bottom: 14px;
}

/* Supporting headline — same scale as merchant-headline */
.partner-headline {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -1px;
  margin-bottom: 28px;
}
.partner-hl-dark   { color: var(--near-black); }
.partner-hl-orange { color: var(--orange); }

/* Body copy */
.partner-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.72;
  color: var(--near-black);
  max-width: 480px;
  margin-bottom: 20px;
}

/* Statement */
.partner-statement {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.72;
  color: rgba(28,18,9,0.60);
  max-width: 480px;
  margin-bottom: 40px;
}

/* Benefits — 3 vertical items */
.partner-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 44px;
}

.partner-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.partner-benefit__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.partner-benefit__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.partner-benefit__label {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--near-black);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.partner-benefit__desc {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(28,18,9,0.58);
}

/* CTA */
.partner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  padding: 15px 32px;
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.partner-cta:hover { background: var(--near-black); transform: translateX(2px); }
.partner-cta svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   TERRITORY PARTNER MODAL
═══════════════════════════════════════════════════ */

.partner-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2000;
  padding: 40px 24px;
  overflow-y: auto;
}
.partner-modal-wrap[aria-hidden="true"] { display: none; }

.partner-modal {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 860px;
  background: var(--cream);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.partner-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(28,18,9,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--near-black);
  z-index: 10;
  transition: background 0.15s;
}
.partner-modal__close:hover { background: rgba(28,18,9,0.15); }

.partner-modal__main {
  flex: 1;
  padding: 40px 36px 40px 40px;
  min-width: 0;
}

.partner-modal__heading {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--near-black);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.partner-modal__subhead {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(28,18,9,0.65);
  margin-bottom: 28px;
}

/* 2-col form grid */
.partner-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 16px;
}

.partner-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.partner-form__field--wide {
  margin-bottom: 16px;
}

.partner-form__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
}

.partner-form__req     { color: var(--orange); }
.partner-form__optional {
  font-weight: 400;
  color: rgba(28,18,9,0.45);
  font-size: 12px;
}

.partner-form__input {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(28,18,9,0.15);
  border-radius: 10px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.15s;
}
.partner-form__input::placeholder { color: rgba(28,18,9,0.35); }
.partner-form__input:focus { border-color: var(--orange); }
.partner-form__input--error { border-color: #dc2626; }

.partner-form__select-wrap { position: relative; }
.partner-form__select {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(28,18,9,0.15);
  border-radius: 10px;
  padding: 10px 36px 10px 13px;
  width: 100%;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.partner-form__select:focus { border-color: var(--orange); }
.partner-form__select--error { border-color: #dc2626; }
.partner-form__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(28,18,9,0.45);
}

.partner-form__error {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: #dc2626;
  min-height: 14px;
}

.partner-form__textarea {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(28,18,9,0.15);
  border-radius: 10px;
  padding: 10px 13px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s;
}
.partner-form__textarea::placeholder { color: rgba(28,18,9,0.35); }
.partner-form__textarea:focus { border-color: var(--orange); }

/* Radio section — stacked question rows */
.partner-form__radio-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.partner-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 4px;
}

.partner-form__radio-label {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--near-black);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.partner-form__radio-label input[type="radio"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
}

/* Consent */
.partner-form__consent { margin-bottom: 24px; }
.partner-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(28,18,9,0.75);
  cursor: pointer;
}
.partner-form__checkbox-label input[type="checkbox"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Submit */
.partner-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  padding: 13px 28px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.partner-form__submit:hover { background: #e05520; transform: translateX(2px); }

/* Success view */
.partner-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  min-height: 400px;
}
.partner-modal__success-icon { margin-bottom: 20px; }
.partner-modal__success-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--near-black);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  outline: none;
}
.partner-modal__success-body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(28,18,9,0.65);
  margin-bottom: 32px;
}
.partner-modal__success-close {
  background: var(--orange);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  padding: 13px 40px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s;
}
.partner-modal__success-close:hover { background: #e05520; }

/* Right sidebar */
.partner-modal__sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partner-modal__sidebar-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,107,53,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.partner-modal__sidebar-heading {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--near-black);
  letter-spacing: -0.2px;
  text-align: center;
  margin-bottom: 20px;
}

.partner-modal__sidebar-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.partner-modal__sidebar-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.partner-modal__sidebar-benefits svg { flex-shrink: 0; margin-top: 2px; }
.partner-modal__sidebar-benefits strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--near-black);
  margin-bottom: 2px;
}
.partner-modal__sidebar-benefits span {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(28,18,9,0.55);
}

/* ═══════════════════════════════════════════════════
   ABOUT ZAKTOO SECTION
═══════════════════════════════════════════════════ */

.about-section {
  position: relative;
  background: var(--near-black);
  overflow: hidden;
}

/* Main content wrapper */
.about-section__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px var(--outer);
}

/* Two-column intro */
.about-section__intro {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 96px;
}

/* LEFT: headline column */
.about-section__headline {
  flex: 0 0 38%;
}

.about-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.45);
  margin-bottom: 28px;
}

.about-title {
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 0.92;
  letter-spacing: -2px;
  margin: 0;
}
.about-title__top {
  color: #FAF6EF;
  display: block;
}
.about-title__accent {
  color: var(--orange);
  display: block;
}

/* RIGHT: story column */
.about-section__story {
  flex: 1;
  max-width: 580px;
}

.about-body {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.78;
  color: rgba(250, 246, 239, 0.68);
  margin-bottom: 28px;
}
.about-body:last-child {
  margin-bottom: 0;
}

/* Bottom value statements */
.about-section__values {
  display: flex;
  border-top: 1px solid rgba(250, 246, 239, 0.1);
  padding-top: 48px;
}

.about-value {
  flex: 1;
  padding-right: 40px;
}
.about-value + .about-value {
  padding-left: 40px;
  padding-right: 40px;
  border-left: 1px solid rgba(250, 246, 239, 0.12);
}
.about-value:last-child {
  padding-right: 0;
}

.about-value__label {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.5px;
  color: #FAF6EF;
  display: block;
}

/* ═══════════════════════════════════════════════════
   FAQ SECTION
═══════════════════════════════════════════════════ */

.faq-section {
  background: var(--cream);
  position: relative;
}

.faq-section__inner {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  padding: 110px var(--outer) 120px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Left: sticky editorial heading column ── */
.faq-section__heading-col {
  flex: 0 0 30%;
  position: sticky;
  top: 120px;
  align-self: flex-start;
  padding-top: 14px;
}

.faq-display {
  line-height: 0.88;
  letter-spacing: -3px;
  margin-bottom: 28px;
}

.faq-display__zaktoo {
  font-family: var(--font-display);
  font-size: 38px;
  color: var(--near-black);
  display: block;
}

.faq-display__faq {
  font-family: var(--font-display);
  font-size: 96px;
  color: var(--orange);
  display: block;
}

.faq-tagline {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(26, 26, 26, 0.5);
  font-weight: 500;
}

/* ── Right: accordion column ── */
.faq-section__accordion-col {
  flex: 1;
  min-width: 0;
}

/* ── Single FAQ item ── */
.faq-item {
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.faq-item:last-child {
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}

/* ── Trigger (question row) ── */
.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  outline: none;
}
.faq-trigger:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-question {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--near-black);
  line-height: 1.3;
  transition: color 0.2s ease;
}

/* Hover: question shifts to orange */
.faq-trigger:hover .faq-question {
  color: var(--orange);
}
.faq-trigger[aria-expanded="true"] .faq-question {
  color: var(--near-black);
}

/* ── Plus / minus icon ── */
.faq-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.faq-trigger:hover .faq-icon { color: var(--orange); }

/* Horizontal bar — always visible */
.faq-icon::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  background: var(--near-black);
  transition: background 0.2s ease;
}
.faq-trigger:hover .faq-icon::before { background: var(--orange); }

/* Vertical bar — visible only when collapsed */
.faq-icon::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 18px;
  background: var(--near-black);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
}
.faq-trigger:hover .faq-icon::after { background: var(--orange); }

/* When open: rotate vertical bar to zero (hide it as minus) */
.faq-trigger[aria-expanded="true"] .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* ── Answer panel ── */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-panel[data-open] {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .faq-panel { transition: none; }
  .faq-icon::after { transition: none; }
  .faq-question { transition: none; }
}

.faq-panel__inner {
  overflow: hidden;
}

.faq-answer {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.78;
  color: rgba(26, 26, 26, 0.7);
  padding-bottom: 36px;
  max-width: 700px;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 860px) {
  .faq-section__inner {
    flex-direction: column;
    gap: 48px;
    padding: 72px var(--outer) 80px;
  }
  .faq-section__heading-col {
    position: static;
    flex: none;
  }
  .faq-display__zaktoo { font-size: 38px; }
  .faq-display__faq    { font-size: 72px; }
  .faq-question        { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════
   DOWNLOAD THE APP SECTION
═══════════════════════════════════════════════════ */

.download-section {
  position: relative;
  background: var(--orange);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 720px;
}

/* Subtle background depth shapes */
.download-bg-shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Main inner layout */
.download-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 80px var(--outer);
  gap: 0;
}

/* ── LEFT: copy column ── */
.download-copy {
  flex: 0 0 46%;
  padding-right: 48px;
}

/* Main headline */
.download-headline {
  font-family: var(--font-display);
  line-height: 1.0;
  letter-spacing: -1px;
  margin-bottom: 24px;
}
.dl-word-download {
  font-size: 38px;
  color: var(--cream);
  display: block;
}
.dl-word-zaktoo {
  font-size: 86px;
  color: var(--near-black);
  line-height: 0.88;
  letter-spacing: -3px;
  display: block;
}

/* Supporting display line */
.download-subline {
  font-family: var(--font-display);
  line-height: 1.0;
  letter-spacing: -1px;
  margin-bottom: 28px;
}
.dl-sub-city {
  font-size: 32px;
  color: var(--near-black);
  display: block;
}
.dl-sub-pocket {
  font-size: 32px;
  color: var(--cream);
  display: block;
}

/* Body copy */
.download-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.72;
  color: rgba(250, 246, 239, 0.82);
  margin-bottom: 8px;
}
.download-body:last-of-type {
  margin-bottom: 44px;
}

/* Store badges */
.download-badges {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.download-badge {
  display: inline-flex;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.download-badge:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* ── RIGHT: phone visual column ── */
.download-visual {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.download-app-img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin-top: 195px;
}

/* Shared phone styles */
.download-phone {
  position: absolute;
  bottom: 0;
}

.phone-frame {
  background: #111;
  border-radius: 36px;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  width: 80px;
  height: 22px;
  background: #111;
  border-radius: 0 0 14px 14px;
  align-self: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.phone-screen {
  flex: 1;
  background: #FAF6EF;
  overflow: hidden;
}

/* Placeholder content (remove when real screenshots added) */
.phone-screen-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #F0E9DC;
}
.phone-screen-placeholder span {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(26,26,26,0.25);
  text-transform: uppercase;
}
.phone-screen-placeholder--front {
  background: #FAF6EF;
}
.phone-placeholder-logo {
  width: 64px;
  height: 64px;
  opacity: 0.15;
}

/* Back phone: smallest, furthest right, cropped */
.download-phone--back {
  right: -30px;
  bottom: -50px;
  z-index: 1;
}
.download-phone--back .phone-frame {
  width: 230px;
  height: 480px;
}

/* Middle phone: mid-size, offset */
.download-phone--middle {
  right: 180px;
  bottom: -24px;
  z-index: 2;
}
.download-phone--middle .phone-frame {
  width: 260px;
  height: 540px;
}

/* Front phone: largest, dominant */
.download-phone--front {
  left: 0;
  bottom: 0;
  z-index: 3;
}
.download-phone--front .phone-frame {
  width: 300px;
  height: 620px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .download-section__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 72px var(--outer) 0;
  }
  .download-copy {
    flex: none;
    padding-right: 0;
    width: 100%;
  }
  .dl-word-download,
  .dl-word-zaktoo { font-size: 60px; }
  .dl-sub-city,
  .dl-sub-pocket  { font-size: 24px; }
  .download-visual {
    width: 100%;
    height: 400px;
    margin-top: 40px;
  }
  .download-phone--back   { right: 0; }
  .download-phone--middle { right: 80px; }
  .download-phone--front  { right: 160px; }
  .download-phone--back .phone-frame   { width: 160px; height: 330px; }
  .download-phone--middle .phone-frame { width: 185px; height: 380px; }
  .download-phone--front .phone-frame  { width: 210px; height: 440px; }
}


/* ═══════════════════════════════════════════════════
   SITE FOOTER
═══════════════════════════════════════════════════ */

.site-footer {
  background: var(--near-black);
  color: var(--cream);
  padding-top: 72px;
}

/* Main column grid */
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--outer) 64px;
  align-items: start;
}

/* ── Brand column ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.footer-logo-link {
  display: inline-block;
  width: fit-content;
  margin-top: -12px;
}

.footer-logo {
  height: 97px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.footer-tagline {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(250, 246, 239, 0.55);
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-top: -5px;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: rgba(250, 246, 239, 0.45);
  background: rgba(250, 246, 239, 0.06);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.footer-social__link:hover {
  color: var(--cream);
  background: rgba(255, 107, 53, 0.18);
}

.footer-social__link[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Nav columns ── */
.footer-nav-col__heading {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--orange);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.footer-nav-col__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-col__link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(250, 246, 239, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-block;
}

.footer-nav-col__link:hover {
  color: var(--cream);
}

.footer-nav-col__link--pending {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Store buttons */
.footer-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: rgba(250, 246, 239, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-store-btn:hover {
  color: var(--cream);
}

.footer-store-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Legal row ── */
.footer-legal {
  border-top: 1px solid rgba(250, 246, 239, 0.08);
  margin-top: 0;
}

.footer-legal__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px var(--outer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(250, 246, 239, 0.35);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-legal-link {
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(250, 246, 239, 0.4);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.footer-legal-link:hover {
  color: rgba(250, 246, 239, 0.85);
}

.footer-legal-link--btn {
  font-size: 13px;
  font-family: var(--font-ui);
}

/* ── Footer responsive ── */
@media (max-width: 960px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .site-footer { padding-top: 56px; }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 48px;
  }
  .footer-brand { grid-column: auto; }
  .footer-legal__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-legal-links { gap: 16px; }
}


/* ═══════════════════════════════════════════════════
   COOKIE CONSENT BANNER
═══════════════════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  width: calc(100% - 48px);
  max-width: 720px;
  background: var(--cream);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(26, 26, 26, 0.22), 0 2px 8px rgba(26, 26, 26, 0.08);
  overflow: hidden;
}

.cookie-banner__inner {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cookie-banner__title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--near-black);
  margin-bottom: 8px;
}

.cookie-banner__body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.7);
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Cookie buttons (shared + banner + modal) ── */
.cookie-btn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 11px 22px;
  transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease;
  white-space: nowrap;
}

.cookie-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.cookie-btn:active { transform: translateY(0); }

.cookie-btn--primary {
  background: var(--orange);
  color: #fff;
}

.cookie-btn--secondary {
  background: rgba(26, 26, 26, 0.1);
  color: var(--near-black);
}

.cookie-btn--text {
  background: transparent;
  color: rgba(26, 26, 26, 0.6);
  padding-left: 4px;
  padding-right: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-btn--text:hover { opacity: 1; transform: none; color: var(--near-black); }

/* ── Banner responsive ── */
@media (max-width: 600px) {
  .cookie-banner {
    bottom: 12px;
    width: calc(100% - 24px);
    border-radius: 12px;
  }
  .cookie-banner__inner { padding: 22px 20px; gap: 16px; }
  .cookie-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__actions .cookie-btn { text-align: center; }
  .cookie-btn--text { text-align: center; padding: 11px 22px; }
}


/* ═══════════════════════════════════════════════════
   COOKIE PREFERENCES MODAL
═══════════════════════════════════════════════════ */

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.72);
  backdrop-filter: blur(2px);
}

.cookie-modal__panel {
  position: relative;
  background: var(--cream);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(26, 26, 26, 0.3);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 40px;
}

.cookie-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(26, 26, 26, 0.07);
  border: none;
  border-radius: 8px;
  color: rgba(26, 26, 26, 0.5);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cookie-modal__close:hover {
  background: rgba(26, 26, 26, 0.12);
  color: var(--near-black);
}

.cookie-modal__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--near-black);
  margin-bottom: 10px;
  padding-right: 40px;
}

.cookie-modal__subtext {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.65);
  margin-bottom: 32px;
}

/* ── Categories ── */
.cookie-modal__categories {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 28px;
}

.cookie-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  background: #fff;
}

.cookie-category + .cookie-category {
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.cookie-category__info { flex: 1; min-width: 0; }

.cookie-category__name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 4px;
}

.cookie-category__desc {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.6);
}

.cookie-category__always-on {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Toggle switch ── */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cookie-toggle__track {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.15);
  border-radius: 26px;
  transition: background 0.2s ease;
}

.cookie-toggle__track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(26,26,26,0.2);
  transition: transform 0.2s ease;
}

.cookie-toggle input:checked + .cookie-toggle__track {
  background: var(--orange);
}

.cookie-toggle input:checked + .cookie-toggle__track::after {
  transform: translateX(20px);
}

.cookie-toggle input:focus-visible + .cookie-toggle__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 26px;
}

/* ── Modal footer buttons ── */
.cookie-modal__footer {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-modal__footer .cookie-btn--primary { flex: 1; text-align: center; }
.cookie-modal__footer .cookie-btn--secondary { flex: 1; text-align: center; }

/* ── Modal responsive ── */
@media (max-width: 600px) {
  .cookie-modal { padding: 16px; align-items: flex-end; }
  .cookie-modal__panel {
    border-radius: 16px 16px 12px 12px;
    padding: 28px 22px;
    max-height: 82vh;
  }
  .cookie-modal__footer { flex-direction: column; }
  .cookie-modal__footer .cookie-btn { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .cookie-modal__panel { transition: none; }
  .cookie-toggle__track, .cookie-toggle__track::after { transition: none; }
}

/* ═══════════════════════════════════════════════════
   LEGAL MODAL SYSTEM
═══════════════════════════════════════════════════ */

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.78);
  backdrop-filter: blur(2px);
}

.legal-modal__panel {
  position: relative;
  background: var(--cream);
  border-radius: 20px;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(26, 26, 26, 0.32);
  overflow: hidden;
}

/* Sticky header */
.legal-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px 20px;
  border-bottom: 1.5px solid rgba(26, 26, 26, 0.1);
  flex-shrink: 0;
  background: var(--cream);
}

.legal-modal__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--near-black);
  letter-spacing: 0.03em;
}

.legal-modal__meta {
  display: flex;
  gap: 24px;
  padding: 12px 36px 14px;
  background: var(--cream);
  flex-shrink: 0;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.5);
  font-weight: 500;
  border-bottom: 1.5px solid rgba(26, 26, 26, 0.07);
}

.legal-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(26, 26, 26, 0.07);
  color: var(--near-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.legal-modal__close:hover { background: rgba(26, 26, 26, 0.13); }
.legal-modal__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Scrollable body */
.legal-modal__body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* TOC sidebar */
.legal-modal__toc {
  width: 220px;
  flex-shrink: 0;
  padding: 28px 20px 28px 28px;
  overflow-y: auto;
  border-right: 1.5px solid rgba(26, 26, 26, 0.07);
}

.legal-toc__heading {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}

.legal-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-toc__link {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.6);
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.12s, color 0.12s;
}
.legal-toc__link:hover {
  background: rgba(255, 107, 53, 0.08);
  color: var(--orange);
}
.legal-toc__link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Document content area */
.legal-modal__content {
  flex: 1;
  overflow-y: auto;
  padding: 36px 40px 48px;
  scroll-behavior: smooth;
}

/* -- Legal Document Typography -- */
.legal-doc {
  max-width: 720px;
  line-height: 1.7;
  color: var(--near-black);
}

.legal-doc h2 {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--near-black);
  margin-top: 36px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.legal-doc h2:first-child { margin-top: 0; }

.legal-doc h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--near-black);
  margin-top: 24px;
  margin-bottom: 10px;
}

.legal-doc p {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 14px;
  color: rgba(26, 26, 26, 0.85);
}

.legal-doc ul, .legal-doc ol {
  margin: 0 0 14px 0;
  padding-left: 24px;
}

.legal-doc li {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 6px;
  color: rgba(26, 26, 26, 0.85);
}

.legal-doc a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc a:hover { opacity: 0.8; }

.legal-placeholder {
  background: rgba(255, 107, 53, 0.1);
  border: 1.5px dashed rgba(255, 107, 53, 0.4);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 14px;
}

.legal-notice {
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.35);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--near-black);
  margin-bottom: 14px;
}

/* -- Mobile legal modal -- */
@media (max-width: 768px) {
  .legal-modal {
    padding: 0;
    align-items: flex-end;
  }
  .legal-modal__panel {
    border-radius: 20px 20px 0 0;
    max-height: 94vh;
    max-width: 100%;
  }
  .legal-modal__header { padding: 22px 20px 16px; }
  .legal-modal__meta { padding: 10px 20px 12px; }
  .legal-modal__toc { display: none; }
  .legal-modal__content { padding: 24px 20px 40px; }
  .legal-doc p, .legal-doc li { font-size: 15px; }
}

/* -- Legal standalone page -- */
.legal-page {
  min-height: 100vh;
  background: var(--cream);
  color: var(--near-black);
}

.legal-page__header {
  background: var(--near-black);
  padding: 24px var(--outer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legal-page__logo {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.legal-page__back {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(250, 246, 239, 0.7);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.15s;
}
.legal-page__back:hover { color: var(--cream); }
.legal-page__back:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }

.legal-page__hero {
  background: var(--near-black);
  padding: 56px var(--outer) 48px;
  border-bottom: 1px solid rgba(250, 246, 239, 0.08);
}

.legal-page__hero-title {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--cream);
  margin-bottom: 12px;
}

.legal-page__hero-meta {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: rgba(250, 246, 239, 0.5);
  font-weight: 500;
}

.legal-page__body {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px var(--outer) 96px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

.legal-page__toc {
  position: sticky;
  top: 32px;
  padding-top: 4px;
}

.legal-page__content {
  max-width: 780px;
}

.legal-page__footer {
  background: var(--near-black);
  padding: 28px var(--outer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legal-page__footer-copy {
  font-size: 13px;
  color: rgba(250, 246, 239, 0.35);
}

.legal-page__footer-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.legal-page__footer-link {
  font-size: 13px;
  color: rgba(250, 246, 239, 0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.legal-page__footer-link:hover { color: var(--cream); }

@media (max-width: 900px) {
  .legal-page__body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .legal-page__toc {
    display: none;
  }
  .legal-page__hero-title { font-size: 30px; }
}

@media print {
  .legal-page__header,
  .legal-page__footer,
  .legal-page__toc { display: none !important; }
  .legal-page__body {
    display: block;
    max-width: 100%;
    padding: 0;
  }
  .legal-doc { max-width: 100%; }
  .legal-doc h2 { page-break-after: avoid; }
}

/* ═══════════════════════════════════════════════════
   CONTACT MODAL
═══════════════════════════════════════════════════ */

.contact-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 26, 26, 0.72);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.contact-modal-wrap[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.contact-modal {
  position: relative;
  background: var(--cream);
  border-radius: 20px;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(26, 26, 26, 0.32);
  padding: 48px 48px 40px;
}

.contact-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(26, 26, 26, 0.07);
  color: var(--near-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.contact-modal__close:hover { background: rgba(26, 26, 26, 0.13); }
.contact-modal__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.contact-modal__heading {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--near-black);
  padding-right: 48px;
  margin-bottom: 8px;
}

.contact-modal__subhead {
  font-size: 15px;
  color: rgba(26, 26, 26, 0.6);
  line-height: 1.5;
  margin-bottom: 28px;
}

/* Form fields — reuse rider/merchant pattern */
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__field--full { margin-bottom: 16px; }

.contact-form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
  letter-spacing: 0.02em;
}

.contact-form__req { color: var(--orange); }
.contact-form__optional { font-weight: 400; color: rgba(26,26,26,0.45); font-size: 12px; }

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(26, 26, 26, 0.18);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.15s;
  width: 100%;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.contact-form__select-wrap {
  position: relative;
}
.contact-form__select {
  appearance: none;
  cursor: pointer;
  padding-right: 36px;
}
.contact-form__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(26,26,26,0.45);
}

.contact-form__error {
  font-size: 12px;
  color: #e53935;
  font-weight: 600;
  min-height: 16px;
}

.contact-form__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.contact-form__privacy {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.45);
  line-height: 1.5;
  max-width: 300px;
}
.contact-form__privacy a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__submit {
  background: var(--orange);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 13px 28px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}
.contact-form__submit:hover { opacity: 0.88; }
.contact-form__submit:active { transform: scale(0.97); }
.contact-form__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.contact-form__submit:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Submit error banner */
.form-submit-error {
  background: rgba(229, 57, 53, 0.08);
  border: 1px solid rgba(229, 57, 53, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #c62828;
  margin-bottom: 16px;
  line-height: 1.5;
}
.form-submit-error strong { display: block; margin-bottom: 2px; }

/* Success / Close */
.contact-modal__success {
  text-align: center;
  padding: 32px 0;
}
.contact-modal__success-icon { margin-bottom: 20px; }
.contact-modal__success-title {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--near-black);
}
.contact-modal__success-body {
  font-size: 15px;
  color: rgba(26,26,26,0.65);
  line-height: 1.6;
  margin-bottom: 28px;
}
.contact-modal__success-close {
  background: var(--orange);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 12px 32px;
  border-radius: 50px;
  transition: opacity 0.15s;
}
.contact-modal__success-close:hover { opacity: 0.88; }

/* Mobile */
@media (max-width: 640px) {
  .contact-modal-wrap { padding: 0; align-items: flex-end; }
  .contact-modal {
    border-radius: 20px 20px 0 0;
    max-height: 94vh;
    padding: 36px 20px 28px;
    max-width: 100%;
  }
  .contact-form__grid { grid-template-columns: 1fr; }
  .contact-form__footer { flex-direction: column; align-items: stretch; }
  .contact-form__privacy { max-width: 100%; }
  .contact-form__submit { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN PASS
   Breakpoints (content-driven): 1024 | 768 | 480 | 360
   All responsive overrides live here — appended as one organised block.
   Desktop (1280px+) is the approved source of truth; no changes above 1024px.
═══════════════════════════════════════════════════════════════════════ */


/* ── §0  GLOBAL TOKENS + OUTER MARGIN ─────────────────────────────── */
@media (max-width: 1024px) {
  :root { --outer: 40px; }
}
@media (max-width: 768px) {
  :root { --outer: 24px; }
  section[id] { scroll-margin-top: 64px; }
}
@media (max-width: 480px) {
  :root { --outer: 20px; }
}


/* ── §1  HEADER / NAV ─────────────────────────────────────────────── */

/* Hamburger button — hidden on desktop, flex on mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nav-color);
  border-radius: 8px;
  flex-shrink: 0;
  padding: 0;
}
.nav-hamburger__line {
  display: block;
  width: 22px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Hamburger-to-X animation when menu is open */
body.mobile-menu-open .nav-hamburger__line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
body.mobile-menu-open .nav-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.mobile-menu-open .nav-hamburger__line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 768px) {
  .site-header {
    height: 64px;
  }

  /* Switch nav from 12-col grid to plain flex */
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--outer);
    height: 100%;
  }

  /* Hide desktop nav link lists */
  .nav-left,
  .nav-right {
    display: none;
  }

  /* Reset logo from grid placement */
  .logo-center {
    grid-column: auto;
    justify-self: auto;
  }

  .logo-img {
    height: 56px;
  }

  /* Disable the scroll-compact scale on mobile (it fights with small logo) */
  .site-header.is-scrolled .logo-img {
    transform: none;
    height: 48px;
  }

  /* Show hamburger */
  .nav-hamburger {
    display: flex;
  }
}


/* ── §2  MOBILE MENU OVERLAY ──────────────────────────────────────── */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 190;                         /* behind header (200) */
  background: rgba(26, 26, 26, 0.97);
  display: flex;
  flex-direction: column;
  padding: 80px var(--outer) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.mobile-menu__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 7vw, 36px);
  color: rgba(250, 246, 239, 0.85);
  text-decoration: none;
  padding: 12px 0;
  letter-spacing: -0.5px;
  line-height: 1;
  transition: color 0.15s;
  border-bottom: 1px solid rgba(250, 246, 239, 0.06);
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--orange);
}

.mobile-menu__link--cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: #fff !important;
  padding: 16px 28px;
  border-radius: 100px;
  margin-top: 24px;
  font-size: clamp(18px, 5vw, 24px);
  border-bottom: none;
  transition: background 0.15s;
}
.mobile-menu__link--cta:hover {
  background: #e05520;
  color: #fff !important;
}

/* Prevent body scroll when menu open */
body.mobile-menu-open {
  overflow: hidden;
}


/* ── §3  HERO ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Hero becomes a flex column: text block on top, character block below */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    max-height: none;
    height: auto;
    padding-top: 64px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .hero-text-col {
    grid-column: unset;
    position: relative;
    z-index: 5;
    padding: 32px 0 36px; /* hero already provides padding-inline */
    flex: 0 0 100%;       /* fill container width; don't expand beyond it */
    min-width: 0;          /* prevent nowrap content from blowing out the flex item */
    width: 100%;
  }

  /* Clamp headline sizes — editorial scale preserved */
  .hl-1 { font-size: clamp(60px, 16vw, 119px);  letter-spacing: -2px; }
  .hl-2 { font-size: clamp(44px, 11.5vw, 88px); letter-spacing: -1.5px; }
  .hl-3 { font-size: clamp(92px, 24.5vw, 185px); letter-spacing: -3px; }
  .hl-4 { font-size: clamp(46px, 12vw, 92px);   letter-spacing: -1.5px; }

  .hero-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 18px;
  }

  .hero-copy {
    width: 100%; /* prevent shrink-to-content in column flex; avoids clip-path cutoff */
  }

  /* Character block below text — rider anchored at top, bleeds down past fold */
  .hero-char-col {
    display: block;  /* override display:contents from base rule */
    position: relative;
    width: 100%;
    height: 400px;   /* visible window; rider is taller so feet crop at bottom */
    flex: none;
    overflow: hidden;
  }

  /* Rider: starts at top of char block, extends downward — feet cropped by overflow:hidden */
  .char-rider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: auto;
    height: 560px;
    width: auto;
    z-index: 9;
    /* Strip the desktop radial mask — solid character on mobile */
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Girl: hidden on mobile — rider solos */
  .char-girl {
    display: none;
  }
}

@media (max-width: 480px) {
  .hl-1 { font-size: clamp(52px, 14vw, 72px); }
  .hl-2 { font-size: clamp(38px, 10.5vw, 52px); }
  .hl-3 { font-size: clamp(82px, 22vw, 112px); }
  .hl-4 { font-size: clamp(40px, 11vw, 56px); }

  .hero-char-col { height: 360px; }
  .char-rider    { height: 480px; }
}

@media (max-width: 360px) {
  .hl-1 { font-size: 52px; }
  .hl-2 { font-size: 38px; }
  .hl-3 { font-size: 82px; }
  .hl-4 { font-size: 40px; }

  .hero-char-col { height: 300px; }
  .char-rider    { height: 400px; }
}


/* ── §4  CITY STORY ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .city-story {
    height: 620px;
  }

  .city-headline-group {
    top: 40px;
    left: var(--outer);
    transform: none;
    white-space: normal;
    width: calc(100% - 2 * var(--outer));
    text-align: center;
  }

  .city-eyebrow {
    font-size: clamp(18px, 5vw, 36px);
    margin-bottom: 8px;
  }

  .city-headline {
    font-size: clamp(48px, 13vw, 92px);
    letter-spacing: -1.5px;
    margin-bottom: 20px;
  }

  .city-copy {
    font-size: 15px;
    max-width: 100%;
    white-space: normal;
  }

  /* Hide secondary characters — keep only the primary center character */
  .character--merchant,
  .character--customer,
  .character--rider {
    display: none;
  }

  .character--center {
    width: 416px;
    left: 50%;
    transform: translateX(-50%);
    top: 300px;
    z-index: 5;
  }
}

@media (max-width: 480px) {
  .city-story { height: 560px; }
  .city-eyebrow  { font-size: clamp(15px, 4vw, 22px); }
  .city-headline { font-size: clamp(40px, 11vw, 60px); }
  .character--center { width: 351px; top: 270px; }
}


/* ── §5  CUSTOMER (ORDER) ────────────────────────────────────────── */

@media (max-width: 768px) {
  .customer-section { min-height: auto; }

  .customer-section__content {
    flex-direction: column;
    align-items: stretch;
    padding-inline: 0;
  }

  .customer-section__copy {
    flex: none;
    max-width: 100%;
    padding-inline: var(--outer);
    padding-top: 60px;
    padding-bottom: 32px;
    text-align: left;
  }

  .cust-body,
  .cust-statement {
    max-width: 100%;
  }

  .cust-order-word {
    font-size: clamp(60px, 16vw, 92px);
  }

  .cust-headline {
    font-size: clamp(26px, 7vw, 38px);
    max-width: 100%;
  }

  .cust-features {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
  }

  .cust-badges {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Right visual: allow character to bleed downward past the block */
  .customer-section__visual {
    position: relative;
    min-height: auto;
    height: 260px;
    width: 100%;
    overflow: visible;
    flex: none;
    align-self: auto;
  }

  /* Copy column sits above any character bleed */
  .customer-section__copy {
    position: relative;
    z-index: 2;
  }

  .cust-character {
    position: absolute;
    bottom: -240px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 552px;
    width: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 480px) {
  .cust-order-word { font-size: clamp(52px, 14vw, 72px); }
  .cust-headline   { font-size: clamp(22px, 6vw, 32px); }
  .customer-section__visual { height: 220px; }
  .cust-character { height: 464px; bottom: -216px; }
}


/* ── §6  RIDERS (DELIVER) ────────────────────────────────────────── */

@media (max-width: 768px) {
  .riders-section {
    flex-direction: column;
    min-height: auto;
  }

  /* Content above, character art below */
  .riders-content {
    margin-left: 0;
    padding: 60px var(--outer) 40px;
    max-width: 100%;
    order: 1;
  }

  .riders-character {
    position: relative;
    left: auto;
    bottom: auto;
    top: auto;
    right: auto;
    width: 100%;
    height: 280px;
    order: 2;
    flex-shrink: 0;
  }

  .riders-char-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 280px;
    width: auto;
  }

  .riders-eyebrow {
    font-size: clamp(60px, 16vw, 92px);
  }

  .riders-headline {
    font-size: clamp(26px, 6.5vw, 38px);
  }

  /* Stack benefits vertically, replace vertical divider with horizontal rule */
  .riders-benefits {
    flex-direction: column;
    gap: 0;
    margin-bottom: 36px;
  }

  .riders-benefit {
    flex: none;
    padding-bottom: 18px;
    padding-top: 18px;
    border-bottom: 1px solid rgba(250, 246, 239, 0.10);
  }
  .riders-benefit:first-child { padding-top: 0; }
  .riders-benefit:last-child  { border-bottom: none; padding-bottom: 0; }

  .riders-cta {
    align-self: stretch;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .riders-eyebrow  { font-size: clamp(52px, 14vw, 72px); }
  .riders-headline { font-size: clamp(22px, 6vw, 30px); }
  .riders-character { height: 220px; }
  .riders-char-img  { height: 220px; }
}


/* ── §7  MERCHANT (SELL) ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .merchant-section__inner {
    flex-direction: column;
  }

  .merchant-section__copy {
    flex: none;
    max-width: 100%;
    padding-right: var(--outer);
    padding-top: 60px;
    padding-bottom: 32px;
    width: 100%;
  }

  .merchant-body,
  .merchant-statement {
    max-width: 100%;
  }

  .merchant-sell-word {
    font-size: clamp(60px, 16vw, 92px);
  }

  .merchant-headline {
    font-size: clamp(26px, 6.5vw, 38px);
    max-width: 100%;
  }

  .merchant-benefits {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
  }

  .merchant-section__visual {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: visible;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
  }

  .merchant-char-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 300px;
    width: auto;
  }

  .merchant-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .merchant-sell-word { font-size: clamp(52px, 14vw, 72px); }
  .merchant-headline  { font-size: clamp(22px, 6vw, 30px); }
  .merchant-section__visual { height: 240px; }
  .merchant-char-img { height: 240px; }
}


/* ── §8  TERRITORY PARTNER (GROW) ────────────────────────────────── */

@media (max-width: 768px) {
  .partner-section   { min-height: auto; }

  .partner-section__inner {
    flex-direction: column;
    min-height: auto;
  }

  .partner-section__visual {
    flex: none;
    width: 100%;
    min-height: auto;
    height: 280px;
  }

  .partner-char-img {
    height: 364px;
    top: 40px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .partner-section__copy {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding-left: var(--outer);
    padding-right: var(--outer);
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .partner-body,
  .partner-statement {
    max-width: 100%;
  }

  .partner-grow-word {
    font-size: clamp(60px, 16vw, 92px);
  }

  .partner-headline {
    font-size: clamp(26px, 6.5vw, 38px);
    max-width: 100%;
  }

  .partner-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .partner-section__visual { height: 220px; }
  .partner-char-img         { height: 286px; top: 40px; bottom: auto; }
  .partner-grow-word { font-size: clamp(52px, 14vw, 72px); }
  .partner-headline  { font-size: clamp(22px, 6vw, 30px); }
}


/* ── §9  ABOUT ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .about-section__content {
    padding: 80px var(--outer);
  }

  .about-section__intro {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 56px;
  }

  .about-section__headline { flex: none; width: 100%; }

  .about-title {
    font-size: clamp(52px, 14vw, 76px);
  }

  .about-section__story { max-width: 100%; }

  /* Stack values vertically; replace vertical dividers with horizontal */
  .about-section__values {
    flex-direction: column;
    padding-top: 36px;
  }

  .about-value {
    flex: none;
    padding-right: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(250, 246, 239, 0.10);
  }
  .about-value + .about-value {
    padding-left: 0;
    border-left: none;
    padding-right: 0;
  }
  .about-value:first-child { padding-top: 0; }
  .about-value:last-child  { border-bottom: none; padding-bottom: 0; }

  .about-value__label {
    font-size: clamp(18px, 5vw, 22px);
  }
}

@media (max-width: 480px) {
  .about-section__content { padding: 64px var(--outer); }
  .about-title { font-size: clamp(44px, 12vw, 60px); }
}


/* ── §10  FAQ ────────────────────────────────────────────────────── */
/* (base 860px rule already in file — these supplement for narrow mobile) */

@media (max-width: 480px) {
  .faq-section__inner {
    padding: 60px var(--outer) 72px;
    gap: 36px;
  }
  .faq-display__zaktoo { font-size: 28px; }
  .faq-display__faq    { font-size: 56px; }
  .faq-question        { font-size: 16px; }
  .faq-trigger         { padding: 20px 0; min-height: 44px; }
  .faq-answer          { font-size: 15px; padding-bottom: 24px; }
}


/* ── §11  DOWNLOAD ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .download-section {
    height: auto;
    min-height: auto;
  }

  /* override the 960px rule for mobile */
  .download-section__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 64px var(--outer) 0;
  }

  .download-copy {
    flex: none;
    padding-right: 0;
    width: 100%;
  }

  .dl-word-download {
    font-size: clamp(26px, 7vw, 38px);
  }
  .dl-word-zaktoo {
    font-size: clamp(52px, 14vw, 86px);
    letter-spacing: -2px;
  }
  .dl-sub-city,
  .dl-sub-pocket {
    font-size: clamp(20px, 5.5vw, 32px);
  }

  .download-badges {
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }

  .download-visual {
    width: 100%;
    height: 260px;
    margin-top: 0;
    overflow: hidden;
    justify-content: center;
  }

  .download-app-img {
    max-width: 100%;
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: center bottom;
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .dl-word-download { font-size: clamp(22px, 6vw, 30px); }
  .dl-word-zaktoo   { font-size: clamp(44px, 12vw, 64px); }
  .dl-sub-city,
  .dl-sub-pocket    { font-size: clamp(18px, 5vw, 26px); }
  .download-visual  { height: 220px; }
}


/* ── §12  FOOTER ─────────────────────────────────────────────────── */
/* (base 960px + 600px rules already in file; these supplement) */

@media (max-width: 480px) {
  .site-footer { padding-top: 48px; }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 40px;
  }
  .footer-brand { grid-column: auto; }
  .footer-legal__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px var(--outer);
  }
  .footer-legal-links {
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  .footer-logo { height: 80px; }
}


/* ── §13  MODALS (mobile) ────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Rider modal ── */
  .rider-modal-wrap {
    padding: 0;
    align-items: flex-end;
  }
  .rider-modal {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
  }
  .rider-modal__sidebar { display: none; }
  .rider-modal__main {
    padding: 28px 20px 36px;
    overflow-y: visible;
  }
  .rider-modal__close { top: 14px; right: 14px; width: 44px; height: 44px; }
  .rider-form__grid { grid-template-columns: 1fr; }
  .rider-form__radio-row { grid-template-columns: 1fr; gap: 16px; }
  .rider-form__input,
  .rider-form__select { font-size: 16px; }  /* prevents iOS auto-zoom */

  /* ── Merchant modal ── */
  .merchant-modal-wrap {
    padding: 0;
    align-items: flex-end;
  }
  .merchant-modal {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
  }
  .merchant-modal__sidebar { display: none; }
  .merchant-modal__main { padding: 28px 20px 36px; }
  .merchant-modal__close { top: 14px; right: 14px; width: 44px; height: 44px; }
  .merchant-form__grid { grid-template-columns: 1fr; }
  .merchant-form__input,
  .merchant-form__select { font-size: 16px; }

  /* ── Territory Partner modal ── */
  .partner-modal-wrap {
    padding: 0;
    align-items: flex-end;
  }
  .partner-modal {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
  }
  .partner-modal__sidebar { display: none; }
  .partner-modal__main { padding: 28px 20px 36px; }
  .partner-modal__close { top: 14px; right: 14px; width: 44px; height: 44px; }
  .partner-form__grid { grid-template-columns: 1fr; }
  .partner-form__input,
  .partner-form__select,
  .partner-form__textarea { font-size: 16px; }
}


/* ── §14  COOKIE CONSENT (supplement existing 600px rules) ──────── */

@media (max-width: 480px) {
  .cookie-banner {
    bottom: 8px;
    width: calc(100% - 16px);
    border-radius: 12px;
  }
  .cookie-banner__inner { padding: 18px 16px; gap: 14px; }
}


/* ── §15  GLOBAL TOUCH TARGETS ───────────────────────────────────── */

@media (max-width: 768px) {
  /* Minimum 44px hit area on all interactive CTA elements */
  .hero-cta-btn,
  .riders-cta,
  .merchant-cta,
  .partner-cta {
    min-height: 44px;
    padding: 12px 28px;
  }

  .nav-pill-cta,
  .cust-badge,
  .download-badge {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ── §16  IMAGE SAFETY NET ───────────────────────────────────────── */
/* Scoped to mobile only — desktop characters use absolute positioning
   with intentional overflow and must not be constrained by container width */
@media (max-width: 768px) {
  img {
    max-width: 100%;
  }
}

/* Fix SVG badges on very small screens */
@media (max-width: 400px) {
  .cust-badge svg,
  .download-badge svg {
    width: 130px;
    height: 44px;
  }
}


/* ── §17  TABLET LAPTOP ADJUSTMENTS (1024px) ─────────────────────── */

@media (max-width: 1024px) {
  /* Hero: tighten character positions so they don't obscure too much text */
  .char-rider { right: 0; height: 700px; }
  .char-girl  { left: 440px; height: 510px; }

  /* Riders: narrow the margin-left so content has more breathing room */
  .riders-content { margin-left: 42%; }

  /* Download: shrink phone stack at tablet */
  .download-phone--back .phone-frame   { width: 200px; height: 420px; }
  .download-phone--middle .phone-frame { width: 230px; height: 475px; }
  .download-phone--front .phone-frame  { width: 260px; height: 540px; }
}

@media (max-width: 860px) {
  /* Hero headline starts to tighten at 860px — begin gentle clamp */
  .hl-1 { font-size: clamp(90px, 12vw, 119px); }
  .hl-2 { font-size: clamp(66px, 9vw, 88px); }
  .hl-3 { font-size: clamp(140px, 18vw, 185px); }
  .hl-4 { font-size: clamp(70px, 9.5vw, 92px); }

  /* Customer section copy column: less padding, more room */
  .customer-section__copy { flex: 0 0 62%; max-width: 62%; }

  /* About section intro: reduce gap */
  .about-section__intro { gap: 48px; }
}

/* ── ABOUT section intro: must be after the 860px block above ───────────────
   860px block sets gap: 48px which overrides the 768px mobile rule's gap: 40px. */
@media (max-width: 768px) {
  .about-section__intro {
    gap: 40px;
  }
}

/* ── ORDER section copy column: must be after the 860px block above ─────────
   860px block sets flex: 0 0 62% which cascades over the 768px mobile rule. */
@media (max-width: 768px) {
  .customer-section__copy {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
}

/* ── DELIVER section content: must be after the 1024px block above ──────────
   1024px block sets margin-left: 42% which cascades over the 768px mobile rule. */
@media (max-width: 768px) {
  .riders-content {
    margin-left: 0;
    padding: 60px var(--outer) 40px;
    max-width: 100%;
  }
}

/* ── Hero headline: mobile overrides — MUST be after the 860px block above ──
   Sized to fill ~90% of the available hero width (viewport - 2×outer padding).
   Each line's vw value derived from measured Dela Gothic One advance widths. */
@media (max-width: 480px) {
  .hl-1 { font-size: clamp(64px, 20vw, 79px);   letter-spacing: -2px; }
  .hl-2 { font-size: clamp(46px, 14.8vw, 57px); letter-spacing: -1.5px; }
  .hl-3 { font-size: clamp(101px, 32vw, 126px); letter-spacing: -3px; }
  .hl-4 { font-size: clamp(51px, 16vw, 62px);   letter-spacing: -1.5px; }
}
@media (max-width: 360px) {
  .hl-1 { font-size: 64px;  letter-spacing: -1.5px; }
  .hl-2 { font-size: 46px;  letter-spacing: -1px; }
  .hl-3 { font-size: 101px; letter-spacing: -2.5px; }
  .hl-4 { font-size: 51px;  letter-spacing: -1.5px; }
}

/* ─────────────────────────────────────────────────
   ACCESSIBILITY — Keyboard focus on form inputs
   Restores outline suppressed by outline:none on
   form input base styles. `:focus-visible` targets
   keyboard-only focus so mouse users are unaffected.
───────────────────────────────────────────────── */
.rider-form__input:focus-visible,
.rider-form__select:focus-visible,
.merchant-form__input:focus-visible,
.merchant-form__select:focus-visible,
.partner-form__input:focus-visible,
.partner-form__select:focus-visible,
.partner-form__textarea:focus-visible,
.contact-form__input:focus-visible,
.contact-form__select:focus-visible,
.contact-form__textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.rider-modal__success-close:focus-visible,
.merchant-modal__success-close:focus-visible,
.partner-modal__success-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── WebP background images — responsive via media query ───────────────── */
@media (min-width: 640px) {
  .city-backdrop {
    background-image: url('assets/city-bg.jpg');
    background-image: image-set(url('assets/webp/city-bg-md.webp') type('image/webp'), url('assets/city-bg.jpg') type('image/jpeg'));
  }
  .riders-bg {
    background-image: image-set(url('assets/webp/scene-gb-md.webp') type('image/webp'), url('assets/scene-gb.png') type('image/png'));
  }
}
@media (min-width: 1100px) {
  .city-backdrop {
    background-image: url('assets/city-bg.jpg');
    background-image: image-set(url('assets/webp/city-bg-lg.webp') type('image/webp'), url('assets/city-bg.jpg') type('image/jpeg'));
  }
  .riders-bg {
    background-image: image-set(url('assets/webp/scene-gb-lg.webp') type('image/webp'), url('assets/scene-gb.png') type('image/png'));
  }
}