/* Coroute website: design tokens, base, layout and shared components.
   One file, no build step. Read FOUNDATION.md before adding page styles.
   Page-specific CSS goes in a <style> block of that page, using only the tokens below. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1, see /fonts/OFL-*.txt) ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Metric-adjusted local fallbacks keep layout shift small while the web fonts load. */
@font-face{font-family:"Barlow Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:94%;ascent-override:100%;descent-override:20%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow"),local("Roboto Condensed"),local("Liberation Sans Narrow"),local("Arial");size-adjust:82%;ascent-override:110%;descent-override:22%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  /* Colour: asphalt ground, warm text, one road orange, status colours with fixed meaning. */
  --c-asphalt:#0B0D0E;          /* page background */
  --c-surface-1:#121516;        /* sections, cards */
  --c-surface-2:#191D1E;        /* raised: inputs, markers, chips */
  --c-surface-3:#212628;        /* hover on raised */
  --c-line:#262B2D;             /* hairlines, borders */
  --c-line-strong:#363C3F;      /* input borders, emphasised dividers */
  --c-text:#F2EEE7;             /* warm near-white */
  --c-text-2:#A8A49C;           /* secondary copy */
  --c-text-3:#8A867F;           /* captions, meta (AA on asphalt and surfaces) */
  --c-accent:#FF6F2E;           /* road / safety orange: CTAs, the route line, "you" */
  --c-accent-hover:#FF8549;
  --c-accent-press:#EE5E1E;
  --c-accent-ink:#170A03;       /* text on accent */
  --c-accent-soft:rgba(255,111,46,.12);
  --c-accent-line:rgba(255,111,46,.42);
  --c-amber:#FFB347;            /* warning, caution, stopped, lead rider (logo's lead dot) */
  --c-amber-soft:rgba(255,179,71,.13);
  --c-green:#4FD18B;            /* connected, ok, stop complete, live */
  --c-green-soft:rgba(79,209,139,.13);
  --c-red:#FF4D4A;              /* emergency: text, rings, strokes */
  --c-red-fill:#D42D2A;         /* emergency: filled backgrounds behind white text */
  --c-red-soft:rgba(255,77,74,.14);
  --c-nav:#3EE0EC;              /* navigation / responder route only (the logo's road). Use sparingly. */
  --c-nav-soft:rgba(62,224,236,.12);
  --c-scrim:rgba(11,13,14,.9);

  /* Type */
  --font-body:"Barlow","Barlow Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Barlow Condensed","Barlow Condensed Fallback","Arial Narrow",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-display:clamp(3.5rem,1.9rem + 6.6vw,8rem);      /* 56 to 128 */
  --fs-h1:clamp(2.75rem,1.7rem + 4.4vw,5.5rem);        /* 44 to 88 */
  --fs-h2:clamp(2.125rem,1.45rem + 2.8vw,3.75rem);     /* 34 to 60 */
  --fs-h3:clamp(1.375rem,1.15rem + .9vw,1.75rem);      /* 22 to 28 */
  --fs-h4:1.25rem;                                     /* 20 */
  --fs-lead:clamp(1.125rem,1.02rem + .45vw,1.3125rem); /* 18 to 21 */
  --fs-body:1.0625rem;                                 /* 17 */
  --fs-small:.9375rem;                                 /* 15 */
  --fs-xs:.8125rem;                                    /* 13 */
  --fs-label:.75rem;                                   /* 12, uppercase labels */
  --lh-display:.92;
  --lh-heading:1;
  --lh-snug:1.3;
  --lh-body:1.6;
  --tr-label:.14em;
  --tr-display:-.005em;

  /* Space: 4 8 12 16 24 32 48 64 96 128 */
  --sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-48:48px;--sp-64:64px;--sp-96:96px;--sp-128:128px;
  --section-y:clamp(64px,5vw + 40px,128px);
  --gutter:clamp(16px,4vw,32px);

  /* Layout */
  --container:1200px;
  --reading:720px;
  --header-h:72px;
  --header-h-compact:60px;
  /* Breakpoints (for reference; media queries cannot read variables): sm 560, md 768, lg 1024, xl 1280. */
  --bp-sm:560px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;

  /* Shape */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-round:999px;
  --bw:1px;
  --border:var(--bw) solid var(--c-line);
  --border-strong:var(--bw) solid var(--c-line-strong);
  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset,0 6px 20px rgba(0,0,0,.28);
  --shadow-2:0 1px 0 rgba(255,255,255,.04) inset,0 18px 48px rgba(0,0,0,.42);
  --ring:0 0 0 2px var(--c-asphalt),0 0 0 4px var(--c-accent);

  /* Stacking */
  --z-base:0;--z-raised:10;--z-marker:20;--z-sticky:50;--z-header:100;--z-menu:110;--z-overlay:200;--z-toast:300;--z-skip:1000;

  /* Motion */
  --d-fast:150ms;--d-base:250ms;--d-reveal:600ms;--d-slow:900ms;--d-route:1400ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  color-scheme:dark;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--c-asphalt);color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[role="list"],ol[role="list"],ul[class],ol[class]{list-style:none;padding:0}
img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
table{border-collapse:collapse}
::selection{background:var(--c-accent);color:var(--c-accent-ink)}
[hidden]{display:none !important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-xs)}
.site-main{flex:1 0 auto;padding-top:var(--header-h);display:block}
.site-main:focus{outline:none}
/* A page whose first section is a full-bleed hero that sits under the transparent header. */
[data-header-overlay] .site-main{padding-top:0}

/* ---------- Typography ---------- */
h1,h2,h3,.t-display,.t-h1,.t-h2,.t-h3{font-family:var(--font-display);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--tr-display);text-wrap:balance}
h1,.t-h1{font-size:var(--fs-h1);line-height:var(--lh-display)}
h2,.t-h2{font-size:var(--fs-h2)}
h3,.t-h3{font-size:var(--fs-h3);line-height:1.08}
h4,.t-h4{font-family:var(--font-body);font-size:var(--fs-h4);font-weight:600;line-height:var(--lh-snug)}
.t-display{font-size:var(--fs-display);line-height:var(--lh-display)}
.t-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-text-2);max-width:38em;text-wrap:pretty}
.t-body{font-size:var(--fs-body)}
.t-small{font-size:var(--fs-small)}
.t-xs{font-size:var(--fs-xs)}
.t-label{font-family:var(--font-display);font-weight:700;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;line-height:1.2}
.t-mono{font-family:var(--font-mono);font-size:.92em}
.t-num{font-variant-numeric:tabular-nums lining-nums}
.t-muted{color:var(--c-text-2)}
.t-faint{color:var(--c-text-3)}
.t-accent{color:var(--c-accent)}
.t-center{text-align:center}
.t-balance{text-wrap:balance}
p{text-wrap:pretty}
strong,b{font-weight:600}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-accent);line-height:1.2}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:1px;flex:none}
.eyebrow--plain::before{display:none}
.eyebrow--muted{color:var(--c-text-2)}

/* Long-form text (privacy, terms, about). */
.prose{max-width:var(--reading);color:var(--c-text-2);font-size:var(--fs-body)}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);color:var(--c-text);margin-top:2.2em}
.prose h3{font-size:var(--fs-h3);color:var(--c-text);margin-top:1.8em}
.prose h2 + *,.prose h3 + *{margin-top:.6em}
.prose strong,.prose b{color:var(--c-text)}
.prose a{color:var(--c-text);text-decoration-color:var(--c-accent)}
.prose a:hover{color:var(--c-accent)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--c-accent)}
.prose table{width:100%;font-size:var(--fs-small);display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:var(--border)}
.prose th{color:var(--c-text);font-weight:600}
.prose hr{border:0;border-top:var(--border);margin-block:2em}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--c-surface-2);padding:.1em .35em;border-radius:var(--r-xs)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.container--reading{max-width:calc(var(--reading) + 2 * var(--gutter))}
.container--wide{max-width:calc(1440px + 2 * var(--gutter))}
.section{position:relative;padding-block:var(--section-y)}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--flush-top{padding-top:0}
.section--surface{background:var(--c-surface-1);border-block:var(--border)}
.section--topo{isolation:isolate}
.section--topo::before,.topo::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/topo.svg) center/cover no-repeat;opacity:var(--topo-opacity,.9);pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.topo{position:relative;isolation:isolate}

.stack{display:flex;flex-direction:column;gap:var(--stack,var(--sp-16))}
.stack > *{margin:0}
.stack--4{--stack:var(--sp-4)}.stack--8{--stack:var(--sp-8)}.stack--12{--stack:var(--sp-12)}.stack--16{--stack:var(--sp-16)}.stack--24{--stack:var(--sp-24)}.stack--32{--stack:var(--sp-32)}.stack--48{--stack:var(--sp-48)}.stack--64{--stack:var(--sp-64)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster,var(--sp-12))}
.cluster--8{--cluster:var(--sp-8)}.cluster--16{--cluster:var(--sp-16)}.cluster--24{--cluster:var(--sp-24)}
.grid{display:grid;gap:var(--grid-gap,var(--sp-24));grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-min,280px)),1fr))}
.grid--2{--grid-min:340px}
.grid--3{--grid-min:280px}
.grid--4{--grid-min:220px}
@media (min-width:1024px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}
.split{display:grid;gap:clamp(32px,5vw,80px);align-items:center}
@media (min-width:1024px){
  .split{grid-template-columns:1fr 1fr}
  .split--text-wide{grid-template-columns:1.15fr .85fr}
  .split--media-wide{grid-template-columns:.85fr 1.15fr}
  .split--reverse > :first-child{order:2}
}
.center{margin-inline:auto}
.full-bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.sr-only,.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em}
.icon--16{width:16px;height:16px}.icon--20{width:20px;height:20px}.icon--24{width:24px;height:24px}.icon--32{width:32px;height:32px}

/* Road marking: a dashed centre line, used as divider and as the visual thread. */
.lane{height:2px;border:0;margin:0;background:repeating-linear-gradient(90deg,var(--c-line-strong) 0 28px,transparent 28px 52px)}
.lane--accent{background:repeating-linear-gradient(90deg,var(--c-accent) 0 28px,transparent 28px 52px)}
.lane--v{width:2px;height:auto;min-height:48px;background:repeating-linear-gradient(180deg,var(--c-line-strong) 0 18px,transparent 18px 34px)}

/* ---------- Skip link ---------- */
.skip-link{position:fixed;left:16px;top:12px;z-index:var(--z-skip);padding:10px 16px;background:var(--c-accent);color:var(--c-accent-ink);font-weight:600;border-radius:var(--r-sm);text-decoration:none;transform:translateY(-160%);transition:transform var(--d-fast) var(--ease-out)}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline:none;box-shadow:var(--ring)}

/* ---------- Header / nav ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:var(--z-header);isolation:isolate;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:border-color var(--d-base) var(--ease-out)}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-24);height:var(--header-h);transition:height var(--d-base) var(--ease-out)}
/* The blur lives on a pseudo element: backdrop-filter on the header itself would trap the fixed mobile menu. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:var(--c-scrim);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);transition:opacity var(--d-base) var(--ease-out);pointer-events:none}
.site-header.is-scrolled,.site-header.is-open{border-bottom-color:var(--c-line)}
.site-header.is-scrolled::before,.site-header.is-open::before{opacity:1}
.site-header.is-scrolled .site-header__inner{height:var(--header-h-compact)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header::before{background:var(--c-asphalt)}}

.brand{display:inline-flex;align-items:center;gap:10px;color:var(--c-text);text-decoration:none;flex:none;border-radius:var(--r-sm)}
.brand__mark{width:32px;height:32px;border-radius:8px;flex:none}
.brand__word{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding-top:2px}

.site-nav{margin-left:auto;display:none}
.site-nav__list{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.site-nav__link{position:relative;display:inline-block;padding:8px 0;color:var(--c-text-2);font-size:var(--fs-small);font-weight:600;text-decoration:none;transition:color var(--d-fast) var(--ease-out)}
.site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:1px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d-base) var(--ease-out)}
.site-nav__link:hover{color:var(--c-text)}
.site-nav__link:hover::after{transform:scaleX(.35)}
.site-nav__link[aria-current="page"]{color:var(--c-text)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.site-header__actions{display:flex;align-items:center;gap:var(--sp-8);margin-left:auto}
.site-header__cta .when-wide{display:none}
/* Narrow phones (320 to 389 px): logo, Download and Menu must all fit, so the gaps tighten and the
   Menu button shows only its icon. Its text stays in the accessible name (visually hidden, not removed). */
.site-header__inner{gap:var(--sp-12)}
.site-header .brand{gap:8px}
.site-header .brand__word{font-size:1.3rem}
.site-header__cta.btn{padding-inline:14px}
.site-header .nav-toggle{width:40px;padding:0;justify-content:center}
.nav-toggle__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:390px){
  .site-header__inner{gap:var(--sp-24)}
  .site-header .brand{gap:10px}
  .site-header .brand__word{font-size:1.5rem}
  .site-header__cta.btn{padding-inline:16px}
  .site-header .nav-toggle{width:auto;padding:0 12px 0 14px}
  .nav-toggle__label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
}

.nav-toggle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 14px;border-radius:var(--r-sm);border:var(--border-strong);background:transparent;color:var(--c-text);font-size:var(--fs-small);font-weight:600}
.nav-toggle:hover{background:var(--c-surface-2)}
.nav-toggle .icon{width:20px;height:20px}
.nav-toggle .i-close,.nav-toggle[aria-expanded="true"] .i-menu{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}

.mobile-menu{position:fixed;left:0;right:0;top:calc(var(--header-h) + env(safe-area-inset-top,0px));bottom:0;z-index:var(--z-menu);background:var(--c-asphalt);border-top:var(--border);overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-24) var(--gutter) calc(var(--sp-48) + env(safe-area-inset-bottom,0px))}
.site-header.is-scrolled .mobile-menu{top:calc(var(--header-h-compact) + env(safe-area-inset-top,0px))}
.mobile-menu__list{display:flex;flex-direction:column}
.mobile-menu__link{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:var(--border);font-family:var(--font-display);font-weight:700;font-size:1.875rem;line-height:1.1;color:var(--c-text);text-decoration:none}
.mobile-menu__link .icon{color:var(--c-text-3);transition:transform var(--d-fast) var(--ease-out),color var(--d-fast)}
.mobile-menu__link:hover .icon,.mobile-menu__link[aria-current="page"] .icon{color:var(--c-accent);transform:translateX(3px)}
.mobile-menu__link[aria-current="page"]{color:var(--c-accent)}
.mobile-menu__foot{margin-top:var(--sp-32);display:flex;flex-direction:column;gap:var(--sp-16)}
.mobile-menu.is-entering{animation:menu-in var(--d-base) var(--ease-out) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
html.menu-open{overflow:hidden}

@media (min-width:1024px){
  .site-nav{display:block}
  .site-header__actions{margin-left:var(--sp-8)}
  .nav-toggle,.mobile-menu{display:none !important}
  .site-header__cta .when-wide{display:inline}
  .site-header__cta .when-narrow{display:none}
}

/* ---------- Footer ---------- */
.site-footer{position:relative;margin-top:auto;background:var(--c-asphalt);border-top:var(--border);padding-top:var(--sp-64);padding-bottom:calc(var(--sp-32) + env(safe-area-inset-bottom,0px));color:var(--c-text-2);font-size:var(--fs-small)}
.site-footer__top{display:grid;gap:var(--sp-48)}
.site-footer__brand{max-width:360px}
.site-footer__brand p{margin-top:var(--sp-16)}
.site-footer__motto{margin-top:var(--sp-24);font-family:var(--font-display);font-weight:700;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-text-3);line-height:1.7}
.site-footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-32) var(--sp-24)}
.site-footer__heading{font-family:var(--font-display);font-weight:700;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-text-3);margin-bottom:var(--sp-12)}
.site-footer__list{display:flex;flex-direction:column;gap:var(--sp-8)}
.site-footer a{color:var(--c-text-2);text-decoration:none;transition:color var(--d-fast)}
.site-footer a:hover{color:var(--c-text);text-decoration:underline;text-decoration-color:var(--c-accent)}
.site-footer .brand{color:var(--c-text)}
.site-footer .brand:hover{text-decoration:none}
.site-footer__road{margin-block:var(--sp-48) var(--sp-24)}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-8) var(--sp-24);font-size:var(--fs-xs);color:var(--c-text-3)}
.site-footer__bottom a{color:var(--c-text-2);text-decoration:underline;text-decoration-color:var(--c-line-strong);text-underline-offset:3px}
@media (min-width:768px){
  .site-footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .site-footer__top{grid-template-columns:1fr auto;gap:var(--sp-96)}
  .site-footer__nav{gap:var(--sp-24) var(--sp-96)}
}

/* ---------- Buttons ---------- */
.btn{--btn-h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding:0 22px;border-radius:var(--r-sm);border:1px solid transparent;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),color var(--d-fast),transform var(--d-fast) var(--ease-out)}
.btn .icon{width:18px;height:18px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn--primary{background:var(--c-accent);color:var(--c-accent-ink)}
.btn--primary:hover{background:var(--c-accent-hover)}
.btn--primary:active{background:var(--c-accent-press)}
.btn--secondary{background:var(--c-surface-2);border-color:var(--c-line-strong);color:var(--c-text)}
.btn--secondary:hover{background:var(--c-surface-3);border-color:#454c50}
.btn--ghost{background:transparent;color:var(--c-text)}
.btn--ghost:hover{background:var(--c-surface-2)}
.btn--sm{--btn-h:40px;padding:0 16px;font-size:var(--fs-small)}
.btn--lg{--btn-h:56px;padding:0 28px;font-size:1.0625rem}
.btn--block{display:flex;width:100%}
.btn__sub{display:block;font-weight:400;font-size:var(--fs-xs);opacity:.75;margin-top:2px}

.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--c-text);font-weight:600;text-decoration:none;border-radius:var(--r-xs)}
.link-arrow .icon{width:18px;height:18px;color:var(--c-accent);transition:transform var(--d-fast) var(--ease-out)}
.link-arrow span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color var(--d-fast)}
.link-arrow:hover span{text-decoration-color:var(--c-accent)}
.link-arrow:hover .icon{transform:translateX(3px)}
.link{color:var(--c-text);text-decoration:underline;text-decoration-color:var(--c-accent-line)}
.link:hover{text-decoration-color:var(--c-accent)}

/* ---------- Section intro ---------- */
.section-intro{display:flex;flex-direction:column;gap:var(--sp-16);max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-intro__title{font-size:var(--fs-h2)}
.section-intro .t-lead{margin-top:var(--sp-4)}
.section-intro--center{margin-inline:auto;text-align:center;align-items:center}
.section-intro--flush{margin-bottom:0}

/* ---------- Page hero (sub pages) ---------- */
.page-hero{position:relative;isolation:isolate;padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,88px);overflow:hidden}
.page-hero:has(.page-hero__route){padding-bottom:calc(clamp(90px,14vw,160px) + clamp(32px,4vw,56px))}
.page-hero__inner{display:flex;flex-direction:column;gap:var(--sp-24);max-width:880px}
.page-hero__route{position:absolute;inset:auto 0 0 0;height:clamp(90px,14vw,160px);z-index:-1;pointer-events:none;width:100%}
.page-hero .t-lead{max-width:36em}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-xs);border:1px solid var(--c-line-strong);background:var(--c-surface-2);color:var(--c-text-2);font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap;vertical-align:middle}
.badge--new{border-color:var(--c-accent-line);background:var(--c-accent-soft);color:var(--c-accent)}
.badge--live{border-color:rgba(79,209,139,.38);background:var(--c-green-soft);color:var(--c-green)}
.badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:live-dot 2.4s var(--ease-out) infinite}
.badge--warn{border-color:rgba(255,179,71,.4);background:var(--c-amber-soft);color:var(--c-amber)}
.badge--danger{border-color:rgba(255,77,74,.45);background:var(--c-red-soft);color:var(--c-red)}
.badge--nav{border-color:rgba(62,224,236,.38);background:var(--c-nav-soft);color:var(--c-nav)}
@keyframes live-dot{0%{box-shadow:0 0 0 0 rgba(79,209,139,.5)}70%,100%{box-shadow:0 0 0 6px rgba(79,209,139,0)}}

/* ---------- Cards ---------- */
.card{position:relative;background:var(--c-surface-1);border:var(--border);border-radius:var(--r-md);padding:clamp(20px,2.4vw,32px)}
.card--raised{background:var(--c-surface-2);box-shadow:var(--shadow-1)}
.card__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--c-surface-2);border:var(--border);color:var(--c-accent);margin-bottom:var(--sp-16)}
.card__icon .icon{width:22px;height:22px}
.card h3{font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem)}
.card p{color:var(--c-text-2);margin-top:var(--sp-8)}

/* ---------- Trust item ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-top:var(--border)}
.trust-item{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-32) var(--sp-24) var(--sp-32) 0}
.trust-item__icon{width:28px;height:28px;color:var(--c-accent)}
.trust-item__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:.02em;text-transform:uppercase;line-height:1}
.trust-item__text{color:var(--c-text-2);font-size:var(--fs-small);max-width:28em}
@media (min-width:1024px){
  .trust-grid .trust-item + .trust-item{border-left:var(--border);padding-left:var(--sp-24)}
}

/* ---------- Comparison (two columns, not a pricing table) ---------- */
.compare{display:grid;gap:var(--sp-16)}
@media (min-width:768px){.compare{grid-template-columns:1fr 1fr;gap:var(--sp-24)}}
.compare__col{background:var(--c-surface-1);border:var(--border);border-top:2px solid var(--compare-c,var(--c-accent));border-radius:var(--r-md);padding:clamp(20px,2.4vw,32px)}
.compare__col--safety{--compare-c:var(--c-accent)}
.compare__col--social{--compare-c:var(--c-nav)}
.compare__head{display:flex;align-items:center;gap:var(--sp-12);margin-bottom:var(--sp-8)}
.compare__head .icon{width:24px;height:24px;color:var(--compare-c)}
.compare__title{font-size:var(--fs-h3)}
.compare__sub{color:var(--c-text-2);font-size:var(--fs-small);margin-bottom:var(--sp-16)}
.compare__list{--compare-c:var(--c-accent);display:flex;flex-direction:column}
.compare__list li{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-12);padding:var(--sp-12) 0;border-top:var(--border);font-size:var(--fs-small);color:var(--c-text)}
.compare__list li .icon{width:18px;height:18px;margin-top:2px;color:var(--compare-c)}
.compare__list li.is-off{color:var(--c-text-3)}
.compare__list li.is-off .icon{color:var(--c-text-3)}
.compare__note{margin-top:var(--sp-16);color:var(--c-text-2);font-size:var(--fs-small)}

/* ---------- Steps (01 02 03 on one route line) ---------- */
.steps{position:relative;display:grid;gap:var(--sp-32);counter-reset:step}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:var(--sp-16) var(--sp-24);align-items:start}
.step__num{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-md);background:var(--c-asphalt);border:2px solid var(--c-accent);font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--c-text);font-variant-numeric:tabular-nums}
.step__body{display:flex;flex-direction:column;gap:var(--sp-8);padding-top:6px}
.step__title{font-size:var(--fs-h3)}
.step__text{color:var(--c-text-2)}
/* the dashed road connecting the numbers */
.steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(180deg,var(--c-line-strong) 0 14px,transparent 14px 26px)}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(var(--steps,3),1fr);gap:var(--sp-48)}
  .step{grid-template-columns:1fr;gap:var(--sp-24)}
  .step__body{padding-top:0}
  .steps::before{left:28px;right:28px;top:27px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--c-line-strong) 0 22px,transparent 22px 40px)}
}

/* ---------- Map / route primitives ----------
   .map is a positioning box. Put an <svg class="map__svg" viewBox="0 0 W H"> for roads and routes,
   and HTML markers positioned with --x/--y in percent of the same box. Keep the box's aspect-ratio
   equal to the SVG viewBox (set --map-ratio: W / H) so percent and SVG units line up. */
.map{position:relative;isolation:isolate;aspect-ratio:var(--map-ratio,16 / 10);background:var(--c-surface-1);border:var(--border);border-radius:var(--r-md);overflow:hidden;contain:layout paint}
.map::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/topo.svg) center/cover no-repeat;opacity:.85}
.map--bare{background:transparent;border:0;border-radius:0}
.map--bare::before{display:none}
.map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map__grid{stroke:var(--c-line);stroke-width:1;fill:none;opacity:.6}
.road{fill:none;stroke:#1C2123;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.road--minor{stroke:#181C1E;stroke-width:9}
.road__edge{fill:none;stroke:var(--c-line-strong);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
.road__centre{fill:none;stroke:rgba(242,238,231,.22);stroke-width:1.5;stroke-dasharray:10 12;stroke-linecap:butt}
.route-casing{fill:none;stroke:var(--c-asphalt);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.route-line{fill:none;stroke:var(--c-accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.route-line--thin{stroke-width:2.5}
.route-line--planned{stroke:var(--c-text-3);stroke-dasharray:2 9;stroke-width:3}
.route-line--cleared{stroke:var(--c-accent);opacity:.22}
.route-line--help{stroke:var(--c-nav)}
.route-line--group{stroke:var(--c-amber)}
.route-line--muted{stroke:var(--c-line-strong)}
/* Route draw: JS sets --len (px) on [data-route] paths; --p comes from the nearest [data-progress].
   Optional --from/--to (0..1) map a sub-range of the progress to the draw. Without JS the line is fully drawn. */
.route-draw{--rp:clamp(0,(var(--p,1) - var(--from,0)) / (var(--to,1) - var(--from,0)),1);stroke-dasharray:var(--len,0) var(--len,0);stroke-dashoffset:calc(var(--len,0px) * (1 - var(--rp)))}
.route-draw.is-timed{transition:stroke-dashoffset var(--d-route) var(--ease-out)}

.marker{position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:var(--z-marker);transform:translate(-50%,-50%);transition:left var(--d-slow) var(--ease-inout),top var(--d-slow) var(--ease-inout),opacity var(--d-base) var(--ease-out)}
.marker__label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;text-transform:none;letter-spacing:normal}
.marker__label--left{left:auto;right:calc(100% + 10px)}
.marker__label--above{left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}
.marker__label--below{left:50%;top:calc(100% + 8px);transform:translateX(-50%)}

/* Rider: initials in a ring. Ring colour = status. */
.rider{--rider-c:var(--c-text-2);--rider-size:36px;width:var(--rider-size);height:var(--rider-size);display:grid;place-items:center;border-radius:50%;background:var(--c-surface-2);border:2px solid var(--rider-c);box-shadow:0 0 0 3px var(--c-asphalt);color:var(--c-text);font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:.04em;line-height:1;text-transform:uppercase}
.rider--lead{--rider-c:var(--c-amber)}
.rider--you{--rider-c:var(--c-accent);--rider-size:42px;background:var(--c-accent);color:var(--c-accent-ink);font-size:.875rem}
.rider--ok{--rider-c:var(--c-green)}
.rider--behind{--rider-c:var(--c-text-3)}
.rider--stopped{--rider-c:var(--c-amber);background:#2A2318}
.rider--sos{--rider-c:var(--c-red);background:var(--c-red-fill);color:#fff}
.rider--helper{--rider-c:var(--c-nav)}
.rider--offline{--rider-c:var(--c-text-3);border-style:dashed;opacity:.7}
.rider--sm{--rider-size:28px;font-size:.6875rem}

/* Group marker: another riding group, or a collapsed cluster. */
.group-marker{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 8px;border-radius:var(--r-sm);background:var(--c-surface-2);border:1.5px solid var(--group-c,var(--c-line-strong));box-shadow:0 0 0 3px var(--c-asphalt);color:var(--c-text);font-family:var(--font-display);font-weight:700;font-size:.875rem;line-height:1;white-space:nowrap}
.group-marker .icon{width:16px;height:16px;color:var(--group-c,var(--c-text-2))}
.group-marker--own{--group-c:var(--c-accent)}
.group-marker--other{--group-c:var(--c-nav)}
.group-marker--muted{--group-c:var(--c-line-strong);color:var(--c-text-2)}

/* Distance / ETA chip. */
.distance-label{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:var(--r-xs);background:rgba(18,21,22,.92);border:1px solid var(--c-line-strong);color:var(--c-text);font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:.04em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.distance-label__k{color:var(--c-text-3);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.6875rem}
.distance-label--accent{border-color:var(--c-accent-line);color:var(--c-accent)}
.distance-label--warn{border-color:rgba(255,179,71,.45);color:var(--c-amber)}
.distance-label--danger{border-color:rgba(255,77,74,.5);color:var(--c-red)}
.distance-label--ok{border-color:rgba(79,209,139,.42);color:var(--c-green)}
.distance-label--nav{border-color:rgba(62,224,236,.42);color:var(--c-nav)}

/* Emergency: red core with a restrained pulse (2 rings, slow, paused off-screen and for reduced motion). */
.emergency-marker{position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:calc(var(--z-marker) + 1);width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;background:var(--c-red-fill);box-shadow:0 0 0 3px var(--c-asphalt),0 0 0 5px var(--c-red)}
.emergency-marker::before,.emergency-marker::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--c-red);opacity:0;animation:sos-pulse 2.8s var(--ease-out) infinite}
.emergency-marker::after{animation-delay:1.4s}
.emergency-marker--static::before,.emergency-marker--static::after{animation:none}
@keyframes sos-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(3);opacity:0}}

/* Hazard: amber triangle (accident reported ahead). */
.hazard-marker{position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:var(--z-marker);width:30px;height:27px;transform:translate(-50%,-60%);color:var(--c-amber);filter:drop-shadow(0 0 0 var(--c-asphalt))}
.hazard-marker svg{width:100%;height:100%;overflow:visible}

/* Stop: rounded square with the stop kind icon. Kinds come from the app: fuel, food, rest, meeting, scenic, toll, stop. */
.stop-marker{--stop-c:var(--c-text);display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--c-surface-2);border:1.5px solid var(--c-line-strong);box-shadow:0 0 0 3px var(--c-asphalt);color:var(--stop-c)}
.stop-marker .icon{width:18px;height:18px}
.stop-marker--next{border-color:var(--c-amber);--stop-c:var(--c-amber)}
.stop-marker--done{border-color:var(--c-green);--stop-c:var(--c-green)}
.stop-marker--dest{border-color:var(--c-accent);--stop-c:var(--c-accent)}
.stop-count{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- In-app alert card (POSSIBLE ACCIDENT, CAUTION, responder ETA) ---------- */
.alert-card{--alert-c:var(--c-text-2);display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16);border-radius:var(--r-md);background:var(--c-surface-2);border:1px solid var(--c-line-strong);border-left:3px solid var(--alert-c);box-shadow:var(--shadow-1)}
.alert-card__kicker{display:flex;align-items:center;gap:8px;color:var(--alert-c);font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:var(--tr-label);text-transform:uppercase;line-height:1.2}
.alert-card__kicker .icon{width:18px;height:18px}
.alert-card__title{font-family:var(--font-display);font-weight:700;font-size:1.375rem;line-height:1.1}
.alert-card__meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--c-text-2);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.alert-card__actions{display:flex;gap:var(--sp-8);margin-top:var(--sp-4)}
.alert-card__actions > *{flex:1}
.alert-card--danger{--alert-c:var(--c-red)}
.alert-card--warn{--alert-c:var(--c-amber)}
.alert-card--ok{--alert-c:var(--c-green)}
.alert-card--nav{--alert-c:var(--c-nav)}
.chip-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--c-line-strong);background:var(--c-surface-1);color:var(--c-text);font-weight:600;font-size:var(--fs-xs);white-space:nowrap}
.chip-btn--danger{background:var(--c-red-fill);border-color:var(--c-red-fill);color:#fff}
.chip-btn--ok{border-color:rgba(79,209,139,.5);color:var(--c-green)}

/* ---------- Phone mockup (CSS only) ---------- */
.phone{--phone-w:300px;position:relative;width:var(--phone-w);max-width:100%;aspect-ratio:9 / 19.5;padding:calc(var(--phone-w) * .032);border-radius:calc(var(--phone-w) * .15);background:linear-gradient(160deg,#2A2F31,#121516 40%,#0E1011);border:1px solid #3A4043;box-shadow:var(--shadow-2)}
.phone::before{content:"";position:absolute;right:-3px;top:22%;width:3px;height:12%;border-radius:0 2px 2px 0;background:#2F3436}
.phone::after{content:"";position:absolute;left:-3px;top:18%;width:3px;height:7%;border-radius:2px 0 0 2px;background:#2F3436;box-shadow:0 calc(var(--phone-w) * .11) 0 #2F3436}
.phone__screen{position:relative;width:100%;height:100%;border-radius:calc(var(--phone-w) * .12);background:var(--c-asphalt);overflow:hidden;isolation:isolate}
.phone__island{position:absolute;top:calc(var(--phone-w) * .03);left:50%;transform:translateX(-50%);width:30%;height:calc(var(--phone-w) * .085);border-radius:999px;background:#000;z-index:5}
.phone__status{position:absolute;inset:0 0 auto 0;height:calc(var(--phone-w) * .14);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--phone-w) * .09);font-size:calc(var(--phone-w) * .042);font-weight:600;color:var(--c-text);z-index:4;font-variant-numeric:tabular-nums}
.phone__content{position:absolute;inset:calc(var(--phone-w) * .14) 0 0 0;display:flex;flex-direction:column}
.phone--sm{--phone-w:240px}
.phone--lg{--phone-w:340px}

/* ---------- Forms (feedback) ---------- */
.form{display:grid;gap:var(--sp-16)}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-weight:600;font-size:var(--fs-small);color:var(--c-text)}
.field__label .t-faint{font-weight:400}
.field__input{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--c-line-strong);background:var(--c-surface-1);color:var(--c-text);font-size:1rem;line-height:1.4;transition:border-color var(--d-fast),box-shadow var(--d-fast),background-color var(--d-fast)}
textarea.field__input{min-height:144px;resize:vertical}
.field__input::placeholder{color:var(--c-text-3)}
.field__input:hover{border-color:#454c50}
.field__input:focus-visible{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft)}
.field__input[aria-invalid="true"]{border-color:var(--c-red)}
/* The error line keeps its space even when empty: an error appearing on blur must not push the submit
   button down between mousedown and mouseup (the click would land beside it and be lost). */
.field__error{display:block;min-height:calc(var(--fs-xs) * 1.4);line-height:1.4;margin-bottom:-6px;color:var(--c-red);font-size:var(--fs-xs)}
.field__hint{color:var(--c-text-3);font-size:var(--fs-xs)}
/* Honeypot: off-screen for people, still in the DOM for bots. Never display:none. */
.hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-16)}
.form__status{font-size:var(--fs-small);color:var(--c-text-2);display:flex;align-items:center;gap:8px}
.form__status:empty{display:none}
.form__status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.form[data-state="sending"] .form__status{color:var(--c-text-2)}
.form[data-state="sent"] .form__status{color:var(--c-green)}
.form[data-state="error"] .form__status{color:var(--c-red)}
.form[data-state="sending"] [type="submit"]{cursor:progress}
.form[data-state="sending"] [type="submit"]::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Motion: reveal ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="left"]{transform:translate3d(-24px,0,0)}
.js [data-reveal="right"]{transform:translate3d(24px,0,0)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal].is-instant{transition:none}

/* ---------- Motion: pinned story ----------
   <section class="pinned" data-pinned style="--pinned-length:300vh"><div class="pinned__sticky"> ... [data-stage="0..n"] ... </div></section>
   Stages are stacked in .stage-stack; the active one is visible. Static (stacked, all visible) without JS,
   with reduced motion, and below 768px when the section has .pinned--static-sm. */
.pinned{position:relative;height:var(--pinned-length,300vh)}
.pinned__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.stage-stack{display:grid}
.stage-stack > [data-stage]{grid-area:1 / 1}
.js .pinned [data-stage]{transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.js .pinned:not(.is-static) .stage-stack > [data-stage]:not(.is-active){opacity:0;transform:translate3d(0,12px,0);pointer-events:none}
.js .pinned:not(.is-static) .stage-stack > [data-stage].is-past:not(.is-active){transform:translate3d(0,-12px,0)}
html:not(.js) .pinned,.pinned.is-static{height:auto}
html:not(.js) .pinned__sticky,.pinned.is-static .pinned__sticky{position:relative;height:auto;overflow:visible;padding-block:var(--section-y)}
html:not(.js) .stage-stack,.pinned.is-static .stage-stack{display:flex;flex-direction:column;gap:var(--sp-32)}
@media (max-width:767px){
  .pinned--static-sm{height:auto}
  .pinned--static-sm .pinned__sticky{position:relative;height:auto;overflow:visible;padding-block:var(--section-y)}
  .pinned--static-sm .stage-stack{display:flex;flex-direction:column;gap:var(--sp-32)}
}

/* Progress helpers: anything under [data-progress] can read --p (0..1). */
[data-progress]{--p:1}
.js [data-progress]{--p:0}
.fade-out-on-progress{opacity:calc(1 - var(--p) * 1.4);transform:translate3d(0,calc(var(--p) * -48px),0)}

/* ---------- Page transitions ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .site-main{animation:page-in var(--d-base) var(--ease-out) backwards}
  html.is-leaving .site-main{opacity:0;transform:translate3d(0,6px,0);transition:opacity var(--d-fast) var(--ease-in),transform var(--d-fast) var(--ease-in)}
}
@keyframes page-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}

/* Pause decorative loops while their section is off-screen (site.js toggles .is-offscreen). */
.is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused !important}

/* ---------- Reduced motion: static, final, readable ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;transition-delay:0ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
  .emergency-marker::before,.emergency-marker::after,.badge--live::before{animation:none !important;opacity:0}
  .emergency-marker::before{opacity:.45;transform:scale(1.8)}
  [data-depth]{translate:none !important}
  .js [data-progress]{--p:1}
  .pinned{height:auto}
  .pinned__sticky{position:relative;height:auto;overflow:visible;padding-block:var(--section-y)}
  .stage-stack{display:flex !important;flex-direction:column;gap:var(--sp-32)}
  .js .pinned .stage-stack > [data-stage]{opacity:1 !important;transform:none !important;pointer-events:auto !important}
  .fade-out-on-progress{opacity:1;transform:none}
  .btn:hover{transform:none}
}

/* ---------- Forced colours ---------- */
@media (forced-colors:active){
  .btn,.badge,.card,.field__input,.rider,.stop-marker,.distance-label{border:1px solid CanvasText}
  .route-line{stroke:Highlight}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.mobile-menu,.skip-link,.site-footer,.nav-toggle{display:none !important}
  .site-main{padding-top:0}
  body{background:#fff;color:#000}
  .prose,.t-muted,.t-lead{color:#222}
  [data-reveal],.js [data-reveal]{opacity:1 !important;transform:none !important}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}