/* Self-hosted variable fonts (latin subset) — no third-party font requests. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500 600;font-display:swap;src:url('/fonts/playfair-display-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600 800;font-display:swap;src:url('/fonts/playfair-display-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ==========================================================================
   Santa Kevin / 12Snta25 — 12snta25.com
   Built by NerdyTechs. Palette carried over from the coming-soon page:
   midnight navy + antique gold + cream + Christmas red.
   ========================================================================== */

:root{
  --ink:        #070f24;
  --ink-2:      #0b1329;
  --navy:       #0e1a38;
  --navy-3:     #16244a;
  --cream:      #f7f1e4;
  --cream-2:    #efe5d2;
  --gold:       #e9c98c;
  --gold-lite:  #f6e3ba;
  --gold-deep:  #c9a462;
  --red:        #c62828;
  --red-deep:   #8e1d1d;
  --text:       #dfe7f7;
  --muted:      #9fb0d0;
  --ink-text:   #23252c;
  --ink-muted:  #5d6270;

  --serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --pad: clamp(18px, 5vw, 40px);
  --sect: clamp(64px, 9vw, 118px);
  --r: 16px;
  --shadow: 0 26px 70px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* NB: no overflow-x:hidden here — it makes body a scroll container, which
     silently kills scroll-margin-top on the anchor targets. html uses
     overflow-x:clip instead, which contains overflow without that side effect. */
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--gold-lite)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.12; margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}

/* snow.js from the shared library ships at z-index 9999 — tuck it under the nav */
body > canvas{z-index:5 !important}

:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink);
  padding:12px 20px; z-index:999; font-weight:700; border-radius:0 0 10px 0}
.skip:focus{left:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{max-width:820px}

/* ---------------------------------------------------------------- nav ---- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav::after{content:''; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,201,140,.32),transparent); opacity:0; transition:opacity .3s}
.nav.is-stuck{background:rgba(7,15,36,.9); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 34px rgba(0,0,0,.4)}
.nav.is-stuck::after{opacity:1}
.nav-in{display:flex; align-items:center; gap:20px; height:74px}

.brand{display:flex; align-items:center; gap:11px; margin-right:auto; color:var(--cream)}
.brand:hover{color:#fff}
.brand img{width:36px; height:36px; border-radius:9px; flex:none}
.brand > span{display:block; line-height:1.15}
.brand b{font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:.005em; display:block; line-height:1.15}
.brand b + span{display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600}

.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{color:var(--text); font-size:14.5px; font-weight:500; letter-spacing:.01em; position:relative; padding:4px 0}
.nav-links a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--gold); transition:right .28s ease}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}

.nav-cta{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  background:linear-gradient(160deg,var(--red),#a81f1f); color:#fff;
  padding:11px 20px; border-radius:999px; font-weight:650; font-size:14.5px;
  box-shadow:0 8px 20px rgba(198,40,40,.32), inset 0 1px 0 rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.14); transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(198,40,40,.42)}
.nav-cta svg{width:15px; height:15px}

.burger{display:none; width:44px; height:44px; border:1px solid rgba(233,201,140,.35);
  background:rgba(255,255,255,.05); border-radius:11px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex:none}
.burger span{display:block; width:18px; height:1.8px; background:var(--gold); position:relative; transition:.25s}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:18px; height:1.8px;
  background:var(--gold); transition:.25s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.nav.is-open .burger span{background:transparent}
.nav.is-open .burger span::before{top:0; transform:rotate(45deg)}
.nav.is-open .burger span::after{top:0; transform:rotate(-45deg)}

/* ---------------------------------------------------------------- hero --- */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:112px 0 64px; overflow:hidden; text-align:center;
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 38%}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(7,15,36,.15), rgba(7,15,36,.72) 62%, rgba(7,15,36,.94) 100%),
    linear-gradient(180deg, rgba(7,15,36,.86) 0%, rgba(7,15,36,.35) 34%, rgba(7,15,36,.82) 82%, var(--ink) 100%);
}
.hero-in{position:relative; z-index:2; max-width:900px}

.eyebrow{
  display:inline-flex; align-items:center; gap:14px; margin-bottom:22px;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--gold);
}
.eyebrow::before,.eyebrow::after{content:''; width:clamp(20px,7vw,54px); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-deep))}
.eyebrow::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}

.hero h1{
  font-size:clamp(50px,11.5vw,112px); font-weight:800; letter-spacing:-.02em; line-height:.98;
  background:linear-gradient(178deg,#fffdf8 12%,var(--gold-lite) 62%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 22px 60px rgba(0,0,0,.5);
}
.hero .tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(19px,3.4vw,29px);
  color:var(--cream); margin:16px 0 0; font-weight:500;
}
.hero .lede{margin:20px auto 0; max-width:57ch; color:#cdd9f2; font-size:clamp(15.5px,2vw,18px)}

.hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border-radius:999px; font-weight:650; font-size:16px;
  border:1px solid transparent; cursor:pointer; font-family:var(--sans);
  transition:transform .22s ease, box-shadow .22s ease, background .22s, color .22s;
}
.btn svg{width:17px; height:17px; flex:none}
.btn-primary{background:linear-gradient(160deg,#d63232,#9c1f1f); color:#fff;
  box-shadow:0 14px 34px rgba(198,40,40,.4), inset 0 1px 0 rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.16)}
.btn-primary:hover{color:#fff; transform:translateY(-3px); box-shadow:0 20px 44px rgba(198,40,40,.5)}
.btn-ghost{background:rgba(255,255,255,.05); color:var(--gold-lite); border-color:rgba(233,201,140,.45);
  backdrop-filter:blur(6px)}
.btn-ghost:hover{color:var(--ink); background:var(--gold); transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(233,201,140,.28)}
.btn-dark{background:var(--ink-2); color:var(--gold-lite); border-color:rgba(233,201,140,.35)}
.btn-dark:hover{color:var(--ink); background:var(--gold)}

.trust{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:40px;
}
.trust li{
  display:inline-flex; align-items:center; gap:7px; font-size:12.8px; font-weight:550; color:#e4ecfb;
  background:rgba(12,22,48,.5); border:1px solid rgba(233,201,140,.24);
  padding:7px 13px; border-radius:999px; backdrop-filter:blur(6px); white-space:nowrap;
}
.trust svg{width:14px; height:14px; color:var(--gold); flex:none}

.countdown{margin-top:30px; font-size:12.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); font-weight:600}

/* --------------------------------------------------------- section base -- */
section{position:relative}
section[id]{scroll-margin-top:86px}
.s-dark{background:var(--ink); padding:var(--sect) 0}
.s-navy{background:linear-gradient(180deg,var(--ink),#0a152f 50%,var(--ink)); padding:var(--sect) 0}
.s-cream{background:var(--cream); color:var(--ink-text); padding:var(--sect) 0}
.s-cream h2,.s-cream h3{color:#141a2c}
.s-cream p{color:#41454f}
.s-cream a{color:var(--red-deep); text-decoration:underline; text-underline-offset:3px}
.s-cream a:hover{color:var(--red)}

.head{text-align:center; max-width:720px; margin:0 auto clamp(38px,5vw,58px)}
.head.left{text-align:left; margin-inline:0}
.kicker{
  display:block; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:650; color:var(--gold-deep); margin-bottom:14px;
}
.s-dark .kicker,.s-navy .kicker{color:var(--gold)}
.head h2{font-size:clamp(31px,5.4vw,50px); letter-spacing:-.015em}
.head p{margin-top:15px; font-size:clamp(15.5px,2vw,17.5px)}
.s-dark .head p,.s-navy .head p{color:#c0cde8}

.rule{display:block; margin:22px auto 0; width:min(300px,58%); opacity:.85}
.rule.dark{filter:brightness(.45) saturate(1.6) hue-rotate(-8deg)}

/* Photographic section background: full-bleed art across the top of a dark
   section, scrimmed down to solid ink so content below stays legible. */
/* overflow:clip, not hidden — hidden would make this section a scroll
   container, which silently voids its own scroll-margin-top when the nav
   jumps here. hidden first as a fallback for pre-16 Safari. */
.s-photo{background:var(--ink); overflow:hidden; overflow:clip}
.sect-bg{position:absolute; inset:0 0 auto 0; height:min(72%,720px); z-index:0; pointer-events:none}
/* Framed on the rooftops rather than the moon — the moon reads as a glow
   behind the heading instead of a bright disc competing with it. */
.sect-bg img{width:100%; height:100%; object-fit:cover; object-position:center 78%}
.sect-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(7,15,36,.72) 0%,
    rgba(7,15,36,.60) 30%,
    rgba(7,15,36,.90) 68%,
    var(--ink) 96%)}
.s-photo > .wrap{position:relative; z-index:2}
@media (max-width:700px){
  /* narrow screens crop into the moon, so keep the band short and darker */
  .sect-bg{height:min(46%,430px)}
  .sect-bg::after{background:linear-gradient(180deg,
    rgba(7,15,36,.80) 0%, rgba(7,15,36,.70) 26%, rgba(7,15,36,.93) 66%, var(--ink) 95%)}
}

/* ------------------------------------------------------------- quote ----- */
.quote{
  padding:clamp(60px,8vw,96px) 0; text-align:center; position:relative; overflow:hidden;
  background:#7d1a1a url('/img/tx-velvet.webp') center/cover;
}
.quote::before{content:''; position:absolute; inset:0;
  background:radial-gradient(70% 100% at 50% 50%, rgba(0,0,0,.06), rgba(0,0,0,.55))}
.quote-in{position:relative; z-index:2; max-width:900px; margin:0 auto; padding-inline:var(--pad)}
.quote img.flourish{width:min(230px,52%); margin:0 auto 26px; opacity:.9}
.quote blockquote{margin:0; font-family:var(--serif); font-weight:600; font-style:italic;
  font-size:clamp(23px,4.3vw,42px); line-height:1.3; color:#fff8ec;
  text-shadow:0 6px 30px rgba(0,0,0,.4)}
.quote cite{display:block; margin-top:26px; font-style:normal; font-family:var(--sans);
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lite); font-weight:600}

/* ------------------------------------------------------------- about ----- */
.about-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,5.5vw,72px); align-items:center}
.about-grid > *,.feature > *,.area-grid > *,.book-grid > *{min-width:0}
.portrait{position:relative}
.portrait-frame{
  border-radius:6px; overflow:hidden; background:#fffdf7;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 3px 0 rgba(0,0,0,.05), 0 30px 60px rgba(20,15,5,.22);
  outline:1px solid var(--gold-deep); outline-offset:9px;
}
.portrait-frame img{width:100%}
.portrait .holly{position:absolute; width:132px; left:-52px; top:-46px; opacity:.9;
  transform:rotate(-6deg); pointer-events:none; z-index:2}
.portrait .cap{margin-top:26px; text-align:center; font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--ink-muted)}

.about-body h2{font-size:clamp(30px,4.6vw,46px); letter-spacing:-.015em}
.about-body .lead{font-size:clamp(17px,2.2vw,19.5px); color:#31353f; margin-top:18px; font-weight:450}
.about-body p{margin-top:14px}
.sig{margin-top:26px; font-family:var(--serif); font-style:italic; font-size:21px; color:var(--red-deep)}

.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px; margin-top:34px}
.fact{background:#fffdf7; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:16px 18px;
  box-shadow:0 2px 0 rgba(0,0,0,.03)}
.fact b{display:block; font-family:var(--serif); font-size:27px; color:var(--red-deep); line-height:1.1}
.fact span{display:block; font-size:12.5px; letter-spacing:.06em; color:var(--ink-muted); margin-top:5px}

/* -------------------------------------------------------- appearances ---- */
/* 10 appearance cards: 5 across on desktop keeps the grid square (5 + 5). */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(202px,1fr)); gap:15px}
.card{
  background:linear-gradient(168deg,rgba(24,38,74,.62),rgba(12,21,46,.62));
  border:1px solid rgba(233,201,140,.16); border-radius:var(--r); padding:26px 24px 28px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s, background .3s;
}
.card:hover{transform:translateY(-6px); border-color:rgba(233,201,140,.45);
  background:linear-gradient(168deg,rgba(30,47,90,.75),rgba(14,25,54,.75));
  box-shadow:0 22px 46px rgba(0,0,0,.4)}
.card .ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:radial-gradient(120% 120% at 30% 20%, rgba(233,201,140,.26), rgba(233,201,140,.07));
  border:1px solid rgba(233,201,140,.3);
}
.card .ico svg{width:23px; height:23px; color:var(--gold-lite)}
.card h3{font-size:18.5px; color:#fff; text-wrap:balance}
.card p{margin-top:8px; font-size:14.2px; color:#adbcd9; line-height:1.6}

/* ------------------------------------------------------------ feature ---- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,70px); align-items:center}
.feature.rev .feature-media{order:2}
.feature-media{position:relative; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow); outline:1px solid rgba(233,201,140,.28); outline-offset:-1px}
.s-cream .feature-media{box-shadow:0 22px 48px rgba(46,32,10,.2); outline-color:rgba(201,164,98,.5)}
.feature-media img{width:100%; aspect-ratio:3/2; object-fit:cover}
.feature-media::after{content:''; position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(7,15,36,0) 40%,rgba(7,15,36,.5))}

.ticks{margin-top:22px; display:grid; gap:13px}
.ticks li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; line-height:1.6}
.ticks svg{width:19px; height:19px; flex:none; margin-top:3px; color:var(--gold)}
.s-cream .ticks svg{color:var(--red-deep)}
.ticks b{color:#fff; font-weight:600}
.s-cream .ticks b{color:#141a2c}
.ticks span{color:#b6c4de}
.s-cream .ticks span{color:#4a4e59}

/* --------------------------------------------------------------- area ---- */
.area-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,70px); align-items:center}
.area-globe{max-width:min(400px,100%); margin-inline:auto;
  filter:drop-shadow(0 20px 34px rgba(20,15,5,.28))}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.chips li{font-size:13.5px; font-weight:550; color:#3b3f4a; background:#fffdf7;
  border:1px solid rgba(0,0,0,.1); padding:7px 15px; border-radius:999px}
.s-dark .chips li,.s-navy .chips li{color:#dbe4f7; background:rgba(255,255,255,.05);
  border-color:rgba(233,201,140,.22)}

/* ------------------------------------------------------------ booking ---- */
.booking{position:relative; padding:var(--sect) 0; background:var(--ink);
  overflow:hidden; overflow:clip}
.booking-bg{position:absolute; inset:0; z-index:0}
.booking-bg img{width:100%; height:100%; object-fit:cover; opacity:.5}
.booking-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--ink),rgba(7,15,36,.72) 40%,var(--ink))}
.booking .wrap{position:relative; z-index:2}

.book-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,4vw,56px); align-items:start}

.book-aside .box{
  background:rgba(12,22,48,.72); border:1px solid rgba(233,201,140,.2); border-radius:var(--r);
  padding:26px 26px 28px; backdrop-filter:blur(8px); margin-bottom:16px;
}
.book-aside h3{font-size:20px; color:#fff; margin-bottom:12px}
.book-aside p{font-size:14.8px; color:#b6c4de}
.direct{display:grid; gap:12px; margin-top:6px}
.direct a{display:flex; align-items:center; gap:13px; color:#eaf1ff; font-weight:550; font-size:16px}
.direct a:hover{color:var(--gold-lite)}
.direct .di{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:rgba(233,201,140,.12); border:1px solid rgba(233,201,140,.28)}
.direct svg{width:18px; height:18px; color:var(--gold)}
.direct small{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600}

/* form — styled as a cream "letter to Santa" card */
.form-card{
  background:var(--cream) url('/img/tx-knit.webp') center/380px repeat;
  border-radius:var(--r); padding:clamp(26px,4vw,42px);
  box-shadow:0 34px 80px rgba(0,0,0,.5); color:var(--ink-text);
  outline:1px solid var(--gold-deep); outline-offset:-8px; position:relative;
}
.form-card::before{content:''; position:absolute; inset:0; border-radius:var(--r);
  background:rgba(247,241,228,.86); pointer-events:none}
.form-card > *{position:relative; z-index:2}
.form-card h3{font-size:clamp(24px,3.4vw,31px); color:#141a2c}
.form-card .sub{font-size:14.8px; color:#5d6270; margin-top:8px}

.fields{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.f{display:flex; flex-direction:column; gap:7px}
.f.full{grid-column:1/-1}
.f label{font-size:12.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:#4a4e59}
.f label .req{color:var(--red)}
.f input,.f select,.f textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink-text);
  background:#fffdf8; border:1px solid #d8cdb6; border-radius:10px; padding:13px 15px;
  width:100%; transition:border-color .2s, box-shadow .2s;
}
.f textarea{min-height:118px; resize:vertical; line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--gold-deep);
  box-shadow:0 0 0 4px rgba(201,164,98,.2)}
.f .hint{font-size:12.5px; color:#7a7f8c; line-height:1.5}
.f input:user-invalid,.f textarea:user-invalid{border-color:#c9564f; box-shadow:0 0 0 4px rgba(201,86,79,.14)}
.hp{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden}

.form-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:26px}
.form-actions .btn{padding:16px 34px}
.form-actions .note{font-size:12.8px; color:#7a7f8c; max-width:26ch; line-height:1.5}
.btn[aria-busy="true"]{opacity:.65; pointer-events:none}

.form-msg{margin-top:20px; padding:16px 18px; border-radius:12px; font-size:15px; display:none; line-height:1.6}
.form-msg.ok{display:block; background:#e8f3ea; border:1px solid #b4d6bd; color:#1f5130}
.form-msg.err{display:block; background:#fbeceb; border:1px solid #e2b6b3; color:#8e2820}

/* ---------------------------------------------------------------- faq ---- */
.faq{max-width:840px; margin-inline:auto; display:grid; gap:12px}
.faq details{
  background:linear-gradient(168deg,rgba(24,38,74,.5),rgba(12,21,46,.5));
  border:1px solid rgba(233,201,140,.17); border-radius:13px; overflow:hidden;
  transition:border-color .25s, background .25s;
}
.faq details[open]{border-color:rgba(233,201,140,.4); background:rgba(20,33,66,.66)}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 56px 19px 24px; position:relative;
  font-family:var(--serif); font-size:18.5px; font-weight:600; color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:24px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 24px 22px; color:#b8c6e0; font-size:15.4px}

/* ------------------------------------------------------------- footer ---- */
.foot{background:#050b1c; padding:clamp(50px,7vw,80px) 0 30px; border-top:1px solid rgba(233,201,140,.14)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(26px,4vw,54px)}
.foot h4{font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  font-family:var(--sans); font-weight:650; margin-bottom:16px}
.foot p,.foot li{font-size:14.8px; color:#9aabc9; line-height:1.85}
.foot a{color:#cfdcf5}
.foot a:hover{color:var(--gold-lite)}
.foot .brand{margin-bottom:16px}
.social{display:inline-flex; align-items:center; gap:9px; margin-top:14px; font-weight:550;
  border:1px solid rgba(233,201,140,.3); padding:9px 17px; border-radius:999px; font-size:14.5px}
.social:hover{background:rgba(233,201,140,.1)}
.social svg{width:16px; height:16px}
.foot-bottom{margin-top:clamp(34px,5vw,54px); padding-top:24px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13.2px; color:#7c8db0}

/* --------------------------------------------------------- animation ----- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ------------------------------------------------------------ responsive - */
@media (max-width:1000px){
  /* minmax(0,1fr) — plain 1fr floors the track at the content's min-width,
     which let the globe artwork push the page 30px wider than the viewport. */
  .about-grid,.feature,.area-grid,.book-grid{grid-template-columns:minmax(0,1fr)}
  .feature.rev .feature-media{order:0}
  .portrait{max-width:430px; margin-inline:auto}
  .portrait .holly{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1/-1}
}
@media (max-width:840px){
  .nav-links{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,15,36,.97); backdrop-filter:blur(16px); padding:8px var(--pad) 22px;
    border-bottom:1px solid rgba(233,201,140,.2);
    transform:translateY(-14px); opacity:0; visibility:hidden; transition:.28s ease;
  }
  .nav.is-open .nav-links{transform:none; opacity:1; visibility:visible}
  .nav-links a{padding:15px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:16.5px}
  .nav-links a::after{display:none}
  .nav.is-open{background:rgba(7,15,36,.97)}
  .burger{display:flex}
  .nav-cta span{display:none}
  .nav-cta{padding:11px 14px}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .hero{min-height:92svh; padding-top:104px}
  .hero-cta .btn{width:100%}
  .fields{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .brand b{font-size:18.5px}
  .brand b + span{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
}

@media print{
  .nav,.hero-bg,.booking-bg,body>canvas,.btn{display:none !important}
  body{background:#fff; color:#000}
}