/* ==================================================================
     BRAND DESIGN TOKENS — the single source of truth for the whole site.
     To rebrand, edit values in THIS block ONLY; every rule below consumes
     these semantic tokens, so there is no raw color past this point.
     Token names describe the ROLE a color plays (primary, danger, surface…),
     never the hue, so a rebrand stays internally consistent.

     OUT OF SCOPE (these stay as runtime CONTENT data, not brand tokens):
       • zone tint fills  • the video-greeter background gradient
     Those are injected per-item from WP content in render.js / runtime.js
     (look for the "content-injected" notes there) and are intentionally
     NOT centralized here.
     ================================================================== */
  :root{
    /* --- Brand primitives --- */
    --brand-primary:#1B3A5C;           /* navy — headings, logo "Lu", primary UI accents */
    --brand-primary-deep:#122A44;      /* deep navy — prototype banner, toast pill */
    --brand-primary-pale:#AFD3EC;      /* pale sky — legible text on the deep-navy banner */
    --brand-secondary:#1BA3E1;         /* sky blue — links, primary button, focus ring */
    --brand-secondary-tint:#E9F4FB;    /* pale sky — chip / callout / peer-quote fills */
    --brand-secondary-border:#C7E4F5;  /* sky edge — chips & secondary-button borders */
    --brand-accent:#F7941D;            /* sun orange — CTAs, highlights, "you are here" */
    --brand-accent-tint:#FDEFD9;       /* pale sun — warm banners & myth callouts */
    --brand-accent-border:#F3D6A6;     /* sun edge — warm banner / card borders */
    --brand-accent-text:#8A5306;       /* deep amber — readable text on sun tints */

    /* --- Neutral scale --- */
    --surface-page:#F6F9FC;            /* app page background */
    --surface-card:#fff;               /* cards, sheets, pills, panels — raised surfaces */
    --border:#DCE7F0;                  /* hairline borders & dividers */
    --text-primary:#22354A;            /* body copy / ink */
    --text-secondary:#5B6E80;          /* muted secondary copy & captions */
    --on-color:#fff;                   /* white text & marks sitting on colored fills */

    /* --- Status / feedback --- */
    --status-danger:#CF3B3B;           /* flare / alert action */
    --status-danger-dark:#A82E2E;      /* alert hover / pressed */
    --status-danger-border:#F3C2C2;    /* alert (ER) triage card border */
    --status-danger-tint:#FCEEEE;      /* alert (ER) triage card fill */
    --status-success:#2E9E63;          /* completed / "done" */
    --status-success-tint:#E4F5EC;     /* done-banner fill */
    --status-success-border:#BBE3CC;   /* done-banner border */
    --status-warning:#E8872E;          /* the road / in-progress accent */
    --status-warning-shade:#C96F1D;    /* darker road casing under the road line */
    --status-info:var(--brand-secondary); /* informational — "ahead" stops (shares sky blue) */

    /* --- Typography --- */
    --typeface-display:'Baloo 2','Quicksand',ui-rounded,'SF Pro Rounded',system-ui,sans-serif; /* headings, logo, map labels */
    --typeface-body:'Nunito','Segoe UI',system-ui,sans-serif;                                  /* body copy */

    /* --- Elevation & effects --- */
    --elev-card:0 6px 24px rgba(18,42,68,.10);      /* raised card shadow */
    --elev-sm:0 2px 10px rgba(18,42,68,.08);        /* subtle lift */
    --glow-danger:0 3px 10px rgba(207,59,59,.35);   /* flare-button glow (danger) */
    --glow-accent:0 3px 10px rgba(247,148,29,.3);   /* accent-button glow (sun) */
    --glow-secondary:0 3px 10px rgba(27,163,225,.3);/* primary-button glow (sky) */
    --scrim:rgba(18,42,68,.55);                     /* full-screen overlay backdrop */
    --scrim-chip:rgba(18,42,68,.75);                /* duration chip over media */
    --glass-strong:rgba(255,255,255,.94);           /* frosted play button */
    --glass:rgba(255,255,255,.9);                   /* frosted phase chip */
    --glass-soft:rgba(255,255,255,.75);             /* host-face ring */
    --glass-faint:rgba(255,255,255,.16);            /* video vignette highlight */
    --shadow-drop:0 6px 18px rgba(0,0,0,.22);       /* host-face drop shadow */
    --shadow-float:0 4px 14px rgba(0,0,0,.22);      /* play-button float shadow */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  }
  body{font-family:var(--typeface-body);color:var(--text-primary);background:var(--surface-page);line-height:1.55;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--brand-secondary);outline-offset:2px;border-radius:6px}
  h1,h2,h3,h4{font-family:var(--typeface-display);line-height:1.15;color:var(--brand-primary)}

  .proto-banner{background:var(--brand-primary-deep);color:var(--brand-primary-pale);font-size:12px;letter-spacing:.04em;text-align:center;padding:6px 12px;font-weight:800;text-transform:uppercase}
  .proto-banner b{color:var(--on-color)}

  /* ---------- Header ---------- */
  header.app{
    position:sticky;top:0;z-index:60;background:var(--surface-card);border-bottom:1px solid var(--border);
    padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:10px;margin-right:auto}
  .logo-word{font-family:var(--typeface-display);font-weight:800;font-size:21px;letter-spacing:.5px}
  .logo-word .lu{color:var(--brand-primary)} .logo-word .la{color:var(--brand-accent)}
  .brand-sub{font-size:11px;color:var(--text-secondary);font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-left:2px solid var(--border);padding-left:10px;line-height:1.3;max-width:220px}
  .hdr-btn{border-radius:999px;padding:9px 15px;font-weight:800;font-size:13.5px;transition:transform .12s}
  .hdr-btn:hover{transform:translateY(-1px)}
  .btn-flare{background:var(--status-danger);color:var(--on-color);box-shadow:var(--glow-danger)}
  .btn-flare:hover{background:var(--status-danger-dark)}
  .btn-talk{background:var(--brand-accent);color:var(--on-color);box-shadow:var(--glow-accent)}

  /* ---------- Hero strip ---------- */
  .hero-strip{max-width:1240px;margin:0 auto;padding:26px 20px 4px;text-align:center}
  .hero-strip h1{font-size:clamp(23px,3.6vw,32px);font-weight:800}
  .hero-strip h1 span{color:var(--brand-accent)}
  .hero-strip p{color:var(--text-secondary);font-weight:700;font-size:14.5px;max-width:64ch;margin:6px auto 0}

  /* ---------- Horizontal Map ---------- */
  .map-shell{max-width:1240px;margin:14px auto 0;padding:0 12px}
  .map-frame{
    background:var(--surface-card);border-radius:24px;box-shadow:var(--elev-card);
    padding:14px 6px 8px;overflow:hidden;border:1px solid var(--border);
  }
  .map-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  svg.hroad{display:block;min-width:1240px;width:100%;height:auto}
  .zone-rect{rx:26}
  .zone-title{font-family:var(--typeface-display);font-weight:800;font-size:19px;fill:var(--brand-primary);text-anchor:middle}
  .zone-title .zword{fill:var(--brand-accent)}
  .zone-time{font-family:var(--typeface-body);font-weight:800;font-size:13px;fill:var(--text-secondary);text-anchor:middle}
  .roadline{fill:none;stroke:var(--status-warning);stroke-width:13;stroke-linecap:round}
  .roadline-casing{fill:none;stroke:var(--status-warning-shade);stroke-width:17;stroke-linecap:round;opacity:.35}
  .road-mid{fill:none;stroke:var(--on-color);stroke-width:2.5;stroke-dasharray:10 12;stroke-linecap:round;opacity:.95}
  .hstop{cursor:pointer}
  .hstop .icon-ring{fill:var(--on-color);stroke-width:5;transition:stroke-width .15s}
  .hstop:hover .icon-ring{stroke-width:8}
  .hstop .icon-glyph{font-size:26px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
  .hstop .badge{font-family:var(--typeface-display);font-weight:800;font-size:12px;fill:var(--on-color);text-anchor:middle;dominant-baseline:central}
  .stop-kicker{font-family:var(--typeface-display);font-weight:800;font-size:13px;fill:var(--status-warning);text-anchor:middle;letter-spacing:.04em}
  .stop-name{font-family:var(--typeface-display);font-weight:800;font-size:16px;fill:var(--brand-primary);text-anchor:middle}
  .stop-sub{font-family:var(--typeface-body);font-weight:700;font-size:11.5px;fill:var(--text-secondary);text-anchor:middle}
  .here-tag{font-family:var(--typeface-body);font-weight:800;font-size:11.5px;fill:var(--brand-accent);text-anchor:middle}
  .hstop.sel .icon-ring{stroke-width:8}
  .you-here{animation:bob 1.7s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .map-hint{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:8px 8px 6px;font-size:12.5px;font-weight:800;color:var(--text-secondary)}
  .map-hint span{display:flex;align-items:center;gap:6px}
  .lg-dot{width:11px;height:11px;border-radius:50%;display:inline-block}

  /* ---------- Dashboard ---------- */
  .dash-shell{max-width:1240px;margin:18px auto 0;padding:0 12px 90px}
  .dash{
    background:var(--surface-card);border-radius:24px;box-shadow:var(--elev-card);border:1px solid var(--border);
    padding:24px;display:none;animation:fadein .35s ease;
  }
  .dash.show{display:block}
  @keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
  .dash-kicker{font-weight:800;font-size:12.5px;color:var(--status-warning);text-transform:uppercase;letter-spacing:.08em}
  .dash h2{font-size:clamp(22px,3.4vw,29px);font-weight:800;margin:2px 0 4px}
  .dash-desc{color:var(--text-secondary);font-weight:700;font-size:14.5px;max-width:62ch}
  .dash-nav{display:flex;gap:8px;flex:none}
  .nav-chip{background:var(--brand-secondary-tint);color:var(--brand-primary);border:2px solid var(--brand-secondary-border);border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px}
  .nav-chip:hover{border-color:var(--brand-secondary)}
  .nav-chip:disabled{opacity:.4;cursor:default}

  .dash-grid{display:grid;gap:20px;margin-top:16px}
  @media(min-width:900px){.dash-grid{grid-template-columns:360px 1fr;align-items:start}}

  /* Video greeter */
  .video-col{display:grid;gap:14px}
  .video-card{border-radius:18px;overflow:hidden;box-shadow:var(--elev-sm);border:1px solid var(--border);background:var(--surface-card)}
  .video-stage{
    position:relative;aspect-ratio:16/10;display:grid;place-items:center;color:var(--on-color);
  }
  .video-stage .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%, var(--glass-faint), transparent 55%)}
  .host-face{
    width:92px;height:92px;border-radius:50%;background:var(--surface-card);display:grid;place-items:center;
    font-family:var(--typeface-display);font-weight:800;font-size:30px;color:var(--brand-primary);
    border:4px solid var(--glass-soft);box-shadow:var(--shadow-drop);
    position:relative;z-index:1;
  }
  .play-btn{
    position:absolute;z-index:2;bottom:14px;left:14px;display:flex;align-items:center;gap:9px;
    background:var(--glass-strong);border-radius:999px;padding:8px 16px 8px 8px;
    font-weight:800;font-size:13.5px;color:var(--brand-primary);box-shadow:var(--shadow-float);
    transition:transform .12s;
  }
  .play-btn:hover{transform:scale(1.04)}
  .play-tri{width:30px;height:30px;border-radius:50%;background:var(--brand-accent);display:grid;place-items:center;color:var(--on-color);font-size:13px}
  .dur-chip{position:absolute;top:12px;right:12px;background:var(--scrim-chip);color:var(--on-color);font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px}
  .ph-chip{position:absolute;top:12px;left:12px;background:var(--glass);color:var(--text-secondary);font-weight:800;font-size:10.5px;padding:4px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
  .video-meta{padding:14px 16px}
  .video-meta h4{font-size:16px;font-weight:800;margin-bottom:2px}
  .video-meta p{font-size:13.5px;color:var(--text-secondary);font-weight:700}
  .video-meta .vm-links{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
  .text-link{color:var(--brand-secondary);font-weight:800;font-size:13px;text-decoration:underline;text-underline-offset:3px;background:none}
  .whats-here{background:var(--surface-page);border:1px solid var(--border);border-radius:16px;padding:16px 18px}
  .whats-here h4{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:9px}
  .whats-here ul{list-style:none;display:grid;gap:7px}
  .whats-here li{font-weight:700;font-size:14px;display:flex;gap:9px;align-items:flex-start}
  .whats-here li::before{content:"●";color:var(--brand-accent);font-size:11px;margin-top:4px}

  /* Checklist column */
  .next-banner{
    background:var(--brand-accent-tint);border:2px solid var(--brand-accent-border);border-radius:15px;
    padding:12px 15px;font-weight:800;color:var(--brand-accent-text);font-size:14px;margin-bottom:12px;
    display:flex;align-items:center;gap:10px;
  }
  .next-banner.done{background:var(--status-success-tint);border-color:var(--status-success-border);color:var(--status-success)}
  .next-banner .arrow{width:26px;height:26px;border-radius:50%;background:var(--brand-accent);color:var(--on-color);display:grid;place-items:center;flex:none;font-size:14px}
  .next-banner.done .arrow{background:var(--status-success)}
  .steps{display:grid;gap:10px}
  .step{background:var(--surface-card);border-radius:15px;box-shadow:var(--elev-sm);border:2px solid var(--border);overflow:hidden}
  .step.current{border-color:var(--brand-accent)}
  .step.done .step-row{opacity:.6}
  .step-row{width:100%;display:flex;align-items:center;gap:13px;padding:14px 16px;text-align:left}
  .step-check{
    width:29px;height:29px;border-radius:50%;flex:none;border:2.5px solid var(--border);
    display:grid;place-items:center;font-weight:800;color:var(--text-secondary);font-size:13.5px;background:var(--surface-card);
  }
  .step.done .step-check{background:var(--status-success);border-color:var(--status-success);color:var(--on-color)}
  .step.current .step-check{border-color:var(--brand-accent);color:var(--brand-accent)}
  .step-row h3{font-size:15.5px;font-weight:800}
  .step-row small{display:block;color:var(--text-secondary);font-weight:700;font-size:12.5px}
  .step-body{padding:0 17px 17px 58px;display:none}
  .step.open .step-body{display:block}
  .step-body p{font-weight:600;font-size:14px}
  .step-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
  .btn{border-radius:999px;padding:9px 17px;font-weight:800;font-size:13.5px;transition:transform .12s}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--brand-secondary);color:var(--on-color);box-shadow:var(--glow-secondary)}
  .btn-secondary{background:var(--brand-secondary-tint);color:var(--brand-primary);border:2px solid var(--brand-secondary-border)}
  .btn-warm{background:var(--brand-accent);color:var(--on-color)}

  /* Decoder */
  .decoder{background:var(--surface-page);border:2px solid var(--border);border-radius:15px;padding:15px;margin-top:11px}
  .decoder-label{font-weight:800;font-size:12.5px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
  .test-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
  .test-pill{background:var(--surface-card);border:2px solid var(--border);border-radius:999px;padding:7px 14px;font-weight:800;font-size:13px;color:var(--text-primary)}
  .test-pill:hover{border-color:var(--brand-secondary)}
  .test-pill.sel{background:var(--brand-secondary);border-color:var(--brand-secondary);color:var(--on-color)}
  .decoder-card{background:var(--surface-card);border-radius:13px;padding:16px;box-shadow:var(--elev-sm)}
  .decoder-card h4{font-size:16px;margin-bottom:5px}
  .decoder-card p{font-size:14px;font-weight:600;margin-bottom:7px}
  .myth{margin-top:11px;border-radius:11px;overflow:hidden;border:2px solid var(--brand-accent-border);font-size:13px;font-weight:700}
  .myth .m{background:var(--brand-accent-tint);padding:8px 12px;color:var(--brand-accent-text)}
  .myth .r{background:var(--surface-card);padding:8px 12px;color:var(--text-primary)}
  .empty-note{color:var(--text-secondary);font-weight:700;font-size:13.5px;font-style:italic}
  .q-list{display:grid;gap:7px;margin-top:9px}
  .q-item{background:var(--surface-card);border:2px solid var(--border);border-radius:11px;padding:10px 13px;font-weight:700;font-size:13.5px;display:flex;gap:9px}
  .q-item::before{content:"?";font-family:var(--typeface-display);font-weight:800;color:var(--brand-accent);flex:none}

  .peer-voice{
    background:var(--brand-secondary-tint);border-left:5px solid var(--brand-secondary);border-radius:12px;
    padding:14px 16px;margin-top:16px;font-size:14px;font-weight:600;
  }
  .peer-voice cite{display:block;margin-top:5px;font-style:normal;font-weight:800;font-size:12.5px;color:var(--text-secondary)}

  /* Default dashboard (welcome) */
  .dash-welcome{text-align:center;padding:8px 0 4px}
  .dash-welcome .eyebrow{display:inline-block;background:var(--brand-accent-tint);color:var(--brand-accent-text);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:12px}
  .dash-welcome h2{font-size:clamp(21px,3.2vw,27px)}
  .dash-welcome p{color:var(--text-secondary);font-weight:700;font-size:14.5px;max-width:58ch;margin:6px auto 16px}
  .welcome-video{max-width:520px;margin:0 auto}

  /* ---------- Overlays ---------- */
  .overlay{position:fixed;inset:0;background:var(--scrim);z-index:100;display:none;align-items:flex-end;justify-content:center}
  @media(min-width:640px){.overlay{align-items:center;padding:24px}}
  .overlay.show{display:flex}
  .sheet{background:var(--surface-card);width:100%;max-width:620px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:26px 22px 34px;animation:sheetup .3s ease}
  @media(min-width:640px){.sheet{border-radius:24px}}
  @keyframes sheetup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
  .sheet-close{float:right;font-size:22px;font-weight:800;color:var(--text-secondary);padding:4px 10px}
  .flare-head h2{font-size:23px;color:var(--status-danger);margin-bottom:4px}
  .flare-head p{color:var(--text-secondary);font-weight:700;font-size:14.5px;margin-bottom:16px}
  .triage{display:grid;gap:11px}
  .tri-card{border-radius:15px;padding:16px 17px;border:2.5px solid}
  .tri-card h3{font-size:16.5px;display:flex;gap:9px;margin-bottom:7px}
  .tri-card ul{padding-left:18px;font-size:13.5px;font-weight:600}
  .tri-card li{margin-bottom:4px}
  .tri-home{border-color:var(--brand-secondary-border);background:var(--brand-secondary-tint)} .tri-home h3{color:var(--brand-primary)}
  .tri-call{border-color:var(--brand-accent-border);background:var(--brand-accent-tint)} .tri-call h3{color:var(--brand-accent-text)}
  .tri-er{border-color:var(--status-danger-border);background:var(--status-danger-tint)} .tri-er h3{color:var(--status-danger)}
  .sheet .fine{margin-top:15px;font-size:12.5px;color:var(--text-secondary);font-weight:600}
  .talk-opts{display:grid;gap:10px;margin-top:8px}
  .talk-opt{display:flex;gap:13px;align-items:center;background:var(--surface-page);border:2px solid var(--border);border-radius:14px;padding:14px 15px;text-align:left;font-weight:700}
  .talk-opt:hover{border-color:var(--brand-accent)}
  .talk-opt .ic{width:38px;height:38px;border-radius:50%;background:var(--brand-accent-tint);display:grid;place-items:center;flex:none;font-size:17px}
  .talk-opt small{display:block;color:var(--text-secondary);font-weight:600;font-size:12.5px}

  .toast{
    position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
    background:var(--brand-primary-deep);color:var(--on-color);font-weight:800;font-size:14px;
    padding:12px 20px;border-radius:999px;box-shadow:var(--elev-card);
    opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  footer.note{max-width:1240px;margin:0 auto;padding:0 18px 40px;color:var(--text-secondary);font-size:12.5px;font-weight:600;text-align:center}

  /* ---------- Map choreography + active stop (LUPUS-008) ----------
     Additive block: new selectors / --rm-* vars only, so token refactors of
     the rules above stay conflict-free. Timeline (ms from load), each step
     starts only after the previous one is under way:
       a  zone backgrounds ........ 0     (all together)
       b  zone images ............. 300 + 150·i (staggered, one at a time)
       c  road draw-on ............ 1050  (stroke-dashoffset)
       d  stops pop onto road ..... 1700 + 60·i
       e  titles + descriptions ... 2250  (zone + stop labels)
     Ends ≈2.7s. Scoped to svg.hroad.is-intro, which runtime.js adds once on
     first paint (never under reduced motion) and removes when the sequence ends. */
  svg.hroad{
    --rm-ease:cubic-bezier(.22,.61,.36,1);
    --rm-pop:cubic-bezier(.34,1.3,.64,1);
    --rm-active-ring:var(--brand-primary);
    --rm-active-fill:rgba(27,163,225,.16);
  }
  .zone-art{pointer-events:none;opacity:.92}
  .hstop .active-halo{fill:var(--rm-active-fill);stroke:var(--rm-active-ring);stroke-width:3;opacity:0;pointer-events:none;transition:opacity .2s}
  .hstop.sel .active-halo,
  .hstop:focus-visible .active-halo{opacity:1}
  .hstop.sel .stop-name{fill:var(--brand-primary-deep)}
  svg.hroad .hstop:focus{outline:none}
  svg.hroad .hstop:focus-visible{outline:none}

  .hroad.is-intro .zone-rect,
  .hroad.is-intro .zone-art,
  .hroad.is-intro .hstop,
  .hroad.is-intro .zone-title,
  .hroad.is-intro .zone-time,
  .hroad.is-intro .stop-kicker,
  .hroad.is-intro .stop-name,
  .hroad.is-intro .stop-sub,
  .hroad.is-intro .here-tag{transform-box:fill-box;transform-origin:center}
  /* stops scale about their pin centre (runtime sets transform-origin per stop) */
  .hroad.is-intro .hstop{transform-box:view-box}

  /* a — zone backgrounds */
  .hroad.is-intro .zone-rect{animation:rmZoneIn 450ms var(--rm-ease) 0ms both}
  /* b — zone images, one at a time */
  .hroad.is-intro .zone-art{transform-origin:center bottom;animation:rmArtIn 500ms var(--rm-ease) calc(300ms + var(--zi,0) * 150ms) both}
  /* c — road draw-on (pathLength=1 on casing+main, dash offset starts past the round cap so nothing peeks;
     the dashed centre line fades in once the draw is done) */
  .hroad.is-intro .roadline-casing,
  .hroad.is-intro .roadline{stroke-dasharray:1 1.1;animation:rmRoadDraw 800ms cubic-bezier(.45,0,.25,1) 1050ms both}
  .hroad.is-intro .road-mid{animation:rmFade 350ms ease 1800ms both}
  /* d — stops pop onto the road */
  .hroad.is-intro .hstop{animation:rmStopPop 380ms var(--rm-pop) calc(1700ms + var(--si,0) * 60ms) both}
  .hroad.is-intro .hstop.you-here{animation:rmStopPop 380ms var(--rm-pop) calc(1700ms + var(--si,0) * 60ms) both, bob 1.7s ease-in-out 2800ms infinite}
  /* e — titles + descriptions */
  .hroad.is-intro .zone-title,
  .hroad.is-intro .zone-time,
  .hroad.is-intro .stop-kicker,
  .hroad.is-intro .stop-name,
  .hroad.is-intro .stop-sub,
  .hroad.is-intro .here-tag{animation:rmLabelIn 450ms var(--rm-ease) 2250ms both}

  @keyframes rmZoneIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
  @keyframes rmArtIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:.92;transform:none}}
  @keyframes rmRoadDraw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
  @keyframes rmFade{from{opacity:0}}
  @keyframes rmStopPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
  @keyframes rmLabelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

  /* Reduced motion: no choreography at all — everything is visible at once. */
  @media (prefers-reduced-motion: reduce){
    .hroad.is-intro *{animation:none!important}
    .hstop .active-halo{transition:none}
  }