/* ==========================================================================
   SoFlo Cart Company
   Tokens → base → primitives → components → sections → responsive
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
:root{
  /* Brand, sampled from the master logo */
  --ink:        #0c2e38;
  --ink-2:      #12414f;
  --ink-soft:   #56737d;
  --coral:      #e9574f;   /* large display + decorative only (3:1) */
  --coral-deep: #d0403c;   /* buttons + small text (4.5:1) */
  --coral-hover:#b8302c;
  --aqua:       #2aa8a1;
  --marigold:   #e8933a;
  --mint:       #7fe0c6;
  --go:         #1b7f3b;   /* stoplight green. 5.07:1 under white, and far
                              enough from --aqua (37deg) to read as its own
                              colour beside it */
  --go-hover:   #14632d;
  --cream:      #fffbf3;
  --sand:       #f6efe2;
  --sand-2:     #efe5d3;
  --white:      #ffffff;

  --surface:      var(--white);
  --line:         rgba(12,46,56,.10);
  --line-strong:  rgba(12,46,56,.20);
  --muted-fg:     var(--ink-soft);

  --f-display:"Shrikhand", Georgia, serif;
  --f-body:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* dusk hero + dark "tech" section share one night ground */
  --hero-night:#071c22;

  /* Spacing rhythm */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:36px; --s-7:56px; --s-8:80px; --s-9:120px;
  --section-y: clamp(72px, 10vw, 132px);
  --gutter:    clamp(22px, 6vw, 88px);
  --maxw: 1280px;

  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-pill:999px;
  --sh-1: 0 1px 2px rgba(12,46,56,.05), 0 4px 14px rgba(12,46,56,.05);
  --sh-2: 0 2px 4px rgba(12,46,56,.04), 0 14px 40px rgba(12,46,56,.09);
  --sh-3: 0 30px 80px rgba(12,46,56,.16);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Aliases. Components were written against these names; defining them here
     rather than renaming every usage keeps one source of truth. An undefined
     custom property fails silently — `background:var(--undefined)` computes to
     nothing, which is how the checkout page ended up with a black canvas. */
  --sand-deep:    var(--sand-2);
  --surface-sunk: var(--sand);
  --hero-sand:    #fbedd4;          /* the artwork's own ground colour */
  --alert:        #b3261e;
  --font-display: var(--f-display);
  --font-body:    var(--f-body);
  --shadow-sm:    var(--sh-1);
  --shadow-md:    var(--sh-2);
  --shadow-lg:    var(--sh-3);
}

/* --------------------------------------------------------------- 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:28px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is load-bearing — without it an HTML height attribute wins and the
   image renders stretched. Components that want a fixed height override it below. */
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0 0 .4em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--coral-deep); outline-offset:3px; border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* --------------------------------------------------------- 3. Typography */
.display{font-family:var(--f-display); font-weight:400; line-height:.96; letter-spacing:-.028em}
h1.display{font-size:clamp(50px, 7.4vw, 104px)}
h2.display{font-size:clamp(36px, 5.2vw, 72px)}
h3.display{font-size:clamp(24px, 2.6vw, 36px)}

.eyebrow{
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--coral-deep); margin:0 0 var(--s-4);
}
.eyebrow--light{color:var(--mint)}
.lede{font-size:clamp(18px,1.55vw,21px); line-height:1.6; max-width:56ch; color:var(--ink-2)}
.muted{color:var(--muted-fg)}
.fineprint{font-size:13.5px; line-height:1.55; color:var(--muted-fg)}

/* --------------------------------------------------- 4. Layout primitives */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--sand{background:var(--sand)}
.band-rainbow{
  height:7px; border:0; margin:0; display:block;
  background:linear-gradient(90deg,
    var(--ink) 0 14%, var(--aqua) 14% 34%, var(--mint) 34% 50%,
    var(--marigold) 50% 70%, #e8622f 70% 86%, var(--coral) 86% 100%);
}
.section--white{background:var(--white)}
.section--ink{background:var(--ink); color:var(--white); --muted-fg:#a9c6ce}
.section--ink .lede{color:#cfe3e8}

.head{max-width:60ch; margin-bottom:var(--s-7)}
.head--split{
  display:flex; flex-wrap:wrap; gap:var(--s-5) var(--s-8);
  align-items:flex-end; justify-content:space-between; max-width:none;
}
.head--split > div{flex:1 1 560px; min-width:0; max-width:660px}
.head--split > p{flex:0 1 320px; margin:0 0 8px}

.rule-rainbow{
  height:5px; width:104px; border:0; border-radius:var(--r-pill);
  margin:0 0 var(--s-5);
  background:linear-gradient(90deg,
    var(--aqua) 0 25%, var(--mint) 25% 45%,
    var(--marigold) 45% 72%, var(--coral) 72% 100%);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:fixed; top:10px; left:10px; z-index:200; transform:translateY(-160%);
  background:var(--ink); color:var(--white); padding:12px 22px;
  border-radius:var(--r-pill); font-weight:700; transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ------------------------------------------------------------ 5. Buttons */
.btn{
  --bg:var(--ink); --fg:var(--white); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:15px 28px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg); border:2px solid var(--bd);
  font-weight:700; font-size:16px; letter-spacing:-.005em;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn--go{--bg:var(--go); --bd:var(--go)}
.btn--go:hover{--bg:var(--go-hover); --bd:var(--go-hover)}
.btn--coral{--bg:var(--coral-deep); --bd:var(--coral-deep)}
.btn--coral:hover{--bg:var(--coral-hover); --bd:var(--coral-hover)}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line-strong)}
.btn--ghost:hover{--bd:var(--ink); --bg:var(--ink); --fg:var(--white)}
.btn--glass{
  --bg:rgba(255,255,255,.14); --fg:var(--white); --bd:rgba(255,255,255,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--glass:hover{--bg:var(--white); --fg:var(--ink); --bd:var(--white)}
.btn--full{width:100%}
.btn--sm{padding:11px 20px; font-size:15px}

/* --------------------------------------------- 6. Floating nav + slide menu */
.menu-toggle{
  position:fixed; top:20px; right:20px; z-index:120;
  width:54px; height:54px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,251,243,.88); box-shadow:var(--sh-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.menu-toggle span{display:block; width:22px; height:2.5px; border-radius:10px; background:var(--ink)}
.menu-toggle:hover{transform:translateY(-2px)}
.menu-toggle:hover span{background:var(--coral-deep)}
body.menu-open .menu-toggle{opacity:0; pointer-events:none}

.menu-backdrop{
  position:fixed; inset:0; z-index:109; background:rgba(6,26,32,.5);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.slide-menu{
  position:fixed; top:0; right:0; z-index:110;
  width:min(400px,88vw); height:100dvh;
  padding:var(--s-7) var(--s-6) var(--s-6);
  background:var(--cream); box-shadow:-24px 0 70px rgba(12,46,56,.24);
  transform:translateX(101%); transition:transform .34s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.slide-menu__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-6)}
.slide-menu__head img{height:46px; width:auto}
.menu-close{width:44px;height:44px;border:0;background:transparent;font-size:34px;
  line-height:1;cursor:pointer;color:var(--ink)}
.slide-menu nav{display:flex; flex-direction:column}
.slide-menu nav a{
  padding:16px 0; font-size:23px; font-weight:700; letter-spacing:-.01em;
  border-bottom:1px solid var(--line); transition:color .18s var(--ease), padding-left .18s var(--ease);
}
.slide-menu nav a:hover{color:var(--coral-deep); padding-left:8px}
.slide-menu .btn{margin-top:var(--s-6)}
body.menu-open{overflow:hidden}
body.menu-open .slide-menu{transform:translateX(0)}
body.menu-open .menu-backdrop{opacity:1; visibility:visible}

/* --------------------------------------------------------------- 7. Hero */
/* Dusk grade: the same retro road illustration, lit like golden hour — a warm
   sun top-right, deep teal night on the left where the copy sits. Light type on
   the dark ground clears contrast that failed on the old cream (see .hero__title
   below), so this is both the sexier look and the accessible one. */
.hero{
  position:relative;
  min-height:min(88vh, 840px);
  display:flex; align-items:center;
  padding:clamp(96px,10vw,132px) var(--gutter) clamp(56px,7vw,88px);
  overflow:hidden;
  background:var(--hero-night); color:var(--cream);
}
/* The artwork lives on its own capped layer rather than on .hero directly.
   Sizing it against the full hero width is what broke it: on a 2560px monitor
   the box is ~3:1 while the art is 3:2, so `cover` scaled by width and sliced
   the cart's roof off. Capped at the art's natural width the box never gets
   more extreme than about 1.9:1, and `right bottom` keeps the cart — which sits
   in the artwork's bottom-right — inside the frame at every size. */
/* Anchored to the right edge so the cart always bleeds off the right — no strip
   or gap there at any width. Capped at the art's natural 1600px so `cover` never
   slices the cart's roof; on wider screens the copy side (left) simply shows the
   dusk night, where the white headline + subhead now live. */
.hero::before{
  content:""; position:absolute; z-index:0;
  top:0; bottom:0; right:0;
  width:min(100%, 1600px);
  background:url("../img/hero-art-1600.webp?v=1789175479") right bottom / cover no-repeat;
}
/* Dusk scrim: warm sun radial (top-right) + teal night fading left→right so the
   copy stays legible, + a dark floor so the cart grounds into the section. */
.hero::after{
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 80% at 92% 12%, rgba(255,176,90,.28) 0%, transparent 42%),
    linear-gradient(90deg,
      var(--hero-night) 0%, rgba(7,28,34,.95) 46%,
      rgba(7,28,34,.5) 64%, rgba(7,28,34,0) 86%),
    linear-gradient(0deg, var(--hero-night) 1%, transparent 30%);
}
.hero__inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto}
.hero__copy{max-width:660px}
/* (subhead colour/width/shadow is set on `.hero__copy > p` further below, after
   the .hero__title rules, so it wins the cascade — see that rule.) */

/* On screens wider than the 1600px art band, the copy side (left) shows the
   dusk night — a subtle teal gradient rather than a flat slab, so it reads as
   sky, not empty space. The cart bleeds off the right via .hero::before. */
@media (min-width:1601px){
  .hero{
    background:linear-gradient(120deg,
      #061a20 0%, #0a2a33 46%, #0d323d 72%, var(--hero-night) 100%);
  }
}

/* mono "connected product" kicker with a pulsing live dot */
.hero .kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:12px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mint);
  border:1px solid rgba(127,224,198,.4); border-radius:var(--r-pill);
  padding:7px 14px; margin:0 0 var(--s-5);
}
.hero .kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 rgba(127,224,198,.6); animation:soflo-pulse 2.4s infinite;
}
@keyframes soflo-pulse{
  0%{box-shadow:0 0 0 0 rgba(127,224,198,.55)}
  70%{box-shadow:0 0 0 10px rgba(127,224,198,0)}
  100%{box-shadow:0 0 0 0 rgba(127,224,198,0)}
}
@media (prefers-reduced-motion:reduce){.hero .kicker .dot{animation:none}}

.hero__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(88px, 12.5vw, 188px);
  line-height:.8; letter-spacing:-.05em;
  margin:0 0 var(--s-5);
}
/* The three logo colours, used as the headline. This is the brand.
   Slots, not words — the copy can change without touching these. */
.hero__title .w-1{color:var(--aqua)}
.hero__title .w-2{color:var(--marigold)}
.hero__title .w-3{color:var(--coral)}

.hero__copy > p{max-width:34ch; font-size:clamp(17px,1.5vw,20px);
  line-height:1.6; color:#fff;
  text-shadow:0 1px 3px rgba(4,16,20,.95), 0 1px 10px rgba(4,16,20,.78)}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s-3); margin:var(--s-6) 0 var(--s-5)}
.hero .rule-rainbow{margin-bottom:var(--s-5)}

.trust-row{
  display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:0; list-style:none;
  font-size:13.5px; font-weight:700; color:var(--ink-2);
}
.trust-row li{display:flex; align-items:center; gap:.5em}
.trust-row svg{width:16px; height:16px; flex:0 0 auto; color:var(--aqua)}
.hero .trust-row{color:#cfe3e8}

/* ------------------------------------------------------------ 8. Booking */
.booking-grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--s-5); align-items:stretch;
}
.card{
  background:var(--surface); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px); box-shadow:var(--sh-2);
}
.booking-form{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4)}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field > span{font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2)}
.field input,.field select{
  width:100%; padding:15px 16px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong); background:var(--white);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:hover,.field select:hover{border-color:var(--aqua)}
.field input:focus-visible,.field select:focus-visible{
  outline:none; border-color:var(--coral-deep);
  box-shadow:0 0 0 4px rgba(208,64,60,.14);
}
.field--wide{grid-column:1/-1}

/* segmented controls + cart cards — Airbnb-style booking */
.seg-field{grid-column:1/-1; display:flex; flex-direction:column; gap:10px}
.seg-label{font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2)}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg button{
  border:1.5px solid var(--line-strong); background:var(--white); color:var(--ink);
  border-radius:var(--r-sm); padding:11px 16px; font-weight:600; font-size:14px;
  cursor:pointer;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.seg button:hover{border-color:var(--aqua)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--white); border-color:var(--ink)}

.cartpick{grid-column:1/-1; display:grid; gap:10px}
.cartopt{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  text-align:left; width:100%; border:1.5px solid var(--line-strong);
  background:var(--white); border-radius:var(--r-md); padding:14px 18px; cursor:pointer;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cartopt:hover{border-color:var(--aqua)}
.cartopt[aria-pressed="true"]{border-color:var(--aqua); background:rgba(42,168,161,.07);
  box-shadow:0 0 0 3px rgba(42,168,161,.14)}
.cartopt__name b{display:block; font-size:15.5px; font-weight:700}
.cartopt__name small{color:var(--ink-soft); font-size:13px}
.cartopt__pr{font-family:var(--f-display); font-weight:400; font-size:22px; color:var(--ink)}

.quote{grid-column:1/-1; background:var(--sand); border-radius:var(--r-md); padding:var(--s-5)}
.quote__line{display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-4); font-size:15px; padding-block:6px}
.quote__line--total{margin-top:var(--s-3); padding-top:var(--s-4);
  border-top:1px solid var(--line-strong); font-weight:700; font-size:17px}
.quote__line--total .quote__value{font-family:var(--f-display); font-weight:400; font-size:34px}
.quote__value{font-variant-numeric:tabular-nums}

.booking-result{grid-column:1/-1; padding:var(--s-5); background:#e6f7f2;
  border:1px solid var(--mint); border-radius:var(--r-md); font-size:15px; line-height:1.55}
.booking-result strong{display:block; margin-bottom:4px; font-size:16px}

/* Dark card: lighten the muted token so fineprint (cart name, range, footer)
   reads on the ink, rather than dark slate on dark. */
.fleet-card{background:var(--ink); color:var(--white); display:flex; flex-direction:column;
  --muted-fg:#bcd8de}
.fleet-card h3{font-family:var(--f-display); font-weight:400; font-size:36px;
  margin:var(--s-4) 0 var(--s-2)}
.pill{display:inline-flex; align-self:flex-start; align-items:center; gap:.5em; background:var(--mint);
  color:var(--ink); padding:7px 14px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.battery{height:10px; background:rgba(255,255,255,.18); border-radius:var(--r-pill);
  overflow:hidden; margin:var(--s-5) 0 var(--s-3)}
.battery > span{display:block; height:100%; background:var(--mint); border-radius:inherit}
.feature-list{list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; gap:12px; font-size:15px}
.feature-list li{display:flex; align-items:flex-start; gap:.65em}
.feature-list svg{width:17px;height:17px;flex:0 0 auto;margin-top:4px;color:var(--mint)}
.fleet-card__foot{margin-top:auto; padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.14)}

/* -------------------------------------------------------------- 9. Steps */
.step-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5)}
.step{padding:var(--s-6); border-radius:var(--r-lg); background:var(--cream);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.step:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.step__num{display:block; font-family:var(--f-display); font-size:46px; line-height:1;
  margin-bottom:var(--s-5)}
/* each step takes the next colour off the logo, so the sequence reads as brand */
.step:nth-child(1) .step__num{color:var(--aqua)}
.step:nth-child(2) .step__num{color:var(--marigold)}
.step:nth-child(3) .step__num{color:var(--coral)}
.step h3{font-size:22px; margin-bottom:var(--s-2)}
.step p{font-size:15.5px; margin:0; color:var(--ink-2)}

/* ------------------------------------------------------------- 10. Safety */
.safety-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,80px)}
.safety-grid h2{font-size:clamp(32px,3.8vw,54px)}
.safety-cards{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4)}
.safety-cards article{padding:var(--s-5); border-radius:var(--r-md);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)}
.safety-cards strong{display:block; font-size:17px; margin-bottom:var(--s-2)}
.safety-cards p{font-size:15px; line-height:1.55; color:#cfe3e8; margin:0}

/* --------------------------------------------------------- 11. Manifesto */
.manifesto{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  align-items:center; gap:clamp(32px,5vw,72px)}
.manifesto img{width:100%; max-width:400px; margin-inline:auto}

/* ----------------------------------------------------------- 12. Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:198px; gap:var(--s-4)}
.gallery-card{margin:0; overflow:hidden; border-radius:var(--r-md);
  background:var(--sand-2); position:relative}
.gallery-card--feature{grid-column:span 2; grid-row:span 2}
.gallery-card--tall{grid-row:span 2}
.gallery-card img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease)}
.gallery-card:hover img{transform:scale(1.05)}
.gallery-card figcaption{position:absolute; left:0; right:0; bottom:0;
  padding:32px 20px 16px; color:var(--white); font-size:14px; font-weight:600;
  background:linear-gradient(180deg, transparent, rgba(6,26,32,.8))}

/* --------------------------------------------------------------- 13. FAQ */
.faq-list{max-width:920px}
.faq-list details{border-top:1px solid var(--line-strong)}
.faq-list details:last-of-type{border-bottom:1px solid var(--line-strong)}
.faq-list summary{position:relative; cursor:pointer; list-style:none;
  padding:24px 56px 24px 0; font-size:18.5px; font-weight:700;
  transition:color .18s var(--ease)}
.faq-list summary:hover{color:var(--coral-deep)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:""; position:absolute; right:8px; top:50%; width:14px; height:14px;
  margin-top:-7px; background:var(--coral-deep); transition:transform .28s var(--ease);
  clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);
}
.faq-list details[open] summary::after{transform:rotate(135deg)}
.faq-list details > p{max-width:74ch; margin:-4px 0 26px; font-size:16px;
  line-height:1.7; color:var(--ink-2)}

/* ------------------------------------------------------------ 14. Footer */
.site-footer{background:var(--ink); color:#c2dbe2; padding-block:var(--s-8) var(--s-6);
  --muted-fg:#a9c6ce}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s-6) var(--s-7);
  padding-bottom:var(--s-7); border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer img{height:64px; width:auto; margin-bottom:var(--s-4)}
.site-footer h4{color:var(--white); font-size:12px; text-transform:uppercase;
  letter-spacing:.16em; margin:0 0 var(--s-4)}
.footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:15px}
.footer-grid a{transition:color .18s var(--ease)}
.footer-grid a:hover{color:var(--mint)}
.footer-base{display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5);
  justify-content:space-between; padding-top:var(--s-5); font-size:13.5px}

/* ------------------------------------------------------------- 15. Toast */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:150;
  visibility:hidden; opacity:0; transform:translate(-50%,140%);
  background:var(--ink); color:var(--white); padding:15px 24px;
  border-radius:var(--r-pill); box-shadow:var(--sh-3); font-weight:600;
  max-width:calc(100vw - 32px);
  transition:transform .38s var(--ease), opacity .28s var(--ease), visibility 0s linear .38s;
}
.toast.is-visible{visibility:visible; opacity:1; transform:translate(-50%,0);
  transition:transform .38s var(--ease), opacity .22s var(--ease), visibility 0s}

/* ------------------------------------------------------------- 16. Merch */
.merch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5)}
.merch-card{background:var(--white); border-radius:var(--r-lg); padding:var(--s-6);
  box-shadow:var(--sh-1); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.merch-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.merch-card__icon{font-size:38px; line-height:1; margin-bottom:var(--s-4)}
.merch-card h3{font-size:22px; margin-bottom:var(--s-2)}
.merch-card p{font-size:15.5px; margin:0; color:var(--ink-2)}
.notice{margin-top:var(--s-7); padding:var(--s-5) var(--s-6); border-radius:var(--r-md);
  background:var(--aqua); color:var(--white); font-weight:600}

/* -------------------------------------------------------- 17. Responsive */
/* Between 1000 and 1200px the cart moves in under the copy, so hold the scrim
   opaque further across. Position and size are inherited from the base rule. */
@media (min-width:1001px) and (max-width:1200px){
  /* Cart drifts in under the copy here; hold the night scrim opaque further
     across so the light headline stays legible. */
  .hero::after{
    background:
      radial-gradient(120% 90% at 90% 16%, rgba(255,176,90,.28) 0%, transparent 46%),
      linear-gradient(90deg,
        var(--hero-night) 4%, rgba(7,28,34,.95) 48%,
        rgba(7,28,34,.5) 66%, rgba(7,28,34,0) 88%),
      linear-gradient(0deg, var(--hero-night) 1%, transparent 30%);
  }
  .hero__copy{max-width:540px}
}
@media (max-width:1000px){
  .booking-grid,.safety-grid,.manifesto{grid-template-columns:1fr}
  .step-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero__copy{max-width:none}
}
@media (max-width:1000px){
  /* Below 1000px the artwork drops to a band beneath the copy, so the layers
     are re-pointed rather than left painting the desktop art on top. */
  .hero{
    min-height:0; align-items:flex-start;
    padding:clamp(104px,14vw,132px) var(--gutter) 330px;
  }
  .hero::before{
    width:100%;
    background:url("../img/hero-art-1200.webp?v=1789175479") right bottom / 150% auto no-repeat;
  }
  /* Hold solid dark behind ALL the copy, then reveal the cart cleanly in the
     bottom band — no muddy grey behind the buttons/trust row. */
  .hero::after{
    background:
      radial-gradient(120% 46% at 72% 100%, rgba(255,176,90,.22) 0%, transparent 62%),
      linear-gradient(180deg,
        var(--hero-night) 0%,  var(--hero-night) 58%,
        rgba(7,28,34,.72) 72%, rgba(7,28,34,.18) 88%,
        rgba(7,28,34,0)   100%);
  }
  .hero__title{font-size:clamp(76px,15vw,132px)}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:168px}
}
@media (max-width:640px){
  .hero{padding-bottom:300px}
  .hero::before{
    background-image:url("../img/hero-art-900.webp?v=1789175479");
    background-size:190% auto;
  }
  /* Copy sits on solid dark; the cart gets a clean, warm-based band at the
     bottom rather than bleeding a light wash up behind the words. */
  .hero::after{
    background:
      radial-gradient(140% 42% at 68% 100%, rgba(255,176,90,.24) 0%, transparent 60%),
      linear-gradient(180deg,
        var(--hero-night) 0%,  var(--hero-night) 60%,
        rgba(7,28,34,.74) 73%, rgba(7,28,34,.2) 88%,
        rgba(7,28,34,0)   100%);
  }
  .hero__title{font-size:clamp(64px,17vw,104px)}
}
@media (max-width:640px){
  body{font-size:16px}
  .booking-form{grid-template-columns:1fr}
  .field--wide{grid-column:auto}
  .safety-cards,.merch-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero__actions .btn{flex:1 1 100%}
  .gallery-grid{grid-auto-rows:150px}
}

/* -------------------------------------------------- 18. Motion + print */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .btn:hover,.step:hover,.merch-card:hover,.gallery-card:hover img{transform:none}
}
@media print{
  .menu-toggle,.slide-menu,.menu-backdrop,.toast,.hero__actions{display:none!important}
  body{background:#fff}
}

/* ==========================================================================
   Components brought across from Concept B
   ========================================================================== */

/* ---- marquee band ---- */
.marquee{background:var(--ink); color:var(--cream); padding:15px 0;
  overflow:hidden; white-space:nowrap}
.marquee__inner{display:inline-flex; animation:soflo-slide 38s linear infinite; will-change:transform}
.marquee__inner span{font-family:var(--font-display); font-size:25px;
  letter-spacing:-.01em; padding-inline:26px}
.marquee__inner span:nth-child(3n+1){color:var(--mint)}
.marquee__inner span:nth-child(3n+2){color:var(--marigold)}
.marquee__inner span:nth-child(3n+3){color:var(--coral)}
@keyframes soflo-slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__inner{animation:none}}

/* ---- bento grid ---- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:var(--s-7)}
.tile{border-radius:var(--r-lg); padding:30px; background:var(--white);
  box-shadow:var(--shadow-md); display:flex; flex-direction:column;
  justify-content:space-between; min-height:212px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.tile h3{font-size:21px; margin:0 0 8px}
.tile p{font-size:15.5px; color:var(--ink-soft); margin:0}
.tile__n{display:block; font-family:var(--font-display); font-weight:400;
  font-size:42px; line-height:1; margin-bottom:20px}
.tile--1,.tile--2,.tile--3{grid-column:span 2}
.tile--1 .tile__n{color:var(--aqua)}
.tile--2 .tile__n{color:var(--marigold)}
.tile--3 .tile__n{color:var(--coral)}
.tile--wide{grid-column:span 4; background:var(--ink); color:var(--white)}
.tile--wide h3{font-family:var(--font-display); font-weight:400; line-height:1.06;
  font-size:clamp(26px,2.6vw,38px)}
.tile--wide p{color:#bcd8de}
.tile--stat{grid-column:span 2; background:var(--aqua); color:var(--white)}
.tile--stat .tile__big{font-family:var(--font-display); font-size:clamp(40px,4.4vw,58px);
  line-height:1; display:block; margin-bottom:8px}
.tile--stat p{color:rgba(255,255,255,.94)}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile--1,.tile--2,.tile--3,.tile--wide,.tile--stat{grid-column:span 2}
}

/* ---- scroll-snap gallery rail ---- */
.rail{display:flex; gap:16px; margin-top:var(--s-7); padding-bottom:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin;
  scroll-padding-left:var(--gutter)}
.rail figure{margin:0; flex:0 0 min(390px,76vw); scroll-snap-align:start;
  border-radius:var(--r-lg); overflow:hidden; position:relative; background:var(--sand)}
.rail img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--ease)}
.rail figure:hover img{transform:scale(1.04)}
.rail figcaption{position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px;
  color:#fff; font-size:14px; font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(6,26,32,.82))}

/* ---- closing CTA band ---- */
/* Closing CTA — dusk band that echoes the hero (warm sun glow over teal night),
   with the rainbow accent on top. The final push to book. */
.cta-band{position:relative; overflow:hidden; color:#fff; border-radius:var(--r-xl);
  padding:clamp(40px,6vw,80px); display:flex; flex-wrap:wrap; gap:24px 44px;
  align-items:center; justify-content:space-between;
  background:
    radial-gradient(90% 130% at 86% 12%, rgba(255,176,90,.24) 0%, transparent 55%),
    linear-gradient(120deg, #061a20 0%, #0c2e38 55%, #0e3a44 100%);}
/* rainbow accent strip across the top edge */
.cta-band::before{content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg,
    var(--aqua) 0 25%, var(--mint) 25% 45%, var(--marigold) 45% 72%, var(--coral) 72% 100%);}
.cta-band__text{position:relative; z-index:1}
.cta-band .eyebrow{margin-bottom:var(--s-3)}
.cta-band h2{font-family:var(--font-display); font-weight:400; color:#fff; margin:0;
  font-size:clamp(34px,4.6vw,60px); line-height:.98; letter-spacing:-.02em}
.cta-band h2 .w-1{color:var(--aqua)} .cta-band h2 .w-2{color:var(--marigold)} .cta-band h2 .w-3{color:var(--coral)}
.cta-band__sub{margin:var(--s-4) 0 0; font-family:var(--f-mono); font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:#a9c6ce}
.cta-band__actions{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px}

/* ---- "the tech" strip (dark, mono spec lines) ---- */
.section--night{background:var(--hero-night); color:var(--cream); --muted-fg:#9fc0c8}
.section--night .lede{color:#cfe3e8}
.tech-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4)}
.tcard{
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:var(--s-6);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.tcard:hover{transform:translateY(-4px); border-color:rgba(127,224,198,.4)}
.tcard__ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(127,224,198,.14); color:var(--mint); margin-bottom:var(--s-4);
  font-size:22px; line-height:1;
}
.tcard__ico svg{width:22px; height:22px}
.tcard h3{font-size:20px; margin:0 0 6px; color:#fff}
.tcard p{font-size:15px; line-height:1.55; color:#bcd8de; margin:0}
.tcard__stat{
  display:block; margin-top:var(--s-4); font-family:var(--f-mono);
  font-size:12px; letter-spacing:.05em; color:var(--marigold);
}
@media (max-width:900px){.tech-grid{grid-template-columns:1fr}}

/* ---- animated phone-as-key flow (inside #tech) ---- */
.keyflow{margin-top:var(--s-8); max-width:920px; margin-inline:auto}
.keyflow__title{font-family:var(--f-display); font-weight:400; text-align:center;
  color:#fff; font-size:clamp(22px,2.4vw,30px); margin:0 0 var(--s-7)}
.keyflow__diagram{position:relative; display:grid; grid-template-columns:1fr 1fr 1fr;
  align-items:start}
.kf-node{position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:12px; text-align:center}
.kf-step{font-family:var(--f-mono); font-size:11px; color:var(--marigold);
  border:1px solid rgba(232,147,58,.4); border-radius:var(--r-pill); padding:3px 9px}
.kf-box{width:96px; height:96px; border-radius:24px; display:grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  color:var(--mint); position:relative}
.kf-box svg{width:44px; height:44px}
.kf-node h4{font-size:15px; margin:2px 0 0; color:#fff}
.kf-node p{font-family:var(--f-mono); font-size:11px; letter-spacing:.03em;
  color:#9fc0c8; margin:0; max-width:20ch}

/* connective tracks between the icon boxes */
.kf-track{position:absolute; top:82px; height:2px; background:rgba(255,255,255,.14); z-index:1}
.kf-track--1{left:16.6%; right:50%}
.kf-track--2{left:50%; right:16.6%}

/* signed-key chip travels node 1 -> 2 */
.kf-grant{position:absolute; top:73px; left:16.6%; transform:translateX(-50%); z-index:3;
  font-family:var(--f-mono); font-size:10px; font-weight:700; color:var(--ink);
  background:var(--mint); border-radius:6px; padding:3px 7px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.4); opacity:0;
  animation:kfGrant 6s var(--ease) infinite}
@keyframes kfGrant{
  0%{opacity:0; left:16.6%} 6%{opacity:1; left:16.6%}
  26%{opacity:1; left:50%} 30%,100%{opacity:0; left:50%}}

/* BLE pulse travels node 2 -> 3 */
.kf-ble{position:absolute; top:68px; left:50%; margin-left:-15px; z-index:3;
  width:30px; height:30px; border-radius:50%; border:2px solid var(--aqua); opacity:0;
  animation:kfBle 6s linear infinite}
.kf-ble.b2{animation-delay:.35s} .kf-ble.b3{animation-delay:.7s}
@keyframes kfBle{
  0%,38%{opacity:0; left:50%; transform:scale(.4)}
  44%{opacity:.9; left:50%; transform:scale(.4)}
  62%{opacity:0; left:83.3%; transform:scale(1.7)}
  100%{opacity:0; left:83.3%}}

/* cart wakes: glow ring + check badge + headlight beams */
.kf-glow{position:absolute; inset:-6px; border-radius:28px; border:2px solid var(--mint);
  opacity:0; animation:kfWake 6s var(--ease) infinite}
@keyframes kfWake{0%,64%{opacity:0} 72%{opacity:1; box-shadow:0 0 30px rgba(127,224,198,.6)}
  92%,100%{opacity:.3; box-shadow:0 0 12px rgba(127,224,198,.25)}}
.kf-check{position:absolute; top:-10px; right:-10px; width:30px; height:30px;
  border-radius:50%; background:var(--go); display:grid; place-items:center;
  opacity:0; transform:scale(.4); animation:kfPop 6s var(--ease) infinite}
.kf-check svg{width:16px; height:16px}
@keyframes kfPop{0%,66%{opacity:0; transform:scale(.4)} 74%{opacity:1; transform:scale(1)}
  100%{opacity:1; transform:scale(1)}}
.kf-beam{opacity:0; animation:kfBeam 6s var(--ease) infinite}
@keyframes kfBeam{0%,66%{opacity:0} 76%{opacity:1} 100%{opacity:.7}}

/* cross-fading status caption */
.kf-status{position:relative; height:1.5em; margin-top:var(--s-7); text-align:center}
.kf-cap{position:absolute; left:0; right:0; opacity:0; font-family:var(--f-mono);
  font-size:13px; color:var(--mint)}
.kf-cap.c1{animation:kfCap 6s linear infinite}
.kf-cap.c2{animation:kfCap 6s linear infinite; animation-delay:2s}
.kf-cap.c3{animation:kfCap 6s linear infinite; animation-delay:4s}
@keyframes kfCap{0%{opacity:0} 4%{opacity:1} 28%{opacity:1} 33%{opacity:0} 100%{opacity:0}}

@media (max-width:640px){
  .keyflow__diagram{grid-template-columns:1fr; gap:26px; justify-items:center}
  .kf-track,.kf-grant,.kf-ble{display:none}
  .kf-node p{max-width:28ch}
}
@media (prefers-reduced-motion:reduce){
  .kf-grant,.kf-ble,.kf-glow,.kf-check,.kf-beam,.kf-cap{animation:none}
  .kf-glow{opacity:.4} .kf-check{opacity:1; transform:scale(1)} .kf-beam{opacity:.7}
  .kf-cap.c1{opacity:1}
}

/* ---- live availability bar (above the map) ---- */
.map-live{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  padding:14px 20px; background:var(--ink); color:#fff}
.map-live__dot{width:9px; height:9px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 rgba(127,224,198,.6); animation:soflo-pulse 2.4s infinite}
.map-live b{font-size:15px; font-weight:700; letter-spacing:-.01em}
.map-live__sub{font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
  color:#a9c6ce; margin-left:auto}
@media (prefers-reduced-motion:reduce){.map-live__dot{animation:none}}

/* ---- platform partner CTA ---- */
.platform-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  justify-content:space-between; margin-top:var(--s-7); padding-top:var(--s-6);
  border-top:1px solid rgba(255,255,255,.12)}
.platform-cta p{margin:0; font-size:clamp(18px,1.6vw,22px); color:#fff;
  font-weight:600; max-width:32ch}

/* ---- faq footer link ---- */
.faq-more{margin-top:var(--s-6); font-size:15px; color:var(--muted-fg)}
.faq-more a{color:var(--coral-deep); font-weight:700; text-decoration:underline;
  text-underline-offset:3px}

/* ---- cart map ---- */
.map-wrap{position:relative;margin-top:var(--s-7);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--shadow-md);background:var(--sand)}
#cartMap{height:clamp(340px,52vh,520px);width:100%;z-index:1}
.map-note{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  padding:14px 20px;background:var(--white);font-size:13.5px;color:var(--ink-soft);
  border-top:1px solid var(--line)}
.map-note b{color:var(--ink)}
.map-dot{display:inline-flex;align-items:center;gap:7px}
.map-dot::before{content:"";width:11px;height:11px;border-radius:50%;
  background:var(--coral-deep);box-shadow:0 0 0 3px rgba(208,64,60,.22)}
.map-dot.zone::before{background:transparent;border:2px dashed var(--aqua);
  box-shadow:none;width:13px;height:13px}
.leaflet-popup-content-wrapper{border-radius:var(--r-md)}
.leaflet-popup-content{margin:14px 16px;font-family:var(--font-body)}
.pop b{display:block;font-size:16px;margin-bottom:2px}
.pop small{color:var(--ink-soft)}
.pop .price{font-family:var(--font-display);font-size:22px;display:block;margin:8px 0 10px}
.pop a{display:inline-block;background:var(--coral-deep);color:#fff;font-weight:700;
  padding:9px 16px;border-radius:var(--r-pill);font-size:14px}
.pop a:hover{background:var(--coral-hover)}
.map-pin{background:var(--coral-deep);width:26px;height:26px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);border:3px solid #fff;box-shadow:var(--shadow-md)}
.map-fallback{padding:36px 24px;text-align:center;color:var(--ink-soft);font-size:15px}