/* ============================================================
   Kili Savannah — design system
   Warm, earthen, photographic. Two colour lanes:
   ochre = savanna/safari, alpine blue = the mountain.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* paper */
  --paper:        #F6F2E9;
  --paper-2:      #EFE8DA;
  --paper-3:      #E4DAC7;
  --card:         #FFFCF6;

  /* ink */
  --ink:          #1B231D;
  --ink-2:        #3D473E;
  --ink-3:        #6B7569;
  --ink-line:     rgba(27,35,29,.13);

  /* savanna lane */
  --ochre:        #C08A3E;
  --ochre-deep:   #8C5E22;
  --olive:        #6B7A4F;
  --olive-deep:   #47532F;

  /* mountain lane */
  --alpine:       #3A6883;
  --alpine-deep:  #24455B;
  --glacier:      #DCE8ED;

  /* action */
  --flame:        #A8412A;
  --flame-deep:   #7E2D1B;

  --focus:        #1B231D;

  /* type */
  --display: 'Fraunces', 'Spectral', Georgia, 'Times New Roman', serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* rhythm */
  --gut: clamp(20px, 4.5vw, 64px);
  --sec: clamp(72px, 11vh, 150px);
  --maxw: 1320px;
  --radius: 3px;

  --shadow-1: 0 1px 2px rgba(27,35,29,.05), 0 4px 14px -6px rgba(27,35,29,.12);
  --shadow-2: 0 2px 6px rgba(27,35,29,.07), 0 18px 44px -18px rgba(27,35,29,.26);

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

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:17px; line-height:1.62;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100% }
img{ height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer; background:none; border:0; padding:0 }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.04; letter-spacing:-.022em; font-family:var(--display) }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:2.5px solid var(--focus); outline-offset:3px; border-radius:2px }
::selection{ background:var(--ochre); color:#241a06 }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
                        transition-duration:.001ms!important; scroll-behavior:auto!important }
}

/* ---------- type scale ---------- */
.d1{ font-family:var(--display); font-size:clamp(3.1rem,8.6vw,7.4rem); font-weight:400;
     line-height:.93; letter-spacing:-.035em; font-variation-settings:'SOFT' 14,'WONK' 1 }
.d2{ font-family:var(--display); font-size:clamp(2.3rem,5.4vw,4.3rem); line-height:1.0; letter-spacing:-.03em }
.d3{ font-family:var(--display); font-size:clamp(1.55rem,2.9vw,2.5rem); line-height:1.1; letter-spacing:-.022em }
.d4{ font-family:var(--display); font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.18; letter-spacing:-.015em }
.lede{ font-size:clamp(1.06rem,1.5vw,1.32rem); line-height:1.58; color:var(--ink-2); max-width:62ch }
.body{ color:var(--ink-2) }
.small{ font-size:.875rem; line-height:1.55; color:var(--ink-3) }
.eyebrow{
  font-family:var(--ui); font-size:.69rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3);
}
.num{ font-variant-numeric:tabular-nums lining-nums }
em.it{ font-style:italic; font-variation-settings:'SOFT' 30,'WONK' 1 }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.wrap-narrow{ max-width:860px }
.section{ padding-block:var(--sec) }
.stack-s > * + *{ margin-top:.6rem }
.stack   > * + *{ margin-top:1.15rem }
.stack-l > * + *{ margin-top:2.2rem }
.row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap }
.grid{ display:grid; gap:clamp(18px,2.4vw,34px) }
.rule{ height:1px; background:var(--ink-line); border:0; margin:0 }

/* ---------- grain + texture ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ .grain{ display:none } }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--flame); --fg:#FFF7F2; --bd:transparent;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.86em 1.5em; background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:999px;
  font-size:.94rem; font-weight:600; letter-spacing:-.008em;
  transition:transform .28s var(--ease), background-color .28s var(--ease), box-shadow .28s var(--ease);
  will-change:transform;
}
.btn:hover{ background:var(--flame-deep); transform:translateY(-2px); box-shadow:var(--shadow-1) }
.btn:active{ transform:translateY(0) }
.btn .arw{ transition:transform .32s var(--ease) }
.btn:hover .arw{ transform:translateX(4px) }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink-line) }
.btn--ghost:hover{ background:rgba(27,35,29,.05); border-color:rgba(27,35,29,.3) }
.btn--light{ --bg:rgba(255,253,248,.94); --fg:var(--ink) }
.btn--light:hover{ background:#fff }
.btn--onphoto{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.5); backdrop-filter:blur(6px) }
.btn--onphoto:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.85) }
.btn--sm{ padding:.6em 1.05em; font-size:.85rem }
.btn[disabled]{ opacity:.45; pointer-events:none }

/* link with a drawn underline */
.ulink{ position:relative; font-weight:500; display:inline-block }
.ulink::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.ulink:hover::after{ transform:scaleX(1) }

/* ---------- lane accents ---------- */
.lane-safari{ --lane:var(--ochre); --lane-deep:var(--ochre-deep) }
.lane-kili{ --lane:var(--alpine); --lane-deep:var(--alpine-deep) }
.lane-dot{ width:.52em; height:.52em; border-radius:50%; background:var(--lane,var(--ochre)); flex:none }

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:50; height:74px;
  display:flex; align-items:center;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.hdr__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
          display:flex; align-items:center; gap:1.6rem }
.hdr.is-stuck{ background:rgba(246,242,233,.9); backdrop-filter:blur(14px) saturate(1.4);
               box-shadow:0 1px 0 var(--ink-line); height:64px }
.brand{ display:flex; align-items:baseline; gap:.5rem; margin-right:auto }
.brand__k{ font-family:var(--display); font-size:1.32rem; letter-spacing:-.03em; font-weight:600 }
.brand__s{ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3) }
.hdr--onphoto:not(.is-stuck){ color:#fff }
.hdr--onphoto:not(.is-stuck) .brand__s{ color:rgba(255,255,255,.72) }
.nav{ display:flex; gap:1.7rem; align-items:center }
.nav a{ font-size:.92rem; font-weight:500; opacity:.85; transition:opacity .25s }
.nav a:hover{ opacity:1 }
@media (max-width:900px){ .nav{ display:none } }
.menu-btn{ display:none; width:42px; height:42px; align-items:center; justify-content:center;
           border:1px solid currentColor; border-radius:999px; opacity:.6 }
@media (max-width:900px){ .menu-btn{ display:flex } }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
       overflow:hidden; background:var(--ink) }
.hero__media{ position:absolute; inset:0; z-index:0 }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%;
                  transform:scale(1.06); will-change:transform }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(12,18,14,.52) 0%, rgba(12,18,14,.12) 26%, rgba(12,18,14,0) 46%),
    linear-gradient(0deg,  rgba(12,18,14,.86) 0%, rgba(12,18,14,.42) 26%, rgba(12,18,14,0) 58%);
}
.hero__in{ position:relative; z-index:2; width:100%; color:#fff;
           padding-block:clamp(40px,9vh,96px) }
.hero__eyebrow{ color:rgba(255,255,255,.78) }
.hero h1{ margin-block:.28em .42em; max-width:16ch; text-shadow:0 2px 40px rgba(0,0,0,.3) }
.hero__lede{ color:rgba(255,255,255,.9); max-width:48ch; font-size:clamp(1.02rem,1.35vw,1.2rem) }
.hero__cta{ margin-top:2.1rem; display:flex; gap:.8rem; flex-wrap:wrap }
.hero__credit{ position:absolute; right:var(--gut); bottom:14px; z-index:2;
               font-size:.64rem; color:rgba(255,255,255,.4); letter-spacing:.02em }
.hero__credit a{ text-decoration:underline; text-underline-offset:2px }

.scrollcue{ position:absolute; left:50%; bottom:18px; z-index:3; transform:translateX(-50%);
            width:1px; height:46px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.7)) }
.scrollcue::after{ content:''; position:absolute; inset:0; background:rgba(255,255,255,.9);
                   animation:cue 2.6s var(--ease) infinite }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top }
                46%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ---------- reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
.rv.in{ opacity:1; transform:none }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none } }

/* ---------- the fork: two journeys ---------- */
.fork{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ink-line) }
@media (max-width:820px){ .fork{ grid-template-columns:1fr } }
.fork__card{ position:relative; min-height:min(78vh,640px); overflow:hidden; display:flex;
             align-items:flex-end; color:#fff; isolation:isolate }
.fork__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
                 transition:transform 1.3s var(--ease-out) }
.fork__card::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(10,14,11,.88) 2%, rgba(10,14,11,.3) 45%, rgba(10,14,11,.06) 100%) }
.fork__card:hover img{ transform:scale(1.05) }
.fork__body{ padding:clamp(26px,3.4vw,52px); width:100% }
.fork__body h3{ margin:.35em 0 .5em }
.fork__meta{ display:flex; gap:1.3rem; flex-wrap:wrap; margin-top:1.3rem;
             padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.22) }
.fork__meta div{ font-size:.8rem; color:rgba(255,255,255,.72) }
.fork__meta b{ display:block; font-size:1.06rem; color:#fff; font-weight:600 }

/* ---------- stat band ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
        background:var(--ink-line); border-block:1px solid var(--ink-line) }
.stats > div{ background:var(--paper); padding:clamp(22px,3vw,38px) }
.stats b{ display:block; font-family:var(--display); font-size:clamp(2rem,3.4vw,3rem);
          line-height:1; letter-spacing:-.03em }
.stats span{ display:block; margin-top:.5rem; font-size:.83rem; color:var(--ink-3) }

/* ---------- section heading ---------- */
.shead{ display:grid; gap:1rem; margin-bottom:clamp(30px,4.5vw,58px);
        grid-template-columns:minmax(0,1fr) minmax(0,auto); align-items:end }
@media (max-width:760px){ .shead{ grid-template-columns:1fr } }
.shead__t{ max-width:20ch }
.shead__d{ max-width:46ch; color:var(--ink-2) }

/* ---------- Big Five: horizontal scroll gallery ---------- */
.big5{ background:var(--ink); color:var(--paper); padding-block:var(--sec); overflow:hidden }
.big5 .eyebrow{ color:rgba(246,242,233,.5) }
.big5 .shead__d{ color:rgba(246,242,233,.66) }
.big5__track{
  display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gut); padding-block:4px 22px; margin-inline:calc(-1*var(--gut));
  scrollbar-width:thin; scrollbar-color:rgba(246,242,233,.28) transparent;
}
.big5__track::-webkit-scrollbar{ height:3px }
.big5__track::-webkit-scrollbar-thumb{ background:rgba(246,242,233,.3) }
.beast{
  position:relative; flex:0 0 clamp(250px,27vw,360px); aspect-ratio:3/4.1;
  scroll-snap-align:center; overflow:hidden; isolation:isolate; background:#11150f;
}
.beast img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
            filter:saturate(.94) contrast(1.03); transition:transform 1.1s var(--ease-out) }
.beast::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(8,11,8,.92) 0%, rgba(8,11,8,.28) 46%, rgba(8,11,8,0) 78%) }
.beast:hover img{ transform:scale(1.06) }
.beast__n{ position:absolute; top:16px; left:18px; font-family:var(--display);
           font-size:.8rem; color:rgba(246,242,233,.55) }
.beast__b{ position:absolute; inset:auto 0 0; padding:20px }
.beast__b h3{ font-size:clamp(1.4rem,2.1vw,1.85rem); margin-bottom:.34em }
.beast__b p{ font-size:.83rem; line-height:1.5; color:rgba(246,242,233,.78) }
.beast__w{ display:inline-flex; align-items:center; gap:.42em; margin-top:.85rem;
           font-size:.71rem; letter-spacing:.12em; text-transform:uppercase;
           color:var(--ochre); font-weight:600 }
.big5__note{ margin-top:1.4rem; color:rgba(246,242,233,.45); font-size:.79rem }

/* ---------- parks ---------- */
.parks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)) }
.park{ position:relative; overflow:hidden; isolation:isolate; aspect-ratio:4/5;
       display:flex; align-items:flex-end; color:#fff }
.park img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
           transition:transform 1.2s var(--ease-out) }
.park::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(10,14,11,.9) 0%, rgba(10,14,11,.18) 55%, rgba(10,14,11,0) 88%) }
.park:hover img{ transform:scale(1.055) }
.park__b{ padding:clamp(18px,2vw,26px) }
.park__b h3{ font-size:clamp(1.3rem,2vw,1.7rem) }
.park__b p{ margin-top:.5em; font-size:.83rem; color:rgba(255,255,255,.8); line-height:1.5 }
.park__tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.9rem }
.tag{ font-size:.68rem; letter-spacing:.07em; padding:.3em .7em; border-radius:999px;
      border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.88) }

/* ---------- migration months ---------- */
.mig{ background:var(--paper-2) }
.mig__months{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:2rem }
.mchip{ padding:.5em 1em; border:1px solid var(--ink-line); border-radius:999px;
        font-size:.84rem; font-weight:500; background:var(--card);
        transition:all .3s var(--ease) }
.mchip:hover{ border-color:var(--ochre) }
.mchip[aria-selected="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.mig__panel{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,60px); align-items:center }
@media (max-width:820px){ .mig__panel{ grid-template-columns:1fr } }
.mig__panel img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius) }

/* ============================================================
   The mountain
   ============================================================ */
.mtn{ background:linear-gradient(180deg,#D8E3E9 0%, #C9D8E1 40%, #E6EDF0 100%); color:var(--ink);
      position:relative }
.mtn__stage{ position:relative; height:100svh; display:grid;
             grid-template-rows:1fr auto; overflow:hidden }
.mtn__canvasWrap{ position:absolute; inset:0; z-index:0 }
.mtn canvas{ width:100%; height:100%; display:block; touch-action:pan-y }
.mtn__fallback{ position:absolute; inset:0; z-index:0; object-fit:cover; width:100%; height:100% }
.mtn__ui{ position:relative; z-index:2; display:flex; flex-direction:column; height:100%;
          pointer-events:none; padding:clamp(84px,10vh,110px) var(--gut) clamp(18px,3vh,30px) }
.mtn__ui > *{ pointer-events:auto }
.mtn__title{ max-width:15ch }
.mtn__title h2{ text-shadow:0 1px 30px rgba(255,255,255,.5) }
.mtn__spacer{ flex:1 }

/* route picker */
.routes{ display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:1rem }
.rchip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.52em 1em; border-radius:999px; font-size:.85rem; font-weight:600;
  background:rgba(255,255,255,.82); border:1px solid rgba(27,35,29,.1);
  backdrop-filter:blur(10px); transition:all .3s var(--ease); color:var(--ink);
}
.rchip:hover{ background:#fff; transform:translateY(-1px) }
.rchip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.rchip i{ width:.6em; height:.6em; border-radius:50%; background:var(--rc,#999); flex:none }

/* readout card over the scene */
.rcard{
  background:rgba(255,253,248,.93); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(27,35,29,.09); border-radius:var(--radius);
  padding:clamp(18px,2.2vw,26px); max-width:min(430px,100%); box-shadow:var(--shadow-2);
}
.rcard h3{ font-size:1.5rem; margin-bottom:.12em }
.rcard__nick{ font-size:.8rem; color:var(--ink-3); font-style:italic; margin-bottom:.9rem }
.rcard__p{ font-size:.87rem; line-height:1.52; color:var(--ink-2) }
.rcard__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-block:1.1rem }
.rcard__grid div{ border-top:1px solid var(--ink-line); padding-top:.5rem }
.rcard__grid b{ display:block; font-family:var(--display); font-size:1.3rem; line-height:1 }
.rcard__grid span{ font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3) }

/* altitude profile */
.prof{ width:100%; height:74px; display:block; margin-top:.4rem; overflow:visible }
.prof__line{ fill:none; stroke:var(--rc,var(--alpine)); stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.prof__fill{ fill:var(--rc,var(--alpine)); opacity:.1 }
.prof__zone{ fill:currentColor; opacity:.055 }
.prof text{ font-family:var(--ui); font-size:8.5px; fill:var(--ink-3); letter-spacing:.04em }

/* 3D labels projected from the scene */
.mlabel{
  position:absolute; z-index:3; transform:translate(-50%,-50%);
  pointer-events:none; white-space:nowrap;
  font-size:.68rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink); background:rgba(255,253,248,.88);
  padding:.22em .6em; border-radius:999px; border:1px solid rgba(27,35,29,.1);
  opacity:0; transition:opacity .5s var(--ease); backdrop-filter:blur(6px);
}
.mlabel.on{ opacity:1 }
.mlabel--peak{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.mtn__hint{ font-size:.72rem; color:var(--ink-3); margin-top:.7rem }
.mtn__credit{ font-size:.64rem; color:var(--ink-3); opacity:.75 }
.mtn__credit a{ text-decoration:underline; text-underline-offset:2px }

/* zone legend */
.zones{ display:flex; gap:0; margin-top:1.1rem; border-radius:2px; overflow:hidden }
.zones div{ flex:1; padding:.5rem .55rem; font-size:.6rem; line-height:1.25; color:#fff;
            letter-spacing:.02em }
.zones b{ display:block; font-weight:700; font-size:.63rem }

@media (max-width:820px){
  .mtn__stage{ height:auto; grid-template-rows:auto }
  .mtn__canvasWrap{ position:relative; height:56svh }
  .mtn__ui{ position:relative; padding:22px var(--gut) 30px; height:auto }
  .rcard{ max-width:none }
  .rcard__grid{ grid-template-columns:repeat(2,1fr) }
}

/* ============================================================
   Trip planner
   ============================================================ */
.plan{ background:var(--ink); color:var(--paper) }
.plan .eyebrow{ color:rgba(246,242,233,.5) }
.plan .shead__d{ color:rgba(246,242,233,.68) }
.plan__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
             gap:clamp(24px,3.4vw,54px); align-items:start }
@media (max-width:960px){ .plan__grid{ grid-template-columns:1fr } }

.field{ margin-bottom:1.6rem }
.field__l{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem }
.field__l span:first-child{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
                            color:rgba(246,242,233,.5); font-weight:600 }
.field__v{ font-family:var(--display); font-size:1.06rem; color:var(--paper) }

.seg{ display:flex; gap:.4rem; flex-wrap:wrap }
.seg button{
  padding:.62em 1.15em; border-radius:999px; font-size:.86rem; font-weight:500;
  border:1px solid rgba(246,242,233,.2); color:rgba(246,242,233,.82);
  transition:all .28s var(--ease);
}
.seg button:hover{ border-color:rgba(246,242,233,.5); color:var(--paper) }
.seg button[aria-pressed="true"]{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.seg--lane button[aria-pressed="true"]{ background:var(--lane); border-color:var(--lane); color:#fff }

input[type=range].rng{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:rgba(246,242,233,.2); outline:none; margin:.7rem 0;
}
.rng::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--paper); cursor:grab; box-shadow:0 2px 10px rgba(0,0,0,.45);
  transition:transform .2s var(--ease) }
.rng::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.14) }
.rng::-moz-range-thumb{ width:22px; height:22px; border:0; border-radius:50%; background:var(--paper);
  cursor:grab; box-shadow:0 2px 10px rgba(0,0,0,.45) }

.chk{ display:flex; align-items:flex-start; gap:.7rem; padding:.72rem .9rem; cursor:pointer;
      border:1px solid rgba(246,242,233,.14); border-radius:var(--radius);
      transition:all .26s var(--ease) }
.chk:hover{ border-color:rgba(246,242,233,.34) }
.chk input{ margin:.3rem 0 0; accent-color:var(--ochre); width:16px; height:16px; flex:none }
.chk[data-on="1"]{ border-color:rgba(246,242,233,.45); background:rgba(246,242,233,.05) }
.chk b{ font-weight:600; font-size:.9rem; display:block }
.chk span{ font-size:.76rem; color:rgba(246,242,233,.6) }
.chk em{ font-style:normal; margin-left:auto; font-size:.82rem; color:var(--ochre); font-weight:600;
         padding-left:.6rem }

/* quote panel */
.quote{ position:sticky; top:92px; background:rgba(246,242,233,.05); border:1px solid rgba(246,242,233,.15);
        border-radius:var(--radius); padding:clamp(20px,2.5vw,30px) }
.quote__pp{ font-family:var(--display); font-size:clamp(2.6rem,5vw,3.7rem); line-height:1;
            letter-spacing:-.035em }
.quote__row{ display:flex; justify-content:space-between; padding:.62rem 0; font-size:.88rem;
             border-top:1px solid rgba(246,242,233,.13) }
.quote__row span:first-child{ color:rgba(246,242,233,.6) }
.quote__basis{ font-size:.75rem; line-height:1.5; color:rgba(246,242,233,.55); margin-top:1rem }
.quote__disc{ font-size:.72rem; line-height:1.5; color:rgba(246,242,233,.45);
              border-top:1px solid rgba(246,242,233,.13); padding-top:.9rem; margin-top:.9rem }

/* itinerary */
.itin{ margin-top:2.4rem; border-top:1px solid rgba(246,242,233,.15); padding-top:1.6rem }
.iday{ display:grid; grid-template-columns:96px 1fr; gap:1.1rem; padding:1rem 0;
       border-bottom:1px solid rgba(246,242,233,.09) }
@media (max-width:620px){ .iday{ grid-template-columns:1fr; gap:.35rem } }
.iday__d{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
          color:rgba(246,242,233,.45); padding-top:.22rem }
.iday__t{ font-family:var(--display); font-size:1.1rem; margin-bottom:.28rem }
.iday__n{ font-size:.84rem; line-height:1.55; color:rgba(246,242,233,.66) }
.iday__m{ font-size:.72rem; color:var(--ochre); margin-top:.35rem; letter-spacing:.04em }

/* ============================================================
   Package library
   ============================================================ */
.lib__bar{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;
           padding-block:1.1rem; border-block:1px solid var(--ink-line); margin-bottom:2.2rem }
.filters{ display:flex; gap:.4rem; flex-wrap:wrap }
.fchip{ padding:.48em 1em; border-radius:999px; font-size:.84rem; font-weight:500;
        border:1px solid var(--ink-line); background:var(--card); transition:all .26s var(--ease) }
.fchip:hover{ border-color:var(--ink-3) }
.fchip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.fchip .c{ opacity:.5; margin-left:.35em; font-size:.78em }
.lib__count{ margin-left:auto; font-size:.84rem; color:var(--ink-3) }
.sel{ padding:.48em 2.2em .48em .9em; border-radius:999px; border:1px solid var(--ink-line);
      background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7569' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .9em center;
      font-size:.84rem; appearance:none; cursor:pointer }

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,306px),1fr));
        gap:clamp(16px,2vw,28px) }
.pcard{ background:var(--card); border:1px solid var(--ink-line); border-radius:var(--radius);
        overflow:hidden; text-align:left; display:flex; flex-direction:column;
        transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s }
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:transparent }
.pcard__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-3) }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out) }
.pcard:hover .pcard__img img{ transform:scale(1.06) }
.pcard__cat{ position:absolute; top:11px; left:11px; font-size:.64rem; font-weight:700;
             letter-spacing:.12em; text-transform:uppercase; color:#fff;
             background:rgba(12,16,12,.62); backdrop-filter:blur(8px);
             padding:.34em .7em; border-radius:999px }
.pcard__b{ padding:clamp(15px,1.7vw,20px); display:flex; flex-direction:column; flex:1 }
.pcard__b h3{ font-size:1.14rem; line-height:1.22; margin-bottom:.4rem }
.pcard__s{ font-size:.8rem; color:var(--ink-3); line-height:1.48; flex:1 }
.pcard__tags{ display:flex; gap:.32rem; flex-wrap:wrap; margin-top:.85rem }
.ptag{ font-size:.66rem; padding:.26em .6em; border-radius:3px; background:var(--paper-2);
       color:var(--ink-2) }
.pcard__f{ display:flex; justify-content:space-between; align-items:baseline;
           margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--ink-line) }
.pcard__p b{ font-family:var(--display); font-size:1.34rem; letter-spacing:-.02em }
.pcard__p span{ font-size:.68rem; color:var(--ink-3); display:block }
.pcard__go{ font-size:.78rem; font-weight:600; color:var(--flame) }
.lib__more{ display:flex; justify-content:center; margin-top:2.6rem }
.lib__empty{ padding:4rem 0; text-align:center; color:var(--ink-3) }

/* ============================================================
   Dialog
   ============================================================ */
dialog{ padding:0; border:0; background:transparent; max-width:100vw; max-height:100svh }
dialog::backdrop{ background:rgba(14,18,14,.62); backdrop-filter:blur(5px) }
.sheet{
  width:min(880px,100vw); max-height:92svh; overflow:auto; background:var(--paper);
  border-radius:var(--radius); box-shadow:0 30px 90px -20px rgba(0,0,0,.55);
  overscroll-behavior:contain;
}
.sheet__x{ position:sticky; top:0; z-index:3; float:right; margin:12px 12px 0 0;
           width:38px; height:38px; border-radius:50%; background:rgba(255,253,248,.92);
           backdrop-filter:blur(8px); display:grid; place-items:center; box-shadow:var(--shadow-1) }
.sheet__hero{ position:relative; aspect-ratio:21/9; background:var(--paper-3) }
.sheet__hero img{ width:100%; height:100%; object-fit:cover }
.sheet__b{ padding:clamp(20px,3vw,40px) }
.sheet h2{ font-size:clamp(1.7rem,3vw,2.5rem) }

.ptable{ width:100%; border-collapse:collapse; margin-top:.8rem; font-size:.9rem }
.ptable th,.ptable td{ text-align:left; padding:.68rem .5rem; border-bottom:1px solid var(--ink-line) }
.ptable th{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
            font-weight:600 }
.ptable td:last-child,.ptable th:last-child{ text-align:right; font-variant-numeric:tabular-nums }
.ptable tr:last-child td{ border-bottom:0 }

.dayrow{ display:grid; grid-template-columns:78px 1fr; gap:1rem; padding:.9rem 0;
         border-bottom:1px solid var(--ink-line) }
@media (max-width:560px){ .dayrow{ grid-template-columns:1fr; gap:.25rem } }
.dayrow__d{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
            padding-top:.2rem }
.dayrow__t{ font-family:var(--display); font-size:1.08rem }
.dayrow__n{ font-size:.85rem; color:var(--ink-2); line-height:1.55; margin-top:.2rem }

.inclusions{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem }
@media (max-width:620px){ .inclusions{ grid-template-columns:1fr } }
.inclusions li{ font-size:.85rem; padding:.32rem 0 .32rem 1.3rem; position:relative; color:var(--ink-2) }
.inclusions li::before{ content:''; position:absolute; left:0; top:.78em; width:7px; height:7px;
                        border-radius:50%; background:var(--olive) }
.inclusions .out li::before{ background:none; border:1px solid var(--ink-3); opacity:.5 }

.sheet__cta{ position:sticky; bottom:0; background:linear-gradient(180deg,rgba(246,242,233,0),var(--paper) 22%);
             padding:1.6rem clamp(20px,3vw,40px) clamp(20px,3vw,32px); display:flex; gap:.7rem;
             flex-wrap:wrap; border-top:1px solid var(--ink-line); margin-top:1rem }

/* ---------- forms ---------- */
.inp{ width:100%; padding:.82em 1em; border:1px solid var(--ink-line); border-radius:var(--radius);
      background:var(--card); font-size:.95rem; transition:border-color .25s }
.inp:focus{ border-color:var(--ink); outline:none }
.inp[aria-invalid="true"]{ border-color:var(--flame) }
.lbl{ display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
      color:var(--ink-3); font-weight:600; margin-bottom:.45rem }
.err{ font-size:.78rem; color:var(--flame); margin-top:.35rem; font-weight:500 }
.formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem }
@media (max-width:620px){ .formgrid{ grid-template-columns:1fr } }
.formgrid .full{ grid-column:1/-1 }

/* ---------- founder ---------- */
.founder{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
          gap:clamp(24px,4vw,64px); align-items:center }
@media (max-width:820px){ .founder{ grid-template-columns:1fr } }
.founder img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius) }
.qmark{ font-family:var(--display); font-size:1.34rem; line-height:1.5; letter-spacing:-.015em }

/* ---------- footer ---------- */
.ftr{ background:var(--ink); color:rgba(246,242,233,.72); padding-block:clamp(48px,7vw,86px) 30px }
.ftr a:hover{ color:var(--paper) }
.ftr__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem }
@media (max-width:820px){ .ftr__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .ftr__grid{ grid-template-columns:1fr } }
.ftr h4{ font-family:var(--ui); font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
         color:rgba(246,242,233,.42); font-weight:600; margin-bottom:1rem }
.ftr li{ padding:.26rem 0; font-size:.88rem }
.ftr__base{ margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(246,242,233,.12);
            display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.76rem;
            color:rgba(246,242,233,.42) }
.credits{ font-size:.7rem; line-height:1.6; color:rgba(246,242,233,.34) }
.credits a{ text-decoration:underline; text-underline-offset:2px }

/* ---------- whatsapp float ---------- */
.wa{ position:fixed; right:18px; bottom:18px; z-index:45; display:inline-flex; align-items:center;
     gap:.55em; padding:.75em 1.15em; border-radius:999px; background:#1f7a4d; color:#fff;
     font-size:.86rem; font-weight:600; box-shadow:0 8px 28px -8px rgba(0,0,0,.5);
     transition:transform .3s var(--ease) }
.wa:hover{ transform:translateY(-3px) }
@media (max-width:560px){ .wa span{ display:none } .wa{ padding:.85em } }

/* ---------- utils ---------- */
.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
     clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; padding:1em 1.4em; background:var(--ink);
       color:var(--paper); border-radius:0 0 var(--radius) 0 }
.skip:focus{ left:0 }
[hidden]{ display:none!important }
.noscroll{ overflow:hidden }

/* ---------- small-screen header + hero framing ---------- */
@media (max-width:900px){
  .hdr{ height:62px }
  .hdr.is-stuck{ height:56px }
  .hdr__in{ gap:.75rem }
  .brand{ gap:0; flex-direction:column; align-items:flex-start; line-height:1 }
  .brand__k{ font-size:1.12rem; white-space:nowrap }
  .brand__s{ font-size:.52rem; letter-spacing:.2em }
  .hdr .btn--sm{ padding:.55em .9em; font-size:.8rem; white-space:nowrap }
  .hdr .btn--sm .arw{ display:none }
}
@media (max-width:560px){
  .hdr .btn--sm{ display:none }   /* the WhatsApp float + hero CTA already cover this */
  .brand__s{ display:none }
  .hero__media img{ object-position:62% 62% }
  .hero h1{ max-width:none }
  .hero__credit{ font-size:.58rem }
}
@media (max-width:560px){ .hero__credit{ right:auto; left:1rem; bottom:.6rem } }