/* ============================================================
   VANTA MOTORWORKS — Private Automotive Atelier
   Exact static rebuild of reference/reference.png per STUDY.md
   Plain CSS. No JS. No external resources. Relative units only.
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   UI type scale.
   Every size was previously a bare vw, tuned against a 1920 mock —
   which put most labels at 8-10px on a 1440 laptop. These keep the
   vw growth on large screens but hold a readable px floor, and the
   ceiling stops the type ballooning on ultrawide.
   Tracking is part of the scale: the smaller the size, the more
   letter-spacing it needs to stay legible in caps.
   ------------------------------------------------------------ */
:root {
  --t-micro: clamp(9.5px, 0.58vw, 13px);   /* kickers, sub-labels */
  --t-small: clamp(10.5px, 0.66vw, 14px);  /* rail, footer, tier titles */
  --t-body:  clamp(11.5px, 0.75vw, 16px);  /* nav, CTA, tagline */
  --t-lead:  clamp(12.5px, 0.86vw, 18px);  /* portal name */
  --t-head:  clamp(17px, 1.2vw, 26px);     /* headline */
  --t-num:   clamp(21px, 1.6vw, 34px);     /* tier counts */
  --t-total: clamp(28px, 2.2vw, 46px);     /* total */

  --ls-wide:  0.28em;
  --ls-caps:  0.2em;
  --ls-tight: 0.12em;

  /* Built-in CSS easings are too weak for this; these are the
     standard strong curves. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --ink:       #f7f2ea;
  --ink-dim:   #d5cabb;
  --ink-faint: #a99e90;
  --gold:      #cf8f45;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  position: relative;
  touch-action: pan-y;
  background: #1b140e;
  font-family: "DM Sans", "Avenir Next", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
  font-weight: 400;
  color: #f2ede6;
  -webkit-font-smoothing: antialiased;
}

/* Scroll runway: gives the fixed stage its scrub range.
   Sized so each frame gets about the same scroll distance as the
   original 300-frame sequence did at 760vh (~2.5vh per frame);
   240 frames x 2.5 = ~600vh. Rescale this if the frame count changes. */
.scroll-space {
  height: 600vh;
  pointer-events: none;
}

/* no-film fallback (reduced motion / missing frames): stay static */
.no-film .scroll-space {
  display: none;
}
.no-film .hero-container {
  height: 100vh;
}

.stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #1b140e;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ------------------------------------------------------------
   Layer 1 — background plate (STUDY §4, §7)
   ------------------------------------------------------------ */
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* ------------------------------------------------------------
   Layer 2 — giant outline word (STUDY §6b)
   spans x 13% → 87% W, cap top y≈21.8% H, cap height ≈ 15.9% H
   ------------------------------------------------------------ */
.display-word {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 21.5vh;
  transform: translateX(-50%);
  font-family: "Century Gothic", "Futura", "Avenir Next", sans-serif;
  font-size: clamp(38px, 6.4vw, 88px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 240, 230, 0.85);
}

/* Front copy of the display word: sits ABOVE the film canvas so the
   headline stays on screen through the whole scroll. Starts hidden and
   is faded in by js/scroll-film.js as the film takes over, which keeps
   the at-rest hero identical to the reference (car overlapping the type). */
.display-word--front {
  z-index: 4;
  opacity: 0;
  will-change: opacity;
}

/* Layer 3 (hero car cutout) removed: the van film frames are
   full-frame composites, so there is no separate cutout to place. */

/* ------------------------------------------------------------
   Layer 3b — scroll film canvas: above word + car, below UI.
   Opacity is driven by js/scroll-film.js; the word and the
   static car layer hand off to it on first scroll.
   ------------------------------------------------------------ */
.film {
  position: absolute;
  inset: 0;
  /* Explicit, not just inset:0 — canvas is a replaced element, so with
     width/height auto it takes its intrinsic size instead of stretching
     to the offsets, and collapses into the top-left corner. */
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

/* Both copies of the display word are moved by js/scroll-film.js as the
   film scrubs, so hint transform as well as opacity. */
.display-word,
.display-word--front {
  will-change: opacity, transform;
  transform-origin: 50% 50%;
}

/* ------------------------------------------------------------
   Entrance choreography.

   Uses the independent `translate` property rather than
   `transform`, because almost every element in the UI layer is
   absolutely positioned and already carries a centring transform
   (translate(-50%, -50%)). Writing to `transform` here would fight
   that; `translate` composes with it instead.

   js/ui-motion.js adds .reveal and sets --d (the stagger delay),
   then puts .is-ready on <html> to release them.
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 460ms var(--ease-out) var(--d, 0ms),
    translate 460ms var(--ease-out) var(--d, 0ms);
}

.is-ready .reveal {
  opacity: 1;
  translate: none;
}

/* Counting digits change width mid-animation; tabular figures stop
   the tier bar jittering as they run. */
.num,
.tot-num,
.rail-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The progress line is driven from JS, so give the width and offset
   a curve rather than letting them jump per scroll event. */
.progress .done,
.progress .gold-seg {
  transition: width 120ms linear, left 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the fade — it still sequences the interface — but drop the
     movement, and land everything at once instead of staggering. */
  .reveal {
    translate: none;
    transition: opacity 240ms ease;
    transition-delay: 0ms;
  }

  .progress .done,
  .progress .gold-seg {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Layer 4 — UI. Header (Flex row with non-colliding layout)
   ------------------------------------------------------------ */
header {
  position: absolute;
  z-index: 10;
  top: calc(3.2% + 6px);
  left: 1.7%;
  right: 1.7%;
  width: auto;
  height: clamp(56px, 6.8vh, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 2.6vw, 48px);
  box-sizing: border-box;
  pointer-events: auto;
}

.header-brand-wrap {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 26px);
  flex-shrink: 0;
}

.logo {
  position: static;
  width: clamp(100px, 7.8vw, 136px);
  display: flex;
  align-items: center;
  transform: none;
}

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

.brand {
  position: static;
  transform: none;
  white-space: nowrap;
  padding-left: clamp(16px, 1.6vw, 24px);
  border-left: 1px solid rgba(240, 233, 220, 0.28);
  height: clamp(20px, 2.2vh, 26px);
  display: flex;
  align-items: center;
}

.brand-name {
  font-size: clamp(12px, 0.88vw, 14.5px);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #f7f2ea;
  line-height: 1;
}

.brand-sub {
  margin-top: 0.75vh;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: #cabda9;
}

header nav {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 32px);
  white-space: nowrap;
  margin: 0 clamp(10px, 1.4vw, 24px);
}

.nav-link {
  position: relative;
  font-size: clamp(12px, 0.86vw, 14.5px);
  font-weight: 500;
  letter-spacing: 0.18em;
  margin-right: calc(0.18em * -1);
  color: var(--ink-dim);
  padding-block: 0.5em;
  transition: color 200ms ease;
  text-decoration: none;
}

/* hairline that opens from the centre on hover */
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover {
    color: var(--ink);
  }

  .nav-link:hover::after {
    width: 100%;
  }

  .cta {
    transition: border-color 200ms var(--ease-out),
                background-color 200ms var(--ease-out);
  }

  .cta:hover {
    border-color: rgba(240, 233, 220, 0.95);
    background: rgba(207, 143, 69, 0.16);
  }
}

/* Dark glassy pill */
.cta {
  position: static;
  transform: none;
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding: clamp(8px, 1vh, 12px) clamp(16px, 1.3vw, 24px);
  border-radius: 100vh;
  border: 1px solid rgba(240, 233, 220, 0.65);
  background: rgba(18, 13, 9, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #f7f2ea;
  white-space: nowrap;
  text-decoration: none;
}

.header-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.portal-mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(18, 13, 9, 0.7);
  border: 1px solid rgba(240, 233, 220, 0.35);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.portal-mobile-menu-btn:hover {
  border-color: rgba(207, 143, 69, 0.7);
  background: rgba(207, 143, 69, 0.15);
}

.portal-mobile-menu-btn .menu-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #f7f2ea;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.portal-mobile-menu-btn.open .menu-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.portal-mobile-menu-btn.open .menu-bar:nth-child(2) {
  opacity: 0;
}
.portal-mobile-menu-btn.open .menu-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Slide-Out Navigation Drawer */
.portal-mobile-drawer {
  position: fixed;
  top: 0;
  right: -105%;
  width: min(85vw, 360px);
  height: 100vh;
  height: 100dvh;
  background: rgba(13, 9, 6, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(207, 143, 69, 0.3);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 50px rgba(0, 0, 0, 0.85);
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.portal-mobile-drawer.open {
  right: 0;
}

.portal-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(207, 143, 69, 0.15);
}

.portal-mobile-drawer-links {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 14px;
  flex: 1;
  overflow-y: auto;
}

.portal-mobile-drawer-links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #f7f2ea;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(207, 143, 69, 0.12);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s ease;
  display: block;
}

.portal-mobile-drawer-links a:hover,
.portal-mobile-drawer-links a:active {
  background: rgba(207, 143, 69, 0.12);
  border-color: rgba(207, 143, 69, 0.5);
  color: #cf8f45;
}

/* ------------------------------------------------------------
   Left text block (STUDY §6c)
   ------------------------------------------------------------ */
.left-rule {
  position: absolute;
  z-index: 4;
  left: 4.1%;
  top: 41.8%;
  height: 8.4%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    #cf8f45 0%,
    #cf8f45 21.4%,
    rgba(120, 110, 95, 0.7) 21.4%,
    rgba(120, 110, 95, 0.7) 100%
  );
}

.kicker {
  position: absolute;
  z-index: 4;
  left: 5%;
  top: 42.4%;
  transform: translateY(-50%);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #e6dac6;
  white-space: nowrap;
}

.headline {
  position: absolute;
  z-index: 4;
  left: 5%;
  top: 46.2%;
  transform: translateY(-50%);
  font-size: var(--t-head);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #f8f3eb;
  white-space: nowrap;
}

.tagline {
  position: absolute;
  z-index: 4;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--t-body);
  font-weight: 400;
  color: #d5cabb;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Right vertical rail (STUDY §6d)
   ------------------------------------------------------------ */
.rail-vertical {
  position: absolute;
  z-index: 4;
  left: 96.8%;
  top: 49.75%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: #e2dacd;
  white-space: nowrap;
}

.rail-count {
  position: absolute;
  z-index: 4;
  left: 96.5%;
  top: 66%;
  transform: translate(-50%, -50%);
  font-size: var(--t-small);
  letter-spacing: 0.15em;
  color: #f2ede6;
  white-space: nowrap;
}

.rail-total {
  color: rgba(214, 206, 194, 0.55);
}

/* ------------------------------------------------------------
   INSPECT hotspot (STUDY §6e)
   circle center (64.5% W, 69.9% H), Ø ≈ 2.75% W
   ------------------------------------------------------------ */
.hotspot {
  position: absolute;
  z-index: 4;
  left: 64.5%;
  top: 69.9%;
  width: 2.75vw;
  height: 2.75vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.08vw solid rgba(214, 152, 74, 0.95);
  background: rgba(18, 13, 9, 0.25);
}

/* tiny white ring-dot at center */
.hotspot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.3vw;
  height: 0.3vw;
  transform: translate(-50%, -50%);
  border: 0.12vw solid #ffffff;
  border-radius: 50%;
}

/* short thin gold tick extending right from ring edge */
.hotspot::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.9vw;
  height: 1px;
  background: rgba(207, 143, 69, 0.9);
}

.hotspot-label {
  position: absolute;
  z-index: 4;
  left: 66.2%;
  top: 72.4%;
  transform: translateY(-50%);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.25em;
  color: #f5f0e7;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Bottom glassy service bar (STUDY §6f)
   x 16.1–83.1% W, y 80.6–88.2% H
   ------------------------------------------------------------ */
.service-bar {
  position: absolute;
  z-index: 4;
  left: 16.1%;
  top: 80.6%;
  width: 67%;
  height: 7.6%;
  border-radius: 0.84vw;
  border: 1px solid rgba(240, 233, 220, 0.28);
  background: linear-gradient(to right, rgba(26, 18, 11, 0.35), rgba(58, 44, 30, 0.5));
  -webkit-backdrop-filter: blur(0.4vw);
  backdrop-filter: blur(0.4vw);
}

.service {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.7vw;
  white-space: nowrap;
}

/* 6 sections spacing */
.service-1 { left: 2%; }
.service-2 { left: 18.6%; }
.service-3 { left: 35.3%; }
.service-4 { left: 52%; }
.service-5 { left: 68.6%; }

.num {
  font-size: var(--t-num);
  font-weight: 200;
  letter-spacing: 0.04em;
  color: #cfc8bd;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.55vh;
}

.s-title {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #f7f2ea;
}

.s-sub {
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #c6bcb0;
}

.s-sub.gold {
  color: #d99e58;
}

.sep {
  position: absolute;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* page-x -> bar-relative spacing */
.sep-1 { left: 16.6%; }
.sep-2 { left: 33.3%; }
.sep-3 { left: 50%; }
.sep-4 { left: 66.6%; }
.sep-5 { left: 83.3%; }

.total-suppliers {
  position: absolute;
  left: 86%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.tot-title {
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #f7f2ea;
}

.tot-num {
  font-size: var(--t-total);
  font-weight: 700;
  color: #cf8f45;
}

/* ------------------------------------------------------------
   Footer line + progress (STUDY §6g)
   ------------------------------------------------------------ */
.explore {
  position: absolute;
  z-index: 4;
  left: 49%;
  top: 93.7%;
  transform: translate(-50%, -50%);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.35em;
  color: #e8e1d6;
  white-space: nowrap;
}

.progress {
  position: absolute;
  z-index: 4;
  left: 3.6%;
  top: 96.2%;
  width: 15.9%;
  height: 0;
}

.progress .track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(235, 228, 215, 0.5);
}

/* brighter white portion x 3.6→13% of page = 0→59.1% of track */
.progress .done {
  position: absolute;
  left: 0;
  width: 59.1%;
  top: 0;
  height: 1px;
  transform: translateY(-50%);
  background: #ffffff;
}

/* gold segment x 13→16% of page = 59.1→78% of track */
.progress .gold-seg {
  position: absolute;
  left: 59.1%;
  width: 18.9%;
  top: 0;
  height: 0.3vh;
  transform: translateY(-50%);
  background: #cf8f45;
}

/* ------------------------------------------------------------
   Global hairline frame (STUDY §2)
   ------------------------------------------------------------ */
.frame {
  position: absolute;
  z-index: 5;
  left: 1.7%;
  right: 1.7%;
  top: 3.2%;
  bottom: 3.2%;
  border: 1px solid rgba(235, 228, 215, 0.55);
  border-radius: 1.4vw;
  pointer-events: none;
}



/* ------------------------------------------------------------
   Mobile — portrait phones and small tablets.

   The hero band is driven by --hero-h so the stack below it can be
   derived from one number instead of repeating the arithmetic. The
   canvas reads its own height from here (see js/scroll-film.js), so
   changing this value is all that's needed.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root {
    --hero-top: 12vh;
    --hero-h: min(88vw, 40vh);
  }

  .bg, .film {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--hero-h) !important;
    top: var(--hero-top) !important;
    bottom: auto !important;
    object-fit: cover !important;
  }

  .display-word {
    font-size: min(8vw, 36px) !important;
    top: calc(var(--hero-top) + 10vw) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-text-stroke: 1px rgba(245, 240, 230, 0.85) !important;
    letter-spacing: 0.1em !important;
    max-width: 90% !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  /* Header adjustments */
  header {
    height: auto !important;
    padding: 16px 4% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .header-brand-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4vh !important;
  }
  .logo { width: min(30vw, 120px) !important; }
  .brand {
    padding-left: 0 !important; border-left: 0 !important;
  }
  .brand-name { font-size: min(2.8vw, 12px) !important; }

  /* hide desktop nav, show mobile menu button */
  header nav { display: none !important; }

  .portal-mobile-menu-btn {
    display: flex !important;
  }

  .cta {
    padding: 8px 14px !important;
    font-size: min(2.8vw, 11px) !important;
  }

  /* Sits directly under the hero band with responsive word-wrapping */
  .left-block {
    position: absolute !important;
    top: calc(var(--hero-top) + var(--hero-h) + 2.5vh) !important;
    left: 4% !important;
    right: 4% !important;
    width: 92% !important;
    max-width: 92% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .kicker { font-size: min(3vw, 13px) !important; position: static !important; transform: none !important; margin-bottom: 0.8vh !important; white-space: normal !important; }
  .headline { font-size: min(5.8vw, 28px) !important; position: static !important; transform: none !important; margin-bottom: 0.5vh !important; white-space: normal !important; word-break: break-word !important; line-height: 1.25 !important; }
  .tagline { font-size: min(3.2vw, 15px) !important; position: static !important; transform: none !important; white-space: normal !important; word-break: break-word !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; }
  .left-rule { display: none !important; }
  .rail { display: none !important; }

  /* Service bar - pinned cleanly to bottom */
  .service-bar {
    width: 92% !important;
    left: 4% !important;
    right: 4% !important;
    height: auto !important;
    top: auto !important;
    bottom: 2vh !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(18, 13, 9, 0.9) !important;
    box-sizing: border-box !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
  }

  .service {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 45% !important; 
    margin-bottom: 0.8vh !important;
    gap: 1vw !important;
  }

  .total-suppliers {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 3vw !important;
    margin-top: 0.5vh !important;
  }

  .num { font-size: min(6vw, 26px) !important; }
  .s-title { font-size: min(2.8vw, 13px) !important; }
  .s-sub { font-size: min(2vw, 11px) !important; }
  .tot-title { font-size: min(3.8vw, 16px) !important; }
  .tot-num { font-size: min(6.5vw, 30px) !important; line-height: 1 !important; }

  .sep { display: none !important; }
  .hotspot, .hotspot-label, .explore, .progress { display: none !important; }
}

/* ------------------------------------------------------------
   Landscape phones and short viewports.

   Previously unhandled: the only mobile query required
   orientation: portrait, so a phone turned sideways fell through to
   the desktop layout and got desktop type on a 375px-tall screen.
   Here the desktop composition still works — it is a 16:9 stage —
   but everything needs to shrink and the non-essentials go.
   ------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --t-micro: 8px;
    --t-small: 9px;
    --t-body:  10px;
    --t-lead:  11px;
    --t-head:  15px;
    --t-num:   17px;
    --t-total: 22px;
  }

  .logo { width: clamp(84px, 12vw, 120px); }

  /* Wordmark + descriptor + nav + CTA will not fit across a header
     this short — the descriptor ran into OVERVIEW by ~57px at
     812x375. The logo carries the brand on its own here. */
  .brand { display: none; }

  header nav { gap: clamp(0.9rem, 2vw, 1.6rem); }

  .cta { height: 8.5%; }

  /* the rail and hotspot are the first things to crowd a short stage */
  .rail-vertical,
  .hotspot,
  .hotspot-label { display: none; }

  .service-bar { height: 15%; }
  .explore { display: none; }
}

@media (max-width: 900px) {
  header nav { display: none !important; }
  .portal-mobile-menu-btn { display: flex !important; }
}

@media (max-width: 360px) and (orientation: portrait) {
  .service { width: 47% !important; }
  .num { font-size: 5.4vw !important; }
  .s-title { font-size: 2.9vw !important; }
  .s-sub { font-size: 2.3vw !important; }
}