/* ============================================================
   ATLAS GUIDE  ·  HOME PAGE  ·  "THE JOURNEY"  v4.0
   home.css  ·  Requires global.css loaded first
   ------------------------------------------------------------
   Prefix: hm-. Header and footer untouched (header-footer.css).
   The hero (section 3) is carried over from v3.0 unchanged.

   v4.0 changes, everything below the hero:
   - Sections stack as rounded sheets that slide over each other
   - Country marquee rebuilt as two crossing luggage-strap
     ribbons that speed up, skew and reverse with the scroll
   - Departures board swings down into place in 3D as it
     enters, with a light sweep across the glass. Board
     internals and every ID the board module uses are kept.
   - Expedition is a curved film strip: cards turn in 3D around
     the centre, images parallax inside their frames, a giant
     outlined country name and a route timeline follow along
   - Briefing questions sit in a reading-focus list with a
     dark wipe on hover and odometer stats
   - Field kit bento gets a cursor spotlight that runs across
     the borders of every tile, a tilting quiz tile and
     animated line icons
   - More-ways-in tickets become boarding passes with tilt
     and a foil shine
   - Closing gets an interactive dot-matrix globe (canvas)
     flying the six expedition stops
   - Journey rail now marks each section as a waypoint
   - All motion is off under prefers-reduced-motion
   ============================================================ */

:root {
  --hm-hair:        rgba(26, 58, 43, 0.10);
  --hm-hair-strong: rgba(26, 58, 43, 0.18);
  --hm-border-warm: rgba(201, 168, 92, 0.30);
  --hm-ivory:       #f3ecdc;
  --hm-radius:      16px;
  --hm-radius-lg:   22px;
  --hm-radius-pill: 999px;

  --hm-ease:   var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --hm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hm-sheet:  clamp(26px, 3.4vw, 52px);
  --hm-paper:  #fffdf8;
  --hm-deep:   #07150f;
  --hm-noise:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hm-body { background: var(--ag-green-900); }
.hm-body main { background: var(--ag-parchment); }

.hm-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hm-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

@keyframes hm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   1 · BUTTONS
   A fill slides up from below on hover, the arrow nudges out.
   [data-magnet] buttons also drift toward the pointer (JS).
   ============================================================ */
.hm-btn-gold,
.hm-btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--hm-radius-pill);
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color .45s var(--hm-ease),
    border-color .45s var(--hm-ease),
    box-shadow .45s var(--hm-ease),
    translate .6s var(--hm-ease);
}
.hm-btn-gold::before,
.hm-btn-ghost::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .55s var(--hm-ease);
}
.hm-btn-gold:hover::before,
.hm-btn-ghost:hover::before,
.hm-btn-gold:focus-visible::before,
.hm-btn-ghost:focus-visible::before { transform: translateY(0); }

.hm-btn-gold {
  background: var(--ag-gold-500);
  color: var(--ag-green-900);
  box-shadow: 0 14px 34px -14px rgba(201, 168, 92, 0.75);
}
.hm-btn-gold::before { background: var(--ag-green-900); }
.hm-btn-gold:hover { color: var(--ag-gold-400); box-shadow: 0 18px 40px -16px rgba(13, 33, 24, 0.55); }

.hm-btn-ghost {
  background: transparent;
  color: var(--ag-green-800);
  border: 1px solid var(--ag-green-800);
}
.hm-btn-ghost::before { background: var(--ag-green-800); }
.hm-btn-ghost:hover { color: #fff; }

.hm-btn-gold:focus-visible,
.hm-btn-ghost:focus-visible {
  outline: 2px solid var(--ag-gold-500);
  outline-offset: 3px;
}

.hm-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform .45s var(--hm-ease);
}
a:hover > .hm-arrow,
a:focus-visible > .hm-arrow,
a:hover .hm-arrow-go,
a:focus-visible .hm-arrow-go { transform: translateX(4px); }

/* ============================================================
   2 · JOURNEY RAIL
   Dashed flight path on the left edge. Each section is a
   waypoint (placed by JS) that lights up once passed.
   ============================================================ */
.hm-rail {
  position: fixed;
  left: 26px;
  top: 50%;
  width: 20px;
  height: 46vh;
  transform: translateY(-50%);
  z-index: 500;
  pointer-events: none;
}
.hm-rail-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 2px;
  background-image: linear-gradient(to bottom, rgba(201,168,92,0.38) 55%, transparent 55%);
  background-size: 2px 10px;
}
.hm-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--ag-gold-500);
  transform-origin: top;
  transform: scaleY(0);
  box-shadow: 0 0 12px rgba(201, 168, 92, 0.55);
  will-change: transform;
}
.hm-rail-stops { position: absolute; inset: 0; }
.hm-rail-stop {
  position: absolute;
  left: 5px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--ag-green-900);
  border: 1.5px solid rgba(201, 168, 92, 0.6);
  transform: scale(0.8);
  transition: transform .5s var(--hm-spring), background .3s, box-shadow .3s;
}
.hm-rail-stop.is-passed {
  background: var(--ag-gold-500);
  border-color: var(--ag-gold-500);
  transform: scale(1);
  box-shadow: 0 0 0 4px rgba(201, 168, 92, 0.18), 0 0 12px rgba(201, 168, 92, 0.5);
}
.hm-rail-plane {
  position: absolute;
  top: -8px;
  left: 2px;
  width: 16px;
  height: 16px;
  color: var(--ag-gold-500);
  filter: drop-shadow(0 0 6px rgba(201, 168, 92, 0.7));
  will-change: transform;
}
.hm-rail-plane svg { display: block; width: 16px; height: 16px; transform: rotate(180deg); }
@media (max-width: 1200px) { .hm-rail { display: none; } }

/* ============================================================
   3 · HERO  ·  THE ATLAS PLATE
   The background video and its tone layers are unchanged from
   v3.0. v4.1 polish: pointer light and title depth, a decoding
   coordinate readout, a shimmer on "documented.", an orbiting border on the search, quick picks
   and a scroll cue.
   ============================================================ */
.hm-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ag-green-900) url('/images/hero-compass-map.jpg') center 55% / cover no-repeat;
}
.hm-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
}

/* tone: darker at the edges and behind the copy block */
.hm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 52%, rgba(13,33,24,0.42) 0%, rgba(13,33,24,0) 70%),
    linear-gradient(180deg,
      rgba(13,33,24,0.55) 0%,
      rgba(13,33,24,0.08) 28%,
      rgba(13,33,24,0.08) 68%,
      rgba(13,33,24,0.78) 100%);
}
.hm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(90% 90% at 50% 45%, transparent 60%, rgba(13, 33, 24, 0.5) 100%);
}

/* film grain, printed-page texture over the footage */
.hm-hero-grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hm-grain 1.2s steps(4) infinite;
}
@keyframes hm-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ---------- the plate frame ---------- */
.hm-plate {
  --plate-inset: clamp(14px, 2.4vw, 34px);
  position: absolute;
  inset: calc(var(--plate-inset) + 64px) var(--plate-inset) var(--plate-inset);
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(201, 168, 92, 0.34);
  animation: hm-plate-in 1.4s .1s var(--ease-out) both;
}
/* graduated scale on the top and bottom edges, like a map neatline */
.hm-plate::before,
.hm-plate::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(201,168,92,0.55) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(201,168,92,0.28) 0 1px, transparent 1px 12px);
  background-size: 100% 7px, 100% 4px;
  background-repeat: no-repeat;
}
.hm-plate::before { top: 0; }
.hm-plate::after  { bottom: 0; transform: scaleY(-1); }

.hm-plate-c {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--ag-gold-500);
  border-style: solid;
  border-width: 0;
}
.hm-plate-tl { top: -3px; left: -3px;     border-top-width: 2px; border-left-width: 2px; }
.hm-plate-tr { top: -3px; right: -3px;    border-top-width: 2px; border-right-width: 2px; }
.hm-plate-bl { bottom: -3px; left: -3px;  border-bottom-width: 2px; border-left-width: 2px; }
.hm-plate-br { bottom: -3px; right: -3px; border-bottom-width: 2px; border-right-width: 2px; }

.hm-plate-label {
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(243, 236, 220, 0.72);
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
  background: rgba(13, 33, 24, 0.0);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.hm-plate-label-tl { top: 16px; left: 18px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 0.86rem; letter-spacing: 0; }
.hm-plate-label-tr { top: 16px; right: 18px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 0.86rem; letter-spacing: 0; }
.hm-plate-label-bl { bottom: 16px; left: 18px; }
.hm-plate-label-br { bottom: 16px; right: 18px; }
.hm-plate-coord { color: var(--ag-gold-400); transition: color .3s, text-shadow .3s; }
.hm-plate-coord.is-decoding { color: #fff1c8; text-shadow: 0 0 10px rgba(217, 188, 128, 0.7); }
.hm-plate-pin {
  align-self: center;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag-gold-400);
  animation: hm-pin-pulse 2.4s ease-out infinite;
}
@keyframes hm-pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 188, 128, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(217, 188, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 188, 128, 0); }
}
.hm-plate-place {
  display: inline-block;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0;
  color: rgba(243, 236, 220, 0.85);
}
@keyframes hm-plate-in {
  from { opacity: 0; clip-path: inset(0 50% 0 50%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---------- hero copy ---------- */
.hm-hero-core {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 140px 24px 150px;
  width: 100%;
  max-width: 900px;
  will-change: transform, opacity;
}
.hm-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ag-gold-400);
  margin-bottom: 26px;
  animation: hm-fade .9s .2s var(--ease-out) both;
}
.hm-kicker-line { width: 34px; height: 1px; background: var(--ag-gold-500); }

.hm-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 28px;
  text-shadow: 0 2px 30px rgba(13, 33, 24, 0.35);
}
/* "documented." gets a light sweep every few seconds */
.hm-hero-title em {
  font-style: italic;
  color: var(--ag-gold-400);
  background: linear-gradient(100deg, var(--ag-gold-400) 0 40%, #fff4d6 50%, var(--ag-gold-400) 60% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hm-shimmer 9s 1.7s ease-in-out infinite;
}
@keyframes hm-shimmer {
  /* 100% and 0% both keep the oversized gradient covering the
     whole word; the bright band only shows while it travels */
  0%        { background-position: 100% 0; }
  16%, 100% { background-position: 0% 0; }
}
.hm-hero-title { will-change: translate; }

/* soft light that follows the pointer over the footage */
.hm-hero-light {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 230, 170, 0.13), rgba(255, 230, 170, 0.04) 55%, transparent);
  opacity: 0;
  transition: opacity .8s var(--ease-out);
  will-change: transform;
}
.hm-hero.is-lit .hm-hero-light { opacity: 1; }
.hm-tw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.hm-tw > span {
  display: inline-block;
  transform: translateY(110%);
  animation: hm-word-rise 0.9s var(--ease-out) forwards;
}
.hm-tw:nth-child(1) > span { animation-delay: 0.30s; }
.hm-tw:nth-child(2) > span { animation-delay: 0.42s; }
.hm-tw:nth-child(3) > span { animation-delay: 0.56s; }
@keyframes hm-word-rise { to { transform: translateY(0); } }

.hm-hero-lede b { font-weight: 600; color: var(--ag-gold-400); }
.hm-hero-lede {
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto 34px;
  animation: hm-fade .9s .8s var(--ease-out) both;
}
@keyframes hm-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- guide search ---------- */
.hm-search {
  position: relative;
  z-index: 6;
  max-width: 580px;
  margin: 0 auto 22px;
  text-align: left;
  animation: hm-fade .9s .95s var(--ease-out) both;
}
@property --hm-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.hm-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 20px;
  background: rgba(247, 242, 230, 0.97);
  border: 1px solid rgba(201, 168, 92, 0.55);
  border-radius: var(--hm-radius-pill);
  box-shadow:
    0 0 0 6px rgba(201, 168, 92, 0.12),
    0 24px 50px rgba(13, 33, 24, 0.45);
  transition: box-shadow .3s var(--ease-out), border-color .3s;
}
.hm-search-field:focus-within {
  border-color: var(--ag-gold-500);
  box-shadow:
    0 0 0 6px rgba(201, 168, 92, 0.28),
    0 24px 50px rgba(13, 33, 24, 0.45);
}
.hm-search-icon { flex: 0 0 auto; color: var(--ag-gold-700); transition: transform .6s var(--ease-out); }
.hm-search-field:focus-within .hm-search-icon { transform: rotate(-35deg); }
.hm-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ag-ink);
  padding: 12px 0;
}
.hm-search-input::placeholder { color: rgba(26, 36, 32, 0.45); }
/* a gold glint orbits the field while it has focus */
.hm-search-field::before {
  content: '';
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--hm-angle), transparent 0 62%, rgba(217, 188, 128, 0.9) 76%, #fff3cc 81%, var(--ag-gold-500) 86%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .4s;
  animation: hm-orbit 3.4s linear infinite paused;
}
.hm-search-field:focus-within::before { opacity: 1; animation-play-state: running; }
@keyframes hm-orbit { to { --hm-angle: 360deg; } }

.hm-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  padding: 13px 24px;
  border-radius: var(--hm-radius-pill);
  background: var(--ag-green-900);
  color: var(--ag-gold-400);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  transition: background .25s, color .25s, transform .25s var(--ease-out);
}
.hm-search-btn:hover { background: var(--ag-green-800); color: #fff; }
.hm-search-btn-arrow { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.hm-search-btn:hover .hm-search-btn-arrow { transform: translateX(3px); }

/* quick picks */
.hm-hero-picks {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 22px;
  animation: hm-fade .9s 1.02s var(--ease-out) both;
}
.hm-hero-picks-label {
  margin-right: 4px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 236, 220, 0.6);
}
.hm-hero-picks a {
  padding: 6px 14px;
  border-radius: var(--hm-radius-pill);
  border: 1px solid rgba(243, 236, 220, 0.24);
  background: rgba(13, 33, 24, 0.42);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-out);
}
.hm-hero-picks a:hover,
.hm-hero-picks a:focus-visible {
  background: var(--ag-gold-500);
  border-color: var(--ag-gold-500);
  color: var(--ag-green-900);
  transform: translateY(-2px);
}
.hm-hero-picks a:focus-visible { outline: 2px solid var(--ag-gold-400); outline-offset: 3px; }
.hm-search-btn:focus-visible { outline: 2px solid var(--ag-gold-500); outline-offset: 2px; }

.hm-search-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 330px;
  overflow-y: auto;
  background: var(--ag-parchment);
  border: 1px solid var(--hm-border-warm);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(13, 33, 24, 0.4);
}
.hm-search-list[hidden] { display: none; }
.hm-search-list [role="option"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.hm-search-list [role="option"]:hover,
.hm-search-list [role="option"][aria-selected="true"] { background: var(--ag-green-50); }
.hm-search-list [role="option"][aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--ag-gold-500);
}
.hm-search-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ag-ink);
}
.hm-search-meta { font-size: 0.78rem; color: var(--ag-ink-light); white-space: nowrap; }
.hm-search-empty { padding: 12px 14px; font-size: 0.88rem; color: var(--ag-ink-mid); }

.hm-hero-alt {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  animation: hm-fade .9s 1.12s var(--ease-out) both;
}
.hm-hero-alt a {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  background: linear-gradient(var(--ag-gold-500), var(--ag-gold-500)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: color .25s, background-size .3s var(--ease-out);
}
.hm-hero-alt a:hover { color: var(--ag-gold-400); }
.hm-hero-alt a:focus-visible { outline: 2px solid var(--ag-gold-400); outline-offset: 4px; }
.hm-hero-alt-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ag-gold-500); }

/* ---------- ember trail ---------- */
.hm-ember-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.hm-ember {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff3c4, #f0a83a 45%, #c9581f 75%, transparent 100%);
  animation: hm-ember-fade 0.8s ease-out forwards;
}
@keyframes hm-ember-fade {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -150%) scale(0.15); }
}

/* ---------- scroll cue ---------- */
.hm-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(14px, 2.4vw, 34px) + 16px);
  z-index: 4;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(243, 236, 220, 0.62);
  pointer-events: none;
  animation: hm-fade .9s 1.6s var(--ease-out) both;
  transition: opacity .5s;
}
.hm-scroll-cue i {
  position: relative;
  width: 1px;
  height: 38px;
  overflow: hidden;
  background: rgba(243, 236, 220, 0.22);
}
.hm-scroll-cue i::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--ag-gold-400);
  transform: translateY(-14px);
  animation: hm-drip 1.9s ease-in-out infinite;
}
@keyframes hm-drip { to { transform: translateY(38px); } }
.hm-hero.is-scrolled .hm-scroll-cue { opacity: 0; }

/* ============================================================
   4 · COUNTRY RIBBONS
   Two straps crossing in an X. JS drives the translate so the
   ribbons speed up, skew and flip direction with the scroll.
   ============================================================ */
.hm-ribbons {
  position: relative;
  height: clamp(190px, 21vw, 290px);
  overflow: hidden;
  background:
    radial-gradient(50% 80% at 50% 50%, rgba(201, 168, 92, 0.14), transparent 70%),
    var(--ag-parchment);
}
.hm-ribbon {
  position: absolute;
  left: -6%;
  width: 112%;
  top: 50%;
  padding: clamp(14px, 1.5vw, 20px) 0;
}
.hm-ribbon::before,
.hm-ribbon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(90deg, currentColor 50%, transparent 50%);
  background-size: 10px 1px;
  opacity: 0.35;
}
.hm-ribbon::before { top: 6px; }
.hm-ribbon::after  { bottom: 6px; }

.hm-ribbon-a {
  z-index: 2;
  background: var(--ag-green-900);
  color: var(--hm-ivory);
  transform: translateY(-50%) rotate(-3deg);
  box-shadow: 0 24px 50px -22px rgba(13, 33, 24, 0.7);
}
.hm-ribbon-b {
  z-index: 1;
  background: linear-gradient(180deg, #d6b76b, var(--ag-gold-500) 60%, #b9974d);
  color: var(--ag-green-900);
  transform: translateY(-50%) rotate(2.2deg);
}

.hm-ribbon-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.hm-ribbon-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.hm-ribbon-group span {
  padding: 0 0.42em;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .3s;
}
.hm-ribbon-group i {
  display: inline-block;
  font-style: normal;
  font-size: clamp(0.9rem, 1.6vw, 1.3rem);
}
.hm-ribbon-a .hm-ribbon-group span:nth-of-type(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--ag-gold-400);
}
.hm-ribbon-a .hm-ribbon-group i { color: var(--ag-gold-500); }
.hm-ribbon-b .hm-ribbon-group span:nth-of-type(odd) {
  color: transparent;
  -webkit-text-stroke: 1px var(--ag-green-900);
}
.hm-ribbon-b .hm-ribbon-group i { color: var(--ag-green-900); opacity: 0.7; }

/* ============================================================
   5 · SHARED HEADS, SHEETS, REVEALS
   ============================================================ */
.hm-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 2px solid var(--ag-green-900);
}
.hm-sec-head-light { border-top-color: var(--ag-gold-500); }
.hm-sec-aside {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ag-ink-mid);
  padding-bottom: 8px;
}
.hm-sec-aside b {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ag-gold-700);
  margin-right: 8px;
}

/* leg labels: italic serif with a gold rule that draws in */
.hm-sec-label,
.hm-exp-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ag-gold-700);
  margin-bottom: 14px;
}
.hm-sec-label::before,
.hm-exp-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--ag-gold-500);
  transform-origin: left;
  transition: transform 1s .2s var(--hm-ease);
}
.hm-js .rv:not(.in) .hm-sec-label::before { transform: scaleX(0); }
.hm-dispatch .hm-sec-label,
.hm-exp-label { color: var(--ag-gold-400); }

.hm-sec-title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ag-ink);
  margin: 0;
  line-height: 1.02;
}
.hm-sec-title em,
.hm-closing h2 em { font-style: italic; font-weight: 600; color: var(--ag-gold-700); }
.hm-dispatch .hm-sec-title { color: #fff; }
.hm-dispatch .hm-sec-title em { color: var(--ag-gold-400); }

/* sheets: rounded sections that slide up over the one before */
.hm-sheet {
  position: relative;
  margin-top: calc(var(--hm-sheet) * -1);
  border-radius: var(--hm-sheet) var(--hm-sheet) 0 0;
}
/* printed-paper grain on the dark sheets */
.hm-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.07;
  background-image: var(--hm-noise);
}

/* reveal: fade and rise */
.hm-js .hm-body .rv {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--hm-ease), transform 1s var(--hm-ease);
}
.hm-js .hm-body .rv.in { opacity: 1; transform: none; }

/* staggered children: animation only fills backwards, so once
   it ends JS tilt and hover transforms take over cleanly */
.hm-js .rv-kids:not(.in) > * { opacity: 0; }
.rv-kids.in > * {
  animation: hm-rise 1s var(--hm-ease) calc(var(--i, 0) * 90ms) backwards;
}
@keyframes hm-rise {
  from { opacity: 0; transform: translateY(46px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* split titles: words rise out of a mask with a small turn */
.hm-sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.04em 0.12em;
  margin: 0 -0.04em -0.12em;
}
.hm-sw > span {
  display: inline-block;
  transform: translateY(118%) rotate(6deg);
  transform-origin: 0 100%;
  transition: transform 1s var(--hm-ease);
}
[data-split].in .hm-sw > span { transform: none; }

/* ============================================================
   6 · DEPARTURES BOARD
   Board internals (cols/rows/cells) are generated by the
   module in deals-banner.js; every class it emits is kept.
   Around it: a hanging unit with a gold sign, a soft glow
   and a floor shadow. It sits still: no scroll-driven 3D,
   so the hundreds of flap cells never get re-laid out or
   recomposited while the page scrolls.
   ============================================================ */
.hm-dep {
  --dep-cw: clamp(13px, 1.55vw, 19px);
  --dep-ch: clamp(22px, 2.5vw, 31px);
  --dep-gap: 3px;
  --dep-colgap: clamp(8px, 1.1vw, 16px);
  --dep-dur: 55ms;

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 66%, rgba(201, 168, 92, 0.18), transparent 70%),
    var(--ag-parchment);
  padding: clamp(96px, 14vh, 150px) 0 calc(clamp(120px, 17vh, 190px) + var(--hm-sheet));
}
.hm-dep.hm-dep-wide {
  --dep-cw: clamp(20px, 2.4vw, 30px);
  --dep-ch: clamp(24px, 2.8vw, 34px);
}

/* terminal architecture: window mullions and a drifting light shaft */
.hm-dep-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(26, 58, 43, 0.055) calc(12.5% - 1px) 12.5%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.hm-dep-beams::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 251, 240, 0.75) 50%, transparent 100%);
  animation: hm-shaft 16s ease-in-out infinite;
}
@keyframes hm-shaft {
  0%   { transform: translateX(0) skewX(-14deg); }
  60%, 100% { transform: translateX(360%) skewX(-14deg); }
}

/* ---------- head ---------- */
.hm-dep-head {
  position: relative;
  max-width: 1040px;
  margin: 0 auto 108px;
  padding-top: 24px;
  border-top: 2px solid var(--ag-green-900);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.hm-dep-title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ag-ink);
  line-height: 1.02;
  margin: 0;
}
.hm-dep-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hm-dep-lede {
  font-size: 1rem;
  color: var(--ag-ink-mid);
  line-height: 1.7;
  margin: 0;
  max-width: 46ch;
}
.hm-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--hm-radius-pill);
  background: var(--ag-green-900);
  color: #9fe0b4;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .hm-dep-head {
    grid-template-columns: 1.35fr 1fr;
    column-gap: 56px;
    align-items: end;
  }
}

/* ---------- stage ---------- */
.hm-dep-stage {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}
.hm-dep-glow {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  bottom: -6%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 168, 92, 0.3), rgba(201, 168, 92, 0.1) 55%, transparent);
}
.hm-dep-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -64px;
  height: 46px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 33, 24, 0.32), transparent);
}

/* ---------- housing ---------- */
.hm-dep-housing {
  position: relative;
  padding: 12px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a4d3f 0%, #183327 45%, #10261d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(201, 168, 92, 0.22),
    0 60px 100px -36px rgba(13, 33, 24, 0.65),
    0 18px 34px rgba(13, 33, 24, 0.2);
}

/* ceiling rods the unit hangs from */
.hm-dep-rod {
  position: absolute;
  bottom: 100%;
  width: 4px;
  height: 84px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #7b8a82, #c9d1cc 45%, #56645c);
  box-shadow: 0 0 0 1px rgba(13, 33, 24, 0.12);
}
.hm-dep-rod::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -5px;
  width: 14px;
  height: 6px;
  border-radius: 2px;
  background: #3b4a42;
}
.hm-dep-rod-l { left: 16%; }
.hm-dep-rod-r { right: 16%; }

.hm-dep-screw {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, rgba(0,0,0,0.55) 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 35%, #d8dcd9, #7d8782 70%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.hm-dep-screw-tl { top: 4px; left: 4px; }
.hm-dep-screw-tr { top: 4px; right: 4px; }
.hm-dep-screw-bl { bottom: 4px; left: 4px; }
.hm-dep-screw-br { bottom: 4px; right: 4px; }

/* ---------- gold sign ---------- */
.hm-dep-sign {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #dcbe72 0%, var(--ag-gold-500) 55%, #b8964c 100%);
  color: var(--ag-green-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
/* metallic glint crossing the sign */
.hm-dep-sign::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-140%) skewX(-20deg);
  animation: hm-glint 7s 1.5s ease-in-out infinite;
}
@keyframes hm-glint {
  0%        { transform: translateX(-140%) skewX(-20deg); }
  30%, 100% { transform: translateX(600%) skewX(-20deg); }
}
.hm-dep-sign-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  background: var(--ag-green-900);
  color: var(--ag-gold-400);
}
.hm-dep-sign-icon svg { animation: hm-takeoff 4.5s var(--hm-ease) infinite; }
@keyframes hm-takeoff {
  0%, 55%  { transform: translate(0, 0); opacity: 1; }
  75%      { transform: translate(14px, -10px); opacity: 0; }
  76%      { transform: translate(-14px, 6px); opacity: 0; }
  100%     { transform: translate(0, 0); opacity: 1; }
}
.hm-dep-sign-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-dep-sign-word {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
}
.hm-dep-sign-sub {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-dep-clock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border-radius: 6px;
  background: var(--ag-green-900);
}
.hm-dep-clock span {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 3px;
  background: linear-gradient(180deg, #26483a 0 50%, #163327 50% 100%);
  color: var(--ag-gold-400);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.hm-dep-clock span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: rgba(0, 0, 0, 0.6);
}
.hm-dep-clock span.hm-dep-clock-colon {
  width: 8px;
  background: none;
  color: var(--ag-gold-500);
  animation: hm-blink 1s steps(2, jump-none) infinite;
}
@keyframes hm-blink { 50% { opacity: 0.2; } }
.hm-dep-clock span.hm-dep-clock-colon::after { display: none; }
.hm-dep-clock span.is-flip { animation: hm-clock-flip .32s var(--hm-ease); }
@keyframes hm-clock-flip {
  0%   { transform: rotateX(80deg); filter: brightness(.5); }
  100% { transform: rotateX(0deg);  filter: brightness(1); }
}

/* ---------- panel ---------- */
.hm-dep-panel {
  position: relative;
  padding: clamp(14px, 2vw, 24px) clamp(12px, 2vw, 24px) 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    linear-gradient(170deg, #11281f 0%, #0a1c15 60%, #07150f 100%);
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(201, 168, 92, 0.16);
  overflow: hidden;
}
/* light sweep across the glass every few seconds */
.hm-dep-panel::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 30%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.07) 55%, transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: hm-sweep 9s 2s ease-in-out infinite;
}
@keyframes hm-sweep {
  0%        { transform: translateX(-120%) skewX(-18deg); }
  35%, 100% { transform: translateX(420%) skewX(-18deg); }
}
/* glass sheen across the whole face */
.hm-dep-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.0) 32%, rgba(255,255,255,0.0) 70%, rgba(255,255,255,0.03) 100%);
}

.hm-dep-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hm-dep-scroll::-webkit-scrollbar { display: none; }

.hm-dep-cols,
.hm-dep-row {
  display: flex;
  gap: var(--dep-colgap);
  align-items: center;
  min-width: max-content;
}
.hm-dep-cols {
  padding: 0 12px 10px;
  border-bottom: 1px solid rgba(201, 168, 92, 0.22);
  margin-bottom: 10px;
}
.hm-dep-cols span {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ag-gold-400);
  white-space: nowrap;
  overflow: hidden;
}

/* ---------- rows ---------- */
.hm-dep-row {
  position: relative;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .3s var(--hm-ease);
}
.hm-dep-row:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.hm-dep-row + .hm-dep-row { margin-top: var(--dep-gap); }
.hm-dep-row:hover,
.hm-dep-row:focus-visible { background: rgba(201, 168, 92, 0.10); }
.hm-dep-row:focus-visible { outline: 2px solid var(--ag-gold-500); outline-offset: -2px; }
.hm-dep-row::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--ag-gold-500);
  transform: scaleY(0);
  transition: transform .3s var(--hm-ease);
}
.hm-dep-row:hover::before,
.hm-dep-row:focus-visible::before { transform: scaleY(1); }
/* top three rows get a faint gold wash, the leaderboard */
.hm-dep-row:nth-child(-n+3) .hm-dep-field-rank .hm-dep-cell { color: #f0d58f; }

.hm-dep-field { display: flex; gap: var(--dep-gap); }

/* ---------- flap cell ---------- */
.hm-dep-cell {
  position: relative;
  width: var(--dep-cw);
  height: var(--dep-ch);
  perspective: 220px;
  background: #030a07;
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--dep-ch) * 0.56);
  font-variant-numeric: tabular-nums;
  color: var(--hm-ivory);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.55);
}
/* hinge pins either side of the split, the detail that sells it */
.hm-dep-cell::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: -1px;
  right: -1px;
  top: calc(50% - 1.5px);
  height: 3px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #56645c 0 2px,
      transparent 2px calc(100% - 2px),
      #56645c calc(100% - 2px) 100%);
}
.hm-dep-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50% - 1px);
  overflow: hidden;
  backface-visibility: hidden;
}
.hm-dep-top, .hm-dep-fliptop {
  top: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #2b4d3f, #1d3c2f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.hm-dep-bot, .hm-dep-flipbot {
  bottom: 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #183629, #0f271d);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.hm-dep-ch {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--dep-ch);
  line-height: var(--dep-ch);
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.hm-dep-bot .hm-dep-ch,
.hm-dep-flipbot .hm-dep-ch { top: calc(var(--dep-ch) * -0.5); }

.hm-dep-fliptop, .hm-dep-flipbot { z-index: 2; opacity: 0; }
.hm-dep-fliptop { transform-origin: bottom center; }
.hm-dep-flipbot { transform-origin: top center; }

.hm-dep-cell.is-flipping .hm-dep-fliptop {
  opacity: 1;
  animation: hm-dep-fall calc(var(--dep-dur) / 2) linear forwards;
}
.hm-dep-cell.is-flipping .hm-dep-flipbot {
  opacity: 1;
  animation: hm-dep-land calc(var(--dep-dur) / 2) linear calc(var(--dep-dur) / 2) both;
}
@keyframes hm-dep-fall {
  from { transform: rotateX(0deg);   filter: brightness(1); }
  to   { transform: rotateX(-90deg); filter: brightness(.45); }
}
@keyframes hm-dep-land {
  from { transform: rotateX(90deg); filter: brightness(.45); }
  to   { transform: rotateX(0deg);  filter: brightness(1); }
}

.hm-dep-field-rank .hm-dep-cell,
.hm-dep-field-readers .hm-dep-cell { color: var(--ag-gold-400); }
.hm-dep-field-region .hm-dep-cell { color: rgba(243, 236, 220, 0.6); }

/* ---------- plain fallback (RTL languages) ---------- */
.hm-dep-plain { list-style: none; margin: 0; padding: 0; }
.hm-dep-plain li + li { border-top: 1px solid rgba(201, 168, 92, 0.15); }
.hm-dep-plain a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 10px;
  text-decoration: none;
  color: var(--hm-ivory);
  font-weight: 600;
}
.hm-dep-plain a:hover { background: rgba(201, 168, 92, 0.08); }
.hm-dep-plain .hm-dep-plain-rank { color: var(--ag-gold-400); font-weight: 800; min-width: 2ch; }
.hm-dep-plain .hm-dep-plain-region { color: rgba(243, 236, 220, 0.55); font-size: 0.85rem; margin-inline-start: auto; }

/* ---------- foot ---------- */
.hm-dep-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(201, 168, 92, 0.18);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(243, 236, 220, 0.52);
}
.hm-dep-dot,
.hm-live-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fd49b;
  box-shadow: 0 0 0 0 rgba(127, 212, 155, 0.6);
  animation: hm-dep-pulse 2.4s ease-out infinite;
}
@keyframes hm-dep-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127, 212, 155, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(127, 212, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 212, 155, 0); }
}
.hm-dep-empty {
  padding: 26px 10px;
  margin: 0;
  color: rgba(243, 236, 220, 0.45);
  font-size: 0.85rem;
}
.hm-dep-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   7 · THE EXPEDITION  ·  curved film strip
   For each card JS measures d, its signed distance from the
   centre of the viewport in viewport widths, and writes the
   turn, the photo parallax and the dimmer straight onto the
   elements (custom properties here would restyle every card's
   whole subtree on every frame).
   ============================================================ */
.hm-exp {
  --card-w: clamp(300px, 30vw, 440px);
  z-index: 2;
  background:
    radial-gradient(70% 55% at 75% 20%, rgba(46, 107, 74, 0.38), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(201, 168, 92, 0.10), transparent 70%),
    var(--ag-green-900);
}
.hm-exp-sticky {
  position: sticky;
  z-index: 1;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 0 var(--hm-sheet);
}

/* giant outlined name of the stop in the centre, behind the strip */
.hm-exp-word {
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}
.hm-exp-word span {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(6rem, 21vw, 21rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 168, 92, 0.24);
  transition: opacity .3s var(--hm-ease), transform .6s var(--hm-ease), filter .3s;
}
.hm-exp-word span.is-swap { opacity: 0; transform: translateY(14%) scale(0.96); filter: blur(8px); }

.hm-exp-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(20px, 4vw, 48px);
  margin-bottom: clamp(18px, 3.6vh, 40px);
}
.hm-exp-label { margin-bottom: 10px; }
.hm-exp-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  margin: 0;
}
.hm-exp-title em { font-style: italic; font-weight: 600; color: var(--ag-gold-400); }

.hm-exp-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  color: #fff;
  white-space: nowrap;
}
.hm-exp-count-cur {
  display: inline-block;
  height: 1.05em;
  overflow: hidden;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
}
.hm-exp-count-cur span {
  display: inline-block;
  transition: transform .45s var(--hm-ease), opacity .3s;
}
.hm-exp-count-cur span.is-swap { transform: translateY(-100%); opacity: 0; }
.hm-exp-count-tot { font-style: italic; font-size: 1.05rem; color: rgba(255, 255, 255, 0.5); }

.hm-exp-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(18px, 2.2vw, 30px);
  padding: 0 calc(50vw - var(--card-w) / 2);
  will-change: transform;
}

.hm-exp-card {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: var(--card-w);
  height: min(52vh, 500px);
  text-decoration: none;
  will-change: transform;
}
.hm-exp-card:focus-visible { outline: none; }
.hm-exp-card:focus-visible .hm-exp-card-in { outline: 2px solid var(--ag-gold-400); outline-offset: 4px; }

.hm-exp-card-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ag-green-800);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.8);
  transition: translate .7s var(--hm-ease), box-shadow .7s var(--hm-ease);
}
/* hairline frame above the photo */
.hm-exp-card-in::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: box-shadow .5s;
}
/* cards away from the centre sink into the dark (JS adds it) */
.hm-exp-dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--hm-deep);
  opacity: 0;
  will-change: opacity;
}
.hm-exp-card:hover .hm-exp-card-in { translate: 0 -12px; box-shadow: 0 50px 80px -36px rgba(0, 0, 0, 0.85); }
.hm-exp-card:hover .hm-exp-card-in::before { box-shadow: inset 0 0 0 1px rgba(201, 168, 92, 0.55); }

.hm-exp-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hm-exp-media img {
  position: absolute;
  top: 0;
  left: -12%;
  width: 124%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  will-change: transform;
  transition: scale 1.2s var(--hm-ease), filter .8s;
}
.hm-exp-card:hover .hm-exp-media img { scale: 1.08; filter: saturate(1.05); }

.hm-exp-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(13,33,24,0.94) 0%, rgba(13,33,24,0.35) 48%, rgba(13,33,24,0.0) 75%),
    linear-gradient(180deg, rgba(13,33,24,0.35) 0%, transparent 25%);
}

/* postmark: rotating ring of text around the country code */
.hm-exp-post {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  color: rgba(243, 236, 220, 0.88);
  transition: color .4s, transform .6s var(--hm-spring);
}
.hm-exp-post svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: hm-spin 22s linear infinite paused;
}
/* only the stop in the centre (and the hovered one) spins */
.hm-exp-card.is-active .hm-exp-post svg,
.hm-exp-card:hover .hm-exp-post svg { animation-play-state: running; }
.hm-exp-post text {
  fill: currentColor;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.hm-exp-post b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: rgba(13, 33, 24, 0.45);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.hm-exp-card:hover .hm-exp-post { color: var(--ag-gold-400); transform: scale(1.08) rotate(-8deg); }

.hm-exp-meta { position: relative; z-index: 2; width: 100%; padding: 28px; }
.hm-exp-stop {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ag-gold-400);
  margin-bottom: 8px;
}
.hm-exp-meta h3 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 3.3rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.035em;
  margin: 0 0 10px;
  line-height: 0.95;
}
.hm-exp-meta p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.65;
  margin: 0 0 16px;
  max-width: 40ch;
}
.hm-exp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ag-gold-400);
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--hm-ease);
}
.hm-exp-card:hover .hm-exp-cta,
.hm-exp-card:focus-visible .hm-exp-cta { background-size: 100% 1px; }

/* final card: 190+ with a ticker of names drifting behind */
.hm-exp-card-final .hm-exp-card-in {
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(70% 55% at 50% 60%, rgba(201, 168, 92, 0.2), transparent 70%),
    linear-gradient(160deg, var(--ag-green-800), #081a12);
}
.hm-exp-ticker {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  display: flex;
  justify-content: space-around;
  gap: 18px;
  transform: rotate(-10deg);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hm-exp-ticker-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: hm-tick 26s linear infinite;
}
.hm-exp-ticker-col:nth-child(2) { animation-duration: 34s; animation-direction: reverse; }
.hm-exp-ticker-col:nth-child(3) { animation-duration: 30s; }
.hm-exp-ticker-col span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(243, 236, 220, 0.16);
  white-space: nowrap;
}
@keyframes hm-tick { to { transform: translateY(-50%); } }

.hm-exp-final-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px;
}
.hm-exp-final-num {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ag-gold-400);
  line-height: 0.9;
  text-shadow: 0 0 40px rgba(201, 168, 92, 0.45);
}
.hm-exp-final-count { font-size: clamp(5rem, 9vw, 8rem); letter-spacing: -0.04em; }
.hm-exp-final-plus  { font-size: clamp(2rem, 3vw, 3rem); margin-top: 0.2em; }
.hm-exp-final-inner p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.66); margin: 8px 0 20px; }
.hm-exp-card-final .hm-btn-gold::before { background: var(--hm-ivory); }
.hm-exp-card-final:hover .hm-btn-gold { color: var(--ag-green-900); }
.hm-exp-card-final:hover .hm-btn-gold::before { transform: translateY(0); }

/* route timeline under the strip */
.hm-exp-route {
  --p: 0;
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 2 * clamp(20px, 4vw, 48px)));
  margin: clamp(22px, 4.4vh, 46px) auto 0;
  height: 40px;
}
.hm-exp-route-line {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 6px;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.28) 50%, transparent 50%);
  background-size: 8px 1px;
}
.hm-exp-route-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5px;
  height: 2px;
  background: var(--ag-gold-500);
  transform-origin: left;
  transform: scaleX(var(--p));
  box-shadow: 0 0 10px rgba(201, 168, 92, 0.6);
  will-change: transform;
}
.hm-exp-route-run {
  position: absolute;
  top: -2px;
  left: 24px;
  right: 24px;
  height: 18px;
  pointer-events: none;
  transform: translateX(calc(var(--p) * 100%));
  will-change: transform;
}
.hm-exp-route-plane {
  position: absolute;
  top: 0;
  left: -9px;
  width: 18px;
  height: 18px;
  color: var(--ag-gold-400);
  filter: drop-shadow(0 0 6px rgba(201, 168, 92, 0.8));
}
.hm-exp-route-plane svg { display: block; width: 18px; height: 18px; transform: rotate(90deg); }
.hm-exp-route-stops {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-exp-route-stops li {
  position: relative;
  width: 48px;
  padding-top: 22px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.36);
  transition: color .4s;
}
.hm-exp-route-stops li::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--ag-green-900);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .5s var(--hm-spring);
}
.hm-exp-route-stops li.is-on { color: rgba(243, 236, 220, 0.75); }
.hm-exp-route-stops li.is-on::before { background: var(--ag-gold-500); border-color: var(--ag-gold-500); }
.hm-exp-route-stops li.is-here { color: var(--ag-gold-400); }
.hm-exp-route-stops li.is-here::before { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(201, 168, 92, 0.2); }


/* ============================================================
   8 · THE BRIEFING  ·  questions routed to tools
   ============================================================ */
.hm-brief {
  z-index: 3;
  background: var(--ag-parchment);
  padding: clamp(110px, 16vh, 170px) 0 clamp(70px, 10vh, 110px);
}
.hm-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.hm-brief-intro {
  position: sticky;
  top: 110px;
  padding-top: 24px;
  border-top: 2px solid var(--ag-green-900);
}
.hm-brief-intro .hm-sec-title { margin-bottom: 22px; }
.hm-brief-intro > p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ag-ink-mid);
  margin: 0 0 40px;
  max-width: 42ch;
}

/* stats: three odometers */
.hm-brief-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hm-hair-strong);
}
.hm-ledger-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 14px 4px 0;
}
.hm-ledger-item + .hm-ledger-item { padding-left: 18px; border-left: 1px solid var(--hm-hair); }
.hm-ledger-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ag-green-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hm-ledger-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ag-ink-mid);
}

/* odometer digits, built by JS from data-odo */
.hm-odo { --odo-h: 1.24em; display: inline-flex; align-items: flex-start; }
.hm-odo-col {
  display: inline-block;
  height: var(--odo-h);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.hm-odo-strip {
  display: flex;
  flex-direction: column;
  transition: transform 2.2s cubic-bezier(0.2, 0.9, 0.1, 1) calc(var(--k, 0) * 140ms);
}
.hm-odo-strip span { display: block; height: var(--odo-h); line-height: var(--odo-h); text-align: center; }
.is-on > .hm-odo .hm-odo-strip { transform: translateY(calc(var(--to) * var(--odo-h) * -1)); }
.hm-odo-suffix { line-height: var(--odo-h); color: var(--ag-gold-700); }

/* the question list */
.hm-brief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ag-green-900);
}
.hm-brief-list li { border-bottom: 1px solid var(--hm-hair-strong); }
.hm-q {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(14px, 2vw, 26px);
  padding: 30px 18px 30px 16px;
  margin: 6px -16px;
  text-decoration: none;
  isolation: isolate;
  transition: opacity .5s var(--hm-ease);
}
/* dark panel wipes open from the middle */
.hm-q::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 18px;
  background:
    radial-gradient(60% 120% at 100% 50%, rgba(201, 168, 92, 0.18), transparent 70%),
    var(--ag-green-900);
  clip-path: inset(50% 0 50% 0 round 18px);
  transition: clip-path .6s var(--hm-ease);
}
.hm-q:hover::before,
.hm-q:focus-visible::before { clip-path: inset(0 0 0 0 round 18px); }
.hm-q:focus-visible { outline: none; }
.hm-q:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  border: 2px solid var(--ag-gold-500);
}

.hm-q-num {
  align-self: start;
  padding-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ag-gold-700);
  transition: color .4s;
}
.hm-q-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  transition: transform .6s var(--hm-ease);
}
.hm-q-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ag-green-800);
  padding: 4px 11px;
  border: 1px solid var(--hm-hair-strong);
  border-radius: var(--hm-radius-pill);
  background: var(--hm-paper);
  white-space: nowrap;
  transition: background .4s, color .4s, border-color .4s;
}
.hm-q-text {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ag-ink);
  transition: color .4s;
}
.hm-q-tool {
  font-size: 0.84rem;
  color: var(--ag-ink-light);
  transition: color .4s;
}
.hm-q-go {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--hm-hair-strong);
  color: var(--ag-green-800);
  transition: background .4s, border-color .4s, color .4s, transform .6s var(--hm-spring);
}
.hm-q-go svg { width: 20px; height: 20px; transform: rotate(-45deg); transition: transform .6s var(--hm-ease); }

.hm-q:hover .hm-q-body,
.hm-q:focus-visible .hm-q-body { transform: translateX(10px); }
.hm-q:hover .hm-q-num,
.hm-q:focus-visible .hm-q-num { color: var(--ag-gold-400); }
.hm-q:hover .hm-q-tag,
.hm-q:focus-visible .hm-q-tag { background: var(--ag-gold-500); border-color: var(--ag-gold-500); color: var(--ag-green-900); }
.hm-q:hover .hm-q-text,
.hm-q:focus-visible .hm-q-text { color: #fff; }
.hm-q:hover .hm-q-tool,
.hm-q:focus-visible .hm-q-tool { color: var(--ag-gold-400); }
.hm-q:hover .hm-q-go,
.hm-q:focus-visible .hm-q-go { background: var(--ag-gold-500); border-color: var(--ag-gold-500); color: var(--ag-green-900); transform: scale(1.08); }
.hm-q:hover .hm-q-go svg,
.hm-q:focus-visible .hm-q-go svg { transform: rotate(0deg); }

/* reading focus: the question nearest the middle of the
   screen stays bright, the rest step back (JS adds the classes) */
.hm-brief-list.is-live .hm-q { opacity: 0.42; }
.hm-brief-list.is-live .hm-q.is-focus,
.hm-brief-list .hm-q:focus-visible { opacity: 1; }
@media (hover: hover) {
  .hm-brief-list.is-live:hover .hm-q { opacity: 0.42; }
  .hm-brief-list.is-live:hover .hm-q:hover { opacity: 1; }
}

/* ============================================================
   9 · FIELD KIT  ·  bento with a travelling spotlight
   JS writes --mx/--my (pointer position inside each tile), so
   one glow runs across the fills and borders of every tile.
   ============================================================ */
.hm-kit {
  position: relative;
  background: var(--ag-parchment);
  padding: clamp(60px, 9vh, 110px) 0 calc(clamp(80px, 11vh, 120px) + var(--hm-sheet));
}
.hm-kit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "quiz quiz cmp  cmp"
    "quiz quiz can  scam"
    "road vax  fly  fly";
  gap: 14px;
}
.hm-kit-quiz { grid-area: quiz; }
.hm-kit-cmp  { grid-area: cmp; }
.hm-kit-can  { grid-area: can; }
.hm-kit-scam { grid-area: scam; }
.hm-kit-road { grid-area: road; }
.hm-kit-vax  { grid-area: vax; }
.hm-kit-fly  { grid-area: fly; }

.hm-kit-card {
  --mx: -999px;
  --my: -999px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 26px;
  overflow: hidden;
  isolation: isolate;
  background: var(--hm-paper);
  border: 1px solid var(--hm-hair);
  border-radius: 20px;
  text-decoration: none;
  transition: translate .5s var(--hm-ease), box-shadow .5s var(--hm-ease), transform .7s var(--hm-ease);
}
.hm-kit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(440px circle at var(--mx) var(--my), rgba(201, 168, 92, 0.15), transparent 45%);
  opacity: 0;
  transition: opacity .5s;
}
.hm-kit-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(201, 168, 92, 0.95), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .5s;
}
.hm-kit-grid:hover .hm-kit-card::before,
.hm-kit-grid:hover .hm-kit-card::after { opacity: 1; }
.hm-kit-card:hover { translate: 0 -5px; box-shadow: 0 30px 60px -34px rgba(13, 33, 24, 0.45); }
.hm-kit-card:focus-visible { outline: 2px solid var(--ag-gold-500); outline-offset: 3px; }
.hm-kit-card.is-tilting { transition: translate .5s var(--hm-ease), box-shadow .5s var(--hm-ease), transform .12s linear; }

.hm-kit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  color: var(--ag-green-800);
  background: var(--ag-green-50);
  border: 1px solid var(--ag-green-100);
  transition: color .4s, background .4s, border-color .4s, transform .6s var(--hm-spring);
}
.hm-kit-icon svg { width: 24px; height: 24px; overflow: visible; }
.hm-kit-card:hover .hm-kit-icon {
  color: var(--ag-gold-400);
  background: var(--ag-green-900);
  border-color: var(--ag-green-900);
  transform: rotate(-6deg) scale(1.06);
}
.hm-kit-card strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ag-ink);
  letter-spacing: -0.01em;
}
.hm-kit-desc {
  font-size: 0.87rem;
  color: var(--ag-ink-light);
  line-height: 1.6;
  max-width: 44ch;
}

/* content always above decorative svgs */
.hm-kit-card .hm-kit-icon,
.hm-kit-card strong,
.hm-kit-card .hm-kit-desc,
.hm-kit-card .hm-kit-go { position: relative; z-index: 1; }

/* icon micro-animations, played while the tile is hovered */
.hm-ic-part { transform-box: fill-box; transform-origin: center; }
.hm-kit-card:hover .hm-ic-beam   { animation: hm-ic-tip 1.6s ease-in-out infinite; transform-origin: 50% 0; }
.hm-kit-card:hover .hm-ic-q      { animation: hm-ic-bob 1s ease-in-out infinite; }
.hm-kit-card:hover .hm-ic-alert  { animation: hm-blink 0.9s steps(2, jump-none) infinite; }
.hm-kit-card:hover .hm-ic-dash   { animation: hm-ic-road .6s linear infinite; }
.hm-kit-card:hover .hm-ic-plunge { animation: hm-ic-push 1.2s ease-in-out infinite; }
.hm-kit-card:hover .hm-ic-needle { animation: hm-ic-wobble 1.8s ease-in-out infinite; }
.hm-kit-card:hover .hm-ic-jet    { animation: hm-ic-fly 1.4s ease-in-out infinite; }
@keyframes hm-ic-tip    { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes hm-ic-bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes hm-ic-road   { to { stroke-dashoffset: -8; } }
@keyframes hm-ic-push   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, 2px); } }
@keyframes hm-ic-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-35deg); } 60% { transform: rotate(20deg); } 80% { transform: rotate(-8deg); } }
@keyframes hm-ic-fly    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -1px); } }

/* the quiz: the one big dark tile, tilts toward the pointer */
.hm-kit-quiz {
  justify-content: flex-end;
  min-height: 420px;
  padding: 36px;
  border-radius: 26px;
  border-color: transparent;
  background:
    radial-gradient(70% 60% at 85% 95%, rgba(201, 168, 92, 0.24), transparent 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(46, 107, 74, 0.55), transparent 70%),
    var(--ag-green-900);
}
.hm-kit-quiz::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(201, 168, 92, 0.22), transparent 50%); }
/* dotted latitude texture */
.hm-kit-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(243, 236, 220, 0.16) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(80% 70% at 20% 100%, #000, transparent 70%);
          mask-image: radial-gradient(80% 70% at 20% 100%, #000, transparent 70%);
}
.hm-kit-quiz .hm-kit-icon {
  color: var(--ag-green-900);
  background: var(--ag-gold-500);
  border-color: var(--ag-gold-500);
}
.hm-kit-quiz:hover .hm-kit-icon { color: var(--ag-green-900); background: var(--ag-gold-400); border-color: var(--ag-gold-400); }
.hm-kit-quiz strong {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 13ch;
}
.hm-kit-quiz .hm-kit-desc { color: rgba(255, 255, 255, 0.68); font-size: 0.96rem; max-width: 40ch; }
.hm-kit-go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 26px;
  border-radius: var(--hm-radius-pill);
  background: var(--ag-gold-500);
  color: var(--ag-green-900);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 14px 30px -14px rgba(201, 168, 92, 0.8);
  transition: background .3s, gap .4s var(--hm-ease);
}
.hm-kit-quiz:hover .hm-kit-go { background: var(--ag-gold-400); gap: 14px; }
.hm-kit-rose {
  position: absolute;
  top: -70px;
  right: -70px;
  width: min(400px, 72%);
  height: auto;
  color: var(--ag-gold-500);
  opacity: 0.3;
  pointer-events: none;
  animation: hm-spin 80s linear infinite;
  transition: opacity .6s;
}
.hm-kit-quiz:hover .hm-kit-rose { opacity: 0.45; }
.hm-kit-rose .hm-ic-needle { transform-box: view-box; transform-origin: 100px 100px; }

/* compare and flights: wide tiles lay out horizontally */
.hm-kit-cmp,
.hm-kit-fly {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 4px;
  align-content: center;
  align-items: start;
}
.hm-kit-cmp .hm-kit-icon,
.hm-kit-fly .hm-kit-icon { grid-row: 1 / 3; margin-bottom: 0; }
.hm-kit-cmp {
  background:
    linear-gradient(90deg, rgba(46, 107, 74, 0.06) 0 50%, rgba(201, 168, 92, 0.08) 50% 100%),
    var(--hm-paper);
}
.hm-kit-fly {
  background:
    linear-gradient(135deg, rgba(201, 168, 92, 0.12), transparent 60%),
    var(--hm-paper);
}
.hm-kit-arc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 82%;
  color: var(--ag-gold-500);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity .3s;
}
.hm-kit-arc path { animation: hm-arc-run 2.4s linear infinite; }
.hm-kit-fly:hover .hm-kit-arc { opacity: 0.95; }
@keyframes hm-arc-run { to { stroke-dashoffset: -60; } }

/* ============================================================
   10 · MORE WAYS IN  ·  boarding passes on the dark sheet
   ============================================================ */
.hm-dispatch {
  z-index: 4;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(46, 107, 74, 0.4), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(201, 168, 92, 0.12), transparent 70%),
    var(--ag-green-900);
  padding: clamp(110px, 16vh, 170px) 0 calc(clamp(120px, 17vh, 180px) + var(--hm-sheet));
}
.hm-dispatch > .hm-container { position: relative; z-index: 1; }

/* giant outline line that slides sideways with the scroll (--p) */
.hm-dispatch-word {
  --p: 0.5;
  position: absolute;
  left: 0;
  top: 62%;
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(7rem, 17vw, 16rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 168, 92, 0.16);
  transform: translate3d(calc(var(--p) * -38%), -50%, 0);
  will-change: transform;
}

.hm-dispatch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.hm-ticket {
  --notch: 12px;
  --stub-w: 82px;
  --tx: 50%;
  --ty: 50%;
  position: relative;
  display: grid;
  grid-template-columns: var(--stub-w) 1fr;
  min-height: 320px;
  text-decoration: none;
  border-radius: 16px;
  background: linear-gradient(180deg, #fdf9ef, var(--ag-parchment));
  color: var(--ag-ink);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.7);
  /* notches punched at the perforation, top and bottom */
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--stub-w) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub-w) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at var(--stub-w) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub-w) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  transition: translate .5s var(--hm-ease), transform .8s var(--hm-ease);
}
.hm-ticket:hover { translate: 0 -6px; }
.hm-ticket.is-tilting { transition: translate .5s var(--hm-ease), transform .12s linear; }
.hm-ticket:focus-visible { outline: 2px solid var(--ag-gold-400); outline-offset: 4px; }

.hm-ticket-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 0 22px;
  background: linear-gradient(180deg, #d9bb70, var(--ag-gold-500) 50%, #bf9d52);
  color: var(--ag-green-900);
  border-radius: 16px 0 0 16px;
}
.hm-ticket-stub::after {
  content: '';
  position: absolute;
  top: calc(var(--notch) + 4px);
  bottom: calc(var(--notch) + 4px);
  right: 0;
  border-right: 2px dashed rgba(26, 58, 43, 0.35);
}
.hm-ticket-stub svg { width: 30px; height: 30px; transition: transform .6s var(--hm-spring); }
.hm-ticket:hover .hm-ticket-stub svg { transform: scale(1.15) rotate(-8deg); }
.hm-ticket-code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.34em;
}
.hm-ticket-bars {
  width: 34px;
  height: 66px;
  opacity: 0.85;
  background:
    repeating-linear-gradient(0deg,
      var(--ag-green-900) 0 2px, transparent 2px 4px,
      var(--ag-green-900) 4px 5px, transparent 5px 8px,
      var(--ag-green-900) 8px 11px, transparent 11px 12px,
      var(--ag-green-900) 12px 13px, transparent 13px 16px);
}

.hm-ticket-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 24px 28px;
  min-width: 0;
}
.hm-ticket-route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--hm-hair-strong);
}
.hm-ticket-route > span:not(.hm-ticket-path) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ag-green-900);
}
.hm-ticket-route small {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ag-ink-light);
}
.hm-ticket-route > span:last-child { text-align: right; align-items: flex-end; }
.hm-ticket-path {
  position: relative;
  flex: 1;
  height: 1px;
  margin-top: 14px;
  background-image: linear-gradient(90deg, rgba(26, 58, 43, 0.4) 50%, transparent 50%);
  background-size: 6px 1px;
}
.hm-ticket-path svg {
  position: absolute;
  top: -9px;
  left: 0;
  width: 18px;
  height: 18px;
  color: var(--ag-gold-700);
  transform: translateX(-50%) rotate(90deg);
  transition: left 1.1s var(--hm-ease);
}
.hm-ticket:hover .hm-ticket-path svg { left: 100%; }

.hm-ticket-body h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ag-ink);
  margin: 4px 0 0;
  letter-spacing: -0.02em;
}
.hm-ticket-body p {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ag-ink-mid);
}
.hm-ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hm-ticket-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ag-green-800);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ag-gold-500);
  transition: color .3s;
}
.hm-ticket:hover .hm-ticket-cta { color: var(--ag-gold-700); }
.hm-ticket-gate {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ag-ink-light);
}
/* foil shine that follows the pointer (--tx/--ty from JS) */
.hm-ticket-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(320px circle at var(--tx) var(--ty), rgba(255, 255, 255, 0.5), transparent 55%),
    linear-gradient(115deg, transparent 20%, rgba(201, 168, 92, 0.22) 40%, rgba(127, 212, 155, 0.14) 50%, rgba(201, 168, 92, 0.22) 60%, transparent 80%);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, var(--tx) var(--ty);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .5s;
}
.hm-ticket:hover .hm-ticket-shine { opacity: 1; }

.hm-dispatch-grid.rv-kids.in > * { animation-name: hm-deal; animation-duration: 1.1s; }
@keyframes hm-deal {
  from { opacity: 0; transform: translateY(80px) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   11 · CLOSING  ·  the globe
   ============================================================ */
.hm-closing {
  z-index: 5;
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 78% 50%, rgba(201, 168, 92, 0.18), transparent 70%),
    var(--ag-parchment);
  padding: clamp(100px, 14vh, 160px) 0 clamp(90px, 12vh, 140px);
}
.hm-closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
}
.hm-closing-inner { position: relative; max-width: 560px; }
.hm-closing h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ag-ink);
  margin: 0 0 22px;
  line-height: 1;
}
.hm-closing p {
  font-size: 1.05rem;
  color: var(--ag-ink-mid);
  line-height: 1.8;
  margin: 0 0 36px;
  max-width: 46ch;
}
.hm-closing-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hm-globe {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  justify-self: center;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
}
.hm-globe.is-drag { cursor: grabbing; }
.hm-globe canvas { display: block; width: 100%; height: 100%; }
.hm-globe::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4%;
  height: 22px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 33, 24, 0.22), transparent);
}
.hm-globe-hint {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ag-ink-light);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s;
}
.hm-globe-hint::before,
.hm-globe-hint::after { content: ''; width: 22px; height: 1px; background: var(--ag-gold-500); }
.hm-globe.is-drag .hm-globe-hint { opacity: 0; }

/* ============================================================
   12 · RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hm-kit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "quiz quiz"
      "cmp  cmp"
      "can  scam"
      "road vax"
      "fly  fly";
  }
  .hm-kit-quiz { min-height: 340px; }
  .hm-dispatch-grid { grid-template-columns: 1fr; max-width: 660px; margin: 0 auto; }
  .hm-ticket { min-height: 0; }
}

@media (max-width: 900px) {
  /* hero */
  .hm-hero-core { padding: 124px 20px 128px; }
  .hm-plate-label-tr { display: none; }

  /* expedition: native swipe strip, snap to centre */
  .hm-exp { --card-w: min(78vw, 380px); height: auto !important; padding: 84px 0 calc(64px + var(--hm-sheet)); }
  .hm-exp-sticky { position: static; height: auto; overflow: visible; padding: 0; }
  .hm-exp-word { top: 52%; }
  .hm-exp-word span { font-size: 34vw; }
  .hm-exp-track {
    overflow-x: auto;
    transform: none !important;
    scroll-snap-type: x mandatory;
    padding-top: 6px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hm-exp-track::-webkit-scrollbar { display: none; }
  .hm-exp-card { height: 460px; scroll-snap-align: center; will-change: auto; }
  .hm-exp-head { align-items: flex-end; }
  .hm-exp-route { margin-top: 18px; }

  .hm-brief-grid { grid-template-columns: 1fr; }
  .hm-brief-intro { position: static; }

  .hm-dep-head { margin-bottom: 84px; }
  .hm-dep-rod { height: 60px; }

  .hm-closing-grid { grid-template-columns: 1fr; text-align: center; }
  .hm-closing-inner { margin: 0 auto; }
  .hm-closing p { margin-left: auto; margin-right: auto; }
  .hm-closing-actions { justify-content: center; }
  .hm-closing .hm-sec-label { justify-content: center; }
  .hm-globe { order: -1; max-width: 460px; margin-bottom: -10px; }
}

@media (max-width: 640px) {
  /* hero */
  .hm-hero-core { padding: 112px 18px 120px; }
  .hm-hero-kicker { font-size: 0.58rem; gap: 10px; margin-bottom: 20px; }
  .hm-kicker-line { width: 22px; }
  .hm-hero-title { font-size: clamp(2.6rem, 12vw, 4.2rem); margin-bottom: 20px; }
  .hm-hero-lede { font-size: 0.9rem; line-height: 1.7; margin-bottom: 26px; }

  .hm-search-field { padding: 6px 6px 6px 16px; }
  .hm-search-btn { padding: 12px 16px; font-size: 0.84rem; }
  .hm-search-input { font-size: 16px; }
  .hm-hero-alt { flex-direction: column; gap: 12px; }
  .hm-hero-alt-sep { display: none; }
  .hm-hero-picks { gap: 6px; margin-bottom: 20px; }
  .hm-hero-picks a { padding: 5px 11px; font-size: 0.76rem; }
  .hm-hero-picks a:nth-of-type(n+4) { display: none; }
  .hm-scroll-cue { display: none; }

  .hm-plate { inset: 70px 10px 10px; }
  .hm-plate-label-tl { display: none; }
  .hm-plate-label { font-size: 0.66rem; }
  .hm-plate-label-bl { left: 10px; bottom: 12px; }
  .hm-plate-label-br { right: 10px; bottom: 12px; }
  .hm-plate-place { font-size: 0.78rem; }

  /* v4 sections */
  .hm-ribbons { height: 170px; }
  .hm-ribbon-a { transform: translateY(-50%) rotate(-5deg); }
  .hm-ribbon-b { transform: translateY(-50%) rotate(4deg); }

  .hm-sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hm-sec-aside { padding-bottom: 0; }

  .hm-closing-actions .hm-btn-gold,
  .hm-closing-actions .hm-btn-ghost { width: 100%; justify-content: center; }

  .hm-dep { --dep-colgap: 7px; }
  .hm-dep-housing { padding: 8px; border-radius: 12px; }
  .hm-dep-sign { gap: 12px; padding: 10px; }
  .hm-dep-sign-icon { width: 38px; height: 38px; }
  .hm-dep-sign-sub { display: none; }
  .hm-dep-clock span { width: 19px; height: 28px; line-height: 28px; font-size: 0.95rem; }
  .hm-dep-panel { padding-inline: 8px; }
  .hm-dep-lede { font-size: 0.92rem; }
  .hm-dep-screw { display: none; }

  .hm-exp-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hm-exp-count-cur { font-size: 2.4rem; }
  .hm-exp-card { height: 430px; }
  .hm-exp-meta { padding: 22px; }
  .hm-exp-post { width: 76px; height: 76px; top: 14px; right: 14px; }
  .hm-exp-post b { width: 42px; height: 42px; font-size: 0.78rem; }
  .hm-exp-route-stops li { width: 34px; font-size: 0.56rem; letter-spacing: 0.08em; }
  .hm-exp-route-line,
  .hm-exp-route-run { left: 17px; right: 17px; }

  .hm-brief-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-ledger-item + .hm-ledger-item { padding-left: 12px; }
  .hm-q { grid-template-columns: minmax(0, 1fr) auto; padding: 24px 12px 24px 14px; margin: 4px -14px; }
  .hm-q-num { display: none; }
  .hm-q-go { width: 44px; height: 44px; }
  .hm-q:hover .hm-q-body,
  .hm-q:focus-visible .hm-q-body { transform: none; }

  .hm-kit-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "quiz" "cmp" "can" "scam" "road" "vax" "fly";
  }
  .hm-kit-quiz { padding: 28px 24px; min-height: 320px; }

  .hm-ticket { --stub-w: 62px; }
  .hm-ticket-body { padding: 22px 20px 22px 22px; }
  .hm-ticket-route > span:not(.hm-ticket-path) { font-size: 1.2rem; }
  .hm-ticket-bars { width: 26px; }
}

@media (max-width: 420px) {
  /* hero */
  .hm-hero-title { font-size: clamp(2.3rem, 13vw, 3.4rem); }
  .hm-hero-lede { max-width: 34ch; }
  .hm-search-btn { padding: 12px 14px; }
  .hm-search-btn-arrow { display: none; }

  .hm-brief-ledger { grid-template-columns: 1fr; }
  .hm-ledger-item { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hm-hair); }
  .hm-ledger-item + .hm-ledger-item { padding-left: 0; border-left: 0; }
}

/* ============================================================
   13 · REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* hero */
  .hm-ember,
  .hm-hero-grain,
  .hm-plate,
  .hm-plate-pin,
  .hm-hero-title em,
  .hm-scroll-cue i::after,
  .hm-search-field::before { animation: none !important; }
  .hm-tw > span { animation: none; transform: none; }
  .hm-hero-kicker, .hm-hero-lede, .hm-search, .hm-hero-picks, .hm-hero-alt, .hm-scroll-cue { animation: none; opacity: 1; }
  .hm-hero-core { transform: none !important; }

  /* v4 sections */
  .hm-js .hm-body .rv { opacity: 1; transform: none; transition: none; }
  .hm-js .rv-kids:not(.in) > *,
  .rv-kids.in > * { opacity: 1; animation: none; }
  .hm-sw > span { transform: none; transition: none; }
  .hm-js .rv:not(.in) .hm-sec-label::before { transform: none; }

  .hm-dep-beams::after,
  .hm-dep-sign::after,
  .hm-dep-sign-icon svg,
  .hm-dep-panel::before,
  .hm-dep-clock span.hm-dep-clock-colon,
  .hm-dep-dot,
  .hm-live-dot,
  .hm-dep-clock span.is-flip,
  .hm-exp-post svg,
  .hm-exp-ticker-col,
  .hm-kit-rose,
  .hm-kit-arc path,
  .hm-kit-card:hover .hm-ic-part,
  .hm-kit-card:hover .hm-ic-dash,
  .hm-kit-card:hover .hm-ic-needle { animation: none !important; }
  .hm-dep-panel::before { display: none; }

  .hm-dep-cell.is-flipping .hm-dep-fliptop,
  .hm-dep-cell.is-flipping .hm-dep-flipbot { animation: none; opacity: 0; }

  .hm-exp-card,
  .hm-exp-media img { transform: none !important; }
  .hm-exp-dim { display: none; }
  .hm-exp-word span,
  .hm-exp-count-cur span { transition: none; }
  .hm-odo-strip { transition: none; }
  .hm-q,
  .hm-q::before,
  .hm-q-body { transition: none; }
  .hm-brief-list.is-live .hm-q { opacity: 1; }
  .hm-dispatch-word { transform: translate3d(-15%, -50%, 0); }
  .hm-ticket-path svg { transition: none; }
}