/* =============================================================================
   MAYBACH INTERNATIONAL GROUP — Network experience
   Mobile-first. Everything below is written for a thumb on a phone; the desktop
   rules at the bottom only widen and calm what already works at 390px.

   Brand is taken from maybachgroupinc.com:
     accent  #E50223   primary #910D27   button base #610C23
     text    #FFFFFF   secondary #54595F   type: Poppins
     black page ground, navy panels, one red accent, hard square edges,
     two-tone split buttons with a solid red icon tile.
   ========================================================================== */

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}

:root {
  /* ground */
  --ink:        #05070B;          /* page black, as on maybachgroupinc.com */
  --navy:       #0B1727;          /* panel navy */
  --navy-2:     #12213A;
  --surface:    #0C1826;          /* bottom sheet */
  --line:       rgba(255, 255, 255, .10);
  --line-2:     rgba(255, 255, 255, .19);

  /* type */
  --text:       #FFFFFF;
  --text-2:     #A7B3C2;
  --text-3:     #6E7A8A;

  /* brand accent — official Maybach red, used as the single accent */
  --red:        #E50223;
  --red-lit:    #FF3049;
  --crimson:    #910D27;
  --crimson-dk: #610C23;
  --red-dim:    rgba(229, 2, 35, .16);

  /* map */
  --land:       #15243A;
  --land-line:  rgba(255, 255, 255, .17);

  /* motion */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* layout */
  --safe-t:     env(safe-area-inset-top, 0px);
  --safe-b:     env(safe-area-inset-bottom, 0px);
  --topbar-h:   calc(56px + var(--safe-t));
  --sheet-vis:  0px;             /* set by JS — visible height of bottom sheet */
  --sheet-max:  86dvh;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          system-ui, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                 /* the experience is a fixed canvas, not a page */
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* --- the official Maybach lockup ----------------------------------------
   assets/img/maybach-logo.png is the artwork published on maybachgroupinc.com,
   used verbatim: no retracing, no re-set type, no cropped descriptor. It is the
   only size Maybach publishes (201x50), so display width is capped to keep it
   sharp — a larger original or a vector would let the hero mark grow.
   ---------------------------------------------------------------------- */
.mark { display: block; width: 100%; height: auto; }
.mark-lockup { display: block; }


/* =============================================================================
   THE KNIGHT
   Maybach's own livery mark, sitting between the page ground and the hero copy.
   It is deliberately low-contrast: it should register as presence, not as a
   picture pasted behind the text. On "Explore our network" it recedes — drifting
   back, dimming and softening — while the map comes forward in the same move.
   ========================================================================== */

#knight {
  position: fixed;
  z-index: 2;                       /* above the map, below the hero copy */
  right: -21%;
  top: 45%;
  width: min(430px, 96vw);
  pointer-events: none;
  transform: translateY(-50%) scale(1);
  opacity: .12;
  filter: contrast(1.2);
  /* cropped by the screen edge on the right, dissolving into the ground on the
     left so it never competes with the wordmark or the headline */
  -webkit-mask-image: linear-gradient(97deg, transparent 2%, #000 40%, #000 100%);
  mask-image: linear-gradient(97deg, transparent 2%, #000 40%, #000 100%);
  transition:
    transform 1400ms var(--ease),
    opacity    760ms var(--ease),
    filter     900ms var(--ease);
  will-change: transform, opacity;
}
#knight img { display: block; width: 100%; height: auto; }

/* a slow breath so it never looks like a static cut-out */
.scene-hero #knight { animation: knightDrift 22s var(--ease-in-out) infinite alternate; }
@keyframes knightDrift {
  from { transform: translateY(-51%) scale(1);    }
  to   { transform: translateY(-48%) scale(1.04); }
}

/* the recede: back, down, dim, soft — the map takes the stage */
.scene-map #knight {
  transform: translateY(-42%) scale(.8);
  opacity: .035;
  filter: blur(3px) contrast(1);
  animation: none;
}

/* =============================================================================
   STAGE — the shared map element, present in both scenes
   ========================================================================== */

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(125% 85% at 50% 10%, #0B1727 0%, var(--ink) 66%),
    var(--ink);
}

#stage-inner {
  position: absolute;
  inset: 0;
  transform-origin: 50% 42%;
  will-change: transform, opacity, filter;
  transition:
    transform 1500ms var(--ease),
    opacity    900ms var(--ease),
    filter    1100ms var(--ease);
}

#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#stage-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 38%, transparent 46%, rgba(3, 5, 9, .82) 100%),
    linear-gradient(to bottom, rgba(4, 6, 10, .58) 0%, transparent 16%, transparent 42%, rgba(4, 6, 10, .84) 78%, rgba(4, 6, 10, .96) 100%);
  transition: opacity 900ms var(--ease);
}

/* --- hero pose: oversized, dimmed, slowly drifting ------------------------ */
.scene-hero #stage-inner {
  transform: scale(1.42) translateY(-6%);
  opacity: .54;
  filter: saturate(.6);
  animation: drift 46s var(--ease-in-out) infinite alternate;
}
.scene-hero #map { pointer-events: none; }
.scene-hero #stage-vignette { opacity: 1; }

@keyframes drift {
  from { transform: scale(1.42) translate(-1.4%, -6%); }
  to   { transform: scale(1.50) translate( 1.4%, -7.5%); }
}

/* --- map pose ------------------------------------------------------------- */
.scene-map #stage-inner { transform: none; opacity: 1; filter: none; animation: none; }
.scene-map #stage-vignette { opacity: .55; }

/* =============================================================================
   MAP RENDERING
   ========================================================================== */

.state {
  fill: url(#gLand);
  stroke: var(--land-line);
  stroke-width: .85;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: fill 520ms var(--ease), stroke 520ms var(--ease), opacity 520ms var(--ease);
}

/* a state Maybach names in a region reads slightly lighter, even at rest */
.state.is-served { fill: #17273E; }

/* region selection — the region is an area, so everything else recedes */
.map-filtered .state          { opacity: .32; }
.map-filtered .state.is-hot   { opacity: 1; fill: url(#gLandLit); stroke: rgba(229, 2, 35, .55); stroke-width: 1.1; }

/* market selection — nothing recedes; just mark where the market sits */
.map-focus .state.is-hot      { fill: url(#gLandLit); stroke: rgba(229, 2, 35, .5); stroke-width: 1.1; }

/* --- operating footprint -------------------------------------------------
   Where the network is concentrated, washed in behind the anchor triangle.
   No fill edge and no outline: the shape is carried by a gradient that fades
   outward, so it reads as "meaningful reach through here" rather than as a
   territory boundary. State borders stay visible straight through it — the
   hairline is warmed rather than covered.
   ---------------------------------------------------------------------- */
#layer-footprint {
  pointer-events: none;
  opacity: 0;
  transition: opacity 1100ms var(--ease);
}
.fp {
  fill: url(#gFootprint);
  stroke: rgba(229, 2, 35, .11);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* level 2: present, breathing, but always behind the triangle */
#layer-footprint.fp-in { opacity: 1; animation: fpBreath 11s var(--ease-in-out) infinite alternate; }
@keyframes fpBreath { from { opacity: .84; } to { opacity: 1; } }

/* an anchor, a region or Florida is chosen: hold the geographic context, give
   the detail the stage */
#layer-footprint.fp-in.fp-dim { opacity: .34; animation: none; }

/* --- statewide coverage (Florida) ---------------------------------------
   Maybach serves the whole state, so the whole state carries the accent —
   the same move maybachgroupinc.com makes with Illinois on its own map.
   ---------------------------------------------------------------------- */
#layer-coverage { pointer-events: none; }

/* Off at rest. Florida is not red when the visitor first enters the network —
   it appears when Florida is what they are actually looking at. The treatment
   is a translucent wash plus a lit perimeter and a slow travelling highlight,
   rather than a solid fill that shouts over the rest of the map. */
.cov {
  fill: url(#gCoverage);
  stroke: none;
  transition: opacity 620ms var(--ease);
  opacity: 0;
}
.cov-edge {
  fill: none;
  stroke: rgba(229, 2, 35, .9);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 620ms var(--ease);
}
.cov-glow {
  fill: none;
  stroke: rgba(229, 2, 35, .5);
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  filter: blur(3px);
  opacity: 0;
  transition: opacity 620ms var(--ease);
}
/* a highlight that walks the state border — reads as "all of this, continuously" */
.cov-trace {
  fill: none;
  stroke: #FF6B7D;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 26 620;
  opacity: 0;
  transition: opacity 620ms var(--ease);
}

.cov-on .cov       { opacity: .3; }
.cov-on .cov-edge  { opacity: 1; }
.cov-on .cov-glow  { opacity: .85; animation: covPulse 3.6s var(--ease-in-out) infinite; }
.cov-on .cov-trace { opacity: .95; animation: covTrace 5.2s linear infinite; }
@keyframes covPulse { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes covTrace { to { stroke-dashoffset: -646; } }

.cov-tag {
  font-family: var(--font);
  font-size: 9px; font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  fill: #FFD9DE;
  paint-order: stroke;
  stroke: rgba(4, 6, 10, .9);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.cov-tag.is-shown { opacity: 1; }


/* --- the core triangle ---------------------------------------------------
   Chicago, Dallas, Atlanta. Straight lines, not the bowed corridor arcs — it
   should read as one geometric mark, a motif that can live outside this page.
   It draws once on entry and then stays as a faint underlay so the visitor
   never loses the three-anchor structure while exploring a single anchor.
   ---------------------------------------------------------------------- */
#layer-triangle { pointer-events: none; }

.tri {
  fill: none;
  stroke: rgba(255, 255, 255, .5);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0;
}
.tri-glow {
  fill: none;
  stroke: rgba(229, 2, 35, .42);
  stroke-width: 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: blur(3px);
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0;
}
/* JS adds .is-drawn per edge, staggered, so the triangle closes edge by edge */
.tri.is-drawn, .tri-glow.is-drawn {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 460ms var(--ease), opacity 200ms linear;
}

/* once an anchor is chosen the triangle drops back to a watermark */
.tri-muted .tri      { stroke: rgba(255, 255, 255, .16); }
.tri-muted .tri-glow { opacity: 0; }
#layer-triangle { transition: opacity 500ms var(--ease); }

/* the anchors light up one at a time before the lines join them */
.mk.is-lit .mk-core { fill: var(--red-lit); r: 7px; }
.mk.is-lit .mk-halo { opacity: 1; }
.mk.is-lit .mk-ring { opacity: 1; stroke: var(--red-lit); }

/* level 2 holds everything except the three anchors back */
.map-triangle .mk[data-anchor="0"] { opacity: .16; transition-delay: 0ms; }
.map-triangle .mk[data-anchor="0"] .mk-label { opacity: 0; }

/* --- corridors ------------------------------------------------------------ */
#layer-corridors { pointer-events: none; }

.corridor-base {
  fill: none;
  stroke: rgba(229, 2, 35, .34);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 780ms var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
}

/* Two dash streams on the same arc, running opposite ways: freight moves in
   AND out of every market on this map, and the motion has to say so. */
.corridor-flow {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 30;
  opacity: 0;
  animation: flowIn 500ms linear forwards, flow 2.6s linear infinite;
  animation-delay: var(--delay, 0ms), calc(var(--delay, 0ms) + 500ms);
}
.corridor-flow.is-out { stroke: #FF5568; }
.corridor-flow.is-in  { stroke: #FFFFFF; stroke-dashoffset: 16px; animation-direction: normal, reverse; }

@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes flowIn { to { opacity: .92; } }
@keyframes flow   { to { stroke-dashoffset: -330; } }

/* --- market markers ------------------------------------------------------- */
.mk { cursor: pointer; }
.mk-hit { fill: transparent; }              /* oversized touch target */

/* Only the dot and its hit circle take taps. The halo is 34px of invisible
   fill — left interactive it would swallow taps meant for its neighbours. */
.mk-halo, .mk-ring, .mk-label { pointer-events: none; }

.mk-ring {
  fill: none;
  stroke: rgba(229, 2, 35, .6);
  stroke-width: 1.3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 380ms var(--ease);
}
.mk-core {
  fill: var(--red);
  stroke: rgba(4, 6, 10, .9);
  stroke-width: 1.4;
  transition: r 320ms var(--ease), fill 320ms var(--ease);
}
.mk-halo { fill: url(#gPulse); opacity: 0; transition: opacity 420ms var(--ease); }

.mk-label {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .035em;
  fill: #EAF0F7;
  paint-order: stroke;
  stroke: rgba(4, 6, 10, .88);
  stroke-width: 3.4px;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms var(--ease);
}

/* Label visibility is decided in JS (see layoutLabels): it knows what is
   selected AND whether two names would collide at the current zoom. */
.mk-label.is-shown { opacity: 1; }

/* tier defaults */
.mk[data-tier="hub"]    .mk-ring { opacity: .9; }
.mk[data-tier="market"] .mk-core { fill: #C2CCD9; r: 3.4px; }

/* the home market carries a square mark rather than a dot */
.mk-hq { fill: none; stroke: #fff; stroke-width: 1.4; opacity: 0; transition: opacity 380ms var(--ease); }
.mk[data-hq="1"] .mk-hq   { opacity: .9; }
.mk[data-hq="1"] .mk-core { fill: #fff; }

/* markers settle in after the hero transition, staggered out from the hubs */
.mk { opacity: 0; transition: opacity 520ms var(--ease); transition-delay: var(--in, 0ms); }
.scene-hero .mk { opacity: .85; transition-delay: 0ms; }
.scene-map  .mk { opacity: 1; }

.map-filtered .mk[data-hot="0"],
.map-focus    .mk[data-hot="0"] { opacity: .2; transition-delay: 0ms; }

/* selected market */
.mk.is-active .mk-core  { fill: var(--red-lit); r: 7px; }
.mk.is-active .mk-halo  { opacity: 1; }
.mk.is-active .mk-ring  { opacity: 1; stroke: var(--red-lit); animation: pulse 2.6s var(--ease-in-out) infinite; }
.mk.is-active .mk-label { font-weight: 700; fill: #FFEDEF; }
.mk.is-linked .mk-core  { fill: var(--red); r: 4.6px; }

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: .35; }
}

/* =============================================================================
   HERO
   ========================================================================== */

#hero {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: 0 26px calc(44px + var(--safe-b));
  transition: opacity 620ms var(--ease), transform 900ms var(--ease), filter 620ms var(--ease);
}

.scene-map #hero {
  opacity: 0;
  transform: translateY(-30px);
  filter: blur(6px);
  pointer-events: none;
}

.hero-inner { position: relative; width: 100%; min-width: 0; max-width: 560px; }

/* --- moving light streaks: freight in motion, kept almost subliminal ------ */
.hero-streaks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-streaks i {
  position: absolute;
  top: var(--y);
  left: -35%;
  width: 32%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 2, 35, .75), transparent);
  opacity: .5;
  animation: streak var(--s) linear infinite;
  animation-delay: var(--d);
}
@keyframes streak {
  0%   { transform: translateX(0);    opacity: 0; }
  12%  { opacity: .6; }
  85%  { opacity: .5; }
  100% { transform: translateX(420%); opacity: 0; }
}
.scene-map .hero-streaks { display: none; }

/* --- hero type ------------------------------------------------------------ */
.hero-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 20px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(229, 2, 35, .65);
  animation: beacon 2.8s var(--ease-in-out) infinite;
}
@keyframes beacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 2, 35, .55); }
  60%      { box-shadow: 0 0 0 8px rgba(229, 2, 35, 0); }
}

.hero-mark { width: min(212px, 58%); margin-bottom: 26px; }

.hero-line {
  display: block;
  padding-top: 20px;
  border-top: 2px solid var(--red);
  max-width: 20ch;
}
.hero-line-1 {
  display: block;
  font-size: clamp(2.5rem, 12.4vw, 4.2rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}
.hero-line-2 {
  display: block;
  margin-top: 10px;
  font-size: clamp(.83rem, 3.5vw, 1.05rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.hero-scale { display: flex; align-items: baseline; gap: 4px; margin-top: 24px; }
.hero-count {
  font-size: clamp(2rem, 8.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.hero-plus {
  font-size: clamp(1.4rem, 5.6vw, 1.9rem);
  font-weight: 600;
  color: var(--red);
  margin-right: 8px;
}
.hero-count-label {
  display: block;
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-2);
  transform: translateY(-3px);
}

/* four service names have to survive one line at 390px, so the tracking is
   tighter here than elsewhere in the hero */
.hero-services {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px 9px;
  margin-top: 10px;
  font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
}
.hero-services li { display: flex; align-items: center; gap: 9px; }
.hero-services li + li::before {
  content: ""; width: 3px; height: 3px;
  background: var(--red); opacity: .9;
}

/* --- the Maybach button: square, two-tone, solid red icon tile ------------ */
.btn-explore {
  margin-top: 34px;
  width: 100%;
  min-height: 62px;
  display: flex; align-items: stretch;
  background: var(--crimson-dk);
  border: 0;
  padding: 0;
  overflow: hidden;
  transition: background 220ms var(--ease), transform 200ms var(--ease);
}
.btn-explore .tile {
  flex: none;
  width: 62px;
  display: grid; place-items: center;
  background: var(--red);
  color: #fff;
  transition: background 220ms var(--ease);
}
.btn-explore .tile svg { width: 25px; height: 25px; }
.btn-explore .lbl {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 0 20px;
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.btn-explore .lbl svg { width: 20px; height: 20px; flex: none; }
.btn-explore:active { transform: scale(.985); background: var(--crimson); }

/* staged entrance */
.hero-eyebrow, .hero-mark, .hero-line, .hero-scale, .hero-services, .btn-explore {
  animation: riseIn 1s var(--ease) both;
}
.hero-mark      { animation-delay: .10s; }
.hero-line      { animation-delay: .28s; }
.hero-scale     { animation-delay: .44s; }
.hero-services  { animation-delay: .54s; }
.btn-explore    { animation-delay: .66s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* =============================================================================
   MAP CHROME — top bar, chips, contextual CTA
   ========================================================================== */

#topbar, #chips, .ctx-cta, #sheet { z-index: 5; }

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  padding: var(--safe-t) 8px 0 8px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(to bottom, rgba(5, 7, 11, .94), rgba(5, 7, 11, 0));
  opacity: 0; transform: translateY(-14px); pointer-events: none;
  transition: opacity 520ms var(--ease) 420ms, transform 620ms var(--ease) 420ms;
}
.scene-map #topbar { opacity: 1; transform: none; pointer-events: auto; }

.top-back {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  color: var(--text-2);
}
.top-back svg { width: 22px; height: 22px; }
.top-back:active { background: rgba(255, 255, 255, .08); }

.top-mark { flex: 1; min-width: 0; display: flex; align-items: center; }
.top-mark .mark { width: 128px; }

.top-talk {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  margin-right: 6px;
  border: 1px solid var(--red);
  font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff;
  background: rgba(97, 12, 35, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.top-talk:active { background: var(--red); }

/* --- chips ---------------------------------------------------------------- */
#chips {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  display: flex; gap: 8px;
  padding: 4px 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 16px;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 520ms var(--ease) 540ms, transform 620ms var(--ease) 540ms;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
#chips::-webkit-scrollbar { display: none; }
.scene-map #chips { opacity: 1; transform: none; pointer-events: auto; }

.chip {
  flex: none;
  min-height: 40px;
  padding: 0 15px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  background: rgba(11, 23, 39, .82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 200ms, background 200ms, border-color 200ms, transform 200ms var(--ease);
}
.chip:active { transform: scale(.96); }
.chip .chip-pip { width: 5px; height: 5px; background: var(--red); opacity: .85; }
.chip.is-on {
  color: #fff;
  background: var(--crimson-dk);
  border-color: var(--red);
  font-weight: 600;
}
.chip.is-on .chip-pip { background: #fff; opacity: 1; }

.chip-sep { flex: none; width: 1px; margin: 8px 4px; background: var(--line-2); }

/* the three anchors read heavier than the regional chips beside them */
.chip-anchor { color: var(--text); font-weight: 600; }
.chip-net    { color: var(--text); font-weight: 600; }

/* --- contextual CTA ------------------------------------------------------- */
.ctx-cta {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(var(--sheet-vis) + 14px);
  min-height: 58px;
  display: flex; align-items: stretch;
  background: rgba(11, 23, 39, .9);
  border: 1px solid rgba(229, 2, 35, .45);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .95);
  padding: 0;
  transition: bottom 420ms var(--ease), opacity 340ms var(--ease), transform 420ms var(--ease);
}
.ctx-cta[hidden] { display: none; }
.ctx-cta.is-in { animation: ctaIn 520ms var(--ease) both; }
@keyframes ctaIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ctx-cta-q {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  padding: 8px 12px 8px 18px;
  font-size: 13.5px; font-weight: 500; line-height: 1.22;
  color: var(--text-2); letter-spacing: -.005em;
}
.ctx-cta-q span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ctx-cta-a {
  flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 18px;
  background: var(--red);
  color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.ctx-cta-a svg { width: 15px; height: 15px; }
.ctx-cta:active .ctx-cta-a { background: var(--red-lit); }

/* =============================================================================
   BOTTOM SHEET
   ========================================================================== */

#sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--sheet-max);
  display: flex; flex-direction: column;
  background: rgba(12, 24, 38, .93);
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  border-top: 2px solid var(--red);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .95);
  transform: translateY(calc(100% - var(--sheet-vis)));
  transition: transform 480ms var(--ease), opacity 420ms var(--ease);
  opacity: 0; pointer-events: none;
}
.scene-map #sheet { opacity: 1; pointer-events: auto; transition-delay: 0ms, 620ms; }
#sheet.is-dragging { transition: none; }

.sheet-grab {
  flex: none;
  height: 26px;
  display: grid; place-items: center;
  touch-action: none;
  cursor: grab;
}
.sheet-grab span { width: 40px; height: 3px; background: rgba(255, 255, 255, .28); }
.sheet-grab:active span { background: rgba(255, 255, 255, .5); }

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px calc(28px + var(--safe-b));
}
body[data-sheet="peek"] .sheet-scroll { overflow-y: hidden; }

/* --- sheet content -------------------------------------------------------- */
.sh-head { padding-bottom: 4px; }
.sh-kicker {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-lit);
  margin-bottom: 10px;
}
.sh-kicker::before { content: ""; width: 16px; height: 2px; background: var(--red); }
.sh-title {
  font-size: 26px; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.12;
  color: #fff;
}
.sh-sub {
  margin-top: 7px;
  font-size: 14px; line-height: 1.45;
  color: var(--text-2);
  letter-spacing: -.005em;
}

.sh-title-tri { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.sh-sec-flush { margin-top: 16px; padding-top: 0; border-top: 0; }

.sh-facts { display: flex; gap: 8px; margin: 18px 0 4px; }
.sh-fact {
  flex: 1; min-width: 0;
  padding: 12px 12px 13px;
  background: rgba(255, 255, 255, .05);
  border-left: 2px solid var(--red);
}
.sh-fact b {
  display: block;
  font-size: 16.5px; font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;          /* "400–1,200" must not break across lines */
}
.sh-fact span {
  display: block; margin-top: 3px;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sh-body { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--text-2); letter-spacing: -.003em; }

.sh-sec { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.sh-sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sh-sec-t {
  font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-3);
}
.sh-sec-n { font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: .04em; }

/* --- a lane row: bidirectional, no invented numbers ---------------------- */
.lane {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  width: 100%;
  text-align: left;
}
.lane:last-child { border-bottom: 0; }
.lane:active { background: rgba(255, 255, 255, .05); }
.lane-arrow { flex: none; width: 24px; color: var(--red); }
.lane-arrow svg { width: 24px; height: 14px; display: block; }
.lane-main { flex: 1; min-width: 0; }
.lane-to { display: block; font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: -.01em; }
.lane-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); letter-spacing: .01em; }
.lane-chev { flex: none; width: 15px; color: var(--text-3); }
.lane-chev svg { width: 15px; height: 15px; display: block; }

/* market rows inside a region */
.mrow {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  min-height: 58px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  text-align: left;
}
.mrow:last-child { border-bottom: 0; }
.mrow:active { background: rgba(255, 255, 255, .05); }
.mrow-pip { flex: none; width: 9px; height: 9px; background: #C2CCD9; }
.mrow[data-tier="hub"] .mrow-pip { background: var(--red); box-shadow: 0 0 0 4px rgba(229, 2, 35, .2); }
.mrow-main { flex: 1; min-width: 0; }
.mrow-name { display: block; font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: -.012em; }
.mrow-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.mrow-chev { flex: none; width: 16px; color: var(--text-3); }
.mrow-chev svg { width: 16px; height: 16px; display: block; }

/* --- statewide coverage callout ------------------------------------------ */
.sh-cover {
  display: flex; gap: 13px;
  margin-top: 18px;
  padding: 14px 15px;
  background: linear-gradient(100deg, rgba(229, 2, 35, .18), rgba(229, 2, 35, .05));
  border-left: 2px solid var(--red);
  width: 100%;
  text-align: left;
  align-items: flex-start;
}
.sh-cover:active { background: linear-gradient(100deg, rgba(229, 2, 35, .28), rgba(229, 2, 35, .1)); }
.sh-cover-ic { flex: none; width: 26px; color: var(--red-lit); }
.sh-cover-ic svg { width: 26px; height: 26px; display: block; }
.sh-cover-main { flex: 1; min-width: 0; }
.sh-cover-t {
  display: block;
  font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.sh-cover-s { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }

.sh-hint {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px;
  font-size: 12.5px; color: var(--text-3);
}
.sh-hint svg { width: 17px; height: 17px; flex: none; opacity: .85; }

.sh-equip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.sh-equip span {
  padding: 6px 11px;
  border: 1px solid var(--line);
  font-size: 11px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-2);
}

/* =============================================================================
   CONTACT
   ========================================================================== */

.scrim {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(3, 5, 9, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 380ms var(--ease);
}
.scrim.is-in { opacity: 1; }
.scrim[hidden] { display: none; }

.contact {
  position: fixed; z-index: 9;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #10203A 0%, #0A1421 100%);
  border-top: 2px solid var(--red);
  box-shadow: 0 -24px 70px -20px rgba(0, 0, 0, .95);
  transform: translateY(100%);
  transition: transform 520ms var(--ease);
}
.contact[hidden] { display: none; }
.contact.is-in { transform: none; }

.contact-inner { padding: 4px 22px calc(24px + var(--safe-b)); }
.contact-kicker {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-lit);
  margin-bottom: 10px;
}
.contact-title {
  font-size: 24px; font-weight: 600;
  letter-spacing: -.028em; line-height: 1.16;
  color: #fff;
  max-width: 17ch;
}
.contact-sub { margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.contact-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* two-tone split, matching the Maybach button */
.cbtn {
  display: flex; align-items: stretch;
  min-height: 64px;
  text-decoration: none;
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform 200ms var(--ease), background 200ms;
}
.cbtn:active { transform: scale(.985); background: rgba(255, 255, 255, .1); }
.cbtn-ic {
  flex: none; width: 60px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
  color: var(--red-lit);
}
.cbtn-ic svg { width: 23px; height: 23px; display: block; }
.cbtn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; }
.cbtn-t { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cbtn-s { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cbtn.is-primary { background: var(--crimson-dk); border-color: var(--red); color: #fff; }
.cbtn.is-primary .cbtn-ic { background: var(--red); color: #fff; }
.cbtn.is-primary .cbtn-s  { color: rgba(255, 255, 255, .78); }
.cbtn.is-primary:active   { background: var(--crimson); }

.contact-hours {
  margin-top: 16px;
  text-align: center;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
}

/* =============================================================================
   RESET-VIEW PILL
   ========================================================================== */
.toast {
  position: fixed; z-index: 12;
  left: 50%; bottom: calc(var(--sheet-vis) + 90px);
  transform: translate(-50%, 12px);
  padding: 11px 18px;
  background: rgba(11, 23, 39, .96);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  cursor: pointer;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.toast:active { transform: translate(-50%, 0) scale(.96); }
.toast[hidden] { display: none; }
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* =============================================================================
   DESKTOP — widen and calm; the mobile composition is the source of truth
   ========================================================================== */

@media (min-width: 820px) {
  :root { --topbar-h: 70px; --sheet-max: calc(100dvh - 116px); }

  #hero { align-items: center; padding: 0 clamp(48px, 8vw, 130px); }
  .hero-inner { max-width: 660px; }
  .hero-mark { width: min(268px, 42%); }
  #knight { right: 2%; top: 50%; width: min(620px, 46vw); opacity: .13; }
  .hero-line { font-size: 2rem; max-width: 18ch; }
  .btn-explore { width: auto; min-width: 360px; }

  /* At desktop widths the country already fills the viewport at 1:1, so any
     scale-up crops it into unreadable noise. Keep it whole and let the copy
     sit over the empty western states. */
  .scene-hero #stage-inner { transform: scale(1.02); opacity: .5; }
  @keyframes drift {
    from { transform: scale(1.02) translate(-.8%, .6%); }
    to   { transform: scale(1.06) translate(.8%, -.6%); }
  }

  /* the sheet becomes a side panel — the map stays the centrepiece */
  #sheet {
    top: calc(var(--topbar-h) + 8px);
    bottom: 20px;
    left: 20px;
    right: auto;
    width: 400px;
    height: auto;
    border: 1px solid var(--line-2);
    border-top: 2px solid var(--red);
    transform: translateX(calc(-100% - 28px));
    opacity: 1;
    transition: transform 520ms var(--ease), opacity 300ms var(--ease);
  }
  .scene-map #sheet { transform: none; }
  body[data-sheet="peek"] .sheet-scroll { overflow-y: auto; }
  #sheet .sheet-grab { display: none; }
  .sheet-scroll { padding: 24px 26px 26px; }

  /* A horizontal scroller is a phone idiom. On desktop the row wraps instead,
     so no chip can end up clipped off the left edge with no way to reach it. */
  #chips {
    left: auto; right: 20px;
    top: calc(var(--topbar-h) + 8px);
    width: min(720px, calc(100vw - 480px));
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
    padding: 0;
    mask-image: none;
  }
  .chip:hover { border-color: var(--line-2); color: var(--text); }
  .chip.is-on:hover { color: #fff; }

  .ctx-cta { left: auto; right: 20px; bottom: 20px; width: 400px; }
  .ctx-cta:hover .ctx-cta-a { background: var(--red-lit); }

  .contact { left: auto; right: 20px; bottom: 20px; width: 430px; border: 1px solid var(--line-2); border-top: 2px solid var(--red); transform: translateY(calc(100% + 40px)); }
  .contact.is-in { transform: none; }
  .cbtn:hover { background: rgba(255, 255, 255, .1); }

  .top-mark .mark { width: 150px; }
  .mk-label { font-size: 11.5px; }
  .top-talk:hover { background: var(--red); }
  .btn-explore:hover { background: var(--crimson); }
  .btn-explore:hover .tile { background: var(--red-lit); }
  .mk:hover .mk-label { opacity: 1; }
  .mk:hover .mk-core { r: 6px; }
}

@media (min-width: 1280px) {
  #sheet, .ctx-cta { width: 436px; }
}

/* =============================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  .scene-hero #stage-inner { animation: none; }
  .hero-streaks { display: none; }
  .corridor-base { stroke-dashoffset: 0; }
  .corridor-flow { opacity: .92; }
}

:focus-visible {
  outline: 2px solid var(--red-lit);
  outline-offset: 3px;
}

/* An outline on an SVG group draws a hard box around its bbox, label and all.
   Markers show keyboard focus with their own ring instead. */
.mk:focus, .mk:focus-visible { outline: none; }
.mk:focus-visible .mk-ring  { opacity: 1; stroke: #fff; stroke-width: 2; }
.mk:focus-visible .mk-label { opacity: 1; }
.mk:focus-visible .mk-core  { stroke: #fff; }