/* ============ SIGNATURE LAYER — brand identity, seasonal atmosphere ============ */

/* ---------- SEASONAL PALETTE: the whole house changes with the season ---------- */
body{transition:background-color 1.6s ease}

body[data-season="winter"]{
  --ink:#0a0d10;          /* glacier blue-black */
  --ink-2:#101418;
  --pine:#161c21;
  --gold:#c8a468;
  --line:rgba(200,164,104,.24);
  --atmos:rgba(120,160,190,.10);   /* cold light */
  --atmos-2:rgba(150,185,210,.06);
}
body[data-season="summer"]{
  --ink:#0d0c09;          /* larch-warm black */
  --ink-2:#15130f;
  --pine:#1c1a14;
  --gold:#cfa96a;
  --line:rgba(207,169,106,.26);
  --atmos:rgba(196,150,80,.10);    /* warm light */
  --atmos-2:rgba(210,170,100,.06);
}

/* atmospheric wash — a season-tinted light that breathes over everything */
.atmos{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.9;
  background:radial-gradient(ellipse 120% 80% at 50% -10%, var(--atmos) 0%, transparent 60%),
             radial-gradient(ellipse 100% 60% at 50% 110%, var(--atmos-2) 0%, transparent 55%);
  transition:background 1.8s ease}

/* seasonal section imagery */
[data-seasonal]{transition:background-image 1.2s ease}

/* ---------- THE MONOGRAM: the house mark, used as section signature ---------- */
.mono{display:inline-flex;align-items:center;justify-content:center;position:relative;width:54px;height:54px;flex:none}
.mono svg{width:100%;height:100%;overflow:visible}
.mono .ring{fill:none;stroke:var(--gold);stroke-width:.6;opacity:.45;
  stroke-dasharray:230;stroke-dashoffset:230;transition:stroke-dashoffset 2.2s cubic-bezier(.16,1,.3,1)}
.in .mono .ring,.mono.in .ring{stroke-dashoffset:0}
.mono .w{font-family:var(--disp);font-size:22px;fill:var(--gold);letter-spacing:.02em}
.mono-lg{width:96px;height:96px}
.mono-lg .w{font-size:40px}

/* section signature: monogram + hairline + numeral */
.sig{display:flex;align-items:center;gap:26px;margin-bottom:34px}
.sig .rule{height:1px;flex:1;background:linear-gradient(90deg,var(--gold),rgba(200,164,104,.05));max-width:220px}
.sig .num{font-family:var(--disp);font-size:13px;letter-spacing:.5em;color:var(--gold);opacity:.8}
.sig.center{justify-content:center}
.sig.center .rule{max-width:120px}
.sig.center .rule.l{background:linear-gradient(270deg,var(--gold),rgba(200,164,104,.05))}

/* the divider that separates chapters — monogram on a hairline */
.chapter-break{display:flex;align-items:center;justify-content:center;gap:0;padding:0;margin:0;position:relative;height:1px;background:var(--line)}
.chapter-break .mono{position:absolute;background:var(--ink);padding:0 22px;width:auto;height:auto;transition:background 1.6s ease}
.chapter-break .mono svg{width:46px;height:46px}

/* ---------- CINEMATIC: light sweep across headings ---------- */
.h2{position:relative}
.sheen{position:relative;overflow:hidden;display:inline-block}
.sheen::after{content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(243,239,230,.16),transparent);
  transform:skewX(-18deg);animation:sheen 7.5s cubic-bezier(.16,1,.3,1) 1.2s infinite}
@keyframes sheen{0%{left:-140%}22%{left:150%}100%{left:150%}}

/* ---------- SIGNATURE SEAL used at section corners ---------- */
.seal{position:absolute;top:0;right:54px;z-index:3;opacity:.13;pointer-events:none}
.seal svg{width:210px;height:210px}
.seal .w{font-family:var(--disp);font-size:96px;fill:none;stroke:var(--gold);stroke-width:.55}
@media(max-width:980px){.seal{display:none}}

/* ---------- EMBOSSED NUMERALS behind chapters ---------- */
.ghost-num{position:absolute;left:-14px;top:-58px;font-family:var(--disp);font-size:190px;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(200,164,104,.10);pointer-events:none;z-index:0;user-select:none}
@media(max-width:980px){.ghost-num{display:none}}

/* ---------- section content above atmospherics ---------- */
section,footer{position:relative;z-index:2}
header#top{position:relative;z-index:2}
nav{z-index:1000}
.util{z-index:1002}
#bookbar{z-index:9993}
#menu-overlay{z-index:9994}
#page-veil{z-index:9996}
#lightbox{z-index:10002}
.viewport-frame{z-index:9990}
#cursor,#cursor-ring{z-index:10005}
.grain{z-index:3}

/* ---------- refined seasonal accents on key components ---------- */
body[data-season="winter"] .hero-veil{
  background:radial-gradient(ellipse at center,rgba(10,13,16,.12) 0%,rgba(10,13,16,.74) 100%),
             linear-gradient(to top,rgba(10,13,16,.96),transparent 46%)}
body[data-season="summer"] .hero-veil{
  background:radial-gradient(ellipse at center,rgba(13,12,9,.10) 0%,rgba(13,12,9,.70) 100%),
             linear-gradient(to top,rgba(13,12,9,.95),transparent 46%)}

/* season indicator on the hero */
.season-mark{position:absolute;left:54px;bottom:44px;z-index:6;display:flex;align-items:center;gap:14px;
  opacity:0;animation:fadeUp 1.5s 4.6s ease forwards}
.season-mark .ln{width:34px;height:1px;background:var(--gold)}
.season-mark span{font-size:9px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold)}
@media(max-width:900px){.season-mark{display:none}}

/* weather: no unit clutter */
#wx b{letter-spacing:.24em}

/* ---------- nav follows the utility bar (no floating gap) ---------- */
nav{transition:top .5s cubic-bezier(.16,1,.3,1),padding .5s ease,background .5s ease}
body.has-util.util-hidden nav{top:0}
body.has-util.util-hidden .viewport-frame{top:16px}
/* when scrolled, the bar is opaque enough that no seam shows */
nav.scrolled{background:rgba(10,11,10,.9);border-bottom:1px solid rgba(200,164,104,.14)}

/* ---------- mobile guards ---------- */
@media(max-width:620px){
  .foot-grid{grid-template-columns:1fr;gap:38px}
  .foot-affil{gap:22px;margin-top:44px}
  .foot-affil div{letter-spacing:.3em}
  .foot-bottom{flex-direction:column;gap:10px}
  .wrap{padding:0 22px}
  .voucher .wrap{padding:90px 22px}
  .suite-feature .txt,.dine-feature .txt{padding:52px 26px}
  .season{padding:56px 26px}
  #private .wrap,#spa .wrap{padding-left:22px;padding-right:22px}
  .h2{font-size:clamp(36px,10vw,52px) !important}
  .hero-title{font-size:clamp(52px,16vw,86px)}
  .lead{font-size:17.5px;line-height:1.8}
  .sig{gap:14px;margin-bottom:24px}
  .sig .rule{max-width:70px}
  .dcard,.offer{padding:38px 26px}
  .keys > div{padding:40px 26px}
}
@media(max-width:900px){
  .pad{padding:96px 0}
  #heritage,#rooms,#dining{padding:110px 0}
  #quote,#book{padding:110px 0}
  .cta-band{padding:100px 0}
  .awards{padding:48px 0}
  .vtl{margin-top:60px}
}
/* never let anything create a horizontal scrollbar */
html,body{max-width:100%;overflow-x:clip}

/* ============ CREST SYSTEM — real logo, brand slate + gold ============ */
:root{--slate:#5a6c78;--slate-lift:#8298a4}
body[data-season="winter"]{--slate:#5a6c78;--slate-lift:#8ea4b0}
body[data-season="summer"]{--slate:#65707a;--slate-lift:#9aa4ac}

.crest{display:block;width:100%;height:100%;color:var(--gold);
  transition:color .8s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}

/* the mono wrapper now carries the crest, revealed by a rising mask */
.mono{width:46px;height:46px;overflow:hidden}
.mono .crest{clip-path:inset(100% 0 0 0);opacity:0;
  transition:clip-path 1.5s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.mono.in .crest,.in .mono .crest{clip-path:inset(0 0 0 0);opacity:1}
.mono:hover .crest{transform:translateY(-3px)}

/* nav wordmark gets the crest at its left */
.nav-logo{flex-direction:row;align-items:center;gap:15px}
.nav-logo .crest-mark{width:38px;height:38px;flex:none}
.nav-logo .crest-mark .crest{color:var(--gold)}
.nav-logo .txt{display:flex;flex-direction:column;line-height:1}
nav.scrolled .nav-logo .crest-mark{width:32px;height:32px}
.nav-logo .crest-mark,.nav-logo .crest-mark .crest{transition:width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1),color .6s ease}

/* chapter break: crest sitting on the hairline */
.chapter-break .mono{width:auto;height:auto;padding:0 26px;overflow:visible}
.chapter-break .mono .crest{width:38px;height:38px}

/* section signature: slate numeral, gold crest, gradient rule */
.sig .num{color:var(--slate-lift);font-size:12px;letter-spacing:.55em}
.sig .rule{background:linear-gradient(90deg,var(--gold) 0%,var(--slate) 55%,rgba(90,108,120,.06) 100%)}
.sig.center .rule.l{background:linear-gradient(270deg,var(--gold) 0%,var(--slate) 55%,rgba(90,108,120,.06) 100%)}

/* hero seal becomes the crest, huge and barely there */
.seal{opacity:.07;top:70px;right:46px}
.seal svg{width:250px;height:250px}
.seal .crest{color:var(--gold)}

/* loader: the crest draws itself in */
#loader .loader-mono{width:104px;height:104px;font-size:0;animation:none;opacity:1}
#loader .loader-mono .crest{color:var(--gold);clip-path:inset(100% 0 0 0);opacity:0;
  animation:crestRise 1.9s .25s cubic-bezier(.16,1,.3,1) forwards}
@keyframes crestRise{to{clip-path:inset(0 0 0 0);opacity:1}}

/* footer crest */
.foot-logo{display:flex;align-items:center;gap:16px;font-size:32px}
.foot-logo .crest-mark{width:46px;height:46px;flex:none}
.foot-logo .crest-mark .crest{color:var(--slate-lift)}
.foot-logo:hover .crest-mark .crest{color:var(--gold)}

/* slate as the second brand voice */
.chapter{color:var(--gold)}
.crumb em{color:var(--slate-lift)}
.archive figcaption em{color:var(--slate-lift)}
.vrow .yr{-webkit-text-stroke:1px var(--slate)}
.vrow .dot{border-color:var(--slate-lift)}
.press .row div small{color:var(--slate-lift)}
.awards .aw small{color:var(--slate-lift)}
.foot-affil div:hover{color:var(--slate-lift)}
.side-mark b{color:var(--slate-lift)}
.season-mark .ln{background:linear-gradient(90deg,var(--gold),var(--slate))}

/* watermark crest that drifts with the scroll — cinematic, never in the way */
.crest-drift{position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);
  opacity:.035;pointer-events:none;z-index:0}
.crest-drift .crest{color:var(--slate-lift)}
@media(max-width:980px){.crest-drift{width:360px;height:360px;opacity:.028}}

/* keep every layer legible above the drift */
#quote .wrap,#numbers .wrap,.press .wrap,.awards .wrap{position:relative;z-index:2}

/* one rule, not two: the sig row carries the line */
.sig + .chapter::before{display:none}
.sig + .chapter{gap:0;letter-spacing:.58em;color:var(--slate-lift)}
.sig{margin-bottom:22px}
.sig .num{margin-left:4px}

/* ============ NAV — brighter, larger, present ============ */
nav{background:linear-gradient(to bottom,rgba(8,10,12,.86),rgba(8,10,12,.30) 70%,transparent);
    padding:22px 44px;backdrop-filter:blur(3px)}
nav.scrolled{background:rgba(9,11,13,.94);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(200,164,104,.22);padding:13px 44px}
.nav-links{gap:30px}
.nav-links a{font-size:11.5px;letter-spacing:.2em;color:rgba(243,239,230,.92);font-weight:400}
.nav-links a:hover{color:var(--gold)}
.nav-links a::after{height:1.5px;bottom:-8px;background:var(--gold)}
.nav-links a.on{color:var(--gold)}
.nav-links a.on::after{width:100%}
.nav-logo .w{color:#fff;font-size:27px}
.nav-logo .est{color:var(--gold);opacity:.9}
.nav-cta{border-color:var(--gold);color:var(--ink);background:var(--gold);
    padding:13px 30px;font-size:10px;letter-spacing:.3em;font-weight:400}
.nav-cta:hover{background:transparent;color:var(--gold)}
.menu-btn span{width:28px;height:1.5px;background:rgba(243,239,230,.95)}
.util{background:rgba(7,9,11,.96);border-bottom:1px solid rgba(200,164,104,.2)}
.util a,.util span{color:rgba(243,239,230,.72)}
.util .langs a{color:rgba(243,239,230,.72);font-size:9.5px}
.season-pill button{color:rgba(243,239,230,.7)}
@media(max-width:1560px){.nav-links{display:flex}}
@media(max-width:1440px){.nav-links{gap:20px}.nav-links a{font-size:10.5px;letter-spacing:.15em}nav{padding:20px 30px}}
@media(max-width:1240px){.nav-links{display:none}}

/* ============ PAGE-SPECIFIC COMPONENTS ============ */
/* Careers — the position board */
.roles{border-top:1px solid var(--line);margin-top:70px}
.role{display:grid;grid-template-columns:64px 1fr 220px 150px;align-items:center;gap:24px;
  padding:34px 0;border-bottom:1px solid var(--line);transition:.55s cubic-bezier(.16,1,.3,1);position:relative}
.role:hover{background:linear-gradient(90deg,rgba(200,164,104,.06),transparent 60%);padding-left:18px}
.role .no{font-family:var(--disp);font-size:15px;color:var(--slate-lift);letter-spacing:.3em}
.role h4{font-family:var(--disp);font-size:clamp(22px,2.3vw,32px);font-weight:400;line-height:1.2}
.role .meta{font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--ivory-dim)}
.role .apply{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  text-decoration:none;justify-self:end;display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.role .apply::after{content:'⟶';transition:.4s}
.role:hover .apply::after{transform:translateX(9px)}
@media(max-width:900px){.role{grid-template-columns:44px 1fr;gap:12px}
  .role .meta,.role .apply{grid-column:2}.role .apply{justify-self:start;margin-top:8px}}

/* Careers — what the house gives back */
.gives{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:80px}
@media(max-width:900px){.gives{grid-template-columns:1fr}}
.gives > div{background:var(--ink);padding:46px 38px;transition:.5s}
.gives > div:hover{background:var(--pine)}
.gives b{display:block;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold);margin-bottom:12px;font-weight:400}
.gives p{font-family:var(--serif);font-size:16px;color:var(--ivory-dim);line-height:1.75}

/* Sustainability — the ledger */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:76px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:900px){.ledger{grid-template-columns:1fr 1fr}}
.ledger > div{padding:52px 30px;text-align:center;border-right:1px solid var(--line)}
.ledger > div:last-child{border-right:none}
.ledger .v{font-family:var(--disp);font-size:clamp(40px,4.4vw,66px);color:var(--ivory);line-height:1}
.ledger .v sup{font-size:.36em;color:var(--gold)}
.ledger .k{margin-top:14px;font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--slate-lift)}

/* named story block — a fact with a face */
.named{display:grid;grid-template-columns:.9fr 1.1fr;min-height:520px;background:var(--pine);margin-top:26px}
@media(max-width:980px){.named{grid-template-columns:1fr}}
.named .img{background-size:cover;background-position:center;min-height:340px}
.named .txt{padding:64px 58px;display:flex;flex-direction:column;justify-content:center}
.named .tag{font-size:9.5px;letter-spacing:.46em;text-transform:uppercase;color:var(--gold)}
.named h3{font-family:var(--disp);font-size:clamp(30px,3vw,46px);font-weight:400;margin:18px 0 20px;line-height:1.12}
.named p{font-family:var(--serif);font-size:17.5px;line-height:1.85;color:var(--ivory-dim)}
@media(max-width:620px){.named .txt{padding:48px 26px}}

/* ---------- contrast corrections (WCAG AA) ---------- */
.foot-bottom p{color:rgba(243,239,230,.62)}
.foot-affil div{color:rgba(243,239,230,.66)}
.side-mark{color:rgba(243,239,230,.4)}
.season-pill button{color:rgba(243,239,230,.78)}

/* ---------- palette B: lifted ground, same cinema ---------- */
body[data-season="winter"]{--ink:#12171c;--ink-2:#181e24;--pine:#1e262d;--line:rgba(200,164,104,.30)}
body[data-season="summer"]{--ink:#16150f;--ink-2:#1c1b14;--pine:#24221a;--line:rgba(207,169,106,.32)}
body[data-season="winter"] .hero-veil{
  background:radial-gradient(ellipse at center,rgba(18,23,28,.10) 0%,rgba(18,23,28,.66) 100%),
             linear-gradient(to top,rgba(18,23,28,.93),transparent 48%)}
body[data-season="summer"] .hero-veil{
  background:radial-gradient(ellipse at center,rgba(22,21,15,.09) 0%,rgba(22,21,15,.63) 100%),
             linear-gradient(to top,rgba(22,21,15,.92),transparent 48%)}
.page-hero .veil{background:linear-gradient(to top,rgba(18,23,28,.95),rgba(18,23,28,.24) 62%)}
#spa .veil{background:linear-gradient(90deg,rgba(18,23,28,.92) 22%,rgba(18,23,28,.32) 70%,rgba(18,23,28,.58))}
#private .veil{background:linear-gradient(270deg,rgba(18,23,28,.92) 26%,rgba(18,23,28,.28) 75%)}
.voucher .veil{background:linear-gradient(90deg,rgba(18,23,28,.93) 30%,rgba(18,23,28,.32))}
.season .veil{background:linear-gradient(to top,rgba(18,23,28,.88),rgba(18,23,28,.10) 62%)}
.rcard .veil{background:linear-gradient(to top,rgba(18,23,28,.90) 8%,rgba(18,23,28,.04) 60%)}
.hero-veil{background:radial-gradient(ellipse at center,rgba(18,23,28,.10) 0%,rgba(18,23,28,.66) 100%),
           linear-gradient(to top,rgba(18,23,28,.93),transparent 48%)}
nav{background:linear-gradient(to bottom,rgba(14,18,22,.88),rgba(14,18,22,.30) 70%,transparent)}
nav.scrolled{background:rgba(16,20,25,.95)}
.util{background:rgba(13,17,21,.96)}
#menu-overlay{background:rgba(14,18,22,.985)}
#bookbar{background:rgba(14,18,22,.96)}
#loader{background:#12171c}
#lightbox{background:rgba(12,16,20,.97)}
.chapter-break .mono{background:var(--ink)}
::-webkit-scrollbar-track{background:var(--ink)}

/* ---------- burger only where the links are hidden ---------- */
.menu-btn{display:none}
@media(max-width:1240px){.menu-btn{display:flex}}
.nav-cta{margin-left:0}
@media(max-width:1240px){.nav-cta{margin-left:0}}

/* ============ AWARDS · PARTNERS · SOCIAL ============ */
.awards{padding:96px 0;background:var(--ink-2)}
.aw-eyebrow{font-size:9.5px;letter-spacing:.55em;text-transform:uppercase;color:var(--slate-lift);
  text-align:center;margin-bottom:56px}
.aw-row{display:flex;justify-content:center;align-items:flex-start;gap:0;flex-wrap:wrap}
.aw-logo{flex:1 1 0;min-width:180px;max-width:250px;padding:0 34px;text-align:center;text-decoration:none;
  border-right:1px solid var(--line);transition:.55s cubic-bezier(.16,1,.3,1)}
.aw-logo:last-child{border-right:none}
.aw-logo:hover{transform:translateY(-6px)}
.aw-logo img{height:62px;width:auto;max-width:100%;margin:0 auto 18px;object-fit:contain;
  filter:brightness(0) invert(1) opacity(.72);transition:.55s}
.aw-logo:hover img{filter:brightness(0) invert(1) opacity(1)}
.aw-logo span{display:block;font-size:8.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--slate-lift);
  transition:.4s;line-height:1.9}
.aw-logo:hover span{color:var(--gold)}
@media(max-width:900px){.aw-row{gap:34px}.aw-logo{border-right:none;flex:0 0 40%;padding:0 10px}
  .aw-logo img{height:48px}}

.partners{padding:74px 0;border-top:1px solid var(--line);background:var(--ink)}
.pt-row{display:flex;justify-content:center;align-items:center;gap:64px;flex-wrap:wrap}
.pt-row a{display:inline-flex;align-items:center;transition:.5s}
.pt-row img{height:38px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1) opacity(.42);transition:.5s}
.pt-row a:hover img{filter:brightness(0) invert(1) opacity(.9)}
@media(max-width:900px){.pt-row{gap:36px}.pt-row img{height:30px}}

/* social — proper marks, not just words */
.socials{gap:0;margin-top:24px}
.socials a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-right:none;font-size:0;transition:.45s;padding:0}
.socials a:last-child{border-right:1px solid var(--line)}
.socials a:hover{background:var(--gold);border-color:var(--gold)}
.socials a svg{width:16px;height:16px;fill:var(--ivory-dim);transition:.4s}
.socials a:hover svg{fill:var(--ink)}

/* ---------- hero veil tuned for the real (bright) photography ---------- */
.hero-veil{
  background:
    linear-gradient(to bottom, rgba(14,18,22,.72) 0%, rgba(14,18,22,.34) 26%, rgba(14,18,22,.30) 48%, rgba(14,18,22,.86) 88%, rgba(18,23,28,.97) 100%),
    radial-gradient(ellipse 70% 52% at 50% 52%, rgba(10,13,17,.62) 0%, rgba(10,13,17,.12) 70%, transparent 100%) !important}
body[data-season="winter"] .hero-veil,body[data-season="summer"] .hero-veil{
  background:
    linear-gradient(to bottom, rgba(14,18,22,.72) 0%, rgba(14,18,22,.34) 26%, rgba(14,18,22,.30) 48%, rgba(14,18,22,.86) 88%, rgba(18,23,28,.97) 100%),
    radial-gradient(ellipse 70% 52% at 50% 52%, rgba(10,13,17,.62) 0%, rgba(10,13,17,.12) 70%, transparent 100%)}
.hero-title{text-shadow:0 6px 40px rgba(8,11,14,.55)}
.hero-sub{text-shadow:0 3px 22px rgba(8,11,14,.75);color:#e9e5da}
.hero-kicker{text-shadow:0 2px 16px rgba(8,11,14,.8)}
.hero-badge p,.season-mark span,.hero-scroll span{text-shadow:0 2px 14px rgba(8,11,14,.8)}
/* page heroes carry the same protection */
.page-hero .veil{background:linear-gradient(to bottom,rgba(14,18,22,.62) 0%,rgba(14,18,22,.30) 34%,rgba(14,18,22,.90) 86%,rgba(18,23,28,.98) 100%) !important}
.page-hero .h2,.page-hero .lead,.page-hero .crumb,.page-hero .chapter{text-shadow:0 3px 24px rgba(8,11,14,.6)}

/* ---------- cinematic video hero (seasons retired) ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.92) contrast(1.04)}
header#top{background:var(--ink)}
.season-pill,.season-dates,.season-mark{display:none !important}
/* single, settled palette */
body,body[data-season="winter"],body[data-season="summer"]{
  --ink:#12171c;--ink-2:#181e24;--pine:#1e262d;--gold:#c8a468;
  --line:rgba(200,164,104,.30);--slate:#5a6c78;--slate-lift:#8ea4b0;
  --atmos:rgba(120,160,190,.09);--atmos-2:rgba(150,185,210,.05)}

/* video hero: slow cinematic drift */
.hero-video{animation:heroDrift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{from{transform:scale(1.04)}to{transform:scale(1.11)}}
@media(prefers-reduced-motion:reduce){.hero-video{animation:none}}

/* ============ SCROLL-SCRUBBED HERO ============ */
header#top.scrub{height:300vh;min-height:300vh;display:block;overflow:visible}
.scrub-stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.scrub-stage .hero-video{animation:none;transform:none}
.scrub-stage .hero-content{transition:none}
/* the caption track: content reacts to scrub progress */
.scrub-stage .hero-content{will-change:transform,opacity}
.scrub-stage .hero-scroll{transition:opacity .4s}
.scrub-progress{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:7;
  width:170px;height:1px;background:rgba(243,239,230,.16)}
.scrub-progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .12s linear}
@media(max-width:820px){header#top.scrub{height:100vh;min-height:100vh}
  .scrub-stage{position:relative;height:100vh}
  .scrub-stage .hero-video{animation:heroDrift 26s ease-in-out infinite alternate}
  .scrub-progress{display:none}}

/* poster always behind the video — never a black stage */
.scrub-stage{background:url('video/hero-poster.jpg') center/cover no-repeat var(--ink)}
.scrub-stage .hero-video{background:transparent}

/* sticky must not be trapped by an overflow ancestor */
html,body{overflow-x:clip;overflow-y:visible}
header#top.scrub{overflow:visible}

.scrub-stage{background-position:center;background-repeat:no-repeat;background-size:104%;
  transition:background-size .25s linear}

/* ============ SCROLL FIX ============ */
/* smooth-scroll makes every wheel tick animate — it fights the scrubber and feels laggy.
   Keep it only for in-page anchor jumps, never for normal scrolling. */
html{scroll-behavior:auto !important}
html:focus-within{scroll-behavior:auto}

/* the scrub track was 3 screens long — that reads as "the page is stuck". 180vh is one
   unhurried pass through the film, then the site moves on. */
header#top.scrub{height:180vh;min-height:180vh}
@media(max-width:1100px){header#top.scrub{height:150vh;min-height:150vh}}
@media(max-width:820px){header#top.scrub{height:100vh;min-height:100vh}}

/* let the browser optimise the sticky stage instead of repainting it every frame */
.scrub-stage{contain:paint;transform:translateZ(0)}
.hero-video{will-change:auto}

/* ---------- page heroes: a scrim under the words, never over the picture ----------
   Bright interiors (the Cäsar Ritz room) washed the headline out. The text sits left,
   so the shade sits left too — the photograph keeps its light on the right. */
.page-hero .veil{
  background:
    linear-gradient(100deg, rgba(12,16,20,.92) 0%, rgba(12,16,20,.78) 30%,
                    rgba(12,16,20,.34) 58%, rgba(12,16,20,.06) 80%, transparent 100%),
    linear-gradient(to bottom, rgba(12,16,20,.55) 0%, rgba(12,16,20,.16) 38%,
                    rgba(12,16,20,.72) 88%, rgba(18,23,28,.97) 100%) !important}
.page-hero .h2,.page-hero .lead,.page-hero .crumb,.page-hero .chapter{
  text-shadow:0 2px 26px rgba(8,11,14,.75)}
.page-hero .wrap{max-width:1460px}
.page-hero .h2,.page-hero .lead{max-width:900px}
@media(max-width:820px){
  .page-hero .veil{background:linear-gradient(to bottom,rgba(12,16,20,.72) 0%,rgba(12,16,20,.55) 40%,
                   rgba(12,16,20,.90) 88%,rgba(18,23,28,.98) 100%) !important}
}

/* ============ SUSTAINABILITY — the full ledger ============ */
.eco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:70px}
@media(max-width:900px){.eco-grid{grid-template-columns:1fr}}
.eco-grid > div{background:var(--ink);padding:52px 44px;transition:.5s}
.eco-grid > div:hover{background:var(--pine)}
.eco-grid h4{font-family:var(--disp);font-size:26px;font-weight:400;margin:0 0 8px}
.eco-grid .kick{font-size:9px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:16px}
.eco-grid ul{list-style:none;margin:18px 0 0;padding:0}
.eco-grid li{font-family:var(--serif);font-size:16.5px;line-height:1.8;color:var(--ivory-dim);
  padding-left:22px;position:relative;margin-bottom:8px}
.eco-grid li::before{content:'—';position:absolute;left:0;color:var(--slate-lift);font-style:normal}
@media(max-width:620px){.eco-grid > div{padding:40px 26px}}

/* Grow My Tree — the counter piece */
.tree{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:560px;
  background:var(--pine);margin-top:26px;overflow:hidden}
@media(max-width:980px){.tree{grid-template-columns:1fr}}
.tree .img{background-size:cover;background-position:center;min-height:340px}
.tree .txt{padding:70px 60px;display:flex;flex-direction:column;justify-content:center}
.tree .count{font-family:var(--disp);font-size:clamp(66px,8vw,124px);line-height:.94;color:var(--ivory)}
.tree .count sup{font-size:.26em;color:var(--gold);vertical-align:super;letter-spacing:.1em}
.tree .lbl{font-size:9.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-top:18px}
.tree p{font-family:var(--serif);font-size:17.5px;line-height:1.85;color:var(--ivory-dim);margin-top:28px}
@media(max-width:620px){.tree .txt{padding:52px 26px}}

/* the pledge line — one promise per row */
.pledge{margin-top:70px;border-top:1px solid var(--line)}
.pledge div{display:grid;grid-template-columns:150px 1fr;gap:30px;padding:30px 0;
  border-bottom:1px solid var(--line);align-items:baseline;transition:.5s}
.pledge div:hover{padding-left:16px;background:linear-gradient(90deg,rgba(200,164,104,.05),transparent 55%)}
.pledge b{font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);font-weight:400}
.pledge p{font-family:var(--serif);font-size:17px;line-height:1.8;color:var(--ivory-dim)}
@media(max-width:760px){.pledge div{grid-template-columns:1fr;gap:10px}}

/* team portrait band */
.team-band{position:relative;min-height:66vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center 30%;margin-top:100px}
.team-band .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,16,20,.96) 0%,rgba(12,16,20,.35) 55%,rgba(12,16,20,.18) 100%)}
.team-band .wrap{position:relative;z-index:2;padding-bottom:62px}
.team-band .cap{font-size:9.5px;letter-spacing:.46em;text-transform:uppercase;color:var(--gold)}
.team-band h3{font-family:var(--disp);font-size:clamp(28px,3.2vw,46px);font-weight:400;margin:16px 0 14px;line-height:1.15}
.team-band p{font-family:var(--serif);font-size:17.5px;font-style:italic;color:var(--ivory-dim);max-width:640px;line-height:1.8}

/* group portraits and wide aerials need their own framing in a hero */
.page-hero[style*="team-ibex"]{background-position:center 32%}
.page-hero[style*="house-aerial"]{background-position:center 62%}

/* a group portrait must keep its faces — shift the team right of the headline
   and lighten the scrim so nobody sits in shadow */
.page-hero[style*="team-ibex"]{background-position:72% 30%}
.page-hero[style*="team-ibex"] .veil{
  background:
    linear-gradient(100deg, rgba(12,16,20,.90) 0%, rgba(12,16,20,.62) 26%,
                    rgba(12,16,20,.20) 46%, rgba(12,16,20,.04) 62%, transparent 76%),
    linear-gradient(to bottom, rgba(12,16,20,.42) 0%, rgba(12,16,20,.10) 40%,
                    rgba(12,16,20,.66) 88%, rgba(18,23,28,.97) 100%) !important}