/* Instrument Serif (SIL Open Font License 1.1, fonts/OFL.txt): the italic accent face, served locally */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/InstrumentSerif-Regular.ttf) format("truetype")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/InstrumentSerif-Italic.ttf) format("truetype")}
/* Alon Management — liquid glass kit (shared by every page). Light by default; dark behind the sun/moon. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px;border-radius:6px}

.root{
  --bg:#ffffff; --bg-2:#f5f5f7; --bg-3:#ebebee;
  --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b;
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.06);
  --solid:#1d1d1f; --on-solid:#ffffff;
  /* the one colour: Alon Management's navy (the "GRANT" and the square in the mark) */
  --brand:#da291c; --brand-hi:#e8352a; --brand-lo:#ae2116; --on-brand:#ffffff;
  --brand-ink:#da291c; --brand-g1:#da291c; --brand-g2:#ffc72c; --brand-soft:rgba(218,41,28,.07);
  --navy:#120506; --navy-2:#1a0807; --navy-3:#260c0b;
  --glass-tint:rgba(255,255,255,.52); --glass-tint-2:rgba(255,255,255,.36);
  --glass-clear:rgba(255,255,255,.16);
  --glass-dense:rgba(255,255,255,.84); --glass-dense-2:rgba(255,255,255,.72);
  --glass-rim:linear-gradient(var(--rim-a,135deg),rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 28%,rgba(0,0,0,.05) 52%,rgba(0,0,0,.12) 74%,rgba(255,255,255,.6) 100%);
  --sh-3:0 1px 1px rgba(0,0,0,.06),0 16px 40px -12px rgba(0,0,0,.26),0 40px 80px -32px rgba(0,0,0,.22);
  --sh-1:0 2px 2px rgba(0,0,0,.06),0 48px 96px -40px rgba(0,0,0,.45);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.08),inset 0 0 18px -8px rgba(255,255,255,.55);
  --glass-bf:brightness(1.1) contrast(.97);
  --ease:cubic-bezier(.22,.8,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --page:1200px;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  container-type:inline-size; container-name:page;
  position:relative; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Inter,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .9s var(--ease-io),color .9s var(--ease-io);
  overflow-x:clip;
}
.root.dark,.root .on-dark{
  --bg:#000000; --bg-2:#0e0e10; --bg-3:#1a1a1c;
  --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#86868b;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.08);
  --solid:#f5f5f7; --on-solid:#000;
  --brand-ink:#ffd45c; --brand-g1:#ffc72c; --brand-g2:#ffb300; --brand-soft:rgba(255,199,44,.14);
  --glass-tint:rgba(22,22,24,.50); --glass-tint-2:rgba(22,22,24,.34);
  --glass-clear:rgba(255,255,255,.07);
  --glass-dense:rgba(20,20,22,.80); --glass-dense-2:rgba(20,20,22,.66);
  --glass-rim:linear-gradient(var(--rim-a,135deg),rgba(255,255,255,.72) 0%,rgba(255,255,255,.12) 28%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.42) 74%,rgba(255,255,255,.32) 100%);
  --sh-3:0 1px 1px rgba(0,0,0,.3),0 16px 40px -12px rgba(0,0,0,.6),0 40px 80px -32px rgba(0,0,0,.6);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.5),inset 0 0 18px -8px rgba(255,255,255,.14);
  --glass-bf:brightness(.9) contrast(1.04);
}
.root .on-dark{color:var(--ink)}
.root .on-navy{--bg:var(--navy);--bg-2:var(--navy-2);--bg-3:var(--navy-3);--brand:#f5f5f7;--brand-hi:#ffffff;--brand-lo:#ffe08a;--on-brand:#120506}

/* ───── layout + type ───── */
.wrap{width:100%;max-width:calc(var(--page) + 96px);margin:0 auto;padding:0 48px}
.sec{padding:136px 0}
.sec.slim{padding:104px 0}
.sec.alt{background:var(--bg-2);transition:background-color .9s var(--ease-io)}
.center{text-align:center}
.center .lead,.center .h2,.center .h1,.center .display{margin-left:auto;margin-right:auto}
.display{font-size:clamp(46px,7.6cqw,108px);line-height:.98;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.h1{font-size:clamp(42px,6.2cqw,88px);line-height:1;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.h2{font-size:clamp(34px,4.4cqw,62px);line-height:1.04;letter-spacing:-.038em;font-weight:600;text-wrap:balance}
.h3{font-size:clamp(22px,2.1cqw,28px);line-height:1.15;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.lead{font-size:clamp(19px,1.6cqw,23px);line-height:1.36;letter-spacing:-.012em;font-weight:400;text-wrap:pretty;color:var(--ink-2)}
.body{font-size:17px;line-height:1.5;color:var(--ink-2)}
.small{font-size:14px;line-height:1.45;letter-spacing:-.01em;color:var(--ink-3)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--brand-ink)}
.eyebrow::before{content:"";flex:none;width:24px;height:1px;background:currentColor;opacity:.55}
.em,.display em,.h1 em,.h2 em,.h3 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.hi{background:linear-gradient(96deg,var(--brand-g1),var(--brand-g2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.br{display:block}
.num{font-family:var(--serif);font-weight:400;font-size:1.35em;line-height:1;letter-spacing:0;font-variant-numeric:lining-nums;color:var(--brand-ink)}
.measure{max-width:720px}

/* ───── glass ───── */
.glass{--ring:10px;position:relative;isolation:isolate;border-radius:var(--r,28px);
  background:linear-gradient(180deg,var(--glass-tint),var(--glass-tint-2));
  -webkit-backdrop-filter:blur(22px) saturate(1.3) var(--glass-bf);backdrop-filter:blur(22px) saturate(1.3) var(--glass-bf);
  box-shadow:var(--sh-3),var(--glass-inner);
  transition:background .9s var(--ease-io),box-shadow .9s var(--ease-io),transform .5s var(--ease)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass > *{position:relative;z-index:3}
.glass.dense{background:linear-gradient(180deg,var(--glass-dense),var(--glass-dense-2));box-shadow:var(--sh-1),var(--glass-inner);-webkit-backdrop-filter:blur(36px) saturate(1.2);backdrop-filter:blur(36px) saturate(1.2)}
.glass.clear{background:linear-gradient(180deg,var(--glass-clear),transparent 140%);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
a.glass:hover,button.glass:hover,.glass.hand:hover{--rim-a:112deg;--glass-bf:brightness(1.16) contrast(.97)}
a.glass:active,button.glass:active{transform:scale(.965)}
.card{border-radius:30px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.04);transition:background-color .9s var(--ease-io),transform .8s var(--ease),box-shadow .8s var(--ease)}
.sec.alt .card{background:var(--bg)}
.lift:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-3)}

/* ───── buttons ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-size:17px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;
  transition:transform .5s var(--ease),background-color .4s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease)}
.btn:hover{transform:scale(1.02)}
.btn:active{transform:scale(.97);transition-duration:.12s}
.btn.solid{background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-lo));color:var(--on-brand);box-shadow:0 1px 1px rgba(40,0,0,.3),0 12px 28px -10px rgba(218,41,28,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.solid:hover{box-shadow:0 1px 1px rgba(40,0,0,.3),0 16px 34px -10px rgba(218,41,28,.7),inset 0 1px 0 rgba(255,255,255,.34)}
.btn.quiet{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.btn.quiet:hover{background:var(--bg-3)}
.btn.ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.glass{--r:999px;--ring:6px;color:var(--ink)}
.btn.s{height:44px;padding:0 18px;font-size:15px}
.btn svg{width:18px;height:18px;flex:none;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--brand-ink);letter-spacing:-.016em}
.link svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* ───── nav ───── */
.nav{--r:999px;position:fixed;left:50%;top:18px;z-index:50;transform:translateX(-50%);display:flex;align-items:center;gap:4px;height:58px;padding:0 6px 0 22px;width:max-content;max-width:calc(100% - 24px);
  animation:nav-rise .9s var(--ease) both}
@keyframes nav-rise{from{opacity:0;transform:translate(-50%,-10px)}}
.nav .wm{height:36px;width:auto;margin-right:18px}
.nav .wm.light{display:block}.nav .wm.white{display:none}
.root.dark .nav .wm.light,.nav.on-dark .wm.light{display:none}
.root.dark .nav .wm.white,.nav.on-dark .wm.white{display:block}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.016em;color:var(--ink);opacity:.86;transition:opacity .3s,background-color .3s}
.nav-links a:hover{opacity:1;background:rgba(127,127,127,.16)}
.nav-links a[aria-current="page"]{opacity:1;background:var(--glass-dense);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.08)}
.nav-sep{width:1px;height:20px;background:var(--line);margin:0 8px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--ink);transition:background-color .3s,transform .5s var(--ease)}
.icon-btn:hover{background:rgba(127,127,127,.16)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .moon{display:none}.root.dark .icon-btn .moon{display:block}.root.dark .icon-btn .sun{display:none}
.nav .btn{height:44px;padding:0 18px;font-size:15px}
.nav .menu{display:none}
/* the phone menu sheet */
.sheet{position:fixed;inset:auto 12px 12px 12px;z-index:60;--r:30px;padding:14px;transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .4s}
.sheet.open{transform:none;opacity:1;pointer-events:auto}
.sheet a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:16px;font-size:19px;font-weight:500;letter-spacing:-.02em}
.sheet a:active{background:rgba(127,127,127,.16)}
.sheet .sheet-cta{margin-top:10px;display:grid;gap:8px}
.sheet .btn{width:100%}
/* phone action bar */
.phone-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;--r:999px;--ring:6px;display:none;grid-template-columns:1fr auto;gap:6px;padding:6px;transform:translateY(130%);transition:transform .55s var(--ease)}
.phone-bar.show{transform:none}
.phone-bar .btn{height:48px;font-size:16px}
.phone-bar .btn.call{width:48px;padding:0}

/* ───── hero stage ───── */
.stage{position:relative;margin:12px;border-radius:44px;overflow:clip;isolation:isolate;background:var(--bg-3);min-height:min(92vh,900px);display:flex;align-items:flex-end;padding:28px}
.stage > img.pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage .veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-card{--r:36px;position:relative;z-index:2;width:min(760px,100%);padding:40px 44px 44px}
.hero-card .h1{margin-top:16px}
.hero-card .lead{margin-top:22px;max-width:600px}
.hero-card .cta-row{margin-top:30px}
.hero-facts{--r:30px;position:absolute;z-index:2;right:28px;bottom:28px;min-width:280px;padding:10px 26px}
.hero-facts div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;font-size:15px;letter-spacing:-.012em}
.hero-facts div + div{border-top:1px solid var(--line)}
.hero-facts b{font-weight:600}
.hero-facts span{color:var(--ink-2)}

/* ───── pieces ───── */
.ledger li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;font-size:17px;letter-spacing:-.02em;border-top:1px solid var(--line)}
.ledger li:last-child{border-bottom:1px solid var(--line)}
.ledger b{font-weight:600}
.ledger span{color:var(--ink-2);text-align:right}
.ledger a{display:flex;width:100%;justify-content:space-between;align-items:center;gap:24px;min-height:44px}
.ledger a svg{width:18px;height:18px;flex:none;transition:transform .5s var(--ease)}
.ledger a:hover svg{transform:translateX(4px)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;background:var(--bg-2);color:var(--ink);font-size:15px;font-weight:500;letter-spacing:-.016em;transition:background-color .4s,color .4s,transform .4s var(--ease)}
.pill:hover{background:var(--bg-3)}
.pill.on{background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-lo));color:#fff;box-shadow:0 10px 22px -10px rgba(218,41,28,.6),inset 0 1px 0 rgba(255,255,255,.26)}
.seg{--r:999px;--ring:6px;position:relative;display:inline-flex;padding:4px;gap:0;max-width:100%}
.seg button{position:relative;z-index:2;flex:1 1 0;min-width:120px;height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.016em;color:var(--ink);opacity:.7;transition:opacity .4s;white-space:nowrap}
.seg button[aria-selected="true"]{opacity:1}
.seg-thumb{position:absolute;z-index:1;top:4px;left:4px;height:44px;width:calc(25% - 2px);border-radius:999px;background:var(--glass-dense);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 1px 3px rgba(0,0,0,.1);transition:transform .6s var(--ease),width .6s var(--ease)}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:600;letter-spacing:-.006em;white-space:nowrap}
.tag.plain{background:var(--bg-2);color:var(--ink-2)}
.media{position:relative;border-radius:40px;overflow:clip;background:var(--bg-2);isolation:isolate;aspect-ratio:4/3}
.media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.media:hover > img{transform:scale(1.03)}
.media.r45{aspect-ratio:4/5}.media.r11{aspect-ratio:1/1}.media.r32{aspect-ratio:3/2}.media.r169{aspect-ratio:16/9}
.media .cap{--r:22px;position:absolute;left:16px;bottom:16px;z-index:2;padding:14px 18px;width:min(420px,calc(100% - 32px));font-size:14px;line-height:1.4;color:var(--ink)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}
.split.top{align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--brand-soft);color:var(--brand-ink)}
.icon svg{width:24px;height:24px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;padding:18px 0;cursor:pointer;font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.024em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bg-3);transition:background-color .4s,color .4s,transform .5s var(--ease)}
.faq .pm svg{width:14px;height:14px}
.faq details[open] .pm{background:var(--ink);color:var(--bg);transform:rotate(45deg)}
.faq details p{padding:0 64px 26px 0;color:var(--ink-2);max-width:680px}

/* ───── reveal + motion ───── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.nav{animation:none}}
.aurora{position:absolute;inset:-20%;pointer-events:none;z-index:0;filter:blur(70px);opacity:.9}
.aurora i{position:absolute;border-radius:50%}
.aurora .a1{left:6%;top:10%;width:46%;height:52%;background:radial-gradient(closest-side,rgba(218,41,28,.28),rgba(218,41,28,0));animation:drift1 22s ease-in-out infinite alternate}
.aurora .a2{left:48%;top:0;width:52%;height:60%;background:radial-gradient(closest-side,rgba(255,199,44,.26),rgba(255,199,44,0));animation:drift2 26s ease-in-out infinite alternate}
.aurora .a3{left:22%;top:44%;width:56%;height:62%;background:radial-gradient(closest-side,rgba(0,0,0,.10),rgba(0,0,0,0));animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(14%,10%) scale(1.12)}}
@keyframes drift2{to{transform:translate(-12%,16%) scale(1.08)}}
@keyframes drift3{to{transform:translate(10%,-14%) scale(1.16)}}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}

/* ───── closing band + footer ───── */
.begin{position:relative;margin:12px;border-radius:44px;overflow:clip;isolation:isolate;padding:120px 0;background:var(--navy);color:#f5f5f7}
.begin .wrap{position:relative;z-index:2}
.begin .display{max-width:900px}
.begin .lead{color:rgba(245,245,247,.72);max-width:600px;margin-top:24px}
.begin .cta-row{margin-top:36px}
.begin-lines{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px 32px;font-size:15px;color:rgba(245,245,247,.72)}
.begin-lines a:hover{color:#fff}
.foot{padding:72px 0 40px;color:var(--ink-2)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-2)}
.foot .wm{height:48px;width:auto}
.foot .wm.white{display:none}.root.dark .foot .wm.white{display:block}.root.dark .foot .wm.light{display:none}
.foot-tag{margin-top:22px;font-size:17px;line-height:1.4;color:var(--ink);max-width:320px;letter-spacing:-.02em}
.foot h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.foot ul{margin-top:16px;display:grid;gap:4px}
.foot li a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;color:var(--ink);opacity:.8;transition:opacity .3s}
.foot li a:hover{opacity:1}
.foot address{font-style:normal;font-size:15px;line-height:1.6;color:var(--ink);opacity:.85;margin-top:16px}
.legal{padding-top:32px;font-size:13px;line-height:1.6;color:var(--ink-3);letter-spacing:-.006em}
.legal p + p{margin-top:12px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3)}
.foot-bottom a:hover{color:var(--ink)}

/* ───── phone ───── */
@container page (max-width:900px){
  .wrap{padding:0 20px}
  .sec{padding:88px 0}
  .sec.slim{padding:64px 0}
  .split,.grid3,.grid4,.grid2{grid-template-columns:1fr;gap:48px}
  .grid3,.grid4,.grid2{gap:14px}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px 20px}
  .foot-top > :first-child{grid-column:1/-1}
  .stage{margin:8px;border-radius:32px;padding:104px 14px 14px;min-height:min(100svh,920px);align-items:stretch;flex-direction:column;justify-content:flex-end}
  .hero-card{padding:26px 22px 26px;width:100%;--r:26px}
  .hero-facts{position:static;margin-top:10px;min-width:0;width:100%}
  .begin{margin:8px;border-radius:32px;padding:80px 0}
  .ledger li{font-size:16px;flex-direction:column;gap:6px}
  .ledger span{text-align:left}
  .seg{display:flex;width:100%}
  .seg button{min-width:0;padding:0 8px;font-size:13px}
  .faq summary{font-size:18px;min-height:64px}
  .faq details p{padding-right:0}
  .media .cap{left:10px;bottom:10px;width:calc(100% - 20px)}
  .root{padding-bottom:84px}
  .phone-bar{display:grid}
}
@media (max-width:900px){
  .nav{top:10px;left:12px;right:12px;transform:none;width:auto;max-width:none;padding:0 6px 0 18px;justify-content:space-between;height:54px}
  .nav-links,.nav-sep,.nav .btn.primary,.nav .login{display:none}
  .nav .menu{display:inline-grid}
  .nav .wm{height:32px;margin-right:0}
}
@media (max-width:440px){
  .wrap{padding:0 16px}
  .display{font-size:clamp(38px,11.5vw,46px)}
  .h1{font-size:clamp(34px,10.4vw,44px)}
  .h2{font-size:clamp(30px,8.6vw,36px)}
  .lead{font-size:18px}
  .btn{height:50px;padding:0 20px;font-size:16px}
  .cta-row .btn{flex:1 1 auto}
  .stage{margin:6px;border-radius:26px;padding:10px}
}

/* ═══════════ v2 additions: lens, nav shrink, split headlines, tilt, stacks, filmstrip, field stage ═══════════ */
/* the lens: a real refraction on the chrome that opts in (Chromium); Safari/Firefox keep the plain blur */
.glass.lens{-webkit-backdrop-filter:blur(22px) saturate(1.3) var(--glass-bf);backdrop-filter:url(#lens) blur(3px) saturate(1.25) var(--glass-bf)}
.glass.lens::after{content:"";position:absolute;inset:var(--ring);border-radius:calc(var(--r,28px) - var(--ring));pointer-events:none;z-index:1;-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}
@supports (font:-apple-system-body){.glass.lens{backdrop-filter:blur(22px) saturate(1.3) var(--glass-bf)}.glass.lens::after{display:none}}
@supports (-moz-appearance:none){.glass.lens{backdrop-filter:blur(22px) saturate(1.3) var(--glass-bf)}.glass.lens::after{display:none}}
.glass .sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(120px 80px at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.22),transparent 70%);opacity:0;transition:opacity .5s}
.glass:hover .sheen{opacity:1}
/* nav */
.nav{transition:height .5s var(--ease),padding .5s var(--ease),background .6s var(--ease-io),box-shadow .6s var(--ease-io),transform .6s var(--ease)}
.nav.shrunk{height:50px;padding-left:18px}
.nav.shrunk .wm{height:30px}
.nav.shrunk .btn{height:38px;font-size:14px}
.nav.shrunk .nav-links a{height:38px;font-size:14px}
/* split headlines: words rise out of a clipped line */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.sw i{display:inline-block;font-style:inherit;transform:translateY(110%);opacity:0;filter:blur(6px);transition:transform .9s var(--ease),opacity .7s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0)*45ms)}
.in .sw i,.rv.in .sw i{transform:none;opacity:1;filter:blur(0)}
.sw em,.sw .hi{display:inline-block;padding-bottom:.06em}
@media (prefers-reduced-motion:reduce){.sw i{transform:none;opacity:1;filter:none;transition:none}}
/* tilt cards */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .6s var(--ease);transform-style:preserve-3d}
.tilt:hover{transition-duration:.15s}
.tilt .sheen{opacity:1;background:radial-gradient(260px 180px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.18),transparent 70%)}
/* stacking plates: each sticks a little lower than the one before and the previous one shrinks away */
.stack{display:grid;gap:18px}
.stack > *{position:sticky;top:96px;transform-origin:top center;box-shadow:0 -24px 60px -30px rgba(0,0,0,.35)}
@supports (animation-timeline: view()){
  .stack > *{animation:stack-away linear both;animation-timeline:view();animation-range:exit 0% exit 60%}
  .stack > *:last-child{animation:none}
}
@keyframes stack-away{to{transform:scale(.97);filter:brightness(.94)}}
/* the field stage (design B) */
.field{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(120% 80% at 50% 110%,#5a1410 0%,#2a0908 45%,#120506 100%);color:#f5f5f7}
.field canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.field .horizon{position:absolute;left:0;right:0;bottom:30%;height:1px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,199,44,.35) 30%,rgba(255,199,44,.55) 50%,rgba(255,199,44,.35) 70%,transparent);filter:blur(.5px);opacity:.6}
.field .glow{position:absolute;left:50%;bottom:-18%;width:70%;height:60%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(218,41,28,.42),rgba(218,41,28,0));filter:blur(50px);z-index:0;pointer-events:none}
.field .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(18,5,6,.88) 0%,rgba(18,5,6,.45) 42%,rgba(18,5,6,0) 72%),linear-gradient(180deg,rgba(18,5,6,.55),rgba(18,5,6,0) 36%)}
.field-wrap{position:relative;height:168svh}
.field-wrap .field{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.over{position:relative;z-index:3;margin-top:-62svh}
.over .plate{--r:48px;padding:12px}
.over .plate-in{border-radius:40px;background:var(--bg);padding:104px 0 0;transition:background-color .9s var(--ease-io)}
.scroll-cue{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.scroll-cue i{width:18px;height:28px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
/* filmstrip of portraits */
.strip{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip-track{display:flex;gap:16px;width:max-content;padding:8px 0;animation:strip 56s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track > ul{display:flex;gap:16px;flex:none}
@keyframes strip{to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}}
.frame{position:relative;width:200px;aspect-ratio:4/5;border-radius:26px;overflow:clip;background:var(--bg-3);flex:none;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.frame img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.04);transition:transform 1.4s var(--ease)}
.frame:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.frame:hover img{transform:scale(1.04)}
.frame .cap{--r:16px;position:absolute;left:10px;right:10px;bottom:10px;padding:9px 12px;font-size:12px;line-height:1.3}
.frame .cap b{display:block;font-size:13px}
/* hero skyline stage: ken burns + pointer parallax (design A) */
.stage > img.pic{transform:scale(1.06) translate(var(--px,0),var(--py,0));transition:transform .9s var(--ease);will-change:transform}
.stage.kb > img.pic{animation:kb 28s var(--ease-io) infinite alternate}
@keyframes kb{from{transform:scale(1.04) translate(var(--px,0),var(--py,0))}to{transform:scale(1.12) translate(calc(var(--px,0) - 1.5%),calc(var(--py,0) + 1%))}}
@media (prefers-reduced-motion:reduce){.stage.kb > img.pic{animation:none}}
/* ink-fill statement on scroll */
.ink{background:linear-gradient(90deg,var(--ink) 0 var(--fill,0%),var(--ink-3) var(--fill,0%) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@supports (animation-timeline: view()){
  .ink{animation:ink linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
  @keyframes ink{from{--fill:0%}to{--fill:100%}}
  @property --fill{syntax:'<percentage>';inherits:false;initial-value:0%}
}
@supports not (animation-timeline: view()){.ink{--fill:100%}}
/* quiet hairline keys */
.key-row{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13px;color:var(--ink-3);letter-spacing:.02em}
.key-row b{color:var(--ink);font-weight:600}
@container page (max-width:900px){
  .field-wrap{height:150svh}
  .over{margin-top:-50svh}
  .over .plate{padding:8px}
  .over .plate-in{border-radius:28px;padding:64px 0 0}
  .frame{width:150px}
  .stack > *{position:static;animation:none}
}

/* ═══════════ v3: the cinematic layer ═══════════ */
/* film grain + vignette on every photographic / field surface; soft-light so it never muddies type */
.cine{position:relative}
.cine::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size:220px 220px;animation:grain 1.4s steps(6) infinite}
.root.dark .cine::before,.cine.on-dark::before,.field.cine::before,.panel.cine::before,.begin.cine::before{opacity:.5}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 30px}40%{background-position:30px -50px}60%{background-position:-60px -20px}80%{background-position:50px 60px}100%{background-position:0 0}}
.cine::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(20,0,0,.28) 100%)}
.stage.cine::after{background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(20,0,0,.18) 100%)}
.panel.cine::after,.begin.cine::after{background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(20,0,0,.32) 100%),linear-gradient(90deg,rgba(18,5,6,.85),rgba(18,5,6,.25) 60%,rgba(18,5,6,0))}
.cine > .wrap,.cine > .hero-card,.cine > .hero-facts{position:relative;z-index:3}
@media (prefers-reduced-motion:reduce){.cine::before{animation:none}}
/* the pointer's light on the field */
.field .glow{left:var(--mx,50%);top:var(--my,78%);bottom:auto;width:60vw;height:60vw;max-width:900px;max-height:900px;transform:translate(-50%,-50%);transition:left 1.2s var(--ease),top 1.2s var(--ease);opacity:.9}
/* boot: the dock rises, the horizon brightens when a factor changes */
.boot .dock{animation:rise 1.1s var(--ease) .55s both}
.boot .scroll-cue,.boot .note{animation:rise 1s var(--ease) .9s both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.field .horizon{transition:opacity .6s var(--ease)}
.field.flash .horizon{opacity:1}
/* light sweep: one pass of specular across a glass surface as it reveals */
.sweep{position:relative;overflow:clip}
.sweep::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:28%;z-index:4;pointer-events:none;transform:skewX(-18deg) translateX(-140%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22) 50%,rgba(255,255,255,0));filter:blur(2px)}
.sweep.in::after{animation:sweep 1.8s var(--ease-io) .5s 1 both}
@keyframes sweep{to{transform:skewX(-18deg) translateX(720%)}}
@media (prefers-reduced-motion:reduce){.sweep::after,.boot .dock,.boot .scroll-cue,.boot .note{animation:none}}
/* scroll parallax on the stage photograph (Chromium with scroll timelines; others keep the still frame) */
@supports (animation-timeline: scroll()){
  .stage.px > img.pic{animation:px linear both;animation-timeline:scroll();animation-range:0 120vh}
  @keyframes px{to{translate:0 14%}}
}
/* premium type polish */
.display,.h1{font-weight:620;letter-spacing:-.05em;line-height:.96}
.display em,.h1 em{font-size:1.02em;letter-spacing:-.012em}
.h2{letter-spacing:-.04em;line-height:1.02}
.lead{text-wrap:pretty}
.btn.solid,.btn.white{letter-spacing:-.016em}
.hero-facts dt b,.dock button b{letter-spacing:-.022em}
/* hairline rhythm */
.ledger li{padding:20px 0}
.foot-top{padding-bottom:56px}
/* active factor glow */
.dock button[aria-selected="true"] b{text-shadow:0 0 18px rgba(255,199,44,.55)}
.dock button[aria-selected="true"] path{stroke:#ffe08a;filter:drop-shadow(0 0 6px rgba(255,199,44,.8))}
.fac[aria-selected="true"]{box-shadow:var(--sh-3),var(--glass-inner),0 0 0 1px rgba(255,199,44,.25),0 20px 60px -30px rgba(255,199,44,.55)}
/* the hero sparklines draw once */
.hero-facts path{stroke-dasharray:60;stroke-dashoffset:60}
.hero-facts.in path{animation:draw60 1.6s var(--ease) forwards}
.hero-facts.in div:nth-child(2) path{animation-delay:.15s}.hero-facts.in div:nth-child(3) path{animation-delay:.3s}.hero-facts.in div:nth-child(4) path{animation-delay:.45s}
@keyframes draw60{to{stroke-dashoffset:0}}

/* ═══════════ v3b: opening sequence + light ═══════════ */
/* letterbox: two bars that open on the first paint of a cinematic hero */
.letterbox{position:fixed;left:0;right:0;height:7svh;z-index:70;background:#000;pointer-events:none;animation:lb 1.5s var(--ease-io) .25s both}
.letterbox.top{top:0;transform-origin:top}.letterbox.bottom{bottom:0;transform-origin:bottom}
@keyframes lb{to{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.letterbox{display:none}}
/* the field's glow breathes between indigo and deep blue; the horizon shimmers */
.field .glow{animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{from{filter:blur(50px) hue-rotate(-6deg) brightness(1)}to{filter:blur(56px) hue-rotate(10deg) brightness(1.15)}}
/* a slow sun across the skyline (design A): one soft highlight band drifting over the photograph */
.stage .sun{position:absolute;inset:-10%;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:60% 100%;background-repeat:no-repeat;background-position:-60% 0;animation:sun 22s var(--ease-io) infinite alternate}
@keyframes sun{to{background-position:160% 0}}
@media (prefers-reduced-motion:reduce){.field .glow,.stage .sun{animation:none}}
/* buttons: a hairline of light on top, a deeper press */
.btn.white{box-shadow:0 1px 1px rgba(0,0,0,.3),0 16px 40px -12px rgba(255,199,44,.5),inset 0 1px 0 rgba(255,255,255,.9)}
.btn.solid:active,.btn.white:active{transform:scale(.97);box-shadow:inset 0 2px 8px rgba(0,0,0,.25)}
/* the glass plate's upper edge fades to solid so the statement always sits on an opaque surface */
.plate-in{position:relative}
.plate-in::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;z-index:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,transparent,var(--bg))}
.plate-in > .wrap{position:relative;z-index:1}

/* ═══════════ v4: GPT audit round 1 — spacing, type and phone discipline ═══════════ */
.legal{font-size:14px;line-height:1.65}
.foot{padding-top:88px}
.foot-top{padding-bottom:56px}
.frame{width:210px}
.strip-track{gap:24px}
.strip-track > ul{gap:24px}
.frame .cap{min-height:50px;display:flex;flex-direction:column;justify-content:center;font-size:12.5px}
.frame .cap b{font-size:13.5px}
.hero-facts{min-width:320px;padding:12px 28px}
.hero-facts div{padding:14px 0;font-size:16px}
.diff .card,.reasons .card{min-height:0}
.diff h3,.reasons h3{margin-top:44px;padding-top:0}
.quant-vis .cap{font-size:13px;color:var(--ink-2)}
.quant-vis .lab{fill:var(--ink-2)}
@container page (max-width:900px){
  .root{padding-bottom:96px}
  .sec{padding:80px 0}
  .stage{min-height:0;justify-content:flex-start;padding-top:108px}
  .hero-card{--r:26px}
  .hero-facts{min-width:0}
  .hero-facts.glass{--glass-tint:var(--glass-dense);--glass-tint-2:var(--glass-dense-2)}
  .statement{font-size:clamp(24px,6.6vw,30px);line-height:1.28;letter-spacing:-.028em}
  .facts{gap:20px 16px}
  .facts span{font-size:14px}
  .diff h3,.reasons h3{margin-top:32px}
  .seg{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:0 0 auto;min-width:fit-content;padding:0 16px;font-size:14px;scroll-snap-align:start}
  .frame{width:190px}
  .frame .cap{font-size:13px}
  .frame .cap b{font-size:14px}
  .panel canvas,.concierge canvas,.inst canvas{opacity:.35}
  .panel .ledger p,.concierge .ledger p,.inst .fac p{font-size:15px;color:rgba(245,245,247,.82)}
  .roster-grid b{font-size:15px;padding:12px 14px 2px}
  .roster-grid span{font-size:13px;padding:0 14px 14px}
  .legal{font-size:13.5px}
  .marquee{overflow-x:auto;scroll-snap-type:x proximity;-webkit-mask:none;mask:none;padding:0 16px;scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
  .marquee-track{animation:none;width:max-content}
  .marquee-track > ul[aria-hidden]{display:none}
  .marquee-track li a{scroll-snap-align:start}
}
@container page (max-width:440px){
  .display{font-size:clamp(38px,10.8vw,42px);line-height:1.04;letter-spacing:-.04em}
  .h1{font-size:clamp(34px,9.8vw,40px);line-height:1.06;letter-spacing:-.04em}
  .cta-row{gap:10px}
}

/* ═══════════ v5: one radius set, phone nav, dark-surface legibility (GPT round 1, system-wide) ═══════════ */
.root{--r-xl:40px;--r-lg:28px;--r-md:20px;--r-sm:14px}
.stage,.begin,.panel,.concierge,.inst,.serve,.field-wrap .field,.diff-stack article,.over .plate{border-radius:var(--r-xl)}
.card,.person,.media,.quant-vis,.serve-grid .glass,.posts a,.reasons .card,.diff .card,.form,.contact-card,.hero-card,.hero-facts,.feature-post,.dock,.expect,.sheet,.plate-in,.opt{--r:var(--r-lg);border-radius:var(--r-lg)}
.related a,.frame,.map,.press,.cred,.fac,.hero-facts .cap,.media .cap,.frame .cap,.person .pic,.opt .shot{--r:var(--r-md);border-radius:var(--r-md)}
.icon,.fld input,.fld select,.fld textarea,.sheet a,.step-card,.tag.square{border-radius:var(--r-sm)}
.press{border-radius:999px}
.btn,.pill,.seg,.seg-thumb,.nav,.phone-bar,.tag,.key,.scroll-cue i{border-radius:999px}
/* dark surfaces: text sits on its own quiet layer, decoration stays behind */
.panel .lead,.inst .lead,.concierge .lead{color:rgba(245,245,247,.84)}
.panel .ledger p,.inst .fac p,.concierge .ledger p,.begin .lead{color:rgba(245,245,247,.84)}
.begin-lines{color:rgba(245,245,247,.8)}
.inst.cine::after{background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(20,0,0,.32) 100%),linear-gradient(90deg,rgba(18,5,6,.9),rgba(18,5,6,.35) 55%,rgba(18,5,6,.05))}
.panel canvas,.concierge canvas,.inst canvas,.begin .wave{opacity:.4}
/* phone */
@media (max-width:900px){
  .nav{height:58px;--glass-tint:var(--glass-dense);--glass-tint-2:var(--glass-dense-2)}
  .nav.shrunk{height:54px}
}
@container page (max-width:900px){
  .root{font-size:16px}
  .wrap{padding:0 20px}
  .body{font-size:16px}
  .small{font-size:14px}
  .fine{font-size:14px;line-height:1.6;color:var(--ink-2)}
  .person details p{font-size:15px;line-height:1.55;padding-bottom:14px}
  .person details p + p{margin-top:0}
  .person.lead-person details .cols p{margin-bottom:14px}
  .detail li{padding:14px 0;font-size:15px}
  .form{--r:var(--r-lg);padding:24px 20px 24px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}
  .form.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  .fld label{font-size:14px}
  .fld input,.fld select,.fld textarea{height:50px;font-size:16px}
  .fields{gap:14px}
  .phead .lead{margin-top:22px}
  .numlist li{padding:22px 0}
}
@container page (max-width:440px){.wrap{padding:0 20px}}

/* ═══════════ v6: platinum + shine — a metal, not a colour; navy stays the only hue ═══════════ */
.root{--pt-1:#fff4c2;--pt-2:#ffc72c;--pt-3:#ffffff;--pt-4:#e6a800;--pt-5:#ffe08a;
  --platinum:linear-gradient(118deg,var(--pt-1) 0%,var(--pt-2) 28%,var(--pt-3) 46%,var(--pt-4) 64%,var(--pt-5) 82%,var(--pt-2) 100%)}
@property --rim-a{syntax:'<angle>';inherits:false;initial-value:135deg}
/* platinum text: the serif line and the numerals on every navy surface */
.pt,.field .display em,.panel .h2 em,.inst .h2 em,.concierge .h2 em,.begin .display em,.begin .h2 em,.diff-stack article.dark .big,.diff-stack article.dark h3 em,.fac .n,.field .display .hi{
  background:var(--platinum);background-size:220% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:shine 7s var(--ease-io) infinite alternate}
.field .display .hi{background:linear-gradient(118deg,#fff1b8 0%,#ffc72c 30%,#fff8dc 48%,#f0a500 66%,#ffe08a 84%,#ffc72c 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
@keyframes shine{to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.pt,.field .display em,.panel .h2 em,.inst .h2 em,.concierge .h2 em,.begin .display em,.begin .h2 em,.diff-stack article.dark .big,.fac .n,.field .display .hi{animation:none}}
/* platinum rule: hairlines on navy catch the light in the middle */
.panel .ledger li,.inst .fac,.concierge .ledger li,.contact-card div,.dock{--line:rgba(255,255,255,.14)}
.panel .ledger li::after,.concierge .ledger li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 40%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.55) 60%,transparent);opacity:.55}
.panel .ledger li,.concierge .ledger li{position:relative}
.field .horizon{background:linear-gradient(90deg,transparent,rgba(255,224,138,.35) 30%,rgba(255,240,190,.7) 50%,rgba(255,224,138,.35) 70%,transparent);opacity:.6}
/* the platinum button: the primary action on every dark surface */
.btn.white{background:linear-gradient(180deg,#fff6d6 0%,#ffc72c 55%,#f0b000 100%);color:#120506;
  box-shadow:0 1px 1px rgba(20,0,0,.35),0 18px 44px -14px rgba(255,199,44,.45),inset 0 1px 0 #fff8dc,inset 0 -1px 0 rgba(60,30,0,.18)}
.btn.white:hover{background:linear-gradient(180deg,#fff9e6 0%,#ffd45c 55%,#f5b800 100%)}
.btn.white::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:260% 100%;background-position:120% 0;transition:background-position 1.1s var(--ease)}
.btn.white:hover::after{background-position:-40% 0}
.btn{position:relative;overflow:clip}
/* metallic rim on the chrome: the nav and the dock turn their highlight slowly */
.nav.glass::before,.dock.glass::before,.hero-card.glass::before{background:conic-gradient(from var(--rim-a),rgba(255,255,255,.62),rgba(255,255,255,.16) 16%,rgba(255,255,255,.42) 32%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.55) 66%,rgba(255,255,255,.14) 84%,rgba(255,255,255,.62));padding:1.1px;opacity:.9}
.root.dark .nav.glass::before,.nav.on-dark.glass::before{opacity:.75}
.nav.glass::before{animation:rim 22s linear infinite}
@keyframes rim{to{--rim-a:495deg}}
@media (prefers-reduced-motion:reduce){.nav.glass::before{animation:none}}
/* platinum numerals and keys on light surfaces stay navy (contrast); the dock's active key gets the metal */
.dock button[aria-selected="true"] b{background:var(--platinum);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;animation:shine 7s var(--ease-io) infinite alternate}
.dock button[aria-selected="true"] path{stroke:#eef0f6;filter:drop-shadow(0 0 6px rgba(230,232,240,.7))}
/* the mark on navy: a hint of metal */
.nav.on-dark .wm.white,.foot .wm.white{filter:drop-shadow(0 0 10px rgba(255,255,255,.18))}
/* the eyebrow on navy: platinum instead of indigo */
.field .eyebrow,.panel .eyebrow,.inst .eyebrow,.concierge .eyebrow,.begin .eyebrow{color:#dfe2ea!important}
.field .eyebrow::before,.panel .eyebrow::before,.inst .eyebrow::before,.concierge .eyebrow::before,.begin .eyebrow::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,.3))}

/* the decorative layers (grain, vignette, side gradient) stay under every text layer */
.cine::before,.cine::after{z-index:1}
.cine > .wrap,.cine > .hero-card,.cine > .hero-facts,.panel .wrap,.inst .wrap,.concierge .wrap,.begin .wrap{position:relative;z-index:3}
.field .horizon,.field .glow,.field .veil{z-index:1}

/* a signal line redrawing when its factor is chosen */
.retrace{stroke-dasharray:420;stroke-dashoffset:420;animation:trace2 1.3s var(--ease) forwards!important}
.dock .retrace{stroke-dasharray:140;stroke-dashoffset:140;animation:trace 1.1s var(--ease) forwards!important}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes trace2{to{stroke-dashoffset:0}}

/* ═══════════ v7: GPT round 2 open items ═══════════ */
.frame{width:232px}
.frame .cap{min-height:54px;padding:10px 14px}
.strip-track{gap:28px}.strip-track > ul{gap:28px}
.hero-facts.glass{--glass-tint:var(--glass-dense);--glass-tint-2:var(--glass-dense-2);box-shadow:var(--sh-3),var(--glass-inner),0 0 0 1px rgba(255,255,255,.35)}
.stage .hero-facts{right:48px;bottom:48px}
.marquee,.seg{position:relative}
@container page (max-width:900px){
  .frame{width:200px}
  .frame .cap{font-size:13px}
  .seg{padding-right:24px;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  .marquee{-webkit-mask:linear-gradient(90deg,#000 90%,transparent);mask:linear-gradient(90deg,#000 90%,transparent)}
  .marquee-track{padding-right:32px}
  .roster-grid img{aspect-ratio:1/1}
  .roster-grid{gap:12px}
  .stage .hero-facts{right:auto;bottom:auto}
  .inst .factors{margin-top:24px}
}

/* ═══════════ v8: GPT round 2 — restraint ═══════════ */
.nav{box-shadow:0 1px 1px rgba(0,0,0,.06),0 10px 28px -14px rgba(0,0,0,.30),var(--glass-inner)}
.form .fine{font-size:14px;line-height:1.55;color:var(--ink-2)}
.fine p + p{margin-top:14px}
@container page (max-width:900px){
  .hero-card.glass{--glass-tint:rgba(255,255,255,.80);--glass-tint-2:rgba(255,255,255,.70)}
  .root.dark .hero-card.glass{--glass-tint:rgba(20,20,22,.78);--glass-tint-2:rgba(20,20,22,.66)}
  .form{box-shadow:inset 0 0 0 1px var(--line-2)}
}

/* phones: the field grows with its content instead of clipping the top of the hero */
@container page (max-width:900px){
  .field-wrap .field{height:auto;min-height:100svh;justify-content:flex-start;padding-bottom:28px}
  .field .wrap{padding-top:112px!important}
  .field .foot-row{margin-top:14px}
  .field .scroll-cue{display:none}
}

/* ═══════════ v9: craft ═══════════ */
::selection{background:rgba(218,41,28,.16);color:inherit}
.root.dark ::selection,.on-dark ::selection{background:rgba(255,199,44,.28)}
html{scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.35) transparent}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;transition:top .3s}
.skip:focus{top:16px}
main{display:block}

/* the plate rises into place and the field recedes as it does (Chromium scroll timelines; others keep the still frame) */
@supports (animation-timeline: scroll()){
  .over .plate{animation:plate-in linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes plate-in{from{transform:translateY(28px) scale(.985);opacity:.92}}
  .field-wrap .field canvas{animation:field-recede linear both;animation-timeline:scroll();animation-range:0 120vh}
  @keyframes field-recede{to{opacity:.55;filter:blur(1.5px)}}
}

/* ═══════════ v10: the moments ═══════════ */
/* title card: the mark draws itself on black, then dissolves into the page (once per session) */
.title-card{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#000;pointer-events:none;animation:tc-out .7s var(--ease-io) 1.7s forwards}
.title-card svg{width:min(360px,64vw);height:auto;overflow:visible}
.title-card .sq{fill:none;stroke:#eef0f6;stroke-width:3;stroke-dasharray:420;stroke-dashoffset:420;animation:tc-draw 1s var(--ease-io) .1s forwards}
.title-card .wm1{font:600 44px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,sans-serif;letter-spacing:.02em;fill:#fff;opacity:0;animation:tc-fade .6s var(--ease) .7s forwards}
.title-card .wm2{font:300 44px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,sans-serif;letter-spacing:.02em;fill:#ffc72c;opacity:0;animation:tc-fade .6s var(--ease) .85s forwards}
.title-card .line{stroke:#ffd45c;stroke-width:1;opacity:0;animation:tc-line .8s var(--ease) .95s forwards}
@keyframes tc-draw{to{stroke-dashoffset:0}}
@keyframes tc-fade{to{opacity:1}}
@keyframes tc-line{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.8}}
@keyframes tc-out{to{opacity:0;visibility:hidden}}
.title-card.skip{display:none}
/* theme switch ripples out from the sun */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:theme-ripple .9s var(--ease-io)}
@keyframes theme-ripple{from{clip-path:circle(0 at var(--tx,90%) var(--ty,40px))}to{clip-path:circle(160% at var(--tx,90%) var(--ty,40px))}}
/* the hero layers sit at different depths under the pointer */
.field .wrap > *{transform:translate3d(calc(var(--px,0) * var(--d,0)),calc(var(--py,0) * var(--d,0)),0);transition:transform .9s var(--ease)}
.field .wrap > .eyebrow{--d:6px}.field .wrap > .display{--d:14px}.field .wrap > .lead{--d:9px}.field .wrap > .cta-row{--d:5px}.field .wrap > .dock{--d:3px}
/* the skyline arrives from a blur */
.stage.kb > img.pic{animation:kb 28s var(--ease-io) infinite alternate,unblur 1.6s var(--ease-io) both}
@keyframes unblur{from{filter:blur(18px) contrast(1.04) brightness(1.02)}to{filter:blur(0) contrast(1.04) brightness(1.02)}}
/* the finale: the closing field runs on the momentum preset and brightens as it arrives */
.begin .wave{opacity:.7}
@media (prefers-reduced-motion:reduce){.title-card{display:none}.stage.kb > img.pic{animation:none}::view-transition-new(root){animation:none}}

/* ── v11: the phone pass (2026-10-15: the mobile view on all versions) ──
   grid children must be allowed to shrink (the segmented control's intrinsic width was stretching a phone column to 447 px);
   every link is a 44 px target; the portrait strip swipes instead of marching; "Hover" reads "Tap" on touch screens. */
.split > *,.quant > *{min-width:0}
.note .tap{display:none}
@media (hover:none){.note .hov{display:none}.note .tap{display:inline}}
@container page (max-width:760px){
  .foot li a{min-height:44px}
  .foot a:not(li a),.begin a:not(.btn){display:inline-block;padding:12px 0;margin:-12px 0}
  a[aria-label="Alon Management home"]{display:inline-flex;align-items:center;min-height:44px}
  .root .quote{font-size:clamp(22px,6.4vw,26px);line-height:1.2}
  .strip{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask:none;mask:none;padding:0 16px;scroll-padding:16px}
  .strip::-webkit-scrollbar{display:none}
  .strip-track{animation:none;width:max-content}
  .strip-track > ul[aria-hidden="true"]{display:none}
  .strip-track > ul > li{scroll-snap-align:start}
}
@container page (max-width:760px){
  /* Clear Day's difference cards: the desktop breathing room under the numeral becomes a hole on one column */
  .root .diff h3{margin-top:18px;padding-top:0}
  /* related cards: no fixed height on one column */
  .root .related a{min-height:0;gap:12px;padding:22px 22px 20px}
}
@container page (max-width:360px){
  /* the stacking plates: the numeral sits above the text once the column is too narrow to share */
  .root .diff-stack article{grid-template-columns:1fr;gap:10px}
  .root .diff-stack article .big{font-size:64px;line-height:.9;align-self:start}
}
@container page (max-width:760px){
  .root .person .mail{min-height:44px}
}
@container page (max-width:360px){
  /* long button labels wrap instead of running off a 320 px screen */
  .btn{white-space:normal;height:auto;min-height:52px;padding-top:12px;padding-bottom:12px;line-height:1.2;text-align:center;max-width:100%}
}
@container page (max-width:760px){
  /* inline contact links (phone, e-mail, the service list) reach 44 px without moving */
  main li > b > a,main li > p > a,.expect li a{display:inline-block;padding:11px 0;margin:-11px 0}
  .foot li a{padding:0 6px;margin:0 -6px}
}

/* ───── Alon Management: the typographic mark (no Golden Arches drawn here; the brand lives in the words and the two colours) ───── */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;margin-right:18px}
.brand .mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(180deg,#e8352a,#da291c 60%,#ae2116);box-shadow:0 1px 1px rgba(40,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3);flex:none}
.brand .mark i{font-style:normal;font-weight:800;font-size:17px;line-height:1;color:#ffc72c;letter-spacing:-.02em;transform:translateY(-.5px)}
.brand .wordmark{font-size:17px;font-weight:600;letter-spacing:-.028em;white-space:nowrap}
.brand .wordmark b{font-weight:400;color:var(--ink-2)}
.root.dark .brand .wordmark b,.nav.on-dark .brand .wordmark b{color:rgba(245,245,247,.7)}
.nav.on-dark .brand,.root.dark .nav .brand{color:#f5f5f7}
.nav.shrunk .brand .mark{width:26px;height:26px;border-radius:8px}.nav.shrunk .brand .mark i{font-size:15px}
.foot-brand{margin-right:0}
.foot-brand .mark{width:34px;height:34px;border-radius:10px}.foot-brand .mark i{font-size:19px}
.foot-brand .wordmark{font-size:20px}
@container page (max-width:900px){.brand{margin-right:0}.brand .wordmark{font-size:16px}}
/* title card: the mark on black, the two colours */
.title-card .sq{stroke:#ffc72c}
.title-card .wm1{fill:#fff}.title-card .wm2{fill:#ffc72c}