/* Tripp landing — the "Whole trips, booked by text" design (Kasey, 2026-08-29).
   Companion to static/landing.html; the motion is static/js/landing.js.

   Tokens, type, spacing and timings are the design handoff's, transcribed
   from its inline styles; where the prototype's markup and its README
   disagreed the markup won, because the markup is what was looked at.
   Everything under "Narrow screens" at the bottom is ours: the prototype
   was drawn at 1440x900 and only scaled the hub. */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/static/landing-assets/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/static/landing-assets/fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0d0c0a;
  --ink-raised: #14120f;
  --bone: #f7f3ea;
  --bone-dim: #f0ebe1;
  --grey: #a39b8d;
  --grey-dim: #8d8578;
  --grey-faint: #6e675b;
  --grey-faint-2: #5c554a;
  --champagne: #cfbb90;
  --champagne-light: #f2e3bd;
  --champagne-deep: #a8894f;
  --hairline: rgba(240,235,225,0.12);
  --hairline-strong: rgba(240,235,225,0.16);
  --spoke: rgba(207,187,144,0.15);
  --ease: cubic-bezier(0.4,0,0.2,1);
  --gutter: 48px;
}

html { background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone-dim);
  font-family: 'Inter Tight', Helvetica, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: #d9d2c5; text-decoration: none; }
a:hover { color: var(--champagne); }
h2 { margin: 0; }
img { display: block; }
button { font-family: inherit; }
main > * { position: relative; }

/* ---- type roles ---- */
.eyebrow { font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--champagne); }
.h2 { font-size: 52px; font-weight: 300; letter-spacing: -0.046em; line-height: 1.05; color: var(--bone); text-wrap: pretty; }

/* ---- fixed header: brand, account links, corner HUD ---- */
.nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 32px;
  padding: 26px var(--gutter) 34px;
  background: linear-gradient(180deg, rgba(13,12,10,0.72) 0%, rgba(13,12,10,0) 100%);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-brand { display: flex; align-items: center; gap: 8px; color: var(--bone); }
.nav-brand svg { display: block; flex: none; }
.nav-word { font-size: 15px; font-weight: 500; letter-spacing: 0.24em; color: var(--bone); }
.nav-links { display: flex; align-items: center; gap: 26px; font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.nav-links a { flex: none; white-space: nowrap; }
.nav-signin { color: rgba(255,254,251,0.7); }
.nav-signin:hover { color: var(--bone); }
.nav-get { color: var(--champagne); }
.nav-get:hover { color: #e0cfa8; }
.hud { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.hud-title { font-size: 19px; font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; color: #fffefb; white-space: nowrap; }
.hud-sub { font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,254,251,0.5); white-space: nowrap; }

/* ---- 1. hero ---- */
.hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; background: #100e0c; }
/* One img per city, stacked. The incoming picture (.is-on) fades in ON TOP of
   the outgoing one (.was-on), which stays fully opaque underneath until the
   fade is done, so the hero's dark ground never shows between cities (Kasey
   2026-09-04: "a black flash in between them"). The server-rendered first
   img carries is-on so the page paints before landing.js runs. */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: saturate(1.06) contrast(1.02); opacity: 0; transition: opacity 1400ms ease; }
.hero-photo.is-on { opacity: 1; z-index: 1; }
.hero-photo.was-on { opacity: 1; z-index: 0; transition: none; }
/* The gradients and the composer sit ABOVE both pictures. The photos hold
   z-index 0 and 1 for the crossfade, and a positioned box with no z-index
   of its own paints under both, so on 2026-09-04 the incoming city covered
   Ask Tripp as it faded in and hid it for good once lit (Kasey: "as the
   photos fade, they lose the asktripp, which should be fully functional"). */
.hero-top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 170px; background: linear-gradient(180deg, rgba(13,12,10,0.68) 0%, rgba(13,12,10,0) 100%); }
.hero-bottom { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 280px; background: linear-gradient(0deg, rgba(13,12,10,0.84) 0%, rgba(13,12,10,0) 100%); }
.hero-foot { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 14px; display: flex; justify-content: center; }
.hero-foot-in { flex: 0 1 680px; min-width: 0; display: flex; flex-direction: column; }
.scroll-hint { padding-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,254,251,0.5); }
.scroll-hint-chev { font-size: 13px; line-height: 1; }

/* the composer: one champagne rule, label, input, send */
.ask { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0 2px 14px; box-shadow: inset 0 -1px 0 var(--champagne); }
.ask-label { font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--champagne); white-space: nowrap; flex: none; }
.ask-sep { width: 1px; height: 15px; background: rgba(247,243,234,0.22); flex: none; }
.ask-input {
  flex: 1; min-width: 0; padding: 0; background: transparent; border: none; outline: none;
  font-family: 'Inter Tight', Helvetica, sans-serif; font-size: 17px; font-weight: 300; letter-spacing: 0.012em;
  color: #fffefb; text-align: left;
}
.ask-input::placeholder { color: rgba(255,254,251,0.48); }
.ask-send { flex: none; font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--champagne); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.ask-send:hover { color: #e0cfa8; }

/* ---- 2. meet Tripp: the capability hub ---- */
.hub { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 118px var(--gutter) 36px; overflow: hidden; }
.hub-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 760px; }
.hub-scale { width: 100%; flex: none; margin-top: 8px; height: 830px; display: flex; justify-content: center; }
.hub-scale > div { transform-origin: top center; }
@media (max-width: 1620px) { .hub-scale { height: 747px; } .hub-scale > div { transform: scale(.9); } }
@media (max-width: 1400px) { .hub-scale { height: 664px; } .hub-scale > div { transform: scale(.8); } }
@media (max-width: 1200px) { .hub-scale { height: 539px; } .hub-scale > div { transform: scale(.65); } }
@media (max-width: 980px)  { .hub-scale { height: 415px; } .hub-scale > div { transform: scale(.5); } }
@media (max-height: 1000px) { .hub-scale { height: 664px; } .hub-scale > div { transform: scale(.8); } }
@media (max-height: 880px)  { .hub-scale { height: 581px; } .hub-scale > div { transform: scale(.7); } }
@media (max-height: 780px)  { .hub-scale { height: 498px; } .hub-scale > div { transform: scale(.6); } }
.hub-stage { position: relative; width: 1240px; height: 830px; flex: none; }
.hub-spokes { position: absolute; left: 0; top: 0; }
.hub-spokes line { stroke: var(--spoke); }
.hub-beam {
  position: absolute; left: 620px; top: 399px; height: 1.5px; width: 200px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(207,187,144,0) 0px, rgba(207,187,144,0) 62px, rgba(207,187,144,0.95) 110px, #e6d3a3 100%);
  transition: transform 0.9s cubic-bezier(0.6,0.05,0.25,1), width 0.9s cubic-bezier(0.6,0.05,0.25,1);
}
.hub-core {
  position: absolute; left: 620px; top: 400px; transform: translate(-50%,-50%);
  width: 126px; height: 126px; border-radius: 50%; background: var(--ink-raised); border: 1px solid rgba(207,187,144,0.65);
  display: flex; align-items: center; justify-content: center;
}
.hub-core svg { display: block; }
.hub-node {
  position: absolute; width: 262px; transform: translate(-50%,-42px);
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  cursor: pointer; opacity: 0.85; transition: opacity 0.6s;
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: center;
}
.hub-node.is-on { opacity: 1; }
.hub-ring {
  width: 84px; height: 84px; border-radius: 50%; background: #100e0c; border: 1px solid rgba(240,235,225,0.28);
  display: flex; align-items: center; justify-content: center; transform: scale(1);
  transition: transform 0.6s, border-color 0.6s, background 0.6s;
}
.is-on .hub-ring { background: #171410; border-color: rgba(207,187,144,0.9); transform: scale(1.16); }
.hub-ring svg { display: block; }
.hub-title { font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: #d3ccbe; transition: color 0.6s; }
.is-on .hub-title { color: var(--bone); }
.hub-desc { font-size: 16px; font-weight: 300; line-height: 1.5; letter-spacing: 0.02em; color: #c9c1b2; opacity: 0; transition: opacity 0.6s; text-wrap: pretty; }
.is-on .hub-desc { opacity: 1; }

/* ---- 3. flight: a scrubbed 320vh scene ---- */
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.fly { position: relative; height: 320vh; background: var(--ink); }
.fly-words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; }
.fly-word { display: flex; flex-direction: column; gap: 18px; will-change: transform, opacity; }
.fly-word.r { align-items: flex-end; text-align: right; }
.fly-big { font-size: 5.8vw; font-weight: 300; letter-spacing: -0.045em; color: var(--bone); white-space: nowrap; line-height: 1; }
.fly-word p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; letter-spacing: 0.015em; color: var(--grey); max-width: 30ch; text-wrap: pretty; }
.fly-plane { position: absolute; left: 50%; top: 50%; height: 94vh; aspect-ratio: 2125 / 2750; transform: translate(-50%,-50%); }
/* No will-change on the two layers whose SCALE the scrub moves (.fly-plane 0.28 -> 1, .hot-photo 1.03 -> 1.10).
   will-change: transform pins the layer's raster at the scale it was first painted, so the jet was drawn at 0.28
   and stretched 3.6x for the rest of the scene, and the lobby photo grew soft as it zoomed (Kasey 2026-09-03:
   "I want the images on the front page to be much clearer"). Layers that only translate or fade keep it. */
.fly-jet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 80px rgba(0,0,0,0.55)); }
.fly-cabin { position: absolute; left: 50%; top: 50%; height: 96%; width: auto; transform: translate(-50%,-50%); opacity: 0; }
.fly-spec { position: absolute; top: 50%; transform: translateY(-50%); width: 270px; display: flex; flex-direction: column; gap: 14px; opacity: 0; }
.fly-spec.l { left: 60px; }
.fly-spec.r { right: 60px; text-align: right; }
.fly-spec p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; letter-spacing: 0.015em; color: #e6e0d4; text-wrap: pretty; }

/* ---- 4. capabilities: accordion + live app screenshots ---- */
.caps { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; max-width: 1300px; margin: 0 auto; padding: 100px var(--gutter); }
.caps-in { display: flex; flex-wrap: wrap; gap: 64px 80px; align-items: center; }
.caps-left { flex: 1 1 460px; min-width: min(380px, 100%); display: flex; flex-direction: column; gap: 26px; }
.acc { display: flex; flex-direction: column; }
.acc-row { display: flex; flex-direction: column; box-shadow: inset 0 1px 0 rgba(240,235,225,0.13); }
.acc-head {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 19px 2px; margin: 0;
  cursor: pointer; background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
.acc-head:hover { background: rgba(240,235,225,0.03); }
.acc-num { width: 26px; flex: none; font-weight: 500; font-size: 11px; letter-spacing: 0.05em; color: var(--grey-dim); }
.acc-title { flex: 1; min-width: 0; font-size: 19px; font-weight: 400; letter-spacing: -0.015em; color: var(--bone); }
.acc-mark { flex: none; font-size: 18px; font-weight: 300; color: var(--grey-dim); width: 16px; text-align: center; line-height: 1; }
.acc-body { display: none; margin: 0; padding: 0 2px 22px 42px; font-size: 15.5px; font-weight: 300; line-height: 1.65; letter-spacing: 0.02em; color: var(--grey); max-width: 52ch; text-wrap: pretty; }
.acc-row.is-open .acc-body { display: block; }
.caps-right {
  flex: 1 1 520px; min-width: min(420px, 100%); box-sizing: border-box; padding: 26px;
  border-radius: 18px; border: 1px solid rgba(240,235,225,0.1);
  background: linear-gradient(145deg, #201c16 0%, #171410 45%, #221d14 100%);
}
.caps-right-in { display: flex; flex-direction: column; gap: 14px; }
.cap-box { position: relative; width: 100%; height: min(62vh, 600px); border-radius: 10px; overflow: hidden; background: #100e0b; transition: height 700ms var(--ease); }
.cap-shot { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 700ms ease; }
.cap-shot.is-on { opacity: 1; }
.cap-shot img { width: 100%; height: auto; border-radius: 6px; --bh: min(62vh, 600px); animation: none; }
.cap-shot.is-on img { animation: capScan 7.5s ease-in-out forwards; }
@keyframes capScan { 0%, 10% { transform: translateY(0); } 100% { transform: translateY(min(0px, calc(-100% + var(--bh)))); } }
.cap-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cap-src { font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey-faint); }

/* ---- 5. hotels: a scrubbed 260vh scene, the card assembles ---- */
.hot { position: relative; height: 260vh; background: var(--ink); }
.hot .stage { background: var(--ink); }
.hot-photo { position: absolute; inset: 0; }
.hot-photo img { width: 100%; height: 100%; object-fit: cover; }
.hot-scrim { position: absolute; inset: 0; background: rgba(13,12,10,0.66); pointer-events: none; }
.hot-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 96px 24px 36px; box-sizing: border-box; }
.hot-head { font-size: 40px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--bone); }
.card { width: min(880px, 92vw); background: var(--bone); color: var(--ink-raised); border-radius: 8px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,0.55); opacity: 0; will-change: transform, opacity; }
.card-hero { position: relative; height: 140px; overflow: hidden; }
.card-hero img { width: 100%; height: 100%; object-fit: cover; }
.card-grid { display: grid; grid-template-columns: 1fr 290px; }
.card-main { padding: 22px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.part { opacity: 0; will-change: transform, opacity; }
.card-id { display: flex; flex-direction: column; gap: 7px; }
.card-city { font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a7c5f; }
.card-name { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-raised); text-wrap: pretty; }
.card-score { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 300; color: #57534a; }
.card-score b { background: #e8e0cf; padding: 2px 7px; font-weight: 600; color: var(--ink-raised); }
.card-k { font-weight: 500; font-size: 10px; letter-spacing: 0.08em; color: #8a7c5f; }
.card-dates { display: flex; align-items: center; gap: 14px; padding-top: 15px; border-top: 1px solid rgba(20,18,15,0.1); }
.card-date { display: flex; flex-direction: column; gap: 3px; flex: none; }
.card-date.r { align-items: flex-end; }
.card-date b { font-size: 19px; font-weight: 400; color: var(--ink-raised); white-space: nowrap; }
.card-nights { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 40px; }
.card-nights i { display: block; width: 100%; height: 1px; background: rgba(20,18,15,0.25); }
.card-room { display: flex; flex-direction: column; gap: 6px; padding-top: 15px; border-top: 1px solid rgba(20,18,15,0.1); }
.card-room-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.card-room-name { font-size: 16px; font-weight: 400; color: var(--ink-raised); }
.card-more { font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; color: #8a7c5f; white-space: nowrap; }
.card-guests { font-size: 13px; font-weight: 300; color: #57534a; }
.card-note { border-left: 2px solid #8a7c5f; padding-left: 12px; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: #3d3a33; }
.card-note b { font-weight: 600; }
.card-side { background: #eee7d8; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.card-rate { display: flex; flex-direction: column; gap: 8px; }
.card-rate-k { font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a7c5f; }
.card-price { font-size: 40px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--ink-raised); }
.card-over { font-size: 13px; font-weight: 300; color: #6f685c; }
.card-say { font-size: 13px; font-weight: 300; line-height: 1.5; color: #6f685c; text-wrap: pretty; }
.card-act { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.card-book { display: block; text-align: center; padding: 14px 12px; background: var(--ink-raised); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.card-book:hover { background: #2a2620; color: var(--bone); }
.card-cmp { border-top: 1px solid rgba(20,18,15,0.12); padding-top: 11px; font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; color: #8a7c5f; }

/* ---- 6. aftercare: a scrubbed 300vh timeline ---- */
.proc { position: relative; height: 300vh; background: var(--ink); }
.proc .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 90px 24px 30px; box-sizing: border-box; }
.proc-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.proc-h { font-size: 38px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--bone); }
.proc-req { color: var(--champagne); font-size: 17px; font-weight: 300; letter-spacing: 0.01em; }
.timeline { position: relative; width: min(940px, 94vw); height: 60vh; flex: none; }
.tl-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
/* The deep stop is the token defined at the top of this file — written raw
   until 2026-08-30, so a moved brand gold would have left the rail behind
   (sweep 20260829T224221Z, option A: no pixel changes; #e6d3a3 stays unnamed
   on purpose, it is this rail's own light stop, not a brand colour). */
.tl-line { position: absolute; left: 50%; top: 0; width: 1px; height: 0; background: linear-gradient(180deg, #e6d3a3, var(--champagne-deep)); }
.step { position: absolute; width: 44%; display: flex; flex-direction: column; gap: 5px; opacity: 0; will-change: transform, opacity; }
.step.l { right: 53.5%; text-align: right; }
.step.r { left: 53.5%; text-align: left; }
.step-tag { font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--champagne); }
.step-title { font-size: 19px; font-weight: 400; letter-spacing: -0.015em; color: var(--bone); text-wrap: pretty; }
.step-body { font-size: 14px; font-weight: 300; line-height: 1.5; letter-spacing: 0.02em; color: var(--grey); text-wrap: pretty; }
.dot { position: absolute; left: 50%; width: 9px; height: 9px; margin: 2px 0 0 -4.5px; border-radius: 50%; background: var(--champagne); opacity: 0; }

/* ---- 7. values ---- */
.values { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; max-width: 1240px; margin: 0 auto; padding: 100px var(--gutter); }
.values-in { display: flex; flex-direction: column; gap: 40px; }
.values-head { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.values-h { font-size: 48px; letter-spacing: -0.045em; }
.stances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.stance { display: flex; flex-direction: column; gap: 11px; padding: 26px 0; box-shadow: inset 0 -1px 0 var(--hairline); }
.stance-t { font-size: 22px; font-weight: 300; letter-spacing: -0.024em; color: var(--bone); text-wrap: pretty; }
.stance-b { font-size: 15.5px; font-weight: 300; line-height: 1.6; letter-spacing: 0.02em; color: var(--grey); max-width: 46ch; text-wrap: pretty; }

/* ---- 8. anywhere: the globe ---- */
.any { position: relative; min-height: 100vh; box-sizing: border-box; overflow: hidden; }
.globe { position: absolute; left: 70%; top: 50%; transform: translate(-50%,-50%); width: min(88vh, 50vw); height: min(88vh, 50vw); cursor: grab; touch-action: none; z-index: 1; }
.any-in { position: relative; z-index: 2; pointer-events: none; max-width: 1240px; margin: 0 auto; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 130px var(--gutter) 80px; }
.any-col { display: flex; flex-direction: column; gap: 20px; max-width: 430px; }
.any-h { font-size: clamp(28px, 3.1vw, 46px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.08; color: var(--bone); white-space: nowrap; }
.any-h span { color: var(--champagne); }
.any-next { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.any-city {
  align-self: flex-start; cursor: pointer; pointer-events: auto;
  font-size: 34px; font-weight: 300; letter-spacing: -0.032em; line-height: 1.05; color: var(--bone);
  background: none; border: 0; padding: 0; margin: 0; text-align: left; transition: opacity 300ms;
}
.any-city:hover { opacity: 1 !important; }
.any-p { margin: 0; padding-top: 10px; font-size: 17px; font-weight: 300; line-height: 1.65; letter-spacing: 0.015em; color: var(--grey); text-wrap: pretty; }
.any-hint { font-weight: 500; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey-faint-2); }

/* ---- 9. get Tripp ---- */
.cta { position: relative; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 100px var(--gutter); overflow: hidden; }
.cta-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms ease; }
.cta-bg img.is-on { opacity: 0.5; }
.cta-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(13,12,10,0.62) 0%, rgba(13,12,10,0.84) 58%, #0d0c0a 100%); }
.cta-in { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 34px; text-align: center; }
.cta-h { font-size: 62px; font-weight: 300; letter-spacing: -0.048em; line-height: 1.02; color: var(--bone); max-width: 24ch; text-wrap: pretty; }
.cta .ask { width: 100%; max-width: 680px; box-sizing: border-box; }

/* ---- 10. footer ---- */
.foot-in { max-width: 1440px; margin: 0 auto; padding: 100px 72px 40px; display: flex; flex-direction: column; gap: 110px; }
.foot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px 48px; }
.foot-brand { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.foot-lockup { display: flex; align-items: center; gap: 12px; }
.foot-lockup svg { display: block; flex: none; }
.foot-word { font-size: 20px; font-weight: 500; letter-spacing: 0.2em; background: linear-gradient(120deg, var(--champagne-light) 0%, var(--champagne-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-tag { font-size: 19px; font-weight: 300; line-height: 1.55; letter-spacing: 0.015em; color: var(--grey); max-width: 32ch; text-wrap: pretty; }
.foot-beta { flex: none; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-dim); white-space: nowrap; padding-top: 4px; }
.foot-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 40px; padding-top: 26px; box-shadow: inset 0 1px 0 var(--hairline); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-copy { flex: 1; color: var(--grey-dim); white-space: nowrap; }
.foot-links { display: flex; gap: 40px; }
.foot-links a { flex: none; white-space: nowrap; color: var(--grey); }
.foot-links a:hover { color: var(--bone); }
/* The address reads as an address: no caps, no tracking. It is the one
   thing in this row a visitor might type out. */
.foot-links a.foot-mail { text-transform: none; letter-spacing: 0.04em; }
.foot-made { flex: 1; text-align: right; color: var(--grey-dim); white-space: nowrap; }
/* Unsplash asks for a credit line; the nine hero photographers, in the hero's order. */
.foot-credit { margin-top: 14px; font-weight: 300; font-size: 11px; letter-spacing: 0.02em; text-transform: none; color: var(--grey-dim); line-height: 1.6; text-wrap: pretty; }

/* ---- Reduced motion: no auto-cycles (landing.js), no cross-fades, no pan.
   The scroll-scrubbed scenes stay, because they only move when the reader
   does, and hiding the hotel card would hide the copy. ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-photo { transition: none; }
  .hub-beam, .hub-node, .hub-ring, .hub-title, .hub-desc, .cap-box, .cap-shot, .cta-bg img, .any-city { transition: none; }
  .cap-shot.is-on img { animation: none; }
}

/* ---- Narrow screens (ours; the prototype was drawn for 1440x900) ---- */
@media (max-width: 1100px) {
  .fly-big { font-size: 7vw; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .nav { grid-template-columns: 1fr auto; gap: 16px; padding: 20px var(--gutter) 28px; }
  .hud { display: none; }
  .h2 { font-size: clamp(34px, 8vw, 52px); }
  .cta-h { font-size: clamp(36px, 9vw, 62px); }
  .values-h { font-size: clamp(32px, 8vw, 48px); }
  /* the words leave the middle to the jet: "From plan," top-left, "to plane." bottom-right */
  .fly-words { flex-direction: column; justify-content: space-between; align-items: stretch; padding: 96px var(--gutter) 44px; box-sizing: border-box; }
  .fly-word.l { align-self: flex-start; }
  .fly-word.r { align-self: flex-end; }
  .fly-big { font-size: 11vw; }
  .fly-word p { font-size: 15px; max-width: 26ch; }
  .fly-plane { height: 50vh; }
  /* the seat / on-board notes: above and below the cabin plan (landing.js
     centres each on its top with translateY(-50%)) */
  .fly-spec { width: min(270px, 46vw); }
  .fly-spec.l { top: 20vh; }
  .fly-spec.r { top: 81vh; }
  .fly-spec p { font-size: 14px; }
  .fly-spec { width: min(270px, 42vw); }
  .fly-spec.l { left: var(--gutter); }
  .fly-spec.r { right: var(--gutter); }
  .fly-spec p { font-size: 15px; }
  .caps-in { gap: 40px; }
  .caps-right { padding: 16px; border-radius: 14px; }
  .stances { grid-template-columns: 1fr; }
  .any { display: flex; flex-direction: column; }
  .any-in { min-height: 0; padding: 110px var(--gutter) 24px; }
  .any-h { white-space: normal; }
  .globe { position: relative; left: auto; top: auto; transform: none; width: min(84vw, 58vh); height: min(84vw, 58vh); margin: 96px auto 32px; }
  .foot-in { padding: 70px var(--gutter) 32px; gap: 64px; }
  .foot-top, .foot-bottom { flex-wrap: wrap; }
  /* Four links and the address do not fit one phone-width row at a 40px gap
     (the Refunds link made it 454px on a 390px screen), so the row wraps. */
  .foot-links { flex-wrap: wrap; gap: 12px 28px; }
  .foot-made { flex: 1 1 100%; text-align: left; }
}
@media (max-width: 720px) {
  .hero { min-height: 560px; }
  .ask { gap: 12px; }
  /* the hotel scene: no scrub on a phone. The assembled card is taller than
     a phone's viewport, so a pinned stage would cut its Book button off;
     instead the section scrolls normally with the card whole. landing.js
     reads a section no taller than the viewport as fully scrubbed. */
  .hot { height: auto; }
  .hot .stage { position: relative; height: auto; overflow: hidden; }   /* still clips the photo's scale */
  .hot-in { position: relative; inset: auto; gap: 22px; padding: 96px 12px 40px; }
  .card, .card .part { opacity: 1 !important; transform: none !important; }
  .card-grid { grid-template-columns: 1fr; }
  .card-hero { height: 110px; }
  .card-main { padding: 18px 20px 20px; }
  .card-name { font-size: 21px; }
  .hot-head { font-size: 30px; text-align: center; }
  .proc-h { font-size: 30px; }
  .proc-req { font-size: 15px; }
  .step { width: 45%; }
  .step-title { font-size: 16px; }
  .step-body { font-size: 13px; }
  .any-city { font-size: 28px; }
}
/* under 640px the hub stops being a diagram and becomes the same eight nodes
   as a two-column list: same markup, spokes and beam hidden, every
   description shown. */
@media (max-width: 640px) {
  .hub { padding-top: 96px; }
  .hub-scale, .hub-scale > div { height: auto; transform: none; }
  .hub-scale { margin-top: 28px; }
  .hub-stage { position: static; width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .hub-spokes, .hub-beam, .hub-core { display: none; }
  .hub-node { position: static; width: auto; transform: none; opacity: 1; gap: 9px; }
  .hub-ring { width: 56px; height: 56px; }
  .is-on .hub-ring { transform: none; }
  .hub-title { font-size: 15px; }
  .hub-desc { opacity: 1; font-size: 14px; }
}
@media (max-width: 420px) {
  .ask-label, .ask-sep { display: none; }
  .hub-stage { grid-template-columns: 1fr; }
}