/* ══════════════════════════════════════════════════════════════
   PCA TYPOGRAPHY — the official licensed faces, self-hosted.
   Display : Mocktaile Typeface Regular  (the logotype face)
   Text    : Foundry Sterling OT3 — Light / Book / Medium / Demi
             plus Book Italic. Real weights only; nothing synthesised.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:"PCA Display";src:url("/assets/fonts/pca-display-400.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PCA Sans";src:url("/assets/fonts/pca-sans-300.woff") format("woff");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"PCA Sans";src:url("/assets/fonts/pca-sans-400.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PCA Sans";src:url("/assets/fonts/pca-sans-500.woff") format("woff");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PCA Sans";src:url("/assets/fonts/pca-sans-600.woff") format("woff");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PCA Sans";src:url("/assets/fonts/pca-sans-400i.woff") format("woff");
  font-weight:400;font-style:italic;font-display:swap}
/* fallbacks matched to the real metrics, so the swap moves nothing */
@font-face{font-family:"PCA Sans Fallback";src:local("Helvetica Neue"),local("Arial");
  ascent-override:119%;descent-override:37%;line-gap-override:0%;size-adjust:99%}
@font-face{font-family:"PCA Display Fallback";src:local("Georgia"),local("Times New Roman");
  ascent-override:100%;descent-override:50%;line-gap-override:0%;size-adjust:96%}


/* ═══════════════════════════════════════════════════════════════
   PRIVATE CHEFS ATELIER — design system
   Brand Guidelines v1.0: Charcoal #25282a · Mustard Olive #aa9767
   · Eggnog #ede8de. All other values are tints/shades of these.

   TYPE — the official licensed faces are declared at the head
   of this sheet.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#14171a;          /* deepest — shade of charcoal */
  --char:#25282a;         /* BRAND charcoal */
  --char-2:#31353800;
  --c-90:#2f3335; --c-75:#454a4d; --c-55:#6b7073; --c-35:#9aa0a3;
  --gold:#aa9767;         /* BRAND mustard olive */
  --gold-lo:#c4b48f;
  --egg:#ede8de;          /* BRAND eggnog */
  --egg-up:#f6f3ec; --egg-dn:#e0dacc;
  --hair-d:rgba(237,232,222,.13);
  --hair-l:rgba(37,40,42,.13);
  --gold-h:rgba(170,151,103,.36);
  --dim-d:rgba(237,232,222,.62);

  --serif:"PCA Display","PCA Display Fallback",Georgia,serif;
  --sans:"PCA Sans","PCA Sans Fallback","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5.2vw,88px);
  --band:clamp(76px,10vw,164px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--egg);
  font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-go]{cursor:pointer}

/* ── type ───────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.7rem,7vw,6.4rem);line-height:.97}
h2{font-size:clamp(2rem,4.4vw,3.7rem);line-height:1.06}
h3{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.2}
h4{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.3}
p{margin:0}
.xl{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1.22;letter-spacing:-.01em}
.lede{font-size:clamp(1rem,1.15vw,1.13rem);line-height:1.78;max-width:58ch;color:var(--dim-d)}
.sm{font-size:.93rem;line-height:1.7;color:var(--dim-d)}
.eyebrow{font-size:.66rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
.num{font-family:var(--serif);font-variant-numeric:lining-nums}

/* ── light section inversion ───────────────────────────── */
.lt{background:var(--egg);color:var(--char)}
.lt .lede,.lt .sm{color:var(--c-55)}
.lt .eyebrow{color:var(--c-75)}
.lt .eyebrow::before{background:var(--gold)}
.lt-up{background:var(--egg-up)}

/* ── layout ────────────────────────────────────────────── */
.wrap{width:min(1440px,100% - var(--pad)*2);margin-inline:auto;position:relative;z-index:2}
.wrap--n{width:min(1080px,100% - var(--pad)*2)}
.wrap--t{width:min(760px,100% - var(--pad)*2)}
.band{padding-block:var(--band);position:relative}
.band--s{padding-block:clamp(52px,6vw,92px)}
.stk{display:flex;flex-direction:column}
.g10{gap:10px}.g16{gap:16px}.g20{gap:20px}.g28{gap:28px}.g40{gap:40px}
.hr{height:1px;background:var(--hair-d);border:0;margin:0}
.lt .hr{background:var(--hair-l)}
.tick-r{width:64px;height:1px;background:var(--gold)}

/* ── buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  padding:19px 36px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);
  cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease);position:relative;overflow:hidden}
.btn:hover{background:transparent;color:var(--gold)}
.btn--q{background:transparent;color:var(--egg);border-color:var(--hair-d)}
.btn--q:hover{background:var(--egg);color:var(--ink);border-color:var(--egg)}
.lt .btn--q{color:var(--char);border-color:var(--hair-l)}
.lt .btn--q:hover{background:var(--char);color:var(--egg);border-color:var(--char)}
.btn--sm{padding:13px 24px;font-size:.63rem}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.micro{font-size:.78rem;color:var(--c-35);letter-spacing:.02em;margin-top:14px}
.lt .micro{color:var(--c-55)}

/* text link with rule */
.tl{display:inline-flex;align-items:center;gap:11px;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid var(--gold-h);
  transition:border-color .4s,gap .4s var(--ease)}
.tl:hover{border-color:var(--gold);gap:18px}
.tl::after{content:"→";font-size:.85rem;letter-spacing:0;transition:transform .4s var(--ease)}

/* ── header ────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:22px;padding:22px var(--pad);
  transition:background .6s var(--ease),padding .6s var(--ease),border-color .6s}
.hdr::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:transparent;transition:background .6s}
.hdr.on{background:rgba(20,23,26,.86);backdrop-filter:blur(20px) saturate(1.2);padding-block:14px}
.hdr.on::after{background:var(--hair-d)}
body.pg-lt .hdr.on{background:rgba(246,243,236,.9)}
body.pg-lt .hdr.on::after{background:var(--hair-l)}
body.pg-lt .hdr.on .brand,body.pg-lt .hdr.on .nav a{color:var(--char)}
.brand{display:flex;align-items:center;gap:13px;flex:none;color:var(--egg);transition:color .5s}
.brand svg{width:26px;flex:none}
.brand__t{font-family:var(--serif);font-size:1rem;line-height:1;letter-spacing:.02em}
.brand__t small{display:block;font-family:var(--sans);font-size:.47rem;letter-spacing:.46em;margin-top:6px;color:var(--gold)}
.nav{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--egg);transition:color .5s}
.nav a{opacity:.68;transition:opacity .35s;position:relative;white-space:nowrap;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a.act::after{transform:scaleX(1)}
.nav a.act{opacity:1}
.burger{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;position:relative;color:var(--egg)}
.burger i{position:absolute;left:9px;width:22px;height:1px;background:currentColor;transition:.4s var(--ease)}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:23px}
body.pg-lt .hdr.on .burger{color:var(--char)}
@media(max-width:1180px){.nav,.hdr .btn{display:none}.burger{display:block}}

.mob{position:fixed;inset:0;z-index:110;background:var(--ink);display:grid;
  grid-template-rows:auto 1fr auto;padding:22px var(--pad) calc(30px + env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.mob.open{opacity:1;pointer-events:auto}
.mob__top{display:flex;justify-content:space-between;align-items:center}
.mob__x{background:0;border:0;color:var(--egg);font-size:1.7rem;line-height:1;cursor:pointer}
.mob__nav{display:flex;flex-direction:column;justify-content:center;gap:2px;overflow-y:auto}
.mob__nav a{font-family:var(--serif);font-size:clamp(1.7rem,7vw,2.6rem);padding:7px 0;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.mob.open .mob__nav a{opacity:1;transform:none}
.mob__nav a:hover{color:var(--gold)}
.mob__f{display:flex;flex-direction:column;gap:9px;font-size:.9rem;color:var(--c-35);border-top:1px solid var(--hair-d);padding-top:22px}

/* ── image placeholder (art-directed) ──────────────────── */
.ph{position:relative;background:
  repeating-linear-gradient(126deg,rgba(170,151,103,.09) 0 1.5px,transparent 1.5px 13px),
  linear-gradient(150deg,#20242600,#1a1e2000),var(--c-90);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lt .ph{background:
  repeating-linear-gradient(126deg,rgba(170,151,103,.16) 0 1.5px,transparent 1.5px 13px),var(--egg-dn)}
.ph::before,.ph::after{content:"";position:absolute;width:20px;height:20px;border:1px solid var(--gold-h)}
.ph::before{top:14px;left:14px;border-right:0;border-bottom:0}
.ph::after{bottom:14px;right:14px;border-left:0;border-top:0}
.ph__l{position:relative;z-index:2;max-width:34ch;text-align:center;padding:26px;
  font-size:.66rem;line-height:1.75;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-lo)}
.lt .ph__l{color:var(--c-75)}
.ph__l b{display:block;font-weight:500;color:var(--gold);letter-spacing:.24em;margin-bottom:9px;font-size:.6rem}

/* ── media frames ──────────────────────────────────────── */
.fr{position:relative;overflow:hidden}
.fr img,.fr .ph{width:100%;height:100%;object-fit:cover}
.r-45{aspect-ratio:4/5}.r-11{aspect-ratio:1}.r-32{aspect-ratio:3/2}.r-169{aspect-ratio:16/9}.r-34{aspect-ratio:3/4}.r-43{aspect-ratio:4/3}
.fr img{transition:transform 1.6s var(--ease),filter 1.2s}
.fr:hover img{transform:scale(1.035)}
.cap{margin-top:14px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-35)}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.hero__m{position:absolute;inset:0}
.hero__m img,.hero__m .ph{width:100%;height:100%;object-fit:cover}
.hero__m img{filter:brightness(.5) saturate(.85);animation:heroIn 2.6s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero__v{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(20,23,26,.97) 0%,rgba(20,23,26,.5) 42%,rgba(20,23,26,.36) 100%),
  linear-gradient(105deg,rgba(20,23,26,.82),rgba(20,23,26,0) 62%)}
.hero__in{position:relative;z-index:3;padding-block:150px clamp(46px,6vw,84px);width:100%}
.hero h1{max-width:13ch;margin-top:30px}
.hero h1 em{font-style:italic;color:var(--gold-lo)}
.hero .lede{margin-top:28px;max-width:44ch}
.hero .btns{margin-top:36px}
.hero__base{position:relative;z-index:3;border-top:1px solid var(--hair-d);
  display:flex;flex-wrap:wrap;gap:10px 40px;padding:22px 0;
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-35)}
.hero__base b{color:var(--egg);font-weight:400}
.a-up{opacity:0;transform:translateY(26px);animation:aUp 1.15s var(--ease) forwards}
@keyframes aUp{to{opacity:1;transform:none}}

/* page hero */
.phero{position:relative;overflow:hidden;display:grid;align-items:end;min-height:clamp(400px,58svh,660px)}
.phero__m{position:absolute;inset:0}
.phero__m img,.phero__m .ph{width:100%;height:100%;object-fit:cover}
.phero__m img{filter:brightness(.44) saturate(.82)}
.phero__v{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,23,26,.95),rgba(20,23,26,.34))}
.phero__in{position:relative;z-index:3;padding-block:140px clamp(40px,5vw,68px)}
.phero h1{max-width:16ch;margin-top:22px;font-size:clamp(2.3rem,5.4vw,4.6rem)}
.phero .lede{margin-top:22px}
.crumb{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-35);margin-bottom:20px}
.crumb span{color:var(--gold)}

/* ── proof strip ───────────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--hair-d)}
.lt .strip{border-color:var(--hair-l)}
.strip>div{padding:clamp(30px,3.6vw,52px) clamp(16px,2.4vw,38px);border-left:1px solid var(--hair-d)}
.lt .strip>div{border-color:var(--hair-l)}
.strip>div:first-child{border-left:0}
.strip b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;font-weight:400}
.strip span{display:block;margin-top:13px;font-size:.65rem;letter-spacing:.19em;text-transform:uppercase;color:var(--c-35)}
.lt .strip span{color:var(--c-55)}
@media(max-width:880px){.strip{grid-template-columns:1fr 1fr}
  .strip>div:nth-child(odd){border-left:0}.strip>div:nth-child(n+3){border-top:1px solid var(--hair-d)}
  .lt .strip>div:nth-child(n+3){border-color:var(--hair-l)}}

/* ── editorial splits ──────────────────────────────────── */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
.sp--60{grid-template-columns:1.25fr .75fr}
.sp--40{grid-template-columns:.75fr 1.25fr}
.sp--off{align-items:start}
@media(max-width:960px){.sp,.sp--60,.sp--40{grid-template-columns:1fr;gap:38px}
  /* Stacked hierarchy: once a split is one column the reading order is
     always text first, photograph second, whichever side the photograph
     occupies on desktop. .sp__media marks the media column; grid items
     default to order:0, so pushing it to 2 sends it last without any
     markup reordering. Splits with no media column carry no marker and
     are unaffected. */
  .sp > .sp__media,.sp--60 > .sp__media,.sp--40 > .sp__media{order:2}}
.sp__m{position:relative}
.sp__m .stack2{position:absolute;right:-8%;bottom:-14%;width:46%;border:8px solid var(--ink);z-index:2}
.lt .sp__m .stack2{border-color:var(--egg)}
@media(max-width:960px){.sp__m .stack2{position:static;width:60%;margin:-18% 0 0 auto;border-width:6px}}

/* ── statement (full-bleed quiet moment) ───────────────── */
.stmt{text-align:center;padding-block:clamp(90px,13vw,200px)}
.stmt .xl{max-width:19ch;margin-inline:auto}
.stmt .eyebrow{margin-bottom:30px}

/* ── experiences grid (asymmetric editorial) ───────────── */
.xp{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,34px);margin-top:clamp(44px,5.5vw,76px)}
.xp__c{position:relative;display:block;overflow:hidden}
.xp__c:nth-child(1){grid-column:span 7}
.xp__c:nth-child(2){grid-column:span 5;align-self:end}
.xp__c:nth-child(3){grid-column:span 5}
.xp__c:nth-child(4){grid-column:span 7;align-self:start}
.xp__c:nth-child(5){grid-column:span 6}
.xp__c:nth-child(6){grid-column:span 6}
@media(max-width:900px){.xp__c,.xp__c:nth-child(n){grid-column:span 12}}
.xp__m{position:relative;overflow:hidden}
.xp__m img,.xp__m .ph{width:100%;height:100%;object-fit:cover;transition:transform 1.7s var(--ease)}
.xp__c:hover .xp__m img{transform:scale(1.05)}
.xp__b{padding-top:24px;display:flex;flex-direction:column;gap:12px}
.xp__k{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.xp__b p{font-size:.95rem;color:var(--dim-d);max-width:46ch;line-height:1.72}
.lt .xp__b p{color:var(--c-55)}

/* ── comparison ────────────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(40px,5vw,68px);border:1px solid var(--hair-d)}
.lt .vs{border-color:var(--hair-l)}
@media(max-width:800px){.vs{grid-template-columns:1fr}}
.vs__c{padding:clamp(30px,3.6vw,54px)}
.vs__c+.vs__c{border-left:1px solid var(--hair-d)}
.lt .vs__c+.vs__c{border-color:var(--hair-l)}
@media(max-width:800px){.vs__c+.vs__c{border-left:0;border-top:1px solid var(--hair-d)}
  .lt .vs__c+.vs__c{border-color:var(--hair-l)}}
.vs__c--us{background:rgba(170,151,103,.07)}
.vs__h{font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-35);margin-bottom:8px}
.vs__c--us .vs__h{color:var(--gold)}
.vs ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.vs li{font-size:.96rem;line-height:1.65;padding-left:22px;position:relative;color:var(--dim-d)}
.lt .vs li{color:var(--c-55)}
.vs li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:1px;background:var(--c-55)}
.vs__c--us li::before{width:6px;height:6px;top:8px;background:var(--gold);transform:rotate(45deg)}

/* ── process ───────────────────────────────────────────── */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(44px,5.5vw,76px);
  border-top:1px solid var(--hair-d)}
.lt .proc{border-color:var(--hair-l)}
@media(max-width:1000px){.proc{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.proc{grid-template-columns:1fr}}
.proc__s{padding:34px clamp(18px,2vw,30px) 40px;border-left:1px solid var(--hair-d);position:relative}
.lt .proc__s{border-color:var(--hair-l)}
.proc__s:first-child{border-left:0;padding-left:0}
@media(max-width:1000px){.proc__s:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:620px){.proc__s{border-left:0;padding-left:0;border-top:1px solid var(--hair-d)}
  .proc__s:first-child{border-top:0}.lt .proc__s{border-color:var(--hair-l)}}
.proc__n{font-family:var(--serif);font-size:.85rem;color:var(--gold);letter-spacing:.1em}
.proc__s h4{margin:16px 0 11px}
.proc__s p{font-size:.9rem;line-height:1.7;color:var(--dim-d)}
.lt .proc__s p{color:var(--c-55)}

/* ── menus ─────────────────────────────────────────────── */
.mn{border-top:1px solid var(--hair-d);margin-top:clamp(40px,5vw,66px)}
.lt .mn{border-color:var(--hair-l)}
.mn__r{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,3.4fr) auto;gap:clamp(18px,3vw,54px);
  align-items:baseline;padding:clamp(24px,2.8vw,36px) 0;border-bottom:1px solid var(--hair-d);
  transition:background .45s,padding-inline .45s var(--ease)}
.lt .mn__r{border-color:var(--hair-l)}
.mn__r:hover{background:rgba(170,151,103,.055);padding-inline:clamp(10px,1.6vw,22px)}
@media(max-width:840px){.mn__r{grid-template-columns:1fr;gap:12px}}
.mn__n{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.7rem);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mn__tag{font-family:var(--sans);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);padding:5px 10px;transform:translateY(-3px)}
.mn__d{font-size:.94rem;line-height:1.7;color:var(--dim-d)}
.lt .mn__d{color:var(--c-55)}
.mn__p{font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.55rem);white-space:nowrap;color:var(--gold)}
.mn__p small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--c-35);margin-top:7px}
/* the sample-menu affordance. Secondary by design: the card itself is
   the link, this only says so on touch, where there is no hover. */
.mn__x{display:block;margin-top:13px;font-size:.82rem;letter-spacing:.02em;color:var(--gold)}

.lt .slot{background:rgba(170,151,103,.13);border-left:2px solid var(--gold);padding:11px 14px;
  font-family:var(--sans);font-style:normal;font-size:.78rem;line-height:1.65;letter-spacing:.02em;color:var(--gold-lo)}
.lt .slot{color:var(--c-75)}
.slot b{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}

/* ── faq ───────────────────────────────────────────────── */
.faq{margin-top:clamp(38px,4.6vw,62px);border-top:1px solid var(--hair-d)}
.lt .faq{border-color:var(--hair-l)}
.faq details{border-bottom:1px solid var(--hair-d)}
.lt .faq details{border-color:var(--hair-l)}
.faq summary{list-style:none;cursor:pointer;padding:26px 52px 26px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.28rem);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:1px;
  background:var(--gold);transition:transform .4s var(--ease)}
.faq summary::before{content:"";position:absolute;right:13px;top:50%;width:1px;height:11px;
  margin-top:-5px;background:var(--gold);transition:transform .4s var(--ease)}
.faq details[open] summary::before{transform:scaleY(0)}
.faq p{padding:0 48px 30px 0;font-size:.97rem;line-height:1.78;color:var(--dim-d);max-width:70ch}
.lt .faq p{color:var(--c-55)}

/* ── trade ─────────────────────────────────────────────── */
.trd{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-d);
  border:1px solid var(--hair-d);margin-top:clamp(38px,4.6vw,62px)}
@media(max-width:880px){.trd{grid-template-columns:1fr}}
/* Membership privileges are an even set, so that grid runs two-up rather
   than leaving an orphan cell. Same component, same cells, column count only. */
.trd--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.trd--2{grid-template-columns:1fr}}
.trd__c{background:var(--ink);padding:clamp(26px,3vw,38px)}
.trd__c h4{margin-bottom:11px}
.trd__c p{font-size:.92rem;line-height:1.7;color:var(--dim-d)}


/* ── form ──────────────────────────────────────────────── */
.frm{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.f{display:flex;flex-direction:column;gap:9px}
/* .f sets display, which outranks the browser default for [hidden];
   without this the guest-count toggle on the enquiry form has no effect. */
.f[hidden]{display:none}
.f--f{grid-column:1/-1}
@media(max-width:720px){.frm{grid-template-columns:1fr}}
.f label{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.f input,.f select,.f textarea{font-family:var(--sans);font-size:.97rem;font-weight:300;
  padding:15px 0;border:0;border-bottom:1px solid var(--hair-d);background:transparent;color:var(--egg);
  border-radius:0;transition:border-color .4s}
.lt .f input,.lt .f select,.lt .f textarea{color:var(--char);border-color:var(--hair-l)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--gold)}
.f input::placeholder,.f textarea::placeholder{color:var(--c-55)}
.f textarea{min-height:96px;resize:vertical}
.f select option{background:var(--char);color:var(--egg)}
.f.err input,.f.err select{border-color:#b4674e}

/* ── browser autofill · keep the approved dark field appearance ──
   Safari/iOS and Chromium repaint an autofilled input with their own
   near-white background and dark text. background-color cannot be
   overridden on that state, so the field is refilled with a large inset
   shadow in the page's own ink and the glyph colour is set with
   -webkit-text-fill-color. Only :-webkit-autofill states are matched, so
   empty and manually typed fields render exactly as before. */
.f input:-webkit-autofill,
.f input:-webkit-autofill:hover,
.f input:-webkit-autofill:active,
.f select:-webkit-autofill,
.f textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--egg);
  -webkit-box-shadow:0 0 0 1000px var(--ink) inset;
  box-shadow:0 0 0 1000px var(--ink) inset;
  caret-color:var(--egg);
  transition:background-color 6000s 0s}
/* focus keeps its existing gold underline alongside the fill */
.f input:-webkit-autofill:focus,
.f select:-webkit-autofill:focus,
.f textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--egg);
  -webkit-box-shadow:0 0 0 1000px var(--ink) inset,0 1px 0 0 var(--gold);
  box-shadow:0 0 0 1000px var(--ink) inset,0 1px 0 0 var(--gold);
  caret-color:var(--egg)}
.f__e{font-size:.72rem;color:#c98a72;display:none}
.f.err .f__e{display:block}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-size:.72rem;letter-spacing:.09em;padding:11px 17px;border:1px solid var(--hair-d);
  background:transparent;color:var(--dim-d);cursor:pointer;transition:all .35s}
.lt .chip{border-color:var(--hair-l);color:var(--c-55)}
.chip:hover{border-color:var(--gold-h);color:var(--egg)}
.lt .chip:hover{color:var(--char)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:500}
.done{display:none;border:1px solid var(--gold-h);padding:clamp(28px,3.4vw,44px);margin-top:34px;
  background:rgba(170,151,103,.07)}
.done.show{display:block;animation:aUp .8s var(--ease) both}
.done h3{margin-bottom:14px}

/* ── contact rows ──────────────────────────────────────── */
.rows{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair-d)}
.lt .rows{border-color:var(--hair-l)}
.rows li{border-bottom:1px solid var(--hair-d);padding:20px 0;display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
.lt .rows li{border-color:var(--hair-l)}
.rows b{font-weight:400;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);flex:none;width:8.5em}
.rows a{font-size:1.02rem;transition:color .3s}
.rows a:hover{color:var(--gold)}


@media(max-width:900px){.jr{grid-template-columns:1fr}}





/* ── footer ────────────────────────────────────────────── */
.ft{background:var(--ink);border-top:1px solid var(--hair-d);padding-block:clamp(56px,7vw,96px) 34px}
.ft__g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,52px)}
@media(max-width:940px){.ft__g{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft__g{grid-template-columns:1fr}}
.ft h5{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px;font-weight:500}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:.92rem;color:var(--dim-d)}
.ft a{transition:color .3s}.ft a:hover{color:var(--gold)}
.ft__l{margin-top:clamp(40px,5vw,68px);padding-top:24px;border-top:1px solid var(--hair-d);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.76rem;color:var(--c-55)}

/* ── sticky mobile actions ─────────────────────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:96;display:none;
  background:rgba(20,23,26,.95);backdrop-filter:blur(18px);border-top:1px solid var(--hair-d);
  padding-bottom:env(safe-area-inset-bottom)}
.bar a{flex:1;padding:17px 8px;font-size:.63rem;border:0;justify-content:center}
.bar a:first-child{background:transparent;color:var(--egg);border-right:1px solid var(--hair-d)}
@media(max-width:820px){.bar{display:flex}body{padding-bottom:56px}}

/* ── reveal & page transition ──────────────────────────── */
.page{animation:pgIn .75s var(--ease) both}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
.page[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .a-up{opacity:1;transform:none;animation:none}
  .hero__m img{animation:none}
  .page{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── optical corrections for the official faces ──────────────────
   Mocktaile has no italic cut and a slightly lower x-height than the
   face it replaces. These adjustments keep the approved design at the
   same optical weight — no size, width, grid or breakpoint changes. */
.xl,.hero h1 em{font-style:normal}          /* no faux italic  */
.hero h1 em{color:var(--gold-lo)}                    /* emphasis by hue */
i,cite,.it{font-family:var(--sans);font-style:italic;font-weight:400}
body{font-size:17px}                                 /* x-height compensation */
h1{letter-spacing:-.006em}
h2,.xl{letter-spacing:-.004em}
.mn__n,.mn__p,.proof__n,.strip b,.price{letter-spacing:-.004em}
h3.h4,.h4,.trd__c h3,.cap__c h3,.proc__s h3{
  font-family:var(--sans);font-weight:500;letter-spacing:.012em}


/* formats / specialisms / ticks / price / movements */
.fmt{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair-l)}
.fmt>div{padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,34px);border-left:1px solid var(--hair-l)}
.fmt>div:first-child{border-left:0}
.fmt__k{display:block;font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.45rem);color:var(--char);margin-bottom:12px}
.fmt p{font-size:.94rem;line-height:1.66;color:var(--c-55)}
@media(max-width:860px){.fmt{grid-template-columns:1fr}
 .fmt>div{border-left:0;border-top:1px solid var(--hair-l)}.fmt>div:first-child{border-top:0}}

.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-d);border:1px solid var(--hair-d)}
@media(max-width:1000px){.spec{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.spec{grid-template-columns:1fr}}
.spec>div{background:var(--ink);padding:clamp(22px,2.4vw,30px)}
.lt .spec{background:var(--hair-l);border-color:var(--hair-l)}
.lt .spec>div{background:var(--egg)}
.spec__k{display:block;font-family:var(--serif);font-size:1.02rem;margin-bottom:10px}
.spec p{font-size:.87rem;line-height:1.65;color:var(--dim-d)}
.lt .spec p{color:var(--c-55)}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.ticks li{font-size:.96rem;line-height:1.62;padding-left:22px;position:relative;color:var(--dim-d)}
.lt .ticks li{color:var(--c-55)}
.ticks li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

.lbl{display:block;font-weight:400;color:var(--gold);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:5px}

.price{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1;color:var(--gold);margin-top:30px}
.price span{font-family:var(--sans);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-35);margin-left:10px}

.mv{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,72px);padding:clamp(30px,3.4vw,46px) 0;border-bottom:1px solid var(--hair-l)}
.mv:first-of-type{border-top:1px solid var(--hair-l);margin-top:clamp(38px,4.6vw,60px)}
.mv__n{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--gold);min-width:2.4em;letter-spacing:.08em}
.mv__b h3{margin-bottom:12px}
.mv__b .lede{max-width:66ch}
@media(max-width:700px){.mv{grid-template-columns:1fr;gap:12px}}

/* ── Atelier documents ── */
.docs{margin-top:clamp(38px,4.6vw,60px);border-top:1px solid var(--hair-l)}
.doc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,2.6fr) auto auto;
  gap:clamp(14px,2.6vw,44px);align-items:center;padding:clamp(24px,2.8vw,34px) 0;
  border-bottom:1px solid var(--hair-l);transition:background .45s,padding-inline .45s var(--ease)}
.doc:hover{background:rgba(170,151,103,.06);padding-inline:clamp(10px,1.6vw,22px)}
.doc__t{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.35rem)}
.doc__d{font-size:.92rem;line-height:1.65;color:var(--c-55)}
.doc__m{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-55);
  border:1px solid var(--hair-l);padding:6px 11px;white-space:nowrap}
.doc__a{font-size:1.15rem;color:var(--gold);transition:transform .45s var(--ease)}
.doc:hover .doc__a{transform:translateY(3px)}
@media(max-width:820px){.doc{grid-template-columns:1fr auto;gap:10px 18px}
 .doc__d{grid-column:1/-1}.doc__m{justify-self:start}}

/* ── DEV GATE ──────────────────────────────────────────────
   <html class="dev"> shows development placeholders.
   Remove the class before publishing and every asset
   placeholder — dev labels, testimonial slots, team
   profiles — disappears from the page automatically. */
html:not(.dev) [data-dev]{display:none!important}
html:not(.dev) .ph__l{display:none}
html:not(.dev) .slot{background:none;border-left:0;padding:0;color:inherit}

/* ══════════════════════════════════════════════════════════════
   PCA BRAND SYSTEM — digital translation of Brand Guidelines v1.0
   Palette is the official three only. Everything else is a tint,
   shade or alpha of them.
     Charcoal      #25282a   Pantone 426C
     Mustard Olive #aa9767   Pantone 7503C
     Eggnog        #ede8de   Pantone 7503C 20%
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── motion tokens: one easing family across the whole site ── */
  --e-out:cubic-bezier(.16,1,.3,1);      /* reveals, entrances   */
  --e-io:cubic-bezier(.65,0,.35,1);      /* state changes        */
  --e-line:cubic-bezier(.22,1,.36,1);    /* the mustard line     */
  --t-fast:.28s; --t-mid:.55s; --t-slow:1.05s; --t-reveal:1.15s;

  /* ── brandmark + pattern, built from the official assets ── */
  --pca-gold:#aa9767;
  --pattern:repeating-linear-gradient(122deg,
     rgba(170,151,103,.075) 0 1px, transparent 1px 14px);
  --pattern-lt:repeating-linear-gradient(122deg,
     rgba(170,151,103,.14) 0 1px, transparent 1px 14px);
}


/* ══ 0. STRUCTURAL RULES FOR THE PRODUCTION MARKUP ══
   The production pages use a semantic <nav><ul><li> for navigation and an
   SVG sprite for the official logo. These rules give that markup its
   layout. They are not a design change — without them the browser falls
   back to default list styling, which stacks the header navigation
   vertically and leaves the logo unsized. */

/* SVG sprite: defined once per document, referenced with <use>. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* ── LOGO SIZING ────────────────────────────────────────────
   The official lockup is stacked (wordmark across the brandmark) at
   a 302:236 ratio, so width drives header height directly. Sizes are
   set per placement: the header is bounded by how tall the bar may
   become, the footer is not, so it carries the larger signature. */
.lg{display:block;width:176px;height:auto;aspect-ratio:302/236;
  color:var(--egg);transition:color var(--t-mid),width var(--t-mid)}
.hdr{padding-block:16px}
.hdr.on .lg{width:140px}
body.pg-lt .hdr.on .lg,.lt .lg{color:var(--char)}
.ft .lg{color:var(--egg);width:264px}
@media(max-width:1180px){.lg{width:168px}.hdr.on .lg{width:136px}}
.brand{display:block;flex:none}
.brand--sm .lg{width:152px}
.mk{display:block;width:100%;height:100%}
.sig .mk{width:34px;height:auto;aspect-ratio:252/236}
.pt .mk{width:30px;height:auto;aspect-ratio:252/236}
@media(max-width:760px){.lg{width:152px}.hdr.on .lg{width:126px}.ft .lg{width:204px}}
@media(max-width:400px){.lg{width:142px}.hdr.on .lg{width:120px}.ft .lg{width:192px}}

/* Primary navigation — the <ul> is the flex row, not .nav itself.
   .nav is left at its default display so the 1180px hide rule
   earlier in the sheet is not overridden by source order. */
.nav ul{display:flex;align-items:center;flex-wrap:nowrap;gap:34px;
  list-style:none;margin:0;padding:0}
.nav li{margin:0;padding:0}
.nav li::marker{content:""}
/* Seven labels of this length only fit at 34px gaps above ~1500px.
   Below that the gap and tracking step down so the row stays on ONE
   line all the way to the 1180px burger breakpoint. Measured against
   the real strings in Foundry Sterling — the longest is
   "THE BILLIONAIRE EXPERIENCE". */
/* Re-measured after the logo was enlarged: the nav steps down a little
   earlier so the header still holds logo + navigation + CTA on one line
   at every width down to the 1180px burger breakpoint. */
/* Navigation step-downs are defined once in the UX block below. */

/* Mobile overlay list */
.mob__nav ul{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.mob__nav li{margin:0;padding:0}
.mob[inert]{opacity:0;pointer-events:none}

/* Footer column headings are <h2> for document structure, styled as labels. */
.ft__h{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px;font-weight:500}

/* Menu rows are <article> with <h3>/<p>/<p>; reset the default margins. */
.mn__n{font-family:var(--serif);font-weight:400;margin:0}
.mn__d,.mn__p{margin:0}

/* ══ 1. THE MUSTARD LINE — the site's recurring signature ══
   One rule, many jobs. Drawn on reveal, never everywhere at once. */
.line{display:block;height:1px;background:var(--gold);width:100%;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--e-line)}
.line.in{transform:scaleX(1)}
.line--short{max-width:64px}
.line--soft{background:var(--gold-h)}
.line--v{width:1px;height:auto;align-self:stretch;transform:scaleY(0);transform-origin:top}
.line--v.in{transform:scaleY(1)}

/* the eyebrow rule is the same line, at rest */
.eyebrow::before{transition:width var(--t-mid) var(--e-line)}
.rv.in .eyebrow::before{width:26px}

/* section seam: a hairline that draws as the section arrives */
.seam{height:1px;background:var(--gold);opacity:.42;transform:scaleX(0);
  transform-origin:center;transition:transform 1.4s var(--e-line)}
.seam.in{transform:scaleX(1)}

/* ══ 2. BRANDMARK — the official "A", used as a monogram ══ */
.mark-bg{position:absolute;pointer-events:none;z-index:0;
  opacity:.045;width:min(52vw,620px);aspect-ratio:252/236}
.mark-bg svg{width:100%;height:100%;display:block}
.mark-bg--r{right:-6%;bottom:-14%}
.mark-bg--l{left:-8%;top:-10%}
.lt .mark-bg{opacity:.07}
@media(max-width:760px){.mark-bg{width:78vw;opacity:.035}}

/* small monogram used as an end-of-page signature */
.sig{display:flex;justify-content:center;padding-block:clamp(40px,5vw,72px)}
.sig svg{width:34px;opacity:.5}

/* ══ 3. OFFICIAL PATTERN — near-subliminal, light grounds only ══ */
.pat{position:relative}
.pat::before{content:"";position:absolute;inset:0;background:var(--pattern);pointer-events:none;z-index:0}
.lt.pat::before{background:var(--pattern-lt);opacity:.55}
.pat>*{position:relative;z-index:1}

/* ══ 4. PHOTOGRAPHY — always visible ══
   No mask, no clip-path, no opacity gate, no JavaScript dependency.
   A photograph is content, not an effect. The only motion is an
   optional hover scale on pointer devices. */
.fr{position:relative;overflow:hidden}
.fr img,.fr picture>img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-out)}
@media(hover:hover) and (pointer:fine){
  .fr:hover img{transform:scale(1.03)}
}

/* ══ 5. SECTION ENTRANCE — safe by default ══
   The hidden start state only exists once JavaScript has confirmed it
   can reveal again (html.js). Without JS, everything is simply visible. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(22px)}
html.js .rv.in{opacity:1;transform:none;
  transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
html.js .rv[data-d="1"].in{transition-delay:.08s}
html.js .rv[data-d="2"].in{transition-delay:.16s}
html.js .rv[data-d="3"].in{transition-delay:.24s}
html.js .rv[data-d="4"].in{transition-delay:.32s}

/* ══ 6. MICROINTERACTIONS ══ */
.btn{position:relative;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;
  transform:scaleY(0);transform-origin:bottom;z-index:-1;
  transition:transform var(--t-mid) var(--e-io),opacity var(--t-mid)}
.tl::after{transition:transform var(--t-mid) var(--e-out)}
.tl:hover::after{transform:translateX(5px)}

/* text link: the line travels rather than switching on */
.ul{position:relative;padding-bottom:3px}
.ul::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--e-line)}
.ul:hover::after{transform:scaleX(1);transform-origin:left}

/* nav active/hover already uses the line; slow it to the token */
.nav a::after{transition:transform var(--t-mid) var(--e-line)}



/* document rows: arrow travel + line response */
.doc__a{transition:transform var(--t-mid) var(--e-out)}
.doc{position:relative}
.doc::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--e-line)}
@media(hover:hover){.doc:hover::after{transform:scaleX(1)}}

/* menu rows: same language */
.mn__r{position:relative}
.mn__r::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--e-line)}
@media(hover:hover){.mn__r:hover::after{transform:scaleX(1)}}

/* form focus: branded, visible, calm */
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--gold);box-shadow:0 1px 0 0 var(--gold)}
.chip{transition:background var(--t-fast) var(--e-io),border-color var(--t-fast),color var(--t-fast)}

/* ══ 7. PAGE TRANSITION — brief, branded, never blocking ══
   Fires on internal navigation only; content is already in the DOM
   of the next document, so nothing waits on the animation. */
.pt{position:fixed;inset:0;z-index:200;pointer-events:none;
  background:var(--ink);transform:scaleY(0);transform-origin:bottom;
  display:grid;place-items:center}
.pt.go{transform:scaleY(1);transform-origin:top;transition:transform .42s var(--e-io)}
.pt svg{width:30px;opacity:0;transition:opacity .3s .12s}
.pt.go svg{opacity:.55}


/* ══ 9. REDUCED MOTION — everything still legible and complete ══ */
@media(prefers-reduced-motion:reduce){
  .line,.line--v,.seam{transform:none!important;transition:none!important}
  .fr img{transform:none!important;transition:none!important}
  .pt{display:none!important}
}

/* ══ 10. FOCUS — branded and always visible ══ */
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:1px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--egg);
  padding:14px 22px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* ══ 11. BREADCRUMBS ══ */
.bc{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-35);margin-bottom:20px}
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bc li::after{content:"/";margin-left:10px;color:var(--gold);opacity:.6}
.bc li:last-child::after{display:none}
.bc a{opacity:.8}.bc a:hover{opacity:1;color:var(--gold)}
.bc [aria-current]{color:var(--dim-d)}

/* ══ 12. MOBILE PASS ══ */
@media(max-width:760px){
  body{font-size:16px}
  h1{font-size:clamp(2.15rem,9.5vw,3rem);line-height:1.04}
  h2{font-size:clamp(1.65rem,7vw,2.2rem)}
  .hero{min-height:88svh}
  .hero__in{padding-block:120px 40px}
  .lede{font-size:1rem;line-height:1.72}
  .btn{padding:17px 26px;min-height:52px}
  .btns{gap:10px}
  .btns .btn{flex:1 1 100%}
  .chip{min-height:46px;display:inline-flex;align-items:center}
  .doc{padding-block:22px}
  .mn__r{padding-block:22px}
  .mv{padding-block:26px}
  .sp{gap:30px}
  .phero{min-height:auto}
  .phero__in{padding-block:118px 36px}
}
@media(hover:none){
  /* nothing may depend on hover on touch devices */
  .fr:hover>img{transform:none}
  .doc:hover::after,.mn__r:hover::after{transform:scaleX(0)}
  .mn__r:hover,.doc:hover{background:none;padding-inline:0}
}

/* ══ 13. DEV GATE — remove class="dev" from <html> for production ══ */
html:not(.dev) [data-dev]{display:none!important}
html:not(.dev) .ph__l{display:none}
html:not(.dev) .slot{background:none;border-left:0;padding:0;color:inherit}

.mprice{margin-top:26px;font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-55);display:flex;align-items:baseline;gap:12px}
/* The membership price sits on the dark band, so it is set in gold —
   5.2:1 on charcoal. On a light section it falls back to charcoal,
   because gold on eggnog is only 2.4:1 and would fail. */
.mprice span{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem);letter-spacing:-.004em;
  text-transform:none;color:var(--gold)}
.lt .mprice span{color:var(--char)}

/* Mobile focal points. Each photograph carries its own data-pos-m; the
   taller mobile crop often needs the subject moved. Applied with a tiny
   attribute selector so no JavaScript is involved. */
@media(max-width:760px){
  .fr img[data-pos-m]{object-position:var(--pos-m,50% 50%)}
}

/* ══ 14. RESPONSE — the Menus row behaviour, applied site-wide ══
   Everything is visible by default. Motion is added, never required.
   Pointer reactions are confined to fine-pointer devices. */

/* Section entrance is defined once, in section 5 above. */

/* ── photographs settle in; they are never hidden ── */
html.js .rv .fr img{transform:scale(1.025)}
html.js .rv.in .fr img{transform:none;transition:transform 1.2s var(--e-out)}

/* ── grids arrive with a light stagger ── */
html.js .xp .xp__c,html.js .spec>div,html.js .trd__c,html.js .mn__r,html.js .proc__s{
  opacity:0;transform:translateY(16px)}
html.js .rv.in .xp__c,html.js .in .spec>div,html.js .rv.in .trd__c,
html.js .rv.in .mn__r,html.js .in .proc__s,html.js .xp__c.in,html.js .spec>div.in,
html.js .trd__c.in,html.js .mn__r.in,html.js .proc__s.in{
  opacity:1;transform:none;
  transition:opacity .8s var(--e-out) calc(var(--i,0) * 90ms),
             transform .8s var(--e-out) calc(var(--i,0) * 90ms)}

/* ── the gold rule draws on arrival ── */
html.js .line{transform:scaleX(0);transform-origin:left}
html.js .line.in,html.js .rv.in .line{transform:scaleX(1);
  transition:transform 1s var(--e-line) .12s}
html.js .center .line,html.js .stmt .line{transform-origin:center}

/* ── POINTER REACTIONS — fine pointers only ────────────────── */
@media (hover:hover) and (pointer:fine){

  /* menu rows: the reference behaviour, preserved and sharpened */
  .mn__r{transition:background .5s var(--e-io),padding-inline .5s var(--e-out)}
  .mn__n,.mn__p{transition:transform .5s var(--e-out),color .4s}
  .mn__r:hover .mn__n{transform:translateX(4px)}
  .mn__r:hover .mn__p{color:var(--gold)}

  /* experience cards */
  .xp__c{transition:transform .6s var(--e-out)}
  .xp__c h3,.xp__c .xp__k{transition:transform .6s var(--e-out),color .4s}
  .xp__c:hover h3{transform:translateX(4px)}
  .xp__c:hover .xp__k{color:var(--gold-lo)}
  .xp__c:hover .fr img{transform:scale(1.03)}
  .xp__c .fr img{transition:transform 1.1s var(--e-out)}

  /* specialisms, capability cards, membership privileges */
  .spec>div,.trd__c{transition:background .5s var(--e-io),border-color .5s}
  .spec>div:hover,.trd__c:hover{background:rgba(170,151,103,.05)}
  .spec>div h3,.spec__k,.trd__c h3{transition:transform .5s var(--e-out),color .4s}
  .spec>div:hover .spec__k,.trd__c:hover h3{transform:translateX(3px);color:var(--gold)}

  /* Billionaire movements */
  .mv{transition:background .5s var(--e-io)}
  .mv:hover{background:rgba(170,151,103,.04)}
  .mv:hover .mv__n{color:var(--gold)}
  .mv__n{transition:color .5s}

  /* documents */
  .doc__t{transition:color .45s,transform .5s var(--e-out)}
  .doc:hover .doc__t{color:var(--gold);transform:translateX(3px)}
  .doc:hover .doc__a{transform:translateY(4px)}
  .doc__a{transition:transform .5s var(--e-out)}

  /* buttons and links */
  .btn{transition:background .45s var(--e-io),color .45s,border-color .45s}
  .tl{transition:gap .45s var(--e-out),border-color .4s}
  .tl:hover{gap:17px;border-color:var(--gold)}
}

/* ── LOYALTY CARD — the real artwork, presented as an object ── */
.lcard{margin:0;position:relative;max-width:620px;margin-inline:auto;
  transition:transform .9s var(--e-out),box-shadow .9s var(--e-out);
  transform-style:preserve-3d;will-change:transform}
.lcard img{display:block;width:100%;height:auto;aspect-ratio:1063/709;
  border-radius:var(--radius-lg);box-shadow:0 26px 60px -28px rgba(0,0,0,.62)}
@media (hover:hover) and (pointer:fine){
  .lcard:hover{box-shadow:0 34px 74px -30px rgba(0,0,0,.7)}
}
@media(max-width:900px){.lcard{max-width:100%}}
@media(prefers-reduced-motion:reduce){.lcard{transform:none!important;transition:none}}

/* ══════════════════════════════════════════════════════════════
   CORNER LANGUAGE — one radius, applied consistently.
   Softly finished, never app-like. No pill shapes, no 20px+ radii.
   Nothing else changes: heights, padding, type, colour, borders,
   hover behaviour, transitions, spacing and alignment are untouched.
   ══════════════════════════════════════════════════════════════ */
:root{
  --radius:8px;        /* photographs, panels, cards, buttons */
  --radius-sm:6px;     /* small controls, so they read in proportion */
  --radius-lg:10px;    /* large full-bleed planes only */
}

/* ── photographs ─────────────────────────────────────────────
   .fr already clips its child, so the radius on the frame is
   enough; the image inherits the clip. Full-bleed planes and
   hero sections stay square: a radius on a full-viewport edge
   reads as a mistake, not a detail. */
.fr{border-radius:var(--radius)}
.fr img,.fr picture>img{border-radius:inherit}
.hero,.hero__m,.hero__m img,
.phero,.phero__m,.phero__m img,
.bleed,.bleed .fr,.bleed .fr img{border-radius:0}
.sp__m .stack2{border-radius:var(--radius)}

/* placeholder frames follow the photographs they stand in for */
.ph{border-radius:var(--radius)}
.hero__m .ph,.phero__m .ph{border-radius:0}

/* ── panels, boxes and bordered containers ───────────────── */
.vs,.spec,.trd,.fmt,.proc,.cap,.svc,.strip{
  border-radius:var(--radius);overflow:hidden}
/* .mn and .faq are row lists, not panels. They stay square: the menu
   row's travelling gold rule sits at bottom:-1px and would be clipped
   by overflow:hidden on a rounded container. */
.mn,.faq{border-radius:0;overflow:visible}
/* grids that use 1px gaps as dividers keep their dividers: only the
   outer container is rounded, and overflow clips the corner cells */
.done,.check,.card,.lcard img{border-radius:var(--radius)}

/* ── buttons and button-like controls ────────────────────────
   .btn already carries overflow:hidden and .btn::after is inset:0,
   so the hover fill is clipped by the radius and cannot bleed. */
.btn,.btn--q,.btn--sm,.chip,.doc__m,
button.btn,a.btn,input[type="submit"],button[type="submit"]{
  border-radius:var(--radius)}
.btn::after,.btn::before{border-radius:inherit}
.chip{border-radius:var(--radius-sm)}
.doc__m{border-radius:var(--radius-sm)}

/* the sticky mobile action bar sits flush to the viewport edge,
   so its buttons stay square — a rounded corner there would float */
.bar .btn{border-radius:0}

/* mobile menu actions follow the standard radius */
.mob .btn,.mob__f .btn{border-radius:var(--radius)}

/* ── form controls ───────────────────────────────────────────
   Fields are underline-only by design, so a radius would have
   nothing to sit on. The rule below keeps that intentional and
   stops a stray corner appearing on focus. */
.f input,.f select,.f textarea{border-radius:0}

.skip{border-radius:var(--radius-sm)}

/* focus rings follow the shape they surround */
:focus-visible{border-radius:var(--radius-sm)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{border-radius:0}

/* ── large planes ────────────────────────────────────────── */
.lcard{border-radius:var(--radius-lg)}
.lcard img{border-radius:var(--radius-lg)}

/* Safari repaints rounded corners over transformed children
   unless the stacking context is isolated. */
.fr,.btn,.lcard{isolation:isolate}

/* ══ HERO TREATMENT — photography first ══
   The image itself is barely darkened. Legibility comes from a
   gradient concentrated behind the text block, not from blackening
   the whole frame, so the photograph stays visible across the rest
   of the composition. */
/* Art-directed per hero. The homepage overhead table is a bright,
   evenly lit frame and needs more depth than the page heroes, which
   are already darker at source. */
.hero__m img{filter:brightness(.64) saturate(.96) contrast(1.06)}
.phero__m img{filter:brightness(.82) saturate(.96)}
body[data-page="billionaire"] .phero__m img{filter:brightness(.68) saturate(.92)}

/* Readability comes from the left/bottom corner where the copy sits.
   The right side and centre of the frame stay clear. */
.hero__v{background:
  linear-gradient(to top,
    rgba(20,23,26,.94) 0%,
    rgba(20,23,26,.70) 20%,
    rgba(20,23,26,.24) 44%,
    rgba(20,23,26,0)   66%),
  linear-gradient(100deg,
    rgba(20,23,26,.72) 0%,
    rgba(20,23,26,.28) 34%,
    rgba(20,23,26,0)   58%)}

.phero__v{background:
  linear-gradient(to top,
    rgba(20,23,26,.88) 0%,
    rgba(20,23,26,.52) 26%,
    rgba(20,23,26,.14) 56%,
    rgba(20,23,26,0)   80%),
  linear-gradient(105deg,
    rgba(20,23,26,.52) 0%,
    rgba(20,23,26,0)   52%)}

/* narrow screens put the text over more of the frame, so the
   bottom gradient reaches a little higher — the image is not dimmed */
@media(max-width:760px){
  .hero__v{background:linear-gradient(to top,
    rgba(20,23,26,.92) 0%,rgba(20,23,26,.66) 26%,
    rgba(20,23,26,.26) 52%,rgba(20,23,26,0) 76%)}
  .phero__v{background:linear-gradient(to top,
    rgba(20,23,26,.90) 0%,rgba(20,23,26,.56) 34%,
    rgba(20,23,26,.12) 68%,rgba(20,23,26,0) 88%)}
}

/* ══════════════════════════════════════════════════════════════
   UX PASS — readability, tap targets, responsive arrangement.
   No visual redesign: sizes, spacing and behaviour only.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · MICRO-LABEL READABILITY ──────────────────────────────
   Uppercase micro-labels were between 9.6px and 11.6px, several with
   very open tracking that made them harder to read rather than more
   refined. Raised toward a ~12.5-13.5px floor with tracking eased. */
.eyebrow{font-size:.76rem;letter-spacing:.24em}
.hero__base{font-size:.76rem;letter-spacing:.16em}
.strip span{font-size:.76rem;letter-spacing:.15em}
.xp__k{font-size:.72rem;letter-spacing:.18em}
.lbl{font-size:.72rem;letter-spacing:.16em}
.doc__m{font-size:.72rem;letter-spacing:.16em}
.ft__h{font-size:.70rem;letter-spacing:.2em}
.cap{font-size:.74rem;letter-spacing:.14em}
.bc,.bc a,.bc span,.crumb{font-size:.72rem;letter-spacing:.16em}
.f label{font-size:.72rem;letter-spacing:.17em}
.mn__p small{font-size:.70rem;letter-spacing:.14em}
.price span{font-size:.74rem;letter-spacing:.18em}
.mn__tag{font-size:.68rem;letter-spacing:.17em}
.rows b{font-size:.72rem;letter-spacing:.16em}
.tl{font-size:.74rem;letter-spacing:.17em}
.mprice{font-size:.76rem;letter-spacing:.18em}
.micro{font-size:.86rem}
.vs__h{font-size:.72rem;letter-spacing:.18em}
.btn{font-size:.76rem;letter-spacing:.17em}
.btn--sm{font-size:.70rem;letter-spacing:.15em}
.bar a{font-size:.72rem;letter-spacing:.15em}
.ft ul{font-size:1rem}
.ft__l{font-size:.8rem}

/* ── 2 · NAVIGATION LEGIBILITY ────────────────────────────────
   Seven long labels could only fit below 1300px by dropping to ~10px,
   which is not comfortably readable. The nav now holds an ~11px floor
   and the burger — whose labels are large — takes over earlier. */
@media(max-width:1600px){.nav ul{gap:30px}.nav a{font-size:.68rem;letter-spacing:.16em}}
@media(max-width:1560px){.nav ul{gap:26px}.nav a{font-size:.66rem;letter-spacing:.14em}}
@media(max-width:1440px){.nav ul{gap:22px}.nav a{font-size:.645rem;letter-spacing:.12em}.lg{width:172px}}
@media(max-width:1340px){.nav ul{gap:18px}.nav a{font-size:.635rem;letter-spacing:.10em}.lg{width:164px}}
@media(max-width:1300px){.nav,.hdr .btn{display:none}.burger{display:block}}

/* ── 3 · TAP TARGETS — 44px minimum interactive area ───────── */
.nav a{padding-block:10px}
.ft ul a{display:inline-block;padding-block:7px}
.bar a{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
.chip{min-height:44px;display:inline-flex;align-items:center}
.burger{width:48px;height:48px}
.mob__x{min-width:48px;min-height:48px}
.doc{min-height:56px}
.tl{padding-block:8px}
.ul{padding-block:4px}

/* ── 4 · PROOF ROW — reflow rather than shrink ────────────────
   Four proof points cannot stay readable in one row on a phone, so
   below 760px they form a 2x2 grid at full size instead of shrinking. */
@media(max-width:760px){
  .strip{grid-template-columns:1fr 1fr}
  .strip>div{padding-block:22px}
  .strip>div:nth-child(odd){border-left:0}
  .strip>div:nth-child(n+3){border-top:1px solid var(--hair-d)}
  .lt .strip>div:nth-child(n+3){border-color:var(--hair-l)}
  .strip span{font-size:.72rem;letter-spacing:.13em;line-height:1.5}
  .hero__base{font-size:.72rem;letter-spacing:.14em;line-height:1.6}
  .eyebrow{font-size:.72rem;letter-spacing:.2em}
}

/* ── 5 · MOBILE HERO — its own overlay, not the desktop one ─── */
@media(max-width:760px){
  .hero__m img{filter:brightness(.60) saturate(.94) contrast(1.06)}
  .hero__v{background:linear-gradient(to top,
    rgba(20,23,26,.95) 0%,rgba(20,23,26,.84) 32%,
    rgba(20,23,26,.68) 52%,rgba(20,23,26,.60) 66%,
    rgba(20,23,26,.18) 80%,rgba(20,23,26,0) 92%)}
}

/* ── 6 · FORM USABILITY ──────────────────────────────────────
   Inputs stay at/above 16px so iOS does not zoom the page on focus. */
.f input,.f select,.f textarea{font-size:1.05rem;min-height:48px}
.f textarea{min-height:120px}

/* ══════════════════════════════════════════════════════════════
   ALIGNMENT & PRESENCE PASS
   Symmetry, proportion and CTA weight only. No new components,
   no colour, type-family, photograph or copy change. Every value
   below resolves to the existing spacing, colour and radius
   tokens declared earlier in this sheet.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · ONE VERTICAL SPACING SCALE ──────────────────────────
   Section padding previously used three unrelated clamps. It now
   uses three steps of a single scale, so equivalent section types
   breathe identically down the whole site. */
:root{
  --sp-lg:clamp(96px,10vw,164px);   /* major section rhythm      */
  --sp-md:clamp(64px,6.6vw,108px);  /* secondary bands           */
  --sp-xl:clamp(120px,12.5vw,205px);/* the quiet statement bands */
}
.band{padding-block:var(--sp-lg)}
.band--s{padding-block:var(--sp-md)}
.stmt{padding-block:var(--sp-xl)}

/* ── 2 · TWO-COLUMN BALANCE ──────────────────────────────────
   The editorial splits ran 62.5/37.5, which read as a large
   photograph beside a floating paragraph. Both now resolve to a
   controlled 55/45, so image and text carry comparable mass. */
.sp--60{grid-template-columns:1.1fr .9fr}
.sp--40{grid-template-columns:.9fr 1.1fr}
@media(max-width:960px){.sp--60,.sp--40{grid-template-columns:1fr}}

/* ── 3 · CARD GRIDS ON A TRUE COLUMN GRID ────────────────────
   The experiences grid used a 7/5, 5/7, 6/6 editorial rhythm, so
   no two cards shared a width and the images ran at four different
   aspect ratios. Three equal columns, one aspect ratio, equal
   gutters. The centre card now sits on the page axis. */
.xp{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,34px);align-items:start}
.xp__c,.xp__c:nth-child(n){grid-column:span 1}
.xp .xp__m{aspect-ratio:4/5;height:auto}
.xp__c{display:flex;flex-direction:column;height:100%}
.xp__b{padding-top:26px}
@media(max-width:1100px){.xp{grid-template-columns:repeat(2,1fr)}
  .xp__c,.xp__c:nth-child(n){grid-column:span 1}}
@media(max-width:700px){.xp{grid-template-columns:1fr}
  .xp__c,.xp__c:nth-child(n){grid-column:span 1}}

/* equal-height cells across every card grid on the site */
.spec>div,.trd__c,.fmt>div,.proc__s{display:flex;flex-direction:column}
.strip>div{display:flex;flex-direction:column;justify-content:flex-end}

/* ── 4 · CENTRED SECTIONS SHARE ONE AXIS ─────────────────────
   The eyebrow is an inline-flex label with a 26px rule before it,
   so in a centred block it sat left of the true centre. */
.stmt .eyebrow,.stmt .btns{justify-content:center}
.stmt .lede,.stmt .micro{margin-inline:auto;text-align:center}
.stmt .tick-r{margin-inline:auto}

/* ── 5 · MENU ROWS — prices on a single right-hand axis ──────
   The price column was auto-width, so every price started at a
   different x-position. It now holds one column and aligns right. */
.mn__r{grid-template-columns:minmax(0,2.1fr) minmax(0,3.4fr) minmax(200px,auto)}
.mn__p{text-align:right}
.mn__p small{text-align:right}
@media(max-width:840px){.mn__r{grid-template-columns:1fr}
  .mn__p,.mn__p small{text-align:left}}

/* ── 6 · DOCUMENT ROWS — one balanced set of three ───────────
   The badge and arrow columns were auto-width, so the three rows
   did not align. Both are now fixed, giving three identical rows. */
.doc{grid-template-columns:minmax(0,1.5fr) minmax(0,2.6fr) 94px 28px;align-items:center}
.doc__m{justify-self:start;text-align:center;width:94px}
.doc__a{justify-self:end;text-align:right}
@media(max-width:820px){.doc{grid-template-columns:1fr auto}
  .doc__m{width:auto}}

/* ── 7 · PRIMARY CTA — BOOK NOW carries more weight ──────────
   Presence raised roughly a quarter: taller, wider, with a floor
   width so a primary action never renders as a small chip. Type
   and colour are unchanged; this is proportion only. */
.btn{padding:23px 46px;min-height:60px;min-width:212px;font-size:.78rem}
/* secondary / contextual actions sit one clear step below */
.btn--q{padding:20px 38px;min-height:54px;min-width:188px;font-size:.76rem}
.btns{gap:16px;align-items:center}

/* ── 8 · HEADER — optically centred navigation ───────────────
   Flex space-between centred the navigation between two unequal
   blocks. A three-column grid puts the nav on the true page axis
   whatever the logo and CTA measure, and the CTA is given enough
   width to read immediately as the primary action. Header height
   is set by the logo, so none of this makes the bar taller. */
@media(min-width:1301px){
  .hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px}
  .hdr .brand{justify-self:start}
  .hdr .nav{justify-self:center;display:flex;justify-content:center}
  .hdr .btn--sm{justify-self:end}
}
.hdr .btn--sm{padding:16px 34px;min-height:50px;min-width:172px;font-size:.74rem}

/* ── 9 · STICKY MOBILE ACTION BAR ────────────────────────────
   Book Now was rendering as the ghost half of the bar while the
   secondary action carried the solid fill. The primary now takes
   the fill and the larger share of the width, at a comfortable
   tap height, without covering more of the screen than before. */
.bar a:first-child{background:var(--gold);color:var(--ink);border-right:1px solid rgba(20,23,26,.22);flex:1.45}
.bar a:last-child{background:transparent;color:var(--egg);flex:1}
.bar a{min-height:60px;padding:19px 10px;font-size:.74rem;min-width:0}
@media(max-width:820px){body{padding-bottom:64px}}

/* ── 10 · BUTTONS BELONG TO THE GRID AROUND THEM ─────────────
   A centred section centres its action; a left-aligned column
   starts its action on the column's own left edge. No offsets. */
.stmt .btns,.center .btns{justify-content:center}
.wrap--t .btns{justify-content:center}

/* ── 11 · FOOTER ON A GRID ───────────────────────────────────
   Columns start on one line rather than each block finding its
   own top, and the link rhythm matches the heading rhythm. */
.ft__g{align-items:start}
.ft__g>div{display:flex;flex-direction:column}
.ft__h{min-height:1.2em}

/* ── 12 · FORM GRID ──────────────────────────────────────────
   Two exactly equal columns, one gutter value, and the submit
   action aligned to the form's own left edge at the primary size. */
.frm{gap:24px 24px}
.frm .f--f .btn{min-width:212px}
@media(max-width:720px){.frm{grid-template-columns:1fr;gap:22px}}

/* ── 13 · TEXT MEASURE ───────────────────────────────────────
   Controlled maximum widths so a paragraph never renders as a
   narrow ribbon beside a large empty area. */
.sp .lede,.sp p{max-width:52ch}
.stmt .lede{max-width:62ch}

/* ── 14 · MOBILE PROPORTION ──────────────────────────────────
   The primary action keeps its weight on a phone without
   dominating the screen, and full-width buttons stay equal. */
@media(max-width:760px){
  .btn{padding:20px 30px;min-height:58px;min-width:0}
  .btn--q{padding:18px 28px;min-height:54px;min-width:0}
  .btns{gap:12px}
  .btns .btn{flex:1 1 100%}
  .xp__b{padding-top:20px}
}

/* ══════════════════════════════════════════════════════════════
   BILLIONAIRE EXPERIENCE — hero treatment
   The halo product is the one page allowed a different mood: the
   frame sinks toward darkness and only the caviar, the crystal and
   the champagne hold light. Scoped to this page alone — no other
   hero changes. Treatment only: the photograph, its crop, the hero
   geometry, the copy position and the layout are untouched.
   ══════════════════════════════════════════════════════════════ */
body[data-page="billionaire"] .hero__m img{
  filter:brightness(.42) saturate(.84) contrast(1.12)}

/* Deepest at the base, where the copy sits; the centre of the frame
   is left open so the served dish still reads. The three layers
   compound, so each one is lighter than it looks in isolation. */
body[data-page="billionaire"] .hero__v{background:
  linear-gradient(to top,
    rgba(20,23,26,.95) 0%,
    rgba(20,23,26,.72) 22%,
    rgba(20,23,26,.36) 48%,
    rgba(20,23,26,.18) 72%,
    rgba(20,23,26,.08) 100%),
  linear-gradient(100deg,
    rgba(20,23,26,.68) 0%,
    rgba(20,23,26,.28) 34%,
    rgba(20,23,26,0)   62%),
  radial-gradient(125% 95% at 50% 43%,
    rgba(20,23,26,0)   46%,
    rgba(20,23,26,.30) 100%)}

@media(max-width:760px){
  body[data-page="billionaire"] .hero__m img{
    filter:brightness(.40) saturate(.82) contrast(1.12)}
  body[data-page="billionaire"] .hero__v{background:
    linear-gradient(to top,
      rgba(20,23,26,.96) 0%,
      rgba(20,23,26,.78) 30%,
      rgba(20,23,26,.40) 58%,
      rgba(20,23,26,.18) 84%,
      rgba(20,23,26,.08) 100%),
    radial-gradient(135% 85% at 50% 40%,
      rgba(20,23,26,0)   42%,
      rgba(20,23,26,.28) 100%)}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE HEADER CLEARANCE — narrow widths only
   The header is fixed and its height is driven by the logo, which
   is 236/302 of its own width. Below 1180px that resolves to a bar
   of roughly 143–163px, while the page heroes only reserved 118–140px
   of top padding — so the breadcrumb ("Home / …") rendered underneath
   the logo and read as clipped. The logo steps down slightly and the
   heroes reserve the real header height plus clear space.
   Desktop (>1180px) is untouched.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .lg{width:136px}                 /* header bar ≈ 138px */
  .hdr.on .lg{width:118px}
  .phero__in{padding-block:160px 36px}
  .bc{margin-bottom:18px}
}
@media(max-width:400px){
  .lg{width:128px}                 /* header bar ≈ 132px */
  .hdr.on .lg{width:112px}
  .phero__in{padding-block:154px 32px}
}

/* The mobile overlay's centre row is a 1fr grid track holding the
   navigation. Grid items default to min-height:auto, so the track
   could not shrink and its own overflow-y never engaged; on a short
   screen the list grew past the viewport and, being centred, lost its
   first item ("Home") behind the logo row. The track can now shrink
   and scroll, the list centres only when there is room to, and the
   rows no longer sit flush against each other. */
@media(max-width:1300px){
  .mob{grid-template-rows:auto minmax(0,1fr) auto;row-gap:clamp(14px,3.5vw,26px)}
  .mob__nav{min-height:0;justify-content:flex-start;overscroll-behavior:contain}
  .mob__nav ul{margin-block:auto}
  .mob .brand--sm .lg{width:132px}
}
@media(max-width:400px){
  .mob .brand--sm .lg{width:118px}
}

/* ══════════════════════════════════════════════════════════════
   RUNNING TEXT — homepage only, once.
   A single band between the hero and the first content section.
   Built from the existing palette, type scale and hairline rules;
   no new colour, family, image, gradient or dependency. Two identical
   tracks translate by exactly -50% of the pair, so the second lands
   where the first began: no restart, no gap, no flicker.
   ══════════════════════════════════════════════════════════════ */
.mq{
  overflow:hidden;                       /* the page can never scroll sideways */
  border-block:1px solid var(--hair-d);
  padding-block:clamp(18px,2.1vw,26px);
  --mq-dur:44s;
}
.mq__t{display:flex;width:max-content;will-change:transform;
  animation:mqRun var(--mq-dur) linear infinite}
.mq__i{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(.78rem,1.02vw,.92rem);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim-d);white-space:nowrap;margin:0;
}
@keyframes mqRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* mobile: same band, calmer pace, type never drops below legible */
@media(max-width:760px){
  .mq{--mq-dur:58s;padding-block:16px}
  .mq__i{font-size:.8rem;letter-spacing:.2em}
}

/* reduced motion: the movement stops and the services stay readable,
   scrollable by hand rather than hidden */
@media(prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mq__t{animation:none;transform:none}
  .mq__i[aria-hidden="true"]{display:none}
}

/* ══════════════════════════════════════════════════════════════
   PCA GEOMETRY — the Company Profile's graphic language, translated.

   The profile builds every composition from one idea: an oversized
   curve that begins outside the page and leaves outside it again,
   taken from the sweeping leg and curved taper of the "A".

   THE INVARIANT. Every arc is a circle whose CENTRE is pinned outside
   the host box on BOTH axes. That is the whole guarantee:

     · the left and right extremities of a circle share y = cy, and cy
       is outside [0,H], so neither can fall inside the frame
     · the top and bottom extremities share x = cx, and cx is outside
       [0,W], so neither can fall inside the frame

   With no extremity inside, the visible curve can only enter through
   one edge and leave through another. It can never close, loop or turn
   back, so it never reads as a circle or a decorative ring.

   The centre is pinned with calc() against the host's own edges, so the
   guarantee holds for any host width and any host height:

     centre off the left  : left:  calc(-1 * (r + gx))  ->  cx = -gx
     centre off the right : right: calc(-1 * (r + gx))  ->  cx = W + gx
     centre off the top   : top:   calc(-1 * (r + gy))  ->  cy = -gy
     centre off the bottom: bottom:calc(-1 * (r + gy))  ->  cy = H + gy

   r, gx and gy are in vw only. Nothing is capped in px. A px cap is what
   broke the previous pass: the circle stopped growing while the section
   kept growing, which dropped the circle's own extremity inside the
   frame and turned a sweep into a visible loop.

   HIERARCHY. Primary is the gold hairline sweep. Secondary is the faint
   cream plane. Tertiary is the small corner bracket.

   Everything here is decorative: z-index 0-1 (site content sits at
   .wrap z-index 2, hero copy at z-index 3), pointer-events none, no
   document flow, no motion, no JavaScript, no raster asset.
   ══════════════════════════════════════════════════════════════ */
:root{
  --g-plane-lt:rgba(246,243,236,.62);   /* cream on eggnog, as the profile */
  --g-plane-dk:rgba(237,232,222,.030);  /* the same gesture on charcoal */
  --g-line-lt:rgba(37,40,42,.10);       /* ink hairline, fallback */
  --g-line-dk:rgba(237,232,222,.085);

  /* One gold, four alphas, tuned so the line is perceived at the same
     delicacy wherever it lands rather than at the same alpha. Measured
     against each backdrop: .30 on eggnog = 1.26:1; .14 on charcoal =
     1.26:1; .155 is the peak over the darkest part of a hero photograph,
     also 1.26:1, which stops the line hardening as it crosses shadow. */
  --g-gold-lt:rgba(170,151,103,.30);    /* over eggnog        */
  --g-gold-dk:rgba(170,151,103,.14);    /* over charcoal      */
  --g-gold-ph:rgba(170,151,103,.155);   /* over photography   */
  --g-gold-cr:rgba(170,151,103,.22);    /* corner bracket, a small mark
                                           needs slightly more to read as
                                           present as a long arc */
}

/* The host clips its own geometry and owns the containing block, so an
   arc can never reach the page edge or escape its section. */
.g-plane,.g-sweep{position:relative;overflow:hidden}

/* ── one primitive: an oversized circle, mostly off-canvas ──────── */
.g-plane::before,.g-sweep::after{
  content:"";position:absolute;pointer-events:none;
  width:calc(var(--gr)*2);height:calc(var(--gr)*2);border-radius:50%;
}

/* LEVEL 2 · the hairline sweep — the primary PCA signature */
.g-sweep::after{z-index:1;border:1px solid var(--g-line-dk)}
.lt .g-sweep::after,.g-sweep.lt::after{border-color:var(--g-line-lt)}
.g-sweep.g-gold::after{border-color:var(--g-gold-dk)}
.lt .g-sweep.g-gold::after,.g-sweep.g-gold.lt::after{border-color:var(--g-gold-lt)}
.hero.g-gold::after,.phero.g-gold::after{border-color:var(--g-gold-ph)}

/* LEVEL 1 · the plane — quiet background architecture, never over content */
.g-plane::before{z-index:0;background:var(--g-plane-dk)}
.lt .g-plane::before,.g-plane.lt::before{background:var(--g-plane-lt)}

/* ── centre anchoring · the invariant, expressed once per corner ──
   Each rule places the circle centre outside the host box on both
   axes. gx and gy are how far beyond the edge the centre sits. */
.s--a::after,
.s--e::after,
.s--j::after,
.g--a::before{
  left:calc(-1*(var(--gr) + var(--gx)));
  top:calc(-1*(var(--gr) + var(--gy)));}
.s--hero::after,
.s--b::after,
.s--f::after,
.s--i::after,
.g--b::before{
  right:calc(-1*(var(--gr) + var(--gx)));
  top:calc(-1*(var(--gr) + var(--gy)));}
.s--c::after,
.s--g::after,
.s--m::after,
.g--c::before{
  left:calc(-1*(var(--gr) + var(--gx)));
  bottom:calc(-1*(var(--gr) + var(--gy)));}
.s--d::after,
.s--h::after,
.s--k::after,
.g--d::before{
  right:calc(-1*(var(--gr) + var(--gx)));
  bottom:calc(-1*(var(--gr) + var(--gy)));}

/* ── radius and origin · desktop (>=1024px) ──────────────────────
   Varied radius, origin, direction and visible portion so no two
   arcs repeat, while all of them stay in one family. */
.s--hero{--gr:40vw;--gx:20vw;--gy:10vw}
.s--a{--gr:74vw;--gx:9vw;--gy:30vw}
.s--b{--gr:61vw;--gx:17vw;--gy:12vw}
.s--c{--gr:95vw;--gx:7vw;--gy:41vw}
.s--d{--gr:69vw;--gx:22vw;--gy:19vw}
.s--e{--gr:88vw;--gx:33vw;--gy:8vw}
.s--f{--gr:80vw;--gx:5vw;--gy:33vw}
.s--g{--gr:56vw;--gx:28vw;--gy:9vw}
.s--h{--gr:106vw;--gx:12vw;--gy:43vw}
.s--i{--gr:121vw;--gx:44vw;--gy:28vw}
.s--j{--gr:47vw;--gx:14vw;--gy:14vw}
.s--k{--gr:113vw;--gx:38vw;--gy:34vw}
.s--m{--gr:66vw;--gx:16vw;--gy:21vw}
.g--a{--gr:84vw;--gx:19vw;--gy:31vw}
.g--b{--gr:76vw;--gx:25vw;--gy:23vw}
.g--c{--gr:92vw;--gx:15vw;--gy:37vw}
.g--d{--gr:72vw;--gx:30vw;--gy:17vw}

/* ── tablet (761-1023px) · flatter arcs, art-directed rather than
   scaled down ─────────────────────────────────────────────────── */
@media(max-width:1023px){
  .s--hero{--gr:60vw;--gx:30vw;--gy:15vw}
  .s--a{--gr:111vw;--gx:14vw;--gy:45vw}
  .s--b{--gr:92vw;--gx:26vw;--gy:18vw}
  .s--c{--gr:133vw;--gx:10vw;--gy:62vw}
  .s--d{--gr:104vw;--gx:33vw;--gy:28vw}
  .s--e{--gr:132vw;--gx:50vw;--gy:12vw}
  .s--f{--gr:120vw;--gx:8vw;--gy:50vw}
  .s--g{--gr:84vw;--gx:42vw;--gy:14vw}
  .s--h{--gr:140vw;--gx:18vw;--gy:64vw}
  .s--i{--gr:171vw;--gx:69vw;--gy:42vw}
  .s--j{--gr:70vw;--gx:21vw;--gy:21vw}
  .s--k{--gr:165vw;--gx:59vw;--gy:51vw}
  .s--m{--gr:99vw;--gx:24vw;--gy:32vw}
  .g--a{--gr:115vw;--gx:29vw;--gy:46vw}
  .g--b{--gr:114vw;--gx:38vw;--gy:34vw}
  .g--c{--gr:117vw;--gx:23vw;--gy:56vw}
  .g--d{--gr:108vw;--gx:45vw;--gy:26vw}
}

/* ── mobile (<=760px) · a dedicated composition, not a hidden one.
   The previous pass removed the sweeps below 760px, which took the
   identity off the phone entirely. Here the radii grow relative to
   the viewport so the visible portion stays a trajectory rather than
   a bulge, and the same centre-outside invariant is verified across
   the phone matrix. ────────────────────────────────────────────── */
@media(max-width:760px){
  .s--hero{--gr:96vw;--gx:44vw;--gy:22vw}
  .s--a{--gr:153vw;--gx:22vw;--gy:69vw}
  .s--b{--gr:132vw;--gx:30vw;--gy:30vw}
  .s--c{--gr:162vw;--gx:18vw;--gy:88vw}
  .s--d{--gr:150vw;--gx:40vw;--gy:44vw}
  .s--e{--gr:164vw;--gx:64vw;--gy:22vw}
  .s--f{--gr:144vw;--gx:14vw;--gy:70vw}
  .s--g{--gr:128vw;--gx:52vw;--gy:24vw}
  .s--h{--gr:166vw;--gx:25vw;--gy:88vw}
  .s--i{--gr:182vw;--gx:73vw;--gy:56vw}
  .s--j{--gr:112vw;--gx:34vw;--gy:34vw}
  .s--k{--gr:183vw;--gx:69vw;--gy:62vw}
  .s--m{--gr:148vw;--gx:36vw;--gy:46vw}
  .g--a{--gr:137vw;--gx:46vw;--gy:52vw}
  .g--b{--gr:141vw;--gx:51vw;--gy:52vw}
  .g--c{--gr:116vw;--gx:35vw;--gy:32vw}
  .g--d{--gr:146vw;--gx:64vw;--gy:40vw}
}

/* LEVEL 3 · corner bracket — occasional, inside a frame that clips it */
.g-corner{position:relative}
.g-corner::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  width:clamp(64px,8vw,132px);height:clamp(64px,8vw,132px);
  top:clamp(14px,1.6vw,26px);left:clamp(14px,1.6vw,26px);
  border:1px solid var(--g-gold-cr);
  border-right-color:transparent;border-bottom-color:transparent;
  border-top-left-radius:100%;
}
@media(max-width:760px){
  /* kept, not hidden — the identity stays present on a phone */
  .g-corner::after{width:56px;height:56px;top:12px;left:12px}
}
@media(max-width:400px){
  .g-corner::after{width:44px;height:44px;top:10px;left:10px}
}