/* Waypoint Desk (/desk/, /desk/request/ and /desk/about/), a light-mode
   product. The house system of the expedition site, set on sand: Playfair
   Display over Source Sans 3, dark-gold eyebrows with a short rule, square
   buttons in spaced capitals, the ringed-plus FAQ and the offset portrait
   frame of /about/. Desk's own playful pieces (the phone conversation, the
   crossing strips, the cards, the suitcase that packs as you scroll and the
   boarding pass) are drawn in the same palette and type. Colors are tokens,
   so everything follows :root. Small text keeps 4.5:1 on its ground; input
   and chip borders keep 3:1. This file stands alone so the Desk pages load
   one stylesheet; js/desk.js runs the motion, and every piece reads complete
   without it. */

:root {
  --bg: #F5EDE0;              /* sand, the homepage's light sections */
  --bg-alt: #FAF6F0;          /* lighter sand for alternate bands */
  --surface: #FFFDF9;         /* paper: cards, the boarding pass, the form */
  --ink: #1A1A1A;             /* headings and strong text: 15:1 on sand */
  --body: #3D3A36;            /* running text: 9.7:1 */
  --muted: #5F5850;           /* small print: 6:1 */
  --accent: #8A6430;          /* dark gold, labels and links: 4.6:1 on sand */
  --accent-deep: #6E4E22;     /* link hover */
  --gold: #C4944A;            /* fills and decoration; ink on gold is 6.4:1 */
  --gold-light: #D4A85C;
  --teal: #1B5E6B;            /* the house teal: sand text on it is 6.3:1 */
  --teal-deep: #0F3A42;
  --sky: #DCE8E4;             /* pale teal for small tags */
  --sand-deep: #EADCC4;       /* the compass dial behind the phone */
  --line: rgba(138, 100, 48, .22);
  --line-strong: rgba(138, 100, 48, .45);
  --field: #FFFFFF;
  --field-line: #8F8577;      /* 3.6:1 on white */
  --err: #A3341F;
  --btn-bg: #C4944A;
  --btn-ink: #1A1A1A;
  --btn-hover-bg: #1A1A1A;
  --btn-hover-ink: #F5EDE0;
  --nav-bg: rgba(250, 246, 240, .94);
  --nav-h: 72px;
  --footer-bg: #1A1A1A;
  --footer-ink: #F5EDE0;
  --footer-muted: #B8AE9F;    /* 8:1 on charcoal */
  --footer-link: #D4A85C;
  --footer-line: rgba(196, 148, 74, .22);
  --mark: #8A6430;            /* the logo's strokes on a light ground */
  --mark-dot: #C4944A;
  --shadow: 0 1px 2px rgba(60, 42, 14, .06), 0 22px 44px -28px rgba(60, 42, 14, .34);
  --shadow-lift: 0 2px 4px rgba(60, 42, 14, .06), 0 34px 64px -34px rgba(60, 42, 14, .5);
  --frame: 16px;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  font-synthesis-weight: none;
}
body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer :focus-visible { outline-color: var(--footer-link); }
.cta-final :focus-visible { outline-color: var(--ink); }
[hidden] { display: none !important; }
::selection { background: rgba(196, 148, 74, .3); color: var(--ink); }
main:focus { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; color: var(--ink); text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
p { text-wrap: pretty; }
.pass, .float-receipt, .phone { font-variant-numeric: lining-nums; }   /* prices and seats, not old-style figures */
.label {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  text-wrap: balance;
}
.rule { display: block; width: 44px; height: 1px; background: var(--accent); margin: 22px 0 26px; border: 0; }
.h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem); letter-spacing: -.005em; }
.section-head { max-width: 660px; margin-bottom: clamp(40px, 5vw, 60px); }
.section-head p { font-size: 1.0625rem; line-height: 1.75; color: var(--body); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .rule { margin-left: auto; margin-right: auto; }
.section-head.split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-head.split p { max-width: 24em; margin-bottom: 26px; }

.section { padding: clamp(72px, 8vw, 112px) 0; }
.alt { background: var(--bg-alt); }
.section-actions { margin-top: clamp(36px, 4.5vw, 52px); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.section-actions.center { justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 18px 34px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (hover: hover) {
  .btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-ink); border-color: var(--btn-hover-bg); }
  .btn-line:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .btn-ink:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
}
.btn:disabled { opacity: .6; cursor: progress; }
.text-link {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  padding: 6px 0 5px;
  border-bottom: 1px solid var(--line-strong);
  transition: color .25s ease, border-color .25s ease;
}
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.prose a, .faq-answer a, .people p a, .pricing-copy p a, .fee-line a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.prose a:hover, .faq-answer a:hover, .people p a:hover, .pricing-copy p a:hover, .fee-line a:hover { color: var(--accent-deep); }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 72px;
  padding: 0 max(32px, calc((100% - 1320px) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line);
}
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.lockup svg { width: 34px; height: 34px; flex: 0 0 auto; }
.lockup-text {
  font-size: .75rem; font-weight: 600; letter-spacing: .35em;
  text-transform: uppercase; white-space: nowrap;
}
.lockup-text b { font-weight: 600; color: var(--accent); }
.mark-ring, .mark-route, .mark-tick { stroke: var(--mark); }
.mark-needle { fill: var(--mark); }
.mark-dot { fill: var(--mark-dot); }
.mark-origin { fill: var(--bg); stroke: var(--mark); }
.nav .mark-origin { fill: var(--bg-alt); }
.quote .mark-origin { fill: var(--surface); }
.footer .mark-ring, .footer .mark-route, .footer .mark-tick { stroke: var(--gold); }
.footer .mark-needle, .footer .mark-dot { fill: var(--gold); }
.footer .mark-origin { fill: var(--footer-bg); stroke: var(--gold); }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  position: relative;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  padding: 8px 0;
  transition: color .25s ease;
}
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: .18em; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--accent); }
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links a.btn { padding: 12px 22px; font-size: .69rem; color: var(--btn-ink); }
@media (hover: hover) { .nav-links a.btn:hover { color: var(--btn-hover-ink); } }
.menu-btn { display: none; }


/* ---------- hero: the conversation that books a trip ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 8vw, 112px);
}
/* The hero's sky (js/desk.js part 13): a faint dotted world under the words,
   where routes between airports in view draw themselves in gold. The script
   thins it behind the text and softens its edges; without the script the
   hero is plain sand, as before. */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-sky canvas { position: absolute; left: 0; top: 0; }
/* The map arrives as morning crosses it, from the west. */
.hero-sky .sky-map {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  transition: -webkit-mask-position 2.6s cubic-bezier(.45, 0, .2, 1), mask-position 2.6s cubic-bezier(.45, 0, .2, 1);
}
.hero-sky.on .sky-map { -webkit-mask-position: 0 0; mask-position: 0 0; }
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.75rem, 1.5rem + 4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin-bottom: 28px;
}
.hero h1 em {
  display: block;
  margin-top: .32em;
  font-size: .5em;
  line-height: 1.2;
  letter-spacing: 0;
}
.hero .lede {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.75;
  color: var(--body);
  max-width: 33em;
  margin-bottom: 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fee-line {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 33em;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--body);
}
.fee-line strong { color: var(--ink); font-weight: 600; }
.fee-line a { white-space: nowrap; }

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
}
.dial {
  position: absolute;
  left: 50%; top: 50%;
  width: 600px; height: 600px;
  max-width: none;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.dial-fill { fill: var(--sand-deep); opacity: .62; }
.dial-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.dial-dash { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 8; }
.dial-tick { stroke: var(--accent); stroke-width: 1.4; }
.dial-needle { fill: var(--gold); }

/* The floats hang off the phone's corners, over its bezel and compose bar,
   never over the conversation. */
.phone-wrap { position: relative; z-index: 2; margin: 30px 0 84px; }
.phone {
  position: relative;
  width: 318px;
  background: #161514;
  border-radius: 46px;
  padding: 11px;
  box-shadow: 0 46px 80px -36px rgba(40, 28, 10, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.phone-screen { background: var(--bg-alt); border-radius: 36px; overflow: hidden; }
.phone-head {
  display: flex; align-items: center; gap: 12px;
  padding: 26px 18px 13px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.phone-avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.phone-avatar svg { width: 26px; height: 26px; }
.phone-avatar .mark-origin { fill: var(--bg-alt); }
.phone-who { display: flex; flex-direction: column; line-height: 1.25; }
.phone-who b { font-weight: 600; font-size: .95rem; color: var(--ink); }
.phone-who span { font-size: .75rem; color: var(--muted); }
.chat { padding: 16px 13px 20px; display: flex; flex-direction: column; gap: 9px; font-size: .86rem; line-height: 1.42; }
.msg { max-width: 84%; padding: 10px 13px; text-wrap: pretty; }
.msg.me { align-self: flex-end; background: var(--teal); color: #F5EDE0; border-radius: 16px 16px 4px 16px; }
.msg.us { align-self: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }
.msg.opt {
  align-self: flex-start;
  width: 88%; max-width: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.opt-top { display: flex; justify-content: space-between; align-items: center; font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.opt-top b { font-weight: 600; letter-spacing: .16em; color: var(--teal-deep); background: var(--sky); padding: 3px 8px; border-radius: 999px; }
.opt-route { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.45rem; line-height: 1; color: var(--ink); }
.opt-route i { flex: 1; border-top: 1.5px dashed var(--line-strong); }
.opt-meta { font-size: .74rem; color: var(--muted); text-wrap: pretty; }
.msg.done {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: var(--ink);
  font-weight: 600;
  border-radius: 16px 16px 16px 4px;
}
.msg.done svg { width: 14px; height: 14px; }
.phone-compose {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 0 12px 12px;
  height: 42px;
  padding: 0 5px 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem; color: var(--muted);
  white-space: nowrap; overflow: hidden;
}
.phone-compose i { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--gold); color: var(--ink); }
.phone-compose svg { width: 15px; height: 15px; }

.float { position: absolute; z-index: 3; box-shadow: var(--shadow-lift); }
.float-receipt {
  left: -104px;
  bottom: -80px;
  rotate: -4deg;
  width: 230px;
  display: grid; gap: 6px;
  padding: 13px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
}
.fr-k { font-size: .6rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.fr-row { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--body); font-variant-numeric: lining-nums tabular-nums; }
.fr-fee { color: var(--accent); }
.fr-total { border-top: 1px solid var(--ink); padding-top: 7px; margin-top: 2px; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.float-pill {
  right: -80px;
  top: -28px;
  rotate: 5deg;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-size: .8rem; font-weight: 500; white-space: nowrap;
}
.float-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

@keyframes desk-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .phone .msg, .hero-art .float { animation: desk-rise .6s var(--ease) both; animation-delay: var(--d, 0s); }
}

/* ---------- the crossing strips (js/desk.js slides them with the scroll) ---------- */
.strips { position: relative; height: 212px; overflow: hidden; background: var(--bg); }
.strip { position: absolute; left: -8%; right: -8%; overflow: hidden; white-space: nowrap; }
.strip-teal { top: 46px; rotate: 2.2deg; background: var(--teal); color: #F5EDE0; padding: 15px 0; }
.strip-gold { top: 92px; rotate: -2.4deg; background: var(--gold); color: var(--ink); padding: 17px 0; box-shadow: 0 18px 34px -20px rgba(60, 42, 14, .5); }
.strip-track { display: flex; width: max-content; transform: translateX(-33.333%); will-change: transform; }
.strip-track ul { display: flex; align-items: center; gap: 30px; padding-right: 30px; list-style: none; }
.strip-teal li { display: inline-flex; align-items: center; gap: 30px; font-size: .78rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.strip-teal li::after { content: ''; width: 6px; height: 6px; background: var(--gold-light); rotate: 45deg; }
.strip-gold li { display: inline-flex; align-items: center; gap: 30px; font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.05rem); line-height: 1.2; }
.strip-gold li::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .5; }

/* ---------- what one message gets you: the cards ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.card {
  position: relative;
  grid-column: span 2;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  min-height: 340px;
  padding: clamp(26px, 2.6vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow .45s var(--ease), translate .45s var(--ease);
}
@media (hover: hover) { .card:hover { box-shadow: var(--shadow); translate: 0 -2px; } }
.c-flights { grid-column: span 4; min-height: 380px; }
.c-wild { grid-column: span 6; }
.card-k { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card h3 { font-size: clamp(1.35rem, 1.12rem + .6vw, 1.65rem); line-height: 1.2; }
.card-copy h3 { margin-bottom: 10px; }
.c-flights h3 { font-size: clamp(1.55rem, 1.2rem + 1vw, 2.05rem); }
.card p { font-size: 1rem; line-height: 1.65; color: var(--body); max-width: 34em; }
.c-flights .card-copy { max-width: 30em; }

.art { width: 72px; height: 96px; flex: 0 0 auto; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.art-sm { width: 44px; height: 44px; }
.art .gold { fill: var(--gold); stroke: none; }
.art .gold-s { stroke: var(--gold); stroke-width: 1.8; }
.art .soft { stroke: var(--line-strong); stroke-width: 3; }
.art .seal { fill: var(--surface); stroke: var(--gold); stroke-width: 1.6; }
.art .tick { stroke: var(--line-strong); }
.art-num { font: 600 8px var(--font-body); letter-spacing: .5px; fill: var(--accent); stroke: none; }
.needle-art .needle { transform-box: view-box; transform-origin: 24px 24px; }

/* The arc sits in the card's flow, tucked up beside the label, so a heading
   that wraps can never run into it. */
.art-arc {
  align-self: flex-end;
  width: min(66%, 470px);
  height: auto;
  margin: -34px -6px -10px 0;
  overflow: visible;
  fill: none;
}
.arc-base { stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 4 7; }
.arc-trail { stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.arc-from { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.arc-to { fill: var(--gold); }
.arc-code { font: 600 11px var(--font-body); letter-spacing: 2px; fill: var(--muted); }
.arc-plane path { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }

.tl { list-style: none; display: grid; gap: 8px; }
.tl li { display: flex; align-items: center; gap: 14px; padding: 9px 13px; border: 1px solid var(--line); background: var(--bg-alt); font-size: .95rem; color: var(--ink); }
.tl time { font-size: .8rem; letter-spacing: .04em; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.tl li.now { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); background: var(--surface); }
.tl li.now time { color: var(--accent); }

.mini-chat { display: flex; flex-direction: column; gap: 8px; }
.mini-chat p { font-size: .92rem; line-height: 1.45; padding: 10px 13px; max-width: 90%; }
.mini-chat .us { align-self: flex-start; color: var(--ink); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; }
.mini-chat .me { align-self: flex-end; color: #F5EDE0; background: var(--teal); border-radius: 14px 14px 4px 14px; }

.card-photo { padding: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 0; min-height: 400px; }
.card-photo picture { position: relative; display: block; min-height: 400px; }
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-photo-copy { padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.card-photo h3 { font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.35rem); line-height: 1.12; margin-bottom: 14px; }
.card-photo .text-link { margin-top: 22px; }

.for { margin-top: clamp(56px, 7vw, 88px); }
.for .label { margin-bottom: 22px; }
.for-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); }
.for-grid li { border-top: 1px solid var(--ink); padding-top: 22px; }
.for-grid svg { width: 26px; height: 26px; stroke: var(--accent); margin-bottom: 14px; }
.for-grid h4 { font-size: 1.3rem; margin-bottom: 6px; }
.for-grid p { font-size: .97rem; line-height: 1.6; }

/* ---------- packing: the suitcase fills as the page scrolls ----------
   Without the script, or with reduced motion, this is an ordinary section
   showing the packed case. js/desk.js adds .is-live: the section grows tall
   and the stage holds still under the header while the case fills. */
.pack {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 680px at 72% 50%, #F1E5D1 0%, var(--bg-alt) 70%);
  padding: clamp(72px, 8vw, 112px) 0;
}
.pack.is-live { height: calc(100vh + 1100px); padding: 0; overflow: visible; overflow-x: clip; }
.pack.is-live .pack-stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pack-row { width: 100%; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.pack-copy { display: flex; flex-direction: column; gap: 22px; }
.pack-copy .label, .pack-copy .h2 { margin: 0; }
.meter { display: flex; align-items: center; gap: 14px; font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.meter-bar { position: relative; width: 180px; height: 3px; background: var(--line); }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--gold); transition: width .4s var(--ease); }
.meter b { font-weight: 600; color: var(--ink); letter-spacing: .12em; font-variant-numeric: lining-nums tabular-nums; }
.checklist { list-style: none; display: grid; gap: 8px; }
.checklist li {
  display: flex; align-items: center; gap: 14px;
  min-height: 50px; padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 1rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.checklist .box { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border: 1.5px solid var(--field-line); color: var(--ink); transition: background .3s ease, border-color .3s ease; }
.checklist .box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s ease; }
.checklist .what { font-weight: 600; color: var(--ink); }
.checklist .note { margin-left: auto; font-size: .85rem; color: var(--muted); }
.checklist li.done { border-color: var(--line-strong); }
.checklist li.done .box { background: var(--gold); border-color: var(--gold); }
.checklist li.done .box svg { opacity: 1; }
.checklist li.now { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--gold); }
.pack-cap { display: grid; }
.pack-cap p { grid-area: 1 / 1; font-size: 1.0625rem; line-height: 1.7; color: var(--body); opacity: 0; transition: opacity .35s ease; }
.pack-cap p.on { opacity: 1; }

.pack-art { --s: 1; position: relative; height: calc(660px * var(--s)); min-width: 0; }
.stage3d {
  position: absolute; left: 50%; top: calc(50% + 64px * var(--s));   /* the open lid rises above the box */
  width: 640px; height: 660px;
  margin: -330px 0 0 -320px;
  transform: scale(var(--s));
  perspective: 1700px; perspective-origin: 50% 22%;
}
.spot { position: absolute; left: 50%; top: 54%; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 148, 74, .26) 0%, rgba(27, 94, 107, .1) 38%, rgba(27, 94, 107, 0) 68%); }
.burst { position: absolute; left: 50%; top: 58%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.scene3d { position: absolute; left: 50%; top: 58%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(48deg) rotateZ(-8deg); }
.floor { position: absolute; left: -230px; top: -145px; width: 460px; height: 290px; transform-style: preserve-3d; }
.shadow { position: absolute; left: -90px; top: -70px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(60, 42, 14, .42) 0%, rgba(60, 42, 14, .14) 45%, rgba(60, 42, 14, 0) 70%); transform: translateZ(-3px); }
.lining { position: absolute; inset: 0; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #1B5E6B, #0F3A42 85%); box-shadow: inset 0 0 0 9px #A87A35, inset 0 0 50px rgba(0, 0, 0, .55); }
.belt { position: absolute; top: 9px; bottom: 9px; width: 20px; background: linear-gradient(90deg, #123F47, #23707E, #123F47); }
.wall { position: absolute; transform-style: preserve-3d; }
.wall-back { left: 0; top: -90px; width: 460px; height: 90px; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.wall-left { left: -90px; top: 0; width: 90px; height: 290px; transform-origin: 100% 50%; transform: rotateY(90deg); }
.wall-right { left: 460px; top: 0; width: 90px; height: 290px; transform-origin: 0 50%; transform: rotateY(-90deg); }
.wall-front { left: 0; top: 200px; width: 460px; height: 90px; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.shell { background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .18) 100%), repeating-linear-gradient(90deg, #C4944A 0 38px, #B3833D 38px 42px); }
.shell-side { background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(0, 0, 0, .26) 100%), repeating-linear-gradient(90deg, #BB8A40 0 38px, #A97B36 38px 42px); }
.shell-front { border-radius: 0 0 14px 14px; }
.inner { background: linear-gradient(180deg, #0F3A42, #1B5E6B); }
.inner-l { background: linear-gradient(90deg, #0F3A42, #1B5E6B); }
.inner-r { background: linear-gradient(270deg, #0F3A42, #1B5E6B); }
.f.flip { transform: rotateY(180deg); }
.lid { position: absolute; left: 0; top: 0; width: 460px; height: 290px; transform-origin: 50% 0; transform-style: preserve-3d; transform: translateZ(90px) rotateX(112deg); }
.lid-top { border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.lid-top b { font-weight: 600; }
.lid-mark { width: 60px; height: 60px; }
.lid-mark .mark-ring, .lid-mark .mark-route, .lid-mark .mark-tick { stroke: var(--ink); }
.lid-mark .mark-needle, .lid-mark .mark-dot { fill: var(--ink); }
.lid-mark .mark-origin { fill: #C4944A; stroke: var(--ink); }
.lid-under { transform: rotateX(180deg); border-radius: 8px; background: radial-gradient(circle at 50% 50%, #1B5E6B, #0F3A42 85%); box-shadow: inset 0 0 0 9px #A87A35; }
.mesh { position: absolute; left: 28px; right: 28px; top: 28px; height: 130px; border-radius: 12px; border: 2px solid #2B6F7C; background: repeating-linear-gradient(45deg, rgba(207, 227, 223, .18) 0 2px, transparent 2px 10px), repeating-linear-gradient(-45deg, rgba(207, 227, 223, .18) 0 2px, transparent 2px 10px); }
.lid-label { position: absolute; left: 30px; bottom: 30px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(220, 232, 228, .8); }
.lip { position: absolute; left: 0; top: 290px; width: 460px; height: 24px; transform-origin: 50% 0; transform: rotateX(-90deg); transform-style: preserve-3d; }
.lip-shell { border-radius: 0 0 8px 8px; }
.grip { position: absolute; left: 50%; top: 18px; width: 150px; height: 30px; margin-left: -75px; border-radius: 15px; background: linear-gradient(180deg, #333, #1A1A1A); box-shadow: 0 6px 0 #0B0B0B, 0 10px 18px rgba(0, 0, 0, .3); }
.guard { position: absolute; bottom: 0; width: 34px; height: 34px; background: var(--ink); }
.guard-l { left: 0; border-radius: 0 0 0 14px; }
.guard-r { right: 0; border-radius: 0 0 14px 0; }
.tag { position: absolute; left: calc(50% + 46px); top: 34px; width: 118px; transform-origin: 8px 0; }
.tag svg { width: 118px; height: 76px; }
.tag-text { position: absolute; left: 26px; top: 22px; display: flex; flex-direction: column; gap: 3px; line-height: 1; color: var(--ink); }
.tag-text b { font-size: 25px; font-weight: 600; letter-spacing: .04em; }
.tag-text span { font-size: 9px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

.item { position: absolute; box-sizing: border-box; backface-visibility: hidden; will-change: transform; }
.it-k { font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .24em; text-transform: uppercase; }
.i-passport { left: 30px; top: 30px; width: 100px; height: 140px; border-radius: 10px; background: linear-gradient(160deg, #1B5E6B, #154C57); border: 1.5px solid #0F3A42; color: #F5EDE0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 13px 8px; }
.it-mark { width: 46px; height: 46px; }
.it-mark .mark-ring, .it-mark .mark-route, .it-mark .mark-tick { stroke: #F5EDE0; }
.it-mark .mark-needle { fill: #F5EDE0; }
.it-mark .mark-origin { fill: #1B5E6B; stroke: #F5EDE0; }
.it-mark .mark-dot { fill: #D4A85C; }
.it-k-soft { color: #CFE3DF; letter-spacing: .16em; font-size: 8px; }
.i-pass { left: 146px; top: 24px; width: 220px; height: 90px; border-radius: 10px; background: #FFFDF9; color: var(--ink); display: flex; overflow: hidden; }
.ip-main { flex: 1; padding: 11px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.ip-main .it-k { font-size: 8px; color: var(--muted); letter-spacing: .18em; }
.ip-route { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: .02em; }
.ip-route i { flex: 1; border-top: 1.5px dashed rgba(138, 100, 48, .55); }
.ip-stub { width: 46px; background: var(--gold); border-left: 2px dashed rgba(26, 26, 26, .3); }
.i-visa { left: 146px; top: 140px; width: 140px; height: 104px; border-radius: 8px; background: var(--sky); color: var(--teal-deep); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.stamp { align-self: flex-end; rotate: -8deg; border: 2px solid var(--teal); color: var(--teal); border-radius: 4px; padding: 4px 8px; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
.i-key { left: 290px; top: 180px; width: 132px; height: 86px; border-radius: 10px; background: #F5EDE0; color: var(--ink); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.i-key .it-k { color: var(--muted); }
.key-num { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1; color: var(--accent); }
.i-phone { left: 362px; top: 18px; width: 80px; height: 156px; border-radius: 16px; background: #141312; border: 1px solid #3A3632; padding: 6px; }
.ph-screen { height: 100%; border-radius: 11px; background: #FAF6F0; padding: 12px 6px 6px; display: flex; flex-direction: column; gap: 5px; }
.ph-screen .it-k { font-size: 6.5px; letter-spacing: .14em; color: var(--muted); }
.ph-row { height: 14px; border-radius: 3px; background: #FFFFFF; border: 1px solid rgba(138, 100, 48, .2); }
.ph-ink { background: var(--teal); border-color: var(--teal); }
.ph-btn { margin-top: auto; height: 16px; border-radius: 4px; background: var(--gold); }

.road { position: absolute; left: -40px; right: -1200px; top: 618px; height: 2px; opacity: 0; pointer-events: none; }
.road-line { position: absolute; left: 0; right: 0; top: 0; border-top: 2px dashed var(--line-strong); }
.car { position: absolute; left: 10px; top: 452px; width: 620px; height: 170px; opacity: 0; pointer-events: none; will-change: transform; }
.car svg { display: block; width: 620px; height: 170px; max-width: none; overflow: visible; }
.car .trunk { transform-box: view-box; transform-origin: 120px 68px; }
.car .wheel { transform-box: fill-box; transform-origin: center; }
.car-shadow { fill: #3C2A0E; opacity: .2; }
.car-dark { fill: #0B0B0B; }
.car-body { fill: #1A1A1A; }
.car-roof { stroke: #4A4540; stroke-width: 2; }
.car-glass { fill: var(--sky); opacity: .92; }
.car-shine { fill: #FFFFFF; opacity: .5; }
.car-doors { stroke: #2E2E2E; stroke-width: 2; }
.car-stripe { fill: var(--gold); }
.car-handle { fill: #DDD3C3; }
.car-tail { fill: #B23A2E; }
.car-head { fill: #FFE7A3; }
.car-plate { fill: #F5EDE0; }
.car-plate-text { font: 600 9px var(--font-body); letter-spacing: 1.6px; fill: #1A1A1A; }
.car-lid { fill: #333333; }
.tyre { fill: #0B0B0B; }
.hub { fill: #DDD3C3; }
.spoke { stroke: #7A7166; stroke-width: 3; }
.cap { fill: var(--gold); }

/* ---------- how it works: four stops on a route ---------- */
.route { --g: clamp(24px, 3vw, 44px); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.route li { position: relative; text-align: center; }
.route li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(50% + 40px);
  width: calc(100% + var(--g) - 80px);
  border-top: 1.5px dashed var(--line-strong);
}
.stop {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.route li.last .stop { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.route h3 { font-size: 1.35rem; }
.route p { margin-top: 12px; font-size: .97rem; line-height: 1.7; }
.cost {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted);
}
.route li.last .cost { color: var(--ink); background: var(--surface); border-color: var(--gold); }

/* ---------- pricing: the boarding pass, and the traveler who takes its stub ----------
   The pass slides in from the right and the plane leaves to the right, so the
   section clips them; otherwise a phone scrolls sideways (Chad's 50490c1). */
.pricing { overflow: hidden; }
.pricing-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pricing-copy p { font-size: 1.0625rem; line-height: 1.75; }
.pricing-copy p + p { margin-top: 18px; }
.pass-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pass {
  width: 100%; max-width: 540px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  rotate: 1.5deg;
  box-shadow: 0 34px 64px -34px rgba(60, 42, 14, .5), 0 1px 2px rgba(60, 42, 14, .06);
  will-change: transform;
}
.pass-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px; background: var(--gold); color: var(--ink); font-size: .64rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.pass-body { display: flex; }
.pass-main { flex: 1; min-width: 0; padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.k { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pass-route { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pass-route b { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.55rem); line-height: 1; color: var(--ink); }
.pass-route svg { width: 64px; flex: 0 0 auto; margin-bottom: 8px; }
.pass-route div:last-child { text-align: right; }
.pass-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 16px; border-top: 1.5px dashed var(--line-strong); }
.pass-grid dd { margin-top: 4px; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
.pass-grid .key dt { color: var(--accent); }
.pass-grid .key dd { color: var(--accent); }
.pass-fee { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ink); color: var(--bg); font-size: .92rem; }
.pass-fee b { font-weight: 600; color: var(--gold-light); white-space: nowrap; }
.barcode { display: block; height: 32px; opacity: .85; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px); }
.pass-stub { width: 92px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; text-align: center; background: var(--bg-alt); border-left: 2px dashed var(--line-strong); }
.pass-stub > * { transition: opacity .2s ease; }
.pass-stub b, .stub-fly b { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--ink); }
.stub-mark { margin-top: auto; }
.stub-mark svg { width: 34px; height: 34px; }
.stub-mark .mark-origin { fill: var(--bg-alt); }
.pass.stub-gone .pass-stub > * { opacity: 0; }
.stub-fly {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 92px; height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.board { width: 100%; max-width: 540px; height: auto; overflow: visible; }
.board .leg, .board .arm, .board .arm-reach { transform-box: view-box; }
.bd-ground { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 7; }
.bd-stairs path { stroke: var(--ink); stroke-width: 2.2; }
.pl-tail { fill: var(--gold); }
.pl-body { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.pl-ink { fill: var(--ink); }
.pl-stripe { fill: var(--gold); }
.pl-door { fill: var(--ink); transition: fill .2s ease; }
.pl-door.shut { fill: var(--surface); }
.pl-wing { fill: #E9DBC4; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.bd-guy path { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.bd-guy circle { fill: var(--ink); }
.bd-head { fill: var(--ink); }

/* ---------- the last word: a gold band that sends people to the request page ---------- */
.cta-final { background: var(--gold); color: var(--ink); padding: clamp(72px, 8vw, 112px) 0; }
.cta-final .label { color: var(--ink); }
.cta-final .rule { background: var(--ink); }
.cta-final h2 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1.04; }
.cta-final h2 em { color: var(--ink); }
.cta-final p { color: var(--ink); font-size: 1.0625rem; line-height: 1.75; max-width: 30em; }
.cta-final-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.cta-final-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cta-final .btn-line { color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .cta-final .btn-line:hover { background: var(--ink); color: var(--bg); } }
.cta-final .people { flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-final .people p a { color: var(--ink); }
.cta-final .people p a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.cta-final .faces img { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(26, 26, 26, .35); }
.cta-final .contact-lines { margin: 22px 0 0; }
.cta-final .contact-lines a { color: var(--ink); }
.cta-final .contact-lines a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.cta-final .contact-lines svg { stroke: var(--ink); }

/* ---------- phones: the request button stays in reach (js/desk.js) ---------- */
.cta-bar { display: none; }
.btn-ask { gap: 10px; }
/* ---------- already booked on an expedition (the homepage's custom-expedition band) ---------- */
.expedition { max-width: 900px; margin: 0 auto; text-align: center; }
.expedition .rule { margin-left: auto; margin-right: auto; }
.expedition > p { max-width: 40em; margin: 0 auto; font-size: 1.0625rem; line-height: 1.75; }
.features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  max-width: 820px;
  margin: 44px auto 48px;
}
.features li { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: .97rem; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.features svg { width: 26px; height: 26px; flex: 0 0 auto; stroke: var(--accent); }

/* ---------- traveler stories: four postcards on a deeper sand ----------
   The back of a postcard: the note on the left of the divider, the stamp, its
   postmark and the sender's lines on the right. The stamp's perforations are
   bites out of its paper band (a radial-gradient tile whose holes sit on the
   edges), and the face covers the holes inside. The ruled lines under the
   sender are the block's own background, one rule per line of text, so a
   wrapped trip name still sits on its lines. Each card rests at a small tilt
   and straightens under the pointer. Small text on this ground uses
   --accent-deep: --accent is 3.9:1 on --sand-deep, short of 4.5:1. */
.stories { background: var(--sand-deep); }
.stories .label { color: var(--accent-deep); }
.stories .rule { background: var(--accent-deep); }
.stories .section-head p { text-wrap: balance; }   /* two even lines, centered */
.pc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.postcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3.2vw, 44px);
  align-items: stretch;
}
.postcard {
  --tilt: -1.1deg;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "note side" "note from";
  column-gap: 24px;
  padding: 30px 28px 26px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  rotate: var(--tilt);
  transition: rotate .6s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease);
}
.postcard:nth-child(2) { --tilt: .9deg; }
.postcard:nth-child(3) { --tilt: .7deg; }
.postcard:nth-child(4) { --tilt: -.8deg; }
.postcard:nth-child(2n).revealed { transition-delay: .1s; }
@media (hover: hover) { .postcard:hover { rotate: 0deg; translate: 0 -4px; box-shadow: var(--shadow-lift); } }
.pc-note {
  grid-area: note;
  padding-right: 24px;
  border-right: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.66;
  color: var(--ink);
}
.pc-side { grid-area: side; position: relative; display: flex; justify-content: flex-end; min-height: 124px; }
.pc-stamp {
  position: relative; z-index: 0;
  flex: 0 0 auto;
  width: 80px; height: 100px;
  padding: 5px;
  background: radial-gradient(circle at center, transparent 2.8px, #FFFFFF 3.3px) -5px -5px / 10px 10px;
  filter: drop-shadow(0 1px 1.2px rgba(60, 42, 14, .3));
  rotate: 2.5deg;
}
.postcard:nth-child(2n) .pc-stamp { rotate: -2deg; }
.pc-face { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 4px 4px 0; background: #FFFFFF; }
.pc-face svg { display: block; width: 100%; height: auto; aspect-ratio: 64 / 60; border: 1px solid rgba(26, 26, 26, .4); }
.pc-sky svg { background: var(--sky); }
.pc-warm svg { background: #F1E4CC; }
.pc-face b { order: -1; display: block; margin: -1px 0 3px; font-size: .5rem; font-weight: 600; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.st-sun { fill: var(--gold-light); }
.st-land { fill: var(--accent); }
.st-rock { fill: var(--accent); }
.st-forest { fill: var(--teal); }
.st-pool { fill: var(--teal); }
.st-hull { fill: var(--ink); }
.st-sail { fill: var(--gold); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.st-paper { fill: var(--surface); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.st-stone { fill: #F4E6C8; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.st-ink, .st-thin, .st-water, .st-dots, .st-fall, .st-strata { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-ink { stroke: var(--ink); stroke-width: 1.4; }
.st-thin { stroke: var(--ink); stroke-width: 1; }
.st-water { stroke: var(--teal); stroke-width: 1.2; }
.st-dots { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 0 3; }
.st-fall { stroke: var(--surface); stroke-width: 1.6; }
.st-strata { stroke: var(--accent-deep); stroke-width: 1; opacity: .7; }
.st-mist { fill: var(--surface); }
.postmark {
  position: absolute; right: 50px; top: 52px; z-index: 1;
  width: 120px; height: 64px;
  color: var(--ink); opacity: .52;
  rotate: -9deg;
  pointer-events: none;
}
.postcard:nth-child(2) .postmark { rotate: 7deg; top: 48px; }
.postcard:nth-child(3) .postmark { rotate: -4deg; }
.postcard:nth-child(4) .postmark { rotate: 11deg; top: 50px; }
.pm-bars, .pm-ring { fill: none; stroke: currentColor; }
.pm-bars { stroke-width: 1.5; stroke-linecap: round; }
.pm-ring { stroke-width: 1.6; }
.pm-inner { stroke-width: 1; }
.pm-text { fill: currentColor; font-family: var(--font-body); font-size: 6.6px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.pm-star { fill: currentColor; }
.pc-from {
  --lh: 28px;
  grid-area: from;
  align-self: end;
  display: flex; flex-direction: column;
  margin-top: 22px;
  font-size: .86rem; line-height: var(--lh); color: var(--body);
  background: linear-gradient(to top, transparent 1px, var(--line-strong) 1px 2px, transparent 2px) 0 0 / 100% var(--lh) repeat-y;
}
.pc-from > span { text-wrap: balance; }
.pc-name { font-family: var(--font-display); font-size: 1.14rem; color: var(--ink); }
.pc-k { margin-right: 6px; font-family: var(--font-body); font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) {
  .postcards { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
}
/* A narrow card: the stamp sits in the note's corner, and the sender's lines
   go under the note. */
@media (min-width: 901px) and (max-width: 1120px), (max-width: 640px) {
  .postcard { display: block; }
  .pc-side { float: right; width: 108px; min-height: 0; margin: 0 -4px 12px 14px; }
  .pm-bars { display: none; }
  .pc-note { padding-right: 0; border-right: 0; }
  .pc-from { clear: both; max-width: 280px; margin: 22px 0 0 auto; }
}
@media (max-width: 640px) {
  .postcard { padding: 24px 20px 20px; rotate: calc(var(--tilt) * .5); }
  .pc-note { font-size: 1rem; }
}

/* ---------- who answers ---------- */
.people { display: flex; align-items: center; gap: 22px; }
.faces { display: flex; flex: 0 0 auto; }
.faces img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  filter: grayscale(100%);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.faces img + img { margin-left: -12px; }
.people p { font-size: 1rem; line-height: 1.65; max-width: 30em; }

/* ---------- FAQ (the homepage's pattern: heading beside numbered rows) ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq-head { position: sticky; top: 112px; margin-bottom: 0; }
.faq-head p { font-size: 1rem; line-height: 1.7; }
.faq-list { counter-reset: faq; border-bottom: 1px solid var(--line-strong); }
.faq-list details { counter-increment: faq; border-top: 1px solid var(--line-strong); }
.faq-list summary {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 60px;
  align-items: baseline;
  padding: 26px 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  /* balanced like the headings, so no question leaves its last word alone on a
     line; pretty could not manage that in the narrow phone column */
  text-wrap: balance;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: counter(faq, decimal-leading-zero);
  content: counter(faq, decimal-leading-zero) / '';
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .04em;
  color: var(--accent);
}
.faq-list summary::after {
  content: '';
  justify-self: end;
  align-self: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.faq-list details[open] summary::after {
  color: var(--bg);
  background-color: var(--accent);
  background-size: 12px 1.5px, 1.5px 0;
  border-color: var(--accent);
  transform: rotate(180deg);
}
@media (hover: hover) {
  .faq-list summary:hover { color: var(--accent); }
  .faq-list summary:hover::after { border-color: var(--accent); }
}
.faq-answer {
  padding: 0 60px 28px 56px;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 68ch;
}

/* ---------- request form ---------- */
.contact-lines { list-style: none; margin: 30px 0 40px; display: grid; gap: 6px; }
.contact-lines a {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 40px;
  text-decoration: none; color: var(--ink); font-size: 1.0625rem;
  transition: color .25s ease;
}
.contact-lines a:hover { color: var(--accent); }
.contact-lines svg { width: 20px; height: 20px; stroke: var(--accent); flex: 0 0 auto; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow);
  padding: clamp(28px, 3.5vw, 44px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { display: block; margin-bottom: 22px; }
.field > span:first-child, .needs legend {
  display: block;
  margin-bottom: 9px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .opt { letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  min-height: 50px;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 0;
  padding: 13px 15px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 132px; }
.field input::placeholder, .field textarea::placeholder { color: #7A7064; opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field[data-bad] input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.err { display: block; margin-top: 7px; font-size: .9rem; color: var(--err); }
.err:empty { display: none; }
.needs { border: 0; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--field);
  border: 1px solid var(--field-line);
  font-size: .97rem;
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.chip span::before {
  content: '';
  width: 0; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6.4l3 3 6-6.6' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px 12px no-repeat;
  margin-right: -8px;
  transition: width .2s ease, margin .2s ease;
}
.chip input:checked + span { border-color: var(--ink); background: rgba(196, 148, 74, .16); box-shadow: inset 0 0 0 1px var(--ink); }
.chip input:checked + span::before { width: 12px; margin-right: 0; }
.chip input:hover + span { border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 6px; }
.form-status { margin-top: 14px; font-size: .95rem; color: var(--err); }
.form-status:empty { display: none; }
.form-note { margin-top: 16px; font-size: .9rem; line-height: 1.6; color: var(--muted); text-align: center; }
.thanks { text-align: center; padding: 28px 0 12px; }
.thanks:focus { outline: none; }
.thanks svg { width: 44px; height: 44px; margin: 0 auto 18px; }
.thanks h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); margin-bottom: 14px; }
.thanks p { line-height: 1.75; max-width: 30em; margin: 0 auto; }
.thanks strong { color: var(--ink); font-weight: 600; }

/* ---------- about page ---------- */
.about-hero { background: var(--bg-alt); padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px); text-align: center; }
.about-hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem); line-height: 1.06; letter-spacing: -.01em; }
.about-hero .rule { margin: 26px auto 28px; }
.about-hero p { max-width: 38em; margin: 0 auto; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.75; }
.founders { padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 5vw, 72px); }
.founder {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  grid-template-areas: "photo text";
  gap: clamp(40px, 6.5vw, 112px);
  align-items: center;
  padding: clamp(56px, 6.5vw, 96px) 0;
}
.founder + .founder { border-top: 1px solid var(--line); }
.founder.flip { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); grid-template-areas: "text photo"; }
.portrait {
  grid-area: photo;
  position: relative;
  width: calc(100% - var(--frame));
  max-width: 440px;
  aspect-ratio: 4 / 5;
  background: #DDD3C3;
  border: 1px solid var(--line);
  box-shadow: var(--frame) var(--frame) 0 -1px var(--bg), var(--frame) var(--frame) 0 0 var(--line-strong);
}
.founder.flip .portrait {
  justify-self: end;
  box-shadow: calc(-1 * var(--frame)) var(--frame) 0 -1px var(--bg), calc(-1 * var(--frame)) var(--frame) 0 0 var(--line-strong);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(100%); }
.founder-text { grid-area: text; max-width: 38rem; }
.founder .count {
  display: block; margin-bottom: 16px;
  font-size: .72rem; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: var(--accent);
}
.founder h2 { font-size: clamp(2.1rem, 1.4rem + 1.5vw, 2.75rem); font-weight: 500; letter-spacing: -.01em; }
.founder .role { margin-top: 10px; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.founder .rule { margin: 24px 0 26px; }
.founder-text > p:not(.role) { font-size: clamp(1rem, .95rem + .2vw, 1.0938rem); line-height: 1.8; }
.founder-text > p + p { margin-top: 16px; }
.moment { margin-top: 34px; padding-left: 22px; border-left: 2px solid var(--gold); }
.moment .label { margin-bottom: 10px; letter-spacing: .3em; font-size: .68rem; }
.moment blockquote p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.094rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--ink); }

.principles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 48px); counter-reset: step; }
.principles li { counter-increment: step; text-align: center; }
.principles li::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--font-display); font-size: 3.25rem; line-height: 1; color: var(--accent);
}
.principles h3 { font-size: 1.3rem; }
.principles h3::before { content: ''; display: block; width: 44px; height: 1px; background: var(--accent); margin: 18px auto 16px; }
.principles p { margin-top: 12px; font-size: .97rem; line-height: 1.7; }

.house {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.house p { font-size: 1.0625rem; line-height: 1.75; }
.house p + p { margin-top: 18px; }
.house .actions { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; margin-top: 30px; }
/* ---------- footer ---------- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  border-top: 1px solid var(--footer-line);
  padding: 60px 32px 46px;
  text-align: center;
}
.footer .lockup { justify-content: center; color: var(--footer-ink); }
.footer .lockup svg { width: 32px; height: 32px; }
.footer .lockup-text b { color: var(--footer-link); }
.footer-social { display: flex; justify-content: center; gap: 14px; margin: 26px 0 24px; list-style: none; }
.footer-social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--footer-line); border-radius: 50%;
  transition: border-color .25s ease;
}
.footer-social svg { width: 16px; height: 16px; fill: var(--footer-ink); transition: fill .25s ease; }
.footer-social a:hover { border-color: var(--footer-link); }
.footer-social a:hover svg { fill: var(--footer-link); }
.footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 1rem; margin-bottom: 18px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; list-style: none; margin-bottom: 14px; }
.footer-links a { display: inline-block; padding: 6px 0; color: var(--footer-link); font-size: .86rem; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { font-size: .8rem; letter-spacing: .05em; color: var(--footer-muted); }

/* ---------- the request page (/desk/request/) ---------- */
.req { background: var(--bg-alt); padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 112px); }
.req-grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro form" "side form";
  column-gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.req-intro { grid-area: intro; }
.req-form { grid-area: form; }
.req-side { grid-area: side; padding-top: 44px; }
.req h1 { font-size: clamp(2.6rem, 1.7rem + 3vw, 3.9rem); line-height: 1.04; letter-spacing: -.01em; }
.req-lede { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.75; max-width: 30em; }
.req-chat { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .97rem; color: var(--body); }
.req-chat .text-link { display: inline-flex; align-items: center; gap: 8px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.req-chat .text-link svg { width: 16px; height: 16px; stroke: currentColor; }
.req-side .label { margin-bottom: 14px; }
.next-steps { list-style: none; counter-reset: step; border-top: 1px solid var(--line-strong); }
.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 18px 0 19px;
  border-bottom: 1px solid var(--line);
}
.next-steps li::before {
  content: counter(step, decimal-leading-zero);
  content: counter(step, decimal-leading-zero) / '';
  padding-top: 3px;
  font-size: .9375rem;
  letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent);
}
.next-steps b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.next-steps p { font-size: .97rem; line-height: 1.6; }
.req-side .people { margin-top: 34px; align-items: flex-start; }
.req-side .contact-lines { margin: 22px 0 0; }
.form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-head h2 { font-size: clamp(1.45rem, 1.2rem + .7vw, 1.75rem); }
.form-head span { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.thanks .text-link { margin-top: 26px; }

/* ---------- arrival: sections below the first screen rise in once ---------- */
.will-reveal { opacity: 0; transform: translateY(18px); }
.revealed { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ---------- smaller screens ---------- */
@media (max-width: 1120px) {
  .hero-art { min-height: 600px; }
  .dial { width: 560px; height: 560px; }
  .float-receipt { left: -92px; }
  .float-pill { right: -56px; }
}
@media (max-width: 1020px) {
  .nav-links .hide-md { display: none; }
  .nav-links { gap: 24px; }
  .c-flights { grid-column: span 6; }
  .c-hotels, .c-visas { grid-column: span 3; }
  .c-schedule, .c-road { grid-column: span 3; }
  .for-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 48px); }
  .pack-row { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .checklist li { min-height: 46px; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a 1fr track grows to its widest child, and on a
     320px phone the boarding pass pushed the pricing words past the edge */
  .hero-grid, .pricing-grid, .faq-grid, .cta-final-grid, .house { grid-template-columns: minmax(0, 1fr); }
  /* On one column the copy fills the width, so the hero opens on a band of
     sky above it, where the map and its routes have room (js/desk.js 13). */
  .hero { padding-top: 112px; }
  .hero-copy { max-width: 640px; }
  .hero-art { min-height: 620px; }
  .float-receipt { left: -104px; }
  .float-pill { right: -80px; }
  .section-head.split { display: block; }
  .section-head.split p { max-width: 36em; margin-bottom: 0; }
  .faq-head { position: static; margin-bottom: 8px; }
  .pricing-grid { gap: 56px; }
  .pass-wrap { max-width: 560px; width: 100%; margin: 0 auto; }
  .cta-final-grid { gap: 44px; align-items: start; }
  .req-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "side"; }
  .req-intro { margin-bottom: 36px; }
  .req-side { padding-top: 52px; }
  .founder, .founder.flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "text"; gap: 44px; }
  .founder.flip .portrait { justify-self: start; box-shadow: var(--frame) var(--frame) 0 -1px var(--bg), var(--frame) var(--frame) 0 0 var(--line-strong); }
  .portrait { max-width: 400px; }

  /* the suitcase sits under its words; the checklist gives way to the meter */
  .pack-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pack-copy { gap: 14px; max-width: 560px; }
  .pack .h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.4rem); }
  .checklist { display: none; }
  .pack-cap p { font-size: 1rem; line-height: 1.6; }
  .pack-art { --s: .8; }
}
@media (max-width: 760px) {
  .nav { height: 64px; }
  :root { --nav-h: 64px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 2px 0 12px;
    background: none; border: 0; cursor: pointer;
    font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  }
  .menu-btn i { position: relative; display: block; width: 20px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .3s var(--ease); }
  .menu-btn[aria-expanded="true"] i { height: 0; border-bottom: 0; transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] i::after { content: ''; position: absolute; left: 0; top: -1.5px; width: 20px; border-top: 1.5px solid currentColor; transform: rotate(-90deg); }
  .nav > nav { position: absolute; left: 0; right: 0; top: 100%; }
  .nav-links {
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 22px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 24px 40px -24px rgba(60, 42, 14, .3);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: 0; padding-top: 18px; }
  .nav-links .hide-md { display: block; }
  .nav-links a:not(.btn) { display: flex; align-items: center; min-height: 54px; padding: 0; font-size: .78rem; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .btn { display: flex; padding: 17px 20px; font-size: .75rem; }

  /* the request button that stays in reach; the packing stage stops above it */
  :root { --bar-h: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .pack.is-live .pack-stage { height: calc(100vh - var(--nav-h) - var(--bar-h)); height: calc(100svh - var(--nav-h) - var(--bar-h)); }
  .cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: stretch; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 246, 240, .96);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    backdrop-filter: saturate(1.2) blur(12px);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -18px 36px -26px rgba(60, 42, 14, .45);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s linear .4s;
  }
  .cta-bar.show { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
  .cta-bar .btn { flex: 1 1 auto; padding: 16px 18px; }
  .cta-bar-ask {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 92px; padding: 0 16px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--ink);
    font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  }
  .cta-bar-ask svg { width: 18px; height: 18px; stroke: currentColor; flex: 0 0 auto; }
  /* with the bar in reach, a section's own request button only repeats it
     (Jason, 8 Nov 2026), so those step aside on phones */
  .repeats-bar { display: none; }

  .hero-art { min-height: 560px; }
  .dial { width: 500px; height: 500px; }
  .phone { width: 292px; border-radius: 42px; padding: 10px; }
  .phone-screen { border-radius: 33px; }
  .chat { font-size: .84rem; }
  .float-receipt { width: 206px; padding: 11px 14px 10px; bottom: -74px; }
  .fr-row { font-size: .76rem; }
  .float-pill { top: -24px; padding: 10px 15px; font-size: .76rem; }
  .phone-wrap { margin: 26px 0 78px; }

  .strips { height: 176px; }
  .strip-teal { top: 38px; padding: 12px 0; }
  .strip-gold { top: 76px; padding: 14px 0; }
  .strip-teal li { font-size: .7rem; gap: 24px; }
  .strip-track ul { gap: 24px; padding-right: 24px; }
  .strip-gold li { gap: 24px; }

  .route { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 520px; }
  .route li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; text-align: left; padding-bottom: 34px; }
  .route li:last-child { padding-bottom: 0; }
  .route li > :not(.stop) { grid-column: 2; }
  .route li .stop { grid-row: 1 / span 3; margin: 0; }
  .route h3 { padding-top: 14px; }
  .route p { margin-top: 8px; }
  .cost { justify-self: start; margin-top: 12px; }
  .route li:not(:last-child)::after { top: 64px; bottom: 8px; left: 28px; width: 0; border-top: 0; border-left: 1.5px dashed var(--line-strong); }

  .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .nav { padding: 0 14px 0 20px; gap: 12px; }
  .hero { padding: 104px 0 56px; }
  .hero h1 { margin-bottom: 22px; }
  .hero .lede { margin-bottom: 28px; }
  .hero-actions .btn { width: 100%; }
  .fee-line { margin-top: 24px; padding-top: 18px; }
  .hero-art { min-height: 540px; margin: 8px -20px 0; }
  .dial { width: 460px; height: 460px; }
  .phone { width: 276px; }
  .chat { padding: 14px 11px 18px; gap: 8px; }
  .msg { padding: 9px 12px; }
  .opt-route { font-size: 1.3rem; }
  /* keep both floats 8px inside the screen: the phone is centered, 276px wide */
  .float-receipt { left: max(-104px, calc((276px - 100vw) / 2 + 8px)); width: 196px; rotate: -3deg; }
  .float-pill { right: max(-80px, calc((276px - 100vw) / 2 + 8px)); }

  .section { padding: 64px 0; }
  .bento { gap: 14px; }
  .card, .c-flights, .c-hotels, .c-visas, .c-schedule, .c-road { grid-column: span 6; min-height: 0; gap: 22px; }
  .c-flights { gap: 14px; }
  .art-arc { align-self: stretch; width: 100%; margin: 2px 0 -6px; }
  .card-photo { grid-template-columns: minmax(0, 1fr); }
  .card-photo picture { min-height: 0; aspect-ratio: 3 / 2; }
  .for-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .for-grid li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; padding-top: 18px; }
  .for-grid svg { grid-row: 1 / span 2; margin: 2px 0 0; }
  .for-grid h4 { font-size: 1.2rem; }

  .pack { padding: 64px 0; }
  .pack-art { --s: .54; }
  .meter-bar { width: 120px; }

  .pass { rotate: .8deg; border-radius: 14px; }
  .pass-head { padding: 12px 16px; letter-spacing: .24em; }
  .pass-main { padding: 18px 16px 16px; gap: 14px; }
  .pass-route svg { width: 44px; }
  .pass-grid dd { font-size: 1.15rem; }
  .pass-fee { flex-wrap: wrap; gap: 4px 12px; padding: 11px 13px; font-size: .88rem; }
  .pass-stub { width: 70px; padding: 18px 8px; }
  .pass-stub b, .stub-fly b { font-size: 1.7rem; }
  .stub-fly { width: 70px; height: 100px; }
  .stub-mark svg { width: 28px; height: 28px; }

  .cta-final h2 { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 3rem); }
  .cta-final-actions .btn { width: 100%; }

  :root { --frame: 10px; }
  .form-row { grid-template-columns: 1fr; }
  .form-head { display: block; }
  .form-head span { display: block; margin-top: 6px; }
  .faq-list summary { grid-template-columns: 40px minmax(0, 1fr) 48px; padding: 22px 0; }
  .faq-answer { padding: 0 0 24px 40px; font-size: 1rem; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin: 36px auto 40px; }
  .expedition .btn { display: flex; }
  .people { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer { padding: 52px 20px 40px; }
  .founder { padding: 48px 0 56px; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principles li { text-align: left; }
  .principles h3::before { margin-left: 0; }
}
@media (max-width: 380px) {
  .lockup { gap: 10px; }
  .lockup svg { width: 30px; height: 30px; }
  .lockup-text { letter-spacing: .26em; }
  .phone { width: 262px; }
  .float-receipt { width: 184px; left: calc((262px - 100vw) / 2 + 6px); }
  .float-pill { font-size: .72rem; padding: 9px 13px; right: calc((262px - 100vw) / 2 + 6px); }
  .pack-art { --s: .48; }
  .cta-bar-ask { min-width: 0; padding: 0 13px; }
  .cta-bar-ask span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* a short phone: the label and meter give their room to the suitcase */
@media (max-width: 900px) and (min-height: 521px) and (max-height: 700px) {
  .pack.is-live .pack-copy > .label, .pack.is-live .meter { display: none; }
}
/* a phone on its side is too short to stack the words over the case, so they
   sit side by side as on a desktop (js/desk.js sizes the case the same way) */
@media (max-width: 900px) and (max-height: 520px) {
  .pack-row { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; }
  .pack-copy { gap: 12px; }
  .pack .h2 { font-size: 1.6rem; }
  .pack-cap p { font-size: .95rem; line-height: 1.55; }
}

/* ---------- pass 4: every screen size ---------- */

/* The boarding pass sets its own fare grid by the room it has, not the
   window: four across when there is space, two by two when the labels would
   run together (a tablet, a small laptop, or the pricing column on a phone). */
.pass-main { container-type: inline-size; }
@container (max-width: 460px) {
  .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}

/* A small laptop: the quote card keeps clear of the fee line beside it. */
@media (min-width: 901px) and (max-width: 1020px) {
  .float-receipt { left: -56px; }
}
/* The request page's narrow side column: faces above the line, not beside it. */
@media (min-width: 901px) and (max-width: 1120px) {
  .req-side .people { flex-direction: column; gap: 16px; }
}

/* A laptop screen (1366 by 768 shows about 625px of page): the hero starts
   higher and the copy sits at the top of its column, so both request buttons
   are on the first screen. */
@media (min-width: 901px) and (max-height: 760px) {
  .hero { padding-top: clamp(28px, 5vh, 48px); padding-bottom: clamp(56px, 9vh, 80px); }
  .hero-grid { align-items: start; }
  .hero h1 { font-size: clamp(2.6rem, 1.2rem + 3.4vw, 3.9rem); margin-bottom: 22px; }
  .hero .lede { margin-bottom: 28px; }
  .fee-line { margin-top: 24px; padding-top: 18px; }
  .hero-art { min-height: 560px; }
  .dial { width: 520px; height: 520px; }
  .phone-wrap { margin-top: 32px; }
}

/* A single column of text reads at a book's measure, not the window's. */
@media (max-width: 900px) {
  .pricing-copy { max-width: 40em; }
  .house { row-gap: 26px; }
}

@media (max-width: 760px) {
  /* the open menu scrolls inside the screen, so its last link is in reach
     on a phone held sideways */
  .nav-links { max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
  /* the four stops sit in the middle, under their centered heading */
  .route { margin-left: auto; margin-right: auto; }
}

/* A large phone or a small tablet held upright: pairs of cards side by side,
   as on a tablet, instead of one long column. */
@media (min-width: 540px) and (max-width: 640px) {
  .c-hotels, .c-visas, .c-schedule, .c-road { grid-column: span 3; }
  .for-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 640px) {
  /* long centered lines are hard to follow; the About opening reads from the left */
  .about-hero { text-align: left; }
  .about-hero .rule { margin: 22px 0 24px; }
  .about-hero p { margin: 0; }
  /* the footer links break three and two, never four and one */
  .footer-links { max-width: 23rem; margin-left: auto; margin-right: auto; }
}

/* The smallest phones (320 to 380): the pass, its labels and the form card
   give up a little padding so nothing is cut at the edge. */
@media (max-width: 380px) {
  .pass-head { padding: 11px 14px; letter-spacing: .16em; }
  .pass-main { padding: 16px 13px 14px; gap: 12px; }
  .pass-route { gap: 8px; }
  .pass-route b { font-size: 1.55rem; }
  .pass-route svg { width: 34px; margin-bottom: 6px; }
  .pass .k, .stub-fly .k { letter-spacing: .14em; }
  .pass-grid dd { font-size: 1.05rem; }
  .pass-stub, .stub-fly { width: 58px; }
  .pass-stub { padding: 16px 6px; }
  .pass-stub b, .stub-fly b { font-size: 1.45rem; }
  .form-card { padding: 24px 16px; }
}

/* A phone on its side: a slimmer header and request bar leave more of the
   short screen for the page. */
@media (max-height: 520px) {
  .nav { height: 56px; }
  :root { --nav-h: 56px; }
  html { scroll-padding-top: 72px; }
}
@media (max-width: 760px) and (max-height: 520px) {
  .nav-links a:not(.btn) { min-height: 46px; }
  :root { --bar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .cta-bar { padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); }
  .cta-bar .btn { padding: 12px 18px; }
}

/* The six choices on the request page sit in even rows of two or three
   wherever one line would wrap and leave a choice alone below the rest. Below
   270px the tiles are too narrow to hold a ticked "An expedition" on one line,
   so the plain wrap stays there, and it stays where all six fit on one line. */
.needs { container-type: inline-size; }
@container (min-width: 270px) and (max-width: 699px) {
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip span { display: flex; justify-content: center; padding-left: 12px; padding-right: 12px; font-size: .94rem; }
}
@container (min-width: 440px) and (max-width: 699px) {
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- booking a flight yourself (js/desk-flight-search.js): the search
   form on the homepage's booking pane and at the top of /desk/book/. The form
   lays itself out by its own width: stacked in a phone's column, two fields a
   row in the hero, one row across the booking page. The pane and the book
   button on the phone bar show only once booking is open to the visitor
   (js/desk.js part 14). ---------- */
.fs { container: fs / inline-size; position: relative; font-variant-numeric: lining-nums; }
.fs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.fs-trip { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); }
.fs-trip label { position: relative; display: block; }
.fs-trip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fs-trip span {
  display: block; padding: 8px 14px;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); transition: background .2s ease, color .2s ease;
}
.fs-trip input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(60, 42, 14, .14); }
.fs-trip input:hover + span { color: var(--ink); }
.fs-trip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-who { display: contents; }
.fs-who-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 2px 6px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--line-strong);
  font-size: .97rem; color: var(--ink); cursor: pointer; text-align: left;
}
.fs-who-btn svg { width: 14px; height: 14px; flex: 0 0 auto; stroke: currentColor; transition: rotate .2s ease; }
.fs-who.open .fs-who-btn svg { rotate: 180deg; }
.fs-who-btn:hover { border-color: var(--ink); }
.fs-who[data-bad] .fs-who-btn { color: var(--err); border-color: var(--err); }
.fs-pop {
  order: 3; flex: 1 1 100%;
  display: grid; gap: 14px;
  padding: 16px 18px 14px;
  background: var(--bg-alt); border: 1px solid var(--line-strong);
}
.fs-step { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; }
.fs-step b { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; }
.fs-step small { display: block; font-size: .86rem; color: var(--muted); }
.fs-step button {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 50%;
  color: var(--ink); cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.fs-step button svg { width: 14px; height: 14px; stroke: currentColor; }
.fs-step button:hover:not(:disabled) { border-color: var(--ink); }
.fs-step button:disabled { opacity: .35; cursor: default; }
.fs-step output { min-width: 1.6em; text-align: center; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.fs-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.fs-ages:empty { display: none; }
.fs-age span, .fs-cabin span {
  display: block; margin-bottom: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.fs-age select, .fs-cabin select {
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 0;
  font: inherit; font-size: .97rem; color: var(--ink);
}
.fs-age select:focus, .fs-cabin select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fs-done {
  justify-self: end; min-height: 40px; padding: 8px 18px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
.fs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fs-pair { grid-column: 1 / -1; position: relative; display: grid; gap: 8px; }
.fs-box {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 62px; padding: 8px 14px 7px;
  background: var(--field); border: 1px solid var(--field-line);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fs-box:focus-within { z-index: 3; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fs-box[data-bad] { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.fs-box > label {
  font-size: .66rem; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
}
.fs-box input {
  width: 100%; min-width: 0; padding: 3px 0 0;
  background: none; border: 0; border-radius: 0; outline: none;
  font-size: 1.02rem; line-height: 1.35; color: var(--ink);
  text-overflow: ellipsis;
}
.fs-box input::placeholder { color: #7A7064; opacity: 1; }
.fs-box input[type="date"] { min-height: 1.4em; -webkit-appearance: none; appearance: none; }
.fs-place input { padding-right: 36px; }
.fs-swap {
  position: absolute; z-index: 4; right: 12px; top: 50%; translate: 0 -50%;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--field-line); border-radius: 50%;
  color: var(--ink); cursor: pointer; transition: border-color .2s ease;
}
.fs-swap:hover { border-color: var(--ink); }
.fs-swap svg { width: 16px; height: 16px; stroke: currentColor; rotate: 90deg; }
.fs-swap.turn svg { animation: fs-turn .45s var(--ease); }
@keyframes fs-turn { from { transform: rotate(-180deg); } to { transform: none; } }
.fs-go { grid-column: 1 / -1; min-height: 58px; padding-left: 26px; padding-right: 26px; white-space: nowrap; }
.fs-go svg { width: 17px; height: 17px; }
.fs-msg { margin-top: 10px; font-size: .95rem; line-height: 1.5; color: var(--err); }
.fs-msg:empty { display: none; }
.fs.is-oneway [data-field="depart"] { grid-column: 1 / -1; }
/* the places a typed name could be */
.fs-list {
  position: absolute; z-index: 30; left: -1px; right: -1px; top: calc(100% + 4px);
  max-height: min(330px, 52vh); overflow-y: auto; overscroll-behavior: contain;
  list-style: none; background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift);
}
.fs-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main code" "sub code";
  column-gap: 14px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.fs-opt:last-child { border-bottom: 0; }
.fs-opt[aria-selected="true"], .fs-opt:hover { background: rgba(196, 148, 74, .16); }
.fs-opt-main { grid-area: main; color: var(--ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-opt-sub { grid-area: sub; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.fs-opt-code { grid-area: code; align-self: center; font-size: .82rem; font-weight: 600; letter-spacing: .1em; color: var(--accent); }
.fs-opt.is-city .fs-opt-main { font-weight: 600; }
@container fs (min-width: 440px) {
  .fs-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fs-pair [data-field="from"] { padding-right: 26px; }
  .fs-pair [data-field="to"] { padding-left: 28px; }
  .fs-place input { padding-right: 0; }
  .fs-swap { right: auto; left: 50%; translate: -50% -50%; }
  .fs-swap svg { rotate: 0deg; }
  .fs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .fs-go { grid-column: auto; }
  .fs.is-oneway [data-field="depart"] { grid-column: span 2; }
}
@container fs (min-width: 860px) {
  .fs-grid { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .fs-pair { grid-column: auto; }
  .fs-go { min-height: 62px; }
  /* across a wide page the travelers open as a panel under their button */
  .fs-top { position: relative; }
  .fs-pop {
    position: absolute; z-index: 25; right: 0; top: calc(100% + 6px); width: 360px;
    background: var(--surface); box-shadow: var(--shadow-lift);
  }
}

/* the homepage's booking pane: have the Desk handle it (open first), or book a flight yourself */
.book-pane { position: relative; max-width: 600px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.book-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.book-tab {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 14px 12px 13px;
  background: var(--bg); border: 0; border-radius: 0;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease;
}
.book-tab + .book-tab { border-left: 1px solid var(--line); }
.book-tab svg { width: 17px; height: 17px; flex: 0 0 auto; stroke: currentColor; }
.book-tab:hover { color: var(--ink); }
.book-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); }
.book-tab[aria-selected="true"]::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--gold); }
.book-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--surface); }
.book-tab:focus-visible { outline-offset: -4px; }
.book-panel { padding: 18px 20px 20px; }
.book-panel:focus { outline: none; }
.book-note { margin-top: 14px; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.book-note strong { color: var(--ink); font-weight: 600; }
.book-note a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.book-note a:hover { color: var(--accent-deep); }
.book-us .field { margin-bottom: 12px; }
.book-us textarea { min-height: 104px; }
.book-us-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.book-us-actions .btn { flex: 1 1 auto; padding-left: 22px; padding-right: 22px; }
/* a teammate's preview: a small tag above the pane's corner, clear of the tabs */
.book-preview {
  position: absolute; right: -1px; bottom: calc(100% + 6px); z-index: 2;
  padding: 3px 10px; background: var(--teal); color: #F5EDE0;
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.self-book-on .hero .lede { margin-bottom: 30px; }
/* With "Book a flight" in the nav, "How it works" steps out where the row
   would otherwise wrap (the section is still one scroll down). */
@media (min-width: 761px) and (max-width: 1120px) {
  .self-book-on .nav-links .hide-book, .desk-book .nav-links .hide-book { display: none; }
}
@media (min-width: 761px) and (max-width: 860px) {
  .self-book-on .nav-links, .desk-book .nav-links { gap: 20px; }
}
@media (max-width: 640px) {
  .book-panel { padding: 16px 14px 16px; }
  .book-tab { min-height: 50px; padding: 12px 8px; letter-spacing: .12em; gap: 7px; }
  .book-tab svg { width: 15px; height: 15px; }
  /* On a phone the pane comes straight after the title, so the request is
     on the first screen; the paragraph follows it. */
  .self-book-on .hero-copy { display: flex; flex-direction: column; }
  .self-book-on .hero-copy .lede { order: 1; margin: 30px 0 0; }
  .self-book-on .hero h1 { margin-bottom: 34px; }
}
@media (max-width: 380px) {
  .book-tab svg { display: none; }
}
/* with booking open, the phone bar offers both: the request first, then booking a flight */
@media (max-width: 760px) {
  .self-book-on .cta-bar .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; letter-spacing: .12em; }
  .self-book-on .cta-bar .btn:first-child { flex-grow: 1.35; }
  .self-book-on .cta-bar-ask { min-width: 0; padding: 0 13px; }
  .self-book-on .cta-bar-ask span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Under 380px the two would wrap to two lines each, so the smallest phones
   keep the request alone in the bar; booking a flight stays in the pane and
   the menu. */
@media (max-width: 379px) {
  .self-book-on .cta-bar .btn-line { display: none; }
}

/* Fingers, not a mouse: every small link gets a full 44px to land on. */
@media (pointer: coarse) {
  .skip { min-height: 44px; }
  .lockup { min-height: 44px; }
  .footer-social a { width: 44px; height: 44px; }
  .contact-lines a { min-height: 44px; }
  .footer-links { row-gap: 0; }
  .footer-links a { padding: 11px 0; }
  .text-link { position: relative; }
  .text-link::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
}
@media (pointer: coarse) and (min-width: 761px) {
  .nav-links a:not(.btn) { padding: 13px 0; }
  .nav-links a.btn { padding-top: 15px; padding-bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .will-reveal { opacity: 1; transform: none; }
}