/* ============================================================================
   TVLDays · Homepage
   Nine choreographed moments on a bone-dominant cream base.

   Phase 1 contract: every section is visually complete at rest. Reduced-motion
   users see this file forever. Motion code (Phase 2) uses gsap.set() to push
   elements to their pre-animation state before animating, so nothing here
   needs to accommodate motion primitives.

   Authoring rule: never hardcode a color or size. Consume tokens only.
   ========================================================================== */


/* ----------------------------------------------------------------------------
   §1 · Hero — brand-book composition
   Layout vocabulary: caps + italic-accent pairs · marquee outline stamp top-right ·
   giant TVL ghost watermark bottom-right · dotted rule along the top edge.
   ---------------------------------------------------------------------------- */
.hp-hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-items: center;
  padding-block: var(--s-10);
  overflow: hidden;
  isolation: isolate;          /* keep ghost watermark behind content */
}

/* Dotted rule across the top of the section — a row of marquee dots. */
.hp-hero__rule {
  position: absolute;
  top: var(--s-5);
  left: var(--gutter);
  right: var(--gutter);
  height: 6px;
  background-image: radial-gradient(circle, var(--marquee) 1.4px, transparent 1.6px);
  background-size: 14px 6px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

/* Brand stamp anchored to the top-right corner. Replaces the kicker. */
.hp-hero__stamp {
  position: absolute;
  top: calc(var(--nav-h) + var(--s-6));
  right: var(--gutter);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-soft);
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--marquee);
  border-radius: var(--r-sm);
  background: var(--bg);
  transform: rotate(2.5deg);
  transform-origin: 100% 0%;
  box-shadow: var(--shadow-sm);
}

.hp-hero__stamp .italic {
  font-size: 14px;
  text-transform: none;
  letter-spacing: -0.005em;
}

.hp-hero__stamp-dot {
  color: var(--text-wash);
  font-family: var(--font-display);
  line-height: 1;
}

/* TVL ghost — large, faint, anchored bottom-right behind the type.
   Fully contained inside the hero — no bleed past the §2 seam. */
.hp-hero__ghost {
  position: absolute;
  /* Lifted up the right side so the meta strap and spec card overlay it
     like printed annotations on a watermark. The ghost still bleeds off
     the right edge a touch — that's the brand-book composition. */
  right: clamp(-3vw, -1.5vw, 0vw);
  top: clamp(80px, 14vh, 180px);
  bottom: auto;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(200px, 34vw, 460px);
  line-height: 0.86;
  color: var(--bg-deep);
  opacity: 0.55;
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Inner column — left-anchored, designed asymmetrically against the
   ghost TVL watermark in the background. Pure typography composition:
   headline, lede, CTAs. */
.hp-hero__inner {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 1180px;
  padding-bottom: var(--s-9);
}

/* Headline — three caps + italic-accent pairs.
   Each line: large display caps (skewed -6deg, brand vocabulary) on the left,
   smaller Fraunces italic accent flush against the caps.  Lines vary in
   indent + alignment so the block reads as a hand-set composition rather
   than a list. */
.hp-hero__headline {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s-1), 0.4vw, var(--s-2));
  margin: 0 0 var(--s-7);
  color: var(--text);
}

.hp-hero__line {
  display: flex;
  align-items: baseline;
  gap: clamp(var(--s-3), 1vw, var(--s-5));
  flex-wrap: nowrap;
  position: relative;
  /* Reserve space below the line for italic descenders (g, p, y).
     The accent sits on top: 0.18em + Fraunces descender ~0.2em — without
     this, the "g" in change./Hollow Ridge tails clips into the next line. */
  padding-bottom: 0.22em;
}

.hp-hero__line--b { padding-left: clamp(0px, 4vw, 80px); }   /* indent the marquee row */
.hp-hero__line--c { padding-left: clamp(0px, 1.5vw, 24px); }

.hp-hero__caps {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-xl);
  text-transform: uppercase;
  color: var(--text);
  transform: skewX(-6deg);
  transform-origin: 0% 100%;
  display: inline-block;
  white-space: nowrap;
}

.hp-hero__caps.c-marquee {
  color: var(--marquee);
}

.hp-hero__accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--amber-deep);
  white-space: nowrap;
  position: relative;
  top: 0.18em;                 /* drop the italic baseline a touch — feels more like a cursive footnote */
}

/* Lede — italic Fraunces body, sits below the headline in the bottom-left. */
.hp-hero__lede {
  /* Tighter measure so the lede stays in the left column and the
     right-side spec card + meta strap have clear space to sit. */
  max-width: 48ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 var(--s-7);
  letter-spacing: -0.005em;
}

.hp-hero__lede-strong {
  color: var(--text);
  font-weight: 400;
  /* italic from .italic class; just darken */
}

.hp-hero__ctas {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-9);
}

/* Bottom-anchored horizontal meta strap — reads like a document footer
   (city · status · launch date · audience), running underneath the CTAs
   in plain mono caps. No paper-card backing on desktop; just inline
   text along the bottom edge of the hero. */
.hp-hero__meta {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: var(--s-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  border-top: 1px solid rgba(42, 35, 29, 0.10);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-wash);
  line-height: 1.4;
}

.hp-hero__metaKey {
  color: var(--text-soft);
}

.hp-hero__metaVal {
  color: var(--text);
}



/* ----------------------------------------------------------------------------
   §2 · Problem · word-swap
   ---------------------------------------------------------------------------- */
.hp-problem {
  background: var(--bg-lift);
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-items: center;
  padding-block: var(--s-8);
}

.hp-problem__headline {
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display-l);
  max-width: 20ch;
  margin-inline: auto;
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4ch;
  justify-content: center;
  align-items: baseline;
}

.hp-problem__slot {
  display: inline-flex;
  align-items: baseline;
  position: relative;
  /* Reserve width so word swaps don't reflow the line */
  min-width: 8ch;
  justify-content: center;
  color: var(--marquee);
}

.hp-problem__slot-bracket {
  color: var(--text-wash);
  font-family: var(--font-display);
}

.hp-problem__slot-word {
  display: inline-block;
  /* The span above this has overflow visible — but during animation
     Phase 2 clips to prevent overshoot of siblings. */
  padding-inline: 0.1ch;
  white-space: nowrap;
}

.hp-problem__period {
  color: var(--text);
}

.hp-problem__sub {
  max-width: 48ch;
  margin-inline: auto;
  margin-top: var(--s-5);
  color: var(--text-soft);
}

/* ----- Progression rail ----------------------------------------------------
   Sits below the headline, fills the lower half of the pinned viewport.
   Six items: 01 Excel, 02 Spreadsheets, 03 Email threads, 04 Text messages,
   05 Group chats, → TVLDays. Each item is a vertical block with a small
   mono number left-flush and the tool name to the right. As scroll progress
   advances, items get is-past (struck through, faded) or is-current (full
   opacity, marquee). The final TVLDays item glows when reached.
   ---------------------------------------------------------------------- */
.hp-problem__rail {
  list-style: none;
  margin: var(--s-7) auto 0;
  padding: 0;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: left;
}

.hp-problem__rail-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-soft);
  opacity: 0.45;
  transition: color 0.45s ease, opacity 0.45s ease;
}

.hp-problem__rail-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-wash);
  text-transform: uppercase;
}

.hp-problem__rail-word {
  font-style: italic;
  font-weight: 500;
}

/* Past items — struck through and faded */
.hp-problem__rail-item.is-past {
  opacity: 0.30;
  color: var(--text-wash);
}

.hp-problem__rail-item.is-past .hp-problem__rail-word {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(42, 35, 29, 0.35);
}

/* Currently-active item — full opacity, espresso, no italic */
.hp-problem__rail-item.is-current {
  opacity: 1;
  color: var(--espresso);
}

.hp-problem__rail-item.is-current .hp-problem__rail-num {
  color: var(--marquee);
}

/* Final TVLDays item — special treatment when reached */
.hp-problem__rail-item--final {
  border-bottom-color: transparent;
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-top: 1px solid rgba(42, 35, 29, 0.18);
}

.hp-problem__rail-item--final .hp-problem__rail-num {
  font-family: var(--font-display, var(--font-sans));
  font-size: 20px;
  letter-spacing: 0;
  color: var(--marquee);
}

.hp-problem__rail-item--final.is-current .hp-problem__rail-word em,
.hp-problem__rail-item--final.is-past .hp-problem__rail-word em {
  color: var(--marquee);
  font-style: italic;
  font-weight: 500;
}

.hp-problem__rail-item--final.is-past .hp-problem__rail-word {
  text-decoration: none;
}


/* ----------------------------------------------------------------------------
   §3 · Two sides · pinned merge
   ---------------------------------------------------------------------------- */
.hp-twoSides {
  /* Section is pinned in the viewport during the rotate-and-merge moment,
     so the whole composition (headline + subtitle + merged card) needs to
     fit in 900px of vertical space. Tighter padding than other sections. */
  padding-block: var(--s-8) var(--s-9);
  overflow: hidden;
}

.hp-twoSides__head {
  max-width: 720px;
  margin-inline: auto;
}

.hp-twoSides__copy {
  font-size: var(--fs-kicker-l);
  color: var(--text-soft);
  margin-top: var(--s-4);
  min-height: 1.6em;
}

.hp-twoSides__stage {
  position: relative;
  margin-top: var(--s-5);
  height: clamp(480px, 48vw, 580px);
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* All three cards share the same anchor: dead-center of the stage. The
   side cards converge here from the left/right; the merged card materialises
   here at the same moment. That coherent center is what sells the dissolve. */
.hp-twoSides__card {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  overflow: hidden;
}

.hp-twoSides__card--agent  { z-index: 2; }
.hp-twoSides__card--hotel  { z-index: 2; }
.hp-twoSides__card--merged { z-index: 3; }

/* ============================================================================
   Agent card · Google-Sheets aesthetic
   ============================================================================
   Column letters across the top, row numbers down the side, an active
   sheet tab. The group's title is typed straight into a merged cell — the
   tell-tale signature of a tour manager who has bent a consumer tool into
   a hotel-rooming shape because nothing better exists.
   ========================================================================== */
.hp-twoSides__card--gsheet {
  width: min(480px, 44%);
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #d6d6d6;
  box-shadow: 0 18px 48px -24px rgba(20, 17, 14, 0.32);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

.hp-twoSides__gsheetTabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  background: #f6f6f6;
  border-bottom: 1px solid #e3e3e3;
}

.hp-twoSides__gsheetTab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: #5f6368;
  background: #ececec;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
}

.hp-twoSides__gsheetTab.is-active {
  background: #fff;
  color: #1a73e8;
  border-color: #d6d6d6;
  border-bottom: 1px solid #fff;
  position: relative;
  bottom: -1px;
  font-weight: 600;
}

.hp-twoSides__gsheetTab::before {
  content: '';
  width: 10px;
  height: 10px;
  background: #1a8754;
  border-radius: 1px;
  flex: none;
}

.hp-twoSides__gsheetTab:not(.is-active)::before {
  background: #b8b8b8;
}

/* Letter columns share a track-template with the data table below so
   labels A–E align with their respective columns regardless of card width.
   fr units distribute proportionally within the post-28px remainder. */
.hp-twoSides__gsheetCols {
  display: grid;
  grid-template-columns: 28px 36fr 14fr 12fr 12fr 26fr;
  background: #f8f9fa;
  border-bottom: 1px solid #e3e3e3;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #5f6368;
}

.hp-twoSides__gsheetCols span {
  padding: 4px 0;
  text-align: center;
  border-right: 1px solid #e3e3e3;
}

.hp-twoSides__gsheetCols span:last-child {
  border-right: none;
}

.hp-twoSides__gsheetCorner {
  background: #f1f3f4;
  border-right: 1px solid #d6d6d6;
}

.hp-twoSides__gsheetGrid {
  display: grid;
  grid-template-columns: 28px 1fr;
}

.hp-twoSides__gsheetRows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f8f9fa;
  border-right: 1px solid #d6d6d6;
}

.hp-twoSides__gsheetRows li {
  padding: 6px 0;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: #5f6368;
  border-bottom: 1px solid #e3e3e3;
  height: 30px;
  box-sizing: border-box;
}

.hp-twoSides__gsheetTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.hp-twoSides__gsheetTable th,
.hp-twoSides__gsheetTable td {
  padding: 6px 8px;
  border-right: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 30px;
  box-sizing: border-box;
  font-weight: 400;
  color: #1f1f1f;
}

.hp-twoSides__gsheetTable th:last-child,
.hp-twoSides__gsheetTable td:last-child {
  border-right: none;
}

.hp-twoSides__gsheetTable .is-title td {
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 4px;
  border-bottom: 1px solid #e3e3e3;
}

.hp-twoSides__gsheetTable .is-sub td {
  text-align: center;
  font-size: 10px;
  color: #5f6368;
  padding: 4px;
}

.hp-twoSides__gsheetPin {
  color: #1a8754;
  margin-right: 2px;
}

.hp-twoSides__gsheetTable .is-head th {
  background: #f1f3f4;
  font-weight: 500;
  font-size: 10px;
  color: #5f6368;
  letter-spacing: 0.02em;
}

/* Yellow row highlight — the "?? confirm" cell, the one nobody resolved. */
.hp-twoSides__gsheetTable .is-flagged td {
  background: #fff3cd;
  color: #6b5300;
}

.hp-twoSides__gsheetFoot {
  padding: 6px 10px;
  background: #f8f9fa;
  border-top: 1px solid #e3e3e3;
  font-size: 10px;
  color: #5f6368;
  font-family: 'Inter', sans-serif;
}

.hp-twoSides__gsheetFoot strong {
  color: #1f1f1f;
  font-weight: 600;
}

/* ============================================================================
   Hotel card · PMS printout aesthetic
   ============================================================================
   What hotels actually send: a stiff black-and-white report from a property-
   management system, generated as a PDF, mailed as an attachment. Centered
   header with hotel name and date stamp, condensed printer-style table with
   alternating row stripes, footer with filter parameters and page number.
   ========================================================================== */
.hp-twoSides__card--pms {
  width: min(480px, 44%);
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #c8c2b1;
  box-shadow: 0 18px 48px -24px rgba(20, 17, 14, 0.32);
  font-family: 'Times New Roman', Georgia, serif;
}

.hp-twoSides__pmsHead {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #1a1a1a;
}

.hp-twoSides__pmsLogo {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1a1a1a;
  font-family: 'Times New Roman', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.hp-twoSides__pmsHeadCenter {
  text-align: center;
}

.hp-twoSides__pmsHotel {
  margin: 0;
  font-style: italic;
  font-size: 13px;
  color: #1a1a1a;
}

.hp-twoSides__pmsTitle {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: 13px;
  color: #1a1a1a;
}

.hp-twoSides__pmsHeadRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-style: italic;
  font-size: 10px;
  color: #1a1a1a;
  line-height: 1.3;
}

.hp-twoSides__pmsTable {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  table-layout: fixed;
}

.hp-twoSides__pmsTable th {
  text-align: left;
  font-weight: 500;
  padding: 7px 6px;
  background: #1a1a1a;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-twoSides__pmsTable th:first-child { padding-left: 12px; }
.hp-twoSides__pmsTable th:last-child { padding-right: 12px; }

.hp-twoSides__pmsTable td {
  padding: 6px;
  border-bottom: 1px solid #ececec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.hp-twoSides__pmsTable td:first-child { padding-left: 12px; font-weight: 500; }
.hp-twoSides__pmsTable td:last-child { padding-right: 12px; }

.hp-twoSides__pmsTable th.num,
.hp-twoSides__pmsTable td.num {
  text-align: right;
}

.hp-twoSides__pmsTable tbody tr:nth-child(even) td {
  background: #f6f4ee;
}

.hp-twoSides__pmsFoot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 14px 8px;
  border-top: 1px solid #1a1a1a;
  font-style: italic;
  font-size: 9px;
  color: #1a1a1a;
}

/* ============================================================================
   Merged card · TVLDays brand-book rooming list
   ============================================================================
   Modeled directly on the brand-book PDF: small mono kicker (THE PROPERTY),
   big serif hotel name, address, divider, ROOMING LIST · N GUESTS strap
   with NIGHTS TOTAL flush right, table with rate + total columns, yellow
   stripe and red strikethrough row treatments, CONFIDENTIAL footer with
   page number — the editorial, brand-defining alternative to the messy
   spreadsheets it replaces.
   ========================================================================== */
.hp-twoSides__card--merged {
  width: min(680px, 66%);
  transform: translate(-50%, -50%) scale(0.92);
  background: var(--paper, #FAF5E8);
  color: var(--espresso, #2A231D);
  border: 1px solid rgba(42, 35, 29, 0.10);
  box-shadow: 0 38px 80px -32px rgba(20, 17, 14, 0.34);
  opacity: 0;
}

.hp-twoSides__mergedHead {
  padding: var(--s-5) var(--s-6) var(--s-3);
}

.hp-twoSides__mergedHeadInner {
  max-width: 80%;
}

.hp-twoSides__mergedKicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6358);
  margin: 0 0 var(--s-2);
}

.hp-twoSides__mergedHotel {
  font-family: var(--font-serif, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--espresso, #2A231D);
  margin: 0;
}

.hp-twoSides__mergedAddr {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-soft, #6b6358);
}

.hp-twoSides__mergedSubRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  border-top: 1px solid rgba(42, 35, 29, 0.10);
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
}

.hp-twoSides__mergedLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6358);
}

.hp-twoSides__mergedLabel em {
  font-style: normal;
  margin-inline: 0.4em;
  color: rgba(42, 35, 29, 0.35);
}

.hp-twoSides__mergedLabel--right {
  margin-left: auto;
}

.hp-twoSides__mergedTableWrap {
  padding: var(--s-2) var(--s-6) var(--s-3);
  /* Fixed-height window into the rooming list. The table inside is taller
     than this — JS scrolls it upward via translateY during the latter half
     of the §3 pin so the user reads through more guests before §4 enters. */
  max-height: 280px;
  overflow: hidden;
  position: relative;
}

/* Soft fade at the bottom of the visible table so rows don't sheer off
   the table edge. Vanishes when the table has scrolled to the end. */
.hp-twoSides__mergedTableWrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper, #FAF5E8));
  opacity: var(--fade, 1);
  transition: opacity 0.3s ease;
}

.hp-twoSides__mergedTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.hp-twoSides__mergedTable th {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-soft, #6b6358);
  padding: var(--s-2) 10px var(--s-2) 0;
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
  white-space: nowrap;
}

.hp-twoSides__mergedTable th:last-child { padding-right: 0; }

.hp-twoSides__mergedTable th.num,
.hp-twoSides__mergedTable td.num {
  text-align: right;
}

.hp-twoSides__mergedTable td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid rgba(42, 35, 29, 0.06);
  color: var(--espresso, #2A231D);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 12px;
}

.hp-twoSides__mergedTable td:last-child { padding-right: 0; }

.hp-twoSides__mergedTable td:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-soft, #6b6358);
  width: 30px;
  letter-spacing: 0.05em;
}

.hp-twoSides__mergedTable tbody tr:last-child td {
  border-bottom: none;
}

/* Pending row — yellow accent stripe (matches brand-book PDF) */
.hp-twoSides__mergedTable tr.is-pending td {
  background: rgba(240, 217, 122, 0.20);
}

.hp-twoSides__mergedTable tr.is-pending td:first-child {
  box-shadow: inset 3px 0 0 0 #f0d97a;
}

/* Cancelled row — pink wash, marquee strikethrough */
.hp-twoSides__mergedTable tr.is-cancel td {
  color: rgba(130, 32, 74, 0.7);
  text-decoration: line-through;
  background: rgba(130, 32, 74, 0.06);
}

.hp-twoSides__mergedTable tr.is-cancel td:first-child {
  box-shadow: inset 3px 0 0 0 var(--marquee, #82204A);
}

.hp-twoSides__mergedFooter {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  border-top: 1px solid rgba(42, 35, 29, 0.10);
}

.hp-twoSides__mergedConf {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6358);
}

.hp-twoSides__mergedConf--right {
  text-align: right;
}

.hp-twoSides__mergedTotal {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6358);
  text-align: center;
}

.hp-twoSides__mergedTotal em {
  font-family: var(--font-display, var(--font-sans));
  font-style: normal;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--marquee, #82204A);
  margin-left: 0.6em;
}


/* ============================================================================
   §4 · Timeline — the day-of view, embedded in the page
   ============================================================================
   The product window. Cream section, dark "screen" inside that frames the
   timeline. Cards reveal as the user scrolls past them so reading the
   timeline IS the demonstration of how TVLDays sequences a tour day.
   ========================================================================== */
.hp-timeline {
  padding-block: var(--s-9) var(--s-7);
}

.hp-timeline__head {
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--s-8);
  text-align: center;
}

.hp-timeline__head .lede {
  margin-top: var(--s-5);
  color: var(--text-soft);
}

/* Light-mode "product window" — paper-cream ground that matches the §3
   rooming list. Fixed height; the stack of timeline items inside is
   taller than this and translates upward as the user scrolls. Soft mask
   top/bottom so items feather in and out at the edges. */
.hp-timeline__viewport {
  --tl-bg: var(--paper, #FAF5E8);
  --tl-card: #FFFFFF;
  --tl-card-soft: rgba(255, 255, 255, 0.7);
  --tl-line: rgba(42, 35, 29, 0.10);
  --tl-text: var(--espresso, #2A231D);
  --tl-text-soft: rgba(42, 35, 29, 0.62);
  --tl-text-wash: rgba(42, 35, 29, 0.38);

  position: relative;
  background: var(--tl-bg);
  color: var(--tl-text);
  border-radius: var(--r-lg);
  /* Match the §3 merged-card lift — visible elevation, soft cast shadow,
     hairline border. The card sits ON the page rather than blending into
     it. The second long shadow adds a wider ambient glow underneath so
     the card feels grounded even on the cream surface. */
  border: 1px solid rgba(42, 35, 29, 0.12);
  box-shadow:
    0 38px 80px -32px rgba(20, 17, 14, 0.34),
    0 8px 18px -10px rgba(20, 17, 14, 0.10);
  font-family: var(--font-sans);
  max-width: 1100px;
  margin-inline: auto;
  /* Slightly shorter so it sits nicely vertically centered with breathing
     room above and below when pinned. */
  height: clamp(580px, 78vh, 740px);
  overflow: hidden;
}

/* Bottom-edge fade only — the hero sits permanently at the top, so there's
   no need for a top fade. (Items disappearing past the bottom of the
   viewport still benefit from a soft feather.) Pseudo-element rather than
   mask-image so the viewport's box-shadow renders uncut. */
.hp-timeline__viewport::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to top, var(--tl-bg) 30%, transparent);
}

/* The stack — taller than the viewport, animated upward by JS. The padding
   gives breathing room so the first item starts off-screen below and the
   last item ends off-screen above. */
.hp-timeline__stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-7) 22%;
  will-change: transform;
}

/* ----- Hero top bar ------------------------------------------------------
   Sits inside the carousel viewport, anchored to the top via z-index. The
   timeline stack scrolls underneath it via translateY — the hero stays in
   place because it lives outside the transformed stack. Solid bg covers
   stack items as they pass behind. */
.hp-timeline__hero {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5) var(--s-7);
  background: var(--tl-bg);
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
}

.hp-timeline__heroAvatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(241, 237, 224, 0.20), transparent 60%),
    linear-gradient(135deg, var(--marquee, #82204A) 0%, #5d1838 50%, var(--espresso, #2A231D) 100%);
  border: 1px solid rgba(42, 35, 29, 0.20);
  box-shadow: 0 2px 6px -2px rgba(20, 17, 14, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Subtle "headshot" hint — a soft circular highlight where a face would
   be — without committing to a specific person. */
.hp-timeline__heroAvatar::before {
  content: '';
  position: absolute;
  width: 32%;
  height: 32%;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 237, 224, 0.18), transparent 70%);
}
.hp-timeline__heroAvatar::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 32%;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at center top, rgba(241, 237, 224, 0.16), transparent 70%);
}

.hp-timeline__heroAvatarMark {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(241, 237, 224, 0.95);
  text-shadow: 0 1px 2px rgba(20, 17, 14, 0.4);
}

.hp-timeline__heroBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hp-timeline__heroTitle {
  margin: 0;
  font-family: var(--font-serif, 'Fraunces', Georgia, serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--espresso, #2A231D);
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.hp-timeline__heroStar {
  color: var(--amber, #D39734);
  font-size: 14px;
  position: relative;
  top: -4px;
}

.hp-timeline__heroDates {
  margin: 4px 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft, rgba(42, 35, 29, 0.62));
}

.hp-timeline__heroStats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft, rgba(42, 35, 29, 0.55));
}

.hp-timeline__heroStats strong {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--espresso, #2A231D);
  margin-right: 5px;
}

.hp-timeline__heroStat--show   { color: #1f7a3a; }
.hp-timeline__heroStat--travel { color: #4f5fc4; }
.hp-timeline__heroStat--off    { color: var(--amber, #D39734); }
.hp-timeline__heroStat--leg    { color: var(--marquee, #82204A); }

/* ----- Day header --------------------------------------------------------- */
.hp-timeline__day {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-1);
}

.hp-timeline__day:not(:first-child) {
  margin-top: var(--s-7);
}

.hp-timeline__dayHead {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.hp-timeline__dayDow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tl-text-wash);
}

.hp-timeline__dayDate {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tl-text);
  line-height: 1;
}

.hp-timeline__dayYear {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-style: italic;
  font-weight: 400;
  color: var(--tl-text-soft);
  letter-spacing: -0.01em;
}

.hp-timeline__pill {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

.hp-timeline__pill--show {
  color: #6cc28d;
}

.hp-timeline__city {
  font-size: 13px;
  color: var(--tl-text-soft);
  margin: 0;
}

.hp-timeline__city em {
  color: var(--tl-text-soft);
  font-style: italic;
}

.hp-timeline__city strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tl-text);
  font-weight: 500;
}

.hp-timeline__dash {
  color: var(--tl-text-wash);
  margin-inline: 6px;
}

/* ----- Event card --------------------------------------------------------- */
.hp-timeline__card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-5);
  background: var(--tl-card);
  border: 1px solid rgba(42, 35, 29, 0.06);
  box-shadow: 0 1px 0 rgba(42, 35, 29, 0.03);
  border-radius: 12px;
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  position: relative;
  overflow: hidden;
}

/* Left accent stripe — colour communicates card type at a glance. */
.hp-timeline__card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--amber);
}

.hp-timeline__card--ground::before { background: var(--amber); }
.hp-timeline__card--flight::before { background: #8F99FB; }
.hp-timeline__card--hotel::before  { background: var(--marquee); }

.hp-timeline__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-left: var(--s-5);
  font-family: var(--font-mono);
}

.hp-timeline__time {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tl-text);
  font-variant-numeric: tabular-nums;
}

.hp-timeline__time small {
  font-size: 11px;
  font-weight: 400;
  margin-left: 1px;
  color: var(--tl-text-soft);
  text-transform: uppercase;
}

.hp-timeline__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(42, 35, 29, 0.06);
  color: var(--amber);
  margin-block: 2px;
}

.hp-timeline__card--flight .hp-timeline__icon { color: #4f5fc4; }
.hp-timeline__card--hotel  .hp-timeline__icon { color: var(--marquee); }

.hp-timeline__timeEnd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tl-text-wash);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.hp-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: var(--s-2);
}

.hp-timeline__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--tl-text);
}

.hp-timeline__title strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.hp-timeline__route {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tl-text);
  text-transform: uppercase;
}

.hp-timeline__route span {
  margin-inline: 0.5em;
  color: var(--tl-text-wash);
  font-weight: 400;
}

.hp-timeline__conf {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-text-soft);
}

.hp-timeline__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--tl-text-soft);
  margin: 0;
}

/* ----- Tags + pax pills --------------------------------------------------- */
.hp-timeline__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.hp-timeline__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 4px;
}

.hp-timeline__tag--a {
  background: rgba(130, 32, 74, 0.12);
  color: var(--marquee);
}

.hp-timeline__tag--bc {
  background: rgba(79, 95, 196, 0.14);
  color: #4f5fc4;
}

.hp-timeline__pax {
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(79, 95, 196, 0.08);
  color: #4f5fc4;
  border: 1px solid rgba(79, 95, 196, 0.18);
}

.hp-timeline__paxMore {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-text-wash);
  padding: 4px 6px;
}

.hp-timeline__paxCount {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tl-text-wash);
  margin-left: auto;
  padding: 4px 8px;
}

/* ----- Marker (check-out, night X of Y) ----------------------------------- */
.hp-timeline__marker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) 113px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tl-text-soft);
  border-top: 1px dashed rgba(42, 35, 29, 0.18);
  border-bottom: 1px dashed rgba(42, 35, 29, 0.18);
}

.hp-timeline__marker--soft {
  border-top-style: solid;
  border-bottom-style: solid;
  border-color: rgba(42, 35, 29, 0.10);
}

.hp-timeline__markerTime {
  color: var(--marquee);
  font-weight: 500;
}

.hp-timeline__markerLabel {
  color: var(--tl-text-wash);
}

.hp-timeline__markerDot {
  color: var(--tl-text-wash);
}

.hp-timeline__markerName {
  color: var(--tl-text);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ----- Hotel check-in card ------------------------------------------------ */
.hp-timeline__card--hotel .hp-timeline__body {
  gap: var(--s-4);
}

.hp-timeline__hotelHead {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-4);
  align-items: start;
}

.hp-timeline__hotelImg {
  width: 96px;
  height: 76px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(130, 32, 74, 0.18), rgba(42, 35, 29, 0.85)),
    repeating-linear-gradient(0deg, rgba(241, 237, 224, 0.10) 0 6px, transparent 6px 12px);
  border: 1px solid rgba(42, 35, 29, 0.10);
  flex: none;
}

.hp-timeline__hotelMeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hp-timeline__hotelName {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.hp-timeline__hotelName strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--tl-text);
}

.hp-timeline__stars {
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.hp-timeline__hotelAddr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--tl-text-soft);
  margin: 0;
}

.hp-timeline__hotelStrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tl-text-soft);
  margin: 0;
}

.hp-timeline__sep {
  color: var(--tl-text-wash);
}

.hp-timeline__hotelGroup {
  color: var(--marquee);
  font-weight: 500;
}

.hp-timeline__roomingTable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: var(--s-3);
}

.hp-timeline__roomingTable th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--tl-text-wash);
  padding: var(--s-3) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--tl-line);
  white-space: nowrap;
}

.hp-timeline__roomingTable th:last-child { padding-right: 0; }

.hp-timeline__roomingTable td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--tl-line);
  color: var(--tl-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 13px;
}

.hp-timeline__roomingTable td:first-child {
  width: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tl-text-wash);
}

.hp-timeline__roomingTable td:last-child { padding-right: 0; }

.hp-timeline__roomingTable tr.is-more td {
  text-align: center;
  color: var(--tl-text-wash);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  border-bottom: none;
  padding: var(--s-3);
}

/* Numbered, money, nights — small monospace pills that align numerically. */
.hp-timeline__roomingTable .hp-timeline__col-num {
  width: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tl-text-wash);
}
.hp-timeline__roomingTable .hp-timeline__col-date,
.hp-timeline__roomingTable .hp-timeline__col-money,
.hp-timeline__roomingTable .hp-timeline__col-nights,
.hp-timeline__roomingTable .hp-timeline__col-conf {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tl-text);
  white-space: nowrap;
}
.hp-timeline__roomingTable .hp-timeline__col-conf {
  color: var(--tl-text-wash);
}
.hp-timeline__roomingTable .hp-timeline__col-notes {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--tl-text-soft);
  font-style: italic;
}

/* Type badge — Airtable-style pill with a colored dot + label. Suite is
   green (the upgrade), King is blue (the standard fare). */
.hp-timeline__typeBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hp-timeline__typeBadge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.hp-timeline__typeBadge--suite {
  background: rgba(46, 145, 99, 0.15);
  color: #2E9163;
}
.hp-timeline__typeBadge--king {
  background: rgba(79, 95, 196, 0.15);
  color: #4f5fc4;
}

/* Row flags — left-edge bar + tinted background. Warm = "needs same
   floor"; Issue = "pay own / blocked". Subtle so the table still reads
   as data, not as alerts. */
.hp-timeline__roomingTable tr.is-flag-warm,
.hp-timeline__roomingTable tr.is-flag-issue {
  position: relative;
}
.hp-timeline__roomingTable tr.is-flag-warm td {
  background: rgba(211, 151, 52, 0.10);
  box-shadow: inset 3px 0 0 0 #D39734;
}
.hp-timeline__roomingTable tr.is-flag-issue td {
  background: rgba(180, 53, 70, 0.10);
  box-shadow: inset 3px 0 0 0 #b43546;
}
.hp-timeline__roomingTable tr.is-flag-warm td:first-child,
.hp-timeline__roomingTable tr.is-flag-issue td:first-child {
  padding-left: 10px;
}

/* ----- Reveal-on-scroll initial state ------------------------------------- */
[data-tl-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

[data-tl-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.reduced-motion [data-tl-reveal] {
  opacity: 1;
  transform: none;
}


/* ============================================================================
   §4.5 · Flight tracking · drilldown on a single travel leg
   ----------------------------------------------------------------------------
   A pinned section between §4 (timeline) and §5 (analytics). Static-ish
   composition: a paper-card flight detail panel sits centre-stage, and
   as the user scrolls the activity log streams in event by event with
   the card values updating in lockstep.
   ============================================================================ */
.hp-flight {
  padding-block: var(--s-9) var(--s-9);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.hp-flight__head {
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--s-7);
}

.hp-flight__head .lede {
  margin-top: var(--s-5);
  color: var(--text-soft);
}

.hp-flight__stage {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
}

/* ---- The flight card ---------------------------------------------------- */
.hp-flight__card {
  position: relative;
  background: var(--paper, #FAF5E8);
  border: 1px solid rgba(42, 35, 29, 0.14);
  border-radius: var(--r-lg);
  box-shadow:
    0 38px 80px -32px rgba(20, 17, 14, 0.34),
    0 10px 22px -10px rgba(20, 17, 14, 0.10);
  font-family: var(--font-sans);
  color: var(--espresso, #2A231D);
  overflow: hidden;
}

.hp-flight__cardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
}

.hp-flight__cardId {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.hp-flight__cardTour {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-soft);
}
.hp-flight__cardTour em.italic {
  color: var(--text);
}

.hp-flight__pip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(46, 145, 99, 0.12);
  color: #2E9163;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
}
.hp-flight__pipDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E9163;
  box-shadow: 0 0 0 0 rgba(46, 145, 99, 0.55);
  animation: hp-flight-pip 2.2s ease-out infinite;
  transition: background 360ms ease;
}
@keyframes hp-flight-pip {
  0%   { box-shadow: 0 0 0 0 rgba(46, 145, 99, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(46, 145, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 145, 99, 0); }
}

/* Scheduled state — flight hasn't taken off yet. Quiet gray pip, no
   pulse. JS swaps to this on init then drops the class once the
   "status flipped" event fires during scroll. */
.hp-flight__pip.is-scheduled {
  background: rgba(42, 35, 29, 0.08);
  color: var(--text-soft);
  transition: background 320ms ease, color 320ms ease;
}
.hp-flight__pip.is-scheduled .hp-flight__pipDot {
  background: var(--text-wash);
  animation: none;
  box-shadow: none;
}

/* ---- Route bar (PDX → ✈ → SEA) ---------------------------------------- */
.hp-flight__route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), transparent);
  border-bottom: 1px solid rgba(42, 35, 29, 0.10);
}

.hp-flight__leg {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.hp-flight__leg--right {
  text-align: right;
  align-items: flex-end;
}

.hp-flight__legCity {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.hp-flight__legSched {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-wash);
}
/* The scheduled time starts pristine (full colour, no strike) and only
   gets struck through once the delay arrives — JS toggles `.is-struck`
   on the parent leg when the delay event fires. */
.hp-flight__legSchedTime {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  transition: color 320ms ease, text-decoration-color 320ms ease;
}
.hp-flight__leg.is-delayed .hp-flight__legSchedTime {
  color: var(--text-wash);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.hp-flight__legActual {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--amber-deep, #D39734);
  letter-spacing: 0.01em;
  /* Hidden until the delay event fires (JS toggles parent .is-delayed). */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 360ms ease, max-height 360ms ease;
}
.hp-flight__leg.is-delayed .hp-flight__legActual {
  opacity: 1;
  max-height: 32px;
}

.hp-flight__legDelay {
  display: inline-block;
  margin: 4px 0 0;
  padding: 2px 8px;
  background: rgba(211, 151, 52, 0.18);
  color: var(--amber-deep, #D39734);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  /* Hidden until the delay event fires; pop in with a tiny scale-up. */
  opacity: 0;
  transform: scale(0.7);
  transform-origin: left center;
  transition: opacity 360ms ease, transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hp-flight__leg--right .hp-flight__legDelay {
  transform-origin: right center;
}
.hp-flight__leg.is-delayed .hp-flight__legDelay {
  opacity: 1;
  transform: scale(1);
}
.hp-flight__legGate {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.hp-flight__legGate strong {
  color: var(--text);
  font-weight: 600;
}

.hp-flight__path {
  position: relative;
  width: 100%;
  min-width: 80px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-flight__pathLine {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--marquee);
  border-radius: 2px;
  transform: translateY(-50%);
}
.hp-flight__pathPlane {
  position: relative;
  z-index: 1;
  color: var(--marquee);
  background: var(--paper, #FAF5E8);
  padding: 0 6px;
  display: flex;
  align-items: center;
  /* Subtle nudge animation so the plane reads as in motion. */
  animation: hp-flight-plane 4s ease-in-out infinite;
}
@keyframes hp-flight-plane {
  0%, 100% { transform: translateX(-12px); }
  50%      { transform: translateX(12px); }
}

/* ---- Activity log (event stream) -------------------------------------- */
.hp-flight__activity {
  padding: var(--s-5) var(--s-6) var(--s-6);
}

.hp-flight__activityHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.hp-flight__activityHead em.italic {
  color: var(--text);
  letter-spacing: -0.005em;
  font-size: 14px;
  text-transform: none;
  font-family: var(--font-serif);
}

.hp-flight__activitySync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #2E9163;
  text-transform: none;
}
.hp-flight__activitySync span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E9163;
  display: inline-block;
}

.hp-flight__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hp-flight__event {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) 0;
  border-bottom: 1px dashed rgba(42, 35, 29, 0.08);
  /* Initial state: invisible — JS reveals each as the user scrolls. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.hp-flight__event:last-child { border-bottom: none; }
.hp-flight__event.is-revealed {
  opacity: 1;
  transform: none;
}

.hp-flight__eventIcon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hp-flight__eventIcon--gate {
  background: rgba(79, 95, 196, 0.14);
  color: #4f5fc4;
}
.hp-flight__eventIcon--delay {
  background: rgba(211, 151, 52, 0.18);
  color: var(--amber-deep, #D39734);
}
.hp-flight__eventIcon--status {
  background: rgba(130, 32, 74, 0.12);
  color: var(--marquee);
}

.hp-flight__eventBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hp-flight__eventLabel {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
}
.hp-flight__eventLabel strong {
  font-weight: 600;
  color: var(--text);
}
.hp-flight__eventMeta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-wash);
}

/* ---- Brand-book annotation sticker ------------------------------------
   Floats off the right edge of the card, level with the route bar so it
   doesn't crowd the status pip in the header. Hidden on smaller desktop
   widths where the card eats the available width. */
.hp-flight__callout {
  position: absolute;
  right: clamp(-260px, -22vw, -200px);
  top: 220px;
  width: clamp(200px, 18vw, 240px);
  padding: var(--s-3) var(--s-4);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(42, 35, 29, 0.14);
  border-radius: var(--r-md);
  box-shadow: 0 18px 36px -16px rgba(20, 17, 14, 0.18);
  transform: rotate(2deg);
  transform-origin: 0 50%;
  pointer-events: none;
}
@media (max-width: 1240px) {
  .hp-flight__callout { display: none; }
}
.hp-flight__calloutEyebrow {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marquee);
}
.hp-flight__calloutBody {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
}

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 720px) {
  .hp-flight {
    padding-block: var(--s-7) var(--s-7);
  }
  .hp-flight__cardHead {
    padding: var(--s-4);
    flex-wrap: wrap;
  }
  .hp-flight__route {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .hp-flight__leg,
  .hp-flight__leg--right {
    text-align: left;
    align-items: flex-start;
  }
  .hp-flight__path {
    width: 60px;
    margin-inline: auto;
  }
  .hp-flight__activity { padding: var(--s-4); }
  .hp-flight__legCity { font-size: clamp(36px, 12vw, 56px); }
  .hp-flight__callout { display: none; }
}

/* ============================================================================
   §5 · Analytics dashboard — real-time tour numbers
   ============================================================================
   Aggregate view of the same fictional tour. KPI grid, donut, bars, line,
   density, and a market heat map — light mode, brand colours, SVG-only
   charts, no external libraries. Reveals on scroll.
   ========================================================================== */
.hp-analytics {
  padding-block: var(--s-7) var(--s-8);
  background: var(--bg);
}

.hp-analytics__head {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--s-3);
}

.hp-analytics__head .lede {
  margin-top: var(--s-4);
  color: var(--text-soft);
}

/* Viewport is the visible "window" through which the three scenes
   scroll while the section is pinned. JS translates the inner board
   upward in three phases (kpi-focus → charts-focus → map-focus) so each
   group dwells, animates, then slides up to make room for the next.
   overflow:hidden clips scenes that have moved out of frame. */
.hp-analytics__viewport {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  /* Tall enough to comfortably hold the largest scene (charts grid)
     plus a peek of the next one above/below as it slides in. */
  height: clamp(560px, 76vh, 720px);
  overflow: hidden;
  /* Soft top/bottom feathers so scenes glide in/out instead of clipping
     hard at the frame edge. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 24px,
    #000 calc(100% - 32px),
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 24px,
    #000 calc(100% - 32px),
    transparent 100%);
}

/* Board is the translateable stack inside the viewport. Three scenes,
   tight gap, content-sized so the stack height = sum of scene heights
   + gaps. JS reads each scene's offsetHeight to compute the per-phase
   translate target. */
.hp-analytics__board {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  will-change: transform;
}

/* Scene sits at its content-natural size — no min-height, no flex
   centering. The visible "containers" are the small cards inside; the
   scene element is just a layout block. */
.hp-analytics__scene {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
}

/* The four-up charts scene has two stacked rows of 2; let them breathe
   between rows so it reads as a 2x2 grid. */
.hp-analytics__scene--charts {
  gap: var(--s-4);
}

.hp-analytics__scene--charts .hp-analytics__row + .hp-analytics__row {
  margin-top: 0;
}

.hp-analytics__scene > * {
  width: 100%;
}

/* ----- KPI metric cards --------------------------------------------------- */
.hp-analytics__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.hp-analytics__kpi {
  position: relative;
  background: var(--paper, #FAF5E8);
  border: 1px solid rgba(42, 35, 29, 0.08);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
  box-shadow: 0 1px 0 rgba(42, 35, 29, 0.02);
}

.hp-analytics__kpi--feature {
  background: linear-gradient(135deg, rgba(130, 32, 74, 0.06), rgba(211, 151, 52, 0.04));
  border-color: rgba(130, 32, 74, 0.18);
}

.hp-analytics__kpiLabel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.hp-analytics__kpiValue {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--espresso, #2A231D);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hp-analytics__kpiValue--accent {
  color: var(--marquee, #82204A);
}

.hp-analytics__kpiHint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(42, 35, 29, 0.45);
}

.hp-analytics__kpiIcon {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  color: rgba(42, 35, 29, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hp-analytics__kpiBadge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(31, 122, 58, 0.14);
  color: #1f7a3a;
}

/* ----- Chart row + chart cards -------------------------------------------- */
.hp-analytics__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.hp-analytics__chart {
  background: var(--paper, #FAF5E8);
  border: 1px solid rgba(42, 35, 29, 0.10);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5);
  box-shadow: 0 1px 0 rgba(42, 35, 29, 0.02);
}

.hp-analytics__chartHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(42, 35, 29, 0.08);
}

.hp-analytics__chartHead h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--espresso, #2A231D);
}

.hp-analytics__chartMeta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: rgba(42, 35, 29, 0.45);
  text-transform: uppercase;
}

.hp-analytics__chartBody {
  position: relative;
}

/* ----- Donut chart -------------------------------------------------------- */
.hp-analytics__chartBody--donut {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-5);
  align-items: center;
}

.hp-analytics__donut {
  width: 100%;
  height: auto;
  max-width: 200px;
}

.hp-analytics__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.hp-analytics__legend li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--espresso, #2A231D);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(42, 35, 29, 0.06);
}

.hp-analytics__legend li:last-child {
  border-bottom: none;
}

.hp-analytics__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.hp-analytics__legendVal {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* ----- Horizontal bars (cost by city) ------------------------------------- */
.hp-analytics__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.hp-analytics__bars li {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--espresso, #2A231D);
}

.hp-analytics__barLabel {
  letter-spacing: 0.04em;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-analytics__barTrack {
  position: relative;
  height: 14px;
  background: rgba(42, 35, 29, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.hp-analytics__barFill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: linear-gradient(to right, rgba(130, 32, 74, 0.85), #82204A);
  border-radius: 3px;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hp-analytics__barVal {
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: 0.02em;
  font-size: 12px;
  color: var(--text-soft);
}

/* ----- Line + density charts ---------------------------------------------- */
.hp-analytics__line,
.hp-analytics__density {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- Market heat map ---------------------------------------------------- */
.hp-analytics__chart--map {
  /* Map gets its own row; takes full board width. */
}

.hp-analytics__chartBody--map {
  position: relative;
}

.hp-analytics__map {
  width: 100%;
  height: auto;
  display: block;
}

.hp-analytics__mapLegend {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.hp-analytics__mapLegend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hp-analytics__mapDot {
  display: inline-block;
  width: var(--s, 12px);
  height: var(--s, 12px);
  border-radius: 50%;
  background: rgba(130, 32, 74, 0.16);
  border: 2px solid #82204A;
}


/* ----------------------------------------------------------------------------
   §6 · Proof · parallax marquee lanes
   ---------------------------------------------------------------------------- */
.hp-proof {
  background: var(--bg-lift);
  padding-block: var(--s-9);
  overflow: hidden;
}

.hp-proof__kicker {
  margin-bottom: var(--s-7);
}

.hp-proof__lane {
  overflow: hidden;
  padding-block: var(--s-4);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.hp-proof__track {
  /* No `gap` here — flex `gap` only sits BETWEEN children, which means the
     last item has no trailing space. Translating by -50% then leaves a
     subtle gap-of-half mismatch at the loop seam (visible as a "jump" or
     stutter every iteration). Instead, every item carries its own
     trailing margin so the track is uniformly spaced including past the
     last item — the duplicate set then aligns perfectly at -50%. */
  display: flex;
  align-items: center;
  width: max-content;
  animation: hp-marquee 60s linear infinite;
  animation-duration: calc(60s / var(--speed, 1));
  will-change: transform;
}

.hp-proof__track > * {
  margin-right: var(--s-9);
  flex: none;
}

.hp-proof__lane--reverse .hp-proof__track {
  animation-direction: reverse;
}

@keyframes hp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hp-proof__stat {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: var(--ls-display-m);
  color: var(--text);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
}

.hp-proof__stat strong {
  color: var(--marquee);
  font-weight: inherit;
}

.hp-proof__quote {
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  color: var(--text-soft);
  white-space: nowrap;
}

.hp-proof__show {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  color: var(--marquee);
  white-space: nowrap;
}


/* ----------------------------------------------------------------------------
   §7 · Industries · horizontal hijack
   ---------------------------------------------------------------------------- */
.hp-industries {
  padding-block: var(--s-11) 0;
}

.hp-industries__head {
  max-width: 760px;
  margin-bottom: var(--s-9);
}

.hp-industries__viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Phase 2 pins this and translates the track via GSAP.
     Until motion runs, it's a native horizontal scroll (also the fallback
     for reduced-motion + mobile). */
}

/* Motion script applies this class when hijacking scroll. */
.hp-industries__viewport.js-hijacked {
  overflow: visible;
  scroll-snap-type: none;
}

.hp-industries__viewport.js-hijacked .hp-industries__track {
  padding-bottom: 0;
}

.hp-industries__track {
  display: flex;
  gap: var(--s-5);
  padding: 0 var(--gutter) var(--s-11);
  width: max-content;
}

.hp-industries__panel {
  flex: 0 0 min(72vw, 640px);
  min-height: 480px;
  padding: var(--s-9) var(--s-8);
  background: var(--bg-lift);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  justify-content: flex-end;
  scroll-snap-align: center;
  position: relative;
  transition: transform var(--t-normal) var(--ease-out);
}

.hp-industries__panel h3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  letter-spacing: var(--ls-display-l);
  line-height: var(--lh-display);
  color: var(--text);
  transform: skewX(-6deg);
}

.hp-industries__panel .lede {
  max-width: 40ch;
  color: var(--text-soft);
}

.hp-industries__panel .mono-label {
  color: var(--text-wash);
}

/* Panel accent — colored mark on the left edge, varies by data-accent */
.hp-industries__panel::before {
  content: "";
  position: absolute;
  left: var(--s-8);
  top: var(--s-9);
  width: 48px;
  height: 2px;
  background: var(--marquee);
}

.hp-industries__panel[data-accent="amber"]::before { background: var(--amber); }
.hp-industries__panel[data-accent="cue"]::before   { background: var(--cue-ui); }


/* ----------------------------------------------------------------------------
   §8 · Founder note · cursor-tracked spotlight
   ---------------------------------------------------------------------------- */
.hp-founder {
  position: relative;
  background: var(--bg-lift);
  padding-block: var(--s-11);
  overflow: hidden;
}

.hp-founder__spotlight {
  /* Phase 2 writes --cx / --cy on mousemove; these default keep a soft static
     amber wash centered so the section still has warmth at rest. */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--cx, 50%) var(--cy, 50%),
    rgba(211, 151, 52, 0.16) 0%,
    rgba(211, 151, 52, 0.04) 30%,
    transparent 60%
  );
  transition: background var(--t-fast) linear;
}

.hp-founder__quote {
  position: relative;
  /* Roomier than the original 32ch — the new mission copy is ~6× longer
     than the original 3 sentences, so we need a comfortable reading
     measure (~70 characters per line on desktop) rather than a
     super-narrow display column. */
  max-width: 56ch;
  margin-inline: auto;
  margin-top: var(--s-5);
  text-align: center;
}

.hp-founder__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  /* Stepped down from --fs-display-m (32–48px) — at the original size
     a paragraph this long became a wall of huge italic. This still
     reads as a serif-display quote but at body-readable rhythm. */
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--text);
}

.hp-founder__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--s-7);
  color: var(--text-soft);
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.4vw, 20px);
  font-style: italic;
}

.hp-founder__signoff {
  /* Slight bottom adjustment so the italic baseline aligns with the
     logo's optical centre (logo glyphs sit a touch high vs. cursive). */
  position: relative;
  top: 1px;
}

.hp-founder__signLogo {
  /* Match the sign-off line-height so the wordmark reads as a single
     phrase: "From the [TVLDays] team". Width is auto so the aspect
     ratio of the rendered PNG governs. */
  height: 1.3em;
  width: auto;
  display: inline-block;
  /* Subtle vertical nudge — Archivo Black sits a hair below the serif
     italic's x-height; this re-centres the wordmark within the line. */
  transform: translateY(0.05em);
}

/* Inline wordmark inside the quote body — sized to match the italic
   serif x-height so it reads as part of the sentence rather than a
   separate graphic element. */
.hp-founder__inlineLogo {
  height: 0.9em;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  /* Tiny sideways breathing room so it doesn't crowd adjacent words. */
  margin-inline: 0.12em 0.05em;
  /* Drop it a hair so the wordmark's flat baseline aligns with the
     italic's optical baseline rather than its caps line. */
  transform: translateY(0.08em);
}


/* ----------------------------------------------------------------------------
   §9 · Final CTA · kinetic closer
   ---------------------------------------------------------------------------- */
.hp-cta {
  padding-block: var(--s-11);
  text-align: center;
}

.hp-cta__headline {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s-2), 0.8vw, var(--s-4));
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-xl);
  margin-top: var(--s-5);
  margin-inline: auto;
  max-width: 16ch;
  color: var(--text);
}

.hp-cta__line {
  display: block;
}

.hp-cta__sub {
  max-width: 48ch;
  margin-inline: auto;
  margin-top: var(--s-7);
  color: var(--text-soft);
}

.hp-cta__actions {
  margin-top: var(--s-7);
  display: flex;
  gap: var(--s-5);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hp-cta__glyph {
  margin-top: var(--s-9);
  display: flex;
  justify-content: center;
}


/* ============================================================================
   Responsive — stacks, disables scroll hijacks, simplifies marquees
   ========================================================================== */
@media (max-width: 960px) {
  .hp-manifest .container {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  .hp-bento__grid {
    grid-template-columns: 1fr;
  }

  .hp-bento__card--wide {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .hp-hero {
    padding-block: var(--s-9);
  }

  /* Stamp moves into normal flow above the headline on mobile so it
     doesn't overlap the skewed display caps. Sits left-aligned with the
     same gutter as the rest of the content. */
  .hp-hero__stamp {
    position: static;
    transform: rotate(-1deg);
    max-width: max-content;
    padding: var(--s-2) var(--s-3);
    margin-bottom: var(--s-5);
    font-size: 10px;
  }
  .hp-hero__stamp .italic { font-size: 12px; }

  /* Ghost watermark fades back further so it doesn't overpower a small screen. */
  .hp-hero__ghost {
    font-size: clamp(180px, 60vw, 320px);
    opacity: 0.35;
    top: auto;
    bottom: clamp(16px, 3vh, 32px);
    right: -4vw;
  }

  /* Restore tighter padding on mobile. */
  .hp-hero__inner {
    padding-bottom: 0;
  }

  /* Caps + italic compress; indents flatten so lines stay legible. */
  .hp-hero__line { gap: var(--s-2); }
  .hp-hero__line--b,
  .hp-hero__line--c { padding-left: 0; }
  .hp-hero__accent { font-size: clamp(28px, 9vw, 44px); top: 0.12em; }

  .hp-hero__lede { font-size: 16px; max-width: 100%; }

  /* Meta strap moves into flow under the CTAs on mobile — the desktop
     paper-card-on-watermark treatment doesn't translate to a narrow
     viewport, so we strip back to plain mono-caps in normal flow. */
  .hp-hero__meta {
    position: static;
    text-align: left;
    margin-top: var(--s-6);
    line-height: 1.7;
    padding: 0;
    background: none;
    border-left: none;
    box-shadow: none;
  }

  .hp-problem__headline { font-size: var(--fs-display-m); max-width: 16ch; }

  /* §3 mobile stage + cards now driven by JS — see the §3 mobile merge
     block further below in this media query (was previously a static
     vertical stack). */
  /* Drop the Room type and Rate columns from the merged table on narrow
     screens. The Total column survives. */
  .hp-twoSides__mergedTable th:nth-child(3),
  .hp-twoSides__mergedTable td:nth-child(3),
  .hp-twoSides__mergedTable th:nth-child(7),
  .hp-twoSides__mergedTable td:nth-child(7) {
    display: none;
  }

  /* Drop the Notes column from the agent's Google Sheet on mobile.
     5 cols → 4 visible (Guest Name | Room # | In | Out). */
  .hp-twoSides__gsheetTable col:nth-child(5),
  .hp-twoSides__gsheetTable th:nth-child(5),
  .hp-twoSides__gsheetTable td:nth-child(5),
  .hp-twoSides__gsheetCols span:nth-child(6) {
    display: none;
  }
  .hp-twoSides__gsheetCols {
    grid-template-columns: 28px 40fr 20fr 20fr 20fr;
  }

  /* Hide the Type column from the hotel PMS table on mobile */
  .hp-twoSides__pmsTable th:nth-child(5),
  .hp-twoSides__pmsTable td:nth-child(5) {
    display: none;
  }

  .hp-industries__panel {
    flex: 0 0 85vw;
    min-height: 380px;
    padding: var(--s-7);
  }

  .hp-proof__lane:nth-child(3),
  .hp-proof__lane:nth-child(4) {
    display: none;
  }

  .hp-cta__headline { font-size: var(--fs-display-l); }

  /* ===== §3 mobile merge ==============================================
     The merge story runs on mobile too, but vertically: card-left and
     card-right sit stacked above and below the stage centre, then both
     converge to the centre and dissolve while the merged TVLDays
     rooming list materialises. JS branches into a mobile timeline that
     drives this; the CSS just makes the stage tall enough and the cards
     sized for a narrow viewport. */
  .hp-twoSides__stage {
    /* Tall enough to hold two stacked before-cards comfortably. */
    height: clamp(560px, 130vw, 680px);
    margin-top: var(--s-6);
    perspective: 800px;
    display: block;
  }
  .hp-twoSides__card {
    /* Centre-anchored absolute positioning so JS can converge them. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92%;
    max-width: 360px;
    margin-inline: 0;
  }
  .hp-twoSides__card--merged { margin-top: 0; }
  /* Trim card chrome so two cards stacked fit the stage. */
  .hp-twoSides__gsheetTabs { padding: var(--s-1) var(--s-2); font-size: 11px; }
  .hp-twoSides__gsheetTab { padding: 4px 10px; font-size: 11px; }
  .hp-twoSides__gsheetTable { font-size: 11px; }
  .hp-twoSides__gsheetTable th,
  .hp-twoSides__gsheetTable td { padding: 4px 6px; }
  .hp-twoSides__gsheetFoot { padding: var(--s-2); font-size: 11px; }
  .hp-twoSides__pmsHead { padding: var(--s-3); }
  .hp-twoSides__pmsLogo { width: 28px; height: 28px; font-size: 14px; }
  .hp-twoSides__pmsHotel { font-size: 12px; }
  .hp-twoSides__pmsTitle { font-size: 14px; }
  .hp-twoSides__pmsTable { font-size: 11px; }
  .hp-twoSides__pmsTable th,
  .hp-twoSides__pmsTable td { padding: 4px 6px; }
  /* Cap the visible rows on mobile so each before-card is short
     enough that two stack within the stage. JS uses the merged card
     unchanged, since it's the centerpiece of phase 3. */
  .hp-twoSides__gsheetGrid { max-height: 180px; overflow: hidden; }
  .hp-twoSides__pmsTable tbody tr:nth-child(n+5) { display: none; }

  /* ===== §1 hero overflow guards ======================================
     The skewed display caps and italic accent annotations were sitting
     side-by-side and overlapping at narrow widths because the caps are
     slanted (extending past their box) and the line is a flex row. On
     mobile we force each accent to its own line so it reads as a
     handwritten footnote under the headline word. */
  .hp-hero__line {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .hp-hero__caps {
    /* A bit smaller so the longest word (SCHEDULES) sits on one line. */
    font-size: clamp(48px, 13vw, 72px);
  }
  .hp-hero__accent {
    position: static;
    display: block;
    flex-basis: 100%;
    margin-top: var(--s-1);
    margin-left: var(--s-3);
    font-size: clamp(22px, 7vw, 36px);
    top: 0;
  }
  .hp-hero__inner {
    max-width: 100%;
    overflow-x: clip;
  }

  /* ===== §4 timeline hero card — shrink avatar, stack stats ===========
     Hero card was rendering with a ~280px avatar circle dominating the
     card. Shrink to a chip-sized monogram and let the metadata flow as
     a vertical list so each stat reads cleanly. */
  .hp-timeline__hero {
    grid-template-columns: 56px 1fr;
    gap: var(--s-3);
    padding: var(--s-5);
  }
  .hp-timeline__heroAvatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
    flex: none;
  }
  .hp-timeline__heroAvatarMark {
    font-size: 18px;
  }
  .hp-timeline__heroStats {
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    font-size: 11px;
  }

  /* ===== §4 timeline tables — narrower columns, smaller type ========== */
  .hp-timeline__roomingTable,
  .hp-timeline__hotelHead {
    font-size: 11px;
  }
  .hp-timeline__roomingTable th,
  .hp-timeline__roomingTable td {
    padding: var(--s-1) var(--s-2);
  }

  /* ===== §5 analytics — 2-col KPIs, 1-col charts, pinned + scrubbed ===
     Same locked-in-place feel as desktop, just sized for a phone. The
     viewport pins as a frame; JS translates the board upward in lockstep
     with scroll, so the user feels the section "hold" while the
     animations play. Pin distance is computed from board/viewport
     heights so it's tight enough to not feel like dead scrolling. */
  .hp-analytics__kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
  }
  .hp-analytics__kpi {
    padding: var(--s-3);
  }
  .hp-analytics__kpiValue {
    font-size: var(--fs-display-s);
  }
  .hp-analytics__row--two {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  /* Pinned viewport frame stays — sized to the KPI scene so only ONE
     scene shows at a time when the lock engages. The board translates
     through the frame as the user scrolls; each scene comes into focus
     in turn rather than overlapping with the next. */
  .hp-analytics__viewport {
    max-width: 100%;
    height: clamp(440px, 56vh, 520px);
    /* Bottom feather so the next scene previews softly as it slides in. */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0,
      #000 calc(100% - 32px),
      transparent 100%);
            mask-image: linear-gradient(to bottom,
      #000 0,
      #000 calc(100% - 32px),
      transparent 100%);
  }
  .hp-analytics__board {
    gap: var(--s-3);
  }
  .hp-analytics__scene {
    /* Mobile scenes are stacked content — JS controls their position via
       the parent board's transform. */
    min-height: 0;
    justify-content: flex-start;
  }
  /* Tighten each chart card. */
  .hp-analytics__chart {
    padding: var(--s-4);
  }
  .hp-analytics__chartHead h3 {
    font-size: 14px;
  }
  .hp-analytics__chartHead {
    margin-bottom: var(--s-3);
  }
  .hp-analytics__chartBody--donut {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .hp-analytics__donut {
    max-width: 180px;
    margin-inline: auto;
  }
  /* SVG charts: cap their rendered height so the card stays compact. */
  .hp-analytics__line,
  .hp-analytics__density {
    max-height: 180px;
  }
  /* Cost-by-city: shorter bars, smaller labels. */
  .hp-analytics__bars { gap: var(--s-2); font-size: 11px; }
  .hp-analytics__barTrack { height: 14px; }
  .hp-analytics__legend { font-size: 12px; gap: var(--s-2); }
  /* Map: smaller. */
  .hp-analytics__map { max-height: 240px; }
  .hp-analytics__mapLegend { font-size: 11px; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  /* Section padding tighter on mobile. */
  .hp-analytics { padding-block: var(--s-6) var(--s-7); }
  .hp-analytics__head { margin-bottom: var(--s-4); }
}


/* ============================================================================
   Reduced motion — freeze everything decorative
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hp-proof__track { animation: none !important; }
  .hp-manifest__vignetteDot { animation: none !important; }
  .hp-bento__loopPulseDot { animation: none !important; }
}