@font-face{font-family:'Switzer';font-weight:300;src:url('/fonts/switzer-300.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Switzer';font-weight:400;src:url('/fonts/switzer-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Switzer';font-weight:500;src:url('/fonts/switzer-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Switzer';font-weight:600;src:url('/fonts/switzer-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Switzer';font-weight:700;src:url('/fonts/switzer-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Switzer';font-weight:800;src:url('/fonts/switzer-800.woff2') format('woff2');font-display:swap}
:root{--ink:#0A0A0B;--ink2:#131315;--paper:#F2F2EF;--txt-d:#F4F4F2;--txt-l:#121315;--mut-d:#8F9296;--mut-l:#67696D;--hair-d:rgba(255,255,255,.12);--hair-l:rgba(0,0,0,.12);--red:#CE1141;--edge:24px;--ease:cubic-bezier(.16,1,.3,1);--sans:'Switzer',system-ui,-apple-system,sans-serif;--grade:saturate(.55) contrast(1.07) brightness(.8);--grade-plate:saturate(.7) contrast(1.06) brightness(.82);--grade-card:saturate(.7) contrast(1.06) brightness(.82)}
/* per-image grade overrides */
.plate img[src*="v22-why-privacy-runner"]{filter:contrast(1.06) brightness(.82)!important}
.plate img[src*="faceoff-un-XHTBZpRBoi0"]{filter:saturate(.45) contrast(1.12) brightness(.62)!important}

@media(min-width:900px){:root{--edge:56px}}
@media(min-width:1500px){:root{--edge:88px}}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
html{overflow-x:clip}body{background:var(--ink);color:var(--txt-d);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:clip}
@media(min-width:900px){body{font-size:17px}}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{padding-left:var(--edge);padding-right:var(--edge);max-width:1560px;margin:0 auto;width:100%}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
h2{line-height:1.08}
h1{font-size:clamp(46px,7.2vw,96px)}
h2{font-size:clamp(34px,4.4vw,64px)}
h3{font-size:clamp(21px,1.8vw,27px);letter-spacing:-.02em;line-height:1.08}
.kick{font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:12px}
.t-paper .kick,.t-paper.kick{color:rgba(18,19,21,.85)}
.kick::before{content:"";width:22px;height:2px;background:var(--red);flex:none}  /* section eyebrows only; drawn once by site.js */
.js .kick::before{transform-origin:left}.js .kick:not(.drawn)::before{transform:scaleX(0);background:#8F9296}
.js .kick.drawn::before{transition:transform 1.15s var(--ease),background-color 1.15s var(--ease)}
.js .kk{transition:opacity .95s var(--ease) .15s,transform .95s var(--ease) .15s}.js .kk:not(.drawn){opacity:0;transform:translateX(-16px)}
.grp .kick::before{display:none}  /* group labels: no dash */
@media(prefers-reduced-motion:reduce){.js .kick::before,.js .kick:not(.drawn)::before{transform:none;background:var(--red);transition:none}}
.lede{font-weight:400;font-size:clamp(19px,1.7vw,27px);line-height:1.4;letter-spacing:-.012em;max-width:38ch;color:#DADCDF}
.t-paper .lede{color:#1E2023}
.body{font-size:16.5px;line-height:1.6;max-width:50ch;color:#C4C7CB}
.t-paper .body{color:#2C2E31}
.body p+p{margin-top:14px}
/* paragraph system (Home + Why): ONE style for every paragraph under a section H2 */
.pl,.pb{font-size:16px;line-height:1.6;font-weight:400;letter-spacing:0;color:#C4C7CB;max-width:58ch;margin:0}.t-paper .pl,.t-paper .pb{color:#2C2E31}
.pl+.pb,.pb+.pb{margin-top:18px}
@media(max-width:899px){.pl,.pb{font-size:15px}}
.split .tx h2.ps,.row .tx h2.ps{margin-bottom:24px}
.split .tx .pl~.rule{margin-top:18px;font-size:16px;line-height:1.6;max-width:58ch;color:#C4C7CB}.t-paper .split .tx .pl~.rule{color:#2C2E31}
@media(max-width:899px){.split .tx .pl~.rule{font-size:15px}}
/* one section-H2 size on Home + Why (same as "One team, for the whole picture.") */
.row .tx h2.ps,.band h2.ps{font-size:clamp(34px,4.4vw,64px);line-height:1.08;letter-spacing:-.035em;max-width:none}
@media(max-width:899px){.g .lh+.rh.stack{margin-top:-2px}}  /* grid row gap 26px - 2px = 24px H2 to lead */
.mut{color:var(--mut-d)}.t-paper .mut{color:var(--mut-l)}
.red{color:var(--red)}
.t-ink{background:var(--ink);color:var(--txt-d)}
.t-ink2{background:var(--ink2);color:var(--txt-d)}
.t-paper{background:var(--paper);color:var(--txt-l)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:66px;display:flex;align-items:center;transition:background-color .85s var(--ease),color .65s var(--ease),border-color .85s var(--ease),-webkit-backdrop-filter .85s var(--ease),backdrop-filter .85s var(--ease);color:var(--txt-d);border-bottom:1px solid transparent}
.nav .navrow{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav.onpaper{color:var(--txt-l)}
.nav.scrolled{background:rgba(10,10,11,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--hair-d)}
.nav.onpaper.scrolled{background:rgba(242,242,239,.9);border-color:var(--hair-l)}
.brand{display:flex;align-items:center;gap:12px;transition:color .55s var(--ease)}.brand .mark,.brand .mark *{transition:fill .55s var(--ease),color .55s var(--ease)}.brand:hover,.brand:focus-visible{color:var(--red)}
.brand .mark{height:15px;width:auto}
.brand b{font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;line-height:1;padding-top:1px}
.nlinks{display:none;align-items:center;gap:28px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nlinks a:not(.btn){opacity:.7;padding:6px 0;position:relative;transition:opacity .4s}
.nlinks a:not(.btn) .u{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}  /* draws from the left on hover, retracts toward the right on mouse-out */
.nlinks a:not(.btn):hover,.nlinks a.on{opacity:1}
@media(hover:hover){.nlinks a:not(.btn):hover .u,.nlinks a:not(.btn):focus-visible .u{transform:scaleX(1);transform-origin:left}}
.nlinks a.on .u{transform:scaleX(1);transform-origin:left}
details.login{position:relative}
details.login>summary{list-style:none;cursor:pointer;opacity:.7;transition:opacity .4s;padding:6px 0}
details.login>summary::-webkit-details-marker{display:none}
details.login[open]>summary,details.login>summary:hover{opacity:1}
details.login .dd{position:absolute;top:calc(100% + 14px);left:-14px;min-width:230px;background:var(--paper);color:var(--txt-l);display:flex;flex-direction:column;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);border:1px solid var(--hair-l)}
details.login .dd a{padding:13px 16px;font-size:13px;letter-spacing:.01em;text-transform:none;font-weight:400;opacity:1;border-bottom:1px solid var(--hair-l)}
details.login .dd a:last-child{border-bottom:0}
details.login .dd a:hover{background:#E6E6E2}
.menub{display:block;position:relative;width:34px;height:34px;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.menub span{position:absolute;left:6px;right:6px;height:2px;background:currentColor;transition:transform .47s var(--ease),opacity .35s}
.menub span:nth-child(1){top:10px}.menub span:nth-child(2){top:16px}.menub span:nth-child(3){top:22px}
body.menu-open .menub span:nth-child(1){transform:translateY(6px) rotate(45deg)}body.menu-open .menub span:nth-child(2){opacity:0}body.menu-open .menub span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(min-width:1000px){.nav{height:78px}.nlinks{display:flex}.menub{display:none}}
.nlinks a,.nlinks summary{white-space:nowrap}.nav .brand{flex:none}
@media(min-width:1000px) and (max-width:1279px){.nlinks{gap:16px;letter-spacing:.06em;font-size:11px}.nav .navrow{gap:14px}}
.mnav{position:fixed;left:0;right:0;top:66px;bottom:0;z-index:99;background:rgba(10,10,11,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--txt-d);padding:14px var(--edge) 36px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .5s ease}
.mnav.open{opacity:1;pointer-events:auto}
.mnav a.it,.mnav details.login>summary{display:block;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#D8DADD;padding:19px 2px;border-bottom:1px solid var(--hair-d)}
.mnav details.login>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.mnav details.login>summary::-webkit-details-marker{display:none}
.mnav details.login>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid #D8DADD;border-bottom:1.5px solid #D8DADD;transform:rotate(45deg);margin-right:6px;transition:transform .45s}
.mnav details.login[open]>summary::after{transform:rotate(-135deg)}
.mnav a.it,.mnav details.login>summary{position:relative;transition:color .35s,padding-left .45s var(--ease)}
.mnav a.it::before,.mnav details.login>summary::before{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover){.mnav a.it:hover,.mnav details.login>summary:hover{color:#fff;padding-left:26px}.mnav a.it:hover::before,.mnav details.login>summary:hover::before{transform:scaleX(1)}}
.mnav a.it:focus-visible,.mnav details.login>summary:focus-visible{color:#fff;padding-left:26px;outline:0}.mnav a.it:focus-visible::before{transform:scaleX(1)}
.mnav a.it.on{color:#fff}
.mnav details.login .dd{position:static;background:transparent;border:0;box-shadow:none;min-width:0;padding:6px 0 10px 28px}
.mnav details.login .dd a{padding:11px 0;font-size:15px;color:#C4C7CB;border:0;text-transform:none;letter-spacing:0}
.mnav .cta{display:block;margin-top:22px;background:var(--red);color:#fff;text-align:center;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:18px 0;border-radius:2px}
body.menu-open .nav{color:var(--txt-d);background:rgba(10,10,11,.97);border-color:var(--hair-d)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;font:700 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;position:relative;overflow:hidden;border:1px solid currentColor;transition:color .55s,border-color .55s;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateX(-101%);transition:transform .65s var(--ease);z-index:-1}
.btn:hover{color:#fff;border-color:var(--red)}
.btn:hover::before{transform:none}
.btn.fill{background:var(--txt-d);color:var(--ink);border-color:var(--txt-d)}
.t-paper .btn.fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.line{background:transparent}
.nav .btn{height:40px;padding:0 18px;font-size:10.5px}
.tlink{position:relative;display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;font:600 16px/1.2 var(--sans);color:#fff;text-transform:none;letter-spacing:0;border:0}
.tlink::before,.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.tlink::before{background:rgba(255,255,255,.3)}
.tlink::after{background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s ease-out}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.tlink .ar{display:inline-block;font-weight:400;transition:transform .45s ease-out}
.tlink:hover .ar,.tlink:focus-visible .ar{transform:translateX(4px)}
.t-paper .tlink{color:var(--txt-l)}.t-paper .tlink::before{background:rgba(18,19,21,.3)}

/* ---------- motion primitives ---------- */
.rl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rl>span{display:block;transform:translateY(112%);transition:transform 1.25s var(--ease)}
.lit .rl>span{transform:none}
.lit .rl.d2>span{transition-delay:.05s}.lit .rl.d3>span{transition-delay:.1s}
h2.lines .rl>span{transition-duration:1.25s}  /* section headlines: same mask as the hero, lines staggered 80ms inline */
.fd{opacity:0;transform:translateY(24px);transition:opacity 1.25s var(--ease),transform 1.25s var(--ease)}
.fd.in{opacity:1;transform:none}
.rail>.card.fd{transition:opacity 1.35s var(--ease),transform 1.35s var(--ease)}.rail>.card.fd:not(.in){transform:translateY(40px)}
.js .li{opacity:0;transform:translateY(18px);transition:opacity 1.25s var(--ease),transform 1.25s var(--ease)}.js .li.iv{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}  /* max 200ms per group */
.plate{position:relative;overflow:hidden;background:#1A1A1C}
.plate img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform;filter:var(--grade-plate)}
.row .plate img[src*="wwd-planning-pen"]{top:0;height:100%}  /* glint sits in the top 3% of the file: no parallax oversize, so the plate never crops the top or right */
.plate.sc img{transform:scale(1.1);transition:transform 1.95s var(--ease)}
.plate.sc.in img{transform:scale(1)}
.split .plate img[src*="home-firm-aerial"]{top:0;height:auto;will-change:transform;transition:scale 1.75s var(--ease),opacity 1.35s var(--ease)}  /* no transform transition:the pan is scroll-linked */  /* full-length field; site.js pans it with the scroll */
.im img{scale:1.06;opacity:0;transition:scale 1.75s var(--ease),opacity 1.35s var(--ease),transform 1.35s var(--ease)}.im.iv img,.imgs-in .im img{scale:1;opacity:1}  /* frame never changes size */
.t-paper .plate{background:#D9D9D5}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d);padding:16px 0;background:var(--ink)}
.ticker .tk{display:flex;gap:0;white-space:nowrap;width:max-content;animation:tk 60.15s linear infinite}
.ticker .tk span{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:0 22px;display:inline-flex;align-items:center;gap:22px;color:#D8DADD}
.ticker .tk span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
@keyframes tk{to{transform:translateX(-50%)}}
.ticker.lt{background:var(--paper);border-color:var(--hair-l)}.ticker.lt .tk span{color:#2C2E31}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);padding:140px 0 clamp(34px,6vh,72px)}
.hero .bg{position:absolute;inset:-6% 0;overflow:hidden;will-change:transform}
.hero .bg video,.hero .bg img{width:100%;height:100%;object-fit:cover;filter:var(--grade);transform:scale(1.1);animation:heroIn 7.15s var(--ease) forwards,heroFade 1.95s var(--ease) forwards}
.hero .bg video{position:absolute;inset:0;z-index:1;animation:none;transform:none;opacity:1}
@keyframes heroIn{to{transform:scale(1)}}@keyframes heroFade{from{opacity:0}to{opacity:1}}
/* hero entrance (Home + Why): slow, staggered; classes are added after first paint so it actually plays */
.hero .fd,.phero .fd{transition:opacity 1.15s var(--ease),transform 1.15s var(--ease)}.hero .fd:not(.in),.phero .fd:not(.in){transform:translateY(22px)}
.hero .kick.fd,.phero .kick.fd{transition-delay:.05s}.hero .sub.fd,.phero .sub.fd{transition-delay:.3s}.hero .act.fd{transition-delay:.38s}
.hero h1 .rl>span,.phero h1 .rl>span{transition:transform 1.25s var(--ease)}
.hero h1.lit .rl>span,.phero h1.lit .rl>span{transition-delay:.1s}.hero h1.lit .rl.d2>span,.phero h1.lit .rl.d2>span{transition-delay:.2s}.hero h1.lit .rl.d3>span{transition-delay:.3s}
.js .hero .kick.drawn::before,.js .phero .kick.drawn::before{transition:transform 1.15s var(--ease) .15s,background-color 1.15s var(--ease) .15s}
.hero .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 75% at 0% 100%,rgba(10,10,11,.55) 0%,rgba(10,10,11,.3) 45%,rgba(10,10,11,0) 80%)}  /* 2026-10-23: bottom-left only, subtle, for headline legibility. The earlier rules put a colour first in the layer list, which made the whole declaration invalid, so no overlay ever rendered. */
@media(max-width:899px){.hero .bg img{object-position:75% 50%}}
@media(max-width:599px){.hero h1{font-size:14.2vw}.phero>.in h1{font-size:13.4vw}}
@media(min-width:900px){.hero .bg img{object-position:80% 50%}}  /* desktop: anchor to the player (image x 0.61-0.85) so the whole figure and the 21 stay in frame */
@media(min-width:900px) and (max-aspect-ratio:3/5){.hero .bg img{position:absolute;left:-170%;bottom:0;width:312.5%;height:auto;max-width:none;object-fit:fill;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%);mask-image:linear-gradient(180deg,transparent,#000 14%)}}  /* very tall windows: cover would crop him, so show 32% of the width and fade the top into ink */
.hero>.in{position:relative;z-index:2;width:100%;will-change:transform,opacity}
.hero .kick{margin-bottom:22px;color:#fff}
.hero h1{max-width:14ch}
.hero h1 .l2{color:var(--red)}
.hero .sub{margin:24px 0 30px;max-width:46ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:#fff}
.hero .act{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}@media(max-width:599px){.hero .act{margin-top:30px}}
.hero .cue{position:absolute;right:var(--edge);bottom:clamp(34px,6vh,72px);z-index:2;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#A9ADB2;display:none;align-items:center;gap:14px}
.hero .cue i{position:relative;width:1px;height:46px;overflow:hidden;display:block}
.hero .cue i::after{content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;background:var(--red);animation:drop 2.75s cubic-bezier(.7,0,.3,1) infinite}
@keyframes drop{0%{transform:translateY(0)}60%,100%{transform:translateY(92px)}}
@media(min-width:900px){.hero .cue{display:flex}}.hero .cue{pointer-events:none}
.phero{position:relative;min-height:82svh;display:flex;align-items:flex-end;overflow:hidden;padding:140px 0 clamp(34px,6vh,64px)}
.phero .bg{position:absolute;inset:-6% 0;overflow:hidden;will-change:transform}
.hero .bg picture,.phero .bg picture{display:block;width:100%;height:100%}
.phero .bg img{width:100%;height:100%;object-fit:cover;filter:var(--grade);transform:scale(1.08);animation:heroIn 6.15s var(--ease) forwards,heroFade 1.95s var(--ease) forwards}
@media(max-width:899px){.phero .bg img[src*="why-hero-ball-court"]{object-position:78% 50%}}  /* keeps the whole ball in frame at 390 */
.phero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.4) 50%,rgba(10,10,11,.2))}
.phero>.in{position:relative;z-index:2;width:100%}
.phero .kick{margin-bottom:22px;color:#fff}
.phero h1{max-width:14ch;font-size:clamp(42px,6.4vw,88px)}
.phero .sub{margin-top:22px;max-width:46ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:#D8DADD}
.phero.flat{min-height:0;padding-top:150px}
.phero.flat h1{max-width:none}  /* bio names (incl. CFP®) stay on one line at 1440 */
.phero.flat.t-paper .kick{color:var(--red)}.phero.flat.t-paper .sub{color:#3A3C40}


/* gradient hero (What We Do): no image; warm charcoal drift, one faint red glow, film grain against banding */
.phero.grad{background:var(--ink)}
.phero.grad .bg{inset:0;background:var(--ink);will-change:auto}
.phero.grad .bg::after{display:none}
.phero.grad .bg i{position:absolute;display:block;pointer-events:none;transform:translate3d(0,0,0)}
.phero.grad .g1,.phero.grad .g2,.phero.grad .g3{border-radius:50%;will-change:transform,opacity}
.phero.grad .g1{width:130vmax;height:130vmax;left:-38vmax;top:-58vmax;opacity:.95;background:radial-gradient(closest-side,#1C1A19 0%,rgba(28,26,25,.55) 38%,rgba(28,26,25,0) 72%);animation:gd1 58s ease-in-out infinite alternate}
.phero.grad .g2{width:110vmax;height:110vmax;right:-46vmax;bottom:-52vmax;opacity:.9;background:radial-gradient(closest-side,#161412 0%,rgba(22,20,18,.5) 40%,rgba(22,20,18,0) 72%);animation:gd2 44s ease-in-out infinite alternate}
.phero.grad .g3{width:96vmax;height:96vmax;left:34vmax;top:-30vmax;opacity:.8;background:radial-gradient(closest-side,rgba(206,17,65,.05) 0%,rgba(206,17,65,.022) 42%,rgba(206,17,65,0) 72%);animation:gd3 69s ease-in-out infinite alternate}
@keyframes gd1{to{transform:translate3d(6vmax,4vmax,0) scale(1.06);opacity:1}}
@keyframes gd2{to{transform:translate3d(-5vmax,-3vmax,0) scale(1.04);opacity:1}}
@keyframes gd3{to{transform:translate3d(-7vmax,5vmax,0) scale(1.03);opacity:1}}
.phero.grad .grain{inset:0;opacity:.035;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;will-change:auto}
@media(max-width:899px){.phero.grad .g1{width:150vmax;height:150vmax;left:-60vmax;top:-70vmax}.phero.grad .bg .g2{display:none}.phero.grad .g3{width:120vmax;height:120vmax;left:10vmax;top:-40vmax}}  /* phones: two layers */
@media(prefers-reduced-motion:reduce){.phero.grad .bg i{animation:none!important;transform:none!important}}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8vw,130px) 0;position:relative}
.head{display:grid;gap:18px 60px;align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.head .kick{grid-column:1/-1}
.head.tight{margin-bottom:clamp(22px,2.6vw,34px)}
@media(min-width:900px){.head.tight .lh{grid-column:1/-1}.head .brk{display:block}}  /* Journey H2: one sentence per line on desktop */
@media(min-width:900px){.head{grid-template-columns:7fr 5fr}.head .lh{grid-column:1}.head .rh{grid-column:2;padding-bottom:8px}}
.g{display:grid;gap:26px 60px;align-items:start}
.g .kick{grid-column:1/-1}
@media(min-width:900px){.g{grid-template-columns:repeat(12,1fr)}.g .lh{grid-column:1/7}.g .rh{grid-column:7/13}.g .rh.n{grid-column:8/13}}
.stack>*+*{margin-top:24px}

/* split: plate + statement */
.split{display:grid;gap:30px;align-items:center}
.split .plate{aspect-ratio:3/2;width:100%}
.split .tx .kick{margin-bottom:22px}
.split .tx h2{margin-bottom:20px}
.split .tx .rule{position:relative;padding-left:18px;margin-top:22px;color:#DADCDF;font-size:16px;max-width:42ch}
.t-paper .split .tx .rule{color:#2C2E31}
@media(min-width:900px){.split{grid-template-columns:repeat(12,1fr);gap:60px}.split .plate{grid-column:1/6;aspect-ratio:4/5}.split .tx{grid-column:7/13}.split.alt .plate{grid-column:8/13;order:2}.split.alt .tx{grid-column:1/7;order:1}}

/* cards + rails (mobile swipe, desktop grid) */
.rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:0 var(--edge) 6px;scrollbar-width:none;margin:0 calc(-1*var(--edge))}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 78vw;max-width:420px;scroll-snap-align:start;position:relative;overflow:hidden;background:#151517;aspect-ratio:3/4;display:flex;align-items:flex-end;isolation:isolate}
.card .plate{position:absolute;inset:0;z-index:0}
.card .plate img{filter:var(--grade-card);transition:scale 1.75s var(--ease),opacity 1.35s var(--ease),transform 1.35s var(--ease)}
@media(hover:hover){.card:hover .plate img,.card.xp:focus-within .plate img{transform:scale(1.04)}
 .glance>div h3{position:relative;display:inline-block}.glance>div h3::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s ease-out}
 .glance>div:hover h3::after{transform:scaleX(1);transform-origin:left}}
.card.xp.open .plate img{transform:scale(1.04)}
.card .plate img[src*="v21-home-"],.card .plate img[src*="v23-home-stage-"],.card .plate img[src*="v24-home-stage-"],.card .plate img[src*="img/j0"]{top:0;height:100%}
.card .plate img[src*="j03-tennis-card-v8"]{filter:none}  /* card grade baked into the file except ball, rim light and flood cores */
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.35) 50%,rgba(10,10,11,.1) 100%);z-index:1}
.card .n{position:absolute;top:18px;left:20px;z-index:2;font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.card .in{position:relative;z-index:2;padding:22px 20px 24px}
.card h3{font-size:clamp(22px,1.9vw,28px);margin-bottom:10px;color:#fff}
.card p{font-size:14.5px;line-height:1.5;color:#D8DADD;max-width:32ch}
.card .more{font-size:13.5px;line-height:1.5;color:#C4C7CB}
/* journey cards: titles share one top line (fixed .tl height); reveal is transform + opacity only */
.card.xp{display:block}.card.xp .in{position:absolute;left:0;right:0;bottom:0;padding:0}
.card.xp .tl{min-height:var(--tl,0px);padding:22px 20px 24px}
.card.xp .xw{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1.05s var(--ease) .3s}.card.xp .xw>div{min-height:0;overflow:hidden}
.card.xp .more{padding:0 20px 24px;margin-top:-12px;opacity:0;transition:opacity .5s var(--ease)}
.card.xp::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,11,.97) 0%,rgba(10,10,11,.9) 42%,rgba(10,10,11,.45) 70%,rgba(10,10,11,0) 100%);opacity:0;transition:opacity 1.05s var(--ease) .3s}
.card.xp.open .xw{grid-template-rows:1fr;transition-delay:0s}.card.xp.open .more{opacity:1;transition:opacity .85s var(--ease) .18s}.card.xp.open::before{opacity:1;transition-delay:0s}
@media(hover:hover){.card.xp:hover .xw,.card.xp:focus-within .xw{grid-template-rows:1fr;transition-delay:.08s}
 .card.xp:hover .more,.card.xp:focus-within .more{opacity:1;transition:opacity .85s var(--ease) .26s}
 .card.xp:hover::before,.card.xp:focus-within::before{opacity:1;transition-delay:.08s}}
.card .tg{display:none}
@media(hover:none){.card.xp .tg{display:block;position:absolute;top:12px;right:12px;z-index:3;width:30px;height:30px;border:1px solid rgba(255,255,255,.55);border-radius:50%;transition:transform .5s var(--ease),background-color .5s}
 .card.xp .tg::before,.card.xp .tg::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:#fff}
 .card.xp .tg::after{transform:rotate(90deg)}
 .card.xp.open .tg{transform:rotate(45deg);background:rgba(10,10,11,.5)}}
.card .more b{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:6px}
.prog{height:2px;background:var(--hair-d);margin:18px 0 0;position:relative}
.t-paper .prog{background:var(--hair-l)}
.prog i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--red);transition:width .35s,left .35s}
@media(min-width:900px){.rail{gap:18px;overflow:visible;margin:0;padding:0;scroll-snap-type:none;display:grid;grid-template-columns:repeat(var(--cols,4),1fr)}.card{flex:none;max-width:none;aspect-ratio:3/4}.prog{display:none}}

/* rows: plate + text (what we do) */
.row{display:grid;gap:26px;align-items:start;padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--hair-d)}
.t-paper .row{border-top-color:var(--hair-l)}
.row:first-of-type{border-top:0;padding-top:0}
.row .plate{aspect-ratio:3/2;width:100%}
.row .tx .kick{margin-bottom:18px}
.row .tx h2{font-size:clamp(28px,2.8vw,40px);max-width:16ch;margin-bottom:18px}
.row .tx .body{max-width:46ch}
@media(min-width:900px){.row{grid-template-columns:repeat(12,1fr);gap:60px;align-items:center}.row .plate{grid-column:1/8;aspect-ratio:5/4}.row .tx{grid-column:8/13}.row.alt .plate{grid-column:6/13;order:2}.row.alt .tx{grid-column:1/6;order:1}.row .tx .body{max-width:none}}
.clist{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:0 22px;margin-top:22px;border-top:1px solid var(--hair-d)}
.t-paper .clist{border-top-color:var(--hair-l)}
.clist div{padding:11px 0 11px 14px;border-bottom:1px solid var(--hair-d);font-size:14px;line-height:1.45;color:#D8DADD;position:relative}
.clist div::before{content:"";position:absolute;left:0;top:calc(11px + .725em - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--red)}
.clist div:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:899px){.clist{grid-auto-rows:auto}.row{border-top:0;padding:clamp(28px,5vw,44px) 0}.row .tx h2{font-size:clamp(30px,5vw,46px);max-width:none}}
.t-paper .clist div{border-bottom-color:var(--hair-l);color:#2C2E31}

/* steps */
.steps{display:grid;gap:26px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:48px}}
.step{position:relative;padding-top:20px}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red)}
.split .tx .rule::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red)}
.js .rd::before{transform:scaleX(0);transform-origin:left;transition:transform 1.15s var(--ease);transition-delay:var(--dl,0ms)}.js .rule.rd::before{transform:scaleY(0);transform-origin:top}
.js .rd.drawn::before{transform:none}
.step .k{font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:16px}
.step h3{margin-bottom:10px}
.step p{color:#C4C7CB;max-width:38ch;font-size:15.5px}
.t-paper .step p{color:#2C2E31}
.t-paper .step .k{color:rgba(18,19,21,.85)}

/* stages: full-screen cinematic panels (journey page) */
.jprog{position:fixed;top:66px;left:0;right:0;z-index:90;height:2px;background:transparent;pointer-events:none}
.jprog i{display:block;height:100%;width:0;background:var(--red);transition:width .3s linear}
@media(min-width:1000px){.jprog{top:78px}}
.stage{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:120px 0 clamp(34px,6vh,64px);background:var(--ink)}
.stage .bg{position:absolute;inset:-6% 0;overflow:hidden;will-change:transform}
.stage .bg img{width:100%;height:100%;object-fit:cover;filter:var(--grade);object-position:var(--pos,50% 50%)}
@media(max-width:599px){.stage .bg img{object-position:var(--mpos,var(--pos,50% 50%))}}
.stage .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.55) 45%,rgba(10,10,11,.25) 100%)}
.stage>.in{position:relative;z-index:2;width:100%}
.stage .n{font-weight:800;font-size:clamp(110px,22vw,260px);line-height:.8;letter-spacing:-.06em;color:var(--red);margin-bottom:18px}
.stage .sg-kick{display:block;font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 16px}
.stage h2{max-width:18ch;margin:0 0 18px}
.stage .pl{max-width:44ch;margin:0 0 26px;color:#DADCDF}
.stage .bg picture{display:block;width:100%;height:100%}
.stage .sg-cols{display:grid;gap:22px}
.stage .sg-col{border-top:1px solid rgba(255,255,255,.22);padding-top:14px}
.stage .sg-col b{display:block;font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 10px}
.stage .sg-col p{margin:0;max-width:36ch;color:#D8DADD;font-size:15.5px;line-height:1.55}
.stage .there{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.stage .there span{font-size:12px;letter-spacing:.04em;padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stage .there span.h{border-color:var(--red);background:var(--red)}
@media(min-width:900px){.stage>.in{display:grid;grid-template-columns:4fr 8fr;gap:60px;align-items:end}.stage .n{margin-bottom:0}.stage .sg-cols{grid-template-columns:1fr 1fr;gap:44px;max-width:72ch}.stage .sg-cols.one{grid-template-columns:1fr;max-width:52ch}}

/* everything band */
.every{padding:clamp(64px,8vw,130px) 0;background:var(--ink2)}
.every h2{max-width:none}
@media(min-width:900px){.every h2{max-width:calc((100% - 60px)*7/12)}}  /* same measure as the .head headlines */
.every .list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:34px;border-top:1px solid var(--hair-d)}
.every .list div{padding:14px 0;border-bottom:1px solid var(--hair-d);font-size:15px;color:#D8DADD;display:flex;gap:12px;align-items:baseline}
.every .list div i{font-style:normal;font-weight:700;font-size:10px;letter-spacing:.18em;color:var(--red)}
@media(min-width:900px){.every .list{grid-template-columns:repeat(3,1fr);gap:0 40px}}
.every .groups{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:38px}
.every .grp{background:rgba(255,255,255,.035);border:1px solid var(--hair-d);padding:18px 16px 10px}
@media(max-width:899px){.every .grp .gi{font-size:15px}}
.every .grp .kick{margin-bottom:14px}
.every .grp .gi{position:relative;padding:12px 0;font-size:16px;color:#E4E6E8}
.every .grp .gi::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair-d)}
@media(min-width:900px){.every .groups{grid-template-columns:repeat(4,1fr);gap:18px}.every .grp{padding:28px 26px 18px}}

/* team */
.tgrid{display:grid;gap:44px}
@media(min-width:900px){.tgrid{grid-template-columns:repeat(3,1fr);gap:40px}}
.tcard .ph{display:block;aspect-ratio:4/5;overflow:hidden;background:#D9D9D5;position:relative}
.tcard .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:none;transition:scale 1.75s var(--ease),opacity 1.35s var(--ease),transform 1.35s var(--ease)}
@media(hover:hover){.tcard .ph:hover img{transform:scale(1.03)}}
.tcard .nm{margin-top:22px}
.tcard .tt{margin:8px 0 18px;font-size:15px;line-height:1.5;color:var(--mut-l)}
.phero.flat .role{margin-top:18px;font-size:15px;color:#A9ADB2}
.pn{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--hair-l)}
.bgrid{display:grid;gap:40px;align-items:start}
.bgrid .ph2{width:100%;max-width:320px;aspect-ratio:4/5;overflow:hidden;background:#E3E5E8;position:relative}
.bgrid .ph2 img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:none}
.sig{margin-top:26px;font-size:14.5px;line-height:1.75;color:#121315}
.sig .clab,.sig .lb{display:block;font-weight:700;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--mut-l);margin:14px 0 2px}
.sig .clab{margin-top:0}
.sig a{color:var(--red);border-bottom:1px solid transparent;transition:border-color .4s}
.sig a:hover{border-color:var(--red)}
.biocopy p{font-size:16px;line-height:1.6;color:#2C2E31;max-width:58ch}
@media(max-width:899px){.biocopy p{font-size:15px}}
.biocopy p+p{margin-top:16px}
details.bg{margin-top:36px}
details.bg>summary{list-style:none;cursor:pointer;font-weight:700;font-size:11px;letter-spacing:.215em;text-transform:uppercase;color:var(--mut-l);display:flex;align-items:center;gap:14px;margin-bottom:18px}
details.bg>summary::-webkit-details-marker{display:none}
details.bg>summary::before{content:"";width:34px;height:3px;background:var(--red);flex:none}
details.bg>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:4px;margin-top:-4px;transition:transform .45s}
details.bg[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
@media(min-width:900px){.bgrid{grid-template-columns:300px 1fr;gap:clamp(40px,6vw,90px)}}

.glance{display:grid;gap:0;border-top:1px solid var(--hair-d)}.glance>div{padding:26px 0 28px;border-bottom:1px solid var(--hair-d)}.glance h3{margin:0 0 10px}.glance p{font-size:14.5px;line-height:1.5;color:#C4C7CB;max-width:28ch}@media(max-width:899px){.glance p{max-width:none;font-size:16px;line-height:1.6}}@media(min-width:900px){.glance{grid-template-columns:repeat(5,1fr);gap:0 28px}.glance>div{border-bottom:0;padding:30px 0 0}}
/* closing band */
.band{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.band .bg{position:absolute;inset:-13% 0;overflow:hidden;will-change:transform}
.band .bg img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
.band .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.96),rgba(10,10,11,.3) 60%)}
@media(max-width:899px){.band .bg img[src*="closing-band-stadium"]{object-position:85% 50%!important}}  /* mobile: floodlight ring + lit roof on top (inline style is 50% 50%) */
@media(max-width:899px){.band .bg::after{background:linear-gradient(0deg,rgba(10,10,11,.97) 0%,rgba(10,10,11,.9) 38%,rgba(10,10,11,.55) 58%,rgba(10,10,11,.25) 80%)}}
@media(min-width:900px){.band .bg::after{background:radial-gradient(ellipse 52% 46% at 18% 78%,rgba(10,10,11,.88) 0%,rgba(10,10,11,.7) 45%,rgba(10,10,11,0) 100%),linear-gradient(0deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.45) 22%,rgba(10,10,11,.12) 55%,rgba(10,10,11,0) 75%),linear-gradient(90deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.7) 22%,rgba(10,10,11,.25) 36%,rgba(10,10,11,0) 44%)}}  /* copy side near-black over the left 40% */
.band>.in{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:clamp(40px,6vh,72px)}
.band .kick{color:#fff;margin-bottom:22px}
.band h2{max-width:15ch}
.band h2 .l2{color:var(--red);display:block}
.band .act{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* footer */
footer{background:var(--ink);color:#9A9DA2;padding:60px 0 36px;font-size:13.5px;border-top:1px solid var(--hair-d)}
footer .top{display:grid;gap:34px;padding-bottom:40px}
footer .brand{color:var(--txt-d);margin-bottom:14px}
footer .tag{color:#B4B7BB;max-width:30ch;font-size:15px;line-height:1.55}
footer .fl{display:flex;flex-direction:column;gap:10px}
footer .fl b{color:rgba(255,255,255,.85);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
footer .fl a{transition:color .4s}footer .fl a:hover{color:var(--txt-d)}
footer .legal{border-top:1px solid var(--hair-d);padding:32px 0;display:grid;gap:16px;font-size:13px;line-height:1.65;color:#A4A7AB}
footer .base{border-top:1px solid var(--hair-d);padding-top:22px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.6}
footer .base a{color:var(--red);transition:color .4s}footer .base a:hover{color:var(--txt-d)}
@media(min-width:900px){footer .top{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}footer .legal{grid-template-columns:1fr 1fr;gap:40px}footer .base{flex-direction:column}}

/* legal documents (content mirrors xxiwealth.com; Sports type and spacing) */
.ldoc{max-width:760px;padding:0 0 clamp(56px,8vh,96px)}
.ldoc h2{font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.015em;margin:44px 0 12px;color:var(--txt-l)}
.ldoc h2:first-child,.ldoc .meta+h2{margin-top:0}
.ldoc p,.ldoc li{font-size:16px;line-height:1.6;color:#2C2E31;margin:0 0 14px;max-width:none}
.ldoc ul{margin:0 0 16px 20px;padding:0}
.ldoc a{color:var(--txt-l);text-decoration:underline;text-decoration-color:rgba(0,0,0,.35);text-underline-offset:3px;transition:text-decoration-color .35s}.ldoc a:hover{text-decoration-color:var(--red)}
.ldoc .meta{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.ldoc .cs{border-left:2px solid var(--red);padding:14px 0 14px 20px;margin:20px 0 28px;font-size:15px;line-height:1.6;color:#2C2E31}.ldoc .cs strong{display:block;margin-bottom:6px;color:var(--txt-l)}
.ldoc table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}.ldoc th,.ldoc td{border-bottom:1px solid var(--hair-l);padding:12px 16px 12px 0;text-align:left;vertical-align:top;font-size:15px;line-height:1.5;color:#2C2E31}.ldoc th{font-weight:700;color:var(--txt-l)}
.ldoc hr{border:0;border-top:1px solid var(--hair-l);margin:34px 0}
@media(max-width:899px){.ldoc p,.ldoc li{font-size:15px}.ldoc h2{margin-top:36px}}

/* contact */
.cgrid{display:grid;gap:44px}
.tapcall{margin-bottom:28px}
@media(min-width:900px){.tapcall{display:none}}
.form{display:grid;gap:22px;max-width:560px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.f label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;font-size:13px;letter-spacing:0;color:var(--txt-l);margin-bottom:6px}
.f label .opt{font-weight:400;color:var(--mut-l)}
.f input,.f textarea,.f select{width:100%;min-height:48px;border:0;border-bottom:1px solid rgba(18,19,21,.45);background:transparent;font:400 16px/1.4 var(--sans);padding:12px 0;color:var(--txt-l);border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .3s}
.f select{padding-right:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121315' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center/12px}
.f select:invalid,.f select option[value=""]{color:var(--mut-l)}
.f textarea{min-height:132px;resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-bottom:2px solid var(--red);padding-bottom:11px}
.f.err input,.f.err textarea,.f.err select{border-bottom-color:var(--red)}
.fe{font-size:13px;line-height:1.5;color:var(--red);margin-top:8px}.fe:empty{display:none}
.fa{display:grid;gap:16px;justify-items:start}
.fa .btn{min-height:48px}
.btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
.note{font-size:13px;color:var(--mut-l);max-width:46ch;line-height:1.55}.note a{text-decoration:underline;text-underline-offset:3px}
.cstatus{font-size:15px;line-height:1.55;color:var(--txt-l);max-width:46ch;padding:14px 16px;border-left:2px solid var(--red);background:rgba(206,17,65,.06)}.cstatus a{font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cdone{max-width:560px}.cdone .kick{margin-bottom:22px}.cdone h2{margin-bottom:18px}.cdone p{font-size:16px;line-height:1.6;color:#2C2E31;max-width:46ch}
.cside{display:grid;gap:28px;align-content:start}
.cside b{display:block;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.cside div{font-size:17px;line-height:1.5}
.cside .cl a{display:inline-block;padding:4px 0}
@media(max-width:899px){.phero.flat.contact{padding-top:120px}.cdone p{font-size:15px}}
@media(min-width:900px){.cgrid{grid-template-columns:7fr 4fr;gap:100px}}

/* footer: collapsible link groups on phones */
footer .fl .fh{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;padding:0;cursor:default}
footer .fl .fh b{margin-bottom:6px}
footer .fl .fh i{display:none}
footer .fb>div{display:flex;flex-direction:column;gap:10px}
@media(max-width:899px){
 footer{padding:44px 0 28px}
 footer .top{gap:0;padding-bottom:0}
 footer .top>div:first-child{padding-bottom:24px}
 footer .fl{border-top:1px solid var(--hair-d)}
 footer .fl .fh{padding:12px 0;min-height:44px;cursor:pointer}
 footer .legal{padding:22px 0 18px;gap:10px;font-size:12.5px;line-height:1.5}
 footer .legal p[style]{margin-top:8px!important}
 footer .base{padding-top:16px;gap:4px;font-size:12px;line-height:1.5}
 footer .fl .fh b{margin:0}
 footer .fl .fh i{display:block;width:8px;height:8px;border-right:1.5px solid #9A9DA2;border-bottom:1.5px solid #9A9DA2;transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .45s var(--ease)}
 footer .fl.open .fh i{transform:rotate(-135deg);margin-bottom:-2px}
 .js footer .fb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
 .js footer .fb>div{min-height:0;overflow:hidden}
 .js footer .fl.open .fb{grid-template-rows:1fr}
 footer .fl{gap:0}.js footer .fb>div{min-height:0;overflow:hidden}.js footer .fl.open .fb>div{padding-bottom:14px}
 .js footer .fl.open .fb>div{padding-bottom:20px}
}

/* page transitions (cross-document view transitions; fallback = fade-in on load) */
@view-transition{navigation:auto}
.nav{view-transition-name:header}
::view-transition-old(root){animation:vt-out .3s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(header),::view-transition-new(header){animation:none;mix-blend-mode:normal}
::view-transition-group(nav-ul){animation-duration:.5s;animation-timing-function:var(--ease)}
html.novt .pg{animation:vt-in .5s var(--ease) both}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html.novt .pg{animation:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rl>span,.fd,.li{transform:none!important;opacity:1!important}.im img{scale:1!important;opacity:1!important}.rd::before{transform:none!important}.hero .bg video{display:none}.plate img,.hero .bg,.phero .bg,.band .bg,.stage .bg,.hero>.in{transform:none!important}.ticker .tk{animation:none!important}.tcard .ph img,.bgrid .ph2 img{scale:1!important;opacity:1!important}}


/* ---- ported 2026-10-19 (gen v109): the Home/Why concept is now the build; Wealth structure, Sports display type ---- */
body.concept{--ink:#0C0C0D;--ink2:#121214;--paper:#F4F4F2;--grey:#E9E9E7;--mute:#67696D;font-size:17px;line-height:1.6}
.concept .t-paper.grey{background:var(--grey)}
.concept .every.t-paper{background:var(--paper);color:var(--txt-l)}
.concept .every.t-paper .list,.concept .every.t-paper .grp .gi::before{border-color:var(--hair-l)}.concept .every.t-paper .list div{border-bottom-color:var(--hair-l)}
.concept .every.t-paper .list div,.concept .every.t-paper .grp .gi,.concept .every.t-paper p{color:#2C2E31}.concept .every.t-paper .grp{background:rgba(0,0,0,.03);border-color:var(--hair-l)}
.concept .t-paper .glance{border-top-color:var(--hair-l)}.concept .t-paper .glance>div{border-bottom-color:var(--hair-l)}.concept .t-paper .glance p{color:#33373D}.concept .t-paper .glance h3{color:var(--txt-l)}
/* lockup: SPORTS at the mark's cap height; overflow visible so the S and O overshoot is not clipped */
.concept .brand .lockup{height:20px;width:auto;display:block;overflow:visible;transition:color .55s var(--ease)}.concept footer .brand .lockup{height:20px}@media(max-width:899px){.concept .brand .lockup{height:20px}}
/* container and nav width: xxiwealth.com (.wrap 1400 + clamp(20px,5.5vw,108px); nav row full width at clamp(28px,3.5vw,60px), 80px tall) */
.concept .wrap{max-width:1400px;padding-left:clamp(20px,5.5vw,108px);padding-right:clamp(20px,5.5vw,108px)}
.concept .nav .wrap{max-width:none;padding-left:clamp(28px,3.5vw,60px);padding-right:clamp(28px,3.5vw,60px)}
@media(min-width:1000px){.concept .nav{height:80px}}
/* nav links: Wealth spec exactly (10.5px / 600 / .09em / 13px gap / #B9BBB9, white on hover; muted-to-ink on paper) */
.concept .nlinks{gap:13px;font-size:10.5px;font-weight:600;letter-spacing:.09em}
.concept .nlinks a:not(.btn),.concept .nlinks details.login>summary{opacity:1;color:#D3D5D3;letter-spacing:.09em;transition:color .2s}
.concept .nlinks a:not(.btn):hover,.concept .nlinks a.on,.concept .nlinks details.login>summary:hover,.concept .nlinks details.login[open]>summary{color:#fff}
.concept .nav.onpaper .nlinks a:not(.btn),.concept .nav.onpaper .nlinks details.login>summary{color:#6B6E6F}
.concept .nav.onpaper .nlinks a:not(.btn):hover,.concept .nav.onpaper .nlinks a.on,.concept .nav.onpaper .nlinks details.login>summary:hover,.concept .nav.onpaper .nlinks details.login[open]>summary{color:var(--txt-l)}
.concept .nlinks a:not(.btn) .u{height:3px;bottom:-6px}
@media(min-width:1000px) and (max-width:1279px){.concept .nlinks{gap:13px;letter-spacing:.09em;font-size:10.5px}}
.concept .nav .btn{height:auto;padding:11px 15px;font-size:11px;letter-spacing:.09em;font-weight:700}
/* eyebrows: Wealth spec (11px / 700 / .215em), muted on both grounds */
.concept .kick{font-weight:700;font-size:11px;letter-spacing:.215em;color:#9EA1A2}
.concept .t-paper .kick,.concept .t-paper.kick,.concept .every.t-paper .kick,.concept .phero.flat.t-paper .kick{color:#6B6E6F}
.concept .phero .kick{color:#9EA1A2}.concept .hero .kick{color:#fff}
/* buttons: rectangular; primary red; hover slides paper on ink, ink on paper (the Wealth hover) */
.concept .btn{border-radius:2px;height:48px;font-weight:600;font-size:11px;letter-spacing:.14em}
.concept .btn.fill,.concept .t-paper .btn.fill,.concept .nav .btn,.concept .nav .btn.line{background:var(--red);color:#fff;border-color:var(--red)}
.concept .btn.fill::before,.concept .nav .btn::before{background:var(--paper)}
.concept .btn.fill:hover,.concept .nav .btn:hover{color:var(--ink);border-color:var(--paper)}
.concept .t-paper .btn.fill::before,.concept .nav.onpaper .btn::before{background:var(--ink)}
.concept .t-paper .btn.fill:hover,.concept .nav.onpaper .btn:hover{color:var(--paper);border-color:var(--ink)}
.concept .btn.line{background:transparent;border:1px solid currentColor;color:inherit}
/* display type: the Sports scale and weight stay (her call, round 3); only the hard titles are pinned */
.concept .card h3,.concept .step h3,.concept .glance h3{font-weight:700;letter-spacing:-.015em}
.concept .card.xp .more{border-top:1px solid rgba(255,255,255,.22);padding:16px 0 24px;margin:0 20px}
.concept h1,.concept h2{font-weight:700;letter-spacing:-.035em}.concept .hero h1{font-size:clamp(40px,5.8vw,78px);line-height:.98}.concept .phero h1{font-size:clamp(38px,5.2vw,70px)}.concept h2{font-size:clamp(28px,3.4vw,48px);line-height:1.06}.concept .split .tx h2,.concept .row .tx h2{font-size:clamp(26px,2.5vw,36px)}.concept .band h2{font-size:clamp(34px,4.4vw,64px)}  /* closing line at full H2 size (Natalie 2026-10-24) */
@media(min-width:900px){.concept .row .tx h2{max-width:none}}
.concept .every .grp .gi{padding-left:16px}.concept .every .grp .gi::after{content:"";position:absolute;left:0;top:calc(12px + .75em - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--red)}
.concept .every.t-paper .grp .gi::before{background:rgba(0,0,0,.1)}
/* body type */
.concept p.pl,.concept p.pb,.concept .body>p,.concept p.sub,.concept .lede,.concept .row .tx .body{font-size:17px;line-height:1.6;max-width:60ch}
.concept .t-paper .pl,.concept .t-paper .pb,.concept .t-paper .body,.concept .t-paper .lede{color:#33373D}
.concept .hero .sub,.concept .phero .sub{max-width:72ch}
.bd{display:none}@media(min-width:900px){.bd{display:inline}}
/* hover lines: 2px (1px read as a hairline) */
.concept .tlink::before,.concept .tlink::after{height:2px}
@media(hover:hover){.concept .glance>div h3::after{height:2px;bottom:-4px}}
/* team: xxiwealth.com/team card system */
.concept .pcards{display:grid;gap:25px}@media(min-width:900px){.concept .pcards{grid-template-columns:repeat(3,1fr)}}
.concept .pcard{background:#FAFAFA;border:1px solid #D8D8D5;box-shadow:0 10px 26px -14px rgba(23,24,27,.3),0 2px 6px -3px rgba(23,24,27,.14);padding:28px 28px 30px;display:flex;flex-direction:column;transition:background .5s}
.concept .pcard:hover{background:#F1F1EF}
.concept .pcard .ph{display:block;width:90%;aspect-ratio:4/5;overflow:hidden;background:#E8EAEC;margin-bottom:22px;box-shadow:0 10px 26px -14px rgba(23,24,27,.3),0 2px 6px -3px rgba(23,24,27,.14)}
.concept .pcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:none;transition:transform 1.35s var(--ease)}
@media(hover:hover){.concept .pcard .ph:hover img{transform:scale(1.03)}}
.concept .pcard .nm{font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.2;margin:0 0 8px;color:#101113}
.concept .pcard .rl{font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:#6B6E6F;margin:0 0 16px}
.concept .pcard .pbio{font-size:15px;line-height:1.6;color:#17181A;max-width:36ch;margin:0 0 26px}
.concept .pcard .btn{margin-top:auto;align-self:flex-start;height:auto;padding:12px 22px;font-size:11px;background:transparent;border:1px solid rgba(23,24,27,.55);color:#101113}
.concept .pcard .btn::before{background:#101113}.concept .pcard .btn:hover{color:#F4F4F2;border-color:#101113}
/* bio: xxiwealth.com/team/<name> */
.concept .bio{background:#FAFAFA}.concept .bio .wrap{max-width:1200px}
.concept .bgrid .ph2{max-width:none;box-shadow:0 10px 26px -14px rgba(23,24,27,.3),0 2px 6px -3px rgba(23,24,27,.14)}@media(max-width:899px){.concept .bgrid .ph2{max-width:320px}}
.concept .nm2{font-weight:700;font-size:clamp(26px,2.4vw,38px);letter-spacing:-.02em;line-height:1.1;color:#101113;margin:0}
.concept .rl2{font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#5A5F66;margin:10px 0 30px}
.concept .biocopy p{font-size:17px;line-height:1.65;color:#101113;max-width:66ch}
.concept .bghead{font-weight:700;font-size:11px;letter-spacing:.215em;text-transform:uppercase;color:#6B6E6F;display:flex;align-items:center;gap:14px;margin:44px 0 18px}.concept .bghead::before{content:"";width:34px;height:3px;background:var(--red);flex:none}
/* footer: xxiwealth.com footer system; black ground; red only on column labels and contact links */
.concept footer{background:var(--ink);color:#C6CACE;font-size:14px;padding:76px 0 40px}
.concept footer .top{gap:30px;padding-bottom:52px}
@media(min-width:900px){.concept footer .top{grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}}
.concept footer .brandcol{max-width:290px}.concept footer .brand{margin-bottom:20px}
.concept footer .tag{font-size:15.5px;line-height:1.65;color:#F4F4F2;font-weight:500;max-width:30ch}
.concept footer .fl{gap:12px;font-size:14px;color:#AFB3B8}
.concept footer .fl b{color:var(--red);font-size:10.5px;letter-spacing:.145em;font-weight:600;margin-bottom:4px}
.concept footer .fl a,.concept footer .base a{color:#FAFAFA;transition:color .25s}.concept footer .legal a{color:inherit;transition:color .25s}
.concept footer .fl a:hover,.concept footer .legal a:hover,.concept footer .base a:hover{color:var(--red)}
.concept footer a[href^="tel:"],.concept footer a[href^="mailto:"],.concept footer a[href*="maps"]{color:var(--red)}
.concept footer a[href^="tel:"]:hover,.concept footer a[href^="mailto:"]:hover,.concept footer a[href*="maps"]:hover{color:#E8486F}
.concept footer details.login>summary{opacity:1;padding:0;color:#FAFAFA;transition:color .25s}.concept footer details.login>summary:hover,.concept footer details.login[open]>summary{color:var(--red)}
.concept footer details.login .dd{top:auto;bottom:calc(100% + 10px);left:0;min-width:200px}
.concept footer details.login .dd a{color:#101113;font-size:13px}.concept footer details.login .dd a:hover{color:#101113;background:#E7E9EC}
@media(max-width:899px){.concept footer details.login .dd{position:static;box-shadow:none;margin:8px 0 4px}}
.concept footer .legal{border-top:1px solid #33373D;margin-top:8px;padding:34px 0 0;gap:34px;font-size:13.5px;line-height:1.65;letter-spacing:.02em;color:#C6CACE}
.concept footer .base{border-top:1px solid #2A2D31;margin-top:34px;padding-top:22px;font-size:13.5px;letter-spacing:.02em;color:#C6CACE}
@media(min-width:900px){.concept footer .base{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:20px}}
.concept footer .legal a{text-decoration:none}
@media(max-width:899px){.concept .hero h1{font-size:clamp(34px,9vw,52px)}.concept .brand b{font-size:22px}}

/* ---- batch 2 (gen v110, 2026-10-19): Wealth measure on text-heavy sections, Wealth split geometry, Journey stack, contact page = xxiwealth.com/contact, bio hero lighter ---- */
.concept .phero.biohero h1{font-weight:600;font-size:clamp(36px,4.6vw,62px);letter-spacing:-.03em}
/* prose: xxiwealth.com .pg / .serve2 (eyebrow, h2 24ch, lede 44ch, body 62ch, indented 12% of the container) */
.concept .prose{display:block}
.concept .prose .kick{margin-bottom:16px}
.concept .prose h2{max-width:24ch;margin:0 0 22px}
.concept .prose .pl{font-size:clamp(18px,1.45vw,22px);line-height:1.5;max-width:44ch;margin:0}
.concept .prose .pb,.concept .prose .body{max-width:62ch;margin-top:22px}
.concept .prose .body p+p{margin-top:18px}
@media(min-width:900px){.concept .prose{margin-left:12%}}
/* split: xxiwealth.com .split (1.02fr/.98fr, plate height clamp(320px,42vw,470px), copy 48ch) */
@media(min-width:900px){.concept .split{grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px)}.concept .split .plate,.concept .split.alt .plate{grid-column:auto;aspect-ratio:auto;height:clamp(320px,42vw,470px)}.concept .split .tx,.concept .split.alt .tx{grid-column:auto}.concept .split.alt .plate{order:2}.concept .split.alt .tx{order:1}}
.concept .split .tx .pl{font-size:clamp(18px,1.35vw,21px);line-height:1.5;max-width:48ch}.concept .split .tx .pb,.concept .split .tx .rule{max-width:48ch}
.concept .splits{display:grid;gap:clamp(64px,9vh,120px)}
/* journey: one left-aligned column; the number above the copy, lighter and smaller; copy measure 44ch */
@media(min-width:900px){.concept .stage>.in{display:block}.concept .stage .n{margin-bottom:28px}.concept .stage .sg-cols.one{max-width:44ch}}
.concept .stage .n{font-weight:700;font-size:clamp(64px,8.5vw,120px);line-height:.9;letter-spacing:-.04em}
.concept .stage h2{max-width:14ch}.concept .stage .pl{max-width:44ch}
/* contact: xxiwealth.com/contact (intro indented 12%, form 21%, grid 1.15fr/.85fr, boxed fields, uppercase labels) */
.concept .cintro{margin-bottom:clamp(44px,6vh,72px)}
.concept .clede{font-size:clamp(20px,1.7vw,26px);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:#17181B;max-width:56ch;margin:0 0 18px}
.concept .csans{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:#33373D;max-width:64ch;margin:0}.concept .csans+.csans{margin-top:1.15em}
.concept .cgrid{gap:44px}@media(min-width:821px){.concept .cgrid{grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,88px)}}
@media(min-width:1101px){.concept .cintro{margin-left:12%}.concept .form,.concept .cdone,.concept .tapcall{margin-left:21%}}
.concept .form{max-width:none;gap:26px}
.concept .f label{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5A616B;margin:0 0 9px}
.concept .f label .opt{font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:none;color:#6B6E6F}
.concept .f input,.concept .f select,.concept .f textarea{min-height:0;background:#FFFFFF;border:1px solid #DEDEDB;border-radius:0;padding:10px 11px;font:400 15px/1.45 var(--sans);color:#101113;transition:border-color .25s}
.concept .f select{padding-right:38px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A616B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center/11px auto}
.concept .f textarea{min-height:132px}
.concept .f input:focus,.concept .f textarea:focus,.concept .f select:focus{outline:none;border:1px solid var(--red);padding-bottom:10px}
.concept .f.err input,.concept .f.err select,.concept .f.err textarea{border-color:var(--red)}
.concept .form .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,34px)}@media(max-width:520px){.concept .form .frow{grid-template-columns:1fr;gap:26px}}
.concept .fa{margin-top:8px}.concept .fa .btn{padding:0 30px}
.concept .cside{gap:38px;align-content:start}
.concept .cside .clab{display:block;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6B6E6F;margin-bottom:12px}
.concept .cside .cval{display:block;font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:#24272C;font-weight:400}
.concept .cside .cval a{color:var(--red);transition:color .25s}.concept .cside .cval a:hover{color:#E8486F}
.concept .cside .cl a{padding:0}

/* ---- pre-staging visual fixes (gen v111, 2026-10-19): journey plate, mobile plates, tap targets, through-all-of-it phones ---- */
/* 2. journey ≥900: ink panel, numeral + copy left, 4:5 plate right (Home card grade), card background phones only */
.stage .jplate{display:none}
@media(min-width:900px){.stage{align-items:center}.stage .bg{display:none}.concept .stage>.in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px);align-items:center}
 .stage .jplate{display:block;position:absolute;top:0;right:0;bottom:0;width:50%;height:auto;aspect-ratio:auto;max-width:none;overflow:hidden;background:var(--ink);justify-self:auto}
 .stage .jplate img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;filter:var(--grade-card)}}
/* launch punch list (gen v125, 2026-10-23): desktop hero corner gradient, video pause, footer legal link, journey plate half-bleed */

.vidtoggle{position:absolute;bottom:30px;right:var(--edge);z-index:6;width:40px;height:40px;border-radius:50%;border:1px solid rgba(244,245,247,.55);background:rgba(18,19,22,.32);color:#F4F5F7;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .25s,background .25s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vidtoggle:hover,.vidtoggle:focus-visible{border-color:#F4F5F7;background:rgba(18,19,22,.55)}.vidtoggle svg{width:12px;height:12px;display:block;fill:currentColor}.vidtoggle .ico-play{display:none}.vidtoggle.paused .ico-pause{display:none}.vidtoggle.paused .ico-play{display:block}
@media(prefers-reduced-motion:reduce){.vidtoggle{display:none}}@media(max-width:599px){.vidtoggle{bottom:22px}}
@media(min-width:900px){.concept .stage .plate.jplate{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:50%!important;height:auto!important;aspect-ratio:auto!important;max-width:none!important;margin:0!important;border-radius:0!important}.concept .stage .plate.jplate img{position:absolute;left:0;top:-11%!important;width:100%;height:122%!important}}
.concept .stage.alt{background:var(--ink2)}.concept .stage.alt .plate.jplate{background:var(--ink2)!important}

footer .legal a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:text-decoration-color .3s}footer .legal a:hover{text-decoration-color:#fff}
/* 4. plates <900: no parallax, full-bleed inside the plate; FOCAL object-position stays inline */
@media(max-width:699px){.plate img:not([src*="home-firm-aerial"]){top:0;height:100%;transform:none!important}.plate[data-px],.plate img[data-px]{transform:none!important}}@media(max-width:899px){.split .plate img[src*="home-firm-aerial"]{object-position:50% 50%}}
/* 6. tap targets ≥44px, no visual change */
.nav .brand{padding:14px 0;margin:-14px 0}
.tlink{padding-top:14px;padding-bottom:12px;margin-top:-14px;margin-bottom:-6px}.tlink::before,.tlink::after{bottom:6px}
.sig a{display:inline-block;padding:10px 0;margin:-10px 0;border-bottom:0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .4s}.sig a:hover{text-decoration-color:var(--red)}
/* 7. through all of it <600: one column */
@media(max-width:599px){.every .groups{grid-template-columns:1fr;gap:10px}.every .grp{height:auto}}

/* ---- morning fixes (gen v112, 2026-10-20) ---- */
/* 3. team: flat on the section ground, no box; Read bio = .tlink; 3 columns from 700px */
.concept .pcards{gap:40px 25px}@media(min-width:700px){.concept .pcards{grid-template-columns:repeat(3,1fr)}}
.concept .pcard,.concept .pcard:hover{background:transparent;border:0;box-shadow:none;padding:0}
.concept .pcard .ph{width:100%;box-shadow:none;background:#D9D9D5}.concept .pcard .ph img{object-position:50% 20%}
.concept .pcard .tlink{margin-top:auto;align-self:flex-start}
/* 5. footer: headings and base row in light grey (≥4.5:1 on ink); red only on accents */
.concept footer .fl b{color:rgba(244,244,242,.7)}
.concept footer .base,.concept footer .base a,.concept footer .base a[href^="tel:"],.concept footer .base a[href^="mailto:"],.concept footer .base a[href*="maps"]{color:#C6CACE}
.concept footer .base a:hover{color:var(--red)}

/* ---- 2026-10-24 mobile punch list (gen v136) ---- */
/* menu open over a light (paper) nav: the open menu always wins, so the logo and close icon stay visible */
body.menu-open .nav,body.menu-open .nav.onpaper,body.menu-open .nav.onpaper.scrolled,body.menu-open .nav.scrolled{color:var(--txt-d)!important;background:rgba(10,10,11,.97)!important;border-color:var(--hair-d)!important}
body.menu-open .nav .brand,body.menu-open .nav .menub{color:var(--txt-d)!important}
/* footer base line: address, phone and email all in the light accent, like xxiwealth.com's blue (light red #E8486F = 5.2:1 on the footer ground; #CE1141 would be 3.5:1) */
.concept footer .base a[href*="maps"],.concept footer .base a[href^="tel:"],.concept footer .base a[href^="mailto:"]{color:#E8486F}
.concept footer .base a[href^="tel:"],.concept footer .base a[href^="mailto:"]{white-space:nowrap}
.concept footer .base a[href*="maps"]:hover,.concept footer .base a[href^="tel:"]:hover,.concept footer .base a[href^="mailto:"]:hover{color:#fff}
/* footer base: copyright, then address line, then a clear gap before CRD (like xxiwealth.com) */
.concept footer .base{gap:22px}
@media(min-width:900px){.concept footer .base{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:40px}.concept footer .base>span:last-child{text-align:right;white-space:nowrap}}  /* desktop: CRD/SEC right-aligned, level with the copyright line */
/* team page = xxiwealth.com/team: light ground, light-grey bordered cards with a soft shadow, light-grey hover (Wealth uses light blue) */
.concept .teamsec{background:#FAFAFA}
.concept .teamsec .pcard{background:#F1F1EF;border:1px solid #D8D8D5;box-shadow:0 10px 26px -14px rgba(23,24,27,.3),0 2px 6px -3px rgba(23,24,27,.14);padding:28px 28px 30px;transition:background .5s}
.concept .teamsec .pcard:hover{background:#E6E6E3}
.concept .teamsec .pcard .ph{box-shadow:0 10px 26px -14px rgba(23,24,27,.3),0 2px 6px -3px rgba(23,24,27,.14)}
/* client login: no chevron, like xxiwealth.com */
.mnav details.login>summary::after{content:none}
/* phones/tablets: nav matches xxiwealth.com exactly (measured 2026-10-24: 19px logo in an 81px bar) */
@media(max-width:999px){.concept .nav .brand .lockup{height:19px}.nav{height:81px}.mnav{top:81px}}
/* red contact links one step lighter */
.concept .cside .cval a,.concept .sig a{font-weight:400}
/* privacy line under the form: no underline */
.note a{text-decoration:none}
/* phone/tablet menu (2026-10-24 rev): one list, links a touch dimmed, full white on hover/tap/current, no red dash or indent;
   order: pages, Client login, XXI Wealth Private Practice (dimmer, it leaves the site), Let's talk last */
.mnav a.it,.mnav details.login>summary{color:rgba(244,244,242,.74)}
.mnav a.it::before,.mnav details.login>summary::before{content:none}
@media(hover:hover){.mnav a.it:hover,.mnav details.login>summary:hover{padding-left:2px;color:#fff}}
.mnav a.it:focus-visible,.mnav details.login>summary:focus-visible{padding-left:2px;color:#fff}
.mnav a.it:active,.mnav details.login>summary:active,.mnav details.login[open]>summary,.mnav a.it.on{color:#fff}
.mnav a.it.sis{display:flex;justify-content:space-between;align-items:center;color:rgba(244,244,242,.5)}
.mnav a.it.sis:hover,.mnav a.it.sis:active,.mnav a.it.sis:focus-visible{color:#fff}
.mnav a.it.sis .ext{font-size:14px;letter-spacing:0;margin-right:4px}
.mnav details.login>summary::after{border-color:currentColor}
.mnav .cta{margin-top:28px}
/* team photos: no red selection wash on press; zoom and soften instead */
.concept .pcard .ph,.concept .bgrid .ph2{-webkit-tap-highlight-color:transparent}
.concept .pcard .ph img,.concept .bgrid .ph2 img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform 1.35s var(--ease),opacity .6s var(--ease)}
.concept .pcard .ph img::selection,.concept .bgrid .ph2 img::selection{background:transparent}
.concept .pcard .ph:active img{transform:scale(1.03);opacity:.86}
@media(hover:hover){.concept .pcard .ph:hover img{opacity:.9}}
/* home journey cards: numerals red and bold, like The Journey */
.card .n.num{color:var(--red);font-weight:500;font-size:36px;letter-spacing:-.03em;line-height:1;top:14px}
/* rails: swipe snaps each card to the centre of the frame */
@media(max-width:899px){.rail{scroll-snap-type:x mandatory}.card{scroll-snap-align:center}}
/* The Journey hero on phones: floodlights lifted into the empty top of the frame */
@media(max-width:599px){.phero .bg img[src*="v30-journey-hero"]{height:130%;translate:0 -23%}}
/* footer (phones): the three accordion rows share one height; legal paragraphs share one spacing */
@media(max-width:899px){.concept footer .top{padding-bottom:0;gap:0}.concept footer .brandcol{margin-bottom:30px}.concept footer .legal{margin-top:0;gap:8px}}  /* rows touch: the dividers sit 58px apart for all three */
/* contact: dropped the tap-to-call line */
.concept .tapcall{display:none}
/* bio (xxiwealth.com mobile bio, exact): photo full width -> name -> role -> bio -> Background (tap to open) -> contact -> back to the team */
/* buttons replace the underlined text links (2026-10-24): light sections = red, dark sections = white outline */
.concept .pcard .btn.fill{background:#101113;color:#fff;border-color:#101113;padding:0 26px;height:48px}  /* Read bio: black, red sweeps in on hover */
.concept .pcard .btn.fill::before{background:var(--red)}.concept .pcard .btn.fill:hover{color:#fff;border-color:var(--red)}
.concept .btn.line.wh{color:#fff;border-color:rgba(255,255,255,.85)}
.concept .btn.line.wh::before{background:#fff}
.concept .btn.line.wh:hover,.concept .btn.line.wh:focus-visible{color:var(--red);border-color:#fff}
.concept .pn{gap:12px}
@media(max-width:599px){.concept .pn .btn{flex:1 1 100%}}
/* hero pause/play control: heavier ring */
.vidtoggle{border-width:2px}
/* phone hero: 88% of the screen height, same as xxiwealth.com (Natalie 2026-10-24) */
@media(max-width:700px){.hero{min-height:72svh}}  /* OPTION B (2026-10-24): shorter phone hero, top of Who we work with shows below; option A = gen v146 */  /* bottom edge lands where xxiwealth.com's does: 81px nav + 88svh hero */
/* every CTA ends in a small arrow (prev-partner button keeps its leading arrow instead) */
.concept .btn::after,.mnav .cta::after{content:"\2192";display:inline-block;margin-left:10px;font-weight:400;font-size:1.25em;line-height:1;letter-spacing:0;transition:transform .45s var(--ease)}
.concept .btn:hover::after,.concept .btn:focus-visible::after{transform:translateX(3px)}
.concept .pn .btn:first-child::after{content:none}
@media(max-width:899px){
 .concept .bio{padding-top:24px}
 .concept .bgrid{display:flex!important;flex-direction:column;gap:0!important}
 .concept .bgrid>div{display:contents}
 .concept .bgrid .ph2{order:1;width:100%!important;max-width:100%!important;aspect-ratio:4/5;margin:0}
 .concept .bgrid .ph2 img{width:100%;max-width:100%}
 .concept .bgrid .nm2{order:2;margin:28px 0 4px}
 .concept .bgrid .rl2{order:3;margin:0 0 20px}
 .concept .bgrid .biocopy.d1{order:4}
 .concept .bgrid .bghead{order:5;margin:26px 0 0}
 .concept .bgrid .biocopy:not(.d1){order:6}
 .concept .bgrid .sig{order:7;margin-top:30px;border-top:1px solid #D8D8D5;padding-top:24px}
 .concept .bgrid .pn{order:8;margin-top:30px}
 .concept .bghead.acc{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
 .concept .bghead.acc::after{content:"";flex:0 0 12px;width:12px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A616B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/12px;transition:transform .3s}
 .concept .bghead.acc:not(.closed)::after{transform:rotate(180deg)}
 .concept .bghead.closed+.biocopy{display:none!important}
 .concept .bghead.acc+.biocopy{margin-top:16px}
 .concept .bgrid .sig a{font-size:17px;line-height:1.5}
 .concept .bgrid .sig .clab,.concept .bgrid .sig .lb{font-size:11px;margin-top:16px}
 .concept .bgrid .sig .clab{margin-top:0}
}
/* ---- 2026-10-24 tablet/desktop batch 1 (gen v153) ---- */
/* home journey cards: numerals white (The Journey page keeps red) */
.card .n.num{color:#fff}
/* home journey cards: when a card opens, the title area drops its shared height so the hairline sits under the text on every card */
.card.xp .tl{transition:min-height 1.05s var(--ease) .3s}
.card.xp.open .tl{min-height:0;transition-delay:0s}
@media(hover:hover){.card.xp:hover .tl,.card.xp:focus-within .tl{min-height:0;transition-delay:.08s}}
/* home What we do (merged): title, one description, the four boxes, CTA left */
.concept .every.t-paper.grey{background:var(--grey)}
.concept .hsvc .lede{margin-top:22px;color:#33373D;max-width:48rem;text-wrap:pretty}  /* one line on desktop; never a one-word last line */
.concept .hsvc .cta{margin-top:clamp(28px,4vw,44px)}
/* prose (How We Work inner circle, What We Do custody): one measure for every paragraph */
.concept .prose .pl,.concept .prose .pb,.concept .prose .body{max-width:38rem}
/* The Journey: bigger, lighter numerals */
@media(min-width:700px){.concept .stage .n{font-weight:300;font-size:clamp(96px,13vw,200px);letter-spacing:-.05em;line-height:.85}}  /* phones keep the signed-off size */
/* bio hero: xxiwealth.com bio hero height (measured 350 / 357 / 375 at 820 / 1024 / 1440) */
@media(min-width:700px){.concept .phero.biohero{padding-top:198px;padding-bottom:115px}}
/* footer: the three disclaimer paragraphs as full-width rows on desktop, like tablet */
@media(min-width:900px){.concept footer .legal{grid-template-columns:1fr;gap:14px}}
/* client login dropdown on a dark nav: links were inheriting the nav's light text on the light panel (unreadable). Same as the light-nav state now */
.concept .nlinks details.login .dd a{color:#6B6E6F;letter-spacing:.01em}.concept .nlinks details.login .dd a:hover,.concept .nlinks details.login .dd a:focus-visible{color:#101113;background:#E6E6E2}
/* heroes that lost their eyebrow keep their height: the headline drops into the eyebrow's space */
.concept .phero.nk .in>h1:first-child{margin-top:39px}
/* Our firm (Stadium 21): the head sits near the top of the source, so no overscan; a settle-zoom anchored at the top edge instead of parallax */
.plate img[src*="home-firm-stadium-21"]{top:0;height:100%;transform-origin:50% 0}
/* phones + small tablets: no cross-page fade (old page ghosted over a half-drawn new one for ~0.3s on every tap). Desktop keeps it */
@media(max-width:899px){@view-transition{navigation:none}}
/* footer logo = nav logo size at every width */
@media(max-width:999px){.concept footer .brand .lockup{height:19px}}
/* The Journey >=1000px (gen v156, 2026-10-24): sticky chapters. One pinned frame on ink, chapter text left, image right half;
   native scroll moves a 4.5-viewport track, JS only sets which chapter is on. Below 1000px nothing here applies (stacked panels, signed off). */
.jrail{display:none}
@media(min-width:1000px){
 .jprog{display:none}
 .js .jch{position:relative;height:380vh;height:380svh;background:var(--ink)}  /* 20% quicker than v156 (Natalie: two swipes per chapter felt long) */
 .js .jstk{position:sticky;top:0;height:100vh;height:100svh;display:grid;overflow:hidden}
 .js .jch .stage{grid-area:1/1;min-height:0;height:100%;background:transparent}
 .js .jch .stage .plate.jplate{background:transparent!important}
 .js .jch .jt{min-height:var(--jh,0px);opacity:0;transform:translate3d(0,16px,0);pointer-events:none;transition:opacity .4s var(--ease),transform .6s var(--ease)}
 .js .jch .stage.past .jt{transform:translate3d(0,-16px,0)}
 .js .jch:not(.live) .stage:first-of-type .jt,.js .jch .stage.on .jt{opacity:1;transform:none;pointer-events:auto;transition:opacity .8s var(--ease) .2s,transform 1s var(--ease) .2s}
 .js .jch .plate.jplate{display:none;opacity:0;z-index:1;transition:opacity 0s linear .95s}
 .js .jch:not(.live) .stage:first-of-type .plate.jplate,.js .jch .plate.jplate.warm{display:block}  /* stacked plates all sit "near" the viewport, so native lazy would fetch all four at once: a plate joins the render tree one chapter ahead */
 .js .jch:not(.live) .stage:first-of-type .plate.jplate,.js .jch .plate.jplate.show{opacity:1;z-index:2;transition:opacity .95s cubic-bezier(.4,0,.2,1)}
 .js .jch .plate.jplate img{scale:1.05;transition:opacity 1.35s var(--ease),scale 0s linear .95s}
 .js .jch:not(.live) .stage:first-of-type .plate.jplate img,.js .jch .plate.jplate.show img{scale:1;transition:opacity 1.35s var(--ease),scale 2.4s var(--ease)}
 .js .jrail{display:flex;position:absolute;inset:120px 0 clamp(34px,6vh,64px);margin:0 auto;align-items:center;pointer-events:none;z-index:3}
 .jr{display:flex;flex-direction:column;gap:10px;width:2px;height:var(--jh,50%);box-sizing:border-box;padding-top:calc(clamp(96px,13vw,200px)*.13);margin-left:calc(clamp(20px,5.5vw,108px)*-.5 - 1px)}  /* starts at the numeral's cap line, ends with the longest chapter */
 .jr i{flex:1;position:relative;overflow:hidden;background:rgba(255,255,255,.14)}
 .jr b{position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:50% 0}
}