/* ============================================================
   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,.84);
  --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,.92);
  --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);
  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;
}
/* The links and button sit in a scroller over the menu's solid field. Centred while they fit (the auto margins),
   top-aligned and scrolling when they don't: a column centred with justify-content overflows at both ends, and
   its first links slid under the nav on shorter phones. Scrolled content fades out above the first link's resting
   place, before it reaches the ticker and the nav (both see-through while the menu is open) */
.menu__scroll{
  position:absolute;inset:0;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--nav-h) + 3rem) var(--pad) 3rem;
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--ticker-h) + var(--nav-h)),#000 calc(var(--nav-h) + 3rem));
  mask-image:linear-gradient(to bottom,transparent calc(var(--ticker-h) + var(--nav-h)),#000 calc(var(--nav-h) + 3rem));
}
.menu__scroll > :first-child{margin-top:auto}
.menu__scroll > :last-child{margin-bottom:auto}
.menu a.menu__link{
  display:flex;align-items:baseline;gap:1rem;
  /* sized by the screen's height too, so the six links and the button fit on most phones without scrolling */
  font-family:var(--serif);font-size:clamp(2rem,9vw,3.2rem);font-size:clamp(2rem,min(9vw,4.4svh),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;touch-action:pan-y}
.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}
  /* minmax(0,…): a 1fr column never shrinks below its content, and at 360px with 130% text Home's split was 380px wide */
  .split{grid-template-columns:minmax(0,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))}

/* ============================================================
   BOOKING & DETAIL PAGES (WordPress parity: prices, vehicles, tour and rental pages)
   ============================================================ */
/* The booking summary in the sticky aside (Estimate): what is chosen so far and its price */
.estimate{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.1rem,1.8vw,1.5rem);border:1px solid var(--hair-gold);background:var(--raised)}
.estimate__title{font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}
.estimate__rows:empty{display:none}
.estimate__rows div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--hair)}
.estimate__rows dt{flex:none;font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--text-dim)}
.estimate__rows dd{font-size:.8rem;line-height:1.45;color:var(--text);text-align:right;overflow-wrap:anywhere}
.estimate__total{font-family:var(--serif);font-size:clamp(1.9rem,2.6vw,2.5rem);font-weight:400;line-height:1.05;color:rgb(var(--fg-rgb))}
.estimate__note{font-size:.72rem;line-height:1.7;color:var(--text-dim)}

/* "Choose your vehicle": each vehicle a radio card (photo, name, capacity, traits, fare); its details link sits
   outside the label so a tap on it never picks the car */
.rides__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.rides__head .field__help{flex:1 1 20rem}
.rides__sort{flex:0 1 13rem}
.rides{display:flex;flex-direction:column;gap:.7rem}
.ride{position:relative}
.ride__pick{
  display:grid;grid-template-columns:clamp(7.5rem,26%,11.5rem) 1fr auto;gap:.5rem clamp(1rem,1.6vw,1.5rem);align-items:center;
  padding:1rem 1.2rem 2.4rem 1rem;border:1px solid var(--hair);cursor:pointer;
  transition:border-color .4s var(--ease),background-color .4s var(--ease);
}
.ride__pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ride__media{grid-row:1/span 2;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.ride__media img{display:block;width:100%;height:100%;object-fit:cover}
.ride__body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.ride__name{font-family:var(--serif);font-size:clamp(1.15rem,1.45vw,1.4rem);line-height:1.2;color:rgb(var(--fg-rgb))}
.ride__name small{font-size:.78em;color:var(--text-dim)}
.ride__facts{display:flex;flex-wrap:wrap;gap:.15rem 0;font-size:.74rem;line-height:1.5;color:var(--text)}
.ride__facts span + span::before{content:"·";margin:0 .55rem;color:var(--gold-text)}
.ride__class{font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--gold-text)}
.ride__traits{font-size:.7rem;line-height:1.55;color:var(--text-dim)}
.ride__price{grid-row:1/span 2;grid-column:3;text-align:right;font-family:var(--serif);font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:1.1;color:rgb(var(--fg-rgb));white-space:nowrap}
.ride__price small{display:block;margin-bottom:.2rem;font-family:var(--sans);font-size:.54rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--text-dim)}
.ride__rate{display:block;margin-top:.3rem;font-family:var(--sans);font-size:.66rem;color:var(--text-dim);white-space:normal}
.ride__full{grid-column:2/-1;font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--error)}
.ride__more{
  position:absolute;right:1.2rem;bottom:.85rem;padding-bottom:.15rem;border-bottom:1px solid var(--hair-gold);
  font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--gold-text);transition:border-color .35s var(--ease);
}
.ride__more:hover,.ride__more:focus-visible{border-color:var(--gold-text)}
.ride__pick:hover{border-color:var(--hair-gold)}
.ride__pick:has(input:checked){border-color:var(--gold);background-color:rgba(197,168,128,.1)}
.ride__pick:has(input:focus-visible){outline:var(--ring) solid var(--gold-text);outline-offset:3px}
.ride.is-full .ride__pick{cursor:not-allowed;border-style:dashed}
.ride.is-full .ride__name,.ride.is-full .ride__price{color:var(--text-dim)}
.rides.is-invalid .ride__pick{border-color:var(--error)}

/* Chauffeur Services' fleet: the four vehicles, each a photo over its spec sheet (#vehicle-<slug> anchors) */
.cfleet{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.6rem,4vw,4rem) clamp(1.2rem,2.4vw,2.4rem)}
.cfleet__item{display:flex;flex-direction:column;gap:clamp(1rem,1.6vw,1.4rem);scroll-margin-top:calc(var(--nav-h) + 2rem)}
.cfleet__media{aspect-ratio:16/10;overflow:hidden;border:1px solid var(--hair-gold);background:var(--bg-alt)}
.cfleet__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.cfleet__item:hover .cfleet__media img{transform:scale(1.04)}
.cfleet__body{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.cfleet__body .specs{width:100%}
.cfleet__name{font-family:var(--serif);font-size:clamp(1.5rem,2vw,1.9rem);font-weight:400;line-height:1.15;color:rgb(var(--fg-rgb))}
.cfleet__name small{font-size:.7em;color:var(--text-dim)}
.cfleet__traits{margin:.4rem 0 .6rem;font-size:.78rem;line-height:1.7;color:var(--text-dim)}

/* Small print that opens: the bag-size guide */
.guide summary{width:max-content;cursor:pointer;font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-text)}
.guide summary:focus-visible{outline:var(--ring) solid var(--gold-text);outline-offset:3px}
.guide p{margin-top:.6rem;font-size:.76rem;line-height:1.75;color:var(--text-dim);max-width:70ch}
.guide b{font-weight:500;color:var(--text)}
.flight{display:flex;flex-direction:column;gap:.55rem}
.field__help a,.agree__link{color:var(--gold-text);text-decoration:underline;text-underline-offset:.2em}
.field__price{margin-left:.4em;letter-spacing:.12em;color:var(--text-dim)}

/* One-box chip groups (the Terms, the driver's age) span the row; a tour's packages carry a second line */
.chips--one{grid-template-columns:1fr}
.agree{gap:.8rem}
.pkgs .chip span{flex-wrap:wrap;column-gap:.8rem}
.pkgs .chip small{flex-basis:100%;padding-left:calc(14px + .8rem);font-size:.72rem;color:var(--text-dim)}
/* Light mode's hover fills the chip with --stone, where --text-dim is 4.1:1 */
.pkgs .chip:hover small{color:var(--text)}
.chip.is-full{cursor:not-allowed}
.chip.is-full span{border-style:dashed;color:var(--text-dim)}

/* Price tables: a tour's vehicle packages, a rental's day-rate tiers */
.prices{width:100%;margin-top:clamp(1.6rem,2.6vw,2.2rem);border-collapse:collapse;border-top:1px solid var(--hair)}
.prices th,.prices td{padding:1rem .8rem 1rem 0;border-bottom:1px solid var(--hair);text-align:left;vertical-align:baseline;font-weight:400}
.prices thead th{font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}
.prices tbody th{font-family:var(--serif);font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.3;color:rgb(var(--fg-rgb))}
.prices tbody th small{display:block;font-family:var(--sans);font-size:.7rem;color:var(--text-dim)}
.prices td{font-size:.86rem;color:var(--text)}
.prices .prices__amt{font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.5rem);color:rgb(var(--fg-rgb));white-space:nowrap}
.prices td:last-child{padding-right:0;text-align:right}

/* Detail pages: overview beside its facts (or the car beside its story), lists, and the questions */
.detail{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2.4rem,5vw,6rem);align-items:start}
.detail--media{grid-template-columns:.8fr 1.2fr}
.detail .sec-head .body{margin-top:1.1rem;max-width:62ch}
.detail__facts{margin-top:0;grid-template-columns:1fr}
.detail__note{margin-top:clamp(1.4rem,2.2vw,1.8rem);font-size:.78rem;line-height:1.8;color:var(--text-dim);max-width:72ch}
.detail__sub{margin-top:clamp(2.2rem,3.4vw,3rem)}
.detail__links{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:clamp(1.8rem,3vw,2.4rem)}
.days__t small{margin-left:.6rem;font-family:var(--sans);font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--text-dim)}
.ticks{display:flex;flex-direction:column;gap:.6rem;margin-top:1.3rem;list-style:none}
.ticks li{position:relative;padding-left:1.4rem;font-size:var(--fs-body);line-height:1.7;color:var(--text)}
.ticks li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.ticks--no li::before{background:none;border:1px solid var(--gold)}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);max-width:1000px;margin:clamp(2.4rem,4vw,3.4rem) auto 0}
.incl__t{font-family:var(--serif);font-size:clamp(1.3rem,1.7vw,1.6rem);font-weight:400;color:rgb(var(--fg-rgb))}
.faq{margin-top:clamp(1.6rem,2.6vw,2.2rem);border-top:1px solid var(--hair)}
.faq__item{border-bottom:1px solid var(--hair)}
.faq__item summary{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.35;color:rgb(var(--fg-rgb))}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";flex:none;font-family:var(--sans);font-size:1rem;color:var(--gold-text)}
.faq__item[open] summary::after{content:"\2212"}
.faq__item summary:focus-visible{outline:var(--ring) solid var(--gold-text);outline-offset:3px}
.faq__item p,.faq__item ul{max-width:72ch;margin:0 0 1.2rem;font-size:.86rem;line-height:1.8;color:var(--text)}
.faq__item .ticks{margin-top:0}

/* Two links under the Index stage; a card foot with a price and two links */
.index__links{display:flex;flex-wrap:wrap;gap:1rem 2.2rem}
.vehicle__foot{flex-wrap:wrap}
.vehicle__price{margin-right:auto}

/* The analytics consent banner (only built when analytics is configured): non-modal, bottom left */
.consent{
  position:fixed;left:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);z-index:985;
  display:flex;flex-direction:column;gap:.8rem;width:min(26rem,calc(100vw - 1.6rem));padding:1.3rem 1.4rem;
  background:var(--bg-menu);border:1px solid var(--hair-gold);box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.consent[hidden]{display:none}
.consent__title{font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}
.consent__text{font-size:.78rem;line-height:1.7;color:var(--text)}
.consent__text a{color:var(--gold-text);text-decoration:underline;text-underline-offset:.2em}
.consent__acts{display:flex;gap:.7rem}
.consent__btn{flex:1}

/* The footer bar's legal links */
.foot__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot__legal a,.foot__cookies{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);transition:color .35s var(--ease)}
.foot__legal a:hover,.foot__legal a:focus-visible,.foot__legal a[aria-current],.foot__cookies:hover,.foot__cookies:focus-visible{color:var(--gold-text)}

@media (max-width:1024px){
  .detail,.detail--media{grid-template-columns:1fr}
  .detail--media .vehicle{max-width:460px}
}
@media (max-width:820px){
  .cfleet{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
}
@media (max-width:720px){
  .incl{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ride__pick{grid-template-columns:6.5rem 1fr;padding-right:1rem}
  .ride__media{grid-row:auto}
  .ride__price{grid-row:auto;grid-column:2;text-align:left}
  .ride__full{grid-column:1/-1}
  /* each row a small grid: the vehicle (or tier) on its own line, then its seats (or days) beside the price, then
     the link; the header row's captions move onto the cells */
  .prices thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .prices tr{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--hair)}
  .prices th,.prices td{padding:0;border:0}
  .prices tbody th{grid-column:1/-1}
  .prices td[data-label]::before{content:attr(data-label) " ";font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--text-dim)}
  .prices td:has(a){grid-column:1/-1;margin-top:.5rem;text-align:left}
}
.cfleet__credit{margin-top:clamp(2rem,3vw,2.6rem);font-size:.66rem;line-height:1.7;color:var(--text-dim)}
.cfleet__credit a{color:var(--text);text-decoration:underline;text-underline-offset:.2em}

/* ============================================================
   CONTENT PAGES — shared (Concierge, Contact, Terms, Privacy)
   ============================================================ */
/* A link inside running copy: gold text on a gold hairline (the site's links are otherwise uncoloured) */
.text-link{color:var(--gold-text);border-bottom:1px solid var(--hair-gold);transition:border-color .35s var(--ease)}
.text-link:hover,.text-link:focus-visible{border-bottom-color:var(--gold-text)}
/* The privacy line under a form */
.form__privacy{margin-top:-.6rem}

/* ============================================================
   CONCIERGE
   ============================================================ */
/* Three numbered steps in a row; one column at ≤1024 (re-declared after the base rule: §2 source order) */
.tenets--three{grid-template-columns:repeat(3,1fr)}
.tenets--three .tenet__t{font-size:clamp(1.5rem,2.2vw,2.1rem)}
@media (max-width:1024px){
  .tenets--three{grid-template-columns:1fr}
}
/* The wheelchair notice in the aside: a gold rule beside it so it isn't missed */
.concierge__notice{padding-left:1rem;border-left:1px solid var(--gold)}
.booking__help .body a{white-space:nowrap}

/* "What happens next" inside the sent panel (FormOk's slot). .form__ok p sets every p in the panel in the large
   serif, so these match it with two classes */
.form__next{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--hair-gold)}
.form__ok .form__next-t{font-family:var(--sans);font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;line-height:1.5;color:var(--gold-text)}
.form__steps{margin:.8rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem;font-size:.8rem;line-height:1.7;color:var(--text)}
.form__steps li::marker{color:var(--gold-text);font-size:.72rem}
.form__ok .form__next-note{margin-top:1rem;font-family:var(--sans);font-size:.76rem;line-height:1.7;color:var(--text-dim)}
.form__next-note strong{font-weight:600;color:rgb(var(--fg-rgb))}

/* ============================================================
   LEGAL PAGES (.prose)
   ============================================================ */
/* Contents beside the text (sticky), above it at ≤1024 */
.legal__grid{display:grid;grid-template-columns:minmax(13rem,.32fr) 1fr;gap:clamp(2.4rem,5vw,6rem);align-items:start}
.legal__toc{position:sticky;top:calc(var(--nav-h) + 2rem);display:flex;flex-direction:column;gap:1.2rem}
.legal__list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.legal__list li{border-bottom:1px solid var(--hair)}
.legal__list a{display:block;padding:.62rem 0;font-size:.8rem;line-height:1.5;color:var(--text-dim);transition:color .35s var(--ease)}
.legal__list a:hover,.legal__list a:focus-visible{color:var(--gold-text)}
.legal__list--n{list-style:none;counter-reset:toc}
.legal__list--n li{counter-increment:toc}
.legal__list--n a::before{content:counter(toc,decimal-leading-zero);display:inline-block;width:2.2rem;font-size:.58rem;font-weight:500;letter-spacing:.2em;color:var(--gold-text)}

/* The text: serif section titles, quiet body, hairline between sections */
.prose{max-width:46rem;min-width:0}
.prose__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding-bottom:1.6rem;font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;line-height:1.6;color:var(--gold-text)}
.prose section{padding:clamp(1.8rem,3vw,2.6rem) 0;border-top:1px solid var(--hair);scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.prose h2{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.15;color:rgb(var(--fg-rgb));margin-bottom:1.1rem}
.prose__n{margin-right:.35em;color:var(--gold-display)}
.prose h3{font-family:var(--sans);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;line-height:1.5;color:rgb(var(--fg-rgb));margin:1.8rem 0 .8rem}
.prose p,.prose li{font-size:var(--fs-body);line-height:1.8;color:var(--text)}
.prose p + p{margin-top:1rem}
.prose ul{margin:1rem 0;display:flex;flex-direction:column;gap:.55rem}
.prose ul li{position:relative;padding-left:1.4rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.85em;width:.6rem;height:1px;background:var(--gold)}
.prose ul + p{margin-top:1rem}
.prose a{color:var(--gold-text);border-bottom:1px solid var(--hair-gold);overflow-wrap:anywhere;transition:border-color .35s var(--ease)}
.prose a:hover,.prose a:focus-visible{border-bottom-color:var(--gold-text)}
.prose strong{font-weight:600;color:rgb(var(--fg-rgb))}

/* A schedule as a two-column table: notice on the left, the charge on the right */
.prose__table{width:100%;margin:1.2rem 0 1.4rem;border-collapse:collapse;font-size:.86rem;line-height:1.6}
.prose__table th{padding:.7rem 1rem .7rem 0;text-align:left;font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-text);border-bottom:1px solid var(--hair-gold)}
.prose__table td{padding:.8rem 1rem .8rem 0;color:var(--text);border-bottom:1px solid var(--hair);vertical-align:top}
.prose__table th:last-child,.prose__table td:last-child{padding-right:0;text-align:right}
.prose__table td:last-child{white-space:nowrap;font-family:var(--serif);font-size:1.08rem;color:rgb(var(--fg-rgb))}

@media (max-width:1024px){
  .legal__grid{grid-template-columns:1fr}
  .legal__toc{position:static}
  .legal__list{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem}
}
@media (max-width:640px){
  .legal__list{grid-template-columns:1fr}
  .prose__table td:last-child{white-space:normal}
}

/* Spec sheets: a long value (the luggage line) wraps instead of widening its column past the screen on a phone with
   large text (1fr's minimum is the content's), and an odd last row (the luggage) takes the full width */
.specs{grid-template-columns:repeat(2,minmax(0,1fr))}
.specs dd{overflow-wrap:anywhere}
.specs div:last-child:nth-child(odd){grid-column:1/-1}
/* A sheet of prices (the chauffeur fleet's fares, a rental's extras) is one column on a phone: in a half-width cell
   beside a long label, "anywhere" broke a fare into "R15 / 0,0 / 0 / day" */
@media (max-width:560px){.specs--prices{grid-template-columns:minmax(0,1fr)}}
/* Home's concierge button is the longest label on the site: on a 360px phone with large text it wraps rather than
   widening the page (buttons are otherwise nowrap) */
.split__text .btn{max-width:100%;white-space:normal}

/* ============================================================
   THE BOOKING API (Phase 3): the sent panel's states, address suggestions, the route map, the VIP Club notice
   ============================================================ */
/* The sent panel's copy for each state ([data-when]); .form__ok small{display:block} would beat the UA's [hidden] */
.form__ok [hidden]{display:none!important}
.form__ok .form__ref{margin-top:.7rem;font-family:var(--sans);font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--gold-text)}

/* Address suggestions under a chauffeur address field (placeField(): an ARIA combobox and its listbox) */
.places{
  position:absolute;z-index:20;top:100%;left:0;right:0;margin:.2rem 0 0;padding:.3rem 0;list-style:none;
  background:var(--option-bg);border:1px solid var(--hair-gold);box-shadow:0 18px 40px rgba(0,0,0,.35);max-height:19rem;overflow-y:auto;
}
.places li{display:flex;flex-direction:column;gap:.15rem;padding:.65rem 1rem;cursor:pointer}
.places li[aria-selected=true],.places li:hover{background:rgba(197,168,128,.12)}
.places b{font-weight:400;font-size:.88rem;line-height:1.35;color:rgb(var(--fg-rgb))}
.places small{font-size:.7rem;line-height:1.45;color:var(--text-dim)}
.places .places__note{cursor:default;font-size:.7rem;color:var(--text-dim)}
.places .places__note:hover{background:none}

/* The route under the chauffeur estimate: a keyless Google Maps embed of the quoted route */
.route{margin-top:.2rem;aspect-ratio:4/3}
.route[hidden]{display:none}

/* The VIP Club's confirm and unsubscribe links land on the home page with a short notice */
.toast{
  position:fixed;z-index:90;left:50%;bottom:clamp(1rem,4vw,2rem);transform:translate(-50%,1rem);max-width:min(32rem,calc(100vw - 2rem));
  padding:.9rem 1.3rem;background:var(--bg);border:1px solid var(--hair-gold);font-size:.8rem;line-height:1.6;color:rgb(var(--fg-rgb));
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease-out);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}