/* =====================================================================
IAAI Partners — site stylesheet
One world: deep racing green, brushed gold, ivory. Marcellus (display,
echoes the PARTNERS lettering in the logo) + Jost (text and UI).
Replaces styles.css + experience.css.
===================================================================== */
:root{
--g950:#060e0a;
--g900:#0b1812;
--g850:#0f1f18;
--g800:#14291f;
--g700:#15301f;
--mist:rgba(40,66,54,.32);
--gold:#cfb277;
--gold-hi:#e8d5a3;
--gold-lo:#a88d58;
--ivory:#f4efe3;
--ivory-2:#ebe4d2;
--text:#f0eadb;
--muted:#cdc6b4;
--ink:#0c2419;
--ink-muted:#4b5c50;
--gold-ink:#76581f;
--hair:rgba(207,178,119,.28);
--hair-soft:rgba(240,234,219,.12);
--display:'Marcellus','Times New Roman',serif;
--sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
--pad:max(clamp(20px,5.5vw,88px),calc((100vw - 1320px)/2));
--ease:cubic-bezier(.16,1,.3,1);
--header:88px;
}
/* ---------- Base ---------- */
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--g900);color:var(--text);font:300 17px/1.7 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,blockquote{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.005em;color:var(--text);text-wrap:balance}
h1{font-size:clamp(2.6rem,5vw,4.6rem)}
h2{font-size:clamp(2rem,3.3vw,3.2rem)}
h3{font-size:1.5rem}
p{color:var(--muted);text-wrap:pretty}
em{font-style:normal;color:var(--gold)}
strong{font-weight:500}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--gold);color:var(--g950)}
:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
html{scrollbar-color:var(--gold-lo) var(--g950)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--g950)}
::-webkit-scrollbar-thumb{background:#3b4a3a;border:2px solid var(--g950);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-lo)}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--gold);color:var(--g950);padding:12px 18px;font-weight:500}
.skip:focus{top:12px}
.section{padding:clamp(72px,9vw,128px) var(--pad)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;font:500 11.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.eyebrow:before{content:'';width:28px;height:1px;background:currentColor;opacity:.7;flex:none}
/* Arrows + icons */
.arw{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.icon{display:block;flex:none;color:var(--gold)}
.difference-icon,.journey-icon,.q-pillar-icon,.offering-icon,.cost-icon{
width:58px;height:58px;padding:15px;border-radius:50%;
border:1px solid rgba(207,178,119,.5);
background:radial-gradient(circle at 32% 26%,rgba(232,213,163,.16),rgba(207,178,119,.02) 68%);
box-shadow:inset 0 0 0 4px var(--ring-gap,var(--g900)),inset 0 0 0 5px rgba(207,178,119,.2);
}
/* ---------- Buttons & links ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:0 28px;background:var(--gold);color:var(--g950);border:1px solid var(--gold);font:500 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.button:hover{background:var(--gold-hi);border-color:var(--gold-hi);box-shadow:0 10px 30px -12px rgba(207,178,119,.55)}
.button:hover .arw{transform:translate(3px,-3px)}
.button:disabled{opacity:.6;cursor:progress}
.hero-actions .button:hover .arw{transform:translateY(3px)}
.text-link{display:inline-flex;align-items:center;gap:12px;padding:8px 0;font:500 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text);background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;transition:color .35s var(--ease),background-size .5s var(--ease)}
.text-link .arw{color:var(--gold)}
.text-link:hover{color:var(--gold-hi)}
.text-link:hover .arw{transform:translate(3px,-3px)}
button.text-link{border:0;background-color:transparent}
/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad);background:rgba(8,17,13,.9);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);border-bottom:1px solid var(--hair);transition:background .5s var(--ease),border-color .5s var(--ease),height .5s var(--ease)}
body.home header{position:fixed;left:0;right:0;background:linear-gradient(180deg,rgba(6,14,10,.7),rgba(6,14,10,0));-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}
body.home header.scrolled{background:rgba(8,17,13,.92);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);border-color:var(--hair)}
.brand-wrap{display:flex;align-items:center;gap:26px;min-width:0}
.brand{display:block;flex:none}
.brand .logo-mark{display:block;width:62px;height:62px;object-fit:contain}
.header-tagline{padding-left:26px;border-left:1px solid var(--hair);font:400 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
nav>a{position:relative;padding:10px 0;font:400 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#d2cbba;transition:color .3s}
nav>a:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
nav>a:hover{color:var(--text)}
nav>a:hover:after,nav>a[aria-current]:after{transform:scaleX(1)}
nav>a[aria-current]{color:var(--gold)}
nav>a.nav-contact{display:inline-flex;align-items:center;gap:12px;margin-left:8px;padding:14px 20px;border:1px solid rgba(207,178,119,.6);color:var(--gold);transition:background .4s var(--ease),color .4s var(--ease)}
nav>a.nav-contact:after{display:none}
nav>a.nav-contact:hover{background:var(--gold);color:var(--g950)}
nav>a.nav-contact .arw{width:13px;height:13px}
.menu{display:none}
nav>a{white-space:nowrap}
@media(max-width:1420px){.header-tagline{display:none}}
/* ---------- Home hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:max(700px,100svh);padding:calc(var(--header) + 40px) var(--pad) 90px;overflow:hidden;background:var(--g900)}
.hero-bg{position:absolute;z-index:-2;top:0;right:0;width:max(60%,100svh);max-width:100%;height:100%;object-fit:cover;object-position:50% 62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%);filter:saturate(.92) contrast(1.04);animation:hero-settle 3.2s var(--ease) both}
.hero-press-badge{position:absolute;z-index:2;right:var(--pad);bottom:clamp(28px,4vw,48px);display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid rgba(207,178,119,.4);border-radius:999px;background:rgba(8,17,13,.5);backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);font:500 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#cdc6b4;transition:border-color .4s var(--ease),background .4s var(--ease)}
.hero-press-badge:hover{border-color:var(--gold);background:rgba(8,17,13,.75)}
.hero-press-badge strong{font:400 1rem var(--display);letter-spacing:0;text-transform:none;color:var(--gold)}
.hero-press-badge-sep{opacity:.5}
.hero-press-badge-sub{font:500 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:none;color:#cdc6b4}
@media(max-width:900px){.hero-press-badge-sub{display:none}.hero-press-badge-sep{display:none}}
@media(max-width:760px){.hero-press-badge{position:static;margin:18px auto 0;padding:8px 14px}}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
linear-gradient(180deg,rgba(6,14,10,.55) 0,rgba(6,14,10,0) 22%,rgba(6,14,10,0) 70%,var(--g900) 100%),
linear-gradient(90deg,rgba(11,24,18,.35),rgba(11,24,18,.1));mix-blend-mode:normal}
.hero-copy{position:relative;max-width:640px}
.hero h1{font-size:clamp(2.7rem,4.4vw,4.6rem);line-height:1.02;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.hero h1 em{color:var(--gold)}
.bridged-line{display:block}
.hero h1{animation:rise 1.4s var(--ease) .15s both}
.bridged-line em{display:inline-block;animation:unveil 1.3s var(--ease) .75s both}
.hero-followup{margin-top:34px;animation:rise 1.2s var(--ease) 1.15s both}
.hero-tagline{display:flex;align-items:center;gap:14px;font:400 1.15rem/1.4 var(--display);letter-spacing:.04em;color:var(--gold)}
.hero-tagline{align-items:flex-start}
.hero-tagline:before{content:'';flex:none;width:40px;height:1px;margin-top:.72em;background:var(--gold);opacity:.8}
.hero-followup>p:not(.hero-tagline){max-width:460px;margin-top:18px;font-size:1.1rem;line-height:1.7;color:#d9d2c1}
.hero-actions{display:grid;grid-template-columns:repeat(2,max-content);align-items:center;gap:22px 34px;margin-top:38px}
.hero-actions .button{grid-column:1/-1;justify-self:start}
@keyframes hero-settle{from{transform:scale(1.07);opacity:.2}to{transform:none;opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes unveil{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
/* ---------- Architecture story (home) ---------- */
.architecture-story{position:relative;isolation:isolate;display:grid;place-items:center;min-height:clamp(380px,40vw,560px);padding:80px var(--pad);overflow:hidden;text-align:center}
.architecture-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 55%;transform:translate3d(0,calc(var(--p,0) * -6%),0) scale(1.16);will-change:transform}
/* one slow sweep of light across the gold arch when the section arrives; color-dodge only lifts the bright metal */
.architecture-sweep{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,226,160,.32) 50%,transparent 58%) 160% 0/260% 100% no-repeat;mix-blend-mode:color-dodge;opacity:0}
.architecture-story.visible .architecture-sweep{animation:sweep 3.4s cubic-bezier(.45,0,.2,1) .5s both}
@keyframes sweep{0%{opacity:0;background-position:160% 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:-60% 0}}
.architecture-copy{position:relative;z-index:1}
.lede-turn{display:block;margin-top:.8em;font-size:1.15em;color:var(--gold)}
.lede-turn+*,.architecture-lede+.architecture-body{margin-top:14px}
/* the resolution lands as the light crosses the arch */
html.js:not(.reduced-motion) .architecture-story .lede-turn{opacity:0}
.architecture-story.visible .lede-turn{animation:lede-turn 1.6s var(--ease) 1.7s both}
@keyframes lede-turn{from{opacity:0;letter-spacing:.12em;filter:blur(6px)}to{opacity:1;letter-spacing:.005em;filter:none}}
.architecture-story.visible .architecture-body{animation:rise 1.2s var(--ease) 2.4s both}
.architecture-body em{font-family:var(--display);font-size:1.08em;color:var(--gold)}
.architecture-story:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--g900) 0,rgba(11,24,18,.72) 22%,rgba(11,24,18,.6) 60%,var(--g900) 100%),radial-gradient(ellipse at center,rgba(6,14,10,.55),transparent 70%)}
.architecture-copy{max-width:880px}
.architecture-lede{font:400 clamp(1.7rem,3.2vw,2.8rem)/1.25 var(--display);color:var(--text);text-wrap:balance}
.architecture-body{margin-top:26px;font:300 clamp(1.05rem,1.6vw,1.35rem)/1.7 var(--sans);color:#d9d2c1}
/* ---------- Principle bar ---------- */
/* ---------- Proof / research ---------- */
.proof-lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,90px);align-items:center}
.proof-lead h2{max-width:14ch}
.proof-lead h2.mantra{max-width:34ch}
.proof-lead>div>p:not(.eyebrow){max-width:500px;margin-top:26px}
.proof-ticker{position:relative;padding-left:clamp(28px,5vw,72px);border-left:1px solid var(--hair);min-height:300px}
.stat-column{display:flex;flex-direction:column;gap:14px;padding-left:clamp(16px,3vw,32px);border-left:1px solid var(--hair)}
.stat-item{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--hair)}
.stat-item:first-child{padding-top:0;border-top:0}
.stat-item .stat-num{flex:none;width:2.3em;text-align:center;font:400 1.6rem/1 var(--display);letter-spacing:-.01em;color:var(--gold);font-variant-numeric:lining-nums}
.stat-item .stat-num sup{font-size:.45em;margin-left:.05em;vertical-align:.65em}
.stat-item .stat-body{min-width:0}
.stat-item p{max-width:340px;font-size:.85rem;line-height:1.35;color:#d9d2c1}
.stat-item a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:500 10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lo);transition:color .3s}
.stat-item a:hover{color:var(--gold)}
.stat-item a .arw{width:10px;height:10px}
.ticker-stat{display:none}
.ticker-stat.active{display:block;animation:rise .8s var(--ease) both}
.ticker-stat>strong{display:block;font:400 clamp(5.5rem,10vw,9.5rem)/.95 var(--display);letter-spacing:-.02em;color:var(--gold);font-variant-numeric:lining-nums}
.ticker-stat>strong>span{font-size:.42em;margin-left:.06em;vertical-align:.95em}
.ticker-stat>p{max-width:340px;margin-top:20px;font-size:1.08rem;color:#d9d2c1}
.ticker-stat>a{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:500 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo);transition:color .3s}
.ticker-stat>a:hover{color:var(--gold)}
.ticker-stat>a .arw{width:12px;height:12px}
.ticker-dots{display:flex;gap:2px;margin-top:22px;margin-left:-10px}
.ticker-dots .dot{position:relative;width:34px;height:44px;padding:0;border:0;background:none}
.ticker-dots .dot:after{content:'';position:absolute;left:10px;right:10px;top:50%;height:1px;background:rgba(207,178,119,.3);transition:background .4s,height .4s}
.ticker-dots .dot.active:after{background:var(--gold);height:2px;margin-top:-.5px}
.ticker-dots .dot:hover:after{background:var(--gold-lo)}
/* ---------- The mantra (home): statement, then "brilliantly.", then the six symptoms ---------- */
.intro{--ring-gap:#0e1c15;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(40px,7vw,110px);row-gap:clamp(44px,5.5vw,72px);align-items:end;border-top:1px solid var(--hair);background:radial-gradient(ellipse 55% 60% at 10% 30%,var(--mist),transparent 70%),url('assets/mist.svg') 30% 30%/cover,linear-gradient(180deg,var(--g950),var(--g900))}
.intro>div:first-child{grid-column:1;grid-row:1}
.intro-body{display:contents}
.mantra{font-size:clamp(2.1rem,3.6vw,3.5rem)}
.mantra>span,.mantra-line{display:block}
.mantra-line{margin-top:.12em;font-size:1.28em;line-height:1;color:var(--gold-hi)}
.intro .lead{grid-column:2;grid-row:1;align-self:end;padding-left:clamp(24px,3vw,44px);border-left:1px solid var(--hair);font:400 clamp(1.25rem,1.8vw,1.6rem)/1.45 var(--display);color:var(--text)}
.cost-card{grid-column:1/-1;grid-row:2;margin:0;border-block:1px solid var(--hair)}
.cost-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.cost-list li{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:34px clamp(14px,1.8vw,26px) 32px;border-left:1px solid var(--hair-soft);font:400 1.12rem/1.3 var(--display);color:var(--text)}
.cost-list li:first-child{border-left:0;padding-left:0}
.root-cause-line{grid-column:1;grid-row:3;max-width:60ch;font-size:1.08rem;line-height:1.75;color:#d4d5c5}
.intro .text-link{grid-column:2;grid-row:3;justify-self:start;align-self:end}
/* sequence: line 1, line 2, a beat, "brilliantly." resolves in gold, then the symptoms arrive */
html.js:not(.reduced-motion) .intro :is(.mantra>span,.mantra-line,.lead,.cost-list li,.root-cause-line,.text-link){opacity:0}
.intro.visible .mantra-l1{animation:rise .9s var(--ease) .1s both}
.intro.visible .mantra-l2{animation:rise .9s var(--ease) .5s both}
.intro.visible .mantra-line{animation:lede-turn 1.6s var(--ease) 1.2s both}
.intro.visible .lead{animation:rise 1s var(--ease) 2.3s both}
.intro.visible .cost-list li{animation:rise .9s var(--ease) both}
.intro.visible .cost-list li:nth-child(1){animation-delay:2.55s}.intro.visible .cost-list li:nth-child(2){animation-delay:2.65s}.intro.visible .cost-list li:nth-child(3){animation-delay:2.75s}.intro.visible .cost-list li:nth-child(4){animation-delay:2.85s}.intro.visible .cost-list li:nth-child(5){animation-delay:2.95s}.intro.visible .cost-list li:nth-child(6){animation-delay:3.05s}
.intro.visible .root-cause-line{animation:rise 1s var(--ease) 3.3s both}
.intro.visible .text-link{animation:rise 1s var(--ease) 3.45s both}
/* ---------- Questions ---------- */
.questions-section{padding-bottom:clamp(40px,5vw,72px)}
.questions-card{--ring-gap:var(--g850);position:relative;padding:clamp(40px,6vw,88px) clamp(24px,5vw,80px);background:linear-gradient(160deg,var(--g800),var(--g850) 60%);border:1px solid var(--hair);overflow:hidden}
.questions-card:before{content:'';position:absolute;inset:14px;border:1px solid var(--hair-soft);pointer-events:none}
.questions-intro{max-width:760px;margin:0 auto;text-align:center}
.questions-intro .eyebrow{justify-content:center}
.questions-intro .eyebrow:after{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.questions-bridge{max-width:600px;margin:26px auto 0}
.br-m{display:none}
.questions-bridge em{display:block;margin-top:10px;font:400 1.2rem/1.4 var(--display);color:var(--gold)}
.q-pillars{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(48px,6vw,80px)}
.q-pillar-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--hair)}
.q-pillar-head span{font:400 1.45rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.q-pillar-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.q-item-lead{display:block;font:400 1.02rem/1.45 var(--sans);color:var(--text)}
.q-item-detail{display:block;margin-top:2px;font:300 .98rem/1.5 var(--sans);color:var(--muted)}
.solution-bridge{max-width:780px;margin:clamp(48px,6vw,80px) auto 0;padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--hair);text-align:center;font:400 clamp(1.25rem,2vw,1.6rem)/1.45 var(--display);color:var(--text)}
/* ---------- Services ---------- */
.services{padding-top:clamp(56px,7vw,96px)}
.section-heading{margin-bottom:clamp(36px,5vw,64px)}
.section-heading>div{max-width:760px}
.services-bridge,.why-different-intro,.journey-intro,.engagements-intro{max-width:620px;margin-top:24px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-row{display:contents}
.service{--ring-gap:var(--g850);position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(28px,3vw,40px);background:linear-gradient(170deg,var(--g800),var(--g850));border:1px solid var(--hair-soft);transition:border-color .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.service:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;transition:opacity .6s}
.service:hover{border-color:var(--hair);transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.service:hover:before{opacity:1}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-top-label{display:flex;align-items:center;gap:16px;font:500 11.5px/1 var(--sans);letter-spacing:.26em;color:var(--gold)}
.offering-icon{width:52px;height:52px;padding:13px}
.circle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;color:var(--gold);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s}
.service:hover .circle{background:var(--gold);border-color:var(--gold);color:var(--g950)}
.service:hover .circle .arw{transform:translate(2px,-2px)}
.service h3{margin:40px 0 18px;font-size:clamp(1.8rem,2.4vw,2.3rem);line-height:1.08}
.service p{font-size:1rem;line-height:1.7}
.deliverable{margin-top:auto;padding-top:26px;border-top:1px solid var(--hair);font:400 1.02rem/1.4 var(--display);color:var(--text)}
.service p+.deliverable{margin-top:30px}
.deliverable>span{display:block;margin-bottom:10px;font:500 10.5px/1 var(--sans);letter-spacing:.26em;color:var(--gold-lo)}
.discovery-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(28px,3.5vw,44px) clamp(24px,3.5vw,48px);border:1px solid var(--hair);background:var(--g950)}
.discovery-cta .eyebrow{flex-basis:100%;margin-bottom:-8px}
.discovery-cta p:not(.eyebrow){flex:1 1 320px;max-width:620px;font:400 clamp(1.15rem,1.6vw,1.35rem)/1.45 var(--display);color:var(--text)}
.service-grid .discovery-cta{grid-column:1/-1;margin-top:0}
main>.discovery-cta{margin:0 var(--pad) clamp(56px,7vw,96px)}
/* ---------- Partner strip (home) ---------- */
.partner-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,8vw,120px);align-items:center;border-top:1px solid var(--hair)}
.partner-strip>div>p:not(.eyebrow){max-width:480px;margin-top:24px}
.experience{padding-left:clamp(28px,5vw,72px);border-left:1px solid var(--hair)}
.big-number{display:block;font:400 clamp(6rem,11vw,10rem)/.9 var(--display);color:var(--gold)}
.experience>span:not(.big-number){display:block;margin-top:14px;font:500 11.5px/1.5 var(--sans);letter-spacing:.26em;color:var(--muted)}
.names{display:grid;margin-top:34px;border-top:1px solid var(--hair)}
.names>a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--hair);font:400 1.5rem/1.2 var(--display);color:var(--text);transition:color .4s var(--ease),padding .5s var(--ease)}
.names>a .arw{grid-column:2;grid-row:1/3;color:var(--gold)}
.names small{grid-column:1;font:400 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lo)}
.names>a:hover{color:var(--gold-hi);padding-left:10px}
.names>a:hover .arw{transform:translate(3px,-3px)}
.ps-quote{grid-column:1/-1;margin-top:clamp(24px,4vw,48px);padding:clamp(40px,6vw,72px) 0 0;border-top:1px solid var(--hair);text-align:center;text-wrap:auto;font:400 clamp(1.8rem,3.2vw,3rem)/1.25 var(--display);color:var(--text)}
.ps-quote .eyebrow{justify-content:center;margin-bottom:28px}
.ps-quote .eyebrow:after{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.ps-quote cite{display:block;margin-top:26px;font:500 11.5px/1.5 var(--sans);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
/* ---------- Closing CTA panel (all pages) ---------- */
.cta{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin:0 var(--pad) clamp(72px,9vw,120px);padding:clamp(40px,6vw,88px);background:var(--g950);border:1px solid var(--hair);overflow:hidden}
.cta:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/maze-field.svg') center 88%/cover no-repeat;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 80% 90% at 70% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 90% at 70% 50%,#000 20%,transparent 75%)}
.cta:after{content:'';position:absolute;inset:14px;z-index:-1;border:1px solid var(--hair-soft);pointer-events:none}
.cta h2{font-size:clamp(2rem,3.2vw,3.1rem)}
.cta>div:last-child>p{color:#d9d2c1}
.cta>div:last-child>.button{margin-top:28px}
.cta small{display:block;margin-top:18px;font:500 11px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lo)}
.cta .discovery-cta{display:block;margin-top:34px;padding:30px 0 0;border:0;border-top:1px solid var(--hair);background:none}
.cta .discovery-cta .eyebrow{margin-bottom:12px}
.cta .discovery-cta p:not(.eyebrow){font:300 1rem/1.7 var(--sans);color:#d9d2c1;max-width:none}
.cta .discovery-cta .button{margin-top:20px;background:transparent;color:var(--gold)}
.cta .discovery-cta .button:hover{background:var(--gold);color:var(--g950)}
/* ---------- Footer ---------- */
footer{position:relative;padding:120px var(--pad) 36px;background:var(--g950);border-top:1px solid var(--hair)}
footer:before{content:'';position:absolute;left:0;right:0;top:0;height:100px;background:url('assets/maze-band.svg') center/auto 100% repeat-x;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
footer .brand .logo-mark{width:76px;height:76px}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:400 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#958d7c}
.footer-meta a{transition:color .3s}
.footer-meta a:hover{color:var(--gold)}
.footer-email{display:inline-flex;align-items:center;gap:10px;font:400 1.15rem/1 var(--display);color:var(--gold);transition:color .3s}
.footer-email:hover{color:var(--gold-hi)}
.footer-email:hover .arw{transform:translate(3px,-3px)}
/* ---------- Inner page hero ---------- */
.subhero{position:relative;isolation:isolate;min-height:clamp(420px,52vw,600px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(64px,7vw,104px);overflow:hidden;border-bottom:1px solid var(--hair)}
.subhero:before{content:'';position:absolute;z-index:-2;top:0;right:0;bottom:0;width:62%;background:url('assets/hero-maze.jpg') 50% 38%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.6) 30%,#000 70%);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.6) 30%,#000 70%);opacity:.75}
.subhero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--g900) 30%,rgba(11,24,18,.35) 70%,rgba(11,24,18,.15)),linear-gradient(0deg,var(--g900),transparent 35%)}
.subhero h1{max-width:15ch;font-size:clamp(2.6rem,5.2vw,4.8rem);animation:rise 1.2s var(--ease) .1s both}
.subhero>p:last-child{max-width:560px;margin-top:28px;font-size:1.15rem;color:#d9d2c1;animation:rise 1.2s var(--ease) .35s both}
.subhero .eyebrow{animation:rise 1.2s var(--ease) both}
.handwritten-underline{color:var(--gold);font-weight:400}
/* ---------- Why IAAI ---------- */
.difference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.difference{padding:clamp(28px,3.5vw,48px);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background .6s var(--ease)}
.difference:hover{background:rgba(207,178,119,.035)}
.difference h3{margin:28px 0 14px;font-size:1.55rem}
.difference p{font-size:1rem}
.why-journey{--ring-gap:var(--g850);background:var(--g850);border-block:1px solid var(--hair)}
.journey-grid{--jg:clamp(20px,2.5vw,36px);position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--jg)}
.journey-grid:before{content:'';position:absolute;left:29px;right:calc((100% - 4*var(--jg))/5 - 29px);top:29px;height:1px;background:linear-gradient(90deg,var(--gold-lo),var(--gold) 50%,var(--gold-lo))}
.journey-item{position:relative}
.journey-icon{position:relative;background-color:var(--g850)}
.journey-item h3{margin:26px 0 12px;font-size:1.4rem;color:var(--gold)}
.journey-item p{font-size:.98rem}
/* ---------- Expertise ---------- */
.subhero-tagline{max-width:640px!important}
.noise-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,100px);align-items:center;border-bottom:1px solid var(--hair)}
.noise-copy>p:not(.eyebrow){max-width:440px;margin-top:26px;font-size:1.1rem}
.rq-panel{--near-ring:#8FB09E;position:relative;container-type:inline-size;width:100%;max-width:560px;margin:auto;padding:5% 5%;border-radius:28px;border:1px solid rgba(207,178,119,.5);background:radial-gradient(circle at 50% 36%,rgba(207,178,119,.14),rgba(207,178,119,0) 58%),linear-gradient(160deg,var(--g850),var(--g900) 55%,var(--g950));box-shadow:inset 0 0 0 10px var(--g900),inset 0 0 0 11px rgba(207,178,119,.22),0 30px 70px -30px rgba(0,0,0,.6),0 0 90px -30px rgba(207,178,119,.18)}
.rq-panel:before{content:'';position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.word-canvas{position:relative;height:clamp(560px,112cqw,680px);--circle-r:clamp(45px,9cqw,60px)}
.orbit-spine-a{position:absolute;top:calc(50% - 166px + var(--circle-r));left:50%;width:1.5px;height:calc(166px - 2 * var(--circle-r));background:var(--gold);opacity:.45;z-index:0;pointer-events:none}
.orbit-spine-b{position:absolute;top:calc(50% + var(--circle-r));left:50%;width:1.5px;height:calc(166px - 2 * var(--circle-r));background:var(--gold);opacity:.45;z-index:0;pointer-events:none}
.orbit-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + var(--y)));z-index:1;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(90px,18cqw,120px);height:clamp(90px,18cqw,120px);border-radius:50%;border:1.5px solid var(--gold-hi);background:radial-gradient(circle,rgba(207,178,119,.22),rgba(11,24,18,0) 72%);box-shadow:0 0 36px -4px rgba(232,213,163,.55)}
.orbit-circle .cloud-focus{font:400 clamp(.85rem,3cqw,1.2rem)/1 var(--display);color:var(--gold)}
.orbit-q{position:absolute;top:50%;left:50%;opacity:0;transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,0px)));transition:opacity .5s var(--ease)}
.orbit-q.is-placed{opacity:1}
.orbit-q-label{display:inline-block;white-space:nowrap;font:300 clamp(.68rem,2.4cqw,.9rem)/1.3 var(--sans);scale:1;transition:scale .9s var(--ease),color .9s var(--ease),opacity .9s var(--ease);animation:orbit-float 5s ease-in-out infinite;animation-delay:var(--d,0s)}
@media(max-width:480px){.orbit-q-label{font-size:.64rem;font-weight:400;filter:brightness(1.4)}}
.orbit-q-label.loud{color:var(--gold)}
.orbit-q-label.is-loud{scale:1.22;color:var(--gold)}
@media(max-width:480px){.orbit-q-label.is-loud{scale:1.08}}
.orbit-q-label.is-hush{scale:.82;opacity:.45}
@keyframes orbit-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.expertise-accordions{display:grid;gap:22px}
.expertise-accordions>.section-heading{margin-bottom:clamp(14px,3vw,40px)}
.engagement-card{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);padding:clamp(32px,5vw,72px);background:linear-gradient(165deg,var(--g800),var(--g850));border:1px solid var(--hair-soft);scroll-margin-top:calc(var(--header) + 20px)}
.engagement-card:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent 70%)}
.engagement-card-badge{display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;font:500 11.5px/1 var(--sans);letter-spacing:.28em;color:var(--gold)}
.engagement-card-badge:before{content:'';width:28px;height:1px;background:currentColor}
.engagement-title{font:400 clamp(2rem,3.2vw,3rem)/1.08 var(--display)}
.engagement-card-tagline{margin-top:18px;max-width:380px;font-size:1.08rem}
.engagement-card-detail h3{font-size:1.45rem;line-height:1.3}
.engagement-card-detail>p{margin-top:14px}
.engagement-card-detail ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair-soft)}
.engagement-card-detail ul{max-width:62ch}
.engagement-card-detail li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--hair-soft);font:400 1rem/1.6 var(--sans);color:var(--muted)}
.engagement-card-detail li strong{font-weight:500;color:var(--text)}
.engagement-card-detail li:before{content:'';position:absolute;left:2px;top:24px;width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--gold)}
.engagement-card-outcome{margin-top:30px;padding:26px 28px;background:var(--g950);border:1px solid var(--hair)}
.engagement-card-outcome .eyebrow{margin-bottom:12px}
.engagement-card-outcome-name{font:400 1.3rem/1.3 var(--display);color:var(--text)}
.engagement-card-outcome-desc{margin-top:8px;font-size:.98rem}
.engagement-card-cta{display:inline-flex;align-items:center;gap:16px;min-height:52px;margin-top:30px;padding:0 26px;border:1px solid rgba(207,178,119,.6);font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);transition:background .4s var(--ease),color .4s var(--ease)}
.engagement-card-cta:hover{background:var(--gold);color:var(--g950)}
.engagement-card-cta:hover .arw{transform:translate(3px,-3px)}
main>.principle-bar{margin-bottom:clamp(56px,7vw,96px)}
/* ---------- The partners ---------- */
.partner-intro{text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.partner-intro .eyebrow{justify-content:center}
.partner-intro .eyebrow:after{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.partner-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px;margin:0 auto clamp(48px,6vw,80px)}
.partner-tabs>button{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;padding:0;border:1px solid var(--hair-soft);background:var(--g950);overflow:hidden;text-align:left;transition:border-color .6s var(--ease)}
.partner-tabs>button>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) brightness(.62);transition:filter .9s var(--ease),transform 1.2s var(--ease)}
.partner-tabs>button:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(6,14,10,.95))}
.partner-tabs>button:after{content:'';position:absolute;inset:12px;z-index:1;border:1px solid transparent;transition:border-color .6s var(--ease)}
.partner-tabs>button>span{position:relative;z-index:2;margin:0 clamp(18px,2.5vw,32px);font:400 clamp(1.3rem,2.4vw,2.1rem)/1.15 var(--display);color:var(--text)}
.partner-tabs>button>small{position:relative;z-index:2;margin:8px clamp(18px,2.5vw,32px) clamp(20px,2.5vw,32px);font:500 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.partner-tabs>button:hover>img{filter:grayscale(.5) brightness(.8);transform:scale(1.03)}
.partner-tabs>button[aria-selected=true]{border-color:rgba(207,178,119,.6)}
.partner-tabs>button[aria-selected=true]:after{border-color:rgba(207,178,119,.35)}
.partner-tabs>button[aria-selected=true]>img{filter:none}
.partner-tabs{display:none}
.js .partner-tabs{display:grid}
.partner-panel{max-width:820px;margin:0 auto}
.partner-panel:not([hidden]){animation:rise .9s var(--ease) both}
.partner-panel[hidden]{display:none}
.partner-panel+.partner-panel{margin-top:80px}
.js .partner-panel+.partner-panel{margin-top:0}
.partner-panel h2{font-size:clamp(2.4rem,4vw,3.6rem)}
.bio-role{margin:8px 0 30px;font:500 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.partner-panel>div>p:not(.eyebrow):not(.bio-role){margin-bottom:20px;font-size:1.06rem;line-height:1.8}
.credential-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:34px 0;padding:0}
.credential-list li{padding:9px 14px;border:1px solid var(--hair);font:400 .88rem/1.35 var(--sans);color:#d6cfbe}
.track-record-label{margin-top:44px}
.track-record{list-style:none;margin:0 0 36px;padding:0;border-top:1px solid var(--hair-soft)}
.track-record li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;padding:15px 0;border-bottom:1px solid var(--hair-soft);font-size:.95rem;color:var(--muted)}
.track-record strong{font:400 1.08rem/1.4 var(--display);color:var(--text)}
.partner-switch{display:none}
.js .partner-switch{display:inline-flex}
/* ---------- Contact ---------- */
.contact-banner{position:relative;margin:clamp(40px,5vw,72px) var(--pad) 0;overflow:hidden;border:1px solid var(--hair-soft)}
.contact-banner img{display:block;width:100%;height:clamp(240px,34vw,460px);object-fit:cover;object-position:60% 45%;filter:saturate(.85)}
.contact-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,14,10,.75),transparent 45%),linear-gradient(rgba(11,24,18,.18),rgba(11,24,18,.18))}
.contact-banner figcaption{position:absolute;z-index:1;right:24px;bottom:20px;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.contact-intro{max-width:720px;margin:clamp(40px,5vw,64px) auto 0;padding:0 var(--pad);text-align:center;font:400 clamp(1.15rem,1.7vw,1.4rem)/1.6 var(--display);color:#d9d2c1}
.contact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,110px);align-items:start}
.contact-details h2{margin-bottom:36px}
.contact-field{padding:18px 0;border-top:1px solid var(--hair-soft)}
.field-label{margin-bottom:6px;font:500 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lo)}
.contact-field p:not(.field-label){color:var(--text)}
.contact-field a{display:inline-flex;align-items:center;gap:10px;color:var(--text);overflow-wrap:anywhere;transition:color .3s}
.contact-field a:hover{color:var(--gold)}
.contact-field .email{font:400 1.25rem/1.3 var(--display);color:var(--gold)}
.contact-partners{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--hair)}
.contact-partners li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--hair-soft)}
.contact-partners strong{font:400 1.3rem/1.2 var(--display);color:var(--text)}
.contact-partners span{font-size:.92rem;color:var(--muted)}
#contact-form{position:relative;padding:clamp(28px,4.5vw,60px);background:linear-gradient(165deg,var(--g800),var(--g850));border:1px solid var(--hair)}
#contact-form:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
#contact-form h2{margin-bottom:34px;font-size:clamp(1.9rem,3vw,2.6rem)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
#contact-form label{display:block;margin-bottom:26px;font:500 11px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
#contact-form label>span{letter-spacing:.06em;text-transform:none;color:var(--muted);font-weight:300}
#contact-form input,#contact-form textarea{display:block;width:100%;margin-top:8px;padding:12px 0;background:transparent;border:0;border-bottom:1px solid rgba(240,234,219,.25);border-radius:0;font:300 17px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--text);transition:border-color .4s var(--ease)}
#contact-form textarea{resize:vertical;min-height:120px}
#contact-form input::placeholder,#contact-form textarea::placeholder{color:#8a8272}
#contact-form input:hover,#contact-form textarea:hover{border-bottom-color:rgba(207,178,119,.55)}
#contact-form input:focus,#contact-form textarea:focus{outline:0;border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
#contact-form input:user-invalid,#contact-form textarea:user-invalid{border-bottom-color:#d49a74}
#contact-form input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 40px var(--g800) inset;caret-color:var(--gold)}
#contact-form .button{margin-top:6px}
.form-note{margin-top:20px;font-size:.92rem}
#form-status{margin-top:12px;font-size:.98rem;color:var(--gold-hi)}
#form-status.form-error{color:#e2a883}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* ---------- Atmosphere: black-green base with drifting green mist ----------
assets/mist.svg is a soft fractal cloud layer; radial glows add depth. */
.hero{background:radial-gradient(ellipse 65% 80% at 22% 45%,rgba(30,52,42,.26),transparent 70%),url('assets/mist.svg') 0 30%/cover,var(--g900)}
.principle-bar{background:linear-gradient(90deg,var(--g950),#07140e 50%,var(--g950))}
.proof-section{background:url('assets/mist.svg') 80% 40%/cover,radial-gradient(ellipse 45% 70% at 82% 50%,var(--mist),transparent 70%),linear-gradient(180deg,var(--g950),var(--g900))}
.questions-card{--ring-gap:#0e1d16;background:url('assets/mist.svg') 30% 20%/cover,radial-gradient(ellipse 60% 55% at 12% 0%,rgba(34,56,46,.42),transparent 70%),radial-gradient(ellipse 50% 50% at 95% 100%,rgba(26,44,36,.35),transparent 70%),linear-gradient(165deg,#12241b,#08110d 78%)}
.services{background:linear-gradient(180deg,var(--g900),var(--g950) 70%)}
.service{--ring-gap:#0a1a13;background:radial-gradient(ellipse 100% 55% at 0% 0%,rgba(34,56,46,.32),transparent 70%),linear-gradient(170deg,#112219,#08110d)}
.discovery-cta{background:radial-gradient(ellipse 50% 120% at 100% 50%,rgba(30,52,42,.22),transparent 70%),#070f0b}
.partner-strip{background:url('assets/mist.svg') 15% 70%/cover,linear-gradient(180deg,var(--g950),var(--g900))}
.cta{background:radial-gradient(ellipse 55% 80% at 15% 20%,var(--mist),transparent 70%),linear-gradient(135deg,#0d1b15,#070f0b 70%)}
footer{background:#060d0a}
.subhero{background:url('assets/mist.svg') 0 50%/cover,var(--g900)}
.why-different{background:linear-gradient(180deg,var(--g900),var(--g950))}
.why-journey{--ring-gap:#0e1d16;background:url('assets/mist.svg') 60% 50%/cover,radial-gradient(ellipse 60% 80% at 50% 0%,var(--mist),transparent 70%),linear-gradient(180deg,#0e1d16,#08110d)}
.journey-icon{background-color:#0e1d16}
.noise-section{background:radial-gradient(circle at 72% 50%,var(--mist),transparent 45%),url('assets/mist.svg') 70% 50%/cover,var(--g950)}
.engagement-card{background:url('assets/mist.svg') 90% 10%/cover,radial-gradient(ellipse 70% 60% at 0% 0%,rgba(34,56,46,.3),transparent 70%),linear-gradient(165deg,#112219,#08110d 80%)}
.biographies{background:url('assets/mist.svg') 50% 30%/cover,linear-gradient(180deg,var(--g900),var(--g950))}
.contact-layout{background:url('assets/mist.svg') 20% 60%/cover,var(--g950)}
#contact-form{background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(34,56,46,.32),transparent 70%),linear-gradient(165deg,#112219,#08110d)}
/* ---------- Reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
html.js .reveal.visible{opacity:1;transform:none}
html.js.reduced-motion .reveal{opacity:1;transform:none}
/* ---------- Tablet ---------- */
@media(max-width:1100px){
nav{gap:18px}
nav>a{letter-spacing:.12em}
.journey-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
.journey-grid:before{display:none}
.service-grid{grid-template-columns:minmax(0,1fr)}
.q-pillars{grid-template-columns:minmax(0,1fr);gap:44px}
.q-pillar-head{flex-direction:row;align-items:center}
.q-pillar-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.difference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cost-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.cost-list li:nth-child(3n+1){border-left:0;padding-left:0}
.cost-list li:nth-child(n+4){border-top:1px solid var(--hair-soft)}
}
/* ---------- Mobile nav ---------- */
@media(max-width:960px){
:root{--header:76px}
/* backdrop-filter would make the header the containing block of the fixed menu overlay */
header,body.home header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none}
header,body.home header.scrolled{background:rgba(8,17,13,.97)}
body.home header{background:linear-gradient(180deg,rgba(6,14,10,.8),rgba(6,14,10,0))}
.brand .logo-mark{width:52px;height:52px}
.brand-wrap{position:relative;z-index:60}
.menu{position:relative;z-index:60;display:flex;flex-direction:column;justify-content:center;gap:7px;width:48px;height:48px;padding:0 12px;background:transparent;border:1px solid var(--hair);color:var(--gold)}
.menu span{display:block;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.menu[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
nav{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:calc(var(--header) + 20px) var(--pad) 40px;background:var(--g950) url('assets/maze-band.svg') center bottom 40px/auto 90px repeat-x;visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s linear .5s}
nav.open{visibility:visible;opacity:1;transition:opacity .5s var(--ease)}
nav>a{padding:18px 0;border-bottom:1px solid var(--hair-soft);font:400 clamp(1.6rem,6vw,2.2rem)/1.1 var(--display);letter-spacing:.02em;text-transform:none;color:var(--text);transform:translateY(12px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease),color .3s}
nav.open>a{transform:none;opacity:1}
nav.open>a:nth-child(2){transition-delay:.04s}nav.open>a:nth-child(3){transition-delay:.08s}nav.open>a:nth-child(4){transition-delay:.12s}nav.open>a:nth-child(5){transition-delay:.16s}nav.open>a:nth-child(6){transition-delay:.2s}
nav>a:after{display:none}
nav>a.nav-contact{justify-content:space-between;margin:28px 0 0;padding:20px 22px;font:500 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
body.menu-open{overflow:hidden}
body.menu-open header{background:var(--g950)!important;border-color:var(--hair)!important}
}
.mission-short{display:none}
/* ---------- Tablet: the decorative rail is the first thing to go when columns get tight ---------- */
@media(max-width:700px){
.reality-item{grid-template-columns:1fr!important;gap:8px!important}
.reality-grid{grid-template-columns:1fr!important}
.reality-rail{display:none}
.mission-short{display:inline}
.mission-full{display:none}
}
/* ---------- Phone ---------- */
@media(max-width:760px){
body{font-size:16px}
.eyebrow{font-size:10.5px;letter-spacing:.22em;gap:12px;margin-bottom:18px}
.eyebrow:before{width:22px}
.hero{flex-direction:column;align-items:stretch;min-height:0;padding:calc(var(--header) + 36px) var(--pad) 0}
.hero-copy{order:0;max-width:none}
.hero-emblem-float{display:none}
.hero h1{font-size:clamp(2.2rem,10.4vw,3.2rem);white-space:normal;text-wrap:auto}
.hero-followup{margin-top:24px}
.hero-tagline{font-size:1.02rem}
.hero-tagline:before{width:24px}
.hero-followup>p:not(.hero-tagline){font-size:1.02rem;margin-top:14px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:28px}
.hero-actions .button{width:100%;justify-content:space-between;margin:0 0 6px}
.hero-bg{position:relative;order:1;z-index:-2;width:calc(100% + 2*var(--pad));max-width:none;height:auto;aspect-ratio:4/5;margin:-40px calc(-1*var(--pad)) 0;object-position:50% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%)}
.hero-scrim{background:linear-gradient(180deg,rgba(6,14,10,.6) 0,rgba(6,14,10,0) 12%,rgba(6,14,10,0) 88%,var(--g900) 100%)}
.architecture-story{min-height:420px;padding:72px var(--pad)}
.architecture-image{object-position:58% 50%}
.proof-lead{grid-template-columns:minmax(0,1fr);gap:40px}
.proof-ticker{min-height:280px;padding:36px 0 0;border-left:0;border-top:1px solid var(--hair)}
.ticker-stat>strong{font-size:6.2rem}
.questions-section{padding-inline:0}
.questions-card{border-inline:0;padding:64px var(--pad)}
.questions-card:before{inset:10px 10px}
.questions-intro,.questions-intro .eyebrow{text-align:left;justify-content:flex-start}
.questions-intro .eyebrow:after{display:none}
.q-pillar-list{grid-template-columns:minmax(0,1fr)}
.solution-bridge{text-align:left}
.service{padding:30px 24px}
.service h3{margin-top:32px}
.discovery-cta .button,.cta .button{width:100%;justify-content:space-between}
.discovery-cta{padding:28px 22px}
.partner-strip{grid-template-columns:minmax(0,1fr);gap:44px}
.experience{padding:36px 0 0;border-left:0;border-top:1px solid var(--hair)}
.big-number{font-size:6.5rem}
.ps-quote{text-align:left}
.ps-quote .eyebrow{justify-content:flex-start}
.ps-quote .eyebrow:after{display:none}
.cta{grid-template-columns:minmax(0,1fr);margin-inline:0;border-inline:0;padding:64px var(--pad)}
.cta:after{inset:10px}
footer{padding-top:104px}
.footer-row{flex-direction:column;align-items:flex-start;gap:18px}
.footer-meta{flex-direction:column;align-items:flex-start;gap:4px}
.footer-meta>span[aria-hidden]{display:none}
.subhero{min-height:0;padding-top:64px;padding-bottom:56px}
.subhero:before{width:100%;opacity:.4;background-position:50% 30%;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.subhero:after{background:linear-gradient(90deg,rgba(11,24,18,.92),rgba(11,24,18,.55)),linear-gradient(0deg,var(--g900),transparent 40%)}
.subhero h1{font-size:clamp(2.2rem,9.4vw,3rem)}
.subhero>p:last-child{font-size:1.05rem}
.difference-grid{grid-template-columns:minmax(0,1fr);border-left:0}
.difference{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:20px;padding:28px 0;border-right:0}
.difference .icon{grid-row:1/3}
.difference h3{margin:4px 0 8px;font-size:1.35rem}
/* long paragraphs reflow naturally on phones; headings and short leads keep their breaks */
:is(.services-bridge,.subhero-tagline,.root-cause-line,.solution-bridge,.proof-lead p,.partner-strip p,.subhero>p,.cta p,.architecture-lede,.architecture-body) br{display:none}
.br-m{display:inline}
.intro{grid-template-columns:minmax(0,1fr);row-gap:32px}
.intro>div:first-child,.intro .lead,.cost-card,.root-cause-line,.intro .text-link{grid-column:1;grid-row:auto}
.intro .lead{padding-left:0;border-left:0}
.cost-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.cost-list li{gap:14px;padding:24px 14px 22px;font-size:1.02rem;border-left:1px solid var(--hair-soft)}
.cost-list li:nth-child(3n+1){border-left:1px solid var(--hair-soft);padding-left:14px}
.cost-list li:nth-child(odd){border-left:0;padding-left:0}
.cost-list li:nth-child(n+3){border-top:1px solid var(--hair-soft)}
.cost-list .cost-icon{width:50px;height:50px;padding:13px}
.journey-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
.journey-grid:before{display:block;left:29px;right:auto;top:29px;bottom:29px;width:1px;height:auto;background:linear-gradient(180deg,var(--gold),var(--gold-lo))}
.journey-item{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:20px;padding-bottom:36px}
.journey-item:last-child{padding-bottom:0}
.journey-icon{grid-row:1/3}
.journey-item h3{margin:12px 0 8px}
.noise-section{grid-template-columns:minmax(0,1fr)}
.word-cloud{max-width:none}
.engagement-card{grid-template-columns:minmax(0,1fr);padding:36px 22px}
.engagement-card-outcome{padding:22px 20px}
.engagement-card-cta{width:100%;justify-content:space-between}
main>.discovery-cta{margin-inline:0;border-inline:0}
.partner-tabs{gap:10px}
.partner-tabs>button:after{inset:6px}
.partner-tabs>button>span{font-size:1.2rem;margin:0 14px}
.partner-tabs>button>small{margin:6px 14px 16px;font-size:9.5px;letter-spacing:.18em}
.track-record li{flex-direction:column}
.contact-banner{margin-inline:0;border-inline:0}
.contact-banner img{height:240px}
.contact-layout{grid-template-columns:minmax(0,1fr)}
.contact-details{order:2}
.form-row{grid-template-columns:minmax(0,1fr)}
#contact-form{margin-inline:calc(-1*var(--pad));border-inline:0;padding:44px var(--pad)}
#contact-form .button{width:100%;justify-content:space-between}
}
@media(max-width:380px){
.hero-actions .text-link{letter-spacing:.14em;font-size:11px}
}
/* ---------- Motion & contrast preferences ---------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.architecture-image{transform:scale(1.16)}
.architecture-sweep{display:none}
}
@media(forced-colors:active){
.service,.engagement-card,.cta,.partner-tabs>button,#contact-form{border:1px solid CanvasText}
.partner-tabs>button[aria-selected=true]{outline:2px solid Highlight}
}
/* ---------- Pacing + lines (inner pages) ---------- */
em.line{display:block;margin-top:6px}
.subhero{min-height:clamp(480px,72svh,720px)}
.subhero h1{animation-delay:.15s}
.subhero>p:last-child{animation-delay:.6s}
@media(max-width:760px){.subhero{min-height:min(68svh,560px)}}
/* ---------- Engagement switcher (expertise) ---------- */
.engagement-panels{display:grid;gap:22px}
.engagement-tabs{display:none}
.js .engagement-tabs{scroll-margin-top:calc(var(--header) + 24px);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--hair)}
.engagement-tabs button{position:relative;padding:22px clamp(12px,2.2vw,32px) 26px;background:none;border:0;text-align:left;font:400 clamp(1.05rem,1.9vw,1.6rem)/1.15 var(--display);color:rgba(240,234,219,.5);transition:color .5s var(--ease),background .5s var(--ease)}
.engagement-tabs button+button{border-left:1px solid var(--hair-soft)}
.engagement-tabs button span{display:block;margin-bottom:12px;font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lo);transition:color .5s var(--ease)}
.engagement-tabs button:hover{color:var(--text);background:rgba(207,178,119,.03)}
.engagement-tabs button[aria-selected=true]{color:var(--text)}
.engagement-tabs button[aria-selected=true] span{color:var(--gold)}
.engagement-tabs button:focus-visible{outline-offset:-6px}
.engagement-tabs-indicator{position:absolute;left:0;bottom:-1px;width:calc(100% / 3);height:2px;background:var(--gold);box-shadow:0 0 12px rgba(207,178,119,.45);transform:translateX(calc(var(--tab,0) * 100%));transition:transform .8s var(--ease)}
.js .engagement-panels{gap:0;margin-top:22px}
.js .engagement-panels>.engagement-card{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
.js .engagement-panels>.engagement-card.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s}
@media(max-width:760px){
.engagement-tabs button{padding:16px 8px 18px;font-size:.98rem;line-height:1.2}
.engagement-tabs button+button{padding-left:12px}
.engagement-tabs button span{margin-bottom:8px;font-size:9.5px;letter-spacing:.18em}
.engagement-card-detail li{padding-left:24px}
}
/* ---------- Engagement switcher: sticky tabs + next link ---------- */
.js .engagement-tabs{position:sticky;top:var(--header);z-index:20;background:rgba(9,20,15,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.engagement-next{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin-top:36px;padding:22px 0 0;background:none;border:0;border-top:1px solid var(--hair);text-align:left;color:var(--text);transition:color .4s var(--ease)}
.engagement-next span{display:block;margin-bottom:8px;font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lo)}
.engagement-next strong{font:400 clamp(1.3rem,2vw,1.7rem)/1.2 var(--display)}
.engagement-next .arw{width:22px;height:22px;color:var(--gold)}
.engagement-next:hover{color:var(--gold-hi)}
.engagement-next:hover .arw{transform:translateX(5px)}
@media(max-width:960px){.js .engagement-tabs{background:rgba(9,20,15,.98);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* ---------- Principle strips: six points, 3x2 on desktop, 2x3 on tablet/phone ---------- */
.principle-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 var(--pad);border-block:1px solid var(--hair)}
.principle-bar>span{display:flex;align-items:center;justify-content:center;gap:18px;min-height:104px;padding:20px clamp(14px,2vw,28px);text-align:left;font:400 13px/1.55 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.principle-bar>span:before{content:'';flex:none;width:6px;height:6px;transform:rotate(45deg);background:var(--gold);opacity:.85}
.principle-bar>span:not(:nth-child(3n+1)){border-left:1px solid var(--hair-soft)}
.principle-bar>span:nth-child(n+4){border-top:1px solid var(--hair-soft)}
.principle-bar.reveal.visible>span{animation:rise 1s var(--ease) both}
.principle-bar.reveal.visible>span:nth-child(2){animation-delay:.08s}.principle-bar.reveal.visible>span:nth-child(3){animation-delay:.16s}.principle-bar.reveal.visible>span:nth-child(4){animation-delay:.24s}.principle-bar.reveal.visible>span:nth-child(5){animation-delay:.32s}.principle-bar.reveal.visible>span:nth-child(6){animation-delay:.4s}
@media(max-width:1100px){.principle-bar>span{gap:12px;font-size:12px;letter-spacing:.12em}}
@media(max-width:860px){
.principle-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
.principle-bar>span,.principle-bar>span:not(:nth-child(3n+1)),.principle-bar>span:nth-child(n+4){border-left:0;border-top:0}
.principle-bar>span:nth-child(even){border-left:1px solid var(--hair-soft)}
.principle-bar>span:nth-child(n+3){border-top:1px solid var(--hair-soft)}
.principle-bar>span{min-height:92px}
}
@media(max-width:480px){
.principle-bar{padding:0 12px}
.principle-bar>span{justify-content:flex-start;gap:10px;min-height:88px;padding:14px 10px;font-size:10.5px;letter-spacing:.08em;line-height:1.5}
.principle-bar>span:before{width:5px;height:5px}
}
/* sticky tabs release as soon as the last engagement ends */
.expertise-accordions{padding-bottom:0}
.expertise-accordions+.principle-bar{margin-top:clamp(56px,7vw,96px)}
/* principle points: diamond above, centred inscription */
.principle-bar>span{flex-direction:column;justify-content:center;gap:14px;text-align:center}
@media(max-width:1100px){.principle-bar>span{gap:12px}}
@media(max-width:480px){.principle-bar>span{justify-content:center;gap:10px;padding:16px 8px}}
/* ---------- Live maze: the light breaks through to the call to action ---------- */
.cta:before{display:none}
.cta-path{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0;margin-top:clamp(4px,1vw,12px);padding-top:clamp(20px,3vw,36px);border-top:1px solid var(--hair)}
.maze-feature{position:relative;height:clamp(170px,19vw,250px);overflow:hidden}
.maze-still,.maze-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.maze-still{object-fit:cover;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.maze-canvas{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
.maze-feature.is-3d .maze-still{display:none}
/* a short gold thread from the passage exit into the button */
.cta-path .maze-feature:after,.form-path .maze-feature:after{content:'';position:absolute;right:0;top:50%;width:18%;height:1px;background:linear-gradient(90deg,transparent,rgba(232,213,163,.55))}
.maze-motion{position:absolute;left:0;bottom:6px;z-index:2;min-height:32px;padding:4px 10px;background:none;border:0;font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lo);opacity:.7;transition:opacity .3s,color .3s}
.maze-motion:hover,.maze-motion:focus-visible{opacity:1;color:var(--gold)}
.maze-motion[hidden]{display:none}
.maze-target{position:relative;transition:box-shadow 1.4s var(--ease),background 1s var(--ease),border-color 1s var(--ease),color 1s var(--ease)}
.maze-target.is-lit{box-shadow:0 0 0 1px rgba(232,213,163,.9),0 0 26px 2px rgba(232,213,163,.5),0 0 70px 10px rgba(207,178,119,.18);transition-duration:.35s}
.cta-path .maze-target{margin:0}
.form-path{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-top:10px}
.form-path .maze-feature{height:clamp(120px,11vw,160px)}
#contact-form .form-path .button{margin-top:0}
@media(max-width:760px){
.cta-path,.form-path{grid-template-columns:minmax(0,1fr)}
.maze-feature{height:220px}
.form-path .maze-feature{height:180px}
.maze-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 100%),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 100%),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.maze-still{-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.cta-path .maze-feature:after,.form-path .maze-feature:after{left:50%;right:auto;top:auto;bottom:0;width:1px;height:22%;background:linear-gradient(180deg,transparent,rgba(232,213,163,.55))}
.cta-path .maze-target,.form-path .maze-target{width:100%;justify-content:space-between}
.maze-motion{left:auto;right:0;bottom:auto;top:4px}
}/* contact form: the passage runs toward the reader and into the full-width Send button */
.form-path{grid-template-columns:minmax(0,1fr);margin-top:4px}
.form-path .maze-feature{height:clamp(150px,14vw,190px)}
.form-path .maze-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 35%,#000 100%),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 35%,#000 100%),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.form-path .maze-feature:after{left:50%;right:auto;top:auto;bottom:0;width:1px;height:22%;background:linear-gradient(180deg,transparent,rgba(232,213,163,.55))}
#contact-form .form-path .maze-target{width:100%;justify-content:space-between}
.form-path .maze-motion{left:auto;right:0;bottom:auto;top:4px}
/* ---------- CTA row: "Break the pattern." + button ---------- */
.cta-path-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.maze-cta-prompt{margin:0}
.cta-path-label{font:400 clamp(1.3rem,1.9vw,1.7rem)/1.1 var(--display);color:var(--gold-hi)}
@media(max-width:760px){
.cta-path-action{display:contents}
.cta-path-label{order:-1;margin-bottom:6px;text-align:center}
.cta-path .maze-target{margin-top:0}
.maze-cta-prompt{margin-top:28px}
}
/* ---------- Brushed-gold buttons with a light sheen ---------- */
.button{position:relative;isolation:isolate;overflow:hidden;border-color:#b99c5f;
background:linear-gradient(135deg,#ecdcae 0%,#d6bb80 30%,#c3a468 62%,#dcc38b 100%);
box-shadow:inset 0 1px 0 rgba(255,248,225,.6),inset 0 -1px 0 rgba(96,74,32,.35),0 10px 26px -16px rgba(0,0,0,.75);
text-shadow:0 1px 0 rgba(255,242,210,.35)}
.button:before{content:'';position:absolute;inset:3px;z-index:-1;border:1px solid rgba(110,84,36,.24);pointer-events:none}
.button:after{content:'';position:absolute;inset:-1px;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,251,236,.7) 50%,transparent 62%) 170% 0/260% 100% no-repeat;opacity:0}
.button:hover{border-color:#cdb27a;background:linear-gradient(135deg,#f2e4bb 0%,#dec48c 30%,#cbad72 62%,#e4cc96 100%);box-shadow:inset 0 1px 0 rgba(255,248,225,.7),inset 0 -1px 0 rgba(96,74,32,.3),0 14px 30px -14px rgba(207,178,119,.45)}
.button:hover:after{animation:button-sheen 1.1s cubic-bezier(.45,0,.2,1) both}
.maze-target.is-lit:after{animation:button-sheen 1.4s cubic-bezier(.45,0,.2,1) .05s both}
.button.maze-target.is-lit{box-shadow:inset 0 1px 0 rgba(255,248,225,.7),inset 0 -1px 0 rgba(96,74,32,.3),0 0 0 1px rgba(232,213,163,.9),0 0 26px 2px rgba(232,213,163,.5),0 0 70px 10px rgba(207,178,119,.18)}
@keyframes button-sheen{0%{opacity:0;background-position:170% 0}20%{opacity:1}80%{opacity:1}100%{opacity:0;background-position:-70% 0}}
/* outline variant keeps its restraint */
.cta .discovery-cta .button{background:transparent;text-shadow:none;box-shadow:none;border-color:rgba(207,178,119,.6)}
.cta .discovery-cta .button:before{display:none}
.cta .discovery-cta .button:hover{background:var(--gold);color:var(--g950)}
@media(prefers-reduced-motion:reduce){.button:after{display:none}}
/* hero tagline: no leading dash */
.hero-tagline:before{display:none}
/* hero photo: deeper walls so the gold path glows harder; shorter crop on phones */
.hero-bg{filter:saturate(.95) contrast(1.12) brightness(.86)}
@media(max-width:760px){.hero-bg{aspect-ratio:1/1;object-position:50% 78%}}
/* ---------- Hero: step into the maze on scroll (--hp: 0 at top, 1 when the hero has scrolled away) ---------- */
.hero-bg{transform-origin:50% 27%;scale:calc(1 + var(--hp,0) * .16);filter:saturate(.95) contrast(1.12) brightness(calc(.86 - var(--hp,0) * .32))}
.hero-copy{translate:0 calc(var(--hp,0) * -70px);opacity:calc(1 - var(--hp,0) * .9)}
/* pull the next section up into the hero's fade so the story continues sooner */
.architecture-story{min-height:clamp(300px,30vw,440px);margin-top:calc(-1 * clamp(60px,9vw,150px));padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(56px,6vw,80px)}
.hero{padding-bottom:clamp(40px,5vw,70px)}
@media(max-width:760px){
.hero-copy{translate:none;opacity:1}
.architecture-story{min-height:0;margin-top:-72px;padding-top:40px;padding-bottom:56px}
}
@media(prefers-reduced-motion:reduce){.hero-bg{scale:none;filter:saturate(.95) contrast(1.12) brightness(.86)}.hero-copy{translate:none;opacity:1}}/* the sculpture section dissolves in over the hero's lower edge instead of cutting across it */
.architecture-story{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) calc(clamp(60px,9vw,150px) * .6),#000 calc(clamp(60px,9vw,150px) + 40px));mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) calc(clamp(60px,9vw,150px) * .6),#000 calc(clamp(60px,9vw,150px) + 40px))}
.architecture-story:after{background:linear-gradient(180deg,rgba(11,24,18,.2) 0,rgba(11,24,18,.72) 30%,rgba(11,24,18,.6) 62%,var(--g900) 100%),radial-gradient(ellipse at center,rgba(6,14,10,.55),transparent 70%)}
.hero-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 70%,transparent 100%);mask-composite:intersect}
@media(max-width:760px){
.architecture-story{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px)}
.hero-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%,#000 78%,transparent 100%)}
}/* fade only the sculpture layers, never the text */
.architecture-story{-webkit-mask-image:none;mask-image:none}
.architecture-image,.architecture-story:after{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) calc(clamp(60px,9vw,150px) * .6),#000 calc(clamp(60px,9vw,150px) + 40px));mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) calc(clamp(60px,9vw,150px) * .6),#000 calc(clamp(60px,9vw,150px) + 40px))}
@media(max-width:760px){.architecture-story{-webkit-mask-image:none;mask-image:none}.architecture-image,.architecture-story:after{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px)}}
/* ---------- The statement stands on the marble platform beneath the man (no sculpture) ---------- */
.architecture-image,.architecture-sweep{display:none}
.architecture-story:after{display:none}
.architecture-story{isolation:auto;overflow:visible;margin-top:calc(-1 * clamp(150px,17vw,250px));padding-top:0;padding-bottom:clamp(64px,7vw,96px);min-height:0;background:none}
.hero-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 82%,transparent 100%)}
.hero-scrim{background:linear-gradient(180deg,rgba(6,14,10,.55) 0,rgba(6,14,10,0) 22%,rgba(6,14,10,0) 64%,rgba(11,24,18,.55) 86%,var(--g900) 100%),linear-gradient(90deg,rgba(11,24,18,.35),rgba(11,24,18,.1))}
.architecture-lede,.architecture-body{text-shadow:0 2px 18px rgba(6,14,10,.85)}
@media(max-width:760px){
.hero-bg{aspect-ratio:4/5;object-position:50% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 18%,#000 38%,#000 86%,transparent 100%)}
.architecture-story{margin-top:-120px;padding-top:0;padding-bottom:56px}
}
/* ---------- A longer marble platform: the photo's floor continues beneath the man, carrying the statement ---------- */
.hero-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%)}
.hero-scrim{background:linear-gradient(180deg,rgba(6,14,10,.55) 0,rgba(6,14,10,0) 22%),linear-gradient(90deg,rgba(11,24,18,.35),rgba(11,24,18,.1))}
.hero{padding-bottom:0}
.architecture-story{position:relative;isolation:isolate;overflow:hidden;margin:0 0 0 auto;width:max(60%,100svh);max-width:100%;min-height:0;padding:clamp(40px,5vw,72px) 5% clamp(72px,8vw,110px)}
.architecture-story:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:url('assets/hero-maze.jpg') 50% 100%/100% calc(100% / .14) no-repeat;transform:scaleY(-1);
filter:saturate(.9) contrast(1.1) brightness(calc(.62 - var(--hp,0) * .2));
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(0deg,#000 0,#000 45%,transparent 100%);-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(0deg,#000 0,#000 45%,transparent 100%);mask-composite:intersect}
.architecture-copy{max-width:640px;margin:0 auto}
@media(max-width:760px){
.hero-bg{aspect-ratio:1/1;object-position:50% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%)}
.architecture-story{width:auto;margin:0;padding:28px var(--pad) 64px}
.architecture-story:before{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 40%);mask-image:linear-gradient(0deg,transparent 0,#000 40%)}
}/* seamless floor: photo and extension cross-fade; hero background has no edge of its own */
.hero{background:radial-gradient(ellipse 65% 70% at 22% 42%,rgba(40,66,54,.26),transparent 70%),var(--g900)}
.hero-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 88%,transparent 100%);mask-composite:intersect}
.architecture-story{margin-top:-90px;padding-top:calc(90px + clamp(24px,3vw,48px))}
.architecture-story:before{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(0deg,transparent 0,#000 55%,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(0deg,transparent 0,#000 55%,#000 calc(100% - 90px),transparent 100%)}
.architecture-lede{font-size:clamp(1.6rem,2.5vw,2.35rem)}
@media(max-width:760px){
.hero-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%,#000 88%,transparent 100%)}
.architecture-story{margin-top:-60px;padding-top:88px}
.architecture-story:before{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 40%,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(0deg,transparent 0,#000 40%,#000 calc(100% - 60px),transparent 100%)}
.architecture-lede{font-size:clamp(1.55rem,7vw,1.9rem)}
}
/* ---------- Leg-free, book-matched marble floor ---------- */
.architecture-story:before{background:url('assets/marble-floor.jpg') 50% 0/100% 100% no-repeat}
/* ---------- Kintsugi: as "We break the pattern." lands, a gold fracture spreads through the marble ---------- */
.architecture-copy{position:relative}
.floor-crack{display:block;width:170%;height:clamp(34px,4vw,54px);margin:clamp(6px,1vw,14px) -35% 0;overflow:visible;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.floor-crack path{fill:none;stroke:var(--gold-hi);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(232,213,163,.9)) drop-shadow(0 0 10px rgba(207,178,119,.55))}
.floor-crack .fc-b{stroke-width:1;opacity:.8}
.architecture-story .architecture-body{margin-top:clamp(6px,1vw,14px)}
html.js:not(.reduced-motion) .floor-crack path{stroke-dasharray:1;stroke-dashoffset:1}
.floor-crack path{pathLength:1}
.architecture-story.visible .floor-crack .fc-l,.architecture-story.visible .floor-crack .fc-r{animation:crack-open 1.2s cubic-bezier(.3,.6,.2,1) 1.55s both}
.architecture-story.visible .floor-crack .fc-b{animation:crack-open .6s cubic-bezier(.3,.6,.2,1) 2.35s both}
@keyframes crack-open{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:760px){.floor-crack{width:140%;margin-left:-20%;margin-right:-20%}}
/* organic crack: thinner hairline, uneven glow */
.floor-crack path{stroke-width:1.2}
.floor-crack .fc-b{stroke-width:.8;opacity:.7}
.floor-crack .fc-r{stroke-width:1}
/* ---------- One typographic voice from "The path" to the six points: ivory statement, gold resolution ---------- */
.architecture-lede{font-size:clamp(1.6rem,2.4vw,2.3rem);color:var(--text)}
.lede-turn{font-size:1em;margin-top:.55em}
.architecture-story .architecture-body{font:400 clamp(1.08rem,1.35vw,1.3rem)/1.6 var(--display);letter-spacing:.005em;color:#e7e2d3}
.architecture-body em{font-family:inherit;font-size:1em;color:var(--gold)}
/* slower break: the fracture spreads, then forks; the supporting line follows the crack */
.architecture-story.visible .floor-crack .fc-l,.architecture-story.visible .floor-crack .fc-r{animation:crack-open 2.5s cubic-bezier(.35,.5,.2,1) 1.9s both}
.architecture-story.visible .floor-crack .fc-b{animation:crack-open 1.1s cubic-bezier(.35,.5,.2,1) 3.9s both}
.architecture-story.visible .architecture-body{animation:rise 1.2s var(--ease) 3.1s both}
.principle-bar>span{font:400 1.02rem/1.45 var(--display);letter-spacing:.01em;text-transform:none;color:var(--text)}
.principle-bar>span em{color:var(--gold)}
@media(max-width:1100px){.principle-bar>span{font-size:.95rem;letter-spacing:.01em}}
@media(max-width:480px){.principle-bar>span{font-size:.9rem;letter-spacing:0;line-height:1.4}}
/* natural (unmirrored) marble, veins quietened so the floor supports the words */
.architecture-story:before{background-size:100% 100%;filter:saturate(.85) contrast(.92) brightness(calc(.52 - var(--hp,0) * .16))}
/* six points: one statement per point, one colour; gold only in the diamond; no gap between the two beats */
.principle-bar>span{gap:0;color:#e7e2d3}
.principle-bar>span:before{margin-bottom:14px}
.principle-bar>span em{color:inherit}
@media(max-width:480px){.principle-bar>span:before{margin-bottom:10px}}
/* six points: gold = who we are; one colour per point, a size smaller */
.principle-bar>span{font-size:.9rem;line-height:1.5;color:var(--gold)}
.principle-bar>span:before{margin-bottom:12px}
@media(max-width:1100px){.principle-bar>span{font-size:.86rem}}
@media(max-width:480px){.principle-bar>span{font-size:.8rem;line-height:1.45}.principle-bar>span:before{margin-bottom:9px}}
/* mantra: one size, one accent - only "brilliantly." in gold */
.intro .mantra em:not(.mantra-line){color:inherit}
.mantra-line{font-size:1em;line-height:inherit;margin-top:0;color:var(--gold)}
/* ---------- Body text: regular weight and a larger intro size, so nothing reads faint ---------- */
body{font-weight:400}
p,li,label,input,textarea,.text-link,figcaption{font-weight:400}
.hero-followup>p:not(.hero-tagline){font-weight:400}
/* the line that sits directly under a section heading */
.questions-bridge,.services-bridge,.why-different-intro,.journey-intro,.engagements-intro,
.proof-lead>div>p:not(.eyebrow),.noise-copy>p:not(.eyebrow),.subhero>p:last-child,
.partner-strip>div>p:not(.eyebrow),.why-different .why-different-intro{font-size:clamp(1.08rem,1.35vw,1.19rem);line-height:1.65}
.engagement-card-detail>p,.engagement-card-tagline{font-size:1.06rem}
@media(max-width:760px){
.questions-bridge,.services-bridge,.why-different-intro,.journey-intro,.engagements-intro,
.proof-lead>div>p:not(.eyebrow),.noise-copy>p:not(.eyebrow),.subhero>p:last-child,
.partner-strip>div>p:not(.eyebrow){font-size:1.06rem;line-height:1.6}
}
/* ---------- Closing pattern: one quiet next-page link, one gold primary action ---------- */
.cta-next{display:flex;flex-direction:column;align-items:flex-start;gap:20px;align-self:center}
.cta-next>p{max-width:34ch;font-size:clamp(1.05rem,1.3vw,1.15rem);line-height:1.65;color:#d9d2c1}
.cta-path-action .maze-target{margin-top:0}
.cta-path-action>small{display:block;margin-top:14px;font:500 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lo)}
@media(max-width:760px){
.cta-next{gap:16px}
.cta-path-action>small{text-align:center;margin-top:16px}
}
/* ---------- Clickable always means gold: text links in gold, a size up ---------- */
.text-link{font-size:13px;color:var(--gold)}
.text-link:hover{color:var(--gold-hi)}
.text-link .arw{color:inherit}
.cta-next .text-link,.hero-actions .text-link{font-size:13px}
@media(max-width:380px){.hero-actions .text-link{font-size:12px}}
/* hero copy sits high against the sky, clear of the grass and the figure */
.hero{align-items:flex-start;padding-top:calc(var(--header) + clamp(48px,9vh,110px));padding-bottom:clamp(120px,16vh,220px)}
@media(max-width:760px){.hero{align-items:stretch;padding-top:calc(var(--header) + 36px);padding-bottom:0}}
/* hero: dark green wash behind the copy so the headline always reads over the photo */
.hero-scrim{background:
linear-gradient(94deg,rgba(5,13,10,.97) 0%,rgba(5,13,10,.93) 26%,rgba(5,13,10,.72) 42%,rgba(5,13,10,.3) 58%,rgba(5,13,10,0) 72%),
linear-gradient(180deg,rgba(5,13,10,.6) 0,rgba(5,13,10,0) 24%),
radial-gradient(ellipse 70% 60% at 8% 38%,rgba(5,13,10,.55),transparent 70%)}
@media(max-width:1100px){
.hero-scrim{background:
linear-gradient(94deg,rgba(5,13,10,.97) 0%,rgba(5,13,10,.92) 38%,rgba(5,13,10,.6) 60%,rgba(5,13,10,.15) 80%,rgba(5,13,10,0) 92%),
linear-gradient(180deg,rgba(5,13,10,.65) 0,rgba(5,13,10,0) 26%)}
}
@media(max-width:760px){
.hero-scrim{background:linear-gradient(180deg,rgba(5,13,10,.6) 0,rgba(5,13,10,0) 14%)}
}
/* ---------- Hero restored to the original composition: photo right with sky and sun, copy over the dark wash ---------- */
@media(min-width:761px){
.hero{display:flex;flex-direction:row;align-items:center;min-height:max(700px,100svh);padding:calc(var(--header) + 40px) var(--pad) 90px}
.hero-copy{max-width:640px;order:0}
.hero-bg{position:absolute;order:0;top:0;right:0;left:auto;bottom:auto;width:max(60%,100svh);max-width:100%;height:100%;aspect-ratio:auto;margin:0;object-fit:cover;object-position:50% 62%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%)}
.hero-scrim{background:
linear-gradient(92deg,rgba(8,9,7,.97) 0%,rgba(8,9,7,.85) 34%,rgba(8,9,7,.42) 52%,rgba(8,9,7,0) 68%),
linear-gradient(180deg,rgba(8,9,7,.45) 0%,rgba(8,9,7,0) 22%)}
.architecture-story{width:max(60%,100svh);max-width:100%;margin:-90px 0 0 auto}
}
/* ---------- Photo to floor: one continuous surface (fade the photo's lower edge, match the floor's tone) ---------- */
@media(min-width:761px){
.hero-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 0,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,#000 0,#000 84%,transparent 100%);mask-composite:intersect}
.architecture-story{margin-top:calc(-1 * clamp(90px,11vh,150px));padding-top:clamp(90px,11vh,150px)}
.architecture-story:before{
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,transparent 0,#000 22%,#000 calc(100% - 90px),transparent 100%);-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%),linear-gradient(180deg,transparent 0,#000 22%,#000 calc(100% - 90px),transparent 100%);mask-composite:intersect}
}
/* the floor now carries the same exposure as the photo above it */
.architecture-story:before{filter:saturate(.92) contrast(1.06) brightness(calc(.8 - var(--hp,0) * .22))}
@media(max-width:760px){
.hero-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%,#000 86%,transparent 100%)}
.architecture-story:before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 60px),transparent 100%)}
}/* floor exposure matched to the photo's shadowed foreground, fading into the page */
.architecture-story:before{filter:saturate(.9) contrast(1.02) brightness(calc(.6 - var(--hp,0) * .18))}
.architecture-story:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,24,18,.35) 0,rgba(11,24,18,.12) 28%,rgba(11,24,18,.35) 60%,rgba(11,24,18,.75) 85%,var(--g900) 100%)}
/* ---------- Hero proportions: the photo is always 58% of the width, the copy always fits the dark side ---------- */
@media(min-width:761px){
.hero-bg{width:58%;max-width:none}
.architecture-story{width:58%;max-width:none}
.hero-copy{max-width:min(640px,44vw)}
.hero h1{font-size:clamp(2rem,3vw,3.1rem)}
.hero-followup>p:not(.hero-tagline){max-width:min(460px,42vw)}
}
/* marble stays neutral stone: no green veil over it */
.architecture-story:after{display:none}
/* ---------- The platform is one continuous stone band: full width, no green wedge beside it ---------- */
@media(min-width:761px){
.architecture-story{width:auto;max-width:none;margin:calc(-1 * clamp(90px,11vh,150px)) 0 0}
.architecture-story:before{
background:url('assets/marble-floor.jpg') 50% 0/cover no-repeat;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 110px),transparent 100%);-webkit-mask-composite:source-over;
mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 110px),transparent 100%);mask-composite:add}
.architecture-copy{max-width:660px;margin-left:auto;margin-right:auto}
}
@media(max-width:760px){
.architecture-story:before{background:url('assets/marble-floor.jpg') 50% 0/cover no-repeat}
}
/* ---------- One plinth: statement, gold crack and the six principles all stand on the same stone ---------- */
.architecture-story:before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%)}
.architecture-story + .principle-bar{position:relative;isolation:isolate;background:none;border-top:0;border-bottom:0}
.architecture-story + .principle-bar:before{content:'';position:absolute;inset:-1px 0 0;z-index:-1;pointer-events:none;
background:url('assets/marble-floor.jpg') 50% 100%/cover no-repeat;
filter:saturate(.9) contrast(1.02) brightness(calc(.44 - var(--hp,0) * .1));
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%)}
@media(min-width:761px){
.architecture-story:before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%)}
}
/* ---------- The plinth is a fixed surface: nothing that carries stone may slide or zoom ---------- */
/* the photo no longer zooms on scroll, so its marble stays locked to the extended floor */
.hero-bg{scale:none}
.hero-copy{translate:none;opacity:1}
/* the stone sections fade in without moving; only their text rises */
html.js .architecture-story.reveal,html.js .architecture-story + .principle-bar.reveal{transform:none}
.architecture-story + .principle-bar.reveal.visible>span{animation:fade-only 1s var(--ease) both}
.architecture-story + .principle-bar.reveal.visible>span:nth-child(2){animation-delay:.08s}
.architecture-story + .principle-bar.reveal.visible>span:nth-child(3){animation-delay:.16s}
.architecture-story + .principle-bar.reveal.visible>span:nth-child(4){animation-delay:.24s}
.architecture-story + .principle-bar.reveal.visible>span:nth-child(5){animation-delay:.32s}
.architecture-story + .principle-bar.reveal.visible>span:nth-child(6){animation-delay:.4s}
@keyframes fade-only{from{opacity:0}to{opacity:1}}
/* ---------- Homepage: the stone stands alone and fades into the green problem section ---------- */
.architecture-story:before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 140px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 140px),transparent 100%)}
.architecture-story{padding-bottom:clamp(120px,15vh,190px)}
/* ---------- Hero: deep racing green wash (not black), headline higher, air between the elements ---------- */
@media(min-width:761px){
.hero{align-items:flex-start;padding-top:calc(var(--header) + clamp(40px,8vh,96px))}
.hero-scrim{background:
linear-gradient(94deg,rgba(7,22,16,.96) 0%,rgba(7,22,16,.9) 30%,rgba(7,22,16,.62) 46%,rgba(7,22,16,.2) 62%,rgba(7,22,16,0) 74%),
linear-gradient(180deg,rgba(5,16,12,.55) 0,rgba(5,16,12,0) 22%),
radial-gradient(ellipse 65% 60% at 10% 34%,rgba(24,60,44,.35),transparent 70%)}
}
.hero-followup{margin-top:clamp(30px,4.4vh,52px)}
.hero-followup>p:not(.hero-tagline){margin-top:clamp(16px,2.2vh,26px)}
.hero-actions{margin-top:clamp(48px,6.5vh,76px)}
@media(max-width:760px){
.hero-scrim{background:linear-gradient(180deg,rgba(7,22,16,.6) 0,rgba(7,22,16,0) 14%)}
}
/* ---------- The hero says what this is: category above, differentiator in the line below ---------- */
.hero-kicker{margin-bottom:clamp(18px,2.4vh,30px);font:500 11.5px/1.5 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);animation:rise 1.2s var(--ease) both}
.hero-followup>p em{color:var(--gold)}
@media(max-width:760px){.hero-kicker{font-size:10.5px;letter-spacing:.24em;margin-bottom:16px}}
@media(max-width:1420px){.header-tagline{display:block}}
@media(max-width:1100px){.header-tagline{display:none}}
/* the three pillars carved under the crack */
.architecture-body.carved{margin-top:clamp(18px,2.6vh,30px);font:400 clamp(.95rem,1.3vw,1.15rem)/1.6 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
@media(max-width:760px){.architecture-body.carved{letter-spacing:.22em;font-size:.88rem}}/* the header tagline only appears where there is genuine room beside the menu */
.header-tagline{display:none}
@media(min-width:1500px){.header-tagline{display:block}}
/* the carved pillars read clearly on the stone */
.architecture-body.carved{color:var(--gold-hi);text-shadow:0 2px 16px rgba(6,14,10,.9)}
/* hero: fewer elements, more air around the remaining ones */
.hero-followup>p:not(.hero-tagline){max-width:min(520px,46vw);font-size:clamp(1.05rem,1.25vw,1.16rem);line-height:1.7}
@media(max-width:760px){.hero-followup>p:not(.hero-tagline){max-width:none}}
/* hero lede: gold positioning line, then the sentence */
.hero-lede{max-width:min(560px,48vw)!important}
.hero-lede em{display:block;margin-bottom:.55em;color:var(--gold);font-size:1.06em;letter-spacing:.005em}
@media(max-width:760px){.hero-lede{max-width:none!important}.hero-lede br{display:none}.hero-lede em{margin-bottom:.5em}}
/* the positioning line keeps its break on phones */
@media(max-width:760px){.hero-lede em br.br-m{display:inline}}
/* the positioning line always breaks before "for" */
.hero-lede em br{display:inline!important}
/* stone: less empty surface under the inscription */
.architecture-story{padding-bottom:clamp(64px,8vh,110px)}
.architecture-story:before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 110px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 calc(100% - 110px),transparent 100%)}
/* mantra: three complete lines, calmer display size */
.mantra{font-size:clamp(1.7rem,2.5vw,2.5rem);line-height:1.15;text-wrap:auto}
@media(max-width:760px){.mantra{font-size:clamp(1.8rem,7.4vw,2.3rem)}}
/* ---------- The six symptoms as medallions: icon and words struck into one seal ---------- */
.cost-card{border:0;margin:clamp(28px,4vh,44px) 0 clamp(24px,3.5vh,38px)}
.cost-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,44px);row-gap:clamp(24px,3.5vw,44px)}
.cost-list li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
width:min(216px,100%);aspect-ratio:1;margin:0 auto;padding:18px;border:1px solid rgba(207,178,119,.42);border-radius:50%;
background:radial-gradient(circle at 32% 26%,rgba(232,213,163,.12),rgba(207,178,119,.015) 70%);
box-shadow:inset 0 0 0 6px rgba(9,20,15,.92),inset 0 0 0 7px rgba(207,178,119,.16);
text-align:center;font:400 1.02rem/1.35 var(--display);letter-spacing:.01em;color:var(--gold);
transition:border-color .5s var(--ease),background .5s var(--ease)}
.cost-list li:hover{border-color:rgba(207,178,119,.7);background:radial-gradient(circle at 32% 26%,rgba(232,213,163,.18),rgba(207,178,119,.03) 70%)}
.cost-list .cost-icon{width:44px;height:44px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
@media(max-width:1100px){.cost-list li{width:min(190px,100%);font-size:.96rem;gap:12px}.cost-list .cost-icon{width:40px;height:40px}}
@media(max-width:760px){
.cost-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:20px}
.cost-list li{width:min(158px,100%);padding:14px;font-size:.88rem;gap:10px;border:1px solid rgba(207,178,119,.42);box-shadow:inset 0 0 0 5px rgba(9,20,15,.92),inset 0 0 0 6px rgba(207,178,119,.16)}
.cost-list li:nth-child(3n+1),.cost-list li:nth-child(odd),.cost-list li:nth-child(n+3){border-top:1px solid rgba(207,178,119,.42);border-left:1px solid rgba(207,178,119,.42)}
.cost-list .cost-icon{width:34px;height:34px}
}
/* ---------- Medallions: smaller seals, optically centred, struck-gold lettering ---------- */
.cost-list li{width:min(176px,100%);gap:11px;padding:16px 16px 20px;font-size:.96rem}
.cost-list li>span{display:block;max-width:12ch;
background:linear-gradient(103deg,#e6d29c 0%,#f6ecd2 22%,#cfb277 46%,#f3e4bb 62%,#c2a469 82%,#efdfb4 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
filter:drop-shadow(0 1px 1px rgba(6,14,10,.85))}
.cost-list .cost-icon{width:38px;height:38px}
@media(max-width:1100px){.cost-list li{width:min(162px,100%);font-size:.92rem;gap:10px}.cost-list .cost-icon{width:34px;height:34px}}
@media(max-width:760px){.cost-list li{width:min(150px,100%);padding:12px 12px 16px;font-size:.86rem;gap:9px}.cost-list .cost-icon{width:32px;height:32px}}
@media(forced-colors:active){.cost-list li>span{-webkit-text-fill-color:CanvasText;color:CanvasText;background:none}}
/* medallions: solid, brighter gold lettering (no gradient) and true centring */
.cost-list li{padding:16px;line-height:1.3}
.cost-list li>span{background:none;-webkit-text-fill-color:currentColor;color:var(--gold-hi);filter:none;text-shadow:0 1px 10px rgba(6,14,10,.7)}
/* medallion labels sit as a two-line block, clear of the ring */
.cost-list li>span{max-width:8ch;line-height:1.35}
.cost-list li{gap:12px}
@media(max-width:760px){.cost-list li>span{max-width:9ch}}
/* medallions: identical two-line blocks, optically centred (group lifted to offset the text's leading) */
.cost-list li>span{max-width:none;line-height:1.3;font-size:.94rem}
.cost-list li{gap:11px;padding:12px 16px 20px}
@media(max-width:760px){.cost-list li>span{font-size:.84rem}.cost-list li{padding:10px 12px 17px;gap:9px}}
/* medallion content: visible icon-to-text block sits on the circle's centre */
.cost-list li{padding:15px 16px 17px}
@media(max-width:760px){.cost-list li{padding:12px 12px 14px}}
/* medallions: no column-specific padding or border left over from the list layout */
.cost-list li:nth-child(n){padding:15px 16px 17px;border:1px solid rgba(207,178,119,.42)}
@media(max-width:760px){.cost-list li:nth-child(n){padding:12px 12px 14px}}
/* root-cause line: three deliberate lines at every width, the promise in gold */
.root-cause-line{max-width:none;line-height:1.7}
.root-cause-line em{color:var(--gold)}
@media(max-width:760px){p.root-cause-line br{display:inline}.root-cause-line{font-size:1rem}}
/* Questions: a scan layer. Gold keyword, then one plain question; the three pillars side by side,
rows aligned across columns (subgrid). Narrow screens show one pillar at a time via .q-tabs. */
.q-pillars{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(4,auto);column-gap:clamp(28px,3.4vw,56px);row-gap:0}
.q-pillar{grid-row:1/6;display:grid;grid-template-rows:subgrid}
.q-pillar-head{flex-direction:row;align-items:center;gap:14px;margin-bottom:6px}
.q-pillar-list{grid-row:2/6;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);gap:0}
.q-pillar-list li{padding:18px 0 20px;border-bottom:1px solid var(--hair-soft)}
.q-pillar-list li:last-child{border-bottom:0}
.q-key{display:block;margin-bottom:9px;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.q-text{margin:0;font:400 1rem/1.5 var(--sans);color:var(--text)}
.q-tabs{display:none}
@keyframes q-in{from{opacity:0;transform:translateY(8px)}}
@media(max-width:899px){
.q-pillars{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:44px}
.q-pillar{grid-row:auto;display:block}
.q-pillar-list{grid-row:auto;grid-template-rows:none}
.js .q-pillars{margin-top:8px}
.js .q-pillar-head{display:none}
.js .q-pillar:not(.is-active){display:none}
.js .q-pillar.is-active{animation:q-in .6s var(--ease)}
.js .q-tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,7vw,56px);border-bottom:1px solid var(--hair)}
.q-tabs button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 4px 16px;background:none;border:0;color:rgba(240,234,219,.5);font:400 .8rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .4s var(--ease)}
.q-tabs button svg{width:44px;height:44px;padding:11px;opacity:.55;transition:opacity .4s var(--ease)}
.q-tabs button.is-current{color:var(--gold)}
.q-tabs button.is-current svg{opacity:1}
.q-tabs button:focus-visible{outline-offset:-4px}
.q-tabs-indicator{position:absolute;left:0;bottom:-1px;width:calc(100% / 3);height:2px;background:var(--gold);box-shadow:0 0 12px rgba(207,178,119,.45);transform:translateX(calc(var(--tab,0) * 100%));transition:transform .6s var(--ease)}
}
@media(max-width:899px) and (prefers-reduced-motion:reduce){.js .q-pillar.is-active{animation:none}.q-tabs-indicator{transition:none}}
/* Questions on phones: the pillars as swipeable cards; the next card peeks in to invite the swipe */
@media(max-width:899px){
.js .q-pillars{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-top:20px}
.js .q-pillars::-webkit-scrollbar{display:none}
.js .q-pillar,.js .q-pillar:not(.is-active){display:block;flex:0 0 87%;scroll-snap-align:start;padding:4px 18px 6px;border:1px solid var(--hair-soft);background:rgba(207,178,119,.03);transition:border-color .5s var(--ease)}
.js .q-pillar.is-active{animation:none;border-color:rgba(207,178,119,.3)}
}
/* Questions on wide screens: pinned pillar index on the left, the four questions of each pillar
in a 2x2 group on the right; the group being read is lit, the others rest in the background. */
@media(min-width:900px){
.q-stage{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,2.2fr);column-gap:clamp(40px,5vw,88px);align-items:start;margin-top:clamp(48px,6vw,80px)}
.js .q-tabs{position:sticky;top:calc(var(--header) + 56px);display:flex;flex-direction:column;border-left:1px solid var(--hair)}
.q-tabs button{display:flex;align-items:center;gap:16px;padding:14px 0 14px 24px;background:none;border:0;text-align:left;font:400 clamp(1.15rem,1.6vw,1.4rem)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(240,234,219,.36);cursor:pointer;transition:color .6s var(--ease)}
.q-tabs button svg{flex:none;width:48px;height:48px;padding:13px;opacity:.45;transition:opacity .6s var(--ease)}
.q-tabs button:hover{color:rgba(240,234,219,.7)}
.q-tabs button.is-current{color:var(--gold)}
.q-tabs button.is-current svg{opacity:1}
.q-tabs button:focus-visible{outline-offset:-2px}
.q-tabs-indicator{position:absolute;left:-1px;top:0;width:2px;height:calc(100% / 3);background:var(--gold);box-shadow:0 0 12px rgba(207,178,119,.45);transform:translateY(calc(var(--tab,0) * 100%));transition:transform .8s var(--ease)}
.js .q-stage .q-pillars{display:block;margin-top:0}
.js .q-stage .q-pillar{display:block;opacity:.28;transition:opacity .8s var(--ease)}
.js .q-stage .q-pillar+.q-pillar{margin-top:clamp(48px,6vw,80px)}
.js .q-stage .q-pillar.is-active{opacity:1}
.js .q-stage .q-pillar-head{display:none}
.js .q-stage .q-pillar-list{display:grid;grid-row:auto;grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.5vw,48px)}
.js .q-stage .q-pillar-list li{padding:20px 0 22px;border-bottom:1px solid var(--hair-soft)}
.js .q-stage .q-pillar-list li:nth-child(n+3){border-bottom:0}
.js .q-stage .q-text{font-size:1.05rem}
.reduced-motion .q-stage .q-pillar{opacity:1}
.js .questions-card{overflow:clip}
}
/* Questions summary: three deliberate lines at every width */
@media(max-width:760px){p.solution-bridge br{display:inline}}
/* Services as a path: 01 > 02 > 03 joined by a gold line. Each card leads with one line,
title | what you leave with (gold), and the description underneath. */
.service-path{position:relative;display:grid;gap:28px;margin-top:clamp(40px,5vw,64px)}
.service-path .service{display:block;padding:clamp(24px,2.6vw,34px)}
.step{display:block;margin-bottom:16px;font:400 1rem/1 var(--display);letter-spacing:.12em;color:var(--gold)}
.service-head{display:flex;align-items:center;gap:16px 30px}.service-head .circle{flex:none;margin-left:auto}
.service-path .service h3{flex:none;margin:0;font-size:clamp(1.6rem,2.1vw,2rem);line-height:1.1;white-space:nowrap}
.service-path .deliverable{margin:0;padding:3px 0 3px 30px;border:0;border-left:1px solid rgba(207,178,119,.55);background:none;font:400 clamp(1.05rem,1.35vw,1.18rem)/1.35 var(--display);color:var(--gold-hi)}
.service-path .deliverable>span{margin-bottom:8px;color:var(--gold-lo)}
.service-path .service p{max-width:78ch;margin:26px 0 0}
.service-path .service:not(:last-child):after{content:'';position:absolute;left:50%;bottom:-29px;width:1px;height:28px;background:linear-gradient(var(--gold),rgba(207,178,119,.3))}
.path-start{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 36px;margin-top:clamp(32px,4vw,48px);padding-top:26px;border-top:1px solid var(--hair-soft)}
.path-start p{margin:0;font:400 clamp(1.1rem,1.5vw,1.3rem)/1.45 var(--display);color:var(--text)}
.path-start em{font-style:normal;color:var(--gold)}
@media(max-width:699px){
.service-head{flex-direction:column;align-items:flex-start}
.service-path .service h3{white-space:normal}
.service-head .circle{position:absolute;top:clamp(24px,2.6vw,34px);right:clamp(24px,2.6vw,34px)}
.service-path .deliverable{align-self:stretch;padding:16px 0 0;border-left:0;border-top:1px solid rgba(207,178,119,.4)}
}
@media(min-width:760px){
.service-path{gap:18px;padding-left:76px}
.service-path:before{content:'';position:absolute;left:22px;top:48px;bottom:48px;width:1px;background:linear-gradient(var(--gold),rgba(207,178,119,.25))}
.service-path .service:not(:last-child):after{display:none}
.step{position:absolute;left:-76px;top:50%;width:44px;height:44px;margin:-22px 0 0;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;background:var(--g950);font-size:.92rem;letter-spacing:.04em;box-shadow:0 0 0 6px var(--g950)}
.path-start{margin-left:76px}
}
/* Partners (home): intro | two credential cards, then the six principles, then Doug's quote */
.partner-strip{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);align-items:center;gap:clamp(36px,5vw,80px)}
.ps-intro>p:not(.eyebrow){max-width:420px;margin-top:24px}
.ps-partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ps-card{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border:1px solid var(--hair-soft);background:radial-gradient(ellipse 100% 55% at 0% 0%,rgba(34,56,46,.32),transparent 70%),linear-gradient(170deg,#112219,#08110d);color:var(--text);transition:border-color .6s var(--ease),transform .6s var(--ease)}
.ps-card:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;transition:opacity .6s}
.ps-card:hover{border-color:var(--hair);transform:translateY(-4px)}
.ps-card:hover:before{opacity:1}
.ps-discipline{font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lo)}
.ps-card h3{margin:14px 0 0;font-size:clamp(1.5rem,2vw,1.8rem);line-height:1.1}
.ps-card .ps-headline{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hair);font:400 clamp(1.05rem,1.35vw,1.18rem)/1.35 var(--display);color:var(--gold-hi)}
.ps-card ul{margin:14px 0 0;padding:0;list-style:none}
.ps-card li{padding:5px 0;font:400 .92rem/1.5 var(--sans);color:#cdc6b4}
.ps-more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ps-card:hover .ps-more .arw{transform:translate(2px,-2px)}
.ps-principles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(8px,2vw,24px) 0 0;padding:0;list-style:none;border-block:1px solid var(--hair)}
.ps-principles li{display:flex;align-items:center;gap:16px;padding:24px clamp(16px,2vw,28px);font:400 clamp(.95rem,1.2vw,1.05rem)/1.45 var(--display);color:var(--gold)}
.ps-principles li:before{content:'';flex:none;width:6px;height:6px;transform:rotate(45deg);background:var(--gold);opacity:.85}
.ps-principles li:not(:nth-child(3n+1)){border-left:1px solid var(--hair-soft)}
.ps-principles li:nth-child(n+4){border-top:1px solid var(--hair-soft)}
@media(max-width:1100px){.partner-strip{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
.ps-principles{grid-template-columns:repeat(2,minmax(0,1fr))}
.ps-principles li,.ps-principles li:not(:nth-child(3n+1)),.ps-principles li:nth-child(n+4){border-left:0;border-top:0}
.ps-principles li:nth-child(even){border-left:1px solid var(--hair-soft)}
.ps-principles li:nth-child(n+3){border-top:1px solid var(--hair-soft)}
.ps-principles li{align-items:flex-start;flex-direction:column;gap:10px;padding:18px 12px;font-size:.92rem}
p.ps-headline br,.ps-principles br{display:inline}
}
@media(max-width:600px){.ps-partners{grid-template-columns:minmax(0,1fr)}}
/* Partner cards: identical structure, rows aligned across both cards (subgrid) */
@media(min-width:601px){
.ps-partners{grid-template-rows:repeat(5,auto);row-gap:0}
.ps-card{display:grid;grid-row:span 5;grid-template-rows:subgrid}
.ps-more{margin-top:0;align-self:end}
}
.ps-card .ps-headline{font-size:clamp(1.08rem,1.4vw,1.22rem)}
/* Principles: centred plaques; the statement in ivory, its qualifier in gold beneath */
.ps-principles li{flex-direction:column;justify-content:center;gap:0;padding:clamp(14px,1.6vw,20px) clamp(12px,1.8vw,20px);text-align:center;transition:background .6s var(--ease)}
.ps-principles li:before{width:5px;height:5px;margin-bottom:10px;box-shadow:0 0 12px rgba(207,178,119,.5)}
.ps-principles li:hover{background:rgba(207,178,119,.035)}
.ps-principles strong{display:block;font:400 clamp(.92rem,1.1vw,1rem)/1.3 var(--display);color:var(--text)}
.ps-principles li>span{display:block;margin-top:5px;font:500 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media(max-width:760px){
.ps-principles li{align-items:center;padding:14px 10px}
.ps-principles strong{font-size:.92rem}
.ps-principles li>span{font-size:9px;letter-spacing:.12em}
}
/* Quote follows the principles' own bottom rule: no second rule, no dead band */
.ps-principles+.ps-quote{margin-top:0;padding-top:clamp(48px,6vw,72px);border-top:0}
/* Maze row (desktop): air between the maze and the button; the light line bridges the gap.
The caption centres under the button. */
@media(min-width:761px){
.cta-path{--path-gap:clamp(32px,4vw,56px);column-gap:var(--path-gap)}
.cta-path .maze-feature:after{right:calc(-1 * var(--path-gap));width:calc(18% + var(--path-gap))}
.cta-path-action{align-items:center}
.cta-path-action>small{margin-top:22px;text-align:center}
}
/* ================= Why IAAI ================= */
/* Hero: the gold arch (two ribbons, one structure) instead of the homepage maze */
.subhero-arch:before{width:64%;background-image:url('assets/hero.webp');background-position:62% 70%}
.subhero-arch:after{background:linear-gradient(90deg,var(--g900) 30%,rgba(11,24,18,.3) 58%,rgba(11,24,18,0) 78%),linear-gradient(0deg,var(--g900),transparent 30%)}
@media(max-width:760px){.subhero-arch:before{opacity:.55;background-position:70% 60%}}
/* The six: a gold ring around the logo; one explanation at a time beside it */
.ring-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,6vw,96px)}
.ring-copy .why-different-intro{max-width:460px}
.ring-list{margin:clamp(28px,4vw,44px) 0 0;padding:0;list-style:none;counter-reset:ring}
.ring-list li{counter-increment:ring;padding:18px 0;border-top:1px solid var(--hair-soft)}
.ring-list li:before{content:none;display:block;margin-bottom:12px;font:500 11px/1 var(--sans);letter-spacing:.24em;color:var(--gold-lo)}
.ring-list h3{font-size:clamp(1.5rem,2.2vw,2rem);color:var(--gold)}
.ring-list p{max-width:420px;margin-top:10px;font:400 clamp(1.08rem,1.35vw,1.2rem)/1.55 var(--sans);color:var(--text)}
.js .ring-list li:not(.is-active){display:none}
.js .ring-list li{border-top:0;border-left:1px solid var(--gold);padding:4px 0 6px 24px;min-height:150px}
.js .ring-list li.is-active{animation:q-in .6s var(--ease)}
.ring{--size:clamp(300px,34vw,440px);position:relative;width:var(--size);height:var(--size);margin:56px}
.ring:before,.ring:after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.ring:before{inset:0;border:1px solid rgba(207,178,119,.45);box-shadow:0 0 40px rgba(207,178,119,.08),inset 0 0 60px rgba(207,178,119,.05)}
.ring:after{inset:18%;border:1px solid rgba(207,178,119,.14)}
.ring-logo{position:absolute;left:50%;top:50%;width:34%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 0 22px rgba(207,178,119,.25))}
.ring-node{--a:calc(var(--i) * 60deg - 90deg);position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;padding:0;background:none;border:0;color:var(--gold-lo);cursor:pointer;transform:translate(-50%,-29px) rotate(var(--a)) translate(calc(var(--size) / 2)) rotate(calc(-1 * var(--a)))}
.ring-node .icon{box-sizing:border-box;width:58px;height:58px;padding:15px;border:1px solid rgba(207,178,119,.4);border-radius:50%;color:var(--gold);background:var(--g950);transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.ring-node span{font:500 10.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;transition:color .5s var(--ease)}
.ring-node:hover span,.ring-node.is-active span{color:var(--gold-hi)}
.ring-node.is-active .icon{border-color:var(--gold);background:#12241b;box-shadow:0 0 0 5px rgba(207,178,119,.08),0 0 26px rgba(207,178,119,.35)}
.ring-node:focus-visible{outline:none}
.ring-node:focus-visible .icon{outline:1px solid var(--gold);outline-offset:4px}
@media(max-width:960px){
.ring-layout{grid-template-columns:minmax(0,1fr)}
.ring{justify-self:center;order:2;margin:52px auto 60px}
.ring-list{order:3}
.ring-copy{display:contents}
}
@media(max-width:760px){
.ring{--size:min(250px,64vw);margin:46px auto 54px}
.ring-node{width:auto;transform:translate(-50%,-50%) rotate(var(--a)) translate(calc(var(--size) / 2)) rotate(calc(-1 * var(--a)))}
.ring-node .icon{width:50px;height:50px;padding:13px}
.ring-node span{display:none}
.js .ring-list li{min-height:130px}
}
/* The journey: one gold line, five stations (no icons) */
.journey-line{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.5vw,36px);margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none}
.journey-line:before{content:'';position:absolute;left:0;right:0;top:5px;height:1px;background:linear-gradient(90deg,var(--gold-lo),var(--gold) 50%,rgba(207,178,119,.25))}
.journey-line li{position:relative;padding-top:36px}
.journey-line li:before{content:'';position:absolute;left:0;top:0;width:11px;height:11px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 0 5px var(--g850),0 0 16px rgba(207,178,119,.55)}
.journey-line h3{font-size:clamp(1.25rem,1.7vw,1.5rem);color:var(--gold)}
.journey-line p{margin-top:10px;font-size:.98rem;line-height:1.6;color:#cdc6b4}
@media(max-width:760px){
.journey-line{grid-template-columns:minmax(0,1fr);gap:0;padding-left:34px}
.journey-line:before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(180deg,var(--gold),rgba(207,178,119,.25))}
.journey-line li{padding:0 0 30px}
.journey-line li:last-child{padding-bottom:0}
.journey-line li:before{left:-34px;top:6px}
}
/* Ring on phones: the active name in the centre, text close beneath, and the symbols breathe
a soft glow in turn to invite a tap, until the first one is chosen */
.ring-name{display:none}
@keyframes ring-invite{0%,100%{box-shadow:0 0 0 0 rgba(207,178,119,0);border-color:rgba(207,178,119,.4)}50%{box-shadow:0 0 18px 2px rgba(207,178,119,.4);border-color:rgba(207,178,119,.85)}}
@media(max-width:960px){
}
@media(max-width:760px){
.ring{margin:46px auto 34px}
.js .ring-logo{display:none}
.ring-name{position:absolute;left:50%;top:50%;display:block;width:60%;transform:translate(-50%,-50%);text-align:center;font:400 1.35rem/1.15 var(--display);color:var(--gold-hi);animation:q-in .6s var(--ease)}
.ring-list{margin-top:0}
.js .ring-list h3{display:none}
.js .ring-list li{min-height:96px}
}
@media(prefers-reduced-motion:reduce){.js .ring .ring-node .icon{animation:none}}
/* The ring's travelling light: a gold point with a short comet trail along the ring */
.ring{--a:0deg}
.ring-trail{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from var(--s,0deg),rgba(207,178,119,.35) 0deg,rgba(243,227,184,.95) var(--len,0deg),transparent var(--len,0deg));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));opacity:1}
.ring.is-taken .ring-trail{opacity:0;transition:opacity .8s var(--ease)}
.ring-head{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#f3e3b8;box-shadow:0 0 10px 3px rgba(232,213,163,.75),0 0 28px 6px rgba(207,178,119,.35);pointer-events:none;transform:rotate(var(--a)) translateY(calc(var(--size) / -2))}
.ring-node{z-index:1}
.reduced-motion .ring-trail,.reduced-motion .ring-head{display:none}
/* 761-960px: keep the ring beside its text, a little smaller */
@media(min-width:761px) and (max-width:960px){
.ring-layout{grid-template-columns:minmax(0,1fr) auto;gap:32px}
.ring-copy{display:block}
.ring{--size:280px;order:0;margin:52px 48px}
.ring-list{order:0}
}
/* Ring: centre the logo's emblem (the file has PARTNERS beneath and space to the right) */
.ring-logo{transform:translate(-43%,-37.5%)}
/* ================= Our Expertise ================= */
/* Opening: headline beside the living word cloud (no photo) */
.subhero-noise{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);align-items:center;gap:clamp(32px,5vw,80px);background:radial-gradient(circle at 74% 50%,var(--mist),transparent 45%),url('assets/mist.svg') 70% 50%/cover,var(--g950)}
.subhero-noise:before,.subhero-noise:after{display:none}
.subhero-noise .noise-copy>p:not(.noise-line){max-width:480px;margin-top:26px;font-size:1.12rem;line-height:1.65;color:#d9d2c1;animation:rise 1.2s var(--ease) .35s both}
.subhero-noise .noise-copy>p em{color:var(--gold)}
.noise-line{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair);max-width:480px;font:400 clamp(1.1rem,1.5vw,1.3rem)/1.4 var(--display);color:var(--text);animation:rise 1.2s var(--ease) .55s both}
.noise-line em{color:var(--gold)}
.subhero-noise h1{max-width:none;font-size:clamp(2.4rem,4.3vw,4.4rem)}
.subhero-noise .word-cloud{max-width:470px;animation:rise 1.4s var(--ease) .3s both}
@media(max-width:900px){
.subhero-noise{grid-template-columns:minmax(0,1fr)}
.subhero-noise .word-cloud{max-width:440px}
}
/* The cloud is noisy: terms swell and fade at random, like a feed that never stops talking */
.cloud-term{display:inline-block;transition:transform 1.4s var(--ease),color 1.4s var(--ease),opacity 1.4s var(--ease)}
.cloud-term.is-loud{transform:scale(var(--swell,1.2));color:var(--gold-hi);opacity:1}
.cloud-term.is-hush{transform:scale(.82);opacity:.35}
/* Engagement terms, under the intro */
.engagement-terms{margin-top:18px;font:500 11.5px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.engagement-terms span{margin:0 .6em;color:var(--gold-lo)}
/* Briefing commitment: its own gold line */
.engagement-commitment{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font:400 clamp(1.1rem,1.5vw,1.3rem)/1.3 var(--display);color:var(--gold)}
/* Expertise opening, option B: the industry's noise fills the whole hero; the headline is the clear voice */
.subhero-noise{grid-template-columns:minmax(0,1fr);min-height:clamp(520px,74vh,720px)}
.subhero-noise .noise-copy{position:relative;z-index:1;max-width:620px}
.noise-field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.nf-term{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;scale:1;transition:scale 1.6s var(--ease),opacity 1.6s var(--ease),color 1.6s var(--ease);animation:nf-drift var(--dur,14s) ease-in-out var(--delay,0s) infinite alternate}
.nf-term.is-placed{opacity:var(--o,.5)}
.nf-s{font:300 .86rem/1 var(--sans);color:#8f9887;--o:.55}
.nf-m{font:400 1rem/1 var(--sans);color:#c9c6b6;--o:.5}
.nf-l{font:400 clamp(1.15rem,1.6vw,1.45rem)/1 var(--display);color:var(--gold);--o:.42}
.nf-xl{font:400 clamp(4rem,9vw,7.5rem)/1 var(--display);color:var(--gold);--o:.16}
.nf-term.is-loud{scale:var(--swell,1.2);color:var(--gold-hi);opacity:.95}
.nf-term.is-hush{scale:.85;opacity:.12}
@keyframes nf-drift{from{translate:0 0}to{translate:var(--dx,6px) var(--dy,-4px)}}
.reduced-motion .nf-term{animation:none;transition:none}
/* The three steps as cards on the path; the chosen card lifts and opens its detail beneath */
.js .engagement-tabs{position:relative;top:auto;z-index:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.js .engagement-tabs:before{content:'';position:absolute;left:0;right:0;top:46px;height:1px;background:linear-gradient(90deg,var(--gold-lo),var(--gold) 50%,rgba(207,178,119,.25))}
.engagement-tabs-indicator{display:none}
.js .engagement-tabs button.eng-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.4vw,30px);text-align:left;border:1px solid var(--hair-soft);background:radial-gradient(ellipse 100% 55% at 0% 0%,rgba(34,56,46,.32),transparent 70%),linear-gradient(170deg,#112219,#08110d);color:var(--text);cursor:pointer;transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.js .engagement-tabs button.eng-card+button.eng-card{border-left:1px solid var(--hair-soft);padding-left:clamp(22px,2.4vw,30px)}
.js .engagement-tabs button.eng-card:hover{transform:translateY(-4px);border-color:var(--hair);background:radial-gradient(ellipse 100% 55% at 0% 0%,rgba(34,56,46,.32),transparent 70%),linear-gradient(170deg,#112219,#08110d)}
.js .engagement-tabs button.eng-card[aria-selected=true]{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 24px 50px -28px rgba(0,0,0,.8),0 0 0 1px rgba(207,178,119,.25),0 0 30px rgba(207,178,119,.12)}
.js .engagement-tabs button.eng-card[aria-selected=true]:after{content:'';position:absolute;left:50%;bottom:-9px;width:16px;height:16px;margin-left:-8px;transform:rotate(45deg);background:#08110d;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.eng-num{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;background:var(--g950);font:400 .9rem/1 var(--display);letter-spacing:.04em;color:var(--gold)}
.eng-pillar{margin-top:18px;font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lo)}
.eng-title{margin-top:10px;font:400 clamp(1.35rem,1.9vw,1.7rem)/1.15 var(--display);color:var(--text)}
.eng-tagline{margin-top:12px;font:400 .95rem/1.55 var(--sans);letter-spacing:0;text-transform:none;color:#cdc6b4}
.eng-outcome{margin-top:auto;padding-top:18px;width:100%;font:400 1rem/1.35 var(--display);color:var(--gold-hi)}
.eng-outcome>span{display:block;margin:0 0 8px;padding-top:16px;border-top:1px solid var(--hair);font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lo)}
.js .engagement-tabs button.eng-card[aria-selected=true] .eng-num{background:var(--gold);color:var(--g950)}
.js .engagement-tabs button.eng-card[aria-selected=true] .eng-title{color:var(--gold-hi)}
.engagement-panels{margin-top:26px}
@media(min-width:761px){.engagement-panels .engagement-card-head{display:none}}
@media(max-width:760px){
.js .engagement-tabs{gap:8px}
.js .engagement-tabs:before{top:34px}
.js .engagement-tabs button.eng-card,.js .engagement-tabs button.eng-card+button.eng-card{padding:14px 10px 16px}
.eng-num{width:32px;height:32px;font-size:.8rem}
.eng-pillar{margin-top:12px;font-size:9px;letter-spacing:.16em}
.eng-title{font-size:1.02rem}
.eng-tagline,.eng-outcome{display:none}
}
/* Cards: undo the old tab-label styling on the card's inner lines */
.js .engagement-tabs button.eng-card span{margin-bottom:0;letter-spacing:0;text-transform:none}
.js .engagement-tabs button.eng-card .eng-num{display:grid;font:400 .9rem/1 var(--display);letter-spacing:.04em;color:var(--gold)}
.js .engagement-tabs button.eng-card .eng-pillar{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lo)}
.js .engagement-tabs button.eng-card .eng-title{display:block;font:400 clamp(1.35rem,1.9vw,1.7rem)/1.15 var(--display);color:var(--text)}
.js .engagement-tabs button.eng-card .eng-tagline{display:block;font:400 .95rem/1.55 var(--sans);color:#cdc6b4}
.js .engagement-tabs button.eng-card .eng-outcome{display:block;font:400 1rem/1.35 var(--display);color:var(--gold-hi)}
.js .engagement-tabs button.eng-card .eng-outcome>span{font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lo);margin-bottom:8px}
.js .engagement-tabs button.eng-card[aria-selected=true] .eng-num{color:var(--g950)}
.js .engagement-tabs button.eng-card[aria-selected=true] .eng-title{color:var(--gold-hi)}
/* Detail panel (desktop): the approach on the left, the five points on the right */
@media(min-width:761px){
.engagement-panels .engagement-card{grid-template-columns:minmax(0,1fr)}
.engagement-panels .engagement-card-detail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,72px);align-items:start}
.engagement-panels .engagement-card-detail>*{grid-column:1}
.engagement-panels .engagement-card-detail>ul{grid-column:2;grid-row:1 / span 4;margin-top:0}
.engagement-panels .engagement-card-detail>.engagement-next{grid-column:1 / -1}
}
@media(max-width:760px){
.js .engagement-tabs button.eng-card .eng-title{font-size:1.02rem}
.js .engagement-tabs button.eng-card .eng-pillar{font-size:9px;letter-spacing:.16em}
.js .engagement-tabs button.eng-card .eng-tagline,.js .engagement-tabs button.eng-card .eng-outcome{display:none}
}
/* Expertise opening: the perspective as a protected bubble; the noise packs in around it */
.subhero-noise{place-items:center;min-height:clamp(560px,82vh,760px);text-align:center}
.subhero-noise .noise-copy{max-width:none;margin:0 auto}
.subhero-noise h1{max-width:none;margin:0 auto;font-size:clamp(2.3rem,5.2vw,5.2rem)}
.noise-focus{padding-top:clamp(48px,6vw,80px);padding-bottom:0;text-align:center}
.noise-focus p{max-width:720px;margin:0 auto;font:400 clamp(1.25rem,2vw,1.7rem)/1.45 var(--display);color:var(--text)}
.noise-focus em{color:var(--gold)}
@media(max-width:760px){.noise-focus p br{display:inline}}.nf-term.is-placed{opacity:calc(var(--o,.5) * (.55 + var(--near,.5) * .75))}
/* Subline inside the bubble */
.noise-sub{margin:clamp(18px,2.4vw,28px) auto 0;max-width:34ch;font:400 clamp(1.05rem,1.5vw,1.3rem)/1.5 var(--sans);color:#d9d2c1;animation:rise 1.2s var(--ease) .45s both}
/* Path markers carry the pillar icons, not numbers */
.step .icon,.eng-num .icon{width:20px;height:20px;padding:0;border:0;background:none;color:currentColor}
.js .engagement-tabs button.eng-card .eng-num{width:44px;height:44px}
.js .engagement-tabs button.eng-card[aria-selected=true] .eng-num .icon{color:var(--g950)}
@media(max-width:759px){
.step{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border:1px solid var(--gold);border-radius:50%;background:var(--g950)}
.step .icon{width:18px;height:18px}
}
/* Engagement detail: gold leads (the promise, the point labels), champagne supports */
.engagement-card-tagline{color:#cdc6b4}
.engagement-card-detail h3{color:var(--text)}
.engagement-card-detail>p{color:#cdc6b4}
.engagement-card-detail li{color:#b9b3a3}
.engagement-card-detail li strong{color:var(--gold-hi);font-weight:500}
.engagement-card-outcome-desc{color:#cdc6b4}
/* The engagement name is gold wherever it appears (card and panel) */
.engagement-panels .engagement-title{color:var(--gold-hi)}
/* ================= The Partners ================= */
/* Opening: the two portraits are the image; each opens that partner's story below */
.subhero-partners{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,72px)}
.subhero-partners:before,.subhero-partners:after{display:none}
.subhero-partners .partners-copy p{max-width:440px;margin-top:26px;font-size:1.12rem;line-height:1.7;color:#d9d2c1;animation:rise 1.2s var(--ease) .35s both}
.subhero-partners .partner-tabs,.js .subhero-partners .partner-tabs{display:grid;max-width:none;margin:0;gap:16px;animation:rise 1.4s var(--ease) .3s both}
.subhero-partners .partner-tabs>button{cursor:pointer}
.biographies{padding-top:clamp(56px,7vw,96px)}
.bio .track-record-label{margin-top:40px;margin-bottom:14px}
.bio .credential-list{margin:0 0 8px}
@media(max-width:900px){
.subhero-partners{grid-template-columns:minmax(0,1fr)}
.subhero-partners .partner-tabs{max-width:560px}
}
@media(max-width:760px){.subhero-partners .partners-copy p br{display:inline}}
.subhero-partners h1{max-width:none;font-size:clamp(2.4rem,4.2vw,4.4rem)}
/* Partners: shoulder to shoulder. Doug left, Tim right; the chosen partner steps forward,
the other stays half a step behind. Each portrait's office background fades into the dark,
so the two read as one scene rather than two frames. */
.subhero-partners .partner-tabs,.js .subhero-partners .partner-tabs{position:relative;display:block;width:100%;max-width:620px;aspect-ratio:4/3;margin:0 auto;perspective:1400px}
.subhero-partners .partner-tabs>button{position:absolute;top:0;width:60%;aspect-ratio:4/5;border:0;background:none;overflow:visible;transform-origin:50% 100%;transition:transform 1s var(--ease),filter 1s var(--ease),opacity 1s var(--ease)}
.subhero-partners .partner-tabs>button#tab-doug{left:0}
.subhero-partners .partner-tabs>button#tab-tim{right:0}
.subhero-partners .partner-tabs>button:before{display:none}
.subhero-partners .partner-tabs>button:after{display:none}
.subhero-partners .partner-tabs>button>img{filter:grayscale(1) brightness(.8) contrast(1.05);-webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 46%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 58% 64% at 50% 46%,#000 52%,transparent 100%);transition:filter 1s var(--ease)}
.subhero-partners .partner-tabs>button:hover>img{transform:none}
.subhero-partners .partner-tabs>button>span,.subhero-partners .partner-tabs>button>small{text-align:center;margin-left:0;margin-right:0;transition:color 1s var(--ease),opacity 1s var(--ease)}
.subhero-partners .partner-tabs>button>span{font-size:clamp(1.2rem,1.9vw,1.7rem)}
/* in front */
.subhero-partners .partner-tabs>button[aria-selected=true]{z-index:2;transform:translateX(0) scale(1) rotateY(0deg)}
.subhero-partners .partner-tabs>button[aria-selected=true]>img{filter:grayscale(1) brightness(.95) contrast(1.08)}
.subhero-partners .partner-tabs>button[aria-selected=true]>span{color:var(--gold-hi)}
/* half a step behind */
.subhero-partners .partner-tabs>button[aria-selected=false]{z-index:1;opacity:.85}
.subhero-partners .partner-tabs>button#tab-doug[aria-selected=false]{transform:translateX(-4%) scale(.86) rotateY(14deg)}
.subhero-partners .partner-tabs>button#tab-tim[aria-selected=false]{transform:translateX(4%) scale(.86) rotateY(-14deg)}
.subhero-partners .partner-tabs>button[aria-selected=false]>img{filter:grayscale(1) brightness(.45) blur(1.2px)}
.subhero-partners .partner-tabs>button[aria-selected=false]>span{color:rgba(240,234,219,.6)}
.subhero-partners .partner-tabs>button[aria-selected=false]>small{opacity:.55}
.subhero-partners .partner-tabs>button[aria-selected=false]:hover>img{filter:grayscale(1) brightness(.62) blur(.6px)}
.reduced-motion .subhero-partners .partner-tabs>button,.reduced-motion .subhero-partners .partner-tabs>button>img{transition:none}
/* Before any choice the partners stand as equals: same size, same light, a little apart */
.subhero-partners .partner-tabs:not(.has-chosen)>button[aria-selected]{z-index:1;opacity:1}
.subhero-partners .partner-tabs:not(.has-chosen)>button#tab-doug[aria-selected]{transform:translateX(-5%) scale(.94)}
.subhero-partners .partner-tabs:not(.has-chosen)>button#tab-tim[aria-selected]{transform:translateX(5%) scale(.94)}
.subhero-partners .partner-tabs:not(.has-chosen)>button[aria-selected]>img{filter:grayscale(1) brightness(.88) contrast(1.06)}
.subhero-partners .partner-tabs:not(.has-chosen)>button[aria-selected]>span{color:var(--text)}
.subhero-partners .partner-tabs:not(.has-chosen)>button[aria-selected]>small{opacity:1}
.subhero-partners .partner-tabs:not(.has-chosen)>button[aria-selected]:hover>img{filter:grayscale(1) brightness(1) contrast(1.08)}
/* ================= Contact ================= */
/* Opening: Marina Bay at dusk as the image (the practice is registered in Singapore) */
.subhero-city:before{width:62%;background-image:url('assets/contact-singapore.jpg');background-position:60% 55%;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.65) 32%,#000 70%);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.65) 32%,#000 70%)}
.subhero-city:after{background:linear-gradient(90deg,var(--g900) 30%,rgba(11,24,18,.35) 60%,rgba(11,24,18,.1) 80%),linear-gradient(0deg,var(--g900),transparent 30%)}
@media(max-width:760px){.subhero-city:before{opacity:.5;background-position:60% 50%}}
.contact-reach{max-width:340px;margin-top:18px;font-size:1rem;line-height:1.6;color:#cdc6b4}
/* Contact: the form is a letter. Ivory paper, dark ink, gold only where it matters. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#contact-form.letter{--ink:#16281f;--ink-soft:#4f5e55;--rule:rgba(22,40,31,.26);--brass:#96763a;position:relative;padding:clamp(30px,4.5vw,60px) clamp(24px,4.5vw,64px) clamp(30px,4vw,52px);border:0;border-radius:2px;color:var(--ink);background:radial-gradient(ellipse 120% 80% at 20% 0%,#fbf8f0,transparent 60%),radial-gradient(ellipse 90% 70% at 100% 100%,#e9e1cd,transparent 70%),#f4efe3;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.35) inset}
#contact-form.letter:before{content:'';position:absolute;inset:12px;border:1px solid rgba(150,118,58,.35);pointer-events:none}
#contact-form.letter:after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#b8954f,#e6cf93 50%,#b8954f)}
.letter-head{display:flex;align-items:center;gap:16px;padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--rule)}
.letter-emblem{width:54px;height:54px;object-fit:contain;filter:brightness(.72) sepia(.35)}
.letter-from strong{display:block;font:400 1.2rem/1.2 var(--display);letter-spacing:.06em;color:var(--ink)}
.letter-from span{display:block;margin-top:4px;font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.letter-date{margin:0 0 0 auto;font:400 .95rem/1 var(--sans);color:var(--ink-soft)}
.letter-greeting,.letter-closing{margin:0;font:400 clamp(1.25rem,1.8vw,1.5rem)/1.3 var(--display);color:var(--ink)}
.letter-body{display:block;margin:14px 0 26px}
#contact-form.letter textarea{display:block;width:100%;min-height:calc(32px * 7);margin:0;padding:0 2px;border:0;border-radius:0;resize:vertical;background:repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);background-attachment:local;font:400 1.08rem/32px var(--sans);color:var(--ink);box-shadow:none;outline:none}
#contact-form.letter textarea::placeholder{color:#8b958d}
#contact-form.letter textarea:focus{background:repeating-linear-gradient(transparent 0 31px,rgba(150,118,58,.45) 31px 32px);background-attachment:local}
.letter-sign{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;margin-top:22px}
#contact-form.letter .letter-sign label{display:block;margin:0;font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
#contact-form.letter .letter-sign label span{letter-spacing:.06em;text-transform:none;color:var(--ink-soft)}
#contact-form.letter .letter-sign input{display:block;width:100%;margin-top:6px;padding:6px 2px 8px;border:0;border-bottom:1px solid rgba(22,40,31,.3);border-radius:0;background:none;font:400 1.08rem/1.3 var(--display);letter-spacing:.01em;text-transform:none;color:var(--ink);box-shadow:none;outline:none;transition:border-color .4s var(--ease)}
#contact-form.letter .letter-sign input::placeholder{font-family:var(--sans);font-size:.9rem;color:#8b958d}
#contact-form.letter .letter-sign input:focus{border-bottom-color:var(--brass)}
.letter-foot{display:flex;justify-content:flex-end;margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
.letter-send{display:inline-flex;align-items:center;gap:16px;min-height:54px;padding:0 30px;border:1px solid #16281f;background:#16281f;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#e6cf93;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease)}
.letter-send:hover,.letter-send:focus-visible{background:#b8954f;border-color:#b8954f;color:#16281f}
.letter-send:disabled{opacity:.6;cursor:wait}
#contact-form.letter #form-status{margin-top:16px;font-size:.98rem;color:var(--ink)}
#contact-form.letter #form-status.form-error{color:#8a2d1f}
#contact-form.letter :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media(max-width:640px){
.letter-head{flex-wrap:wrap}
.letter-date{flex-basis:100%;margin:6px 0 0}
.letter-sign{grid-template-columns:minmax(0,1fr)}
.letter-send{width:100%;justify-content:space-between}
}/* Letter gets the wider column; letterhead lines never wrap mid-phrase */
@media(min-width:900px){.contact-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(40px,5vw,80px)}}
.letter-date,.letter-from span{white-space:nowrap}
/* The letter's wax seal: racing-green wax, the IAAI emblem pressed in gold */
.letter-foot{align-items:center;justify-content:space-between;gap:20px}
.letter-seal{position:relative;display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:47% 53% 50% 50% / 52% 46% 54% 48%;background:radial-gradient(circle at 34% 30%,#3c6150 0,#1d3b2c 38%,#0f2419 72%,#0a1811 100%);box-shadow:0 6px 14px -4px rgba(0,0,0,.55),inset 0 2px 3px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.45);transform:rotate(-8deg);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.letter-seal:before{content:'';position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(230,207,147,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.letter-seal:after{content:'';position:absolute;right:-5px;bottom:9px;width:14px;height:12px;border-radius:50% 60% 45% 55%;background:radial-gradient(circle at 40% 35%,#2c4d3d,#0f2419);box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.letter-seal img{position:relative;width:62%;height:auto;filter:sepia(.4) saturate(1.3) brightness(1.05) drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.letter-foot:has(.letter-send:hover) .letter-seal{transform:rotate(-4deg) scale(1.04);box-shadow:0 8px 18px -4px rgba(0,0,0,.6),0 0 22px rgba(184,149,79,.35),inset 0 2px 3px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.45)}
@keyframes seal-press{0%{transform:rotate(-8deg) scale(1)}35%{transform:rotate(-2deg) scale(.86)}70%{transform:rotate(-6deg) scale(1.08)}100%{transform:rotate(-6deg) scale(1)}}
#contact-form.letter.is-sealed .letter-seal{animation:seal-press .9s var(--ease) both}
.reduced-motion #contact-form.letter.is-sealed .letter-seal{animation:none}
@media(max-width:640px){.letter-foot{flex-wrap:nowrap}.letter-send{width:auto;flex:1}}
/* Wax seal, vector version (overrides the first CSS-drawn attempt) */
svg.letter-seal{display:block;flex:none;width:76px;height:76px;border-radius:0;background:none;box-shadow:none;overflow:visible;transform:rotate(-8deg);filter:drop-shadow(0 5px 6px rgba(0,0,0,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.4));transition:transform .6s var(--ease),filter .6s var(--ease)}
.letter-foot:has(.letter-send:hover) svg.letter-seal{transform:rotate(-4deg) scale(1.04);box-shadow:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(207,169,94,.45))}
/* Letterhead: racing-green band across the top of the paper, the emblem and name in gold */
#contact-form.letter .letter-head{position:relative;z-index:1;margin:calc(-1 * clamp(30px,4.5vw,60px)) calc(-1 * clamp(24px,4.5vw,64px)) 34px;padding:24px clamp(24px,4.5vw,64px) 22px;border-bottom:0;background:radial-gradient(ellipse 80% 140% at 15% 0%,rgba(79,124,102,.35),transparent 60%),linear-gradient(180deg,#17301f,#0f2218);box-shadow:inset 0 -1px 0 rgba(207,169,94,.55)}
#contact-form.letter:after{z-index:2}
#contact-form.letter .letter-emblem{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
#contact-form.letter .letter-from strong{color:#e6cf93}
#contact-form.letter .letter-from span{color:#b8954f}
#contact-form.letter .letter-date{color:#cdbb8a}
/* The logo, assembled from its own parts so the IA and AI rows can turn on their own axis.
Positions are measured from the original logo artwork (600px canvas). */
.logo-mark{position:relative;display:block}
.logo-mark img{position:absolute;display:block;height:auto;max-width:none}
.logo-mark .lm-ring{left:10.04%;top:2.4%;width:66.85%}
.logo-mark .lm-word{left:2.36%;top:77.2%;width:83.12%}
.logo-mark .lm-row{position:absolute;display:block;transform-origin:50% 50%;will-change:transform}
.logo-mark .lm-row img{position:static;width:100%;height:100%;object-fit:contain}
.logo-mark .lm-top{left:30.84%;top:11.76%;width:31.85%;height:24.33%}
.logo-mark .lm-bottom{left:27.67%;top:39.83%;width:30.19%;height:23.05%}/* Each row turns on its own axis and the two rows trade places: the AI row keeps the exact size and
horizontal position it has in the original artwork, and so does the IA row; only top and bottom swap. */
.logo-mark .lm-row{transform-origin:50% 50%}
.logo-mark.is-flipped .lm-top{left:27.67%;top:12.39%;width:30.19%;height:23.05%}
.logo-mark.is-flipped .lm-bottom{left:28.29%;top:39.68%;width:30.26%;height:23.11%}
/* Letter: small labels and placeholder text at readable contrast */
#contact-form.letter{--brass:#7a5e2a}
#contact-form.letter textarea::placeholder,#contact-form.letter .letter-sign input::placeholder{color:#687169}
/* Popup letter: the same letter styling as the contact page, reused inside a modal */
#popup-letter-form.letter{--ink:#16281f;--ink-soft:#4f5e55;--rule:rgba(22,40,31,.26);--brass:#96763a;position:relative;padding:clamp(24px,4.5vw,44px) clamp(22px,4.5vw,44px) clamp(24px,4vw,34px);border:0;border-radius:2px;color:var(--ink);background:radial-gradient(ellipse 120% 80% at 20% 0%,#fbf8f0,transparent 60%),radial-gradient(ellipse 90% 70% at 100% 100%,#e9e1cd,transparent 70%),#f4efe3;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.35) inset}
#popup-letter-form.letter:before{content:'';position:absolute;inset:10px;border:1px solid rgba(150,118,58,.35);pointer-events:none}
#popup-letter-form.letter:after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#b8954f,#e6cf93 50%,#b8954f);z-index:2}
#popup-letter-form.letter textarea{display:block;width:100%;min-height:calc(32px * 5);margin:0;padding:0 2px;border:0;border-radius:0;resize:vertical;background:repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);background-attachment:local;font:400 1.08rem/32px var(--sans);color:var(--ink);box-shadow:none;outline:none}
#popup-letter-form.letter textarea::placeholder{color:#8b958d}
#popup-letter-form.letter textarea:focus{background:repeating-linear-gradient(transparent 0 31px,rgba(150,118,58,.45) 31px 32px);background-attachment:local}
#popup-letter-form.letter .letter-sign label{display:block;margin:0;font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
#popup-letter-form.letter .letter-sign label span{letter-spacing:.06em;text-transform:none;color:var(--ink-soft)}
#popup-letter-form.letter .letter-sign input{display:block;width:100%;margin-top:6px;padding:6px 2px 8px;border:0;border-bottom:1px solid rgba(22,40,31,.3);border-radius:0;background:none;font:400 1.08rem/1.3 var(--display);letter-spacing:.01em;text-transform:none;color:var(--ink);box-shadow:none;outline:none;transition:border-color .4s var(--ease)}
#popup-letter-form.letter .letter-sign input::placeholder{font-family:var(--sans);font-size:.9rem;color:#8b958d}
#popup-letter-form.letter .letter-sign input:focus{border-bottom-color:var(--brass)}
#popup-letter-form.letter #popup-form-status{margin-top:16px;font-size:.98rem;color:var(--ink)}
#popup-letter-form.letter #popup-form-status.form-error{color:#8a2d1f}
#popup-letter-form.letter :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
#popup-letter-form.letter.is-sealed .letter-seal{animation:seal-press .9s var(--ease) both}
.reduced-motion #popup-letter-form.letter.is-sealed .letter-seal{animation:none}
#popup-letter-form.letter .letter-head{position:relative;z-index:1;margin:calc(-1 * clamp(24px,4.5vw,44px)) calc(-1 * clamp(22px,4.5vw,44px)) 26px;padding:20px clamp(22px,4.5vw,44px) 18px;border-bottom:0;background:radial-gradient(ellipse 80% 140% at 15% 0%,rgba(79,124,102,.35),transparent 60%),linear-gradient(180deg,#17301f,#0f2218);box-shadow:inset 0 -1px 0 rgba(207,169,94,.55)}
#popup-letter-form.letter .letter-emblem{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
#popup-letter-form.letter .letter-from strong{color:#e6cf93}
#popup-letter-form.letter .letter-from span{color:#b8954f}
#popup-letter-form.letter .letter-date{color:#cdbb8a}
/* Popup letter: modal shell */
.letter-popup{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;perspective:1400px}
.letter-popup-backdrop{animation:letter-veil .5s var(--ease) both}
.letter-popup-panel{transform-origin:50% 8%}
.letter-popup.is-opening .letter-popup-panel{animation:letter-unfold .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes letter-veil{0%{opacity:0}100%{opacity:1}}
@keyframes letter-unfold{0%{opacity:0;transform:rotateX(-78deg) translateY(-18px) scaleY(.6)}55%{opacity:1}100%{opacity:1;transform:rotateX(0deg) translateY(0) scaleY(1)}}
.reduced-motion .letter-popup-backdrop,.reduced-motion .letter-popup.is-opening .letter-popup-panel{animation:none}
.letter-popup[hidden]{display:none}
.letter-popup-backdrop{position:absolute;inset:0;background:rgba(5,12,9,.72);backdrop-filter:blur(3px)}
.letter-popup-panel{position:relative;z-index:1;width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow:auto}
.letter-popup-close{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(22,40,31,.3);border-radius:50%;background:rgba(244,239,227,.9);font:400 20px/1 var(--display);color:#16281f;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}
.letter-popup-close:hover,.letter-popup-close:focus-visible{background:#e9e1cd;transform:rotate(90deg)}
body.letter-open{overflow:hidden}
@media(max-width:480px){.letter-popup{padding:0}.letter-popup-panel{max-width:100%;max-height:100vh;border-radius:0}}
/* ===== Phone pass after real-device test ===== */
/* Even line lengths: headings balance their lines; paragraphs avoid a lone last word */
h1,h2,h3,blockquote,.root-cause-line,.solution-bridge,.services-bridge,.noise-sub,.ps-headline{text-wrap:balance}
p,li{text-wrap:pretty}
/* The livelier noise: quicker swells, wider drift */
.nf-term{transition:scale .9s var(--ease),opacity .9s var(--ease),color .9s var(--ease)}
.nf-term.is-loud{opacity:1}
@media(max-width:760px){
/* solid header: nothing shows through behind the logo */
header,header.scrolled,.js header,.js header.scrolled{background:#08110d;-webkit-backdrop-filter:none;backdrop-filter:none}
/* tighter vertical rhythm */
.section{padding-top:56px;padding-bottom:56px}
.subhero{min-height:0}
.subhero-arch,.subhero-city{min-height:clamp(360px,56svh,460px)}
/* engagement detail: no reserved space under the title */
.engagement-panels .engagement-card{grid-template-rows:auto auto;align-content:start}
.engagement-panels .engagement-card-head{align-self:start}
.nf-s{font-size:.78rem}
.nf-m{font-size:.9rem}
}@media(max-width:760px){.subhero.subhero-noise{min-height:clamp(600px,82svh,720px)}}
/* MOCK-UP: the logo's mark instead of the diamond (six principles only, for comparison) */
.ps-principles li:before{width:15px;height:11px;transform:none;background:var(--gold);box-shadow:none;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;filter:drop-shadow(0 0 7px rgba(207,178,119,.45))}
/* architecture headline: always exactly two lines on desktop/tablet */
@media(min-width:761px){.architecture-copy{max-width:min(960px,100%)}h2.architecture-lede{font-size:clamp(1.6rem,2.4vw,2.1rem);white-space:nowrap}}
/* questions headline: same scale as the mantra, not the oversized default h2 */
.questions-intro h2{font-size:clamp(1.55rem,2.3vw,2.2rem)}
/* ---------- One heading scale (desktop/tablet): page title > section heading > card heading ---------- */
@media(min-width:761px){
h1,.hero h1,.subhero h1,.subhero-noise h1,.subhero-partners h1{font-size:clamp(2.2rem,3.1vw,3rem)}
.hero h1{font-size:clamp(2rem,3vw,3.1rem)}
h2,.cta h2,.mantra,.questions-intro h2,#contact-form h2{font-size:clamp(1.6rem,2.4vw,2.3rem)}
.partner-panel h2{font-size:clamp(2rem,3vw,2.8rem)}
.ps-quote{font-size:clamp(1.4rem,2.1vw,2rem)}
.service h3,.service-path .service h3,.ps-card h3,.ring-list h3,.journey-line h3{font-size:clamp(1.3rem,1.7vw,1.6rem)}
.engagement-title{font-size:clamp(1.4rem,1.9vw,1.8rem)}
}