/* ══════════════════════════════════════════════════════════════
   ELYXIUM · PRIVATE — DESIGN SYSTEM
   Coded 1:1 from Figma 6Dn5XYG37Wo2b785nMtRmg · node 46:2 (1470×9936)
   Every value below is measured from the artboard. Nothing outside
   this block invents a size, a colour or a spacing step.
   ══════════════════════════════════════════════════════════════ */
:root{
/* ── 1 · COLOUR — brand book R5, no other values permitted ───── */
  --cream:#F5F2EB;        /* page ground                        */
  --cream-warm:#F3EBDC;   /* figures band, invite top           */
  --plate:#0A0908;        /* the ground the portraits are lit on */
  --paper:#FFFFFF;        /* split body, footer                 */
  --lite:#FFFBF3;         /* type on photography                */
  --ink:#2A2620;          /* display + headings                 */
  --ink-74:rgba(42,38,32,.70);   /* body copy                   */
  --ink-45:rgba(42,38,32,.45);   /* captions, micro-labels      */
  --ink-38:rgba(42,38,32,.38);   /* legal                       */
  --ink-10:rgba(42,38,32,.10);   /* interior rules              */
  --gold:#BC9A5C;         /* primary rules + link hairlines     */
  --gold-deep:#72551E;    /* eyebrows, numerals, ink CTA        */
  --gold-cap:#CDB079;     /* eyebrow + rule on photography      */
  --gold-lite:#FFE1A9;    /* eyebrow on photography             */
  --gold-cta:#F2CE8B;     /* gold CTA fill                      */
  --gold-35:rgba(188,154,92,.35);
  --gold-55:rgba(188,154,92,.55);
  --hairline:rgba(92,67,27,.12);
  --on-cta:#1C1812;

/* ── 2 · TYPE — one family, three weights ────────────────────── */
  --sans:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --w-light:300; --w-book:400; --w-bold:700;

  /* display — 300, negative tracking, clamped to the 1470 ref */
  --fs-d1:clamp(40px,5.45vw,80px);     --lh-d1:1.020; --tr-d1:-.030em;
  --fs-d2:clamp(32px,3.70vw,54px);     --lh-d2:1.090; --tr-d2:-.022em;
  --fs-d3:clamp(27px,2.93vw,43px);     --lh-d3:1.140; --tr-d3:-.018em;
  /* headings — 300 */
  --fs-h1:clamp(23px,2.04vw,30px);     --lh-h1:1.200; --tr-h1:-.014em;
  --fs-h2:clamp(21px,1.77vw,26px);     --lh-h2:1.220; --tr-h2:-.014em;
  --fs-h3:clamp(19px,1.50vw,22px);     --lh-h3:1.320; --tr-h3:-.010em;
  --fs-h4:clamp(18px,1.43vw,21px);     --lh-h4:1.360; --tr-h4:-.010em;
  /* lead + statistic — 300 */
  --fs-lead:clamp(20px,1.77vw,26px);   --lh-lead:1.420;
  --fs-plate:clamp(17px,1.50vw,22.1px);
  --fs-stat:clamp(26px,2.31vw,34px);   --tr-stat:-.018em;
  /* reading — 400 */
  --fs-body:clamp(15px,1.09vw,16px);     --lh-body:1.700;
  --fs-hero:clamp(15px,1.12vw,16.5px);   --lh-hero:1.650;
  --fs-sm:14px;   --lh-sm:1.500;
  --fs-xs:11.5px; --lh-xs:1.600;
  /* labels — 700, uppercase, tracked */
  --fs-eyebrow:clamp(10.5px,.82vw,12px); --tr-eyebrow:.30em;
  --fs-label:12px;                     --tr-label:.22em;
  --fs-sub:11px;                       --tr-sub:.20em;
  --fs-micro:10.5px;                   --tr-micro:.18em;
  --fs-nav:12px;                       --tr-nav:.10em;
  --fs-brand:14.7px;                   --tr-brand:.40em;

/* ── 3 · SPACE — the complete vertical rhythm. 10 steps, no more ─ */
  --sp-1:8px;    --sp-2:14px;   --sp-3:18px;   --sp-4:24px;
  --sp-5:29px;   --sp-6:38px;   --sp-7:50px;   --sp-8:69px;
  --sp-9:96px;
  --sp-sec:clamp(88px,11.6vw,170px);   /* every section's block padding */

/* ── 4 · GRID — 95.84 gutter / 1278.31 measure on a 1470 canvas ── */
  --pad:clamp(22px,6.52vw,95.84px);
  --maxw:1278.31px;      /* Figma measure @1470 canvas */
  --col-gap:clamp(40px,6vw,110px);

/* ── 5 · MOTION — one curve, one duration family ─────────────── */
  --hdr-h:72px;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.5s; --dur-slow:1.1s;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-weight:var(--w-book);-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;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--gold-lite);color:var(--ink);}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}

/* ── type primitives — the ONLY way text is sized ────────────── */
.d1{font-weight:var(--w-light);font-size:var(--fs-d1);line-height:var(--lh-d1);letter-spacing:var(--tr-d1);}
.d2{font-weight:var(--w-light);font-size:var(--fs-d2);line-height:var(--lh-d2);letter-spacing:var(--tr-d2);}
.d3{font-weight:var(--w-light);font-size:var(--fs-d3);line-height:var(--lh-d3);letter-spacing:var(--tr-d3);}
.h1{font-weight:var(--w-light);font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);}
.h2{font-weight:var(--w-light);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);}
.h3{font-weight:var(--w-light);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);}
.h4{font-weight:var(--w-light);font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4);}
.lead{font-weight:var(--w-light);font-size:var(--fs-lead);line-height:var(--lh-lead);
  color:var(--ink);text-wrap:pretty;}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-74);text-wrap:pretty;}
.sm{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-45);}
.eyebrow{font-weight:var(--w-bold);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--gold-deep);}
.sub{font-weight:var(--w-bold);font-size:var(--fs-sub);letter-spacing:var(--tr-sub);
  text-transform:uppercase;color:var(--gold-deep);}
.num{font-weight:var(--w-bold);font-size:var(--fs-label);letter-spacing:.20em;color:var(--gold-deep);}

/* ── layout primitives ───────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
@media(min-width:1470px){.wrap{padding-inline:0;}}
/* large screens: let the measure breathe to 1440 without breaking line length.
   Full-bleed photography and ring geometry are unaffected — they are always edge-to-edge. */
@media(min-width:1680px){:root{--maxw:1440px;}.wrap{padding-inline:0;}}
.sec{position:relative;overflow:hidden;padding-block:var(--sp-sec);}
.sec > .wrap{position:relative;z-index:2;}
.rule{width:48px;height:1px;background:var(--gold);opacity:.65;border:0;}
/* full-bleed geometry: every arc is paired with a straight hairline (brand book rule).
   Declared last in this block so no later `> *` rule can pull it back into flow. */
.geo{position:absolute!important;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;z-index:1;}

/* ── the two interaction idioms ──────────────────────────────── */
.lnk{display:inline-flex;align-items:center;gap:14px;font-weight:var(--w-bold);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);}
.lnk::after{content:"";width:36px;height:1px;background:var(--gold);
  transition:width var(--dur) var(--ease);}
.lnk:hover::after{width:56px;}
.lnk.on-dark{color:rgba(255,251,243,.82);}
.lnk.on-dark::after{background:rgba(255,251,243,.82);opacity:.7;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:46.5px;
  padding:0 28px;font-weight:var(--w-bold);font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.cta--gold{background:var(--gold-cta);color:var(--on-cta);}
.cta--gold:hover{background:var(--gold-lite);}
.cta--ink{background:var(--gold-deep);color:var(--cream);}
.cta--ink:hover{background:var(--ink);}

/* ── header ──────────────────────────────────────────────────── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr-h);
  background:rgba(245,242,235,.96);box-shadow:0 1px 0 var(--hairline);
  backdrop-filter:saturate(140%);}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;}
.brand{display:flex;align-items:center;gap:var(--sp-2);}
.brand img{width:29.4px;height:22.61px;}
.brand span{font-size:var(--fs-brand);letter-spacing:var(--tr-brand);
  text-transform:uppercase;color:var(--ink);}
.nav{display:flex;align-items:center;gap:clamp(18px,2.1vw,30px);}
.nav a{position:relative;font-size:var(--fs-nav);letter-spacing:var(--tr-nav);
  text-transform:uppercase;color:var(--ink-45);
  transition:color var(--dur) var(--ease);}
/* the canonical awwwards underline — draws right→left via transform-origin flip */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:bottom right;
  transition:transform .8s var(--ease);}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{transform:scaleX(1);transform-origin:bottom left;}
.nav a:hover{color:var(--ink);}
/* ── Client Access — same pill, same behaviour as Wealth. The class is
   namespaced: a bare `.access` collides with the Client Access SECTION
   rule further down and inherits its treatment. ─────────────────────── */
.nav a.nav-access{display:inline-flex;align-items:center;gap:9px;
  padding:8px 17px 8px 14px;border-radius:999px;
  border:1px solid var(--gold-55);color:var(--gold-deep);
  font-weight:var(--w-bold);
  transition:background .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease);}
.nav a.nav-access::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:0 0 auto;}
@media(prefers-reduced-motion:no-preference){
  .nav a.nav-access::before{animation:access-blink 5.6s ease-in-out infinite}
  .nav a.nav-access:hover::before{animation-play-state:paused;opacity:1}
}
@keyframes access-blink{
  0%,58%{opacity:1}
  72%{opacity:.22}
  100%{opacity:1}
}
.nav a.nav-access:hover{background:var(--gold-deep);border-color:var(--gold-deep);
  color:var(--cream);}
.burger{display:none;width:26px;height:14px;position:relative;}
.burger i{position:absolute;left:0;right:0;height:1px;background:var(--ink);}
.burger i:nth-child(1){top:0;} .burger i:nth-child(2){bottom:0;}

/* ── hero · 779 ──────────────────────────────────────────────── */
.hero{position:relative;min-height:min(779px,92vh);display:flex;align-items:flex-end;
  padding:120px 0 62.31px;overflow:hidden;}
.hero__bg{position:absolute;inset:-2.5% -2.5%;width:105%;height:105%;object-fit:cover;z-index:0;}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(38,32,24,.42) 0%,rgba(38,32,24,.10) 12.84%,rgba(38,32,24,0) 23.11%),
    linear-gradient(100deg,rgba(38,32,24,.56) 0%,rgba(38,32,24,.28) 42%,rgba(38,32,24,0) 70%);}
.hero .wrap{position:relative;z-index:3;width:100%;}
.hero .eyebrow{color:var(--gold-lite);}
.hero h1{margin-top:var(--sp-5);color:var(--lite);max-width:858px;}
.hero__lede{margin-top:var(--sp-6);max-width:59ch;font-size:var(--fs-hero);
  line-height:var(--lh-hero);color:rgba(255,251,243,.8);}
.hero__acts{margin-top:var(--sp-6);display:flex;align-items:center;
  gap:clamp(24px,2.6vw,38px);flex-wrap:wrap;}

/* ── warm cream field, used by approach · coordination · clients · offices ── */
.field{background:
  linear-gradient(118deg,rgba(255,252,246,.4) 0%,rgba(255,252,246,0) 48%,rgba(210,185,156,.14) 100%),
  var(--cream);}

/* ── 01 approach · 576 ───────────────────────────────────────── */
.approach .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,282px);
  gap:var(--col-gap);align-items:start;}
.approach h2{margin-top:var(--sp-5);max-width:19ch;}
.approach .body{margin-top:var(--sp-7);max-width:44ch;}
.approach aside .rule{margin-top:var(--sp-5);}

/* ── key figures · 159 ───────────────────────────────────────── */
.figures{background:var(--cream-warm);border-block:1px solid var(--gold-35);}
.figures .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.figures .cell{padding:41px 12px 44px;text-align:center;}
.figures .cell + .cell{border-left:1px solid var(--gold-35);}
.figures b{display:block;font-weight:var(--w-light);font-size:var(--fs-stat);
  letter-spacing:var(--tr-stat);color:var(--gold-deep);line-height:1.18;}
.figures span{display:block;margin-top:var(--sp-2);font-weight:var(--w-bold);
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-45);}

/* ── numbered editorial index · services 6-up · clients 4-up ─── */
.idx{margin-top:var(--sp-8);border-top:1px solid var(--gold);}
.idx__grid{display:grid;grid-template-columns:repeat(3,1fr);}
.idx__cell{padding:43px 0 51px;padding-right:clamp(24px,3vw,46px);}
.idx__grid .idx__cell + .idx__cell{border-left:1px solid var(--ink-10);
  padding-left:clamp(24px,2.07vw,30.4px);}
.idx__grid .idx__cell:nth-child(n+4){border-top:1px solid var(--ink-10);}
.idx__cell h3{margin-top:var(--sp-4);max-width:11ch;}
.idx__cell p{margin-top:var(--sp-3);max-width:26ch;font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--ink-74);}

/* ── 02 services · 1137 ──────────────────────────────────────── */
.services h2{margin-top:var(--sp-5);max-width:26ch;}
.services__foot{margin-top:var(--sp-7);display:flex;justify-content:space-between;
  align-items:flex-end;gap:var(--sp-6);flex-wrap:wrap;}
.services__foot p{max-width:42ch;}

/* ── 03 coordination · 1162 ──────────────────────────────────── */
.coord__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,512px);
  gap:var(--col-gap);align-items:start;}
.coord__top h2{margin-top:var(--sp-2);max-width:18ch;}
.coord__brief{border-left:1px solid var(--gold-55);padding-left:30.4px;}
.coord__brief p{margin-top:var(--sp-3);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--ink-74);}
.coord__rows{margin-top:var(--sp-9);border-top:1px solid var(--gold);}
.coord__row{display:grid;grid-template-columns:85.4px minmax(0,1fr) minmax(0,42%);
  align-items:center;gap:var(--sp-3);padding:var(--sp-5) 0;
  border-bottom:1px solid var(--ink-10);}
.coord__row p{font-size:var(--fs-body);line-height:1.6;color:var(--ink-74);}
.coord__note{margin-top:var(--sp-6);border-left:1px solid var(--gold-55);
  padding-left:19px;max-width:46ch;font-size:var(--fs-body);
  line-height:1.6;color:var(--ink-45);}

/* ── plate · 545 ─────────────────────────────────────────────── */
.plate{position:relative;height:clamp(320px,37.09vw,545.3px);overflow:hidden;
  display:flex;align-items:flex-end;}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 32%;z-index:0;}
.plate::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(30,25,18,0) 34%,rgba(30,25,18,.30) 62%,rgba(30,25,18,.72) 100%);}
.plate .wrap{position:relative;z-index:2;width:100%;display:flex;align-items:baseline;
  gap:var(--sp-9);padding-bottom:var(--sp-7);}
.plate--statement{height:clamp(420px,44vw,648px);}
/* the limestone plate is a pale image — reuse the hero's diagonal scrim
   so the statement reads, rather than stacking a heavier bottom fade */
.plate--statement::after{
  background:
    linear-gradient(180deg,rgba(30,25,18,.30) 0%,rgba(30,25,18,0) 26%),
    linear-gradient(94deg,rgba(30,25,18,.74) 0%,rgba(30,25,18,.46) 34%,rgba(30,25,18,.06) 62%,rgba(30,25,18,0) 78%);}
.plate.plate--statement .wrap{justify-content:center;padding-bottom:0;height:100%;}
.plate.plate--statement .wrap{flex-direction:column;align-items:flex-start;gap:var(--sp-4);}
.plate.plate--statement span{font-size:var(--fs-d3);line-height:var(--lh-d3);
  letter-spacing:var(--tr-d3);max-width:20ch;}
.plate .sub{color:var(--gold-cap);flex:0 0 auto;letter-spacing:.24em;}
.plate span{font-weight:var(--w-light);font-size:var(--fs-plate);
  letter-spacing:-.01em;color:var(--lite);}

/* ── 04 clients · 705 ────────────────────────────────────────── */
.clients__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,466px);
  gap:var(--col-gap);align-items:start;}
.clients__top h2{margin-top:var(--sp-2);}
.clients__top .body{padding-top:clamp(0px,4.9vw,72px);}
.clients .idx__grid{grid-template-columns:repeat(4,1fr);}
.clients .idx__cell{padding:41px 0 8px;}
.clients .idx__cell:nth-child(n+4){border-top:0;}
.clients .idx__cell h3{max-width:9ch;}
.clients .idx__cell p{font-size:var(--fs-sm);line-height:var(--lh-sm);
  color:var(--ink-45);max-width:20ch;}

/* ── 05 split: discretion · 1150 ─────────────────────────────── */
.split{display:grid;grid-template-columns:771.74fr 698.25fr;
  min-height:clamp(560px,78.25vw,1150.33px);}
.split__img{position:relative;overflow:hidden;}
.split__img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;}
.split__body{position:relative;background:var(--paper);display:flex;
  flex-direction:column;justify-content:center;
  padding:var(--sp-sec) clamp(48px,5.78vw,85px);overflow:hidden;}
.split__body > :not(.geo){position:relative;z-index:2;}
.split__list{margin-top:var(--sp-6);}
.split__row{display:grid;grid-template-columns:56px minmax(0,1fr);
  align-items:center;padding:23px 0 22px;border-top:1px solid var(--ink-10);}
.split__row:first-child{border-top-color:var(--gold-55);}
.split__row b{font-weight:var(--w-bold);font-size:var(--fs-sub);
  letter-spacing:var(--tr-sub);color:var(--gold-deep);align-self:center;}
.split__row em{font-style:normal;color:var(--gold-deep);}

/* ── 06 the house · 851 ──────────────────────────────────────── */
.house h2{margin-top:var(--sp-5);max-width:20ch;}
.house > .wrap > .body{margin-top:var(--sp-7);max-width:52ch;}
.house__doors{margin-top:var(--sp-8);border-top:1px solid var(--ink-10);
  display:grid;grid-template-columns:repeat(3,1fr);}
.door{padding:47px clamp(24px,2.2vw,32px) 54px;position:relative;}
.door + .door{border-left:1px solid var(--ink-10);}
.door__hd{display:flex;align-items:center;gap:12px;}
.door__hd b{font-weight:var(--w-bold);font-size:var(--fs-label);
  letter-spacing:var(--tr-sub);text-transform:uppercase;
  color:var(--gold-deep);flex:0 0 auto;}
.door__hd i{flex:1 1 auto;height:1px;background:var(--gold);opacity:.5;}
.door h3{margin-top:var(--sp-4);max-width:16ch;}
.door p{margin-top:var(--sp-4);font-size:var(--fs-body);
  line-height:1.6;color:var(--ink-74);max-width:26ch;}
.door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);opacity:0;transition:opacity var(--dur) var(--ease);}
.door:hover::after{opacity:.55;}

/* ── quote · 483 ─────────────────────────────────────────────── */
.quote{position:relative;min-height:clamp(360px,32.86vw,482.98px);display:flex;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;
  padding-block:var(--sp-9);}
.quote img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;z-index:0;}
.quote__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(24,20,14,.15) 0%,rgba(24,20,14,.45) 55%,rgba(24,20,14,.62) 100%);}
.quote .wrap{position:relative;z-index:3;}
.quote .eyebrow{color:var(--gold-cap);}
.quote h2{margin-top:var(--sp-4);color:var(--lite);}
.quote hr{margin:var(--sp-6) auto 0;width:48px;height:1px;
  background:var(--gold-cap);opacity:.85;border:0;}

/* ── 07 the relationship · 545 ───────────────────────────────── */
.people{display:grid;grid-template-columns:698.25fr 771.74fr;
  min-height:clamp(400px,37.09vw,545.3px);}
.people__body{background:rgba(242,206,139,.2);display:flex;flex-direction:column;
  justify-content:center;padding:var(--sp-sec) clamp(44px,5.50vw,81px);}
.people__body h2{margin-top:var(--sp-5);}
.people__body .body{margin-top:var(--sp-7);max-width:42ch;}
.people__body .lnk{margin-top:var(--sp-7);}
.people__img{position:relative;overflow:hidden;}
.people__img img{position:absolute;inset:0;width:105.31%;height:100%;left:-2.66%;
  object-fit:cover;object-position:center 35%;}

/* ── 08 offices · 590 ────────────────────────────────────────── */
.offices .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,731px);
  gap:var(--col-gap);align-items:start;}
.offices h2{margin-top:var(--sp-2);}
.offices .body{margin-top:var(--sp-7);max-width:34ch;}
.office{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,209px);
  gap:var(--sp-4);align-items:baseline;padding:var(--sp-5) 0;
  border-top:1px solid var(--ink-10);}
.office:first-child{border-top:1px solid var(--gold);}
.office p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-74);}

/* ── invite · 723 ────────────────────────────────────────────── */
.invite{text-align:center;
  background:
    radial-gradient(88.2% 36.1% at 50% 40%,rgba(205,176,121,.10) 0%,rgba(205,176,121,0) 70%),
    linear-gradient(180deg,#F3EBDC 0%,#F5F2EB 100%);}
.invite__mark{position:relative;z-index:2;width:58.8px;height:45.23px;margin:0 auto;}
.invite .eyebrow{display:block;margin-top:var(--sp-6);}
.invite h2{margin-top:var(--sp-5);}
.invite .body{margin-top:var(--sp-6);margin-inline:auto;max-width:52ch;}
.invite .cta{margin-top:var(--sp-6);}

/* ── footer · 530 ────────────────────────────────────────────── */
.ftr{background:var(--paper);border-top:1px solid var(--ink-10);padding-top:64px;}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,60px);}
.ftr__mark img{width:34px;height:26px;}
.ftr__mark strong{display:block;margin-top:var(--sp-3);font-weight:var(--w-book);
  font-size:13px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink);}
.ftr__mark p{margin-top:var(--sp-3);max-width:30ch;}
.ftr__col .sub{display:block;padding-top:6px;}
.ftr__col a{display:block;margin-top:var(--sp-1);font-size:var(--fs-sm);
  color:var(--ink-74);transition:color var(--dur) var(--ease);}
.ftr__col a:first-of-type{margin-top:var(--sp-4);}
.ftr__col a:hover{color:var(--ink);}
.ftr__legal{margin-top:var(--sp-9);border-top:1px solid var(--ink-10);
  padding-top:var(--sp-4);max-width:488px;font-size:var(--fs-xs);
  line-height:var(--lh-xs);color:var(--ink-38);}
.ftr__base{margin-top:var(--sp-6);border-top:1px solid var(--ink-10);
  padding:var(--sp-3) 0 22px;display:flex;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-sub);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);}

/* ── entrance — the only motion on the page ──────────────────── */
[data-rise]{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
[data-rise].in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-rise]{opacity:1!important;transform:none!important;transition:none;}
}

/* ── responsive ──────────────────────────────────────────────── */
@media(max-width:1080px){
  .idx__grid{grid-template-columns:repeat(2,1fr);}
  .idx__grid .idx__cell:nth-child(odd){border-left:0;padding-left:0;}
  .idx__grid .idx__cell:nth-child(n+3){border-top:1px solid var(--ink-10);}
  .clients .idx__grid{grid-template-columns:repeat(2,1fr);}
  .clients .idx__cell:nth-child(n+3){border-top:1px solid var(--ink-10);}
  .coord__row{grid-template-columns:54px minmax(0,1fr);}
  .coord__row p{grid-column:2;margin-top:var(--sp-1);}
  .house__doors{grid-template-columns:1fr;}
  .door + .door{border-left:0;border-top:1px solid var(--ink-10);}
}
@media(max-width:860px){
  .nav{display:none;} .burger{display:block;}
  .approach .wrap,.coord__top,.clients__top,.offices .wrap{grid-template-columns:1fr;}
  .clients__top .body{padding-top:0;}
  .figures .wrap{grid-template-columns:repeat(2,1fr);}
  .figures .cell:nth-child(odd){border-left:0;}
  .figures .cell:nth-child(n+3){border-top:1px solid var(--gold-35);}
  .split,.people{grid-template-columns:1fr;}
  .split__img,.people__img{min-height:58vw;}
  .people__body{order:2;}
  .office{grid-template-columns:1fr;gap:var(--sp-1);}
}
@media(max-width:560px){
  .idx__grid,.clients .idx__grid{grid-template-columns:1fr;}
  .idx__grid .idx__cell{border-left:0!important;padding-left:0!important;
    border-top:1px solid var(--ink-10);}
  .idx__grid .idx__cell:first-child{border-top:0;}
  .figures .wrap{grid-template-columns:1fr;}
  .figures .cell{border-left:0!important;}
  .figures .cell + .cell{border-top:1px solid var(--gold-35);}
  .hero__acts{gap:22px;} .cta{width:100%;}
}

/* ══════════════════════════════════════════════════════════════
   GROUP COMPONENTS — built on the same tokens, no new values
   ══════════════════════════════════════════════════════════════ */

/* ── transition · "Success gets complicated." ────────────────────
   One two-column grid: title over plate, deck over the ledger, so the
   lead and the gold rule share a left edge. */
.sec.transition{padding-block:clamp(72px,8vw,120px)}
.transition .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,72px);row-gap:var(--sp-6);
  align-items:start}
.transition h2{grid-column:1;grid-row:1;align-self:end;max-width:12ch;margin:0}
.transition .lead{grid-column:2;grid-row:1;align-self:end;margin:0;max-width:none;
  color:var(--ink);text-wrap:pretty}
.transition__plate{grid-column:1;grid-row:2}
.transition__run{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--sp-6);counter-reset:acc;border-top:1px solid var(--gold)}
.transition__run > span{display:block;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--ink-10);
  font-weight:var(--w-light);font-size:var(--fs-h2);line-height:1.2;
  letter-spacing:var(--tr-h2);color:var(--ink);
  opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.transition.in .transition__run > span{opacity:1;transform:none}
.transition__run > span:nth-child(1){transition-delay:.05s}
.transition__run > span:nth-child(2){transition-delay:.12s}
.transition__run > span:nth-child(3){transition-delay:.19s}
.transition__run > span:nth-child(4){transition-delay:.26s}
.transition__run > span:nth-child(5){transition-delay:.33s}
.transition__run > span:nth-child(6){transition-delay:.40s}
.transition__run > span:nth-child(7){transition-delay:.47s}
.transition__run > span:nth-child(8){transition-delay:.54s}
.transition__run > span > b{display:block;font-weight:inherit}
.transition__run > span > b::after{content:counter(acc,decimal-leading-zero);
  counter-increment:acc;float:right;font-weight:var(--w-bold);
  font-size:var(--fs-sub);letter-spacing:var(--tr-sub);color:var(--gold-deep);
  opacity:.55;transform:translateY(.55em)}

/* ── idea · circles beginning separately, then sharing a centre ─ */
.idea .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);
  gap:var(--col-gap);align-items:center;}
.idea h2{max-width:17ch;}
.idea .body{margin-top:var(--sp-6);max-width:46ch;}
.idea__rings{position:relative;width:100%;aspect-ratio:540/500;max-width:540px;justify-self:center;}
.idea__rings svg{width:100%;height:100%;overflow:visible;}
.idea__rings circle{fill:none;stroke:var(--gold);stroke-width:.9;
  transition:transform 2.2s var(--ease),opacity 1.6s var(--ease);
  transform-box:fill-box;transform-origin:center;}
/* four territories, each pulled toward its label at rest; on entry they
   converge to the interlock — every circle passing exactly through the axis
   crossing (radius = centre→crossing, the R5 geometry rule) */
.idea__rings .r1{transform:translateY(-9%);opacity:.5;}
.idea__rings .r2{transform:translateX(9%);opacity:.5;}
.idea__rings .r3{transform:translateY(9%);opacity:.5;}
.idea__rings .r4{transform:translateX(-9%);opacity:.5;}
.idea__rings.in circle{transform:none;opacity:.8;}
.idea__rings line{stroke:var(--gold);stroke-width:.9;opacity:.3;}
.idea__rings text{font-family:var(--sans);font-weight:var(--w-bold);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  fill:var(--gold-deep);opacity:0;transition:opacity 1.4s var(--ease) .7s;
  paint-order:stroke;stroke:var(--cream);stroke-width:8px;stroke-linejoin:round;}
.idea__rings.in text{opacity:.85;}

/* ── process · one continuous progression, never five blocks ─── */
.process{margin-top:var(--sp-8);position:relative;}
.process__line{position:absolute;left:0;right:0;top:26px;height:1px;
  background:var(--gold);opacity:.45;transform:scaleX(0);transform-origin:left;
  transition:transform 2.4s var(--ease);}
.process.in .process__line{transform:scaleX(1);}
.process__steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative;}
.process__step{padding-right:var(--sp-4);}
.process__step i{display:block;width:7px;height:7px;border-radius:50%;
  background:var(--gold-deep);margin-top:23px;opacity:0;
  transition:opacity .9s var(--ease);}
.process.in .process__step i{opacity:1;}
.process.in .process__step:nth-child(1) i{transition-delay:.25s}
.process.in .process__step:nth-child(2) i{transition-delay:.65s}
.process.in .process__step:nth-child(3) i{transition-delay:1.05s}
.process.in .process__step:nth-child(4) i{transition-delay:1.45s}
.process.in .process__step:nth-child(5) i{transition-delay:1.85s}
.process__step b{display:block;margin-top:var(--sp-4);font-weight:var(--w-light);
  font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);}
.process__step p{margin-top:var(--sp-2);font-size:var(--fs-body);
  line-height:1.6;color:var(--ink-74);max-width:22ch;}

/* ── statement · typography-led, let the language carry it ───── */
.statement{text-align:left;}
.statement h2{max-width:20ch;}
.statement .body{margin-top:var(--sp-6);max-width:48ch;}

/* ── wealth · the subtle temperature shift to the sibling brand ─ */
.wealth{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-warm) 100%);
  border-top:1px solid var(--gold-35);}
.wealth .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,4.5vw,72px);align-items:center;}
.wealth h2{margin-top:var(--sp-5);max-width:20ch;}
.wealth .body{margin-top:var(--sp-6);max-width:40ch;}
.wealth .lnk{margin-top:var(--sp-6);}
.wealth__plate{position:relative;aspect-ratio:4/3;overflow:hidden;}
.wealth__plate img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;}

/* ── close · quiet, confident ending ─────────────────────────── */
.close{text-align:center;
  background:radial-gradient(88% 36% at 50% 42%,rgba(205,176,121,.10) 0%,rgba(205,176,121,0) 70%),
    linear-gradient(180deg,#F3EBDC 0%,#F5F2EB 100%);}
.close h2{margin-top:var(--sp-5);}
.close__acts{margin-top:var(--sp-7);display:flex;flex-direction:column;
  align-items:center;gap:var(--sp-6);}
.close__alt{font-size:var(--fs-sm);color:var(--ink-45);display:flex;
  align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;}

/* ── service territories · overlapping, not departments ──────── */
.terr{border-top:1px solid var(--gold);}
.terr__row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:var(--col-gap);padding:var(--sp-8) 0;border-bottom:1px solid var(--ink-10);
  position:relative;}
.terr__row h3{margin-top:var(--sp-3);max-width:12ch;}
.terr__row .lnk{margin-top:var(--sp-6);}
.terr__list{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-1) var(--col-gap);align-self:center;}
.terr__list li{list-style:none;padding:var(--sp-2) 0;font-size:var(--fs-body);
  line-height:1.5;color:var(--ink-74);border-bottom:1px solid var(--ink-10);}

/* ── people grid · photography-led, no phone numbers on portraits ─ */
.team{margin-top:var(--sp-8);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:var(--sp-8) var(--sp-6);}
.person figure,.bio figure{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--plate);}
/* The ground the delivered photography is lit on, so the plate carries the
   portrait rather than flashing cream underneath it, and reads as a considered
   plate where a portrait has not arrived yet — never a broken image. */
.person figure::before,.bio figure::before{content:"";position:absolute;
  left:50%;top:50%;width:38px;height:29px;transform:translate(-50%,-50%);
  background:url(../assets/svg/mark-onink.svg) center/contain no-repeat;opacity:.22;}
.person figure img,.bio figure img{position:relative;z-index:1;}
.person figure img{width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform 1.4s var(--ease);}
.person:hover figure img{transform:scale(1.03);}
.person b{display:block;margin-top:var(--sp-3);font-weight:var(--w-light);
  font-size:var(--fs-h3);line-height:1.25;letter-spacing:var(--tr-h3);}
.person span{display:block;margin-top:var(--sp-1);font-size:var(--fs-sm);
  line-height:1.45;color:var(--ink-45);}

/* ── bio page ────────────────────────────────────────────────── */
.bio .wrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:var(--col-gap);align-items:start;}
.bio figure{aspect-ratio:4/5;overflow:hidden;background:var(--plate);}
.bio figure img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.bio h1{margin-top:var(--sp-2);}
.bio .role{margin-top:var(--sp-3);font-size:var(--fs-body);color:var(--gold-deep);}
.bio__copy{margin-top:var(--sp-6);max-width:62ch;}
.bio__copy p + p{margin-top:var(--sp-4);}
.bio__contact{margin-top:var(--sp-7);padding-top:var(--sp-4);
  border-top:1px solid var(--ink-10);font-size:var(--fs-sm);color:var(--ink-45);}

/* ── contact form · minimal, direct ──────────────────────────── */
.form{margin-top:var(--sp-8);max-width:620px;}
.field-row{position:relative;border-bottom:1px solid var(--ink-10);
  padding:var(--sp-4) 0 var(--sp-2);transition:border-color var(--dur) var(--ease);}
.field-row:focus-within{border-bottom-color:var(--gold);}
.field-row label{display:block;font-weight:var(--w-bold);font-size:var(--fs-sub);
  letter-spacing:var(--tr-sub);text-transform:uppercase;color:var(--ink-45);}
.field-row input,.field-row textarea{width:100%;margin-top:var(--sp-1);
  font-family:var(--sans);font-weight:var(--w-light);font-size:var(--fs-h4);
  color:var(--ink);background:none;border:0;outline:none;resize:vertical;}
.form .cta{margin-top:var(--sp-7);}
.locs{margin-top:var(--sp-8);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-6);}
.locs div{border-top:1px solid var(--gold);padding-top:var(--sp-3);}
.locs b{display:block;font-weight:var(--w-light);font-size:var(--fs-h3);}
.locs p{margin-top:var(--sp-1);font-size:var(--fs-body);
  line-height:1.6;color:var(--ink-74);}

/* ── access · the entry point, considered not utilitarian ────── */
.access{position:relative;min-height:78vh;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;}
.access img.bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;z-index:0;}
.access__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(30,25,18,.52) 0%,rgba(30,25,18,.30) 55%,rgba(30,25,18,.62) 100%);}
.access .wrap{position:relative;z-index:3;}
.access .eyebrow{color:var(--gold-lite);}
.access h1{margin-top:var(--sp-5);color:var(--lite);}
.access__lede{margin-top:var(--sp-6);margin-inline:auto;max-width:44ch;
  font-size:var(--fs-hero);line-height:var(--lh-hero);color:rgba(255,251,243,.8);}
.access .cta{margin-top:var(--sp-7);}

/* ── interior page opening — each page its own, never a repeat ── */
.open{position:relative;padding-top:calc(var(--hdr-h) + var(--sp-sec));overflow:hidden;}
.open h1{max-width:18ch;}
.open .body{margin-top:var(--sp-6);max-width:52ch;}

@media(max-width:1080px){
  .process__steps{grid-template-columns:repeat(2,1fr);gap:var(--sp-6);}
  .process__line{display:none;}
  .terr__row{grid-template-columns:1fr;gap:var(--sp-6);}
  .bio .wrap{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .idea .wrap,.wealth .wrap{grid-template-columns:1fr;}
  .terr__list{grid-template-columns:1fr;}
  .process__steps{grid-template-columns:1fr;}
}

/* mobile nav panel */
@media(max-width:860px){
  .nav.open{display:flex;position:fixed;top:var(--hdr-h);left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream);border-bottom:1px solid var(--hairline);
    padding:var(--sp-4) var(--pad) var(--sp-6);z-index:59;}
  .nav.open a{padding:var(--sp-3) 0;font-size:var(--fs-h4);letter-spacing:.04em;
    text-transform:none;font-weight:var(--w-light);}
}

/* ══════════════════════════════════════════════════════════════
   THE COMPOSITION — brand book p22 / p25
   "Circles are the only curved element in the system. They appear as
    concentric rings, oversized arcs, and a simple grid of one horizontal
    and one vertical line. Used sparingly, they create structure, never
    decoration."  1px · 50–60% · gold on light, cream over photography.
   Every composition is three layers: surface › graphic layer › voice.
   ══════════════════════════════════════════════════════════════ */
.layer{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;overflow:visible;}
.layer *{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;}
.layer .axis{opacity:.26;}          /* the grid observes */
.layer .arc{opacity:.55;}           /* 50–60%, per the book */
.layer--on-photo *{stroke:var(--lite);}
.layer--on-photo .axis{opacity:.22;}
.layer--on-photo .arc{opacity:.42;}
/* the arc draws itself once, slowly, then holds */
/* the arc draws itself once, slowly, then holds. `.no-js` guard: if the
   observer never runs the arc must still be visible, never permanently hidden. */
html.js .layer .arc{stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);
  transition:stroke-dashoffset 2.8s var(--ease);}
html.js .in .arc,html.js .layer.in .arc{stroke-dashoffset:0;}
@media(prefers-reduced-motion:reduce){.layer .arc{stroke-dashoffset:0!important;}}

/* ── icon family — construction marks, never decoration ──────── */
.ico{display:block;width:var(--ico,46px);height:var(--ico,46px);
  color:var(--gold);opacity:.75;}
.ico--lg{--ico:64px;}

/* ══════════════════════════════════════════════════════════════
   FIXES
   ══════════════════════════════════════════════════════════════ */

/* services index cells carry their construction mark */
.idx__cell .ico{margin-bottom:var(--sp-4);}
.idx__cell b.num{display:block;}

/* the services close — was a short line stranded against a far-right link
   in a large empty field. Now one composed row on a single rule. */
.services__foot{margin-top:0;padding-top:var(--sp-6);
  border-top:1px solid var(--ink-10);align-items:baseline;}
.services__foot p{max-width:38ch;font-size:var(--fs-lead);
  line-height:var(--lh-lead);font-weight:var(--w-light);color:var(--ink);}
.services__foot .lnk{flex:0 0 auto;}

/* ══════════════════════════════════════════════════════════════
   BIO PAGE — a chapter of the same world, not a CV
   surface (portrait + tinted plate) › graphic layer › voice
   ══════════════════════════════════════════════════════════════ */
.bio{padding-bottom:0;}
.bio .wrap{grid-template-columns:minmax(0,468px) minmax(0,1fr);
  gap:clamp(48px,7vw,124px);}
/* ── the portrait — CONTAIN ───────────────────────────────────────
   The frame's own edges are the grid: one horizontal and one vertical
   through the centre, terminating on the frame, and a circle inscribed
   touching all four edges. The icon construction grid at page scale.
   Nothing escapes the frame, so nothing crosses the reading column. */
.bio__portrait{position:relative;}
/* the offset plate belongs to the FRAME, not the column — otherwise it
   runs on behind the meta block and steps. */
.bio__portrait figure{position:relative;z-index:1;}
.bio__portrait figure::after{content:"";position:absolute;
  left:calc(var(--sp-4) * -1);top:var(--sp-4);
  width:100%;height:100%;background:var(--cream-warm);z-index:-1;}
/* the three portraits not yet delivered: the plate holds, and says so */
.bio figure.bio__awaiting figcaption{position:absolute;left:0;right:0;
  bottom:var(--sp-4);text-align:center;font-weight:var(--w-bold);
  font-size:var(--fs-label);letter-spacing:.20em;text-transform:uppercase;
  color:rgba(255,251,243,.34);z-index:3;}
.bio__contain{position:absolute;inset:0;z-index:2;pointer-events:none;
  overflow:hidden;}
.bio__contain *{fill:none;stroke:var(--gold);stroke-width:1;
  vector-effect:non-scaling-stroke;}
.bio__contain .axis{opacity:.30;}
.bio__contain .arc{opacity:.55;
  stroke-dasharray:var(--len,2600);stroke-dashoffset:var(--len,2600);}
html.js .bio__contain.in .arc{stroke-dashoffset:0;
  transition:stroke-dashoffset 2.6s var(--ease);}
html:not(.js) .bio__contain .arc{stroke-dashoffset:0;}
.bio__meta{margin-top:var(--sp-6);display:grid;gap:var(--sp-1);}
.bio__meta div{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-3);
  padding:var(--sp-2) 0;border-top:1px solid var(--ink-10);
  font-size:var(--fs-sm);color:var(--ink-74);}
.bio__meta b{font-weight:var(--w-bold);font-size:var(--fs-sub);
  letter-spacing:var(--tr-sub);text-transform:uppercase;color:var(--ink-45);}
.bio__lede{margin-top:var(--sp-5);font-weight:var(--w-light);
  font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink);
  max-width:26ch;}
.bio__copy{margin-top:var(--sp-6);max-width:60ch;}
.bio__copy p + p{margin-top:var(--sp-4);}
.bio__nav{margin-top:var(--sp-9);padding-top:var(--sp-4);
  border-top:1px solid var(--gold);display:flex;justify-content:space-between;
  gap:var(--sp-6);flex-wrap:wrap;}
.bio__nav a{display:flex;flex-direction:column;gap:var(--sp-1);}
.bio__nav small{font-weight:var(--w-bold);font-size:var(--fs-sub);
  letter-spacing:var(--tr-sub);text-transform:uppercase;color:var(--ink-45);}
.bio__nav b{font-weight:var(--w-light);font-size:var(--fs-h3);color:var(--ink);}
.bio__nav a:last-child{text-align:right;align-items:flex-end;}

/* closing plate on a bio — a quiet return to the world */
.bio__plate{position:relative;height:clamp(260px,26vw,384px);overflow:hidden;
  margin-top:var(--sp-sec);}
.bio__plate img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;}

/* ── interior openings get their own composition, never a repeat ─ */
.open--lens{position:relative;}
.open--lens .wrap{position:relative;z-index:2;}
.open__plate{position:relative;height:clamp(280px,30vw,440px);
  overflow:hidden;}
.open__plate img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;}

/* territory heads carry the construction mark */
.terr__row .ico{margin-bottom:var(--sp-4);}

@media(max-width:1080px){
  .bio .wrap{grid-template-columns:1fr;}
  .bio__portrait::before{right:24px;}
  .services__foot{flex-direction:column;align-items:flex-start;gap:var(--sp-5);}
}

/* ── two-column soft split · copy one side, plate + geometry the other ── */
.split-soft .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);
  gap:clamp(48px,6.5vw,112px);align-items:center;}
.split-soft__plate{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--cream-warm);}
.split-soft__plate img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;}
.split-soft__plate--tall{aspect-ratio:3/4;}
/* image first in source on the alternating row */
.split-soft .wrap > .split-soft__plate:first-child{order:-1;}

/* stacked plate with a caption — the book's surface / voice pairing */
.stack__plate{position:relative;aspect-ratio:1/1.15;overflow:hidden;
  background:var(--cream-warm);}
.stack__plate img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;}
.stack__cap{margin-top:var(--sp-3);display:flex;align-items:baseline;gap:var(--sp-4);}
.stack__cap span{font-size:var(--fs-sm);color:var(--ink-45);}

/* the what-if question column */
.qs{margin-top:var(--sp-7);border-top:1px solid var(--gold);}
.qs p{display:grid;grid-template-columns:52px 1fr;gap:var(--sp-3);align-items:baseline;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--ink-10);}
.qs span{font-weight:var(--w-light);font-size:var(--fs-h3);line-height:1.3;
  letter-spacing:var(--tr-h3);color:var(--ink);}

@media(max-width:960px){
  .split-soft .wrap{grid-template-columns:1fr;}
  .split-soft .wrap > .split-soft__plate:first-child{order:0;}
}

@media(max-width:960px){
  .transition .wrap{grid-template-columns:1fr;grid-template-rows:none}
  .transition h2,.transition .lead,.transition__plate,.transition__run{grid-column:1;grid-row:auto}
  .transition__run{grid-template-columns:1fr 1fr;column-gap:var(--sp-4)}
  .transition__run > span{font-size:var(--fs-h3);padding-block:var(--sp-2)}
}

/* ── COMPOSITION RULE ─────────────────────────────────────────────
   Brand book p22: "the grid observes; it never decorates."
   An axis crossing a headline reads as an accident. Therefore:
     · over TYPE      → arc only, or a single vertical axis placed in the
                        outer void beyond the text column
     · over PHOTOGRAPHY → full grid permitted (one horizontal, one vertical)
   The arc radius is always computed centre-to-crossing, so it passes exactly
   through the intersection. Never add a second arc or a third line.
   ───────────────────────────────────────────────────────────────── */


/* ── the slow zoom — luxury motion is motion you can barely see ────
   (VIBOR pattern: transition:transform 5s; scale on hover) */
.split-soft__plate img,.stack__plate img,.wealth__plate img,
.people__img img,.bio__plate img{
  transition:transform 4.5s var(--ease);transform-origin:50% 35%;}
.split-soft__plate:hover img,.stack__plate:hover img,
.wealth__plate:hover img,.people__img:hover img{transform:scale(1.055);}
@media(prefers-reduced-motion:reduce){
  .split-soft__plate img,.stack__plate img,.wealth__plate img,
  .people__img img,.bio__plate img{transition:none;}}


/* ── optical refinements ─────────────────────────────────────────
   Numerals sit on one rhythm; headline commas hang; nothing wraps
   to a single orphan word. */
:root{font-variant-numeric:tabular-nums;}
.d1,.d2,.d3,.h1,.h2,.h3,.h4{text-wrap:balance;font-feature-settings:"kern" 1;}
.body,.sm,.bio__copy p{text-wrap:pretty;}
.figures b,.num,.qs b{font-variant-numeric:tabular-nums lining-nums;}
/* hairlines render at true 1px on retina rather than a soft 0.5 */
.rule,.door__hd i,.process__line{transform:translateZ(0);}

/* ── arc tangent to a rule ────────────────────────────────────────
   A circle that descends from above and comes to rest exactly on a
   horizontal rule — anchored to the rule itself, not to section
   proportions, so it can never drift into the type below. */
.idx,.terr,.coord__rows{position:relative;}
.arc-rule{position:absolute;left:0;width:100%;bottom:100%;
  pointer-events:none;overflow:visible;z-index:0;}
.arc-rule circle{fill:none;stroke:var(--gold);stroke-width:1;
  vector-effect:non-scaling-stroke;opacity:.55;
  stroke-dasharray:var(--len,4000);stroke-dashoffset:var(--len,4000);}
html.js .arc-rule.in circle{stroke-dashoffset:0;
  transition:stroke-dashoffset 3s var(--ease);}
html:not(.js) .arc-rule circle{stroke-dashoffset:0;}

/* the list rhythm and the territory divider collided at the foot of each
   column — one closing rule per territory, never two */
.terr__list li:last-child{border-bottom:0;}
.terr__row:last-child{border-bottom:0;}

/* ── the opening frame ────────────────────────────────────────────
   Buck × J.P. Morgan: "when these lines intersect with others, we feel
   their intentionality." The plate's top edge is already a real line in
   the layout, so it becomes THE horizontal axis: the vertical axis runs
   down and terminates on it, and the arc descends and rests tangent to
   it at exactly that point. Every line lands on something. */
.open__frame{position:relative;padding-bottom:var(--sp-9);}
.open__geo{position:absolute;left:0;width:100%;bottom:0;pointer-events:none;
  overflow:visible;z-index:1;}
.open__geo *{fill:none;stroke:var(--gold);stroke-width:1;
  vector-effect:non-scaling-stroke;}
.open__geo .axis{opacity:.26;}
.open__geo .arc{opacity:.55;
  stroke-dasharray:var(--len,4000);stroke-dashoffset:var(--len,4000);}
html.js .open__geo.in .arc{stroke-dashoffset:0;
  transition:stroke-dashoffset 3s var(--ease);}
html:not(.js) .open__geo .arc{stroke-dashoffset:0;}
.open__frame > .wrap{position:relative;z-index:2;}

/* ══════════════════════════════════════════════════════════════
   ATMOSPHERE — light, shadow and material
   Brief: "Use light and shadow as part of the digital experience.
   Subtle shifts in light with scroll. Long shadows moving across
   photography or surfaces. Keep movement subtle and natural."
   Nothing here is a gradient for its own sake: it is one warm light
   source drifting across a plaster surface, plus the grain of that
   surface. If you can see it working, it is too strong.
   NOTE: screen only. Never carry blur into anything that prints —
   Chromium rasterises blur as opaque slabs in PDF.
   ══════════════════════════════════════════════════════════════ */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.atmos span{position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.5;will-change:transform;}
/* the light itself — warm, high, slow */
.atmos .a1{width:62vw;height:62vw;left:-8vw;top:-18vw;
  background:radial-gradient(circle,rgba(255,241,214,.85) 0%,rgba(255,241,214,0) 68%);
  animation:drift-a 96s var(--ease) infinite alternate;}
/* the shadow it casts — cool, low, slower */
.atmos .a2{width:54vw;height:54vw;right:-10vw;top:28vw;
  background:radial-gradient(circle,rgba(210,185,156,.55) 0%,rgba(210,185,156,0) 70%);
  animation:drift-b 124s var(--ease) infinite alternate;}
/* a single gold breath, barely there */
.atmos .a3{width:40vw;height:40vw;left:34vw;bottom:-14vw;
  background:radial-gradient(circle,rgba(188,154,92,.20) 0%,rgba(188,154,92,0) 72%);
  animation:drift-c 152s var(--ease) infinite alternate;}
@keyframes drift-a{to{transform:translate3d(7vw,4vw,0) scale(1.14);}}
@keyframes drift-b{to{transform:translate3d(-6vw,-5vw,0) scale(1.10);}}
@keyframes drift-c{to{transform:translate3d(4vw,-3vw,0) scale(1.18);}}

/* the grain of the surface — plaster, not screen */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.30;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");}

/* content sits above the atmosphere */
/* The header must stay fixed: it only needed lifting above the atmosphere,
   which a z-index alone does. Including it here made it relative on every
   page except the home page, which overrode it separately. */
main,.ftr{position:relative;z-index:2;}
.hdr{z-index:60;}

@media(prefers-reduced-motion:reduce){
  .atmos span{animation:none;}
}
/* the atmosphere is a desktop luxury; on small screens it costs more than it gives */
@media(max-width:720px){
  .atmos{display:none;}
  body::after{opacity:.22;}
}

/* ══════════════════════════════════════════════════════════════
   COORDINATION DIAGRAM — a real infographic, not a stat card
   The Group's central claim, drawn: many moving pieces, one
   relationship. Nodes are the client's own service areas.
   ══════════════════════════════════════════════════════════════ */
.coord-map{position:relative;width:100%;max-width:460px;
  aspect-ratio:1/1;justify-self:end;}
.coord-map svg{width:100%;height:100%;overflow:visible;}
.coord-map .spoke{stroke:var(--gold);stroke-width:1;fill:none;opacity:0;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  transition:stroke-dashoffset 1.5s var(--ease),opacity .6s var(--ease);}
.coord-map.in .spoke{opacity:.42;stroke-dashoffset:0;}
.coord-map .ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;
  vector-effect:non-scaling-stroke;transform:scale(1.10);
  transform-origin:center;transform-box:view-box;
  transition:opacity 1.4s var(--ease),transform 1.8s var(--ease);}
.coord-map.in .ring{opacity:.30;transform:none;}
.coord-map .ring:nth-of-type(2){transition-delay:.18s}
.coord-map .ring:nth-of-type(3){transition-delay:.36s}
.coord-map .axis{stroke:var(--gold);stroke-width:1;opacity:0;
  vector-effect:non-scaling-stroke;transition:opacity 1.6s var(--ease) .5s;}
.coord-map.in .axis{opacity:.24;}
.coord-map .node{fill:var(--cream);stroke:var(--gold);stroke-width:1;
  vector-effect:non-scaling-stroke;opacity:0;
  transition:opacity .8s var(--ease);}
.coord-map.in .node{opacity:.85;}
.coord-map .hub{fill:var(--gold-deep);stroke:none;opacity:0;
  transition:opacity 1s var(--ease) 1.4s;}
.coord-map.in .hub{opacity:1;}
.coord-map text{font-family:var(--sans);font-weight:var(--w-bold);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  fill:var(--ink-45);opacity:0;transition:opacity 1s var(--ease);}
.coord-map.in text{opacity:1;}
.coord-map .hub-label{font-weight:var(--w-light);font-size:15px;
  letter-spacing:.01em;text-transform:none;fill:var(--gold-deep);}
/* refinement: graded rings, knocked-out labels, a breathing centre, hover lights a ring */
.coord-map::before{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(188,154,92,.16),rgba(188,154,92,.05) 55%,rgba(188,154,92,0) 72%);
  opacity:0;transition:opacity 2.4s var(--ease) .6s;}
.coord-map.in::before{opacity:1;}
.coord-map svg{position:relative;z-index:1;}
.coord-map .hub-label{stroke-width:2.5px;}
.coord-map.in .ring:nth-of-type(1){opacity:.22;}
.coord-map.in .ring:nth-of-type(2){opacity:.32;}
.coord-map.in .ring:nth-of-type(3){opacity:.42;}
.coord-map .ring{transition:opacity 1.2s var(--ease),transform 2.2s var(--ease);}
.coord-map text{paint-order:stroke;stroke:var(--cream);stroke-width:5px;stroke-linejoin:round;cursor:default;
  transition:opacity 1s var(--ease),fill .5s var(--ease);}
.coord-map .node{transition:opacity .9s var(--ease),fill .5s var(--ease),r .5s var(--ease);}
.coord-map svg:has(.node[data-ring="0"]:hover,text[data-ring="0"]:hover) .ring:nth-of-type(1),
.coord-map svg:has(.node[data-ring="1"]:hover,text[data-ring="1"]:hover) .ring:nth-of-type(2),
.coord-map svg:has(.node[data-ring="2"]:hover,text[data-ring="2"]:hover) .ring:nth-of-type(3){opacity:.7;}
.coord-map .node:hover,.coord-map svg:has(text:hover) .node{fill:var(--cream);}
.coord-map svg:has(text[data-ring="0"]:hover) .node[data-ring="0"],.coord-map svg:has(text[data-ring="1"]:hover) .node[data-ring="1"],
.coord-map svg:has(text[data-ring="2"]:hover) .node[data-ring="2"],.coord-map .node:hover{fill:var(--gold);r:5.5;}
.coord-map text:hover{fill:var(--ink);}
@media screen and (prefers-reduced-motion:no-preference){
  .coord-map.in .hub{animation:map-hub-breath 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
  .coord-map.in .node{animation:map-node-breath var(--breath,9s) ease-in-out var(--phase,0s) infinite;}
}
@keyframes map-hub-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes map-node-breath{0%,100%{opacity:.85}50%{opacity:.5}}


.statement--map{padding-block:clamp(64px,7.2vw,104px)}
.statement--map .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,460px);
  gap:clamp(36px,4.2vw,64px);align-items:center}
.statement--map__copy{max-width:36rem}
.statement--map h2{margin-top:var(--sp-4);max-width:22ch}
.statement--map .lead{margin-top:var(--sp-5);max-width:38ch;
  font-size:var(--fs-lead);line-height:var(--lh-lead);
  font-weight:var(--w-light);color:var(--ink-74);letter-spacing:0}
@media(max-width:960px){
  .statement--map .wrap{grid-template-columns:1fr;gap:var(--sp-6)}
  .coord-map{max-width:420px;justify-self:center}
}

/* ══════════════════════════════════════════════════════════════
   PRINT / PDF
   Chromium rasterises ANY blur-based CSS as an opaque grey slab in
   print-PDF — fine on screen, ruinous on export. The atmosphere layer
   and the grain therefore come OUT for print, and the entrance/draw
   states are forced to their resting values so nothing exports blank.
   ══════════════════════════════════════════════════════════════ */
@media print{
  .atmos{display:none!important;}
  body::after{display:none!important;}          /* grain uses multiply */
  .hdr{position:absolute!important;}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  /* everything that animates in must be at rest, not mid-transition */
  [data-rise]{opacity:1!important;transform:none!important;}
  .layer .arc,.arc-rule circle,.open__geo .arc,.bio__contain .arc{
    stroke-dashoffset:0!important;}
  .coord-map .spoke,.coord-map .node,.coord-map text,
  .coord-map .hub,.coord-map .ring,.coord-map .axis{
    opacity:inherit;transform:none!important;transition:none!important;}
  .coord-map .ring{opacity:.30!important;}
  .coord-map .axis{opacity:.24!important;}
  .coord-map .node{opacity:.85!important;}
  .coord-map text{opacity:1!important;}
  .coord-map .hub{opacity:1!important;}
  .idea__rings circle{transform:none!important;opacity:.8!important;}
  .transition__run span{opacity:1!important;transform:none!important;}
  .process__line{transform:scaleX(1)!important;}
  .process__step i{opacity:1!important;}
  .split-soft__plate img,.stack__plate img,.wealth__plate img,
  .people__img img,.bio__plate img{transform:none!important;}
}