/* =================================================================
   SKI RESORTS FOR KINGS — the ridgeline is the crown
   ================================================================= */

:root{
  --ink:      #0b0f15;
  --ink-2:    #0f151d;
  --ink-3:    #161f2a;
  --ink-card: #131b25;

  --gold:        #c8a253;
  --gold-bright: #e3c47e;
  --gold-deep:   #9a7836;

  --cream:     #f1ece1;
  --cream-dim: #b7b1a3;
  --slate:     #76828f;

  --line-gold:    rgba(200,162,83,.26);
  --line-neutral: rgba(241,236,225,.10);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;

  --maxw: 1320px;
  --gut:  clamp(20px, 5vw, 64px);

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

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background:var(--gold); color:var(--ink); }

/* ---------- shared layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.eyebrow{
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.8em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7;
}
.eyebrow.center::after{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7;
}

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.01em; }
.display{ font-size:clamp(44px, 8vw, 112px); font-weight:400; }
.h2{ font-size:clamp(34px, 5vw, 64px); }
.serif-it{ font-style:italic; }
.gold{ color:var(--gold-bright); }

/* ====================================================================
   NAV
   ==================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(11,15,21,.86);
  backdrop-filter:blur(14px);
  padding-block:14px;
  border-bottom:1px solid var(--line-neutral);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand svg{ width:34px; height:24px; }
.brand .crown-path{ fill:none; stroke:var(--gold); stroke-width:1.6; }
.brand-name{
  font-family:var(--serif);
  font-size:21px; letter-spacing:.02em; line-height:1;
}
.brand-name b{ font-weight:600; }
.brand-sub{
  font-family:var(--sans); font-size:9px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--gold); margin-top:3px; display:block;
}
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-size:13.5px; letter-spacing:.04em; color:var(--cream-dim);
  position:relative; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  border:1px solid var(--line-gold);
  color:var(--gold-bright);
  padding:10px 20px; border-radius:2px;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  transition:background .3s, color .3s;
}
.nav-cta:hover{ background:var(--gold); color:var(--ink); }
.nav-burger{ display:none; }

/* ====================================================================
   HERO
   ==================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(40px,7vh,90px); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media image-slot{ width:100%; height:100%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(11,15,21,.25) 42%, rgba(11,15,21,.55) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(11,15,21,.6), transparent 60%);
}
.hero-inner{ position:relative; z-index:2; }
.hero h1{ margin:.22em 0 .3em; max-width:14ch; }
.hero-lede{
  font-size:clamp(17px,1.5vw,21px); color:var(--cream-dim);
  max-width:46ch; line-height:1.55;
}

/* search */
.searchbar{
  margin-top:38px;
  display:flex; align-items:stretch; gap:0;
  background:rgba(15,21,29,.72);
  backdrop-filter:blur(16px);
  border:1px solid var(--line-gold);
  border-radius:3px;
  max-width:720px;
  overflow:hidden;
  position:relative;
}
.searchbar .field{ flex:1; position:relative; }
.searchbar input{
  width:100%; background:none; border:none; outline:none;
  color:var(--cream); font-family:var(--sans); font-size:16px;
  padding:20px 22px 20px 52px;
}
.searchbar input::placeholder{ color:var(--slate); }
.searchbar .pin{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.5;
}
.searchbar .divider{ width:1px; background:var(--line-neutral); }
.searchbar select{
  background:none; border:none; outline:none; color:var(--cream-dim);
  font-family:var(--sans); font-size:14.5px; padding:0 22px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.searchbar select option{ background:var(--ink-2); color:var(--cream); }
.searchbar .go{
  background:var(--gold); color:var(--ink); white-space:nowrap;
  padding:0 30px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; transition:background .3s;
  display:flex; align-items:center; gap:8px;
}
.searchbar .go:hover{ background:var(--gold-bright); }

/* live suggestions */
.suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  background:rgba(15,21,29,.97); backdrop-filter:blur(18px);
  border:1px solid var(--line-gold); border-radius:3px;
  overflow:hidden; display:none;
}
.suggest.show{ display:block; }
.suggest a{
  display:flex; align-items:baseline; gap:12px; justify-content:space-between;
  padding:13px 22px; border-bottom:1px solid var(--line-neutral);
  transition:background .2s;
}
.suggest a:last-child{ border-bottom:none; }
.suggest a:hover{ background:rgba(200,162,83,.1); }
.suggest .s-name{ font-family:var(--serif); font-size:20px; }
.suggest .s-meta{ font-size:12px; color:var(--slate); letter-spacing:.06em; }
.suggest .s-empty{ padding:18px 22px; color:var(--slate); font-size:14px; }

.hero-trust{
  margin-top:26px; display:flex; gap:30px; flex-wrap:wrap;
  font-size:13px; letter-spacing:.06em; color:var(--cream-dim);
}
.hero-trust b{ color:var(--gold-bright); font-weight:600; }
.hero-trust span{ display:inline-flex; align-items:center; gap:9px; }
.hero-trust span::before{ content:""; width:5px; height:5px; background:var(--gold); border-radius:50%; }

.scroll-cue{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:3; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-dim); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .line{ width:1px; height:42px; background:linear-gradient(var(--gold),transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* short viewports (landscape laptops / preview panes): keep hero clear of nav */
@media (max-height:760px){
  .hero{ padding-top:92px; justify-content:center; }
  .display{ font-size:clamp(40px,6.4vw,74px); }
  .hero h1{ margin:.18em 0 .26em; }
  .searchbar{ margin-top:26px; }
  .hero-trust{ margin-top:18px; }
  .scroll-cue{ display:none; }
}

/* ====================================================================
   RIDGE / CROWN DIVIDER
   ==================================================================== */
.ridge{ display:block; width:100%; height:auto; color:var(--gold); }

/* ====================================================================
   SECTION SCAFFOLD
   ==================================================================== */
section{ position:relative; }
.section-pad{ padding-block:clamp(80px,11vh,150px); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:54px; flex-wrap:wrap; }
.sec-head h2{ margin-top:.18em; max-width:18ch; }
.sec-head p{ color:var(--cream-dim); max-width:40ch; }
.link-more{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright);
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  border-bottom:1px solid var(--line-gold); padding-bottom:5px; transition:gap .3s, border-color .3s;
}
.link-more:hover{ gap:15px; border-color:var(--gold); }

/* ---------- Crown Collection grid ---------- */
.collection{ background:var(--ink-2); }
.grid-resorts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px); }
.rcard{
  position:relative; border:1px solid var(--line-neutral); border-radius:4px; overflow:hidden;
  background:var(--ink-card); transition:transform .55s var(--ease), border-color .55s;
}
.rcard:hover{ transform:translateY(-6px); border-color:var(--line-gold); }
.rcard .media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.rcard image-slot{ width:100%; height:100%; transition:transform 1.1s var(--ease); }
.rcard:hover image-slot{ transform:scale(1.05); }
.rcard .media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,15,21,.95) 4%, rgba(11,15,21,.15) 50%, transparent 75%);
}
.rcard .rank{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--serif); font-size:15px; color:var(--gold-bright);
  border:1px solid var(--line-gold); width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(11,15,21,.5); backdrop-filter:blur(4px);
}
.rcard .country{
  position:absolute; top:18px; right:16px; z-index:2;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim);
}
.rcard .body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; }
.rcard h3{ font-size:32px; }
.rcard .verdict{ font-size:14px; color:var(--cream-dim); margin-top:6px; line-height:1.45; font-style:italic; font-family:var(--serif); }
.rcard .rstats{ display:flex; gap:22px; margin-top:16px; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; }
.rcard:hover .rstats{ opacity:1; transform:none; }
.rcard .rstats div span{ display:block; }
.rcard .rstats .n{ font-family:var(--serif); font-size:21px; color:var(--gold-bright); }
.rcard .rstats .l{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-top:2px; }

/* ====================================================================
   OCCASIONS (SEO money tiles)
   ==================================================================== */
.occ-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-neutral); border:1px solid var(--line-neutral); border-radius:4px; overflow:hidden; }
.occ{
  position:relative; background:var(--ink); padding:38px 34px 34px;
  min-height:230px; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; transition:background .5s;
}
.occ:hover{ background:var(--ink-3); }
.occ .occ-num{ font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:.1em; }
.occ h3{ font-size:30px; margin-top:14px; max-width:11ch; transition:transform .5s var(--ease); }
.occ:hover h3{ transform:translateX(6px); }
.occ .occ-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
.occ .count{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); }
.occ .arr{ color:var(--gold); opacity:0; transform:translateX(-6px); transition:.4s var(--ease); }
.occ:hover .arr{ opacity:1; transform:none; }
.occ .ghost{
  position:absolute; right:-10px; bottom:-30px; font-family:var(--serif);
  font-size:130px; color:rgba(200,162,83,.05); pointer-events:none; line-height:1;
}

/* ====================================================================
   AIRPORTS / NEAR YOU
   ==================================================================== */
.near{ background:var(--ink-2); overflow:hidden; }
.near-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:center; }
.near-media{ position:relative; aspect-ratio:5/6; border-radius:4px; overflow:hidden; border:1px solid var(--line-gold); }
.near-media image-slot{ width:100%; height:100%; }
.near-media .tag{
  position:absolute; left:20px; bottom:20px; z-index:2; background:rgba(11,15,21,.7);
  backdrop-filter:blur(6px); border:1px solid var(--line-gold); padding:10px 16px; border-radius:2px;
  font-size:12px; letter-spacing:.1em;
}
.near h2{ margin:.2em 0 .5em; }
.near p{ color:var(--cream-dim); max-width:46ch; }
.airports{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.airport{
  display:flex; align-items:center; gap:12px; border:1px solid var(--line-neutral);
  border-radius:2px; padding:13px 18px; transition:border-color .35s, background .35s, transform .35s;
}
.airport:hover{ border-color:var(--line-gold); background:var(--ink-3); transform:translateY(-3px); }
.airport .code{ font-family:var(--serif); font-size:20px; color:var(--gold-bright); }
.airport .ameta{ font-size:12px; color:var(--cream-dim); line-height:1.3; }
.airport .ameta b{ color:var(--cream); font-weight:600; display:block; font-family:var(--sans); }

/* ====================================================================
   METHODOLOGY / TRUST
   ==================================================================== */
.method{ text-align:center; }
.method .quote{
  font-family:var(--serif); font-size:clamp(28px,4vw,52px); line-height:1.25;
  max-width:20ch; margin:.4em auto; font-weight:400;
}
.method .quote em{ color:var(--gold-bright); }
.method-stats{ display:flex; justify-content:center; gap:clamp(40px,7vw,100px); margin-top:60px; flex-wrap:wrap; }
.mstat .n{ font-family:var(--serif); font-size:clamp(40px,5vw,64px); color:var(--gold-bright); line-height:1; }
.mstat .l{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim); margin-top:12px; }

/* ====================================================================
   ENQUIRY CTA BAND
   ==================================================================== */
.enquiry{ position:relative; overflow:hidden; }
.enquiry-bg{ position:absolute; inset:0; z-index:0; }
.enquiry-bg image-slot{ width:100%; height:100%; }
.enquiry::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(105deg, var(--ink) 32%, rgba(11,15,21,.72) 70%, rgba(11,15,21,.45)); }
.enquiry-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.enquiry h2{ margin:.18em 0 .4em; max-width:14ch; }
.enquiry p{ color:var(--cream-dim); max-width:42ch; }
.eform{ background:rgba(15,21,29,.78); backdrop-filter:blur(16px); border:1px solid var(--line-gold); border-radius:5px; padding:clamp(26px,3vw,40px); }
.eform .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.efield{ margin-bottom:14px; }
.efield label{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.efield input, .efield select{
  width:100%; background:rgba(11,15,21,.6); border:1px solid var(--line-neutral); border-radius:2px;
  color:var(--cream); font-family:var(--sans); font-size:15px; padding:13px 15px; outline:none;
  transition:border-color .3s;
}
.efield input:focus, .efield select:focus{ border-color:var(--gold); }
.efield input::placeholder{ color:var(--slate); }
.efield select{ -webkit-appearance:none; appearance:none; cursor:pointer; }
.efield select option{ background:var(--ink-2); }
.esubmit{
  width:100%; background:var(--gold); color:var(--ink); padding:16px; border-radius:2px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-top:6px;
  transition:background .3s;
}
.esubmit:hover{ background:var(--gold-bright); }
.eform .fineprint{ font-size:11.5px; color:var(--slate); margin-top:16px; text-align:center; line-height:1.5; }
.eform.sent{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:340px; }
.eform .thanks{ display:none; }
.eform.sent .thanks{ display:block; }
.eform.sent .form-body{ display:none; }
.eform .thanks h3{ font-size:38px; }
.eform .thanks p{ color:var(--cream-dim); margin-top:12px; }
.eform .thanks .crown{ width:48px; height:34px; margin:0 auto 18px; stroke:var(--gold); fill:none; stroke-width:1.6; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.foot{ background:var(--ink-2); border-top:1px solid var(--line-neutral); padding-top:clamp(60px,8vh,100px); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-neutral); }
.foot-brand .brand-name{ font-size:26px; }
.foot-brand p{ color:var(--cream-dim); font-size:14px; max-width:30ch; margin-top:18px; line-height:1.6; }
.foot-news{ display:flex; margin-top:24px; border:1px solid var(--line-neutral); border-radius:2px; overflow:hidden; max-width:330px; }
.foot-news input{ flex:1; background:none; border:none; outline:none; color:var(--cream); padding:13px 15px; font-family:var(--sans); font-size:14px; }
.foot-news input::placeholder{ color:var(--slate); }
.foot-news button{ background:var(--gold); color:var(--ink); padding:0 18px; font-size:18px; }
.foot-col h4{ font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; font-weight:600; }
.foot-col a{ display:block; color:var(--cream-dim); font-size:14.5px; padding:7px 0; transition:color .3s, padding-left .3s; }
.foot-col a:hover{ color:var(--cream); padding-left:6px; }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; padding:30px 0 50px; flex-wrap:wrap; gap:16px; }
.foot-bottom small{ color:var(--slate); font-size:12.5px; letter-spacing:.04em; }
.foot-bottom .legal{ display:flex; gap:26px; }
.foot-bottom .legal a{ color:var(--slate); font-size:12.5px; }
.foot-bottom .legal a:hover{ color:var(--cream-dim); }

/* ====================================================================
   SCROLL REVEAL
   Resting state is VISIBLE. Motion is an opt-in enhancement that only
   animates transform/opacity FROM a hidden state when the document is
   actually painting (class added by JS after a confirmed paint tick).
   If that never happens, content stays fully visible — never stranded.
   ==================================================================== */
.reveal{ opacity:1; transform:none; }

html.anim-on .reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
html.anim-on .reveal.in{ opacity:1; transform:none; }
html.anim-on .reveal.d1{ transition-delay:.08s; }
html.anim-on .reveal.d2{ transition-delay:.16s; }
html.anim-on .reveal.d3{ transition-delay:.24s; }
html.anim-on .reveal.d4{ transition-delay:.32s; }
html.anim-on .reveal.d5{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  html.anim-on .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue .line{ animation:none; }
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:1000px){
  .grid-resorts{ grid-template-columns:repeat(2,1fr); }
  .occ-grid{ grid-template-columns:repeat(2,1fr); }
  .near-grid, .enquiry-inner{ grid-template-columns:1fr; }
  .near-media{ aspect-ratio:16/10; }
  .foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .nav-links{ display:none; }
  .nav-burger{ display:block; color:var(--cream); }
  .grid-resorts{ grid-template-columns:1fr; }
  .occ-grid{ grid-template-columns:1fr; }
  .searchbar{ flex-direction:column; }
  .searchbar .divider{ width:100%; height:1px; }
  .searchbar .go{ padding:16px; justify-content:center; }
  .eform .row{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .rcard .rstats{ opacity:1; transform:none; }
  .occ .arr{ opacity:1; transform:none; }
}