/* ============================================================
   Little Road Adventures
   Brand tokens sampled from the real logo:
   cream #F4EFE4 · forest #3E4C3E · sage #B7BEA8 · amber #D9A441
   ============================================================ */

:root{
  /* paper + ink (tinted toward brand hue, never pure black/white) */
  --paper:      oklch(0.9530 0.0156 86.4);
  --paper-lift: oklch(0.9740 0.0090 86.4);
  --paper-sink: oklch(0.9200 0.0170 86.4);

  --forest:     oklch(0.3997 0.0293 145.0);
  --forest-deep:oklch(0.2580 0.0215 146.0);
  --forest-ink: oklch(0.1950 0.0170 147.0);

  --sage:       oklch(0.7899 0.0313 121.5);
  --sage-deep:  oklch(0.6450 0.0330 128.0);

  --amber:      oklch(0.7507 0.1295 79.8);   /* the one committed accent */
  --amber-deep: oklch(0.6450 0.1240 72.0);

  --ink:        oklch(0.3100 0.0240 145.0);
  --muted:      oklch(0.5250 0.0190 132.0);
  --hair:       oklch(0.3997 0.0293 145.0 / 0.16);
  --hair-soft:  oklch(0.3997 0.0293 145.0 / 0.09);

  /* on dark grounds */
  --d-ink:      oklch(0.9350 0.0130 88.0);
  --d-muted:    oklch(0.7300 0.0160 110.0);
  --d-hair:     oklch(0.9530 0.0156 86.4 / 0.18);

  --disp: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', -apple-system, 'Helvetica Neue', sans-serif;

  --shell: 1280px;
  --gut: clamp(1.25rem, 4.5vw, 4rem);
  --sect: clamp(5.5rem, 12vw, 11rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.1rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--disp);
  font-weight:300;
  font-variation-settings:'opsz' 120,'SOFT' 0,'WONK' 0;
  line-height:1.02;
  letter-spacing:-0.018em;
  margin:0;
  text-wrap:balance;
}
.d1{font-size:clamp(2.7rem,1.3rem + 6.1vw,6.1rem)}
.d2{font-size:clamp(2.1rem,1.15rem + 4.1vw,4.2rem)}
.d3{font-size:clamp(1.6rem,1.1rem + 2.1vw,2.6rem);line-height:1.1}
.d4{font-size:clamp(1.22rem,1.05rem + .7vw,1.55rem);line-height:1.22;letter-spacing:-.01em}
em{font-style:italic;font-variation-settings:'opsz' 120,'SOFT' 20}

.eye{
  font-family:var(--sans);
  max-width:none;
  font-size:.688rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sage-deep);
  margin:0 0 1.5rem;
  display:flex;align-items:center;gap:.85rem;
}
.eye::before{content:'';width:1.9rem;height:1px;background:var(--amber);flex:none}
.on-dark .eye{color:var(--sage)}

.lede{
  font-size:clamp(1.1rem,1rem + .5vw,1.38rem);
  line-height:1.62;
  font-weight:300;
  max-width:36ch;
  color:var(--ink);
}
p{max-width:66ch;margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
strong,b{font-weight:500;color:var(--forest-deep)}
.on-dark strong,.on-dark b{color:var(--paper-lift)}
.u-amber{
  color:inherit;
  background-image:linear-gradient(var(--amber),var(--amber));
  background-size:100% .28em;background-repeat:no-repeat;background-position:0 88%;
  padding:0 .06em;
}

/* ---------- layout ---------- */
.shell{width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto}
.shell-wide{width:min(1500px,100% - var(--gut)*2);margin-inline:auto}
section{padding-block:var(--sect)}
.rule{height:1px;background:var(--hair);border:0;margin:0}

.on-dark{background:var(--forest-deep);color:var(--d-ink)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper-lift)}
.on-dark p{color:var(--d-muted)}
.on-forest{background:var(--forest);color:var(--d-ink)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--forest-deep); --fg:var(--paper-lift);
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.12rem 2.3rem;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bg);border-radius:999px;
  font-family:var(--sans);font-size:.78rem;font-weight:400;
  letter-spacing:.155em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .35s var(--ease);
}
.btn::after{
  content:'';position:absolute;inset:0;background:var(--amber);
  transform:translateY(101%);transition:transform .52s var(--ease-out);z-index:0;
}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px oklch(0.2580 0.0215 146 / .55)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:var(--forest-ink)}
.btn-amber{--bg:var(--amber);--fg:var(--forest-ink)}
.btn-amber::after{background:var(--forest-deep)}
.btn-amber:hover{color:var(--paper-lift)}
.btn-ghost{--bg:transparent;--fg:currentColor;border-color:var(--hair)}
.on-dark .btn-ghost{border-color:var(--d-hair)}
.btn-ghost::after{background:var(--amber)}
.btn-ghost:hover{color:var(--forest-ink)}
.btn-lg{padding:1.28rem 2.9rem;font-size:.82rem}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;gap:1.5rem;
  padding:1.05rem var(--gut);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav.stuck{
  background:oklch(0.9530 0.0156 86.4 / .93);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  box-shadow:0 1px 0 var(--hair-soft);
  padding-block:.72rem;
}
.nav-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:none}
.nav-brand img{width:46px;height:46px;transition:width .5s var(--ease),height .5s var(--ease)}
.nav.stuck .nav-brand img{width:38px;height:38px}
.nav-wm{
  font-family:var(--sans);font-size:.7rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.35;
  color:var(--paper-lift);transition:color .5s var(--ease);
}
.nav.stuck .nav-wm{color:var(--forest-deep)}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.nav-links a{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;color:var(--paper-lift);opacity:.86;position:relative;padding-block:.3rem;
  transition:color .5s var(--ease),opacity .3s var(--ease);
}
.nav.stuck .nav-links a{color:var(--ink)}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--amber);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:.82rem 1.6rem;font-size:.7rem}
.nav:not(.stuck) .btn-nav{--bg:transparent;--fg:var(--paper-lift);border-color:oklch(0.9530 0.0156 86.4 / .4)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  /* top padding always clears the fixed nav, so a short window grows the
     hero instead of pushing its content up underneath the bar */
  padding:7.5rem 0 clamp(3rem,7vw,6rem);
  overflow:hidden;isolation:isolate;
}
.hero-media{position:absolute;inset:-8% 0 0;z-index:-2;will-change:transform}
.hero-media img{
  width:100%;height:116%;object-fit:cover;object-position:50% 46%;
  filter:saturate(.72) contrast(1.06) brightness(.82);
}
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,
      oklch(0.1950 0.0170 147 / .74) 0%,
      oklch(0.1950 0.0170 147 / .40) 34%,
      oklch(0.1950 0.0170 147 / .62) 72%,
      oklch(0.1950 0.0170 147 / .93) 100%),
    linear-gradient(90deg, oklch(0.2580 0.0215 146 / .55), transparent 62%);
}
.hero-inner{width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto;color:var(--d-ink)}
.hero h1{color:var(--paper-lift);max-width:17ch}
.hero .eye{color:var(--sage)}
.hero-sub{
  max-width:54ch;margin:2.1rem 0 2.6rem;
  font-size:clamp(1.02rem,.96rem + .42vw,1.24rem);
  line-height:1.66;color:oklch(0.9000 0.0140 95 / .9);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:.65rem 1.9rem;
  margin-top:3rem;padding-top:1.7rem;border-top:1px solid var(--d-hair);
  font-size:.74rem;letter-spacing:.115em;text-transform:uppercase;color:var(--sage);
}
.hero-trust span{display:flex;align-items:center;gap:.55rem}
.hero-trust span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}

.hero-seal{
  position:absolute;top:clamp(5.5rem,11vh,8rem);right:var(--gut);
  width:clamp(92px,11vw,142px);z-index:1;opacity:.96;
  filter:drop-shadow(0 10px 30px oklch(0.1950 0.0170 147 / .5));
}
@media (max-width:920px){.hero-seal{display:none}}

/* ---------- reveal (used sparingly) ---------- */
.rv{opacity:0;transform:translateY(26px);
    transition:opacity 1.05s var(--ease-out),transform 1.05s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-media{transform:none !important}
}

/* ---------- split / editorial ---------- */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:start}
.split-tight{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
@media (max-width:900px){.split,.split-tight{grid-template-columns:1fr;gap:2.5rem}}
.sticky-head{position:sticky;top:7rem}
@media (max-width:900px){.sticky-head{position:static}}

/* agitate list */
.agitate{list-style:none;margin:2.4rem 0 0;padding:0;max-width:60ch}
.agitate li{
  position:relative;padding:1.25rem 0 1.25rem 2.6rem;
  border-top:1px solid var(--hair-soft);
  font-size:1.05rem;line-height:1.6;
}
.agitate li:last-child{border-bottom:1px solid var(--hair-soft)}
.agitate li::before{
  content:'';position:absolute;left:.25rem;top:1.95rem;
  width:12px;height:1px;background:var(--amber);
}
.on-dark .agitate li{border-color:var(--d-hair);color:var(--d-muted)}

/* pull quote */
.pull{
  font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(1.45rem,1.1rem + 1.7vw,2.5rem);
  line-height:1.24;letter-spacing:-.015em;max-width:24ch;
  font-variation-settings:'opsz' 120,'SOFT' 20;
}

/* ---------- itinerary ---------- */
.itin{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--d-hair)}
.itin-row{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding:clamp(1.6rem,3vw,2.5rem) 0;border-bottom:1px solid var(--d-hair);
  transition:background .6s var(--ease);
}
.itin-row:hover{background:oklch(0.9530 0.0156 86.4 / .035)}
.itin-time{
  font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber);font-weight:400;
}
.itin-row h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
.itin-row p{font-size:.98rem;margin:0;color:var(--d-muted);max-width:52ch}
@media (max-width:860px){
  .itin-row{grid-template-columns:1fr;gap:.6rem}
  .itin-time{margin-bottom:.2rem}
}

/* ---------- full bleed photo band ---------- */
.band{position:relative;min-height:clamp(30rem,62vh,44rem);display:grid;place-items:center;overflow:hidden;isolation:isolate}
.band img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.68) contrast(1.05) brightness(.78);
}
.band::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,oklch(0.1950 0.0170 147 / .62),oklch(0.1950 0.0170 147 / .82));
}
.band-inner{text-align:center;width:min(58rem,100% - var(--gut)*2);color:var(--paper-lift);padding-block:5rem}
.band .pull{max-width:none;margin-inline:auto;color:var(--paper-lift)}
.band-attr{
  margin-top:2rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);
}

/* ---------- value stack ---------- */
.stack{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--hair)}
.stack-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--hair-soft);
}
.stack-row h4{font-family:var(--sans);font-size:1.02rem;font-weight:400;letter-spacing:0;line-height:1.45}
.stack-row h4 small{display:block;font-size:.88rem;color:var(--muted);margin-top:.2rem;line-height:1.5;max-width:52ch}
.stack-val{font-size:.95rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.stack-total{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.8rem 0 0;border-top:2px solid var(--forest-deep);margin-top:.4rem;
}
.stack-total .lbl{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.stack-total .amt{font-family:var(--disp);font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);line-height:1}
.strike{text-decoration:line-through;text-decoration-thickness:1px;opacity:.5}

.price-card{
  background:var(--paper-lift);border:1px solid var(--hair);
  padding:clamp(1.9rem,3.5vw,2.8rem);border-radius:3px;
  box-shadow:0 30px 70px -48px oklch(0.2580 0.0215 146 / .5);
}
.price-card .amt{font-family:var(--disp);font-size:clamp(2.6rem,2rem + 2.6vw,3.9rem);line-height:1;display:block}
.price-card .per{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.7rem}
.price-card .btn{width:100%;margin-top:1.7rem}
.price-note{font-size:.82rem;color:var(--muted);margin-top:1.1rem;line-height:1.55;text-align:center}

/* ---------- guarantee ---------- */
.guarantee{
  border:1px solid var(--amber);border-radius:3px;
  padding:clamp(2rem,4.5vw,3.4rem);
  background:oklch(0.7507 0.1295 79.8 / .07);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,3.5vw,2.8rem);align-items:start;
}
.guarantee .seal{
  width:clamp(62px,8vw,88px);height:clamp(62px,8vw,88px);border-radius:50%;
  border:1px solid var(--amber);display:grid;place-items:center;flex:none;
  font-family:var(--disp);font-size:clamp(1.3rem,1rem + 1vw,1.75rem);line-height:1;color:var(--amber-deep);
}
@media (max-width:640px){.guarantee{grid-template-columns:1fr}}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.6rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{border-top:1px solid var(--hair);padding-top:1.7rem}
.quote p{font-family:var(--disp);font-size:1.16rem;line-height:1.46;font-style:italic;color:var(--forest-deep);
  font-variation-settings:'opsz' 90,'SOFT' 20;margin-bottom:1.2rem}
.quote cite{font-style:normal;font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}

/* ---------- booking ---------- */
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:1.15rem;margin-top:clamp(2.5rem,5vw,3.6rem);align-items:start}
.date-card{
  position:relative;text-align:left;width:100%;
  background:var(--paper-lift);color:var(--ink);border:1px solid var(--hair);border-radius:3px;
  padding:1.65rem 1.7rem 1.5rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .45s var(--ease),transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .45s var(--ease);
}
.date-card:hover:not(.is-full){border-color:var(--sage-deep);transform:translateY(-3px);
  box-shadow:0 24px 48px -30px oklch(0.2580 0.0215 146 / .45)}
.date-card.is-sel{border-color:var(--forest-deep);background:var(--paper);box-shadow:inset 0 0 0 1px var(--forest-deep)}
.date-card.is-sel::before{
  content:'Selected';position:absolute;top:-.62rem;left:1.6rem;
  background:var(--forest-deep);color:var(--paper-lift);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:.25rem .65rem;border-radius:999px;
}
.date-card.is-full{opacity:.52;cursor:not-allowed}
.date-card:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.dc-date{font-family:var(--disp);font-size:1.52rem;line-height:1.05;color:var(--forest-deep)}
.dc-theme{font-size:.94rem;color:var(--ink);line-height:1.5}
.dc-meta{font-size:.82rem;color:var(--muted);line-height:1.5}
.dc-foot{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:.6rem 1rem;
  margin-top:.5rem;padding-top:.85rem;border-top:1px solid var(--hair-soft)}
.dc-price{font-size:.92rem;font-weight:400;color:var(--forest-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;white-space:nowrap}
.pill-open{background:oklch(0.7899 0.0313 121.5 / .4);color:var(--forest-deep)}
.pill-few{background:oklch(0.7507 0.1295 79.8 / .32);color:var(--amber-deep)}
.pill-full{background:var(--paper-sink);color:var(--muted)}

/* ---------- form ---------- */
.form-wrap{
  margin-top:clamp(2.5rem,5vw,3.6rem);
  background:var(--paper-lift);border:1px solid var(--hair);border-radius:3px;
  padding:clamp(1.6rem,4vw,3.4rem);
  box-shadow:0 40px 90px -60px oklch(0.2580 0.0215 146 / .55);
}
fieldset{border:0;padding:0;margin:0 0 clamp(2.2rem,4vw,3rem)}
fieldset:last-of-type{margin-bottom:1.8rem}
legend{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-deep);
  padding:0 0 1.3rem;width:100%;border-bottom:1px solid var(--hair-soft);margin-bottom:1.7rem;
  display:flex;align-items:center;gap:.8rem;
}
legend .n{font-family:var(--disp);font-size:1rem;color:var(--amber-deep);letter-spacing:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem 1.5rem}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:.5rem}
.f.span2{grid-column:1/-1}
.f label{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.f label .req{color:var(--amber-deep)}
.f input,.f select,.f textarea{
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--ink);
  background:var(--paper);border:1px solid var(--hair);border-radius:2px;
  padding:.88rem 1rem;width:100%;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.f textarea{min-height:6.5rem;resize:vertical;line-height:1.6}
.f select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23566B56' stroke-width='1.3'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0;border-color:var(--forest);background:var(--paper-lift);
  box-shadow:0 0 0 3px oklch(0.7507 0.1295 79.8 / .22);
}
.f input::placeholder,.f textarea::placeholder{color:oklch(0.5250 0.0190 132 / .6)}
.f .hint{font-size:.8rem;color:var(--muted);line-height:1.5}
.f .err{font-size:.78rem;color:oklch(0.52 0.15 27);min-height:0;display:none}
.f.invalid input,.f.invalid select,.f.invalid textarea{border-color:oklch(0.55 0.16 27)}
.f.invalid .err{display:block}

.check{display:flex;gap:.9rem;align-items:flex-start;padding:.55rem 0;cursor:pointer}
.check input{
  appearance:none;flex:none;width:1.2rem;height:1.2rem;margin-top:.18rem;
  border:1px solid var(--sage-deep);border-radius:2px;background:var(--paper);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.check input:checked{background:var(--forest-deep);border-color:var(--forest-deep);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'><path d='M1 5l3.4 3.4L11 1.6' fill='none' stroke='%23F4EFE4' stroke-width='1.8'/></svg>");
  background-repeat:no-repeat;background-position:center}
.check input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.check span{font-size:.92rem;line-height:1.58;color:var(--ink)}
.check.invalid span{color:oklch(0.52 0.15 27)}

.form-summary{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;
  background:var(--paper-sink);border-radius:2px;padding:1.1rem 1.35rem;margin-bottom:1.7rem;
  font-size:.92rem;
}
.form-summary .k{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.15rem}
.form-summary .v{font-weight:400;color:var(--forest-deep)}
.form-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.form-actions .btn{flex:1 1 16rem}
.form-note{font-size:.82rem;color:var(--muted);max-width:34ch;line-height:1.55}

.form-done{display:none;text-align:center;padding:clamp(2rem,5vw,3.5rem) 0}
.form-done.on{display:block}
.form-done .seal{
  width:72px;height:72px;border-radius:50%;border:1px solid var(--amber);
  display:grid;place-items:center;margin:0 auto 1.8rem;color:var(--amber-deep);
}
form.sent{display:none}

/* ---------- faq ---------- */
.faq{margin-top:clamp(2.5rem,5vw,3.6rem);border-top:1px solid var(--hair)}
details{border-bottom:1px solid var(--hair);}
summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--disp);font-size:clamp(1.08rem,1rem + .5vw,1.35rem);line-height:1.32;
  color:var(--forest-deep);transition:color .35s var(--ease);
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--amber-deep)}
summary::after{
  content:'';position:absolute;right:.4rem;top:50%;width:13px;height:13px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .45s var(--ease-out);
}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details .a{padding:0 3rem 1.7rem 0;color:var(--muted);animation:fade .5s var(--ease-out)}
details .a p{max-width:62ch}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){details .a{animation:none}}

/* ---------- footer ---------- */
.foot{background:var(--forest-ink);color:var(--d-muted);padding:clamp(4rem,8vw,6.5rem) 0 2.5rem}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.85fr));gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--d-hair)}
@media (max-width:820px){.foot-top{grid-template-columns:1fr}}
.foot img.mark{width:74px;margin-bottom:1.5rem}
.foot p{color:var(--d-muted);font-size:.95rem;max-width:34ch}
.foot h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage);font-weight:400;margin-bottom:1.3rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.foot a{color:var(--d-muted);text-decoration:none;font-size:.95rem;transition:color .35s var(--ease)}
.foot a:hover{color:var(--amber)}
.foot-bot{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  padding-top:2.2rem;font-size:.78rem;letter-spacing:.08em;color:oklch(0.6000 0.0150 120)}

/* ---------- framed photograph (controls raw phone-photo proportions) ---------- */
.shot{
  width:100%;
  aspect-ratio:4/5;
  max-height:640px;
  object-fit:cover;
  border-radius:3px;
  /* pull the blue charter livery toward the brand's warm neutrals */
  filter:saturate(.58) contrast(1.05) brightness(.97) sepia(.14);
  box-shadow:0 40px 80px -55px oklch(0.2580 0.0215 146 / .7);
}
@media (max-width:900px){.shot{aspect-ratio:3/2}}

/* ---------- phone: let the hero grow instead of overflowing under the nav ---------- */
@media (max-width:720px){
  .hero{padding-top:8rem;padding-bottom:3.5rem}
  .hero h1{max-width:none}
  .hero-sub{margin:1.6rem 0 2rem;max-width:none}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-trust{margin-top:2.2rem;padding-top:1.3rem;gap:.55rem;flex-direction:column}
  .nav .btn{padding:.72rem 1.15rem;font-size:.63rem;white-space:nowrap}
  .nav-wm{font-size:.62rem}
}

/* ============================================================
   PHASE 2 · Josie's feature brief
   ============================================================ */

/* ---------- mobile menu ---------- */
.nav-toggle{display:none;flex:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--paper-lift);margin:4px 0;transition:transform .4s var(--ease-out),opacity .3s var(--ease)}
.nav.stuck .nav-toggle span{background:var(--forest-deep)}
.nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
.nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width:1150px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;inset:0 0 auto;top:0;padding:6rem var(--gut) 2.5rem;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);margin-left:0;
    transform:translateY(-100%);transition:transform .55s var(--ease-out);
    box-shadow:0 20px 50px -30px oklch(0.2580 0.0215 146 / .5);
    max-height:100svh;overflow-y:auto;
  }
  .nav.menu-open .nav-links{transform:translateY(0)}
  .nav-links a{color:var(--ink);font-size:.9rem;letter-spacing:.1em;width:100%;
    padding:.95rem 0;border-bottom:1px solid var(--hair-soft)}
  .nav.stuck .nav-links a{color:var(--ink)}
  .nav .btn-nav{margin-left:auto}
  .nav-toggle{margin-left:.35rem}
}
@media (prefers-reduced-motion:reduce){.nav-links{transition:none}}

/* ---------- view toggle (calendar / list) ---------- */
.toggle{display:inline-flex;border:1px solid var(--d-hair);border-radius:999px;padding:.28rem;gap:.25rem;margin-top:2rem}
.toggle button{
  background:none;border:0;cursor:pointer;border-radius:999px;
  padding:.6rem 1.5rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--d-muted);transition:background .4s var(--ease),color .4s var(--ease);
}
.toggle button.on{background:var(--amber);color:var(--forest-ink)}
.toggle button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- calendar ---------- */
.cal{margin-top:clamp(2rem,4vw,3rem);max-width:46rem}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.cal-title{font-family:var(--disp);font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);color:var(--paper-lift)}
.cal-nav{display:flex;gap:.5rem}
.cal-nav button{
  width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;
  background:none;border:1px solid var(--d-hair);color:var(--d-ink);
  display:grid;place-items:center;transition:border-color .35s var(--ease),background .35s var(--ease);
}
.cal-nav button:hover:not(:disabled){border-color:var(--amber);background:oklch(0.7507 0.1295 79.8 / .14)}
.cal-nav button:disabled{opacity:.3;cursor:not-allowed}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.cal-dow{
  text-align:center;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);padding-bottom:.6rem;
}
.cal-cell{
  aspect-ratio:1;border-radius:3px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.22rem;
  font-size:.9rem;color:var(--d-muted);border:1px solid transparent;
  background:oklch(0.9530 0.0156 86.4 / .035);
}
.cal-cell.empty{background:none}
.cal-cell.has-tour{
  cursor:pointer;border-color:var(--d-hair);color:var(--paper-lift);
  background:oklch(0.9530 0.0156 86.4 / .07);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease-out);
}
.cal-cell.has-tour:hover{border-color:var(--amber);background:oklch(0.7507 0.1295 79.8 / .16);transform:translateY(-2px)}
.cal-cell.has-tour.sold{opacity:.45}
.cal-cell.is-sel{border-color:var(--amber);background:oklch(0.7507 0.1295 79.8 / .24)}
.cal-cell:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--amber)}
.cal-cell.sold .cal-dot{background:var(--sage-deep)}
.cal-key{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.5rem;font-size:.72rem;color:var(--sage)}
.cal-key span{display:flex;align-items:center;gap:.5rem}

/* ---------- expanded tour card ---------- */
.tour-detail{
  display:none;margin-top:.9rem;padding-top:1rem;border-top:1px solid var(--hair-soft);
  flex-direction:column;gap:.85rem;
}
.date-card.is-sel .tour-detail{display:flex}
.td-block .k{
  display:block;font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--sage-deep);margin-bottom:.3rem;
}
.td-block .v{font-size:.86rem;line-height:1.55;color:var(--ink)}
.td-block ul{margin:0;padding-left:1.05rem;font-size:.86rem;line-height:1.6;color:var(--ink)}
.pickup-row{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;padding:.2rem 0;color:var(--ink)}
.pickup-row .t{color:var(--muted);font-variant-numeric:tabular-nums}
.pill-wait{background:oklch(0.7899 0.0313 121.5 / .28);color:var(--forest-deep)}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:3px}
.gallery img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.7) contrast(1.05);
  transition:transform 1.1s var(--ease-out),filter .6s var(--ease);
}
.gallery figure:hover img{transform:scale(1.04);filter:saturate(.82) contrast(1.06)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.1rem .95rem;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-lift);
  background:linear-gradient(transparent,oklch(0.1950 0.0170 147 / .8));
}
@media (prefers-reduced-motion:reduce){.gallery img{transition:none}.gallery figure:hover img{transform:none}}

/* ---------- small feature cards (gift / private) ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.panel{
  background:var(--paper-lift);border:1px solid var(--hair);border-radius:3px;
  padding:clamp(1.8rem,3.5vw,2.8rem);display:flex;flex-direction:column;
}
.panel.on-forest-panel{background:oklch(0.9530 0.0156 86.4 / .05);border-color:var(--d-hair)}
.panel h3{margin-bottom:1rem}
.panel p{font-size:.97rem}
.panel .btn{margin-top:auto;align-self:flex-start}
.panel form{margin-top:1.5rem}

/* ---------- promo code ---------- */
.promo-row{display:flex;gap:.6rem;align-items:flex-start}
.promo-row input{flex:1;text-transform:uppercase}
.promo-row button{
  flex:none;padding:.88rem 1.4rem;border-radius:2px;cursor:pointer;
  background:var(--forest-deep);color:var(--paper-lift);border:1px solid var(--forest-deep);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background .35s var(--ease);
}
.promo-row button:hover{background:var(--amber);color:var(--forest-ink);border-color:var(--amber)}
.promo-msg{font-size:.82rem;margin-top:.5rem;display:none}
.promo-msg.ok{display:block;color:oklch(0.48 0.09 150)}
.promo-msg.no{display:block;color:oklch(0.52 0.15 27)}
.sum-strike{text-decoration:line-through;opacity:.5;margin-right:.45rem;font-weight:300}

/* ---------- waiver ---------- */
.waiver{
  background:var(--paper-sink);border:1px solid var(--hair);border-radius:2px;
  padding:1.3rem 1.5rem;max-height:14rem;overflow-y:auto;margin-bottom:1.4rem;
  font-size:.88rem;line-height:1.65;color:var(--ink);
}
.waiver h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage-deep);font-weight:400;margin:0 0 .8rem}
.waiver p{max-width:none;margin-bottom:.8rem;font-size:.88rem}
.waiver p:last-child{margin-bottom:0}
.sig-note{font-size:.8rem;color:var(--muted);margin-top:.4rem}

/* ---------- share ---------- */
.share{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.6rem}
.share .lbl{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:.3rem}
.share button,.share a{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;text-decoration:none;
  padding:.6rem 1.15rem;border-radius:999px;border:1px solid var(--hair);background:none;
  font-size:.72rem;letter-spacing:.1em;color:var(--ink);
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.share button:hover,.share a:hover{border-color:var(--amber);background:oklch(0.7507 0.1295 79.8 / .14)}
.on-dark .share .lbl{color:var(--sage)}
.on-dark .share button,.on-dark .share a{border-color:var(--d-hair);color:var(--d-ink)}

/* ---------- inline mini form (newsletter / suggestion) ---------- */
.inline-form{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-start;margin-top:1.8rem;max-width:34rem}
/* The input lives inside a .f column wrapper, so a flex-basis here set its
   HEIGHT, not its width: it rendered 240px tall and stretched the button into
   an oval. The wrapper sizes it now; both share one fixed height. */
.inline-form input{
  flex:none;width:100%;height:3.5rem;font-family:var(--sans);font-size:1rem;font-weight:300;
  background:var(--paper);border:1px solid var(--hair);border-radius:2px;
  padding:.92rem 1rem;color:var(--ink);
}
.on-dark .inline-form input{background:oklch(0.9530 0.0156 86.4 / .07);border-color:var(--d-hair);color:var(--d-ink)}
.on-dark .inline-form input::placeholder{color:var(--d-muted)}
.inline-form input:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px oklch(0.7507 0.1295 79.8 / .2)}
.inline-form .btn{flex:0 0 auto;height:3.5rem;padding-block:0}
.mini-done{display:none;margin-top:1rem;font-size:.92rem;color:var(--amber)}
.mini-done.on{display:block}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-grid .k{display:block;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:.6rem}
.contact-grid a{color:var(--forest-deep);text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .35s var(--ease)}
.contact-grid a:hover{border-color:var(--amber)}

/* distance band on a trip card */
.dc-band{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sage-deep)}

/* Josie's portrait sits squarer than a landscape shot */
.shot-portrait{aspect-ratio:1/1;max-height:560px;object-position:50% 28%;filter:saturate(.92) contrast(1.02)}
@media (max-width:900px){.shot-portrait{aspect-ratio:1/1;max-height:420px}}

/* ============================================================
   Candid texts carousel
   ============================================================ */
.tcar{position:relative;margin-top:clamp(2.5rem,5vw,3.5rem)}
.tcar-track{
  display:flex;gap:1.15rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  /* no scroll-snap and no smooth: both fight the frame-by-frame drift */
  align-items:flex-start;
  padding:.4rem .2rem 1.6rem;margin:0 -.2rem;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;touch-action:pan-x;
  -webkit-user-select:none;user-select:none;
  /* soften both ends so messages drift in and out rather than clipping */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5.5rem,#000 calc(100% - 5.5rem),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5.5rem,#000 calc(100% - 5.5rem),transparent);
}
@media (max-width:720px){
  .tcar-track{-webkit-mask-image:none;mask-image:none}
}
.tcar-track::-webkit-scrollbar{display:none}
.tcar-track.dragging{cursor:grabbing}
/* reduced motion: no drift, just an ordinary scrollable row */
@media (prefers-reduced-motion:reduce){.tcar-track{scroll-snap-type:x proximity}}

.tcar-item{
  flex:0 0 auto;width:min(86vw,25rem);
  display:flex;flex-direction:column;gap:.9rem;
}

/* the message bubble itself */
.bubble{
  position:relative;
  background:var(--paper-lift);color:var(--ink);
  border-radius:20px 20px 20px 5px;
  padding:1.35rem 1.5rem;
  font-size:1rem;line-height:1.6;
  box-shadow:0 26px 50px -34px oklch(0.1950 0.0170 147 / .75);
}
.bubble::after{
  content:'';position:absolute;left:0;bottom:-9px;
  width:16px;height:16px;background:var(--paper-lift);
  clip-path:polygon(0 0,100% 0,0 100%);
}
.bubble p{margin:0;max-width:none;color:var(--ink)}
.bubble p + p{margin-top:.7rem}

.tcar-who{display:flex;align-items:center;gap:.7rem;padding-left:.35rem}
.tcar-av{
  width:2rem;height:2rem;border-radius:50%;flex:none;
  background:var(--sage);color:var(--forest-deep);
  display:grid;place-items:center;
  font-size:.78rem;font-weight:500;letter-spacing:.02em;
}
.tcar-name{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:var(--sage)}

/* controls */
.tcar-bar{display:flex;align-items:center;gap:1rem;margin-top:.4rem;flex-wrap:wrap}
.tcar-nav{display:flex;gap:.5rem}
.tcar-nav button{
  width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;
  background:none;border:1px solid var(--d-hair);color:var(--d-ink);
  display:grid;place-items:center;font-size:1rem;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.tcar-nav button:hover{border-color:var(--amber);background:oklch(0.7507 0.1295 79.8 / .16);color:var(--paper-lift)}
.tcar-nav button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.tcar-dots{display:flex;gap:.45rem;margin-left:auto;flex-wrap:wrap}
.tcar-dots button{
  width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  background:oklch(0.9530 0.0156 86.4 / .28);border:0;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.tcar-dots button.on{background:var(--amber);transform:scale(1.5)}
.tcar-dots button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.tcar-hint{font-size:.76rem;color:var(--sage);letter-spacing:.06em}
@media (max-width:640px){.tcar-hint{display:none}}

/* ============================================================================
   PREMIUM LAYER
   Everything below is progressive enhancement. With no JS, or under
   prefers-reduced-motion, every element renders in its final, static state.
   ============================================================================ */

/* ---------- type: Fraunces' expressive axes, at editorial scale ---------- */
h1,h2{font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 0}
h1 em,h2 em,.pull em,.finale-title em,.foot-mark em,.tk-set em,.gfig-n,.eye-n{
  font-variation-settings:'opsz' 144,'SOFT' 100,'WONK' 1}
.d2{font-size:clamp(2.35rem,1.05rem + 4.7vw,5.5rem);line-height:.96;letter-spacing:-.032em}

/* chapter numbers on the story sections */
.eye-n{order:-2;font-family:var(--disp);font-style:italic;font-size:1.06rem;letter-spacing:0;
  text-transform:none;color:var(--amber);line-height:1}
.eye::before{order:-1}

/* ---------- word-mask headline reveal ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.2em .1em .18em .04em;margin:-.2em -.1em -.18em -.04em}
.wi{display:inline-block}
.motion-ready [data-split].is-split .wi{transform:translateY(112%) rotate(4deg);transform-origin:0 100%;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.motion-ready [data-split].is-split.is-in .wi{transform:none}
.js:not(.reduced):not(.motion-ready) [data-split]{opacity:0}
/* Failsafe rules carry an html prefix so they always out-rank the hiding rules
   above them. Before, the [data-split] rescue lost on specificity and a failed
   motion.js left every headline invisible. */
html.js.motion-failsafe:not(.motion-ready) [data-split]{opacity:1;transition:none}

/* ---------- intro curtain ---------- */
.intro{display:none}
.intro-on .intro,.intro.show{display:grid;position:fixed;inset:0;z-index:200;place-items:center;background:var(--paper);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
html.intro-on,html.intro-on body{overflow:hidden}
.intro.out{transform:translateY(-100%)}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:1.35rem}
.intro-logo{width:clamp(96px,13vw,128px);opacity:0;transform:scale(.84) rotate(-10deg);
  transition:opacity .8s var(--ease-out),transform 1.2s var(--ease-out)}
.intro-road{width:clamp(190px,28vw,300px);height:30px;overflow:visible}
.intro-road path{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.05s cubic-bezier(.65,0,.35,1) .2s}
.intro-word{margin:0;max-width:none;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sage-deep);opacity:0;transform:translateY(8px);transition:opacity .8s .5s,transform .8s .5s var(--ease-out)}
.intro-word i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--amber);
  vertical-align:middle;margin:0 .55rem}
.intro.play .intro-logo{opacity:1;transform:none}
.intro.play .intro-road path{stroke-dashoffset:0}
.intro.play .intro-word{opacity:1;transform:none}

/* ---------- film grain: analog warmth for an antiques brand ----------
   Screen-sized and still, on its own compositor layer. The earlier version was
   nine screens of noise, shifting on a loop, and it cost a third of every
   scroll frame. Content moving underneath gives the same filmic feel. */
.grain{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:.07;
  transform:translateZ(0);contain:strict;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:75;pointer-events:none}
.progress i{display:block;height:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- magnetic buttons ---------- */
[data-magnetic]{will-change:transform}

/* ---------- hero: editorial, cinematic ---------- */
.hero{flex-direction:column;align-items:stretch;justify-content:flex-end;padding:8.5rem 0 0}
.hero-media{inset:-6% 0 -6% 0}
.hero-media img{height:100%;object-position:50% 42%;
  filter:saturate(.78) contrast(1.08) brightness(.72) sepia(.1)}
.js:not(.reduced) .hero-media img{transform:scale(1.16);transition:transform 2.8s cubic-bezier(.16,1,.3,1)}
.hero.is-in .hero-media img{transform:scale(1.001)}
html.js.motion-failsafe:not(.motion-ready) .hero-media img{transform:scale(1.001);transition:none}
.hero-veil{background:
  radial-gradient(120% 85% at 72% 28%,transparent 0%,oklch(0.1950 0.0170 147 / .32) 58%,oklch(0.1950 0.0170 147 / .78) 100%),
  linear-gradient(180deg,oklch(0.1950 0.0170 147 / .62) 0%,oklch(0.1950 0.0170 147 / .12) 30%,
                          oklch(0.1950 0.0170 147 / .5) 68%,oklch(0.1950 0.0170 147 / .95) 100%)}
.hero-inner{padding-bottom:clamp(2.2rem,4.5vw,3.6rem);will-change:transform,opacity}
.hero-title{font-size:clamp(3.1rem,1.1rem + 7.6vw,9.4rem);line-height:.9;letter-spacing:-.042em;
  max-width:12ch;color:var(--paper-lift)}
.hero-title em{color:var(--amber)}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.8rem 3rem;margin-top:clamp(1.8rem,3.4vw,2.8rem)}
.hero-sub{max-width:46ch;margin:0;font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.hero-bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.15rem var(--gut);border-top:1px solid var(--d-hair);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}
.hero-scroll{display:flex;align-items:center;gap:.75rem}
.hero-scroll i{display:block;width:1px;height:26px;background:var(--amber);transform-origin:50% 0;
  animation:cue 2.2s var(--ease-out) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:50% 0}
  55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* The hero arrives as one quick movement: readable in about half a second,
   settled in about one. Long staggers here read as a slow page, not as polish. */
.js:not(.reduced) [data-hero]{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.hero.is-in [data-hero]{opacity:1;transform:none}
.hero.is-in .eye[data-hero]{transition-delay:0s}
.hero.is-in .hero-sub{transition-delay:.15s}
.hero.is-in .hero-cta{transition-delay:.25s}
.hero.is-in .hero-bar{transition-delay:.35s}
.hero.is-in .hero-title{transition-delay:.05s}
/* The headline's line breaks are fixed in the markup (three lines on phones,
   two from 768px), and it arrives as one block with the rest of the hero, so
   nothing can re-wrap while the fonts load. Balance and the ch-based width
   are switched off here because Safari measured them against the stand-in
   font and broke the lines one word at a time. */
.hero-title{text-wrap:wrap;max-width:none}
.hero-title .br-lg{display:none}
@media (min-width:768px){.hero-title .br-sm{display:none}.hero-title .br-lg{display:inline}}
.hero-media picture{display:contents}
html.js.motion-failsafe:not(.motion-ready) [data-hero]{opacity:1;transform:none;transition:none}


/* ---------- ticker: scroll-velocity marquee ---------- */
.ticker{background:var(--paper);border-bottom:1px solid var(--hair);overflow:hidden;
  padding:clamp(1.1rem,2.4vw,1.8rem) 0;position:relative;z-index:1}
.tk-track{display:flex;width:max-content;will-change:transform}
.tk-set{display:flex;align-items:center;flex:none}
.tk-set span{font-family:var(--disp);font-weight:300;font-size:clamp(2.4rem,1.3rem + 4.6vw,5.8rem);
  line-height:1;letter-spacing:-.03em;color:var(--forest-deep);white-space:nowrap;padding:0 .12em;
  font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 0}
.tk-set em{color:var(--sage-deep)}
.tk-sun{flex:none;width:clamp(.8rem,1.6vw,1.3rem);aspect-ratio:1;border-radius:50%;background:var(--amber);
  margin:0 clamp(1rem,2.4vw,2.2rem)}

/* ---------- the route: a road drawn down the itinerary ---------- */
.route-wrap{display:grid;grid-template-columns:clamp(3rem,8vw,7.5rem) minmax(0,1fr);
  gap:clamp(.4rem,2vw,2rem);margin-top:clamp(3rem,6vw,5rem)}
.route-wrap .itin{margin-top:0}
.route-rail{position:relative;min-height:100%}
.route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-bg{fill:none;stroke:oklch(0.9530 0.0156 86.4 / .22);stroke-width:1.6;stroke-dasharray:2 8;stroke-linecap:round}
.route-line{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round}
.route-dot{position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--forest-deep);border:1.5px solid oklch(0.9530 0.0156 86.4 / .35);
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--ease-out)}
.route-dot.on{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 6px oklch(0.7507 0.1295 79.8 / .16)}
.route-bus{position:absolute;left:0;top:0;width:clamp(34px,3.9vw,52px);color:var(--amber);
  --win:var(--forest-deep);will-change:transform;
  filter:drop-shadow(0 6px 10px oklch(0.1950 0.0170 147 / .55))}
.route-bus svg{display:block;width:100%;height:auto}
.motion-ready:not(.reduced) #day .itin-row{opacity:.32;transition:opacity .7s var(--ease),background .6s var(--ease)}
.motion-ready:not(.reduced) #day .itin-row.on{opacity:1}
#day .itin-row.cur{background:oklch(0.9530 0.0156 86.4 / .04)}
#day .itin-row.cur .itin-time{color:var(--paper-lift)}

/* ---------- band: the photo opens up as it arrives ---------- */
.band{min-height:clamp(32rem,94vh,54rem);background:var(--paper);padding:0}
.band::before{content:none}
.band img{filter:saturate(.72) contrast(1.06) brightness(.82) sepia(.06)}
.band-media{position:absolute;inset:0;z-index:-1;overflow:hidden;
  clip-path:inset(0 var(--bx,0%) round var(--br,0px));will-change:clip-path}
.band-media img{transform:scale(var(--bs,1));will-change:transform}
.band-media::after{content:'';position:absolute;inset:0;
  background:radial-gradient(90% 80% at 50% 50%,oklch(0.1950 0.0170 147 / .5),oklch(0.1950 0.0170 147 / .82))}
.band .pull{font-size:clamp(2rem,1.1rem + 3.6vw,4.4rem);line-height:1.04;max-width:18ch;letter-spacing:-.025em}
.band .pull em{color:var(--amber)}

/* ---------- image clip reveal ---------- */
/* overflow:hidden as well as the clip-path: clip-path only hides paint, so the
   zoomed-in image underneath was still widening the page (iPad Safari lets you
   pan sideways into that). overflow:hidden actually contains it. */
.reveal-img{overflow:hidden}
.js:not(.reduced) .reveal-img img{clip-path:inset(100% 0 0 0);transform:scale(1.22);
  transition:clip-path 1.5s cubic-bezier(.77,0,.18,1),transform 2s cubic-bezier(.16,1,.3,1)}
/* Two traps here, both of which hid Josie's photo for good:
   1. The mask must sit on the image, not on .reveal-img. The browser counts an
      element's own clip-path when deciding whether it is on screen, so a fully
      masked wrapper always reports 0% visible and the reveal never fires.
   2. The "show" rule has to out-rank the "hide" rule above it, hence the
      matching .js:not(.reduced) prefix. */
.js:not(.reduced) .reveal-img.in img,.reveal-img.in img{clip-path:inset(0 0 0 0);transform:none}
html.js.motion-failsafe:not(.motion-ready) .reveal-img img{clip-path:none;transform:none;transition:none}

/* ---------- gallery: staggered parallax columns ---------- */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2.2rem);
  margin-top:clamp(3rem,6vw,5rem);align-items:start}
.gcol{display:flex;flex-direction:column;gap:clamp(1.4rem,3vw,2.6rem);will-change:transform}
.gcol:nth-child(2){margin-top:clamp(3rem,10vw,9rem)}
.gcol:nth-child(3){margin-top:clamp(1.4rem,4vw,3.6rem)}
.gfig{display:block;color:inherit;text-decoration:none;order:var(--o,0)}
.gfig-media{display:block;position:relative;overflow:hidden;border-radius:3px;background:var(--forest-deep)}
.g-t .gfig-media{aspect-ratio:3/4}
.g-p .gfig-media{aspect-ratio:4/5}
.g-s .gfig-media{aspect-ratio:1/1}
.gfig img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.74) contrast(1.05) sepia(.05);
  transition:transform 1.4s var(--ease-out),filter .8s var(--ease)}
.gfig:hover img{transform:scale(1.06);filter:saturate(.9) contrast(1.06)}
.gfig:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.gfig-cap{display:flex;gap:.85rem;align-items:baseline;margin-top:.85rem;
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--d-muted)}
.gfig-n{font-family:var(--disp);font-style:italic;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--amber)}
.js:not(.reduced) .gfig-media{clip-path:inset(100% 0 0 0 round 3px);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1)}
.js:not(.reduced) .gfig.in .gfig-media{clip-path:inset(0 0 0 0 round 3px)}
html.js.motion-failsafe:not(.motion-ready) .gfig-media{clip-path:none;transition:none}
@media (max-width:760px){
  /* phones: one tidy two-column grid, in number order, one shape throughout */
  .gal{grid-template-columns:1fr 1fr;gap:1.2rem .8rem}
  .gcol{display:contents}
  .g-t .gfig-media,.g-p .gfig-media,.g-s .gfig-media{aspect-ratio:4/5}
  .gfig-cap{font-size:.6rem;letter-spacing:.1em;gap:.5rem}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:160;display:grid;grid-template-rows:minmax(0,1fr) auto;
  background:oklch(0.1650 0.0150 147 / .97);opacity:0;transition:opacity .45s var(--ease)}
.lb[hidden]{display:none}
.lb.open{opacity:1}
/* The image fills the stage and letterboxes itself with object-fit. A plain
   max-height:100% never resolves here (the grid area has no definite height),
   which let tall photos run underneath the caption bar. */
.lb-stage{position:relative;min-height:0}
.lb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(1rem,4vw,3.2rem) clamp(.5rem,4vw,3.2rem) 1rem;
  opacity:0;transform:scale(.95);transition:opacity .45s var(--ease),transform .8s var(--ease-out)}
.lb-img.ready{opacity:1;transform:none}
.lb-ui{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);padding:1.1rem var(--gut) 1.5rem;
  color:var(--d-ink);border-top:1px solid var(--d-hair)}
.lb-count{font-family:var(--disp);font-size:1.05rem;color:var(--d-muted);white-space:nowrap}
.lb-count b{font-weight:400;color:var(--amber);font-style:italic}
.lb-cap{margin:0;flex:1;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.lb-btns{display:flex;gap:.5rem}
.lb-btns button{height:2.7rem;min-width:2.7rem;padding:0 .9rem;border-radius:999px;cursor:pointer;
  background:none;border:1px solid var(--d-hair);color:var(--d-ink);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;transition:border-color .3s var(--ease),background .3s var(--ease)}
.lb-btns button:hover{border-color:var(--amber);background:oklch(0.7507 0.1295 79.8 / .16)}
.lb-btns button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.lb-prev,.lb-next{font-size:1.1rem !important}
@media (max-width:640px){.lb-cap{display:none}.lb-ui{justify-content:space-between}}

/* ---------- finale ---------- */
.finale{text-align:center;padding-block:clamp(7rem,15vw,13rem);overflow:hidden}
.finale-inner{max-width:64rem}
.finale-title{font-size:clamp(2.6rem,1rem + 5.6vw,6.8rem);line-height:.96;letter-spacing:-.035em;
  color:var(--paper-lift);margin:0 auto;max-width:15ch}
.finale-title em{color:var(--amber)}
.finale-sub{margin:2.2rem auto 3.4rem;max-width:46ch}
.finale-btn{position:relative;display:inline-grid;place-items:center;width:clamp(9.5rem,15vw,12rem);
  aspect-ratio:1;border-radius:50%;background:var(--amber);color:var(--forest-ink);text-decoration:none}
.finale-btn::before{content:'';position:absolute;inset:-12px;border-radius:50%;
  border:1px solid oklch(0.7507 0.1295 79.8 / .45);transition:inset .6s var(--ease-out),opacity .6s}
.finale-btn:hover::before{inset:-22px;opacity:.5}
.finale-btn-in{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;transition:transform .6s var(--ease-out)}
.finale-btn-in em{font-family:var(--disp);font-style:italic;font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);
  letter-spacing:-.01em;text-transform:none;font-variation-settings:'opsz' 144,'SOFT' 100,'WONK' 1}
.finale-btn:hover .finale-btn-in{transform:scale(1.06)}
.finale-btn:focus-visible{outline:2px solid var(--paper-lift);outline-offset:6px}

/* ---------- footer: giant wordmark + live clock ---------- */
.foot{padding-bottom:0;overflow:hidden}
.foot-bot{align-items:center}
.foot .credit a{font-size:inherit;color:var(--d-ink);text-decoration:underline;
  text-decoration-color:var(--d-hair);text-underline-offset:.35em;text-decoration-thickness:1px;
  transition:color .35s var(--ease),text-decoration-color .35s var(--ease)}
.foot .credit a:hover{color:var(--amber);text-decoration-color:currentColor}
.foot-clock{display:flex;align-items:center;gap:.6rem;font-variant-numeric:tabular-nums}
.foot-clock i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);
  animation:blink 2.4s var(--ease) infinite}
@keyframes blink{50%{opacity:.25}}
.foot-mark{font-family:var(--disp);font-weight:300;font-size:clamp(4rem,18.2vw,21rem);line-height:.78;
  letter-spacing:-.05em;color:var(--paper-lift);text-align:center;white-space:nowrap;
  padding:clamp(2.5rem,6vw,5rem) 0 .02em;
  font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 0}
.foot-mark em{color:var(--amber)}
.js:not(.reduced) .foot-mark{transform:translateY(38%);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.js:not(.reduced) .foot-mark.in{transform:none}
html.js.motion-failsafe:not(.motion-ready) .foot-mark{transform:none;transition:none}

/* ---------- small screens ---------- */
@media (max-width:720px){
  .hero{padding-top:7rem}
  .hero-bar .hb-mid{display:none}
  .hero-row{gap:1.4rem}
  .route-wrap{grid-template-columns:2.4rem minmax(0,1fr);gap:.4rem}
  .route-bus{width:26px}
  .route-dot{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
  .tk-sun{margin:0 .9rem}
}

/* ---------- reduced motion: everything final, nothing moving ---------- */
.motion-failsafe .intro{display:none !important}
@media (prefers-reduced-motion:reduce){
  .hero-scroll i,.foot-clock i{animation:none}
  .intro{display:none !important}
}

/* ============================================================================
   THE LOGO, BIG ENOUGH TO READ
   It is a detailed badge (name on the top arc, tagline on the bottom, sun,
   hills, bus), and at the old 46px none of that survived. Real width and
   height are animated rather than a transform scale, so the image is always
   drawn from the full-resolution file and stays sharp.
   ============================================================================ */
.nav-brand img{aspect-ratio:1;height:auto}

/* desktop: a large emblem hanging over the hero, tucking into the bar on scroll */
@media (min-width:1151px){
  .nav-brand{height:52px;align-items:flex-start}
  .nav-brand img{width:clamp(128px,11vw,172px);height:auto;
    filter:drop-shadow(0 14px 30px oklch(0.1950 0.0170 147 / .5));
    transition:width .65s var(--ease-out),margin .65s var(--ease-out),filter .5s var(--ease)}
  /* at this size the badge carries the name itself, so the text wordmark waits */
  .nav-wm{transition:opacity .45s var(--ease),transform .55s var(--ease-out),color .5s var(--ease)}
  .nav:not(.stuck) .nav-wm{opacity:0;transform:translateX(-10px);pointer-events:none}
  .nav.stuck .nav-brand{align-items:center}
  .nav.stuck .nav-brand img{width:60px;height:auto;margin-top:0;filter:none}
  /* keep the hero copy clear of the hanging badge on short screens */
  .hero{padding-top:12.5rem}
}

/* tablet and small laptops */
@media (min-width:721px) and (max-width:1150px){
  .nav-brand img{width:66px;height:auto}
  .nav.stuck .nav-brand img{width:52px;height:auto}
  .nav-links{padding-top:7.5rem}
}

/* phones */
@media (max-width:720px){
  .nav-brand img{width:54px;height:auto}
  .nav.stuck .nav-brand img{width:46px;height:auto}
  .nav-links{padding-top:7rem}
}

/* footer and intro: room to show the badge properly */
.foot img.mark{width:clamp(116px,11vw,164px);height:auto;margin-bottom:1.8rem}
.intro-logo{width:clamp(150px,19vw,236px);height:auto}