/* =================================================================
   SIAVONGA RUN 2026 — Design System
   Built by The Great Media
   Concept: "Run the Lake. Experience the Destination."
   Palette drawn from Lake Kariba at dusk. Signature: the horizon
   line with a living sun + a race clock on the water's gold beam.
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* color — pulled from the lake at sunset */
  --abyss:#06101F;
  --night:#0B1A30;
  --indigo:#163052;
  --indigo-soft:#21436B;
  --ember:#E8642E;
  --ember-bright:#F2773D;
  --sunfire:#D23A2A;
  --gold:#F6B84E;
  --gold-soft:#F9CE7E;
  --paper:#F7F2E9;
  --mist:#EFE7D8;
  --sand:#CBB89B;
  --ink:#0B1A30;
  --ink-soft:#3C4A5E;

  --line-dark:rgba(247,242,233,.16);
  --line-light:rgba(11,26,48,.14);

  /* type */
  --display:"Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  --body:"Archivo",-apple-system,system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;

  /* scale */
  --step--1:clamp(.78rem,.74rem + .2vw,.86rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.2rem);
  --step-4:clamp(2.8rem,2rem + 4vw,5.2rem);
  --step-5:clamp(3.6rem,2.2rem + 6.5vw,8rem);

  /* layout */
  --pad:clamp(1.25rem,5vw,5rem);
  --maxw:1240px;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--ember);color:#fff}

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:400;
  display:inline-flex;align-items:center;gap:.7em;
  color:var(--ember);
}
.eyebrow::before{
  content:"";width:1.6em;height:1px;background:currentColor;display:inline-block;
}
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.02em;
}
.serif-accent{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.lead{
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:46ch;
}

/* =================================================================
   NAVIGATION
   ================================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--pad);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.nav--solid{
  background:rgba(8,17,33,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding-top:.75rem;padding-bottom:.75rem;
  box-shadow:0 1px 0 var(--line-dark);
}
.nav__brand{
  font-family:var(--display);font-weight:800;
  font-size:1.05rem;letter-spacing:-.01em;line-height:1;
  color:#fff;display:flex;align-items:center;gap:.6rem;
}
.nav__brand .sun-dot{
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--gold-soft),var(--ember));
  box-shadow:0 0 14px var(--gold);
  flex:none;
}
.nav__brand small{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:.55rem;letter-spacing:.3em;color:var(--gold);opacity:.85;margin-top:.15rem;
}
.nav__links{display:flex;align-items:center;gap:2.1rem}
.nav__link{
  font-size:.82rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.82);
  position:relative;padding:.3rem 0;transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:var(--ember);transition:width .35s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:#fff}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:100%}
.nav__cta{
  font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  color:var(--night);background:var(--gold);
  padding:.62rem 1.25rem;border-radius:var(--radius);
  display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.nav__cta:hover{background:var(--gold-soft);transform:translateY(-1px);box-shadow:0 8px 24px rgba(246,184,78,.32)}

/* mobile menu toggle */
.nav__burger{display:none;width:34px;height:30px;position:relative;z-index:120}
.nav__burger span{
  position:absolute;left:4px;right:4px;height:2px;background:#fff;border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease),top .4s var(--ease);
}
.nav__burger span:nth-child(1){top:9px}
.nav__burger span:nth-child(2){top:15px}
.nav__burger span:nth-child(3){top:21px}
body.menu-open .nav__burger span:nth-child(1){top:15px;transform:rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){top:15px;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:100;
  background:linear-gradient(160deg,var(--night),var(--abyss));
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .65s var(--ease-out);
  pointer-events:none;
}
body.menu-open .mobile-menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobile-menu__link{
  font-family:var(--display);font-weight:700;font-size:clamp(2rem,9vw,3.4rem);
  color:#fff;line-height:1.15;letter-spacing:-.02em;
  opacity:0;transform:translateY(20px);
  display:flex;align-items:baseline;gap:1rem;
  transition:color .3s var(--ease);
}
.mobile-menu__link .idx{font-family:var(--mono);font-size:.8rem;font-weight:400;color:var(--gold);letter-spacing:.1em}
body.menu-open .mobile-menu__link{animation:menuIn .6s var(--ease-out) forwards}
body.menu-open .mobile-menu__link:nth-child(1){animation-delay:.12s}
body.menu-open .mobile-menu__link:nth-child(2){animation-delay:.18s}
body.menu-open .mobile-menu__link:nth-child(3){animation-delay:.24s}
body.menu-open .mobile-menu__link:nth-child(4){animation-delay:.30s}
body.menu-open .mobile-menu__link:nth-child(5){animation-delay:.36s}
body.menu-open .mobile-menu__link:nth-child(6){animation-delay:.42s}
.mobile-menu__link:hover{color:var(--gold)}
@keyframes menuIn{to{opacity:1;transform:translateY(0)}}

/* show hamburger + hide inline links on smaller screens */
@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav{padding-top:.95rem;padding-bottom:.95rem}
  .nav__brand{font-size:1rem}
  .nav__brand small{font-size:.5rem;letter-spacing:.26em}
}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  --bw:0;
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--body);font-weight:600;font-size:.92rem;letter-spacing:.01em;
  padding:1rem 1.7rem;border-radius:var(--radius);
  overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease);
}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--primary{color:#fff;background:var(--ember)}
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--sunfire),var(--ember-bright));
  transform:translateX(-101%);transition:transform .5s var(--ease-out);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(232,100,46,.4)}
.btn--primary:hover::before{transform:translateX(0)}
.btn--gold{color:var(--night);background:var(--gold)}
.btn--gold:hover{transform:translateY(-2px);background:var(--gold-soft);box-shadow:0 14px 34px rgba(246,184,78,.4)}
.btn--ghost{
  color:#fff;border:1.5px solid rgba(255,255,255,.4);background:transparent;
}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);transform:translateY(-2px)}
.btn--ink{color:var(--paper);background:var(--night)}
.btn--ink:hover{transform:translateY(-2px);background:var(--abyss);box-shadow:0 14px 34px rgba(11,26,48,.3)}
.btn--lg{padding:1.15rem 2.1rem;font-size:1rem}
.btn--block{display:flex;width:100%;justify-content:center}

/* =================================================================
   HORIZON DIVIDER — the signature motif (line + living sun)
   ================================================================= */
.horizon{
  position:relative;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--line-light) 12%,var(--line-light) 88%,transparent);
}
.horizon--dark{background:linear-gradient(90deg,transparent,var(--line-dark) 12%,var(--line-dark) 88%,transparent)}
.horizon__sun{
  position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle at 50% 40%,var(--gold-soft),var(--ember) 70%);
  box-shadow:0 0 0 0 rgba(246,184,78,.5);
}
.horizon.in-view .horizon__sun{
  animation:sunRise .9s var(--ease-out) forwards,sunGlow 4s ease-in-out 1s infinite;
}
@keyframes sunRise{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes sunGlow{
  0%,100%{box-shadow:0 0 18px 2px rgba(246,184,78,.45)}
  50%{box-shadow:0 0 30px 6px rgba(246,184,78,.7)}
}

/* =================================================================
   LAYOUT — sections
   ================================================================= */
.section{padding-block:clamp(4.5rem,9vw,8rem);padding-inline:var(--pad)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--night{background:var(--night);color:var(--paper)}
.section--abyss{background:linear-gradient(180deg,var(--night),var(--abyss));color:var(--paper)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--mist{background:var(--mist);color:var(--ink)}
.container{max-width:var(--maxw);margin-inline:auto;width:100%}
.container--narrow{max-width:880px}

.section__head{max-width:var(--maxw);margin-inline:auto;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__head .eyebrow{margin-bottom:1.1rem}
.section__title{
  font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.025em;
  font-size:var(--step-4);max-width:16ch;
}
.section--night .section__title,.section--abyss .section__title{color:#fff}
.section__title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--gold)}
.section__intro{margin-top:1.4rem;font-size:var(--step-1);max-width:52ch;color:var(--ink-soft)}
.section--night .section__intro,.section--abyss .section__intro{color:rgba(247,242,233,.72)}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);padding-bottom:clamp(2rem,5vw,4rem);
  color:#fff;overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{
  width:100%;height:115%;object-fit:cover;object-position:50% 38%;
  will-change:transform;
}
/* dusk scrim — blends the photo into the palette without flattening it */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,16,31,.55) 0%,rgba(6,16,31,.05) 26%,rgba(6,16,31,.08) 52%,rgba(11,26,48,.72) 84%,rgba(6,16,31,.94) 100%),
    radial-gradient(120% 80% at 80% 42%,rgba(210,58,42,.18),transparent 60%);
}
.hero__inner{position:relative;max-width:var(--maxw);margin-inline:auto;width:100%}
.hero__eyebrow{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-soft);display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;
  opacity:0;transform:translateY(14px);
}
.hero__eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--gold)}
.hero__title{
  font-family:var(--display);font-weight:800;
  font-size:var(--step-5);line-height:.86;letter-spacing:-.035em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > span{display:block;transform:translateY(110%)}
.hero__title .ln-2{color:var(--gold)}
.hero__tagline{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:var(--step-2);line-height:1.25;color:rgba(255,255,255,.92);
  max-width:24ch;margin-bottom:2.4rem;
  opacity:0;transform:translateY(16px);
}
.hero__tagline .b{font-family:var(--display);font-style:normal;font-weight:700;color:#fff}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:2.6rem;
  opacity:0;transform:translateY(16px)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:1rem 3rem;
  padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.18);
  opacity:0;transform:translateY(16px);
}
.hero__meta div{display:flex;flex-direction:column}
.hero__meta dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.4rem}
.hero__meta dd{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.5rem);color:#fff;letter-spacing:.01em;line-height:1}
@media (max-width:560px){
  .hero__meta{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.5rem}
}

.hero.is-loaded .hero__eyebrow{animation:fadeUp .8s var(--ease-out) .2s forwards}
.hero.is-loaded .hero__title .line:nth-child(1) > span{animation:lineUp .9s var(--ease-out) .35s forwards}
.hero.is-loaded .hero__title .line:nth-child(2) > span{animation:lineUp .9s var(--ease-out) .47s forwards}
.hero.is-loaded .hero__tagline{animation:fadeUp .8s var(--ease-out) .7s forwards}
.hero.is-loaded .hero__actions{animation:fadeUp .8s var(--ease-out) .85s forwards}
.hero.is-loaded .hero__meta{animation:fadeUp .8s var(--ease-out) 1s forwards}
@keyframes lineUp{to{transform:translateY(0)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(2rem,5vw,4rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.7);writing-mode:vertical-rl;
  opacity:0;
}
.hero.is-loaded .hero__scroll{animation:fadeUp .8s var(--ease-out) 1.2s forwards}
.hero__scroll .track{width:1px;height:48px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero__scroll .track::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--gold);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%{transform:translateY(-100%)}100%{transform:translateY(280%)}}
@media (max-width:720px){.hero__scroll{display:none}}

/* =================================================================
   COUNTDOWN — race clock on the sun's reflection beam (SIGNATURE)
   ================================================================= */
.countdown{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-block:clamp(3rem,6vw,5rem);overflow:hidden;
}
.countdown__beam{
  position:absolute;top:0;bottom:0;left:50%;width:min(340px,72vw);transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(246,184,78,.16) 30%,rgba(232,100,46,.22) 60%,transparent);
  filter:blur(6px);z-index:0;
  animation:beamShimmer 5s ease-in-out infinite;
}
@keyframes beamShimmer{0%,100%{opacity:.7}50%{opacity:1}}
.countdown__label{
  position:relative;z-index:1;font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.6rem;
}
.countdown__clock{
  position:relative;z-index:1;display:flex;align-items:flex-start;gap:clamp(.8rem,3vw,2.4rem);
}
.cd-unit{display:flex;flex-direction:column;align-items:center}
.cd-unit__num{
  font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(2.6rem,9vw,5.4rem);line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.cd-unit__num .roll{display:inline-block}
.cd-unit__label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(247,242,233,.55);margin-top:.9rem;
}
.cd-sep{
  font-family:var(--display);font-weight:700;color:var(--ember);
  font-size:clamp(2rem,7vw,4rem);line-height:1.2;align-self:center;
  animation:blink 2s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}

/* =================================================================
   STAT STRIP
   ================================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
.section--paper .stats,.section--mist .stats{background:var(--line-light)}
.stat{padding:clamp(1.5rem,3vw,2.4rem);background:var(--night)}
.section--paper .stat,.section--mist .stat{background:var(--paper)}
.section--mist .stat{background:var(--mist)}
.stat__num{
  font-family:var(--display);font-weight:800;font-size:var(--step-3);line-height:1;letter-spacing:-.02em;
  color:var(--gold);display:flex;align-items:baseline;gap:.1em;
}
.section--paper .stat__num,.section--mist .stat__num{color:var(--ember)}
.stat__num .suf{font-size:.5em;color:inherit;opacity:.85}
.stat__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.8rem;color:var(--ink-soft)}
.section--night .stat__label,.section--abyss .stat__label{color:rgba(247,242,233,.6)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* =================================================================
   RACE CATEGORY TILES
   ================================================================= */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:760px){.cats{grid-template-columns:1fr}}
.cat{
  position:relative;padding:clamp(2rem,4vw,3rem);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(165deg,var(--indigo),var(--night));
  border:1px solid var(--line-dark);isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.cat::after{
  content:"";position:absolute;right:-30%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(246,184,78,.16),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);z-index:-1;
}
.cat:hover{transform:translateY(-6px);border-color:rgba(246,184,78,.4);box-shadow:0 24px 60px rgba(6,16,31,.55)}
.cat:hover::after{opacity:1}
.cat__dist{
  font-family:var(--display);font-weight:800;color:#fff;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(3.2rem,9vw,5.2rem);
}
.cat__dist .u{font-size:.32em;color:var(--gold);letter-spacing:0;margin-left:.1em}
.cat__name{font-family:var(--serif);font-style:italic;font-size:var(--step-1);color:var(--gold-soft);margin-top:.4rem}
.cat__desc{color:rgba(247,242,233,.72);margin-top:1.2rem;max-width:34ch;font-size:.96rem}
.cat__tag{
  display:inline-flex;margin-top:1.6rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);padding:.4rem .8rem;border:1px solid var(--line-dark);border-radius:99px;
}

/* =================================================================
   PACKAGE CHECKLIST
   ================================================================= */
.package{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light)}
@media (max-width:900px){.package{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.package{grid-template-columns:1fr}}
.pkg{
  background:var(--paper);padding:clamp(1.4rem,3vw,2.1rem);
  display:flex;flex-direction:column;gap:.9rem;
  transition:background .4s var(--ease);
}
.section--mist .pkg{background:var(--mist)}
.pkg:hover{background:var(--mist)}
.section--mist .pkg:hover{background:#e6dac6}
.pkg__mark{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ember);
  display:grid;place-items:center;flex:none;color:var(--ember);
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.pkg:hover .pkg__mark{background:var(--ember);color:#fff;transform:rotate(-90deg)}
.pkg__mark svg{width:15px;height:15px}
.pkg__title{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.pkg__note{font-size:.85rem;color:var(--ink-soft);line-height:1.5}

/* =================================================================
   FEATURE GRID (Why Run)
   ================================================================= */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:820px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features{grid-template-columns:1fr}}
.feature{
  padding:clamp(1.6rem,3vw,2.2rem);border-radius:var(--radius);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.02);
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.section--paper .feature,.section--mist .feature{border-color:var(--line-light);background:rgba(11,26,48,.015)}
.feature:hover{transform:translateY(-5px);border-color:rgba(246,184,78,.4)}
.feature__idx{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--ember)}
.feature__title{font-family:var(--display);font-weight:700;font-size:var(--step-1);margin:1rem 0 .6rem;letter-spacing:-.01em}
.section--night .feature__title,.section--abyss .feature__title{color:#fff}
.feature__desc{font-size:.94rem;color:var(--ink-soft)}
.section--night .feature__desc,.section--abyss .feature__desc{color:rgba(247,242,233,.68)}

/* =================================================================
   SPLIT — image + text
   ================================================================= */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:2.5rem}}
.split--rev .split__media{order:-1}
@media (max-width:900px){.split--rev .split__media{order:0}}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease);will-change:transform}
.split__media:hover img{transform:scale(1.06)}
.split__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,16,31,.55));z-index:1}
.split__media .tag{
  position:absolute;left:1.2rem;bottom:1.2rem;z-index:2;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  display:flex;align-items:center;gap:.5rem;
}
.split__media .tag .sun-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}

/* =================================================================
   ACTIVITY / DESTINATION CARDS
   ================================================================= */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
@media (max-width:900px){.acts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.acts{grid-template-columns:1fr}}
.act{
  background:var(--night);padding:clamp(1.6rem,3vw,2.2rem);min-height:200px;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;
  position:relative;overflow:hidden;transition:background .5s var(--ease);
}
.act:hover{background:var(--indigo)}
.act__no{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--gold)}
.act__name{font-family:var(--display);font-weight:700;font-size:var(--step-1);color:#fff;line-height:1.05;letter-spacing:-.01em}
.act__desc{font-size:.86rem;color:rgba(247,242,233,.6);margin-top:.5rem}
.act__arrow{align-self:flex-start;color:var(--gold);transition:transform .4s var(--ease)}
.act:hover .act__arrow{transform:translate(4px,-4px)}

/* =================================================================
   ACCOMMODATION
   ================================================================= */
.lodges{display:flex;flex-direction:column}
.lodge{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.4rem,3vw,2rem) 0;border-top:1px solid var(--line-light);
  transition:padding-left .4s var(--ease);
}
.section--night .lodge,.section--abyss .lodge{border-color:var(--line-dark)}
.lodge:last-child{border-bottom:1px solid var(--line-light)}
.section--night .lodge:last-child{border-color:var(--line-dark)}
.lodge:hover{padding-left:1rem}
.lodge__no{font-family:var(--mono);font-size:.8rem;color:var(--ember)}
.lodge__name{font-family:var(--display);font-weight:700;font-size:var(--step-2);letter-spacing:-.02em}
.section--night .lodge__name,.section--abyss .lodge__name{color:#fff}
.lodge__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);justify-self:end;text-align:right}
.section--night .lodge__meta,.section--abyss .lodge__meta{color:rgba(247,242,233,.55)}
@media (max-width:640px){
  .lodge{grid-template-columns:auto 1fr}
  .lodge__meta{display:none}
}

/* =================================================================
   SPONSOR PYRAMID
   ================================================================= */
.tiers{display:flex;flex-direction:column;gap:1px}
.tier{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.2rem,3vw,2rem);
  background:var(--paper);border-radius:var(--radius);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.section--mist .tier{background:var(--mist)}
.tier:hover{transform:translateX(6px)}
.tier__badge{width:14px;height:14px;border-radius:50%;flex:none}
.tier--title .tier__badge{background:linear-gradient(135deg,var(--gold-soft),var(--ember));box-shadow:0 0 16px var(--gold)}
.tier--platinum .tier__badge{background:#cdd6df;box-shadow:0 0 12px rgba(205,214,223,.7)}
.tier--gold .tier__badge{background:var(--gold)}
.tier--silver .tier__badge{background:var(--sand)}
.tier--partner .tier__badge{background:var(--indigo-soft)}
.tier__name{font-family:var(--display);font-weight:700;font-size:var(--step-1);letter-spacing:-.01em;color:var(--ink)}
.tier__role{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);justify-self:end}
.tier--title{background:linear-gradient(120deg,rgba(232,100,46,.1),rgba(246,184,78,.08))}
@media (max-width:560px){.tier{grid-template-columns:auto 1fr}.tier__role{display:none}}

/* =================================================================
   REGISTRATION
   ================================================================= */
.reg{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:920px){.reg{grid-template-columns:1fr}}
.reg__aside{position:sticky;top:6rem}
@media (max-width:920px){.reg__aside{position:static}}
.reg__price{
  display:flex;align-items:baseline;gap:.5rem;margin:1.8rem 0;
  font-family:var(--display);font-weight:800;color:#fff;
}
.reg__perk{display:flex;align-items:flex-start;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line-dark);font-size:.92rem;color:rgba(247,242,233,.78)}
.reg__perk svg{flex:none;width:20px;height:20px;color:var(--gold);margin-top:.15rem}

.form{
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.8rem);box-shadow:0 30px 80px rgba(6,16,31,.18);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;margin-bottom:1.1rem}
.field__label{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
.field__label .req{color:var(--ember)}
.field input,.field select{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  padding:.85rem .95rem;border:1.5px solid var(--line-light);border-radius:var(--radius);
  background:#fff;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  width:100%;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--ember);box-shadow:0 0 0 4px rgba(232,100,46,.12);
}
.field input::placeholder{color:var(--sand)}
.field--invalid input,.field--invalid select{border-color:var(--sunfire);box-shadow:0 0 0 4px rgba(210,58,42,.1)}
.field__err{font-size:.74rem;color:var(--sunfire);margin-top:.4rem;display:none}
.field--invalid .field__err{display:block}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1.1rem}
@media (max-width:520px){.choice{grid-template-columns:1fr}}
.choice__opt{
  position:relative;border:1.5px solid var(--line-light);border-radius:var(--radius);
  padding:1.1rem;cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease);
  display:flex;flex-direction:column;gap:.3rem;
}
.choice__opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice__opt:hover{border-color:var(--sand)}
.choice__opt:has(input:checked){border-color:var(--ember);background:rgba(232,100,46,.06)}
.choice__opt:has(input:focus-visible){box-shadow:0 0 0 4px rgba(232,100,46,.12)}
.choice__dist{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
.choice__sub{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.choice__opt:has(input:checked) .choice__dist{color:var(--ember)}

.form__note{font-size:.78rem;color:var(--ink-soft);margin-top:.5rem;text-align:center}
.form__success{
  display:none;text-align:center;padding:clamp(2rem,5vw,3rem) 1rem;
}
.form__success.show{display:block;animation:fadeUp .6s var(--ease-out) forwards}
.form__success .ok{
  width:64px;height:64px;border-radius:50%;margin:0 auto 1.4rem;
  background:linear-gradient(135deg,var(--gold-soft),var(--ember));display:grid;place-items:center;color:#fff;
  animation:popIn .5s var(--ease-out)}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.form__success h3{font-family:var(--display);font-weight:800;font-size:var(--step-2);margin-bottom:.6rem;letter-spacing:-.02em}
.form__success p{color:var(--ink-soft);max-width:38ch;margin-inline:auto}

/* ---- payment step ---- */
.pay{
  display:none;background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.8rem);box-shadow:0 30px 80px rgba(6,16,31,.18);
}
.pay.show{display:block;animation:fadeUp .55s var(--ease-out) forwards}
.pay__title{font-family:var(--display);font-weight:800;font-size:var(--step-2);letter-spacing:-.02em;margin:.4rem 0 1.3rem}
.pay__summary{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;padding:1rem 1.2rem;margin-bottom:1.5rem;
  background:var(--mist);border-radius:var(--radius);
}
.pay__summary > div{display:flex;flex-direction:column;gap:.2rem}
.pay__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pay__v{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.pay__ref{font-family:var(--mono);font-weight:400;font-size:.82rem;letter-spacing:.02em;color:var(--ember)}
.pay__opt{
  width:100%;text-align:left;cursor:pointer;background:#fff;
  border:1.5px solid var(--line-light);border-radius:var(--radius);
  padding:1.15rem 1.3rem;margin-bottom:.9rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pay__opt:hover{border-color:var(--ember);transform:translateY(-2px);box-shadow:0 14px 34px rgba(6,16,31,.12)}
.pay__opt--alt{background:transparent}
.pay__opt-main{display:flex;flex-direction:column;gap:.25rem}
.pay__opt-title{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);letter-spacing:-.01em}
.pay__opt-sub{font-size:.84rem;color:var(--ink-soft)}
.pay__opt-amt{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ember);white-space:nowrap}
.pay__opt-chev{font-size:1.3rem;color:var(--ember)}
.bank{display:none;margin-top:.4rem;padding-top:1.4rem;border-top:1px solid var(--line-light)}
.bank.show{display:block;animation:fadeUp .45s var(--ease-out) forwards}
.bank__lead{font-size:.95rem;color:var(--ink-soft);margin-bottom:1.1rem;line-height:1.6}
.bank__lead strong{color:var(--ink)}
.bank__grid{display:grid;gap:.1rem;margin-bottom:1.4rem}
.bank__grid > div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line-light)}
.bank__grid dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.bank__grid dd{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);text-align:right;display:flex;align-items:center;gap:.6rem}
.copy{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember);background:rgba(232,100,46,.08);border:none;cursor:pointer;
  padding:.32rem .55rem;border-radius:6px;transition:background .3s var(--ease)}
.copy:hover{background:rgba(232,100,46,.16)}
@media (max-width:520px){
  .bank__grid > div{flex-direction:column;align-items:flex-start;gap:.3rem}
  .bank__grid dd{text-align:left}
}

/* =================================================================
   CTA BANNER
   ================================================================= */
.cta-band{
  position:relative;text-align:center;padding-block:clamp(4rem,8vw,7rem);padding-inline:var(--pad);
  background:linear-gradient(160deg,var(--indigo),var(--abyss));overflow:hidden;isolation:isolate;
}
.cta-band__sun{
  position:absolute;left:50%;top:-10%;width:min(420px,90vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(246,184,78,.28),rgba(232,100,46,.12) 40%,transparent 66%);
  z-index:-1;animation:sunGlow 6s ease-in-out infinite;
}
.cta-band__title{font-family:var(--display);font-weight:800;color:#fff;font-size:var(--step-4);line-height:.95;letter-spacing:-.025em;max-width:18ch;margin:0 auto 1.2rem}
.cta-band__title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
.cta-band__sub{color:rgba(247,242,233,.74);max-width:46ch;margin:0 auto 2.2rem;font-size:var(--step-1)}

/* =================================================================
   FOOTER
   ================================================================= */
.footer{background:var(--abyss);color:var(--paper);padding:clamp(3.5rem,7vw,5.5rem) var(--pad) 2rem}
.footer__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:2.4rem 2rem}
  .footer__grid > div:first-child{grid-column:1 / -1}
}
@media (max-width:440px){.footer__grid{grid-template-columns:1fr}}
.footer__brand{font-family:var(--display);font-weight:800;font-size:1.4rem;color:#fff;display:flex;align-items:center;gap:.6rem;letter-spacing:-.01em}
.footer__brand .sun-dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--gold-soft),var(--ember));box-shadow:0 0 14px var(--gold)}
.footer__tag{font-family:var(--serif);font-style:italic;color:var(--gold-soft);margin-top:1rem;font-size:1.05rem;max-width:28ch}
.footer__col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.footer__col a,.footer__col p{display:block;color:rgba(247,242,233,.7);font-size:.92rem;padding:.32rem 0;transition:color .3s var(--ease)}
.footer__col a:hover{color:#fff}
.footer__bar{
  max-width:var(--maxw);margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.8rem;color:rgba(247,242,233,.5);
}
.footer__credit{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em}
.footer__credit a{color:var(--gold-soft);transition:color .3s var(--ease)}
.footer__credit a:hover{color:#fff}
.footer__credit .wa{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(246,184,78,.14);color:var(--gold)}

/* =================================================================
   SCROLL REVEAL UTILITIES
   ================================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in-view{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
.reveal[data-delay="6"]{transition-delay:.48s}
.reveal[data-delay="7"]{transition-delay:.56s}

/* page-load curtain (for cross-page transition feel) */
.curtain{
  position:fixed;inset:0;z-index:200;background:var(--abyss);
  transform:translateY(0);pointer-events:none;
}
.curtain.lift{animation:curtainUp .8s var(--ease-out) forwards}
@keyframes curtainUp{to{transform:translateY(-100%)}}
.curtain.drop{animation:curtainDown .5s var(--ease) forwards}
@keyframes curtainDown{from{transform:translateY(100%)}to{transform:translateY(0)}}
.curtain__mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1rem;color:#fff;
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
}
.curtain__sun{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--gold-soft),var(--ember));box-shadow:0 0 26px var(--gold);animation:sunGlow 2s ease-in-out infinite}

/* =================================================================
   PAGE HERO (interior pages) — compact banner
   ================================================================= */
.phero{
  position:relative;padding:clamp(8rem,16vw,11rem) var(--pad) clamp(3.5rem,7vw,5rem);
  background:linear-gradient(170deg,var(--night),var(--abyss));color:#fff;overflow:hidden;isolation:isolate;
}
.phero__glow{position:absolute;right:-5%;top:-20%;width:min(560px,80vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(232,100,46,.22),rgba(246,184,78,.08) 40%,transparent 66%);z-index:-1}
.phero__inner{max-width:var(--maxw);margin-inline:auto}
.phero__crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.2rem;display:flex;gap:.6rem;align-items:center}
.phero__crumb a{color:rgba(247,242,233,.6)}.phero__crumb a:hover{color:#fff}
.phero__title{font-family:var(--display);font-weight:800;font-size:var(--step-5);line-height:.9;letter-spacing:-.03em}
.phero__title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
.phero__sub{margin-top:1.3rem;font-size:var(--step-1);color:rgba(247,242,233,.72);max-width:50ch}

/* utilities */
.mt-sm{margin-top:1rem}.mt-md{margin-top:2rem}.mt-lg{margin-top:3rem}
.center{text-align:center}
.muted{color:var(--ink-soft)}
.text-prose p{margin-bottom:1.2rem;max-width:62ch}
.text-prose p:last-child{margin-bottom:0}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .hero__title .line > span,.hero__eyebrow,.hero__tagline,.hero__actions,.hero__meta,.hero__scroll{opacity:1;transform:none}
}