/* ==========================================================================
   her bucket list
   Visual direction taken from the campaign artwork: cream paper, olive script,
   dusty rose bands, taped polaroids, botanical line work.
   ========================================================================== */

:root{
  /* ---- light, cool base: WanderRush style guide ---- */
  --white:#FFFFFF;
  --mist:#F3F6F8;
  --mist-2:#E6ECEF;

  /* ---- the accent, sampled from the reference UI ---- */
  --sky:#A0D3E5;
  --sky-soft:#DCEEF6;
  --sky-deep:#74B9D2;
  --label:#3B7688;

  /* ---- structure and text ---- */
  --ink:#22252D;
  --ink-deep:#121212;
  --slate:#5A616B;
  --meta:#7A828C;

  /* ---- the logo, kept to itself ---- */
  --daisy:#FBD24E;
  --red:#C8242B;
  --red-tint:#F7E2E1;

  /* ---- aliases so existing rules keep working ---- */
  --cream:var(--white);
  --paper:var(--mist);
  --sand:var(--mist-2);
  --tape:#E3EAED;
  --forest:var(--ink);
  --forest-deep:var(--ink-deep);
  --olive:#39414C;
  --sage:var(--meta);
  --sage-tint:var(--sky-soft);
  --gold:var(--sky);
  --gold-deep:var(--sky-deep);
  --gold-tint:var(--sky-soft);
  --bronze:var(--label);
  --rose:var(--label);
  --rose-deep:#2C5A69;
  --rose-tint:var(--red-tint);
  --ink-2:var(--olive);
  --ink-soft:var(--slate);
  --ink-faint:var(--meta);

  --font-display:'Bagel Fat One', system-ui, sans-serif;
  --font-script:'Baloo 2', system-ui, sans-serif;
  --font-serif:'Space Mono', ui-monospace, monospace;
  --font-body:'Work Sans', system-ui, sans-serif;

  --shadow-soft:0 10px 30px rgba(34,37,45,.08);
  --shadow-lift:0 16px 44px rgba(34,37,45,.14);
  --wrap:1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0; font-weight:600;}
section{position:relative;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 34px;}
.section{padding:96px 0;}
.section.tight{padding:64px 0;}
.on-paper{background:var(--paper);}
.on-sand{background:var(--sand);}
.on-forest{background:var(--forest); color:var(--cream);}
.on-olive{background:var(--olive); color:var(--cream);}

/* subtle paper fibre, kept very light so text stays crisp */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity:0;
}
body > *{position:relative; z-index:1;}

/* ---------- accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--forest); color:var(--cream);
  padding:14px 24px; border-radius:0 0 8px 0;
  font-family:var(--font-serif); font-weight:600; letter-spacing:.06em;
}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--bronze); outline-offset:3px; border-radius:3px;
}

/* ---------- type helpers ---------- */
.script{
  font-family:var(--font-script);
  color:var(--forest);
  font-weight:400;
  line-height:1.08;
}
.eyebrow{
  font-family:var(--font-serif);
  font-size:13px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--rose);
}
.eyebrow.light{color:var(--gold);}

.rule{
  width:64px; height:2px; background:var(--gold-deep);
  margin:14px 0 0; border:none;
}
.rule.center{margin-left:auto; margin-right:auto;}

/* section heading block */
.head{max-width:660px; margin-bottom:52px;}
.head h2{
  font-family:var(--font-script);
  font-size:clamp(36px, 5vw, 54px);
  color:var(--forest);
  margin:12px 0 0; font-weight:400;
}
.head .serif-sub{
  font-family:var(--font-serif);
  font-size:clamp(15px,1.5vw,17px); font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--olive); margin-top:6px;
}
.head p{color:var(--ink-soft); margin-top:16px; font-size:16.5px; max-width:56ch;}
.head.center{margin-left:auto; margin-right:auto; text-align:center;}
.head.center p{margin-left:auto; margin-right:auto;}
.on-forest .head h2, .on-olive .head h2{color:var(--cream);}
.on-forest .head p, .on-olive .head p{color:rgba(255,255,255,.78);}
.on-forest .head .serif-sub, .on-olive .head .serif-sub{color:var(--gold);}

/* brush-stroke label, as used on the artwork */
.brush{
  display:inline-block;
  background:var(--ink); color:var(--cream);
  font-family:var(--font-serif); font-weight:600;
  font-size:15px; letter-spacing:.28em; text-transform:uppercase;
  padding:11px 30px;
  border-radius:32px 26px 34px 24px / 24px 32px 22px 30px;
}
.brush.rose{background:var(--gold); color:var(--ink);}
.brush.gold{background:var(--gold); color:var(--forest-deep);}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(34,37,45,.16);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:16px; padding-bottom:16px;
}
.brandmark{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brandmark img{height:34px; width:auto;}
.topbar nav{display:flex; align-items:center; gap:32px;}
.topbar nav a{
  font-family:var(--font-serif); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  padding-bottom:3px; border-bottom:1.5px solid transparent;
}
.topbar nav a:hover{color:var(--bronze); border-color:var(--gold-deep);}
.topbar nav a[aria-current="page"]{color:var(--bronze); border-color:var(--gold-deep);}
.topbar .nav-cta{
  background:var(--gold); color:var(--ink);
  border:none; border-radius:30px; padding:11px 24px;
  letter-spacing:.14em; font-size:13px;
}
.topbar .nav-cta:hover{background:var(--gold-deep); color:var(--ink); border-color:transparent;}

.burger{
  display:none; background:none; border:1px solid rgba(34,37,45,.3);
  border-radius:6px; width:44px; height:40px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;
}
.burger span{display:block; width:19px; height:1.6px; background:var(--forest);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-script); font-weight:700;
  font-size:15.5px; letter-spacing:.01em; text-transform:none;
  padding:15px 32px; border-radius:34px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary{background:var(--gold); color:var(--ink); box-shadow:0 6px 18px rgba(116,185,210,.34);}
.btn-primary:hover{background:var(--gold-deep); transform:translateY(-2px);}
.btn-forest{background:var(--ink); color:var(--cream);}
.btn-forest:hover{background:var(--forest-deep); transform:translateY(-2px);}
.btn-outline{background:transparent; color:var(--forest); border-color:rgba(34,37,45,.42);}
.btn-outline:hover{background:var(--forest); color:var(--cream); border-color:var(--forest);}
.btn-outline.light{color:var(--cream); border-color:rgba(255,255,255,.5);}
.btn-outline.light:hover{background:var(--cream); color:var(--forest); border-color:var(--cream);}
.btn-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}

/* text link with underline flourish */
.tlink{
  font-family:var(--font-serif); font-weight:600; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose); text-decoration:none;
  border-bottom:1.5px solid rgba(181,100,108,.42); padding-bottom:2px;
}
.tlink:hover{border-color:var(--rose);}

/* ---------- hero ---------- */
.hero{
  background:var(--cream);
  padding:74px 0 96px;
  overflow:hidden;
}
.hero .grid{display:grid; grid-template-columns:1.02fr .98fr; gap:60px; align-items:center;}
.hero h1{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(46px, 6.6vw, 82px);
  color:var(--forest); line-height:1.02; margin:16px 0 0;
}
.hero .serif-line{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(19px,2.3vw,27px);
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--olive); margin:14px 0 0; padding-left:.44em;
}
.hero .tagline{
  font-family:var(--font-script); font-size:25px;
  color:var(--rose); margin:26px 0 0;
}
.hero p.lede{color:var(--ink-soft); margin:20px 0 32px; max-width:46ch; font-size:17px;}

/* collage of taped photos */
.collage{position:relative; aspect-ratio:1/1; max-width:520px; margin-left:auto; width:100%;}
.polaroid{
  background:#fff; padding:12px 12px 46px;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.polaroid img, .polaroid .ph{
  display:block; width:100%; height:auto; aspect-ratio:4/3;
  object-fit:cover; background:var(--sage-tint);
}
.polaroid .cap{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font-family:var(--font-script); font-size:19px; color:var(--forest);
}
.polaroid::before{
  content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-2.5deg);
  width:86px; height:26px; background:var(--tape); opacity:.92;
}
.collage .polaroid{position:absolute;}
.collage .p1{width:50%; top:0; left:0; transform:rotate(-4deg);}
.collage .p2{width:46%; top:7%; right:0; transform:rotate(3.5deg);}
.collage .p3{width:46%; bottom:0; left:23%; transform:rotate(2deg); z-index:3;}

/* ---------- torn paper divider ---------- */
.torn{display:block; width:100%; height:34px; line-height:0;}
.torn svg{display:block; width:100%; height:100%;}

/* ---------- value cards (icon + text rows) ---------- */
.values{display:grid; gap:0;}
.value{
  display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start;
  padding:22px 0; border-bottom:1px dashed rgba(34,37,45,.26);
}
.value:last-child{border-bottom:none;}
.value .ico{
  width:56px; height:56px; border-radius:50%;
  background:var(--sage-tint); display:flex; align-items:center; justify-content:center;
}
.value .ico svg{width:26px; height:26px; stroke:var(--forest); fill:none; stroke-width:1.6;}
.value h3{font-family:var(--font-script); font-size:19px; font-weight:700; color:var(--ink);}
.value p{margin:3px 0 0; color:var(--ink-soft); font-size:15.5px;}

/* ---------- package cards ---------- */
.pack-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.pack{
  background:#fff;
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
  border-radius:3px;
}
.pack:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift);}
.pack .shot{position:relative; overflow:hidden; background:var(--sage-tint);}
.pack .shot img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;}
.pack .shot::after{
  content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.42;
}
.pack .status{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--font-serif); font-size:11px; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  background:var(--cream); color:var(--forest);
  padding:6px 13px; border-radius:20px;
}
.pack .status.open{background:var(--gold); color:var(--ink);}
.pack .status.soon{background:rgba(255,255,255,.95); color:var(--ink-2);}
.pack .body{padding:22px 22px 0; flex:1;}
.pack .region{
  font-family:var(--font-serif); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--rose);
}
.pack h3{
  font-family:var(--font-script); font-size:24px; font-weight:700;
  color:var(--ink); margin:7px 0 10px; line-height:1.18;
}
.pack .meta{
  font-family:var(--font-serif); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:14px; border-bottom:1px dashed rgba(34,37,45,.24);
}
.pack ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:7px;}
.pack ul li{
  position:relative; padding-left:19px; font-size:14.5px; color:var(--ink-soft);
}
.pack ul li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.pack .foot{padding:20px 22px 24px; margin-top:auto;}

/* tone variations so one illustration does not read as 32 identical tiles */
.tone-a .shot::after{background:#7FA7B5;}
.tone-b .shot::after{background:#93B0BA;}
.tone-c .shot::after{background:#6E7C86;}
.tone-d .shot::after{background:#A0D3E5;}
.tone-e .shot::after{background:#3B4A55;}
.tone-f .shot::after{background:#8896A0;}

/* ---------- itinerary ---------- */
.day{
  background:#fff; box-shadow:var(--shadow-soft);
  margin-bottom:30px; overflow:hidden;
}
.day > .dhead{
  background:var(--forest); color:var(--cream);
  padding:24px 32px; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
}
.day > .dhead .no{
  font-family:var(--font-serif); font-size:12px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  background:var(--gold); color:var(--forest-deep); padding:5px 14px; border-radius:20px;
}
.day > .dhead h3{font-family:var(--font-script); font-size:30px; font-weight:400;}
.day > .dhead .date{
  font-family:var(--font-serif); font-size:12.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-left:auto;
}
.day > .dhead .mood{
  width:100%; font-family:var(--font-script); font-size:19px;
  color:rgba(255,255,255,.8); margin-top:-2px;
}
.dbody{padding:28px 32px;}

.step{
  display:grid; grid-template-columns:124px 1fr; gap:24px;
  padding:15px 0; border-bottom:1px dashed rgba(34,37,45,.22);
}
.step:last-child{border-bottom:none;}
.step .time{
  font-family:var(--font-serif); font-size:13px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--rose); padding-top:2px;
}
.step .what{font-size:15.5px;}
.step .what ul{margin:9px 0 0; padding-left:19px; color:var(--ink-soft); font-size:14.5px; display:grid; gap:4px;}

/* day 2 fork */
.fork{display:grid; grid-template-columns:1fr auto 1fr;}
.fork .side{padding:26px 30px;}
.fork .side .tag{
  display:inline-block; font-family:var(--font-serif); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  background:var(--sage-tint); color:var(--forest); padding:6px 15px; border-radius:20px;
}
.fork .side h4{font-family:var(--font-script); font-size:19px; font-weight:700; margin:12px 0 2px; color:var(--ink);}
.fork .side .kick{font-family:var(--font-script); font-size:20px; color:var(--rose); margin-bottom:8px;}
.fork .divider{
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border-left:1px dashed rgba(34,37,45,.24); border-right:1px dashed rgba(34,37,45,.24);
}
.fork .divider span{
  font-family:var(--font-serif); font-size:11px; font-weight:700; letter-spacing:.1em;
  background:var(--ink); color:var(--gold); width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- fact row ---------- */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:#fff; box-shadow:var(--shadow-soft);}
.facts .f{padding:26px 26px; border-right:1px dashed rgba(34,37,45,.24);}
.facts .f:last-child{border-right:none;}
.facts .k{
  font-family:var(--font-serif); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--rose);
}
.facts .v{font-family:var(--font-script); font-size:21px; font-weight:700; color:var(--ink); margin-top:7px; line-height:1.2;}
.facts .v small{display:block; font-size:13px; font-weight:600; color:var(--ink-faint); letter-spacing:.04em; margin-top:3px; text-transform:none;}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chips span, .chips a{
  background:#fff; border:1px solid rgba(34,37,45,.2);
  border-radius:26px; padding:9px 19px;
  font-family:var(--font-serif); font-size:13px; font-weight:600;
  letter-spacing:.09em; color:var(--forest); text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.chips a:hover{background:var(--olive); border-color:var(--olive); color:var(--cream);}

/* ---------- tick lists ---------- */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.ticks li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px;}
.ticks li::before{
  content:"✓"; flex:none; width:23px; height:23px; border-radius:50%;
  background:var(--gold); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:2px;
}
.ticks.no li::before{content:"✕"; background:var(--red-tint); color:var(--red);}

.pill-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.pill-grid span{
  background:#fff; border:1px solid rgba(34,37,45,.16);
  border-radius:26px; padding:12px 20px; font-size:14.5px; color:var(--ink-soft);
}

/* ---------- panel / card ---------- */
.panelcard{background:#fff; box-shadow:var(--shadow-soft); padding:40px;}
.panelcard h3{font-family:var(--font-script); font-size:30px; font-weight:400; color:var(--forest); margin-bottom:12px;}
.panelcard p{color:var(--ink-soft);}

.split{display:grid; grid-template-columns:1fr 1fr; gap:0; box-shadow:var(--shadow-soft);}
.split .pane{padding:48px 44px; background:var(--white); color:var(--ink);}
.split .pane p{color:var(--slate);}
.split .pane h3{color:var(--ink);}
.split .pane.forest{background:var(--forest); color:var(--cream);}
.split .pane.forest{color:var(--white);}
.split .pane.forest p{color:rgba(255,255,255,.82);}
.split .pane.olive{background:var(--olive); color:var(--cream);}
.split .pane.olive{color:var(--white);}
.split .pane.olive p{color:rgba(255,255,255,.84);}
.split h3{font-family:var(--font-script); font-size:32px; font-weight:400; margin-bottom:14px; color:var(--forest);}
.split .pane.forest h3, .split .pane.olive h3{color:var(--cream);}

/* ---------- quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.quote{background:#fff; box-shadow:var(--shadow-soft); padding:34px 30px; position:relative;}
.quote::before{
  content:"\201C"; font-family:var(--font-script); font-weight:700; font-size:74px; color:var(--sand);
  position:absolute; top:10px; left:22px; line-height:1;
}
.quote p{position:relative; font-family:var(--font-script); font-weight:600; font-size:18px; color:var(--ink); margin:0 0 18px;}
.quote .who{font-family:var(--font-serif); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--rose);}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:0; max-width:860px;}
.faq details{border-bottom:1px dashed rgba(34,37,45,.26);}
.faq summary{
  cursor:pointer; list-style:none; padding:24px 0;
  font-family:var(--font-script); font-size:19px; font-weight:700; color:var(--ink);
  display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--rose); font-size:24px; font-weight:400; flex:none;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 0 26px; color:var(--ink-soft); font-size:15.5px; max-width:70ch;}
.faq .ans p{margin:0 0 12px;}
.faq .ans p:last-child{margin:0;}

/* ---------- forms ---------- */
.formcard{background:#fff; box-shadow:var(--shadow-soft); padding:44px;}
.field{margin-bottom:22px;}
.field label{
  display:block; margin-bottom:8px;
  font-family:var(--font-serif); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--olive);
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:15.5px;
  padding:14px 16px; background:var(--cream); color:var(--ink);
  border:1px solid rgba(34,37,45,.24); border-radius:4px;
}
.field textarea{min-height:140px; resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink-soft);}
.consent input{width:auto; margin-top:5px; flex:none;}

.cline{display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px dashed rgba(34,37,45,.24);}
.cline:last-child{border-bottom:none;}
.cline .ico{
  width:44px; height:44px; border-radius:50%; background:var(--gold); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.cline .ico svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.7;}
.cline .k{font-family:var(--font-serif); font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--rose);}
.cline .v{font-family:var(--font-script); font-size:18px; font-weight:700; color:var(--ink); margin-top:3px;}
.cline .v a{text-decoration:none;}
.cline .v a:hover{color:var(--rose);}

/* ---------- prose / legal ---------- */
.prose{max-width:820px; background:#fff; box-shadow:var(--shadow-soft); padding:60px 56px;}
.prose h2{
  font-family:var(--font-script); font-size:25px; font-weight:700; color:var(--ink);
  margin:44px 0 14px; padding-top:30px; border-top:1px dashed rgba(34,37,45,.22);
}
.prose h2:first-of-type{margin-top:0; padding-top:0; border-top:none;}
.prose h3{font-family:var(--font-script); font-size:19px; font-weight:700; margin:26px 0 8px; color:var(--ink-2);}
.prose p, .prose li{font-size:15.5px; color:#3A404A;}
.prose p{margin:0 0 15px;}
.prose ul, .prose ol{padding-left:22px; margin:0 0 18px;}
.prose li{margin-bottom:9px;}
.prose a{color:var(--rose); font-weight:600;}
.prose .updated{
  display:inline-block; font-family:var(--font-serif); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--olive);
  border:1px solid rgba(34,37,45,.26); border-radius:26px; padding:9px 20px; margin-bottom:34px;
}
.prose .callout{
  background:var(--paper); border-left:3px solid var(--gold-deep);
  padding:20px 24px; margin:0 0 26px; font-size:15px;
}
.todo{background:var(--gold-tint); border-bottom:1px solid var(--gold-deep); padding:1px 6px; border-radius:3px;}

/* draft notice */
.draft-note{
  background:var(--gold-tint); border-left:3px solid var(--gold-deep);
  padding:18px 24px; margin-bottom:30px; font-size:15px; color:#5E3A3E;
}
.draft-note strong{font-family:var(--font-script); font-weight:700; color:var(--ink);}
.draft-note code{font-family:ui-monospace,monospace; font-size:13px; background:rgba(255,255,255,.6); padding:1px 6px; border-radius:3px;}

/* ---------- departure cards ---------- */
.deps{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.dep{background:#fff; box-shadow:var(--shadow-soft); padding:30px 32px;}
.dep h4{font-family:var(--font-script); font-size:28px; font-weight:400; color:var(--forest); margin-bottom:14px;}
.dep dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 20px;}
.dep dt{font-family:var(--font-serif); font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); padding-top:4px;}
.dep dd{margin:0; font-size:15.5px; font-weight:600; color:var(--forest);}

/* ---------- footer ---------- */
footer.site{background:var(--forest); color:rgba(255,255,255,.76); padding:74px 0 34px;}
footer.site .cols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:46px;}
footer.site .bcol img{height:46px; margin-bottom:20px; filter:brightness(0) invert(1); opacity:.95;}
footer.site .bcol p{font-size:15px; max-width:34ch; margin:0 0 20px;}
footer.site .bcol .tag{font-family:var(--font-script); font-size:24px; color:var(--gold);}
footer.site h4{
  font-family:var(--font-serif); font-size:12px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
footer.site a{color:rgba(255,255,255,.76); text-decoration:none; font-size:15px;}
footer.site a:hover{color:var(--cream);}
footer.site .base{
  margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap;
  font-family:var(--font-serif); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.52);
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .pack-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr; gap:48px;}
  .collage{margin:0 auto;}
  .pack-grid, .quotes{grid-template-columns:repeat(2,1fr);}
  .facts{grid-template-columns:1fr 1fr;}
  .facts .f:nth-child(2){border-right:none;}
  .facts .f:nth-child(1), .facts .f:nth-child(2){border-bottom:1px dashed rgba(34,37,45,.24);}
  footer.site .cols{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .wrap{padding:0 22px;}
  .section{padding:68px 0;}
  .burger{display:flex;}
  .topbar nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--cream); border-bottom:1px solid rgba(34,37,45,.18);
    padding:6px 22px 22px;
  }
  .topbar nav.open{display:flex;}
  .topbar nav a{width:100%; padding:15px 0; border-bottom:1px dashed rgba(34,37,45,.22);}
  .topbar nav .nav-cta{margin-top:16px; width:auto; border-bottom:none;}
  .fork{grid-template-columns:1fr;}
  .fork .divider{border:none; border-top:1px dashed rgba(34,37,45,.24); border-bottom:1px dashed rgba(34,37,45,.24); padding:14px 0;}
  .step{grid-template-columns:1fr; gap:3px;}
  .field-row{grid-template-columns:1fr;}
  .prose{padding:36px 26px;}
  .deps{grid-template-columns:1fr;}
  .pill-grid{grid-template-columns:1fr 1fr;}
  .split .pane{padding:36px 28px;}
  .panelcard{padding:30px 26px;}
  .formcard{padding:30px 24px;}
}
@media (max-width:600px){
  .pack-grid, .quotes{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .facts .f{border-right:none; border-bottom:1px dashed rgba(34,37,45,.24);}
  .facts .f:last-child{border-bottom:none;}
  .pill-grid{grid-template-columns:1fr;}
  footer.site .cols{grid-template-columns:1fr;}
  .collage{max-width:400px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
  .pack:hover, .btn:hover{transform:none;}
}

/* ==========================================================================
   DESTINATION SHOWCASE
   Full-bleed destination stage, misty dissolve, horizontal card rail.
   ========================================================================== */

.showcase{
  background:var(--stage, #7A6A4E);
  padding:0 0 64px;
  transition:background .7s ease;
}
.stage{
  max-width:var(--wrap); margin:0 auto;
  background:var(--cream);
  border-radius:0 0 30px 30px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(34,37,45,.28);
}

/* ---- hero ---- */
.stage-hero{position:relative; min-height:610px; display:flex; align-items:flex-end; overflow:hidden;}
.stage-hero .bg{position:absolute; inset:0;}
.stage-hero .bg img{width:100%; height:100%; object-fit:cover; display:block;}
.stage-hero .bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,18,18,.50) 0%, rgba(18,18,18,.10) 30%,
                             rgba(18,18,18,.04) 52%, rgba(18,18,18,.30) 78%, rgba(18,18,18,.52) 100%);
}
.stage-hero .inner{position:relative; z-index:3; width:100%; padding:0 56px 44px;}
.stage-eyebrow{
  font-family:var(--font-serif); font-size:11.5px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.stage-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(46px,7.4vw,96px); line-height:.94;
  color:var(--cream); margin:14px 0 0;
  text-shadow:0 4px 26px rgba(18,18,18,.42);
}
.stage-sub{
  color:rgba(255,255,255,.9); max-width:44ch; margin:18px 0 0; font-size:16px;
  text-shadow:0 2px 12px rgba(18,18,18,.5);
}
.stage-actions{display:flex; gap:12px; align-items:center; margin-top:28px; flex-wrap:wrap;}
.stage-actions .btn{padding:14px 28px;}
.icon-btn{
  width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--cream); text-decoration:none;
}
.icon-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8;}
.icon-btn:hover{background:rgba(255,255,255,.28);}

/* ---- slide indicator ---- */
.stage-dots{display:flex; align-items:center; gap:14px; margin-top:34px;}
.stage-dots .idx{
  font-family:var(--font-serif); font-size:12px; font-weight:700;
  letter-spacing:.2em; color:rgba(255,255,255,.85);
}
.stage-dots .track{display:flex; align-items:center; gap:9px;}
.stage-dots button{
  width:11px; height:11px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.42); transition:width .3s ease, background .3s ease;
}
.stage-dots button[aria-current="true"]{width:30px; border-radius:9px; background:var(--gold);}
.stage-dots .bar{width:64px; height:1.5px; background:rgba(255,255,255,.42);}

/* ---- explore block ---- */
.explore{display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; background:var(--cream);}
.explore-media{position:relative; min-height:520px; overflow:hidden; min-width:0;}
.explore-media img{
  width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0;
  -webkit-mask-image:radial-gradient(104% 86% at 26% 48%, #000 40%, rgba(0,0,0,.85) 62%, rgba(0,0,0,0) 92%);
  mask-image:radial-gradient(104% 86% at 26% 48%, #000 40%, rgba(0,0,0,.85) 62%, rgba(0,0,0,0) 92%);
}
/* soft cloud bank sitting over the fade, so the image melts rather than clips */
.explore-media::after{
  content:""; position:absolute; inset:-6%;
  background:
    radial-gradient(34% 30% at 88% 22%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(38% 34% at 96% 66%, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(32% 24% at 66% 98%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 74%),
    radial-gradient(28% 22% at 26% 100%, rgba(255,255,255,.66) 0%, rgba(255,255,255,0) 76%),
    radial-gradient(24% 20% at 8% 2%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 78%);
  pointer-events:none;
}
.explore-copy{padding:64px 56px 64px 20px; min-width:0;}
.explore-copy h2{
  font-family:var(--font-display); font-weight:400; color:var(--ink);
  font-size:clamp(28px,3.4vw,44px); line-height:1.06; margin:14px 0 0;
}
.explore-copy p.blurb{color:var(--ink-soft); max-width:46ch; margin:20px 0 30px; font-size:16px;}

/* ---- horizontal card rail ---- */
.rail{display:flex; gap:18px; overflow-x:auto; padding:6px 4px 22px; scroll-snap-type:x mandatory; min-width:0;}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-thumb{background:var(--sand); border-radius:6px;}
.rail-card{
  flex:0 0 194px; scroll-snap-align:start;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 8px 22px rgba(34,37,45,.11);
  transition:transform .2s ease, box-shadow .2s ease;
}
.rail-card:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(34,37,45,.17);}
.rail-card .pic{position:relative; height:118px; overflow:hidden; background:var(--sand);}
.rail-card .pic img{width:100%; height:100%; object-fit:cover;}
.rail-card .pic::after{content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.34;}
.rail-card .txt{padding:12px 14px 15px;}
.rail-card h4{font-family:var(--font-script); font-weight:700; font-size:16px; color:var(--ink); line-height:1.2;}
.rail-card .kind{
  font-family:var(--font-serif); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:5px;
}
.rail-card .tagline{
  display:flex; align-items:center; gap:6px; margin-top:9px;
  font-family:var(--font-serif); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bronze);
}
.rail-card .tagline .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}

@media (max-width:980px){
  .explore{grid-template-columns:1fr;}
  .explore-media{min-height:330px;}
  .explore-media img{
    -webkit-mask-image:radial-gradient(120% 108% at 50% 40%, #000 40%, rgba(0,0,0,.7) 64%, rgba(0,0,0,0) 84%);
    mask-image:radial-gradient(120% 108% at 50% 40%, #000 40%, rgba(0,0,0,.7) 64%, rgba(0,0,0,0) 84%);
  }
  .explore-copy{padding:12px 34px 54px;}
  .stage-hero .inner{padding:0 34px 36px;}
  .stage-hero{min-height:520px;}
}
@media (max-width:600px){
  .stage{border-radius:0 0 20px 20px;}
  .stage-hero .inner{padding:0 22px 30px;}
  .explore-copy{padding:10px 22px 46px;}
  .stage-hero{min-height:470px;}
}

/* ---- transparent nav while over the hero ---- */
body.has-stage .topbar{
  position:fixed; top:0; left:0; right:0;
  background:transparent; backdrop-filter:none; border-bottom:1px solid transparent;
}
body.has-stage .topbar nav a{color:var(--cream);}
body.has-stage .topbar nav a:hover,
body.has-stage .topbar nav a[aria-current="page"]{color:var(--gold); border-color:var(--gold);}
body.has-stage .topbar .brandmark img{filter:brightness(0) invert(1);}
body.has-stage .burger{border-color:rgba(255,255,255,.55);}
body.has-stage .burger span{background:var(--cream);}
body.has-stage .topbar.solid{
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(34,37,45,.16);
}
body.has-stage .topbar.solid nav a{color:var(--ink);}
body.has-stage .topbar.solid nav a:hover,
body.has-stage .topbar.solid nav a[aria-current="page"]{color:var(--bronze); border-color:var(--gold-deep);}
body.has-stage .topbar.solid .brandmark img{filter:none;}
body.has-stage .topbar.solid .burger{border-color:rgba(34,37,45,.3);}
body.has-stage .topbar.solid .burger span{background:var(--ink);}
@media (max-width:820px){
  body.has-stage .topbar nav{background:var(--mist);}
  body.has-stage .topbar.solid nav{background:var(--cream);}
}

/* ==========================================================================
   HOME - app-style shell, written mobile first.
   Base rules target a ~390px viewport; min-width queries scale it up.
   Dark espresso stands in for the reference's near-black, gold for its cyan.
   ========================================================================== */

.app{background:var(--mist); color:var(--ink); padding:14px 0 0; position:relative; overflow:hidden;}
.app::before{
  content:""; position:absolute; top:-120px; right:-90px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle, rgba(160,211,229,.34), transparent 68%);
  pointer-events:none;
}
.app .pad{padding:0 20px;}

/* ---- top row: grid + avatar capsule, city selector ---- */
.app-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:30px;}
.capsule{display:flex; align-items:center; background:var(--white); border:1px solid var(--mist-2);
  border-radius:999px; padding:4px; gap:2px; box-shadow:var(--shadow-soft);}
.capsule .ic{
  width:38px; height:38px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.capsule .ic svg{width:19px; height:19px; fill:var(--ink);}
.capsule .av{
  width:38px; height:38px; border-radius:50%; background:var(--sky-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.capsule .av img{width:22px; height:22px;}
.citysel{
  display:flex; align-items:center; gap:10px; background:var(--white);
  border:1px solid var(--mist-2); border-radius:999px; padding:6px 6px 6px 18px;
  font-family:var(--font-serif); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-soft);
}
.citysel .chev{
  width:32px; height:32px; border-radius:50%; background:var(--sky-soft);
  display:flex; align-items:center; justify-content:center;
}
.citysel .chev svg{width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:2;}

/* ---- hero heading with sticker + doodle ---- */
.app-hero{position:relative; margin-bottom:26px;}
.app-hero .l1{
  font-family:var(--font-script); font-weight:500; font-size:34px;
  color:var(--ink); line-height:1.05; display:flex; align-items:center; gap:10px;
}
.app-hero .l1 .sticker{width:34px; height:34px; flex:none;}
.app-hero .l2{
  font-family:var(--font-display); font-weight:400; font-size:38px;
  color:var(--ink); line-height:1.02; margin-top:2px;
}
.app-hero .doodle{position:absolute; right:6px; top:6px; width:78px; height:70px; pointer-events:none;}
.app-hero .doodle svg{width:100%; height:100%; stroke:var(--sky-deep); fill:none; stroke-width:1.8;}
.app-hero p{color:var(--slate); font-size:14.5px; margin:12px 0 0; max-width:34ch;}

/* ---- scrolling chip row ---- */
.chiprow{display:flex; gap:10px; overflow-x:auto; padding:2px 20px 4px; scroll-snap-type:x proximity;}
.chiprow::-webkit-scrollbar{display:none;}
.chiprow{scrollbar-width:none;}
.chip{
  flex:0 0 auto; scroll-snap-align:start; display:flex; align-items:center; gap:10px;
  background:var(--white); border:1px solid var(--mist-2);
  border-radius:999px; padding:7px 18px 7px 7px; cursor:pointer;
  font-size:13.5px; color:var(--ink); white-space:nowrap;
}
.chip .b{
  width:32px; height:32px; border-radius:50%; background:var(--sky-soft);
  display:flex; align-items:center; justify-content:center;
}
.chip .b svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.7;}
.chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600;}
.chip[aria-pressed="true"] .b{background:rgba(34,37,45,.12);}
.chip[aria-pressed="true"] .b svg{stroke:var(--ink);}

/* ---- section head ---- */
.sect-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:28px 0 14px;}
.sect-head h2{font-family:var(--font-script); font-weight:700; font-size:20px; color:var(--ink);}
.sect-head a{
  font-family:var(--font-serif); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--label); text-decoration:none; white-space:nowrap;
}

/* ---- trip carousel ---- */
.tripscroll{display:flex; gap:14px; overflow-x:auto; padding:0 20px 6px; scroll-snap-type:x mandatory;}
.tripscroll::-webkit-scrollbar{display:none;}
.tripscroll{scrollbar-width:none;}
.tripcard{
  flex:0 0 250px; scroll-snap-align:start; position:relative;
  border-radius:22px; overflow:hidden; background:var(--white);
  text-decoration:none; color:var(--white); display:block; box-shadow:var(--shadow-soft);
}
.tripcard .shot{position:relative; height:290px;}
.tripcard .shot img{width:100%; height:100%; object-fit:cover;}
.tripcard .shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,18,18,.30) 0%, rgba(18,18,18,0) 34%, rgba(18,18,18,.86) 100%);
}
.tripcard .fav{
  position:absolute; top:12px; right:12px; z-index:3;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
}
.tripcard .fav svg{width:16px; height:16px; stroke:var(--red); fill:none; stroke-width:1.9;}
.tripcard .flag{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--font-serif); font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; background:var(--gold); color:var(--ink);
  padding:5px 11px; border-radius:999px;
}
.tripcard .flag.soon{background:rgba(255,255,255,.9); color:var(--ink-2);}
.tripcard .cap{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px;}
.tripcard .cap h3{font-family:var(--font-script); font-weight:700; font-size:19px; line-height:1.15;}
.tripcard .cap .when{
  font-family:var(--font-serif); font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-top:6px;
}
.tripcard .cap .meta{font-size:12.5px; color:rgba(255,255,255,.72); margin-top:4px;}

/* ---- light sheet ---- */
.sheet{
  background:var(--white); color:var(--ink);
  border-radius:28px 28px 0 0; margin-top:32px; padding:34px 20px 40px; position:relative;
}
.sheet::before{
  content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:44px; height:4px; border-radius:4px; background:var(--sand);
}
.sheet h2{font-family:var(--font-script); font-weight:700; font-size:23px; color:var(--ink);}
.sheet .lead{color:var(--ink-soft); font-size:14.5px; margin:8px 0 0;}

.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px;}
.feat{text-align:center;}
.feat .b{
  width:54px; height:54px; border-radius:18px; background:var(--sky-soft);
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.feat .b svg{width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:1.6;}
.feat h3{font-family:var(--font-script); font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.25;}
.feat p{font-size:12.5px; color:var(--ink-soft); margin:3px 0 0;}

.regions{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px;}
.regions .region{
  position:relative; border-radius:18px; overflow:hidden; height:112px;
  text-decoration:none; display:block; background:var(--sand);
}
.regions .region img{width:100%; height:100%; object-fit:cover;}
.regions .region::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,0) 32%, rgba(18,18,18,.76) 100%);}
.regions .region span{
  position:absolute; left:12px; right:12px; bottom:10px; z-index:3;
  font-family:var(--font-script); font-weight:700; font-size:14px; color:var(--cream); line-height:1.2;
}
.regions .region small{
  display:block; font-family:var(--font-serif); font-size:9px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-top:2px;
}

.bigcta{
  background:var(--gold); border-radius:24px; padding:26px 22px; margin-top:26px; text-align:center;
}
.bigcta h3{font-family:var(--font-display); font-weight:400; font-size:26px; color:var(--ink); line-height:1.08;}
.bigcta p{color:#2C5A69; font-size:14px; margin:10px 0 18px;}

/* ---- sticky bottom action bar, mobile only ---- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--mist-2);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:center;
}
.dock .txt{flex:1; min-width:0;}
.dock .txt b{font-family:var(--font-script); font-weight:700; font-size:14px; color:var(--ink); display:block;}
.dock .txt span{
  font-family:var(--font-serif); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label);
}
.dock .btn{padding:12px 22px; font-size:14px;}
body.has-app{padding-bottom:78px;}
body.has-app .topbar{display:none;}

/* ================= scale up ================= */
@media (min-width:640px){
  .app .pad, .chiprow, .tripscroll{padding-left:34px; padding-right:34px;}
  .app-hero .l1{font-size:44px;} .app-hero .l1 .sticker{width:42px; height:42px;}
  .app-hero .l2{font-size:52px;}
  .app-hero .doodle{width:104px; height:92px;}
  .feats{grid-template-columns:repeat(4,1fr);}
  .regions{grid-template-columns:repeat(3,1fr);}
  .regions .region{height:132px;}
  .sheet{padding:44px 34px 54px;}
  .tripcard{flex-basis:272px;}
}
@media (min-width:1000px){
  .app{padding-top:22px;}
  .app .pad, .chiprow, .tripscroll, .sheet{
    max-width:var(--wrap); margin-left:auto; margin-right:auto;
  }
  .app .pad{padding-left:34px; padding-right:34px;}
  .app-hero{max-width:none;}
  .app-hero .l1{font-size:56px;} .app-hero .l1 .sticker{width:52px; height:52px;}
  .app-hero .l2{font-size:72px;}
  .app-hero .doodle{width:150px; height:120px; right:40px; top:0;}
  .app-hero p{font-size:16px;}
  .sect-head h2{font-size:26px;}
  .tripcard{flex-basis:300px;}
  .tripcard .shot{height:340px;}
  .regions{grid-template-columns:repeat(6,1fr);}
  .sheet{border-radius:34px 34px 0 0; padding:56px 44px 66px;}
  .sheet h2{font-size:30px;}
  .bigcta{padding:44px; display:flex; align-items:center; justify-content:space-between; gap:30px; text-align:left;}
  .bigcta h3{font-size:34px; max-width:16ch;}
  .bigcta p{margin:8px 0 0; max-width:40ch;}
  .dock{display:none;}
  body.has-app{padding-bottom:0;}
  body.has-app .topbar{display:block;}
}

/* home: pull the desktop header into the dark shell */
body.has-app .topbar{
  background:rgba(243,246,248,.94); border-bottom:1px solid var(--mist-2); backdrop-filter:blur(8px);
}
body.has-app .topbar .brandmark img{filter:none;}
body.has-app .topbar nav a{color:var(--ink);}
body.has-app .topbar nav a:hover,
body.has-app .topbar nav a[aria-current="page"]{color:var(--label); border-color:var(--sky-deep);}
body.has-app .topbar .nav-cta{background:var(--gold); color:var(--ink);}
body.has-app .topbar .nav-cta:hover{background:var(--gold-deep);}
@media (min-width:1000px){
  .app-hero .doodle{left:46%; right:auto; top:14px;}
}

/* hero heading is a real h1; the two weights are spans inside it */
.app-h1{margin:0; font-weight:400;}
.app-hero .l1{display:flex;}
.app-hero .l2{display:block;}

/* ---- interior page banner, with or without a photo ---- */
.page-banner{padding:74px 0 62px; position:relative; overflow:hidden;}
.page-banner.has-photo{color:var(--cream);}
.page-banner .banner-photo{position:absolute; inset:0; z-index:0;}
.page-banner .banner-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.page-banner .banner-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,18,18,.74) 0%, rgba(18,18,18,.50) 46%, rgba(18,18,18,.72) 100%);
}
.page-banner > .wrap{position:relative; z-index:2;}
@media (min-width:900px){ .page-banner{padding:110px 0 92px;} }

/* photos carry their own colour, so the unifying tint stays light */
.pack .shot::after{opacity:.16;}
.pack:hover .shot::after{opacity:.06;}
.rail-card .pic::after{opacity:.14;}