/* ============================================================
   מגלי עולמות — טיולי בוטיק לנפאל
   ============================================================ */

:root{
  /* ground */
  --ink:         #0a0b0d;
  --ink-2:       #101319;
  --ink-3:       #161a22;
  --paper:       #f4f1ea;
  --paper-2:     rgba(244,241,234,.72);
  /* .46 measured 4.26:1 on the ink ground - just under the 4.5:1 that
     ת"י 5568 (WCAG 2.0 AA) requires of body text, and it was carrying six
     different labels across the page. .50 measures 4.85:1. */
  --paper-3:     rgba(244,241,234,.50);
  --line:        rgba(244,241,234,.14);

  /* brass — from the stupa gilding and the marigold fields */
  --brass:       #c8912f;
  --brass-lite:  #e8c477;
  --brass-deep:  #8a6218;

  /* signal */
  --full:        #9a6b62;   /* departure closed */
  --open:        #7fa87a;   /* departure open */

  --display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --body: "Assistant", "Helvetica Neue", Arial, sans-serif;

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

  --pad: clamp(1.5rem, 6vw, 7rem);
  --maxw: 1240px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass-lite);outline-offset:3px;border-radius:2px}
/* the skip link's landing point. It is focusable only so that focus really
   moves there; it is not a control, and a brass ring drawn around the whole
   page would read as a fault. The scroll jump is the feedback. */
main:focus,main:focus-visible{outline:none}

/* ---------- type scale ---------- */
.h-xl{font-family:var(--display);font-weight:300;font-size:clamp(2.7rem,7.6vw,6.6rem);line-height:.98;letter-spacing:-.015em}
.h-lg{font-family:var(--display);font-weight:300;font-size:clamp(2rem,5.2vw,4rem);line-height:1.06;letter-spacing:-.01em}
.h-md{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.15}
.h-sm{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.25}
.lede{font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.95;color:var(--paper-2);max-width:62ch}
.kicker{
  display:flex;align-items:center;gap:.9rem;
  font-size:.7rem;font-weight:600;letter-spacing:.36em;color:var(--brass-lite);
  margin-bottom:1.4rem;
}
.kicker::after{content:"";height:1px;flex:1;background:linear-gradient(to left,transparent,rgba(232,196,119,.45))}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.34em;color:var(--brass-lite)}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}

/* ============================================================
   SKIP LINK — WCAG 2.4.1, level A
   A keyboard user lands on the page and has to tab through the whole header,
   the language control and the social icons before reaching a word of content.
   This gives them one keystroke past it. Invisible until it is focused.
   ============================================================ */
.skip{
  position:absolute;z-index:100;top:0;inset-inline-start:0;
  transform:translateY(-120%);
  background:var(--brass-lite);color:var(--ink);
  font-family:var(--body);font-size:.85rem;font-weight:600;
  padding:.8rem 1.4rem;border-radius:0 0 3px 0;text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;top:0;inset-inline:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem clamp(1rem,4vw,2.6rem);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
/* keeps the nav legible over a bright hero without a hard bar */
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,10,14,.72),transparent);
  transition:opacity .5s var(--ease);
}
.hdr.solid::before{opacity:0}
.hdr.solid{background:rgba(10,11,13,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr__logo{display:block;width:clamp(78px,9vw,104px);flex:none;line-height:0;transition:opacity .4s}
.hdr__logo img{width:100%;height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.9))}
.hdr__nav{display:flex;gap:clamp(.9rem,2vw,1.9rem);align-items:center}
/* the header carries a backdrop-filter, which makes it the containing block for
   any fixed descendant. The mobile overlay therefore sizes to the viewport
   explicitly, and the logo and controls are lifted above it so the menu can
   always be closed. */
.hdr__logo,.hdr__side{position:relative;z-index:56}
.hdr__nav a{
  font-size:.78rem;font-weight:400;letter-spacing:.05em;
  color:var(--paper-2);text-decoration:none;position:relative;padding-block:.3rem;
  transition:color .3s;white-space:nowrap;
}
.hdr__nav a::after{
  content:"";position:absolute;bottom:0;inset-inline:0;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.hdr__nav a:hover{color:var(--paper)}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__side{display:flex;align-items:center;gap:.8rem}
.hdr__social{display:flex;align-items:center;gap:.15rem}
.hdr__social a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--paper-2);transition:color .3s var(--ease),background .3s var(--ease);
}
.hdr__social a:hover{color:var(--brass-lite);background:rgba(244,241,234,.07)}
.hdr__social svg{width:17px;height:17px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}
.langbtn{
  background:none;border:1px solid var(--line);color:var(--paper-2);
  font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  padding:.45rem .8rem;border-radius:2px;cursor:pointer;transition:all .3s;
}
.langbtn:hover{border-color:var(--brass);color:var(--brass-lite)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;flex:none}
.burger span{display:block;width:24px;height:1.5px;background:var(--paper);margin:5px 0;transition:.35s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================================================
   CINEMATIC STAGE — fixed background driven by scroll
   ============================================================ */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink);pointer-events:none}
.stage__layer{
  position:absolute;inset:0;opacity:0;
  transform:translateZ(0);            /* own layer, so a fade never repaints the page */
  backface-visibility:hidden;
  /* NO opacity transition. It existed to smooth the step between scroll
     samples, from before the canvas. Now it actively breaks things: paint
     writes the still and the canvas in the same frame, but CSS stretches only
     the still over 120ms. Crossing a panel edge upward, the canvas switches to
     the new panel instantly while the outgoing still is still fading in - so
     for a tenth of a second you see the wrong panel, or black. paint() already
     runs every animation frame and interpolates opacity itself. */
}
.stage__layer img{width:100%;height:100%;object-fit:cover;object-position:center}
/* the scrubbed transition. Sits above the still layers, below the vignette.
   No opacity transition here — it must answer the finger on the same frame. */
.stage__scrub{
  position:absolute;inset:0;z-index:2;opacity:0;
  width:100%;height:100%;
  transform:translateZ(0);backface-visibility:hidden;
}
.stage::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:
    radial-gradient(130% 100% at 50% 25%, transparent 32%, rgba(8,10,14,.38) 78%, rgba(8,10,14,.78) 100%),
    linear-gradient(to bottom, rgba(8,10,14,.55) 0%, transparent 20%, transparent 60%, rgba(8,10,14,.85) 100%);
}
.stage::before{
  content:"";position:absolute;inset:-60%;z-index:4;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 750ms steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1.5%)}66%{transform:translate(1.5%,-2%)}100%{transform:translate(0,0)}}

.content{position:relative;z-index:2}

/* ============================================================
   JOURNEY RAIL — where you are along the 14 days
   ============================================================ */
.rail{
  position:fixed;z-index:50;left:2.2vw;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:1.05rem;align-items:flex-start;
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease);
}
.rail.show{opacity:1;pointer-events:auto}
.rail__item{
  display:flex;flex-direction:row-reverse;align-items:center;gap:.7rem;
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);
}
.rail__label{
  font-size:.63rem;letter-spacing:.18em;color:var(--paper-3);white-space:nowrap;
  opacity:0;transform:translateX(8px);transition:all .4s var(--ease);
}
.rail__dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(244,241,234,.3);transition:all .4s var(--ease);
}
.rail__item:hover .rail__label,
.rail__item.active .rail__label{opacity:1;transform:none;color:var(--brass-lite)}
.rail__item.active .rail__dot{background:var(--brass);transform:scale(1.65);box-shadow:0 0 0 5px rgba(200,145,47,.15)}
.rail__item:hover .rail__dot{background:var(--brass-lite)}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:7rem var(--pad) 5rem;overflow:hidden}
/* a soft pool of shade so the headline never fights the sky */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side ellipse at 50% 46%,
    rgba(8,10,14,.66) 0%, rgba(8,10,14,.48) 42%, rgba(8,10,14,.2) 70%, transparent 100%);
}
.hero__in{position:relative;z-index:1}
.hero__in>*{opacity:0;transform:translateY(28px);animation:rise 1.4s var(--ease-out) forwards}
.hero__in>*:nth-child(1){animation-delay:.35s}
.hero__in>*:nth-child(2){animation-delay:.55s}
.hero__in>*:nth-child(3){animation-delay:.75s}
.hero__in>*:nth-child(4){animation-delay:.95s}
@keyframes rise{to{opacity:1;transform:none}}
.hero h1{text-shadow:0 4px 44px rgba(0,0,0,.72)}
.hero h1 em{font-style:normal;color:var(--brass-lite);font-weight:400}
.hero__sub{margin-top:1.6rem;font-size:clamp(.95rem,2vw,1.24rem);font-weight:200;letter-spacing:.2em;color:var(--paper-2)}
.hero__meta{margin-top:2.8rem;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.9rem,3vw,2.4rem)}
.hero__meta span{
  font-size:.73rem;font-weight:400;letter-spacing:.24em;color:var(--paper-2);
  padding-inline-start:clamp(.9rem,3vw,2.4rem);border-inline-start:1px solid var(--line);
}
.hero__meta span:first-child{border:0;padding:0}
.hero__cta{margin-top:3rem;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

.scrollcue{
  position:absolute;bottom:2.4rem;inset-inline:0;text-align:center;
  font-size:.62rem;letter-spacing:.4em;color:var(--paper-3);
  opacity:0;animation:rise 1.4s var(--ease-out) 1.5s forwards;
}
.scrollcue::after{
  content:"";display:block;width:1px;height:44px;margin:.9rem auto 0;
  background:linear-gradient(var(--brass),transparent);
  animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 2.2rem;border-radius:2px;
  font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  border:1px solid var(--brass);color:var(--paper);
  background:rgba(200,145,47,.1);backdrop-filter:blur(8px);
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--brass);z-index:-1;
  transform:translateX(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:none}
.btn--solid{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn--solid::before{background:var(--brass-lite)}
.btn--solid:hover{color:var(--ink)}
.btn--ghost{border-color:var(--line);background:rgba(10,11,13,.35)}
.btn--ghost::before{background:var(--paper)}
.btn svg{width:17px;height:17px;flex:none}

/* ============================================================
   SECTIONS ON THE STAGE
   ============================================================ */
.panel{min-height:100svh;display:flex;align-items:center;padding:16vh var(--pad);overflow:hidden}
.panel::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(to left, rgba(8,10,14,.9) 0%, rgba(8,10,14,.72) 34%, rgba(8,10,14,.3) 62%, transparent 84%),
    linear-gradient(to bottom, transparent 55%, rgba(8,10,14,.45) 100%);
}
.panel.flip::before{
  background:
    linear-gradient(to right, rgba(8,10,14,.9) 0%, rgba(8,10,14,.72) 34%, rgba(8,10,14,.3) 62%, transparent 84%),
    linear-gradient(to bottom, transparent 55%, rgba(8,10,14,.45) 100%);
}
.panel__in{position:relative;z-index:1;max-width:660px;width:100%}
.panel.flip .panel__in{margin-inline-start:auto}
.panel h2,.panel h3{text-shadow:0 3px 30px rgba(0,0,0,.8)}
.panel p{text-shadow:0 2px 22px rgba(0,0,0,.75)}
/* the brass second line, used where a headline carries the emphasis */
.panel h2 em{font-style:normal;color:var(--brass-lite);font-weight:400}

/* content sections — the photograph stays, but recedes far enough
   behind a heavy veil that long text and numbers read cleanly */
.slab{background:var(--ink);position:relative;z-index:3;padding:clamp(4.5rem,11vh,8.5rem) 0;border-top:1px solid var(--line)}
.slab--alt{background:var(--ink-2)}
.slab--tint{
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(200,145,47,.07), transparent 60%),
    var(--ink-2);
}
.slab--veil{background:transparent;border-top:1px solid var(--line);overflow:hidden}
.slab--veil::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(8,10,14,.95) 0%, rgba(8,10,14,.78) 14%, rgba(8,10,14,.78) 86%, rgba(8,10,14,.95) 100%);
  backdrop-filter:blur(5px) saturate(.8);
}
.slab--veil>.wrap{position:relative;z-index:1}
/* a hairline of the image is allowed to breathe at the seams */
.slab--veil::after{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;z-index:2;
  background:linear-gradient(to left,transparent,rgba(232,196,119,.22),transparent);
}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* ============================================================
   DEPARTURES
   ============================================================ */
.deps{display:grid;gap:1rem;margin-top:2.6rem}
.dep{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  padding:1.5rem 1.8rem;border:1px solid var(--line);border-radius:3px;
  background:rgba(10,11,13,.6);backdrop-filter:blur(5px);transition:border-color .4s,background .4s;
}
.dep:hover{border-color:rgba(232,196,119,.45);background:rgba(16,19,25,.72)}
.dep__date{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:400;flex:1;min-width:14rem}
.dep__meta{font-size:.82rem;color:var(--paper-3);letter-spacing:.04em}
.badge{
  font-size:.68rem;font-weight:700;letter-spacing:.18em;
  padding:.42rem 1rem;border-radius:100px;white-space:nowrap;
}
.badge--full{background:rgba(154,107,98,.18);color:#d8a49a;border:1px solid rgba(154,107,98,.45)}
.badge--open{background:rgba(127,168,122,.16);color:#a8d0a2;border:1px solid rgba(127,168,122,.45)}

/* ============================================================
   ITINERARY
   ============================================================ */
.days{margin-top:3rem;border-top:1px solid var(--line)}
.day{border-bottom:1px solid var(--line)}
.day__btn{
  width:100%;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--body);
  display:flex;align-items:flex-start;gap:1.2rem;text-align:start;
  padding:1.6rem .4rem;transition:background .35s;
}
.day__btn:hover{background:rgba(244,241,234,.03)}
.day__no{
  flex:none;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--brass-lite);
  padding-top:.5rem;min-width:4.4rem;
}
.day__ttl{flex:1;font-family:var(--display);font-weight:400;font-size:clamp(1.08rem,2.3vw,1.45rem);line-height:1.3}
.day__x{flex:none;width:19px;height:19px;position:relative;margin-top:.55rem;transition:transform .45s var(--ease)}
.day__x::before,.day__x::after{content:"";position:absolute;background:var(--brass);transition:opacity .35s}
.day__x::before{inset-inline:0;top:9px;height:1.5px}
.day__x::after{inset-block:0;left:9px;width:1.5px}
.day.open .day__x{transform:rotate(135deg)}
.day.open .day__x::after{opacity:0}
.day__body{overflow:hidden;max-height:0;transition:max-height .6s var(--ease)}
.day__body p{padding:0 .4rem 1.9rem calc(4.4rem + 1.2rem);color:var(--paper-2);font-size:.98rem;line-height:1.95}
.day__body p .stay{display:block;margin-top:.8rem;font-size:.8rem;letter-spacing:.1em;color:var(--brass-lite)}

/* ============================================================
   HOSTS
   ============================================================ */
/* six hosts, so the grid is pinned to 3 / 2 / 1 — auto-fit would leave a
   half-empty last row that reads like a missing card */
.hosts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3rem;background:var(--line)}
@media (max-width:960px){.hosts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hosts{grid-template-columns:1fr}}
.host{background:rgba(10,11,13,.72);backdrop-filter:blur(6px);padding:2.2rem 1.9rem;transition:background .45s}
/* the friends who join without a fixed day. Deliberately NOT a card:
   a card promises a time and a place, and these meetings have neither. */
.hosts__more{margin-top:2.2rem;max-width:74ch;font-size:.95rem;line-height:2;
  color:var(--paper-2);border-top:1px solid var(--line);padding-top:1.8rem}
.hosts__more strong{color:var(--brass-lite);font-weight:600}
.host:hover{background:rgba(22,26,34,.82)}
.host__name{font-family:var(--display);font-size:1.5rem;font-weight:400;color:var(--brass-lite)}
.host__role{margin-top:.5rem;font-size:.76rem;letter-spacing:.16em;color:var(--paper-3)}
.host__txt{margin-top:1rem;font-size:.92rem;line-height:1.85;color:var(--paper-2)}
.host__day{margin-top:1.2rem;font-size:.68rem;letter-spacing:.2em;color:var(--brass)}

/* ============================================================
   PRICE
   ============================================================ */
.ptable{margin-top:2.6rem;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:rgba(10,11,13,.6);backdrop-filter:blur(5px)}
.prow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.35rem 1.7rem;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow--hero{background:rgba(200,145,47,.09)}
.prow__l{font-size:.98rem;color:var(--paper-2)}
.prow__r{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.9rem);font-weight:400;color:var(--brass-lite);font-variant-numeric:tabular-nums}
.prow--sm .prow__r{font-size:1.1rem}
.pnote{margin-top:1.1rem;font-size:.82rem;color:var(--paper-3)}
/* the flexibility note sits a step below the others: it is a caveat,
   not an invitation, and it should read as one */
.pnote--fine{margin-top:.7rem;font-size:.76rem;font-style:italic;border-top:1px solid var(--line);padding-top:.9rem;max-width:52ch}

.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2.4rem;margin-top:3.2rem}
.incl h3{margin-bottom:1.3rem}
.incl ul{list-style:none;display:grid;gap:.72rem}
.incl li{display:flex;gap:.75rem;align-items:flex-start;font-size:.94rem;color:var(--paper-2);line-height:1.6}
.incl li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;margin-top:.62rem;background:var(--brass)}
.incl--no li::before{background:none;border:1px solid var(--paper-3);width:5px;height:5px}
.incl li small{display:block;margin-top:.3rem;color:var(--paper-3);font-size:.82rem;line-height:1.6}
.allin{
  margin-top:2.8rem;padding:1.5rem 1.8rem;border-inline-start:2px solid var(--brass);
  background:rgba(200,145,47,.07);font-family:var(--display);
  font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.5;
}

/* ============================================================
   ABOUT
   ============================================================ */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-top:2.6rem;background:var(--line)}
.pair>div{background:rgba(16,19,25,.74);backdrop-filter:blur(6px);padding:2.2rem 1.9rem;text-align:center}
.pair h3{font-family:var(--display);font-size:1.7rem;font-weight:400}
.pair p{margin-top:.55rem;font-size:.86rem;letter-spacing:.1em;color:var(--paper-3)}
.pair a{display:inline-block;margin-top:1rem;font-size:.9rem;color:var(--brass-lite);text-decoration:none;letter-spacing:.08em;border-bottom:1px solid transparent;transition:border-color .3s}
.pair a:hover{border-bottom-color:var(--brass)}
.story{margin-top:3rem;display:grid;gap:1.5rem;max-width:70ch}
.story p{color:var(--paper-2);font-size:1rem;line-height:2}
.motto{
  font-family:var(--display);font-size:clamp(1.5rem,4vw,2.6rem);font-weight:300;
  color:var(--brass-lite);line-height:1.3;padding:1.6rem 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{columns:2;column-gap:1.4rem;margin-top:3rem}
.quote{
  break-inside:avoid;margin-bottom:1.4rem;padding:1.9rem;
  border:1px solid var(--line);border-radius:3px;
  background:rgba(10,11,13,.62);backdrop-filter:blur(5px);
  transition:border-color .45s,transform .45s var(--ease);
}
.quote:hover{border-color:rgba(232,196,119,.32);transform:translateY(-3px)}
.quote__txt{font-size:.95rem;line-height:1.9;color:var(--paper-2)}
.quote__by{margin-top:1.2rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.quote__name{font-family:var(--display);font-size:1.1rem;color:var(--brass-lite)}
.quote__meta{font-size:.7rem;letter-spacing:.16em;color:var(--paper-3)}

/* ============================================================
   CONTACT
   ============================================================ */
.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);margin-top:3rem;align-items:start}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.72rem;letter-spacing:.16em;color:var(--paper-3);margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%;background:rgba(10,11,13,.55);border:1px solid var(--line);
  color:var(--paper);font-family:var(--body);font-size:.98rem;font-weight:300;
  padding:.9rem 1rem;border-radius:2px;transition:border-color .3s,background .3s;
}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brass);background:rgba(16,19,25,.8);
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass-lite) 50%),linear-gradient(135deg,var(--brass-lite) 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 1px),calc(0% + 23px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--ink-2);color:var(--paper)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--paper-3);line-height:1.6;margin:1.2rem 0 1.5rem}
.consent input{width:16px;height:16px;margin-top:.2rem;flex:none;accent-color:var(--brass)}
.formnote{margin-top:1rem;font-size:.78rem;color:var(--paper-3)}

.direct{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.direct a{
  display:flex;align-items:center;gap:1rem;padding:1.4rem 1.5rem;
  background:rgba(16,19,25,.78);backdrop-filter:blur(6px);text-decoration:none;transition:background .35s;
}
.direct a:hover{background:rgba(22,26,34,.88)}
.direct svg{width:22px;height:22px;flex:none;color:var(--brass-lite)}
.direct b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:400}
.direct small{display:block;font-size:.76rem;color:var(--paper-3);letter-spacing:.08em;margin-top:.15rem}

.policy{margin-top:3.4rem;padding:1.9rem;border:1px solid var(--line);border-radius:3px;background:rgba(10,11,13,.62);backdrop-filter:blur(5px)}
.policy h3{margin-bottom:1.1rem}
.policy ul{list-style:none;display:grid;gap:.7rem}
.policy li{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  font-size:.92rem;color:var(--paper-2);padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.policy li:last-child{border-bottom:0;padding-bottom:0}
.policy li b{color:var(--brass-lite);font-weight:600;white-space:nowrap}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa{
  position:fixed;z-index:70;bottom:1.4rem;inset-inline-end:1.4rem;
  display:flex;align-items:center;gap:.7rem;
  padding:.9rem 1.3rem;border-radius:100px;text-decoration:none;
  /* #1f8f5f measured 4.08:1 against white. #1a7c52 measures 5.19:1 and still
     reads as WhatsApp green. */
  background:#1a7c52;color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .3s;
}
.wa.on{opacity:1;transform:none;pointer-events:auto}
.wa:hover{background:#23a46d}
.wa svg{width:21px;height:21px;flex:none}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--ink);border-top:1px solid var(--line);padding:3.4rem 0 2.4rem;position:relative;z-index:3;text-align:center}
.ftr__logo{width:132px;margin:0 auto 1.6rem;opacity:.85}
.ftr__t{font-family:var(--display);font-size:1.15rem;color:var(--brass-lite);letter-spacing:.06em}
.ftr__c{margin-top:1rem;display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;font-size:.88rem}
.ftr__c a{color:var(--paper-2);text-decoration:none;transition:color .3s}
.ftr__c a:hover{color:var(--brass-lite)}
.social{margin-top:1.8rem;display:flex;justify-content:center;gap:.9rem}
.social a{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:50%;color:var(--paper-2);
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.social a:hover{border-color:var(--brass);color:var(--brass-lite);transform:translateY(-2px)}
.social svg{width:19px;height:19px}
.ftr__fine{margin-top:2rem;font-size:.72rem;color:var(--paper-3);letter-spacing:.05em}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .cgrid{grid-template-columns:1fr}
  .quotes{columns:1}
}
@media (max-width:768px){
  /* ---- phone performance ----
     backdrop-filter and the animated grain are the two things that cost a
     phone its frame rate while the background is cross-fading. Both go, and
     the translucent surfaces get a solid tint that reads the same. */
  .stage::before{display:none}
  .slab--veil::before{backdrop-filter:none}
  .host,.quote,.dep,.direct a,.policy,.ptable,.pair>div,
  .field input,.field select,.field textarea,.btn{backdrop-filter:none}
  .host{background:rgba(10,11,13,.86)}
  .quote{background:rgba(10,11,13,.8)}
  .dep{background:rgba(10,11,13,.8)}
  .ptable{background:rgba(10,11,13,.8)}
  .policy{background:rgba(10,11,13,.8)}
  .pair>div{background:rgba(16,19,25,.9)}
  .direct a{background:rgba(16,19,25,.92)}
  .field input,.field select,.field textarea{background:rgba(10,11,13,.75)}
  .hdr.solid{backdrop-filter:none;background:rgba(10,11,13,.96)}

  .burger{display:block}
  .hdr__nav{
    position:fixed;top:0;inset-inline-start:0;
    width:100vw;height:100svh;height:100dvh;
    z-index:-1;
    flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;
    /* the links stay clear of the header above and the social row below */
    padding:16vh 6vw 22vh;
    background:#0a0b0d;
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
    overflow-y:auto;
  }
  .hdr__nav.on{opacity:1;pointer-events:auto;z-index:55}
  .hdr__nav a{font-family:var(--display);font-size:1.65rem;font-weight:300;color:var(--paper)}
  .hdr__nav a::after{display:none}
  /* on a phone the header keeps only the language control; the social icons
     move into the open menu where there is room for them */
  .hdr__social{
    position:fixed;z-index:57;bottom:7vh;inset-inline:0;
    justify-content:center;gap:1rem;
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .hdr__social.on{opacity:1;pointer-events:auto}
  .hdr__social a{width:46px;height:46px;border:1px solid var(--line)}
  .hdr__social svg{width:20px;height:20px}
  /* the rail stays on mobile, as bare dots — the labels would crowd the text */
  .rail{left:auto;inset-inline-end:.85rem;gap:.72rem}
  .rail__label{display:none}
  .rail__dot{width:5px;height:5px}
  .rail__item.active .rail__dot{transform:scale(1.8);box-shadow:0 0 0 4px rgba(200,145,47,.16)}
  /* ---- the phone veil ----
     It was a flat .80 plateau across the middle third, which put the photograph
     at 12% of its brightness exactly where a phone shows most of it. Worse, it
     did not even buy what it cost: measured at the 97th percentile of luminance
     under the text - the bright patch that decides legibility, not the average
     that hides it - the rafting panel came out at 4.2:1, under the 4.5:1 floor.
     Dark in the wrong place.

     The fix is not more shade, it is a stronger foreground. The lede sat at 72%
     opacity, giving away contrast for free and then paying for it in black.
     Measured, taking it to full opacity buys more contrast than a 26px blur.

     With that, the veil becomes a single wash leaning down the frame - the same
     idea as the desktop wash leaning across it, one axis turned. It has no
     plateau and no edge anywhere, so there is no shape for the eye to find, and
     the dark end sits where the words are.

       veil                      picture   worst case
       .80 plateau, lede .72       29%       4.2:1   failed
       .56 -> .68, lede 1.0        38%       5.6:1
  */
  .panel{padding:14vh var(--pad);min-height:100svh}
  .panel::before,.panel.flip::before{
    background:linear-gradient(to bottom,rgba(8,10,14,.56) 0%,rgba(8,10,14,.68) 100%);
  }
  /* vibrancy: over a photograph the text carries its own contrast. Scoped to
     the panels - on the slabs the softer 72% sits on solid dark and is right. */
  .panel .lede{color:var(--paper)}
  .panel.flip .panel__in{margin-inline-start:0}
  .hero__meta{gap:.55rem 1.1rem;margin-top:2.2rem}
  .hero__meta span{border:0;padding:0;font-size:.68rem;letter-spacing:.16em;white-space:nowrap}
  .hero__cta{flex-direction:column;align-items:center;width:100%}
  .hero__cta .btn{width:100%;max-width:290px;justify-content:center}
  .day__body p{padding-inline-start:.4rem}
  .day__no{min-width:3.4rem}
  .f2{grid-template-columns:1fr}
  .wa{bottom:1rem;inset-inline-end:1rem;padding:.85rem 1.1rem;font-size:.78rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .stage__layer,.stage__scrub{transform:none!important}
}

@media print{
  .stage,.wa,.hdr,.scrollcue{display:none!important}
  body{background:#fff;color:#000}
}

/* ============================================================
   THE ROUTE MAP
   Geography, not decoration: longitudes are scaled by cos(lat)
   so a degree east is not drawn as long as a degree north.
   No prose of its own — every word comes from ITINERARY.
   ============================================================ */
.mapwrap{margin-top:clamp(2rem,5vh,3.5rem);position:relative}
svg.jmap{display:block;width:100%;height:auto}

.jridge{fill:none;stroke-linejoin:round}
.jpeak{fill:var(--paper-3);font-size:11.5px;letter-spacing:.14em;font-family:var(--body)}
.jpeakmark{fill:none;stroke:rgba(244,241,234,.34);stroke-width:1.2}
.jriver{fill:none;stroke:rgba(120,160,190,.30);stroke-width:2.4;stroke-linecap:round}

.jroute{fill:none;stroke:var(--brass);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(200,145,47,.45))}
.jroute--ghost{stroke:rgba(200,145,47,.16);filter:none}
/* the flight home on day 12 - dashed, because it is not a road */
.jflight{fill:none;stroke:rgba(232,196,119,.42);stroke-width:1.5;stroke-dasharray:7 7}
.jflight__lbl{fill:var(--paper-3);font-size:10.5px;letter-spacing:.16em;font-family:var(--body)}

.jstop{cursor:pointer}
.jstop__halo{fill:rgba(200,145,47,.14);opacity:0;transition:opacity .45s var(--ease)}
.jstop__dot{fill:var(--ink);stroke:var(--brass-lite);stroke-width:1.8;
  transition:fill .35s var(--ease),stroke .35s var(--ease)}
.jstop__lbl{fill:var(--paper-2);font-family:var(--body);font-size:14.5px;
  transition:fill .3s var(--ease)}
.jstop__day{fill:var(--brass);font-family:var(--body);font-size:11px;letter-spacing:.14em}
.jleader{fill:none;stroke:rgba(244,241,234,.26);stroke-width:.9}
.jstop.on .jstop__dot,.jstop.passed .jstop__dot{fill:var(--brass)}
.jstop.on .jstop__halo,.jstop.sel .jstop__halo{opacity:1}
.jstop.on .jstop__lbl{fill:var(--paper)}
.jstop.sel .jstop__dot{fill:var(--brass-lite);stroke:var(--paper)}
.jstop.sel .jstop__lbl{fill:var(--paper);font-weight:600}
.jstop:focus{outline:none}
.jstop:focus-visible .jstop__dot{stroke:var(--paper);stroke-width:2.8}

.jread{margin-top:1.6rem;min-height:5rem;border-top:1px solid var(--line);padding-top:1.3rem}
.jread__hint{font-size:.84rem;color:var(--paper-3);letter-spacing:.04em}
.jread__h{font-family:var(--display);font-size:1.3rem;margin-bottom:.9rem}
/* the day arrives here; the reader never leaves the map */
.jread__top{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:1px solid var(--line)}
.jread__place{font-family:var(--display);font-size:1.35rem;color:var(--brass-lite)}
.jread__tabs{display:flex;gap:.4rem;margin-inline-start:auto;flex-wrap:wrap}
.jread__tab{min-width:2.3rem;padding:.42rem .6rem;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:2px;
  font-family:var(--body);font-size:.82rem;color:var(--paper-3);
  transition:border-color .3s,color .3s,background .3s}
.jread__tab:hover{border-color:var(--brass);color:var(--paper-2)}
.jread__tab.on{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:600}
.jread__tab:focus-visible{outline:2px solid var(--brass-lite);outline-offset:2px}

.jread__body{padding-top:1.2rem}
.jread__body > *{opacity:0;animation:jrise .62s var(--ease-out) forwards}
@keyframes jrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.jread__d{font-size:.7rem;letter-spacing:.2em;color:var(--brass)}
.jread__t{font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.3;margin-top:.5rem}
.jread__b{margin-top:.9rem;font-size:.97rem;line-height:1.95;color:var(--paper-2);max-width:68ch}
.jread__stay{margin-top:1rem;font-size:.78rem;letter-spacing:.1em;color:var(--brass-lite)}
.jread__back{margin-top:1.4rem;font-size:.76rem;color:var(--paper-3)}

/* the panel holds its height so choosing a stop does not shove the page */
.jread{min-height:19rem}
@media (max-width:600px){ .jread{min-height:24rem} }
@media (prefers-reduced-motion:reduce){ .jread__body > *{opacity:1;animation:none} }

.jswipe{display:none;margin-top:.7rem;font-size:.72rem;letter-spacing:.16em;color:var(--paper-3)}
@media (max-width:860px){
  /* squeezing 1200 units into a phone does not make a map mobile, it makes it
     unreadable. It scrolls and keeps its geography. */
  .mapscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none}
  .mapscroll::-webkit-scrollbar{display:none}
  svg.jmap{width:820px;max-width:none}
  .jstop__lbl{font-size:17px}
  .jstop__day{font-size:13px}
  .jswipe{display:block}
}
/* reduced motion removes the movement, not the information: the line still
   shows how far along a stop is, it just stops sliding there */
@media (prefers-reduced-motion:reduce){ .jroute{transition:none !important} }

/* the 2027 card. After 17 October the site has nothing bookable, and an empty
   departures list turns a visitor away with no way to come back. This one is
   deliberately quieter than the two real departures - it promises nothing but
   a message. */
.dep--soon{border-style:dashed;background:rgba(10,11,13,.30)}
.dep--soon .dep__date{color:var(--paper-2)}
.badge--soon{background:transparent;border:1px solid var(--brass);color:var(--brass-lite);
  text-decoration:none;transition:background .3s,color .3s}
.badge--soon:hover{background:var(--brass);color:var(--ink)}

/* ============================================================
   FAQ — the client's own answers, in the itinerary's own idiom
   ============================================================ */
.faqs{margin-top:3rem;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;gap:1.2rem;align-items:flex-start;text-align:start;
  background:none;border:0;cursor:pointer;padding:1.5rem .4rem;color:inherit;
  font-family:var(--display);font-weight:400;font-size:clamp(1.02rem,2.1vw,1.24rem);
  line-height:1.4;transition:color .35s}
.faq__q:hover{color:var(--brass-lite)}
.faq__q:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.faq__txt{flex:1}
.faq__x{flex:none;width:19px;height:19px;position:relative;margin-top:.42rem;
  transition:transform .45s var(--ease)}
.faq__x::before,.faq__x::after{content:"";position:absolute;background:var(--brass);
  transition:opacity .35s}
.faq__x::before{inset-inline:0;top:9px;height:1.5px}
.faq__x::after{inset-block:0;left:9px;width:1.5px}
.faq.open .faq__x{transform:rotate(90deg)}
.faq.open .faq__x::after{opacity:0}
.faq__a{overflow:hidden;max-height:0;transition:max-height .6s var(--ease)}
.faq__a p{padding:0 .4rem 1.9rem 2.4rem;color:var(--paper-2);font-size:.98rem;line-height:1.95;
  max-width:76ch}

/* the accessibility statement is a legal requirement, and the footer is where
   people look for it */
.ftr__links{margin-top:1.6rem;font-size:.78rem;letter-spacing:.1em}
.ftr__links a{color:var(--paper-3);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s}
.ftr__links a:hover{color:var(--brass-lite);border-color:var(--brass)}
.ftr__links a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Cancellation policy. Quoted word for word from the client's own terms —
   this is the one block on the page where a rewrite would be a liability,
   not an improvement. */
.cancel{margin-top:3.2rem;padding-top:2rem;border-top:1px solid var(--line);max-width:44rem}
.cancel__list{list-style:none;margin-top:1.2rem}
.cancel__list li{display:flex;gap:1.2rem;align-items:baseline;justify-content:space-between;
  padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--paper-2)}
.cancel__list li:last-child{border-bottom:0}
.cancel__list b{flex:none;font-weight:600;color:var(--brass-lite);font-size:.9rem}
@media (max-width:520px){
  .cancel__list li{flex-direction:column;gap:.3rem}
  .cancel__list b{align-self:flex-start}
}

/* The state after sending. It appears whether or not WhatsApp opened, because
   the one thing a visitor must never wonder is whether their enquiry went
   anywhere at all. */
.sent{border:1px solid var(--brass);border-radius:3px;background:rgba(200,145,47,.07);
  padding:2.2rem 2rem;animation:sentIn .55s var(--ease-out)}
.sent:focus{outline:none}
@keyframes sentIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sent__h{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,3.4vw,1.9rem);
  color:var(--brass-lite)}
.sent__b{margin-top:.9rem;font-size:.96rem;line-height:1.9;color:var(--paper-2);max-width:46ch}
.sent__again{margin-top:1.6rem;cursor:pointer;font-family:var(--body);font-size:.76rem;
  font-weight:600;letter-spacing:.16em;padding:.8rem 1.6rem;border-radius:2px;
  background:transparent;border:1px solid var(--line);color:var(--paper-2);
  transition:border-color .3s,color .3s}
.sent__again:hover{border-color:var(--brass);color:var(--paper)}
.sent__again:focus-visible{outline:2px solid var(--brass-lite);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .sent{animation:none} }