/* ============================================================
   DESIGN SYSTEM
   ============================================================ */
:root{
  --obsidian:#0E1013;
  --slate:#12151A;
  --ink:#171B21;
  --ink-2:#1E232A;
  --bone:#F4F1EA;
  --silk:#FAF8F4;
  --stone:#E1D9CC;
  --gold-deep:#A8895F;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --pad:clamp(1.35rem,5.2vw,7rem);
  --ticker-h:36px;
  --nav-h:76px;

  --fs-display:clamp(2.9rem,7.4vw,7.2rem);
  --fs-h2:clamp(2.1rem,4.6vw,4.15rem);
  --fs-h3:clamp(1.3rem,1.9vw,1.75rem);
  --fs-lead:clamp(.98rem,1.18vw,1.16rem);
  --fs-body:clamp(.9rem,1vw,.97rem);
  --fs-micro:clamp(.6rem,.72vw,.7rem);
}

/* ---------- Tone map ----------
   Two token sets, each declared once. Custom properties inherit, so whatever takes a set renders in that
   tone with no per-component theme rules. Colour every new rule with these tokens, never a literal.
   --fg-rgb is the tone's ink as r,g,b, so rgba(var(--fg-rgb),.56) keeps every alpha step.
   Gold: --gold fills and rules, --gold-text text (AA on every surface), --gold-display the italic headline
   word (large text only), --gold-quiet a resting accent that lights up to --gold-text. */
/* Dark: the page in dark mode, the islands that stay dark in both themes (footage, cards, the Index
   stage, the split photograph, the loader, the WhatsApp pill, the dock), and light mode's dark band and strip */
:root,.nav,.hero,.loader,.card,.index__stage,.split__media,.wa,.dock,
[data-theme=light] .why,[data-theme=light] .foot__bar{
  --fg-rgb:255,255,255;
  --text:rgba(255,255,255,.72);
  --text-dim:rgba(255,255,255,.56);
  --bg:#0E1013;
  --bg-alt:#12151A;
  --bg-menu:#0A0C0F;
  --bg-foot:#08090B;
  --bg-deep:#0B0D10;
  --band:#0E1013;
  --glass:rgba(12,14,18,.72);
  --panel:rgba(10,12,15,.42);
  --raised:rgba(255,255,255,.035);
  --raised-2:rgba(255,255,255,.055);
  --option-bg:#14171C;
  --gold:#C5A880;
  --gold-text:#C5A880;
  --gold-display:#C5A880;
  --gold-quiet:#A8895F;
  --gold-pale:#E4D3B4;
  --hair:rgba(255,255,255,.10);
  --hair-gold:rgba(197,168,128,.26);
  --ring:1px;
  --error:#D98A7C;
  color:rgb(var(--fg-rgb));
  color-scheme:dark;
}
/* Light: the page in light mode, the bands that stay light in both (the Standard and Partners bands),
   and the nav once it is stuck or the menu is open */
[data-theme=light],.why,.partners,[data-theme=light] .nav.is-stuck,[data-theme=light] .menu-open .nav{
  --fg-rgb:14,16,19;
  --text:#44474C;
  --text-dim:#62666C;
  --bg:#F8F6F2;
  --bg-alt:#EFE9DD;
  --bg-menu:#F8F6F2;
  --bg-foot:#EFE9DD;
  --bg-deep:#FFFDF9;
  --band:#F4F1EA;
  --glass:rgba(255,253,249,.82);
  --panel:#FFFDF9;
  --raised:#FFFDF9;
  --raised-2:#FFFFFF;
  --option-bg:#FFFDF9;
  --gold:#B89347;
  --gold-text:#7E6033;
  --gold-display:#A07D45;
  --gold-quiet:#7E6033;
  --gold-pale:#D4BC8A;
  --hair:rgba(14,16,19,.12);
  --hair-gold:rgba(184,147,71,.4);
  --ring:2px;
  --error:#A3392C;
  color:rgb(var(--fg-rgb));
  color-scheme:light;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--bg);
  color:rgb(var(--fg-rgb));
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}

img,video,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}

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

:focus-visible{outline:var(--ring) solid var(--gold-text);outline-offset:4px;border-radius:1px}

/* ---------- Typography primitives ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-.012em}
.display{font-size:var(--fs-display)}
.h2{font-size:var(--fs-h2);line-height:1.06}
.h3{font-size:var(--fs-h3);line-height:1.22;letter-spacing:.002em}
em,.it{font-style:italic;font-weight:300}
.gold{color:var(--gold-display)}

.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-micro);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.34em;
  color:var(--gold-text);
  display:flex;
  align-items:center;
  gap:.9em;
  line-height:1.5;
}
.eyebrow::before{
  content:"";width:clamp(18px,2.4vw,42px);height:1px;background:currentColor;opacity:.6;flex:none;
}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-center::after{content:"";width:clamp(18px,2.4vw,42px);height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow.is-bare::before{display:none}

.lead{font-size:var(--fs-lead);color:var(--text);font-weight:300;line-height:1.78}
.body{font-size:var(--fs-body);color:var(--text);line-height:1.8}

.rule{height:1px;background:var(--hair-gold);border:0}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  padding:1.05em 2.2em;
  font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  border:1px solid transparent;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease),background-color .5s var(--ease);
  white-space:nowrap;
}
.btn span{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  transform:translateY(101%);transition:transform .58s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}

.btn--gold{background:var(--gold);color:#14161A;font-weight:600}
.btn--gold::after{background:var(--gold-pale)}

.btn--ghost{border-color:rgba(var(--fg-rgb),.34);color:rgb(var(--fg-rgb))}
.btn--ghost::after{background:rgb(var(--fg-rgb))}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--bg);border-color:rgb(var(--fg-rgb))}

.btn--dark{border-color:rgba(14,16,19,.25);color:var(--obsidian)}
.btn--dark::after{background:var(--obsidian)}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--bone);border-color:var(--obsidian)}

.btn--sm{padding:.82em 1.5em;font-size:.63rem;letter-spacing:.18em}

.link-arrow{
  display:inline-flex;align-items:center;gap:.75em;
  font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:rgb(var(--fg-rgb));
  padding-bottom:.45em;border-bottom:1px solid rgba(var(--fg-rgb),.26);
  transition:border-color .45s var(--ease),color .45s var(--ease),gap .45s var(--ease);
}
.link-arrow svg{width:16px;height:9px;transition:transform .5s var(--ease-out)}
.link-arrow:hover,.link-arrow:focus-visible{color:var(--gold-text);border-color:var(--gold-text);gap:1.1em}
.link-arrow:hover svg,.link-arrow:focus-visible svg{transform:translateX(4px)}

/* ---------- Layout ---------- */
.section{padding:clamp(5rem,8.5vw,10.5rem) var(--pad);position:relative}
.section--dark{background:var(--bg)}
.section--slate{background:var(--bg-alt)}
.wrap{max-width:1560px;margin-inline:auto;width:100%}
.wrap--narrow{max-width:1180px}

/* Sized in rem, not ch: ch resolves against the container's UI font and
   collapses these display headings to roughly half the width they need. */
.sec-head{display:flex;flex-direction:column;gap:clamp(1rem,1.6vw,1.6rem);max-width:min(100%,48rem)}
.sec-head .lead{max-width:46ch}
.sec-head.is-center{align-items:center;text-align:center;margin-inline:auto}
.sec-head.is-center .lead{margin-inline:auto}

/* ---------- Crest (alpha-masked, recolourable) ---------- */
.crest{
  flex:none;
  background-color:var(--gold-display);
  -webkit-mask:url('../images/Logo-02-200x166.png') center/contain no-repeat;
  mask:url('../images/Logo-02-200x166.png') center/contain no-repeat;
  transition:background-color .5s var(--ease);
}

/* ============================================================
   GRAIN, VIGNETTE, PROGRESS
   ============================================================ */
.grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:9000}
.grain{
  opacity:.036;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
.vignette{
  z-index:8999;opacity:.5;
  background:radial-gradient(130% 100% at 50% 42%,transparent 44%,rgba(0,0,0,.42) 100%);
}
body.on-light-view .vignette{opacity:0;transition:opacity .8s var(--ease)}

.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9500;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-quiet),var(--gold-pale));
}

/* ============================================================
   PRELOADER: "the arrival". The logo in three parts (masks cut from Logo-01): the crest rises and a
   light crosses it, the wordmark draws in, the subline and the tagline follow. preload() holds it about
   2s from its first frame, then the crest glides into the nav's while the splash wipes up (View
   Transitions, under SPEED & NAVIGATION); elsewhere the curtain lifts
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:9999;background:#08090B;
  display:grid;place-items:center;
  transition:opacity .5s var(--ease);
}
.loader__bloom{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(38% 44% at 50% 46%,rgba(197,168,128,.18),rgba(197,168,128,0) 72%);
  animation:loaderBloom 1.8s var(--ease-out) forwards;
}
@keyframes loaderBloom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* The bloom and the lockup sit above the curtain (z-index 1); every gap is a % of the width, so the
   logo's own spacing holds at any size */
.loader__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(380px,72vw)}
.loader__crest,.loader__word,.loader__sub{display:block;background-color:var(--gold)}
.loader__crest{
  width:61.7%;aspect-ratio:1053/874;margin-bottom:5.33%;
  -webkit-mask:url('../images/splash-crest.webp') center/contain no-repeat;
  mask:url('../images/splash-crest.webp') center/contain no-repeat;
  /* The gilding: a light in the crest's own fill, parked off one edge, crosses it once */
  background-image:linear-gradient(105deg,var(--gold) 40%,#F6E9CC 50%,var(--gold) 60%);
  background-size:250% 100%;background-position:100% 0;background-repeat:no-repeat;
  opacity:0;transform:translateY(14px) scale(.97);
  animation:loaderIn 1.1s var(--ease-out) .1s forwards,loaderGild 1.3s var(--ease-io) .6s forwards;
}
@keyframes loaderIn{to{opacity:1;transform:none}}
@keyframes loaderGild{to{background-position:0 0}}
.loader__word{
  width:100%;aspect-ratio:1707/175;margin-bottom:4.57%;
  -webkit-mask:url('../images/splash-wordmark.webp') center/contain no-repeat;
  mask:url('../images/splash-wordmark.webp') center/contain no-repeat;
  clip-path:inset(0 100% 0 0);
  animation:loaderDraw 1s var(--ease-io) .55s forwards;
}
@keyframes loaderDraw{to{clip-path:inset(0 0 0 0)}}
.loader__sub{
  width:63.1%;aspect-ratio:1077/62;
  -webkit-mask:url('../images/splash-sub.webp') center/contain no-repeat;
  mask:url('../images/splash-sub.webp') center/contain no-repeat;
  opacity:0;transform:translateY(8px);
  animation:loaderUp .9s var(--ease-out) .95s forwards;
}
.loader__tag{
  margin-top:9%;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1rem,.9rem + .4vw,1.2rem);letter-spacing:.01em;color:var(--gold-text);text-align:center;
  opacity:0;transform:translateY(8px);
  animation:loaderUp .9s var(--ease-out) 1.15s forwards;
}
@keyframes loaderUp{to{opacity:1;transform:none}}
/* An honest timer: preload() fills it over the hold and completes it on the way out */
.loader__track{width:38%;height:1px;margin-top:8%;background:rgba(197,168,128,.16);overflow:hidden}
.loader__bar{height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
/* Under reduced motion the lockup is simply there (durations are already near zero; this drops the delays) */
@media (prefers-reduced-motion:reduce){
  .loader .loader__bloom,.loader .loader__crest,.loader .loader__word,.loader .loader__sub,.loader .loader__tag{animation-delay:0s}
}
/* The exit without View Transitions: the lockup fades, the loader's own field clears, the curtain lifts.
   (The curtain is behind .loader__inner: positioned and later in the source, it used to cover the logo.) */
.loader__curtain{position:absolute;inset:0;background:#08090B;transform-origin:50% 0}
.loader.is-done{pointer-events:none;background-color:transparent}
.loader.is-done .loader__inner,.loader.is-done .loader__bloom{opacity:0;transition:opacity .35s var(--ease)}
.loader.is-done .loader__curtain{transform:scaleY(0);transition:transform 1s var(--ease-out) .15s}

/* ============================================================
   TICKER + NAV
   ============================================================ */
.ticker{
  height:var(--ticker-h);background:#08090B;
  display:flex;align-items:center;justify-content:center;gap:1.1em;
  padding:0 1rem;position:relative;z-index:60;
  border-bottom:1px solid rgba(197,168,128,.13);
}
.ticker p{
  font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.3em;
  color:rgba(197,168,128,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ticker .dot{color:var(--gold-deep);opacity:.75}
.ticker .t-short{display:none}

.nav{
  position:fixed;top:var(--ticker-h);left:0;width:100%;z-index:1000;
  height:var(--nav-h);padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  transition:top .55s var(--ease),height .55s var(--ease),background-color .55s var(--ease),
             backdrop-filter .55s var(--ease),border-color .55s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  top:0;height:64px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--hair-gold);
}
.brand{display:flex;align-items:center;gap:.85rem}
.brand .crest{width:34px;height:28px;transition:width .5s var(--ease),height .5s var(--ease)}
.nav.is-stuck .brand .crest{width:29px;height:24px}
.brand__type{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--serif);font-size:1.16rem;letter-spacing:.17em;text-transform:uppercase;color:rgb(var(--fg-rgb))}
.brand__sub{font-size:.42rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-text);margin-top:.42em}

.nav__links{display:flex;align-items:center;gap:clamp(1.3rem,2.3vw,2.6rem)}
.nav__links a{
  position:relative;font-size:.66rem;font-weight:400;text-transform:uppercase;letter-spacing:.2em;
  color:rgba(var(--fg-rgb),.78);padding:.3em 0;transition:color .4s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .48s var(--ease-out);
}
.nav__links a:hover,.nav__links a:focus-visible{color:rgb(var(--fg-rgb))}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

.nav__cta{display:flex;align-items:center;gap:1rem}

.burger{
  display:none;width:44px;height:44px;margin-right:-10px;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
}
.burger span{display:block;width:22px;height:1px;background:rgb(var(--fg-rgb));transition:transform .45s var(--ease),opacity .3s var(--ease)}
body.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

/* Mobile overlay menu */
.menu{
  position:fixed;inset:0;z-index:990;background:var(--bg-menu);
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:calc(var(--nav-h) + 3rem) var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .8s var(--ease-out),visibility 0s linear .8s;
}
body.menu-open .menu{
  clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .8s var(--ease-out),visibility 0s linear 0s;
}
.menu a.menu__link{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--serif);font-size:clamp(2rem,9vw,3.2rem);color:rgb(var(--fg-rgb));
  padding:.42em 0;border-bottom:1px solid var(--hair);
  opacity:0;transform:translateY(24px);
}
body.menu-open .menu a.menu__link{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-out) calc(.18s + var(--i) * .07s),transform .6s var(--ease-out) calc(.18s + var(--i) * .07s);
}
.menu__num{font-family:var(--sans);font-size:.55rem;letter-spacing:.24em;color:var(--gold-text)}
.menu__foot{margin-top:2.6rem;display:flex;flex-direction:column;gap:1rem;opacity:0;transition:opacity .5s var(--ease) .55s}
body.menu-open .menu__foot{opacity:1}
.menu__foot .body{font-size:.8rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;height:calc(100svh - var(--ticker-h));min-height:600px;
  display:flex;align-items:flex-end;
  padding:0 var(--pad) clamp(2.6rem,6vh,4.6rem);
  overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0A0C0F}
.hero__media video{
  width:100%;height:100%;object-fit:cover;object-position:52% 50%;
  filter:saturate(.88) contrast(1.06) brightness(.72);
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{from{transform:scale(1.05)}to{transform:scale(1.13)}}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,9,11,.72) 0%,rgba(8,9,11,.14) 26%,rgba(8,9,11,.22) 52%,rgba(8,9,11,.88) 100%),
    linear-gradient(100deg,rgba(8,9,11,.66) 0%,rgba(8,9,11,.10) 58%,transparent 100%);
}

.hero__content{width:100%;max-width:1560px;margin-inline:auto}
.hero__inner{max-width:min(940px,92%)}
.hero .eyebrow{margin-bottom:clamp(1.1rem,2.2vh,1.9rem)}
.hero h1{margin-bottom:clamp(1.1rem,2.4vh,1.9rem);letter-spacing:-.022em}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .w > span{
  display:inline-block;transform:translateY(104%);
  transition:transform 1.15s var(--ease-out) calc(var(--i) * .075s);
}
body.is-ready .hero h1 .w > span{transform:translateY(0)}
.hero__sub{max-width:52ch;color:rgba(var(--fg-rgb),.8)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.9rem,1.6vw,1.6rem);margin-top:clamp(1.8rem,3.4vh,2.9rem)}

.hero__fade{opacity:0;transform:translateY(22px)}
body.is-ready .hero__fade{opacity:1;transform:none;transition:opacity 1s var(--ease-out) var(--d,.5s),transform 1s var(--ease-out) var(--d,.5s)}

.hero__meta{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(1rem,2.2vh,1.6rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;pointer-events:none;
}
.hero__coords{
  font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4);
  display:flex;align-items:center;gap:.8em;
}
.hero__coords b{color:var(--gold-text);font-weight:500}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.9em}
.scroll-cue span{font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(var(--fg-rgb),.42)}
.scroll-cue i{display:block;width:1px;height:52px;background:rgba(var(--fg-rgb),.18);position:relative;overflow:hidden}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  animation:cue 2.3s var(--ease-io) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   RIBBON MARQUEE
   ============================================================ */
.ribbon{
  border-block:1px solid var(--hair-gold);background:var(--bg-deep);
  overflow:hidden;padding:1.05rem 0;position:relative;
}
.ribbon::before,.ribbon::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(50px,9vw,170px);z-index:2;pointer-events:none;
}
.ribbon::before{left:0;background:linear-gradient(90deg,var(--bg-deep),transparent)}
.ribbon::after{right:0;background:linear-gradient(270deg,var(--bg-deep),transparent)}
.marquee{display:flex;width:max-content;will-change:transform}
.marquee__group{
  display:flex;align-items:center;gap:clamp(1.6rem,3vw,3.2rem);padding-right:clamp(1.6rem,3vw,3.2rem);
  animation:slide 46s linear infinite;
}
.ribbon .marquee__group span{
  font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:rgba(var(--fg-rgb),.55);
  white-space:nowrap;
}
.ribbon .marquee__group i{
  width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex:none;opacity:.85;
}
@keyframes slide{to{transform:translateX(-100%)}}
.ribbon:hover .marquee__group{animation-play-state:paused}

/* ============================================================
   SERVICES
   ============================================================ */
.services__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(1.6rem,4vw,5rem);
  flex-wrap:wrap;margin-bottom:clamp(2.6rem,5vw,4.4rem);
}
.services__head .sec-head{max-width:min(100%,40rem)}
.services__note{max-width:38ch;font-size:var(--fs-body);color:var(--text-dim);padding-bottom:.4em}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.4vw,1.5rem)}
.card{
  position:relative;display:block;aspect-ratio:4/5.05;overflow:hidden;background:#0A0C0F;
  isolation:isolate;
}
.card__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.card__media video,.card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) brightness(.82);
  transform:scale(1.02);
  transition:transform 1.25s var(--ease-out),filter .8s var(--ease);
}
.card:hover .card__media video,.card:focus-visible .card__media video{transform:scale(1.09);filter:saturate(1) brightness(.9)}
.card__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,12,15,.5) 0%,rgba(10,12,15,.08) 34%,rgba(10,12,15,.72) 72%,rgba(10,12,15,.96) 100%);
  transition:opacity .7s var(--ease);
}
.card__edge{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid rgba(var(--fg-rgb),.07);
  transition:border-color .6s var(--ease);
}
.card:hover .card__edge{border-color:var(--hair-gold)}
.card__edge::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-out);
}
.card:hover .card__edge::before,.card:focus-visible .card__edge::before{transform:scaleX(1)}

.card__num{
  position:absolute;top:clamp(1.1rem,1.7vw,1.7rem);left:clamp(1.1rem,1.7vw,1.7rem);z-index:4;
  font-size:.58rem;letter-spacing:.26em;color:var(--gold-text);font-weight:500;
}
.card__body{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(1.3rem,2vw,2.1rem);
  display:flex;flex-direction:column;gap:.85rem;
}
.card__body h3{
  font-family:var(--sans);font-size:clamp(.78rem,.95vw,.88rem);font-weight:500;
  text-transform:uppercase;letter-spacing:.17em;line-height:1.45;color:rgb(var(--fg-rgb));
}
.card__body p{
  font-size:.83rem;line-height:1.72;color:rgba(var(--fg-rgb),.62);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .75s var(--ease-out),opacity .5s var(--ease),margin .75s var(--ease-out);
}
.card:hover .card__body p,.card:focus-visible .card__body p{max-height:9rem;opacity:1}
.card__go{
  display:flex;align-items:center;gap:.7em;
  font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-text);
  opacity:0;transform:translateX(-10px);
  transition:opacity .55s var(--ease) .06s,transform .55s var(--ease-out) .06s;
}
.card__go svg{width:18px;height:9px}
.card:hover .card__go,.card:focus-visible .card__go{opacity:1;transform:none}

/* ============================================================
   CAPE TOWN INDEX
   ============================================================ */
.index{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,4.5vw,5.5rem);align-items:center;margin-top:clamp(2.4rem,4.5vw,4rem)}
.index__list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.index__row{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2vw,2rem);
  align-items:baseline;width:100%;text-align:left;cursor:pointer;
  padding:clamp(1.15rem,2.1vw,1.9rem) 0;
  border-bottom:1px solid var(--hair);
  transition:border-color .5s var(--ease);
}
.index__row::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .75s var(--ease-out);
}
.index__row.is-active::before{transform:scaleX(1)}
.index__n{
  font-size:.58rem;letter-spacing:.24em;font-weight:500;color:var(--text-dim);
  transition:color .5s var(--ease);padding-top:.55em;
}
.index__row.is-active .index__n{color:var(--gold-text)}
.index__t{
  font-family:var(--serif);font-size:clamp(1.35rem,2.5vw,2.35rem);line-height:1.16;
  color:rgba(var(--fg-rgb),.52);transition:color .5s var(--ease),transform .6s var(--ease-out);
  display:block;
}
.index__row.is-active .index__t{color:rgb(var(--fg-rgb));transform:translateX(clamp(4px,.7vw,12px))}
.index__d{
  display:block;font-size:.82rem;line-height:1.7;color:var(--text-dim);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .7s var(--ease-out),opacity .45s var(--ease),margin-top .7s var(--ease-out);
}
.index__row.is-active .index__d{max-height:7rem;opacity:1;margin-top:.7rem}

.index__stage{position:relative;aspect-ratio:4/3.3;overflow:hidden;background:#0A0C0F;border:1px solid var(--hair)}
.index__stage video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.04) brightness(.86);
  transform:scale(1.03);
}
.index__stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,15,.28),transparent 34%,transparent 62%,rgba(10,12,15,.6));
}
.index__tag{
  position:absolute;left:clamp(1rem,1.6vw,1.7rem);bottom:clamp(1rem,1.6vw,1.7rem);z-index:3;
  display:flex;align-items:center;gap:.8em;
  font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:#fff;
  background:rgba(10,12,15,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--hair-gold);padding:.75em 1.15em;
}
.index__tag i{width:4px;height:4px;background:var(--gold);transform:rotate(45deg);flex:none}
.index__ticks{position:absolute;top:clamp(1rem,1.6vw,1.7rem);right:clamp(1rem,1.6vw,1.7rem);z-index:3;display:flex;gap:6px}
.index__ticks b{display:block;width:16px;height:2px;background:rgba(var(--fg-rgb),.26);transition:background-color .5s var(--ease)}
.index__ticks b.on{background:var(--gold)}

/* ============================================================
   CONCIERGE SPLIT
   ============================================================ */
.split{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2rem,5vw,6.5rem);align-items:center}
.split__media{position:relative;aspect-ratio:3/4.05;overflow:hidden;background:#0A0C0F}
.split__media img{
  width:100%;height:118%;object-fit:cover;object-position:center 30%;
  position:absolute;top:-9%;left:0;will-change:transform;
  filter:saturate(.92) contrast(1.04) brightness(.88);
}
.split__frame{position:absolute;inset:clamp(10px,1.2vw,18px);border:1px solid rgba(var(--fg-rgb),.18);pointer-events:none;z-index:2}
.split__cap{
  position:absolute;right:clamp(-10px,-.8vw,0px);bottom:clamp(1.4rem,3vw,3rem);z-index:3;
  background:var(--obsidian);border:1px solid var(--hair-gold);
  padding:clamp(1rem,1.5vw,1.4rem) clamp(1.1rem,1.8vw,1.7rem);max-width:min(74%,300px);
}
.split__cap p{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.36;color:rgb(var(--fg-rgb))}
.split__cap small{display:block;margin-top:.7rem;font-size:.53rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-text)}

.acc{margin-top:clamp(1.8rem,3vw,2.8rem);border-top:1px solid var(--hair)}
.acc__item{border-bottom:1px solid var(--hair)}
.acc__btn{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.9rem,1.8vw,1.8rem);
  padding:clamp(1rem,1.7vw,1.5rem) 0;text-align:left;
}
.acc__n{font-size:.58rem;letter-spacing:.24em;font-weight:500;color:var(--gold-text);transition:color .45s var(--ease)}
.acc__label{
  font-family:var(--serif);font-size:clamp(1.05rem,1.55vw,1.42rem);line-height:1.26;
  color:rgba(var(--fg-rgb),.76);transition:color .45s var(--ease);
}
.acc__item.is-open .acc__label{color:rgb(var(--fg-rgb))}
.acc__btn:hover .acc__label{color:rgb(var(--fg-rgb))}
.acc__ico{position:relative;width:13px;height:13px;flex:none}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;background:var(--gold-text);transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.acc__ico::before{top:6px;left:0;width:13px;height:1px}
.acc__ico::after{left:6px;top:0;width:1px;height:13px}
.acc__item.is-open .acc__ico::after{transform:scaleY(0);opacity:0}
.acc__panel{overflow:hidden;height:0;transition:height .6s var(--ease-out)}
.acc__panel p{padding:0 0 1.4rem;max-width:56ch;font-size:.87rem;line-height:1.8;color:var(--text-dim)}

/* ============================================================
   WHY — light band
   ============================================================ */
.why{background:var(--band);position:relative;overflow:hidden}
.why__tex{
  position:absolute;inset:0;z-index:0;opacity:.3;
  background:url('../images/5968944-scaled.jpg.webp') center/cover no-repeat;
  mix-blend-mode:multiply;
}
/* white is a no-op under multiply, so this fades the texture out at the edges */
.why__tex::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 76%,#fff)}
.why > .wrap{position:relative;z-index:1}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(2.8rem,5vw,4.6rem);border-top:1px solid var(--hair)}
.pillar{padding:clamp(2rem,3vw,3rem) clamp(1.1rem,2vw,2.2rem);position:relative}
.pillar + .pillar::before{content:"";position:absolute;left:0;top:clamp(2rem,3vw,3rem);bottom:clamp(2rem,3vw,3rem);width:1px;background:var(--hair)}
.pillar__num{
  font-family:var(--serif);font-size:clamp(2rem,3.2vw,3rem);line-height:1;color:var(--gold-display);
  letter-spacing:.04em;margin-bottom:clamp(1rem,1.8vw,1.6rem);display:block;
}
.pillar h3{font-family:var(--sans);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;line-height:1.5;color:rgb(var(--fg-rgb));margin-bottom:.85rem}
.pillar p{font-size:.86rem;line-height:1.78;color:var(--text-dim)}

/* ============================================================
   PARTNERS — light band
   ============================================================ */
.partners{background:var(--silk);border-top:1px solid var(--hair);padding-block:clamp(3.4rem,7vh,5.6rem)}
.partners .eyebrow{justify-content:center}
.partners__copy{
  max-width:64ch;margin:1.6rem auto 0;text-align:center;
  font-family:var(--serif);font-size:clamp(1.15rem,1.85vw,1.65rem);line-height:1.42;color:#23262B;
}
.partners__strip{margin-top:clamp(2.2rem,4vw,3.4rem);overflow:hidden;position:relative}
.partners__strip::before,.partners__strip::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,150px);z-index:2;pointer-events:none;
}
.partners__strip::before{left:0;background:linear-gradient(90deg,var(--silk),transparent)}
.partners__strip::after{right:0;background:linear-gradient(270deg,var(--silk),transparent)}
.partners__strip .marquee__group{gap:clamp(2rem,5vw,5.5rem);padding-right:clamp(2rem,5vw,5.5rem);animation-duration:42s}
.partners__strip img{
  height:clamp(54px,6vw,80px);width:auto;object-fit:contain;flex:none;
  filter:grayscale(1) opacity(.58);
  transition:filter .55s var(--ease),transform .55s var(--ease);
}
.partners__strip img:hover{filter:grayscale(0) opacity(1);transform:scale(1.04)}
.partners__strip:hover .marquee__group{animation-play-state:paused}
.partners__foot{margin-top:clamp(1.8rem,3vw,2.6rem);text-align:center;font-size:.82rem;color:var(--text-dim);max-width:62ch;margin-inline:auto}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:var(--bg);position:relative;overflow:hidden}
.reviews__glow{
  position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1500px,150%);height:62%;
  background:url('../images/luxury-lane-black-gradient-header.jpg.webp') center/cover no-repeat;
  opacity:.85;z-index:0;
}
.reviews__glow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--bg))}
.reviews > .wrap{position:relative;z-index:1}

.gbadge{
  display:inline-flex;align-items:center;gap:1.05rem;margin-inline:auto;
  background:var(--raised-2);border:1px solid var(--hair-gold);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:.95rem 1.5rem;
}
.gbadge__g{width:34px;height:34px;flex:none}
.gbadge__meta{display:flex;flex-direction:column;gap:.34rem;line-height:1}
.gbadge__stars{display:flex;align-items:center;gap:.28rem}
.gbadge__stars img{width:14px;height:14px}
.gbadge__stars b{font-size:.82rem;font-weight:600;margin-left:.4rem;color:rgb(var(--fg-rgb))}
.gbadge__label{font-size:.7rem;font-weight:500;color:rgba(var(--fg-rgb),.88);letter-spacing:.03em}
.gbadge__verify{display:flex;align-items:center;gap:.4rem;font-size:.56rem;letter-spacing:.1em;color:var(--text-dim)}
.gbadge__verify img{width:9px;height:9px;filter:invert(1);opacity:.5}

.quotes{position:relative;margin-top:clamp(2.6rem,5vw,4.2rem)}
.quotes__viewport{overflow:hidden}
.quotes__track{display:flex;transition:transform .85s var(--ease-out)}
.quote{flex:0 0 33.3333%;padding:0 clamp(.5rem,.9vw,1rem);box-sizing:border-box}
.quote__inner{
  height:100%;background:var(--raised);border:1px solid var(--hair);
  padding:clamp(1.7rem,2.6vw,2.6rem);display:flex;flex-direction:column;gap:1.5rem;
  transition:border-color .55s var(--ease),background-color .55s var(--ease);
}
.quote__inner:hover{border-color:var(--hair-gold);background:var(--raised-2)}
.quote__mark{font-family:var(--serif);font-size:3.2rem;line-height:.6;color:var(--gold);opacity:.55;height:.5em}
.quote__text{font-family:var(--serif);font-size:clamp(1.02rem,1.4vw,1.28rem);line-height:1.58;color:rgba(var(--fg-rgb),.9);flex:1}
.quote__by{display:flex;flex-direction:column;gap:.35rem;padding-top:1.2rem;border-top:1px solid var(--hair)}
.quote__by b{font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:rgb(var(--fg-rgb))}
.quote__by small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}

.quotes__nav{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
.quotes__dots{display:flex;gap:.55rem}
.quotes__dots button{position:relative;width:26px;height:24px}
.quotes__dots button::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(var(--fg-rgb),.2);transition:background-color .45s var(--ease)}
.quotes__dots button[aria-current="true"]::before{background:var(--gold)}
.qarrow{
  width:42px;height:42px;border:1px solid var(--hair);display:grid;place-items:center;
  transition:border-color .45s var(--ease),background-color .45s var(--ease);
}
.qarrow svg{width:16px;height:9px;stroke:rgb(var(--fg-rgb))}
.qarrow:hover{border-color:var(--gold);background:rgba(197,168,128,.1)}

/* ============================================================
   ENQUIRE
   ============================================================ */
.enquire{position:relative;background:var(--bg-alt);overflow:hidden}
.enquire__glow{
  position:absolute;inset:0;z-index:0;opacity:.8;
  background:url('../images/luxury-lane-black-gradient-header.jpg.webp') center/cover no-repeat;
  -webkit-mask:radial-gradient(80% 72% at 50% 46%,#000 26%,transparent 100%);
  mask:radial-gradient(80% 72% at 50% 46%,#000 26%,transparent 100%);
}
.enquire > .wrap{position:relative;z-index:1}
.enquire__box{border:1px solid var(--hair-gold);padding:clamp(2rem,4.5vw,4.6rem);background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.enquire__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4.5vw,5rem);align-items:center}

.form{display:flex;flex-direction:column;gap:clamp(1.2rem,2vw,1.7rem)}
.field{position:relative;display:flex;flex-direction:column;gap:.55rem}
.field label{font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}
.field input,.field select{
  width:100%;padding:.9rem 0;font-size:.95rem;font-weight:300;color:rgb(var(--fg-rgb));
  border-bottom:1px solid var(--hair);transition:border-color .45s var(--ease);
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C5A880' stroke-width='1.2'/%3E%3C/svg%3E") right .4rem center/11px 7px no-repeat;padding-right:1.8rem;cursor:pointer}
.field select option{background:var(--option-bg);color:rgb(var(--fg-rgb))}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field input:focus,.field select:focus{border-bottom-color:var(--gold)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2vw,1.7rem)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:.5rem}
.form__note{font-size:.66rem;color:var(--text-dim);letter-spacing:.04em}
.form__ok{
  display:none;align-items:flex-start;gap:1rem;border:1px solid var(--hair-gold);
  padding:clamp(1.4rem,2.4vw,2rem);background:rgba(197,168,128,.07);
}
.form__ok.is-on{display:flex;animation:okIn .7s var(--ease-out)}
@keyframes okIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.form__ok .crest{width:30px;height:25px}
.form__ok p{font-family:var(--serif);font-size:1.18rem;line-height:1.45;color:rgb(var(--fg-rgb))}
.form__ok small{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.72rem;color:var(--text-dim);line-height:1.7}

.enquire__aside{display:flex;flex-direction:column;gap:clamp(1.4rem,2.4vw,2rem)}
.enquire__contacts{display:flex;flex-direction:column;gap:.9rem;margin-top:.6rem}
.enquire__contacts a,.enquire__contacts span{
  display:flex;align-items:center;gap:.9rem;font-size:.85rem;color:var(--text);
  transition:color .4s var(--ease);
}
.enquire__contacts a:hover{color:var(--gold-text)}
.enquire__contacts svg{width:14px;height:14px;flex:none;stroke:var(--gold);fill:none}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--bg-foot);border-top:1px solid var(--hair-gold);padding:clamp(3.4rem,7vh,6rem) var(--pad) 0}
.foot__grid{display:grid;grid-template-columns:1.55fr 1fr 1.1fr 1.25fr;gap:clamp(2rem,4vw,4.5rem);padding-bottom:clamp(2.6rem,5vh,4rem)}
.foot__mark{width:clamp(150px,13vw,196px);margin-bottom:1.6rem;opacity:.95}
.foot__about{font-size:.83rem;line-height:1.86;color:var(--text-dim);max-width:42ch}
.foot__tag{margin-top:1.4rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--gold-text)}
.foot h5{font-family:var(--sans);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:rgb(var(--fg-rgb));margin-bottom:1.5rem}
.foot ul{display:flex;flex-direction:column;gap:.85rem}
.foot ul a,.foot__line{font-size:.83rem;color:var(--text-dim);transition:color .4s var(--ease);display:flex;align-items:center;gap:.8rem}
.foot ul a:hover{color:var(--gold-text)}
.foot__line svg{width:13px;height:13px;flex:none;stroke:var(--gold);fill:none;opacity:.85}
.foot__addr{margin-top:1.3rem;font-size:.8rem;line-height:1.8;color:var(--text-dim)}

.news{display:flex;flex-direction:column;gap:1.1rem}
.news p{font-size:.83rem;line-height:1.8;color:var(--text-dim)}
.news__field{display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--hair);transition:border-color .45s var(--ease)}
.news__field:focus-within{border-bottom-color:var(--gold)}
.news__field input{flex:1;padding:.8rem 0;font-size:.85rem;font-weight:300}
.news__field input::placeholder{color:var(--text-dim)}
.news__field button{padding:.6rem 0;font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--gold-text);transition:opacity .35s var(--ease)}
.news__field button:hover{opacity:.7}
.news__ok{font-size:.7rem;color:var(--gold-text);letter-spacing:.1em;opacity:0;transition:opacity .5s var(--ease)}
.news__ok.is-on{opacity:1}

.foot__bar{
  border-top:1px solid var(--hair);padding:1.6rem 0 1.9rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
}
.foot__bar small{font-size:.66rem;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase}
.socials{display:flex;gap:.7rem}
.socials a{
  width:36px;height:36px;border:1px solid var(--hair);display:grid;place-items:center;
  transition:border-color .45s var(--ease),background-color .45s var(--ease),transform .45s var(--ease);
}
.socials a svg{width:13px;height:13px;fill:rgba(var(--fg-rgb),.62);transition:fill .45s var(--ease)}
.socials a:hover{border-color:var(--gold);background:rgba(197,168,128,.1);transform:translateY(-2px)}
.socials a:hover svg{fill:var(--gold)}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa{
  position:fixed;right:clamp(1rem,2vw,2rem);bottom:clamp(1rem,2vw,2rem);z-index:1200;
  display:flex;align-items:center;gap:0;
  background:rgba(12,14,18,.88);border:1px solid var(--hair-gold);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:.85rem;border-radius:100px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease-out),gap .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
}
.wa.is-on{opacity:1;transform:none;pointer-events:auto}
.wa svg{width:20px;height:20px;fill:var(--gold);flex:none;transition:fill .45s var(--ease)}
.wa span{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:rgb(var(--fg-rgb));
  transition:max-width .6s var(--ease-out),opacity .4s var(--ease);opacity:0;
}
.wa:hover,.wa:focus-visible{gap:.85rem;padding:.85rem 1.35rem .85rem .95rem;border-color:var(--gold)}
.wa:hover span,.wa:focus-visible span{max-width:230px;opacity:1}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cur,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9600;border-radius:50%;opacity:0}
.cur{width:5px;height:5px;background:var(--gold);margin:-2.5px 0 0 -2.5px;transition:opacity .3s}
.cur-ring{
  width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(197,168,128,.5);
  display:grid;place-items:center;
  transition:opacity .3s,width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out),background-color .4s var(--ease),border-color .4s var(--ease);
}
.cur-ring i{
  font-style:normal;font-size:.5rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--obsidian);opacity:0;transition:opacity .3s var(--ease);
}
body.cursor-on{cursor:none}
body.cursor-on input,body.cursor-on select,body.cursor-on textarea{cursor:auto}
body.cursor-on .cur,body.cursor-on .cur-ring{opacity:1}
body.cursor-lg .cur-ring{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--gold);border-color:var(--gold)}
body.cursor-lg .cur-ring i{opacity:1}
body.cursor-lg .cur{opacity:0}

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(30px);will-change:opacity,transform}
[data-reveal="fade"]{transform:none}
[data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
[data-reveal].is-in{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity 1.05s var(--ease-out) var(--d,0s),transform 1.05s var(--ease-out) var(--d,0s),clip-path 1.1s var(--ease-out) var(--d,0s);
}

/* Without JS (the boot script adds .js) nothing would lift the loader or fire a reveal */
html:not(.js) .loader{display:none}
html:not(.js) [data-reveal],html:not(.js) .hero__fade{opacity:1;transform:none;clip-path:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards .card:last-child{grid-column:1/-1;aspect-ratio:16/8.4}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(3)::before{display:none}
  .pillar:nth-child(3),.pillar:nth-child(4){border-top:1px solid var(--hair)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .index{grid-template-columns:1fr;gap:2.2rem}
  .index__stage{order:-1;aspect-ratio:16/10}
  .split{grid-template-columns:1fr;gap:2.4rem}
  .split__media{aspect-ratio:16/11}
  .split__media img{height:126%;top:-13%;object-position:center 38%}
  .enquire__grid{grid-template-columns:1fr;gap:2.4rem}
  .quote{flex:0 0 50%}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta .btn{display:none}
  .burger{display:flex}
  .hero{align-items:center;padding-top:var(--nav-h)}
  .hero__meta{display:none}
  .services__head{flex-direction:column;align-items:flex-start}
  .services__note{padding-bottom:0}
}
@media (max-width:720px){
  :root{--fs-display:clamp(2.6rem,11vw,3.6rem)}
  .cards{grid-template-columns:1fr;gap:1rem}
  .cards .card:last-child{aspect-ratio:4/5.05}
  .card__body p{max-height:9rem;opacity:1}
  .card__go{opacity:1;transform:none}
  .index__d{max-height:7rem;opacity:1;margin-top:.7rem}
  .index__t{color:rgba(var(--fg-rgb),.82)}
  .pillars{grid-template-columns:1fr}
  .pillar + .pillar::before{display:none}
  .pillar{border-bottom:1px solid var(--hair);padding-inline:0}
  .pillar:nth-child(3),.pillar:nth-child(4){border-top:0}
  .quote{flex:0 0 100%}
  .form__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:2.6rem}
  .foot__bar{justify-content:center;text-align:center}
  /* Stays absolute: .split__media clips overflow, so a static caption vanishes. */
  .split__cap{
    left:clamp(12px,3.5vw,20px);right:auto;bottom:clamp(12px,3.5vw,20px);
    max-width:min(88%,330px);background:rgba(12,14,18,.9);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  .wa span{display:none}
}
@media (max-width:620px){
  .ticker .t-full{display:none}
  .ticker .t-short{display:inline}
}
@media (max-width:420px){
  .ticker p{font-size:.48rem;letter-spacing:.2em}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}

@media (hover:none){
  .card__body p{max-height:9rem;opacity:1}
  .card__go{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .hero__media video{animation:none;transform:scale(1.02)}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee__group{animation:none}
}

/* ============================================================
   ABOUT / INNER PAGES
   ============================================================ */
.hero--page{height:clamp(520px,78svh,860px);min-height:0}
.hero--page .hero__inner{max-width:min(860px,92%)}

.nav__links a[aria-current="page"]{color:rgb(var(--fg-rgb))}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.menu a.menu__link[aria-current="page"]{color:var(--gold-text)}

.split__text .body + .body{margin-top:1.1rem}
.split__text .link-arrow{margin-top:clamp(1.8rem,3vw,2.6rem)}

.tenets{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4.5vw,5.5rem);margin-top:clamp(2.6rem,5vw,4.4rem)}
.tenet{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2vw,2rem);align-items:baseline;
  padding:clamp(1.6rem,2.8vw,2.6rem) 0;border-block:1px solid var(--hair);
}
.tenet::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease-out) calc(var(--d,0s) + .25s);
}
.tenet.is-in::before{transform:scaleX(1)}
.tenet__n{font-size:.58rem;letter-spacing:.24em;font-weight:500;color:var(--gold-text);padding-top:.55em}
.tenet__t{display:block;font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.12;color:rgb(var(--fg-rgb))}
.tenet__d{margin-top:clamp(.8rem,1.2vw,1.1rem);max-width:52ch}

.cards--duo{grid-template-columns:repeat(2,1fr);max-width:980px;margin:clamp(2.6rem,5vw,4.4rem) auto 0}
.cards--duo .card,.cards--duo .card:last-child{grid-column:auto;aspect-ratio:4/5}
.cards--duo .card__media img{object-position:center 22%}
.card:hover .card__media img,.card:focus-within .card__media img{transform:scale(1.09);filter:saturate(1) brightness(.9)}
.card__body .card__role{display:block;font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;line-height:1.6;color:var(--gold-text);margin-top:-.35rem}

@media (max-width:1024px){
  .tenets{grid-template-columns:1fr}
  .tenet + .tenet{border-top:0}
}
@media (max-width:720px){
  .cards--duo{grid-template-columns:1fr;max-width:460px}
  .cards--duo .card,.cards--duo .card:last-child{aspect-ratio:4/5}
}

/* ============================================================
   CAR RENTALS
   ============================================================ */
/* A still hero gets the same grade and drift as the video one */
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:52% 50%;
  filter:saturate(.88) contrast(1.06) brightness(.72);
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}

/* Links never wrap: when the nav fills up, flex squeezes the brand onto two lines first (see the breakpoint below) */
.nav__links a{white-space:nowrap}

.fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.8rem,4.4vw,4.4rem) clamp(.9rem,1.4vw,1.5rem)}
.vehicle{display:flex;flex-direction:column}
.vehicle .card{aspect-ratio:4/5}
.vehicle:hover .card__media img,.vehicle:focus-within .card__media img{transform:scale(1.09);filter:saturate(1) brightness(.9)}
.vehicle:hover .card__edge{border-color:var(--hair-gold)}
.vehicle:hover .card__edge::before,.vehicle:focus-within .card__edge::before{transform:scaleX(1)}

.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1rem,1.6vw,1.6rem);margin-top:clamp(.9rem,1.4vw,1.3rem)}
.specs div{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--hair)}
.specs dt{flex:none;font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}
.specs dd{font-size:.82rem;line-height:1.4;color:var(--text);text-align:right}

.vehicle__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:clamp(1.3rem,1.8vw,1.7rem)}
.vehicle__price{font-family:var(--serif);font-size:clamp(1.65rem,2.1vw,2.1rem);font-weight:400;line-height:1;color:rgb(var(--fg-rgb))}
.vehicle__price small{font-family:var(--sans);font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--text-dim);margin-left:.35em}

.fleet__more{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem 1.8rem;
  margin-top:clamp(3.2rem,5.4vw,5rem);padding-top:clamp(2rem,3vw,2.8rem);border-top:1px solid var(--hair-gold);
  text-align:center;font-size:var(--fs-body);color:var(--text);
}

@media (max-width:1024px){
  .fleet{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .fleet{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none;transform:scale(1.02)}
}

/* ============================================================
   CONTACT
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Grows past its height rather than clipping when the copy runs long on a phone */
.hero--short{height:auto;min-height:clamp(440px,60svh,660px);padding-top:calc(var(--nav-h) + 2.5rem)}
.hero--short .hero__media img{object-position:50% 40%}

/* clip, not hidden: hidden makes the section a scroll container and the aside would never stick */
.contact{overflow:clip}
.contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.4rem,5vw,6rem);align-items:start}
.contact__aside{position:sticky;top:var(--stick,100px)}
.contact__note{margin-top:-.5rem;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--gold-text)}
.contact__title{font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.1}
.contact__intro{margin-top:1rem;max-width:58ch}
.contact .form{margin-top:clamp(2rem,3.4vw,3rem);gap:clamp(2.2rem,3.6vw,3rem)}

/* A floated legend leaves the border and becomes the fieldset's first flex item */
.fieldset{display:flex;flex-direction:column;gap:clamp(1.2rem,2vw,1.7rem);min-width:0;margin:0;padding:clamp(1.5rem,2.4vw,2rem) 0 0;border:0;border-top:1px solid var(--hair)}
.fieldset__legend{float:left;width:100%;padding:0;font-family:var(--serif);font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.25;color:rgb(var(--fg-rgb))}
.fieldset__legend b{margin-right:1rem;font-family:var(--sans);font-size:.58rem;font-weight:500;letter-spacing:.24em;color:var(--gold-text)}

.chips{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.chip{display:flex;cursor:pointer}
.chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chip span{
  flex:1;display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--hair);
  font-size:.82rem;line-height:1.4;color:var(--text);
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}
.chip span::before{content:"";flex:none;width:14px;height:14px;border:1px solid rgba(var(--fg-rgb),.3);transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.chip:hover span{border-color:var(--hair-gold);color:rgb(var(--fg-rgb))}
.chip input:checked + span{border-color:var(--gold);background-color:rgba(197,168,128,.1);color:rgb(var(--fg-rgb))}
.chip input:checked + span::before{
  border-color:var(--gold);
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%2314161A' stroke-width='1.6'/%3E%3C/svg%3E") center/9px 8px no-repeat;
}
.chip input:focus-visible + span{outline:var(--ring) solid var(--gold-text);outline-offset:3px}
.chips.is-invalid .chip span{border-color:var(--error)}

.field textarea{
  width:100%;min-height:9.5rem;padding:.9rem 0;font-size:.95rem;font-weight:300;line-height:1.7;color:rgb(var(--fg-rgb));
  border-bottom:1px solid var(--hair);border-radius:0;resize:vertical;transition:border-color .45s var(--ease);
}
.field textarea:focus{border-bottom-color:var(--gold)}
.field__help{font-size:.72rem;line-height:1.75;color:var(--text-dim);max-width:70ch}
.field .is-invalid,.field .is-invalid:focus{border-bottom-color:var(--error)}

.map{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;margin-top:.4rem}
.map__frame{width:100%;aspect-ratio:4/3;border:1px solid var(--hair-gold);overflow:hidden;background:#0A0C0F}
.map__frame iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.85)}

@media (max-width:1024px){
  .contact__grid{grid-template-columns:1fr}
  .contact__aside{position:static}
  .map__frame{aspect-ratio:16/10}
}
@media (max-width:640px){
  .chips{grid-template-columns:1fr}
}

/* ============================================================
   CHAUFFEUR SERVICES
   ============================================================ */
/* .form__row{display:grid} beats the UA's [hidden]{display:none}, so conditional blocks need this */
.form [hidden]{display:none!important}

/* Two-option segmented toggle: hidden radio, hairline label, checked = gold fill */
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;align-self:flex-start;border:1px solid var(--hair-gold)}
.seg label{display:flex;cursor:pointer}
.seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.seg span{
  flex:1;min-width:8.5rem;padding:.9rem 1.6rem;text-align:center;
  font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--text);
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.seg label + label span{border-left:1px solid var(--hair-gold)}
.seg label:hover span{color:rgb(var(--fg-rgb))}
.seg input:checked + span{background:var(--gold);color:var(--obsidian)}
.seg input:focus-visible + span{outline:var(--ring) solid var(--gold-text);outline-offset:3px}
.field .field__label{font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}

/* Radio chips (one choice) get a round marker */
.chip input[type=radio] + span::before{border-radius:50%}
.chip input[type=radio]:checked + span::before{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 0 3px,transparent 3.5px)}

.stops{display:flex;flex-direction:column;gap:clamp(1.2rem,2vw,1.7rem)}
.stops:empty{display:none}
.stop__row{display:flex;align-items:flex-end;gap:1.2rem}
.stop__row input{flex:1;min-width:0}
.stop__rm{
  flex:none;padding:.9rem 0;border-bottom:1px solid var(--hair);
  font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--text-dim);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.stop__rm:hover,.stop__rm:focus-visible{color:var(--gold-text);border-color:var(--gold-text)}
.form__add{
  align-self:flex-start;padding:.35rem 0;border-bottom:1px solid var(--hair-gold);
  font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-text);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.form__add:hover,.form__add:focus-visible{color:var(--gold-pale);border-color:var(--gold)}

.booking__help{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.booking__help .contact__note{margin-top:0}

/* Five Roman pillars: one row, then a centred 3 + 2, then a single column */
.pillars--five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){
  .pillars--five{grid-template-columns:repeat(6,1fr)}
  .pillars--five .pillar{grid-column:span 2}
  .pillars--five .pillar:nth-child(4){grid-column:2/span 2}
  .pillars--five .pillar:nth-child(3)::before{display:block}
  .pillars--five .pillar:nth-child(4)::before{display:none}
  .pillars--five .pillar:nth-child(3){border-top:0}
  .pillars--five .pillar:nth-child(4),.pillars--five .pillar:nth-child(5){border-top:1px solid var(--hair)}
}
@media (max-width:720px){
  .pillars--five{grid-template-columns:1fr}
  .pillars--five .pillar,.pillars--five .pillar:nth-child(4){grid-column:auto}
  .pillars--five .pillar:nth-child(3)::before{display:none}
  .pillars--five .pillar:nth-child(4),.pillars--five .pillar:nth-child(5){border-top:0}
}
@media (max-width:420px){
  .seg{align-self:stretch}
  .seg span{min-width:0;padding-inline:1rem}
}

/* The six links, the theme toggle and the longest button need about 1195px: below 1240px every page swaps the
   links for the burger (the button stays until 860px, the toggle at every width) */
@media (max-width:1239px){
  .nav__links{display:none}
  .burger{display:flex}
}

/* ============================================================
   PRIVATE TOURS
   ============================================================ */
/* The Index as a tour list: an always-visible duration and price, longer descriptions,
   and the booking link under the stage (under the list, hovering down to it would cross the other rows) */
.index__meta{display:block;margin-top:.5rem;font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-quiet);transition:color .5s var(--ease)}
.index__row.is-active .index__meta{color:var(--gold-text)}
.index--tours .index__row.is-active .index__d{max-height:24rem}
.index__side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.4rem,2.2vw,2rem)}
.index__side .index__stage{width:100%}

/* A data-still row fades the stage's photograph in over the paused video */
.index__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 84%;
  filter:saturate(.92) contrast(1.04) brightness(.86);transform:scale(1.03);
  opacity:0;transition:opacity .7s var(--ease);
}
.index__stage.is-still img{opacity:1}

/* Collapsed panels that hold links are hidden once they close, so Tab skips their links */
.acc--links .acc__panel{visibility:hidden;transition:height .6s var(--ease-out),visibility 0s linear .6s}
.acc--links .acc__item.is-open .acc__panel{visibility:visible;transition:height .6s var(--ease-out),visibility 0s}

/* A day-by-day itinerary: gold "Day N", serif title, quiet text, hairline rows */
.days{list-style:none;padding-bottom:.4rem}
.days li{display:grid;grid-template-columns:4.6rem 1fr;gap:.35rem clamp(.9rem,1.6vw,1.6rem);padding:1rem 0;border-top:1px solid var(--hair)}
.days__n{grid-row:span 2;padding-top:.5em;font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}
.days__t{font-family:var(--serif);font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:400;line-height:1.3;color:rgb(var(--fg-rgb))}
.acc__panel .days p{padding:0;max-width:60ch;font-size:.84rem;line-height:1.75}
.acc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;padding:1.2rem 0 1.8rem;border-top:1px solid var(--hair)}
/* .acc__panel p would shrink the price: match its specificity */
.acc__panel .acc__price{padding:0;font-family:var(--serif);font-size:clamp(1.5rem,1.9vw,1.9rem);font-weight:400;line-height:1;color:rgb(var(--fg-rgb))}
.acc__price small{font-family:var(--sans);font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--text-dim);margin-right:.2em}

/* The heading stays beside a long open itinerary */
.multi__head{position:sticky;top:calc(var(--nav-h) + 3rem)}

.pillars__note{max-width:64ch;margin:clamp(2.2rem,3.6vw,3.2rem) auto 0;text-align:center;font-size:.8rem;line-height:1.8;color:var(--text-dim)}

.form__row--3{grid-template-columns:repeat(3,1fr)}
/* Chips captioned inside a .field: undo the .field label micro-label style */
.field .chip{font-size:inherit;font-weight:inherit;text-transform:none;letter-spacing:normal;color:inherit}

@media (max-width:1024px){
  .index--tours .index__side{display:contents}
  .index--tours .index__book{justify-self:start}
  .multi__head{position:static}
}
@media (max-width:720px){
  .index--tours .index__d{max-height:24rem}
  .form__row--3{grid-template-columns:1fr}
}
@media (max-width:420px){
  .days li{grid-template-columns:1fr}
  .days__n{grid-row:auto;padding-top:0}
}

/* ============================================================
   THEMES — light-only rules and the toggle
   ============================================================ */
/* The tone map does the rest. These are the few things a token can't say. */
/* The ticker is the one gold fill: an antique-gold band with ink type, after the original's ochre banner */
[data-theme=light] .ticker{background:var(--gold);border-bottom-color:rgba(14,16,19,.12)}
[data-theme=light] .ticker p{color:#0E1013}
[data-theme=light] .ticker .dot{color:#0E1013;opacity:.45}
/* No vignette over a light page, and a lighter grain */
[data-theme=light] .vignette{display:none}
[data-theme=light] .grain{opacity:.024}
/* The glows are dark photographs: the reviews glow goes, the enquiry glow becomes a soft linen light */
[data-theme=light] .reviews__glow{display:none}
[data-theme=light] .enquire__glow{background:radial-gradient(62% 58% at 50% 44%,#FFFDF9,rgba(255,253,249,0) 72%);opacity:1;-webkit-mask:none;mask:none}
/* The footer crest PNG is pale gold: paint it bronze through its own alpha */
[data-theme=light] .foot__mark{background:var(--gold-text);-webkit-mask:url('../images/Logo-01.png.webp') center/contain no-repeat;mask:url('../images/Logo-01.png.webp') center/contain no-repeat;object-position:-9999px 0}
/* The copyright and socials row is a full-bleed strip in the footer colour: invisible in dark mode,
   ink in light mode (the tone map gives it the dark set), like the original's black strip */
.foot__bar{background:var(--bg-foot);box-shadow:0 0 0 100vmax var(--bg-foot);clip-path:inset(0 -100vmax)}
[data-theme=light] .foot__bar{border-top-color:transparent}
/* The map and the badge's info icon keep their own colours */
[data-theme=light] .map__frame{background:var(--bg-alt)}
[data-theme=light] .map__frame iframe{filter:grayscale(1)}
[data-theme=light] .gbadge__verify img{filter:none;opacity:.6}
/* Bronze where dark mode has champagne on a detail: the select arrow, the cursor ring */
[data-theme=light] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237E6033' stroke-width='1.2'/%3E%3C/svg%3E")}
[data-theme=light] .cur-ring{border-color:rgba(126,96,51,.5)}
/* When the nav sticks its tone changes: the ink follows the glass in instead of jumping */
.brand__name{transition:color .55s var(--ease)}
.burger span{transition:transform .45s var(--ease),opacity .3s var(--ease),background-color .55s var(--ease)}

/* Theme toggle: a hairline square like the footer's social buttons, in .nav__cta at every width.
   It shows the theme it switches to; its aria-label says so (theme() keeps both current) */
.theme-toggle{
  flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--hair);
  color:rgba(var(--fg-rgb),.78);
  transition:border-color .45s var(--ease),background-color .45s var(--ease),color .45s var(--ease);
}
.theme-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle:hover{border-color:var(--gold);background:rgba(197,168,128,.1);color:var(--gold-text)}
html[data-theme=light] .theme-toggle .i-sun,html:not([data-theme=light]) .theme-toggle .i-moon{display:none}
html:not(.js) .theme-toggle{display:none}
/* The switch: theme() opens a circle from the toggle over the old page (View Transitions), so the
   default crossfade is off for it */
html.theme-vt::view-transition-old(root),html.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ============================================================
   ACCESSIBILITY, THE SENT PANEL, MEDIA CONTROLS
   ============================================================ */
/* Skip link: above the page (even the loader) once focused */
.skip{
  position:fixed;top:.75rem;left:.75rem;z-index:10000;padding:.95em 1.5em;
  background:var(--gold);color:#14161A;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  transform:translateY(calc(-100% - 1rem));transition:transform .3s var(--ease);
}
.skip:focus{transform:none}
/* Where script sends focus (main, the section a link points at, the sent panel) needs no ring */
[tabindex="-1"]:focus{outline:none}

/* If the script never lifts the loader, CSS does */
.loader{animation:loaderBail .5s linear 7s forwards}
@keyframes loaderBail{to{opacity:0;visibility:hidden}}

/* Placeholders are examples: AA contrast made them look like answers, so they take the italic serif */
.field input::placeholder,.field textarea::placeholder,.news__field input::placeholder{font-family:var(--serif);font-style:italic;font-size:1.08rem;letter-spacing:.01em}

/* Inline errors: in words, under the field, until it is fixed. The count by the button is a live region
   that stays in the accessibility tree while empty, so its first message is announced */
.field__error{display:flex;align-items:baseline;gap:.55rem;font-size:.72rem;line-height:1.5;color:var(--error)}
.field__error::before{content:"";flex:none;width:5px;height:5px;background:currentColor;transform:translateY(-1px) rotate(45deg)}
.form__status{flex-basis:100%;font-size:.72rem;line-height:1.5;color:var(--error)}
.form__status:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.news__ok.is-error{color:var(--error)}

/* The sent panel: what was asked for, what happens next, and the guest's own channels */
.form__done{flex:1;min-width:0}
.summary{margin-top:1.2rem;border-top:1px solid var(--hair)}
.summary div{display:grid;grid-template-columns:minmax(7.5rem,32%) 1fr;gap:.4rem 1.2rem;padding:.65rem 0;border-bottom:1px solid var(--hair)}
.summary dt{padding-top:.35em;font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;line-height:1.5;color:var(--gold-text)}
.summary dd{font-size:.84rem;line-height:1.6;color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.form__ok .summary + small{margin-top:1.1rem}
.form__alt{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.8rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--hair-gold)}
.form__alt-note{flex-basis:100%;font-size:.72rem;color:var(--text-dim)}
@media (max-width:520px){
  .summary div{grid-template-columns:1fr;gap:.15rem}
}

/* Pause and play for the footage: a frosted square like the Index tag */
.media-toggle{
  position:absolute;z-index:3;width:36px;height:36px;display:grid;place-items:center;color:rgb(var(--fg-rgb));
  background:rgba(10,12,15,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--hair-gold);
  transition:border-color .45s var(--ease),background-color .45s var(--ease);
}
.media-toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.media-toggle .i-play{fill:currentColor;stroke:none}
.media-toggle:hover{border-color:var(--gold);background:rgba(10,12,15,.72)}
.media-toggle .i-play,.media-toggle.is-paused .i-pause{display:none}
.media-toggle.is-paused .i-play{display:block}
html:not(.js) .media-toggle{display:none}
/* In the hero it sits left of the scroll cue; in the Index stage, opposite the tag */
.hero__toggle{right:calc(var(--pad) + 3.4rem);bottom:clamp(1rem,2.2vh,1.6rem)}
.index__toggle{right:clamp(1rem,1.6vw,1.7rem);bottom:clamp(1rem,1.6vw,1.7rem)}
@media (max-width:860px){
  .hero__toggle{right:var(--pad)}
}

/* The carousel's pause button, beside its arrows */
.qplay svg{width:13px;height:13px;fill:none;stroke:rgb(var(--fg-rgb));stroke-width:1.4;stroke-linecap:round}
.qplay .i-play{fill:rgb(var(--fg-rgb));stroke:none}
.qplay .i-play,.qplay.is-paused .i-pause{display:none}
.qplay.is-paused .i-play{display:block}

/* The Google badge links to the reviews */
a.gbadge{transition:border-color .45s var(--ease),background-color .45s var(--ease)}
a.gbadge:hover,a.gbadge:focus-visible{border-color:var(--gold)}

/* ============================================================
   SPEED & NAVIGATION
   ============================================================ */
/* The intro plays once per tab: .intro-seen (boot script) keeps the loader from painting at all */
.intro-seen .loader{display:none}
/* Page to page: a short crossfade, with the nav and ticker holding still (Chrome, Edge, Safari 18.2+;
   Firefox simply navigates). The theme switch is a same-page transition: it reveals the nav too */
@view-transition{navigation:auto}
.nav{view-transition-name:nav}
.ticker{view-transition-name:ticker}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:var(--ease)}
html.theme-vt .nav,html.theme-vt .ticker{view-transition-name:none}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
/* The arrival's exit (preload()): the old snapshot (the splash) stays on top and wipes up off the hero
   while the crest glides into the nav's. Like the theme switch, it drops the nav and ticker names, or
   they would be lifted out of the snapshot and show through the splash */
html.splash-vt .nav,html.splash-vt .ticker{view-transition-name:none}
html.splash-vt .loader__crest,html.splash-in .nav .brand .crest{view-transition-name:ll-crest}
html.splash-vt::view-transition-old(root){z-index:2;mix-blend-mode:normal;animation:llSplashWipe 1s var(--ease-io) both}
html.splash-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.splash-vt::view-transition-group(ll-crest){animation-duration:1s;animation-timing-function:var(--ease-io)}
@keyframes llSplashWipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}

/* Light: the chip under the pointer takes the original's stone (the check mark and gold border still mark the choice) */
[data-theme=light] .chip:hover span{background-color:var(--stone)}

/* ============================================================
   MOBILE & BOOKING COMFORT
   ============================================================ */
/* The dock: Call, WhatsApp and the page's own action on phones, in place of the WhatsApp pill. dock() shows it
   once the hero is half gone and hides it while the form or the footer is on screen; the open menu hides it here */
.dock{display:none}
@media (max-width:860px){
  .wa{display:none}
  .dock{
    position:fixed;z-index:1200;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
    display:flex;align-items:stretch;gap:.35rem;padding:.35rem;
    background:rgba(12,14,18,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid var(--hair-gold);box-shadow:0 14px 40px rgba(0,0,0,.45);
    opacity:0;transform:translateY(calc(100% + 1.5rem));visibility:hidden;
    transition:opacity .45s var(--ease),transform .6s var(--ease-out),visibility 0s linear .6s;
  }
  .dock.is-on{opacity:1;transform:none;visibility:visible;transition:opacity .45s var(--ease),transform .6s var(--ease-out),visibility 0s}
  body.menu-open .dock{opacity:0;transform:translateY(calc(100% + 1.5rem));visibility:hidden}
}
.dock__item{
  flex:none;min-width:3.9rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.32rem;padding:.4rem .45rem;
  font-size:.55rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;line-height:1;color:rgba(var(--fg-rgb),.86);
  transition:color .35s var(--ease);
}
.dock__item svg{width:17px;height:17px;fill:none;stroke:var(--gold)}
.dock__item:hover,.dock__item:focus-visible{color:var(--gold-text)}
.dock__cta{flex:1;min-width:0;padding:1em .9em;font-size:.6rem;letter-spacing:.15em}
@media (max-width:360px){
  .dock__cta{font-size:.55rem;letter-spacing:.09em}
}

/* Steppers: − and + of 44px around a number field; the underline moves from the input to the row */
.stepper{display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--hair);transition:border-color .45s var(--ease)}
.stepper:focus-within{border-bottom-color:var(--gold)}
.stepper:has(.is-invalid){border-bottom-color:var(--error)}
.field .stepper input{flex:1;min-width:0;text-align:center;border-bottom:0;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper__btn{
  flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair);
  font-size:1.15rem;font-weight:300;line-height:1;color:var(--gold-text);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),opacity .35s var(--ease);
}
.stepper__btn:hover{border-color:var(--gold);background:rgba(197,168,128,.1)}
.stepper__btn[aria-disabled="true"]{opacity:.32;cursor:default;border-color:var(--hair);background:none}
html:not(.js) .stepper__btn{display:none}

/* Kept drafts and remembered details: a quiet line above the form with its one action */
.form__notes{display:flex;flex-direction:column;gap:.5rem}
.form__notes:empty{display:none}
.form__keep{padding:.75rem 1rem;border:1px solid var(--hair-gold);background:rgba(197,168,128,.06);font-size:.74rem;line-height:1.6;color:var(--text)}
.form__keep-btn{padding:0;border-bottom:1px solid currentColor;font-size:inherit;color:var(--gold-text);transition:color .3s var(--ease)}
.form__keep-btn:hover{color:rgb(var(--fg-rgb))}