:root{
/* PRIMARY (deep brand blue) */
--accent:#15294D;
--accent-deep:#0E1B33;
--accent-soft:#2E4D80;
--accent-tint:rgba(21,41,77,0.07);
/* SECONDARY (orange accent) */
--accent-2:#E8601C;
--accent-2-deep:#C44E14;
--accent-2-tint:rgba(232,96,28,0.10);
/* good (green) and bad (red) for compare grid */
--good:#1E9E63;
--good-deep:#177A4C;
--good-tint:rgba(30,158,99,0.10);
--bad:#C9362C;
--bad-deep:#A12921;
--bad-tint:rgba(201,54,44,0.09);
/* logo plate: mirrors the supplied logo artwork's own background so the
lozenge reads as one solid mark. Kept distinct from the UI accent. */
--logo-plate:#EE8E12;
/* PRACTICE IDENTITY. One convention across the whole site:
orange = Consulting Group / Due Diligence,
blue = Technology Advisory Group / Technology Assessments.
These alias the existing accent values rather than introducing new ones.
--adv is the bar/dot/accent blue; --adv-deep is the only blue that carries
white text (button fills, link text), because --adv on white sits near 3.4:1. */
--con:#E8601C;
--con-deep:#C44E14;
--con-tint:rgba(232,96,28,0.10);
--con-tint-2:rgba(232,96,28,0.18);
--adv:#3B82C4;
--adv-deep:#2E4D80;
--adv-light:#5FACE8;
--adv-tint:rgba(59,130,196,0.10);
--adv-tint-2:rgba(59,130,196,0.20);
/* INK + surfaces */
--ink:#141821;
--ink-soft:#43505F;
--ink-mute:#5E6B7A;
--rule:rgba(20,24,33,0.16);
--white:#FFFFFF;
--paper:#FAFAF6;
--field:#F2F3EF;
/* type + motion (literal stacks only here) */
--font-head:"Schibsted Grotesk","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--t:0.25s ease;
--wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
font-family:var(--font-body);background:var(--paper);color:var(--ink-soft);
line-height:1.7;font-size:17px;overflow-x:hidden;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-2);color:#fff}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{
font-family:var(--font-head);color:var(--ink);font-weight:700;
letter-spacing:-0.02em;line-height:1.12;
}
h1{font-size:clamp(2.6rem,6vw,4.7rem);line-height:1.04;letter-spacing:-0.035em}
h2{font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.08;letter-spacing:-0.03em}
h3{font-size:clamp(1.25rem,1.7vw,1.55rem)}
.lead{font-size:clamp(1.1rem,1.5vw,1.32rem);color:var(--ink-soft);max-width:34em;line-height:1.6}
em{font-style:normal;color:var(--accent-2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
section{padding:clamp(46px,6.4vw,82px) 0;position:relative}
.lift{background:var(--white)}
.tinted{background:var(--accent-tint);overflow:hidden}
.dark{background:var(--accent-deep);color:rgba(255,255,255,0.82);overflow:hidden}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .eyebrow{color:#fff}
/* section-head body copy is ink-soft by default, which is unreadable once the
section goes dark. */
.dark .section-head p{color:rgba(255,255,255,.75)}
.dark .eyebrow::before{background:var(--accent-2)}
/* dark engagement CTA banner */
.eng-cta{position:relative;overflow:hidden}
.eng-cta::before{content:"";position:absolute;right:-12%;top:-50%;width:50vw;height:50vw;max-width:640px;max-height:640px;background:radial-gradient(circle,rgba(232,96,28,.22),transparent 65%);pointer-events:none}
.eng-cta::after{content:"";position:absolute;left:-8%;bottom:-40%;width:36vw;height:36vw;max-width:460px;max-height:460px;background:radial-gradient(circle,rgba(232,96,28,.10),transparent 65%);pointer-events:none}
.eng-cta-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:center;position:relative;z-index:1}
.eng-cta-copy h2{font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.1;max-width:18em;letter-spacing:-.02em}
.eng-cta-copy p{color:rgba(255,255,255,.78);max-width:34em;margin-top:14px;font-size:1.02rem}
.eng-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.eng-cta-actions .btn-primary{background:var(--accent-2);color:#fff;border-color:var(--accent-2);padding:16px 28px;font-size:1rem;box-shadow:0 18px 38px -16px rgba(232,96,28,.7)}
.eng-cta-actions .btn-primary:hover{background:var(--accent-2-deep);border-color:var(--accent-2-deep)}
.eng-cta-secondary{color:#fff;font-weight:600;font-size:.95rem}
.eng-cta-secondary:hover{color:var(--accent-2)}
@media (max-width:880px){
.eng-cta-grid{grid-template-columns:1fr;gap:24px}
.eng-cta-actions{flex-direction:row;align-items:center;flex-wrap:wrap}
}
/* bold orange feature band */
.feature{background:linear-gradient(135deg,var(--accent-2) 0%,var(--accent-2-deep) 100%);color:#fff;position:relative;overflow:hidden}
.feature::after{content:"";position:absolute;left:-8%;bottom:-40%;width:46vw;height:46vw;max-width:560px;max-height:560px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 60%);pointer-events:none}
.feature h2,.feature h3{color:#fff}
.feature .eyebrow{color:#fff}
.feature .eyebrow::before{background:#fff}
.feature .btn-primary{background:#fff;color:var(--accent-2-deep);border-color:#fff}
.feature .btn-primary:hover{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep);box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.feature .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.feature .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.feature-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.feature-copy h2{font-size:clamp(2rem,3.4vw,2.85rem);line-height:1.06;max-width:18em}
.feature-copy p{max-width:36em}
/* closing band: two pieces of proof, one per practice, both real links.
This replaced four tiles that had a hover lift but no destination. */
@media (max-width:780px){
.feature-grid{grid-template-columns:1fr}
}
/* eyebrow kicker */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);
font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-mute);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent-2);display:inline-block}
/* The cap belongs on the heading, not the block. Capping the block meant the
intro line under it broke several inches short of the container, and the
site-wide p{max-width:62ch} cut it shorter still. Headings keep their
measure and their line breaks; the intro fills the width. */
.section-head{max-width:none}
.section-head h2{max-width:46rem}
.section-head p{margin-top:14px;color:var(--ink-soft);max-width:none}
/* buttons */
.btn{
display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);
font-weight:600;font-size:.97rem;padding:14px 26px;border-radius:7px;
border:1.5px solid transparent;cursor:pointer;transition:transform var(--t),
background var(--t),box-shadow var(--t),border-color var(--t);text-align:left;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--accent-2);color:#fff;border-color:var(--accent-2)}
.btn-primary:hover{background:var(--accent-2-deep);border-color:var(--accent-2-deep);transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(232,96,28,.7)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-2px)}
.dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
/* A text link is still a tap target. The padding is vertical only and the
negative margin pulls the box back so the text sits where it always did;
only the hit area grows. 44px is the WCAG 2.5.8 minimum. */
.textlink{
display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--accent-2);
transition:gap var(--t);min-height:44px;padding:9px 0;margin:-9px 0;
}
.textlink svg{width:15px;height:15px;transition:transform var(--t)}
.textlink:hover svg{transform:translateX(4px)}
/* header */
header{
position:sticky;top:0;z-index:60;background:var(--paper);
border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:0;flex:none;min-height:44px}
.logo-lozenge{
display:flex;align-items:center;background:var(--logo-plate);
padding:9px 14px;border-radius:7px;color:var(--white);
}
.logo-lozenge svg{height:22px;aspect-ratio:356/52;width:auto;display:block;fill:currentColor}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{
font-size:.92rem;font-weight:500;color:var(--ink-soft);padding:11px 14px;
border-radius:6px;transition:color var(--t),background var(--t);position:relative;
min-height:44px;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a.active{color:var(--accent);font-weight:600}
.nav-links a.active::after{
content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
background:var(--accent-2);border-radius:2px;
}
/* practice dot that prefixes the two practice nav items */
.nav-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;margin-right:8px;vertical-align:baseline}
.nav-dot.is-con{background:var(--con)}
.nav-dot.is-adv{background:var(--adv)}
.nav-links a{display:inline-flex;align-items:center}
.mm-links a{display:flex;align-items:center}
.mm-links .nav-dot{width:11px;height:11px;margin-right:13px}
/* tablet fallback: one "Services" dropdown carrying the same two practices */
.nav-drop{display:none;position:relative}
.nav-drop-btn{
display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);
font-size:.92rem;font-weight:500;color:var(--ink-soft);background:none;border:0;
padding:9px 14px;border-radius:6px;cursor:pointer;transition:color var(--t);
}
.nav-drop-btn svg{width:14px;height:14px;transition:transform var(--t)}
.nav-drop-btn:hover{color:var(--accent)}
.nav-drop-btn[aria-expanded="true"],.nav-drop-btn.active{color:var(--accent);font-weight:600}
.nav-drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-drop-menu{
position:absolute;top:calc(100% + 8px);left:0;min-width:266px;list-style:none;
background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:6px;
box-shadow:0 22px 44px -24px rgba(21,41,77,.4);display:none;z-index:70;
}
.nav-drop.open .nav-drop-menu{display:block}
.nav-drop-menu a{display:flex;align-items:center;padding:11px 13px;border-radius:7px;font-size:.92rem;font-weight:500;color:var(--ink-soft)}
.nav-drop-menu a:hover{background:var(--field);color:var(--accent)}
@media (max-width:1140px){
.nav-practice{display:none}
.nav-drop{display:block}
}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:11px 20px;font-size:.9rem}
.burger{
display:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:7px;
background:var(--white);cursor:pointer;align-items:center;justify-content:center;
}
.burger span{display:block;width:19px;height:2px;background:var(--accent);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--accent)}
.burger span::before{top:-6px}.burger span::after{top:6px}
/* mobile overlay menu */
/* The links are taller than a short iPhone screen, so the overlay scrolls
inside itself. While closed it is also hidden, so nothing it holds can be
drawn over the header or catch a tap meant for the burger. */
.mobile-menu{
position:fixed;inset:0;z-index:100;background:var(--accent-deep);
display:flex;flex-direction:column;
padding:max(26px,env(safe-area-inset-top)) clamp(22px,7vw,40px) max(26px,env(safe-area-inset-bottom));
overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
visibility:hidden;transform:translateY(-100%);transition:transform .35s ease,visibility 0s linear .35s;
}
.mobile-menu.open{visibility:visible;transform:translateY(0);transition:transform .35s ease,visibility 0s}
.mm-top{display:flex;align-items:center;justify-content:space-between}
.mm-close{width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:7px;background:transparent;color:#fff;font-size:22px;cursor:pointer}
.mm-links{display:flex;flex-direction:column;gap:4px;margin-top:42px}
.mm-links a{
font-family:var(--font-head);font-size:clamp(1.3rem,4.2vh,1.7rem);font-weight:600;line-height:1.2;color:#fff;
padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.mm-links a em{color:var(--accent-2)}
.mm-foot{margin-top:auto;color:rgba(255,255,255,.6);font-size:.9rem;padding-top:24px}
/* page toggle */
.page{display:none;animation:fade .4s ease;padding:0}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* hero (bold, dark, animated) */
.hero{
position:relative;overflow:hidden;background:var(--accent-deep);color:#fff;
padding:clamp(48px,7vw,96px) 0 clamp(52px,7vw,104px);
}
.hero::after{
content:"";position:absolute;right:-12%;top:-22%;width:60vw;height:60vw;max-width:760px;max-height:760px;
background:radial-gradient(circle,rgba(232,96,28,.34),rgba(232,96,28,0) 62%);pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:center}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--accent-2);width:34px;height:2px}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{color:var(--accent-2)}
/* hero measure: the one place a cap belongs, held at the ~80ch guideline */
.hero .lead{color:rgba(255,255,255,.74);margin-bottom:32px;max-width:80ch}
/* two-column subpage hero: big headline left, lead right, fills full width */
.hero-split{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,64px);align-items:end}
.hero-split .hl-main{min-width:0}
.hero-split .hl-main h1{margin-bottom:0}
.hero-split .hl-aside{min-width:0;padding-bottom:6px}
.hero-split .hl-aside .lead{margin-bottom:0;max-width:44ch}
.hero-split .hl-aside .hero-actions{margin-top:26px}
@media (max-width:880px){.hero-split{grid-template-columns:1fr;gap:20px;align-items:start}}
.hero-copy{min-width:0}
/* the positioning line that used to sit under the hero cards. The cards were
a thinner duplicate of the practice cards directly below, so they went and
this stayed. */
.hero-note{font-size:.95rem;color:rgba(255,255,255,.6);margin:0;max-width:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:0}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
/* full-width stat strip anchoring the bottom of the hero */
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,5.5vw,70px);border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:1}
.hero-stats .hs{padding:clamp(22px,2.4vw,32px) clamp(18px,2.4vw,34px) 2px;position:relative}
/* three columns, six stats: the divider and the flush-left edge follow the
start of each row, not just the first cell. */
.hero-stats .hs + .hs::before{content:"";position:absolute;left:0;top:clamp(22px,2.4vw,32px);bottom:6px;width:1px;background:rgba(255,255,255,.14)}
.hero-stats .hs:nth-child(3n+1){padding-left:0}
.hero-stats .hs:nth-child(3n+1)::before{display:none}
.hero-stats .hs:nth-child(n+4){margin-top:14px;padding-top:clamp(20px,2.4vw,30px);border-top:1px solid rgba(255,255,255,.1)}
.hero-stats .hs:nth-child(n+4)::before{top:clamp(20px,2.4vw,30px)}
.hero-stats .n{font-family:var(--font-head);font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em}
.hero-stats .n em{color:var(--accent-2)}
.hero-stats .l{font-size:.83rem;color:rgba(255,255,255,.62);margin-top:11px;letter-spacing:.01em;max-width:22ch}
@media (max-width:680px){
.hero-stats{grid-template-columns:1fr 1fr}
.hero-stats .hs{padding-left:clamp(16px,5vw,26px)}
.hero-stats .hs:nth-child(odd){padding-left:0}
.hero-stats .hs:nth-child(odd)::before{display:none}
.hero-stats .hs:nth-child(n+3){margin-top:12px;padding-top:clamp(18px,5vw,24px);border-top:1px solid rgba(255,255,255,.1)}
}
/* build-in animation (reduced-motion safe, see media query) */
.bi{opacity:0;transform:translateY(26px);animation:bi .9s cubic-bezier(.16,.7,.3,1) forwards}
.bi-1{animation-delay:.05s}.bi-2{animation-delay:.16s}.bi-3{animation-delay:.27s}
.bi-4{animation-delay:.38s}.bi-5{animation-delay:.5s}
@keyframes bi{to{opacity:1;transform:none}}
.diagram .di{opacity:0;animation:di .7s ease forwards}
.diagram .di-1{animation-delay:.35s}.diagram .di-2{animation-delay:.55s}
.diagram .di-card{cursor:pointer;transition:transform var(--t)}
.diagram .di-card:hover rect:first-of-type{stroke:var(--accent-2)}
.diagram .di-card:hover{filter:drop-shadow(0 10px 24px rgba(232,96,28,.35))}
.diagram .di-card:focus{outline:none}
.diagram .di-card:focus-visible rect:first-of-type{stroke:var(--accent-2);stroke-width:2.5}
.diagram .di-3{animation-delay:.75s}.diagram .di-4{animation-delay:.95s}
@keyframes di{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* value strip (3 trust cards directly under hero) */
.value-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value-card{
display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--white);
border:1px solid var(--rule);border-radius:10px;padding:28px 26px;
border-top:4px solid var(--accent-2);transition:transform var(--t),box-shadow var(--t);
}
.value-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(21,41,77,.45)}
.value-card .ic{flex:none;width:46px;height:46px;border-radius:10px;background:var(--accent-2-tint);display:flex;align-items:center;justify-content:center}
.value-card .ic svg{width:24px;height:24px;stroke:var(--accent-2);fill:none;stroke-width:1.6}
.value-card h4{font-size:1.1rem;margin-bottom:0;color:var(--accent);font-family:var(--font-head)}
.value-card p{font-size:.94rem;color:var(--ink-soft);margin:0}
/* oversized ghost type accent */
/* (removed ghost text background per feedback) */
/* stat band */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.14);border-radius:12px;overflow:hidden}
.stat{background:var(--accent-deep);padding:30px 24px;text-align:left}
.stat .n{font-family:var(--font-head);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:700;color:#fff;line-height:1}
.stat .n em{color:var(--accent-2)}
.stat .l{margin-top:9px;font-size:.84rem;color:rgba(255,255,255,.7);letter-spacing:.02em}
/* card grid (one shared card language for all card families) */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{
--c:var(--accent-2);
--c-tint:var(--accent-2-tint);
background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--c);
border-radius:10px;padding:30px 28px 24px;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
display:flex;flex-direction:column;min-height:248px;position:relative;overflow:hidden;
}
.card-link:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(21,41,77,.5)}
.card .ic{width:46px;height:46px;border-radius:10px;background:var(--c-tint);display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1}
.card .ic svg{width:24px;height:24px;stroke:var(--c);fill:none;stroke-width:1.6}
.card h3{color:var(--accent);margin-bottom:9px;position:relative;z-index:1}
.card p{color:var(--ink-soft);font-size:.95rem;margin:0;position:relative;z-index:1}
.card .tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:1}
.tag{font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--accent);background:var(--accent-tint);border-radius:5px;padding:5px 10px}
.card .card-foot{
margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;
font-weight:600;font-size:.92rem;color:var(--c);align-self:flex-start;
transition:gap var(--t),color var(--t);position:relative;z-index:1;
}
.card .card-foot svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--t)}
.card-link:hover .card-foot{filter:brightness(.85)}
.card-link:hover .card-foot svg{transform:translateX(4px)}
.card .card-deco{
position:absolute;right:-22px;bottom:-22px;width:160px;height:160px;opacity:.12;
color:var(--c);pointer-events:none;z-index:0;
}
.card .card-deco svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
/* 5-hue rotation across any card grid. Brand-aligned palette: orange, navy-blue,
teal, amber, deep-orange. The 6th tile (Start an engagement / Request an
assessment) keeps its own accent. */
.grid .card:nth-child(5n+1){--c:#E8601C;--c-tint:rgba(232,96,28,.12)}
.grid .card:nth-child(5n+2){--c:#2E4D80;--c-tint:rgba(46,77,128,.12)}
.grid .card:nth-child(5n+3){--c:#2E8094;--c-tint:rgba(46,128,148,.12)}
.grid .card:nth-child(5n+4){--c:#B07418;--c-tint:rgba(176,116,24,.13)}
.grid .card:nth-child(5n+5){--c:#C44E14;--c-tint:rgba(196,78,20,.13)}
/* ---- MSP Partner Program -------------------------------------------------
The partner deck runs a blue to green ramp across its cards, with amber for
emphasis. Those are the deck's own values. Everything here is scoped to the
page so the two-color practice system elsewhere is untouched. */
#page-msp-program{--msp:#2F5597;--msp-deep:#1F3864;--msp-tint:rgba(47,85,151,.10)}
#page-msp-program .grid .card:nth-child(5n+1){--c:#2F5597;--c-tint:rgba(47,85,151,.12)}
#page-msp-program .grid .card:nth-child(5n+2){--c:#0487C0;--c-tint:rgba(4,135,192,.12)}
#page-msp-program .grid .card:nth-child(5n+3){--c:#1A8C99;--c-tint:rgba(26,140,153,.12)}
#page-msp-program .grid .card:nth-child(5n+4){--c:#548235;--c-tint:rgba(84,130,53,.12)}
#page-msp-program .grid .card:nth-child(5n+5){--c:#ED8E10;--c-tint:rgba(237,142,16,.13)}
#page-msp-program .cs-step{--cs:var(--msp);--cs-deep:var(--msp-deep)}
/* The deck gives each step and each section its own accent rather than one
color throughout, which is what makes it read as colorful. */
#page-msp-program .cs-steps .cs-step:nth-child(5n+1){--cs:#2F5597;--cs-deep:#1F3864}
#page-msp-program .cs-steps .cs-step:nth-child(5n+2){--cs:#0487C0;--cs-deep:#036490}
#page-msp-program .cs-steps .cs-step:nth-child(5n+3){--cs:#1A8C99;--cs-deep:#136873}
#page-msp-program .cs-steps .cs-step:nth-child(5n+4){--cs:#548235;--cs-deep:#3E6127}
#page-msp-program .cs-steps .cs-step:nth-child(5n+5){--cs:#ED8E10;--cs-deep:#B86D0B}
#page-msp-program .card .checklist li svg{stroke:var(--c)}
/* a faint wash of the deck blue instead of the site's neutral tint */
#page-msp-program .tinted{background:rgba(47,85,151,.055)}
#page-msp-program .dark{background:#1F3864}
/* each band's eyebrow takes the next color along, as the deck does */
#page-msp-program > section:nth-of-type(5n+1) .panel-eyebrow.is-msp{--msp:#2F5597;--msp-deep:#1F3864}
#page-msp-program > section:nth-of-type(5n+2) .panel-eyebrow.is-msp{--msp:#0487C0;--msp-deep:#036490}
#page-msp-program > section:nth-of-type(5n+3) .panel-eyebrow.is-msp{--msp:#1A8C99;--msp-deep:#136873}
#page-msp-program > section:nth-of-type(5n+4) .panel-eyebrow.is-msp{--msp:#548235;--msp-deep:#3E6127}
#page-msp-program > section:nth-of-type(5n+5) .panel-eyebrow.is-msp{--msp:#ED8E10;--msp-deep:#B86D0B}
#page-msp-program .hero h1 em{color:#ED8E10}
#page-msp-program .panel-eyebrow.is-msp{color:var(--msp-deep)}
#page-msp-program .panel-eyebrow.is-msp::before{background:var(--msp)}
/* two lanes, the partner's and ours, with a plus between them */
#page-msp-program .lanes{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:center}
#page-msp-program .lane{
background:var(--white);border:1px solid var(--rule);border-top:5px solid var(--lc);
border-radius:14px;padding:26px 28px 24px;height:100%;
}
#page-msp-program .lane.is-keep{--lc:var(--msp)}
#page-msp-program .lane.is-add{--lc:#548235}
#page-msp-program .lane-kick{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lc);display:inline-flex;align-items:center;gap:8px}
#page-msp-program .lane-kick::before{content:"";width:16px;height:2px;background:var(--lc);display:inline-block;flex:none}
#page-msp-program .lane h3{color:var(--accent);font-size:clamp(1.12rem,1.6vw,1.3rem);margin:10px 0 14px;letter-spacing:-.015em}
#page-msp-program .lane .checklist li svg{stroke:var(--lc)}
#page-msp-program .lane-plus{font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:var(--ink-mute);text-align:center}
@media (max-width:820px){
#page-msp-program .lanes{grid-template-columns:1fr}
#page-msp-program .lane-plus{padding:2px 0}
}
/* how a commission reaches the partner */
#page-msp-program .flowline{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
#page-msp-program .flow-node{
flex:1 1 180px;background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--msp);
border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;
font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:.98rem;
}
#page-msp-program .flow-node em{font-style:normal;font-family:var(--font-body);font-weight:400;font-size:.85rem;color:var(--ink-soft)}
#page-msp-program .flow-node.is-end{border-left-color:#548235}
#page-msp-program .flow-arrow{align-self:center;color:var(--ink-mute);font-size:1.1rem;flex:none}
@media (max-width:760px){
#page-msp-program .flowline{flex-direction:column}
#page-msp-program .flow-arrow{transform:rotate(90deg)}
}
/* practice split (two main services on home) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.practice{
--pc:var(--accent);--pc-deep:var(--accent-deep);--pc-tint:rgba(21,41,77,.07);--pc-tint-2:rgba(21,41,77,.14);
background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--pc);border-radius:14px;
padding:0;display:flex;flex-direction:column;position:relative;overflow:hidden;
transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
/* Site convention: orange = Consulting Group, blue = Technology Advisory Group. */
.practice.is-consulting{--pc:var(--con);--pc-deep:var(--con-deep);--pc-tint:var(--con-tint);--pc-tint-2:var(--con-tint-2)}
.practice.is-advisory{--pc:var(--adv);--pc-deep:var(--adv-deep);--pc-tint:var(--adv-tint);--pc-tint-2:var(--adv-tint-2)}
.practice:hover{transform:translateY(-4px);box-shadow:0 28px 56px -32px rgba(21,41,77,.42);border-color:var(--pc)}
.practice:hover .practice-cta{gap:11px}
.practice:hover .practice-cta svg{transform:translateX(4px)}
.practice:hover .practice-head::before{background:var(--pc-tint-2)}
.practice:hover .practice-deco{opacity:.2;transform:scale(1.05)}
a.practice{text-decoration:none;color:inherit;cursor:pointer}
a.practice:focus-visible{outline:3px solid var(--pc);outline-offset:3px}
.practice-head{position:relative;padding:28px 34px 22px;border-bottom:1px solid var(--rule)}
.practice-head::before{content:"";position:absolute;inset:0;background:var(--pc-tint);transition:background var(--t);pointer-events:none}
.practice-head > *{position:relative;z-index:1}
.practice-head-top{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.practice-ic{flex:none;width:50px;height:50px;border-radius:13px;background:var(--pc);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 12px 24px -10px var(--pc)}
.practice-ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.practice .kick{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pc-deep);display:flex;align-items:center;gap:8px}
.practice .kick::before{content:"";width:18px;height:2px;background:var(--pc);display:inline-block}
.practice h3{color:var(--accent);font-size:1.65rem;margin:8px 0 10px;letter-spacing:-.015em;line-height:1.15}
.practice-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.practice-tag{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;letter-spacing:.01em;color:var(--accent);background:var(--white);border:1px solid var(--rule);border-radius:999px;padding:5px 11px}
.practice-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pc);flex:none}
.practice-body{padding:24px 34px 8px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1}
.practice-body > p{font-size:.97rem;color:var(--ink-soft);margin-bottom:22px;line-height:1.6}
.practice ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:0}
.practice li{display:flex;gap:11px;font-size:.93rem;color:var(--ink);align-items:flex-start}
.practice li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--pc-tint);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center;background-size:11px;margin-top:2px}
.practice.is-consulting li::before{background-image:url("data:image/svg+xml;utf8,")}
.practice.is-advisory li::before{background-image:url("data:image/svg+xml;utf8,")}
.practice li svg{display:none}
.practice-foot{margin-top:auto;padding:18px 34px 26px;border-top:1px solid var(--rule);background:var(--paper);position:relative;z-index:1}
.practice-cta{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--pc-deep);font-size:.96rem;transition:gap var(--t),color var(--t)}
.practice-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--t)}
.practice:hover .practice-cta{color:var(--pc)}
.practice-deco{position:absolute;right:-14px;bottom:-14px;width:160px;height:160px;opacity:.12;color:var(--pc);pointer-events:none;z-index:0;transition:opacity var(--t),transform var(--t)}
.practice-deco svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* due diligence: people / process / technology cards */
.dd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dd-card{--c:#E8601C;background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--c);border-radius:12px;padding:28px 28px 30px;display:flex;flex-direction:column}
.dd-grid .dd-card:nth-child(1){--c:#15294D}
.dd-grid .dd-card:nth-child(2){--c:#2E8094}
.dd-grid .dd-card:nth-child(3){--c:#E8601C}
.dd-ic{flex:none;width:50px;height:50px;border-radius:13px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -10px var(--c)}
.dd-ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dd-card h3{color:var(--accent);font-size:1.32rem;margin:16px 0 16px;letter-spacing:-.015em}
.dd-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.dd-list li{display:flex;gap:11px;font-size:.92rem;color:var(--ink);line-height:1.5;align-items:flex-start}
.dd-list li::before{content:"";flex:none;width:17px;height:17px;margin-top:2px;background:var(--c);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.acc-body .inner p + p{margin-top:12px}
.acc-body .inner strong{color:var(--accent);font-weight:600}
@media (max-width:880px){.dd-grid{grid-template-columns:1fr}}
/* consulting services: numbered service breakdown */
.csvc{display:flex;flex-direction:column;gap:16px}
.csvc-row{--c:#E8601C;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,30px);align-items:center;background:var(--white);border:1px solid var(--rule);border-left:5px solid var(--c);border-radius:14px;padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,36px);transition:transform var(--t),box-shadow var(--t)}
.csvc-row:nth-child(1){--c:#E8601C}
.csvc-row:nth-child(2){--c:#2E4D80}
.csvc-row:nth-child(3){--c:#2E8094}
.csvc-row:nth-child(4){--c:#B07418}
.csvc-row:nth-child(5){--c:#C44E14}
.csvc-num{flex:none;width:clamp(48px,5vw,62px);height:clamp(48px,5vw,62px);border-radius:15px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:clamp(1.4rem,2vw,1.8rem);box-shadow:0 12px 24px -10px var(--c)}
.csvc-body h3{color:var(--accent);font-size:clamp(1.2rem,1.7vw,1.45rem);margin:0 0 14px;letter-spacing:-.015em}
.csvc-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:9px 24px;margin:0}
.csvc-list li{position:relative;padding-left:20px;font-size:.93rem;color:var(--ink);line-height:1.4}
.csvc-list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--c)}
@media (max-width:680px){
.csvc-row{gap:16px;align-items:start}
.csvc-list{grid-template-columns:1fr}
}
/* comparison */
/* difference table. Green-for-good and red-for-bad is the generic pattern and
neither color is in this palette. The comparison here is specific versus
generic, so T Advisors runs in the brand navy as one continuous tinted
column, and the generalist side is deliberately plain and gray. A dash
rather than a cross: the point is what is absent, not what is wrong. */
.vs{margin-top:34px;background:var(--white);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.vs-row{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.19fr) minmax(0,1.19fr);border-top:1px solid var(--rule)}
.vs-row:first-child{border-top:0}
.vs-dim{
display:flex;align-items:center;padding:20px clamp(18px,2.2vw,26px);
font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--accent);background:var(--white);
}
.vs-cell{display:flex;align-items:flex-start;gap:13px;padding:20px clamp(18px,2.2vw,26px)}
.vs-cell.is-ta{background:rgba(46,77,128,.10);border-left:1px solid var(--rule)}
.vs-cell.is-gen{border-left:1px solid var(--rule)}
.vs-cell p{margin:0;font-size:.95rem;line-height:1.5}
.vs-cell.is-ta p{color:var(--ink)}
.vs-cell.is-gen p{color:var(--ink-soft)}
.vs-mark{
flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
justify-content:center;margin-top:1px;
}
.vs-mark svg{width:13px;height:13px}
.vs-cell.is-ta .vs-mark{background:var(--accent-2);color:#fff;box-shadow:0 6px 14px -6px rgba(232,96,28,.8)}
.vs-cell.is-gen .vs-mark{background:var(--field);border:1px solid var(--rule);color:var(--ink-mute)}
/* header row: the two sides named once, at the top of their own columns */
.vs-head .vs-cell{padding-top:16px;padding-bottom:16px}
.vs-head .vs-cell.is-ta{background:var(--accent);border-left-color:var(--accent);box-shadow:inset 0 4px 0 0 var(--accent-2)}
.vs-head .vs-cell.is-gen{background:var(--field)}
.vs-col-name{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.vs-head .is-ta .vs-col-name{color:#fff}
.vs-head .is-gen .vs-col-name{color:var(--ink-mute)}
.vs-mini{display:none}
@media (max-width:820px){
/* one block per row, the two sides stacked and labeled */
.vs-row{grid-template-columns:1fr}
.vs-head{display:none}
.vs-dim{background:var(--white);border-bottom:1px solid var(--rule)}
.vs-cell{border-left:0;flex-wrap:wrap}
.vs-cell.is-gen{border-top:1px solid var(--rule)}
.vs-mini{
display:block;flex:1 0 auto;font-size:.68rem;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-mute);align-self:center;
}
.vs-cell p{flex:1 0 100%;margin-top:9px}
}
/* practice chooser (services). Not a toggle: both practices are on the page,
so each card says what that practice actually covers and moves you to it. */
.pchoose{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pcard{
--pc:var(--con);--pc-deep:var(--con-deep);--pc-tint:var(--con-tint);
display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);
border-top:5px solid var(--pc);border-radius:14px;padding:24px 26px 22px;
text-decoration:none;transition:transform var(--t),box-shadow var(--t);
}
.pcard.is-con{--pc:var(--con);--pc-deep:var(--con-deep);--pc-tint:var(--con-tint)}
.pcard.is-adv{--pc:var(--adv);--pc-deep:var(--adv-deep);--pc-tint:var(--adv-tint)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 26px 52px -30px rgba(21,41,77,.42)}
.pcard:focus-visible{outline:3px solid var(--pc-deep);outline-offset:3px}
.pcard-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pcard-dot{width:10px;height:10px;border-radius:50%;background:var(--pc);flex:none}
.pcard-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-deep)}
.pcard-title{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--accent);letter-spacing:-.02em;line-height:1.2;margin-bottom:16px}
.pcard-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:0 0 18px;padding:0}
.pcard-list li{position:relative;padding-left:17px;font-size:.9rem;color:var(--ink);line-height:1.35}
.pcard-list li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--pc)}
.pcard-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--pc-deep)}
.pcard-go svg{width:15px;height:15px;transition:transform var(--t)}
.pcard:hover .pcard-go svg{transform:translateY(3px)}
@media (max-width:760px){
.pchoose{grid-template-columns:1fr;gap:16px}
}
@media (max-width:420px){
.pcard-list{grid-template-columns:1fr}
}
/* practice eyebrow above each panel's heading */
.panel-eyebrow{
display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;
letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px;
}
.panel-eyebrow::before{content:"";width:22px;height:2px;background:currentColor;display:inline-block;flex:none}
.panel-eyebrow.is-con{color:var(--con-deep)}
.panel-eyebrow.is-adv{color:var(--adv-deep)}
/* accordion */
.acc{display:flex;flex-direction:column;gap:14px}
.acc-item{
background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--accent-2);
border-radius:8px;overflow:hidden;
}
.acc-head{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:22px 26px;background:none;border:none;cursor:pointer;text-align:left;
font-family:var(--font-head);font-weight:600;font-size:1.12rem;color:var(--accent);
}
.acc-head .plus{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent-2);position:relative;transition:transform var(--t)}
.acc-head .plus::before,.acc-head .plus::after{content:"";position:absolute;background:var(--accent-2);left:50%;top:50%}
.acc-head .plus::before{width:11px;height:1.6px;transform:translate(-50%,-50%)}
.acc-head .plus::after{width:1.6px;height:11px;transform:translate(-50%,-50%);transition:opacity var(--t)}
.acc-item.open .acc-head .plus{transform:rotate(180deg)}
.acc-item.open .acc-head .plus::after{opacity:0}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc-body .inner{padding:0 26px 26px;color:var(--ink-soft);font-size:.96rem;columns:2;column-gap:48px}
.acc-body .inner p{max-width:none;break-inside:avoid}
/* a one-paragraph answer spans the box instead of sitting in the left column */
.acc-body .inner:has(> p:only-child){columns:1}
@media (max-width:760px){.acc-body .inner{columns:1}}
/* Engagement flow: 4-step process diagram */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.flow::before{content:"";position:absolute;left:24px;right:24px;top:38px;height:2px;background:linear-gradient(90deg,var(--accent-2-tint),var(--accent-2) 30%,var(--accent-2) 70%,var(--accent-2-tint));z-index:0;border-radius:2px}
.flow-step{position:relative;z-index:1;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.flow-step-top{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.flow-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.86rem;letter-spacing:-.005em;box-shadow:0 0 0 5px var(--white),0 0 0 7px var(--accent-2-tint),0 6px 14px -6px rgba(21,41,77,.5)}
.flow-ic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--accent-2-tint);color:var(--accent-2);display:flex;align-items:center;justify-content:center;margin-left:auto}
.flow-ic svg{width:18px;height:18px}
.flow-step h3{color:var(--accent);font-size:1rem;letter-spacing:-.005em;line-height:1.25;margin:8px 0 0}
.flow-step p{color:var(--ink-soft);font-size:.9rem;line-height:1.55;margin:0}
@media (max-width:1080px){
.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow::before{display:none}
}
@media (max-width:560px){
.flow{grid-template-columns:1fr}
}
/* About: one bench, two branches. The two practices are the structure of the
firm, so they get a section split down the middle rather than two sentences
in a paragraph. Color follows the sitewide convention. */
.branches{background:var(--white)}
.branch-split{
display:grid;grid-template-columns:1fr 1fr;gap:0;
border:1px solid var(--rule);border-radius:16px;overflow:hidden;
}
.branch{
--pc:var(--con);--pc-deep:var(--con-deep);--pc-tint:var(--con-tint);
display:flex;flex-direction:column;padding:clamp(26px,3.2vw,38px);
background:var(--pc-tint);border-top:6px solid var(--pc);
}
.branch.is-con{--pc:var(--con);--pc-deep:var(--con-deep);--pc-tint:var(--con-tint)}
.branch.is-adv{--pc:var(--adv);--pc-deep:var(--adv-deep);--pc-tint:var(--adv-tint);border-left:1px solid var(--rule)}
.branch-kick{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-deep)}
.branch-dot{width:9px;height:9px;border-radius:50%;background:var(--pc);flex:none}
.branch h3{color:var(--accent);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;margin:10px 0 20px;line-height:1.14}
.branch-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 18px;margin:0 0 24px}
.branch-facts dt{
font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--pc-deep);padding-top:3px;
}
.branch-facts dd{margin:0;font-size:.97rem;color:var(--ink);line-height:1.5}
.branch-go{
margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
font-weight:600;font-size:.95rem;color:#fff;background:var(--pc-deep);
border-radius:7px;padding:12px 20px;transition:background var(--t);
}
.branch-go svg{width:16px;height:16px;flex:none;transition:transform var(--t)}
.branch-go:hover{background:var(--pc)}
.branch-go:hover svg{transform:translateX(4px)}
.branch-go:focus-visible{outline:3px solid var(--pc-deep);outline-offset:3px}
.branch-foot{
margin-top:20px;text-align:center;font-size:.95rem;color:var(--ink-soft);max-width:none;
}
@media (max-width:820px){
.branch-split{grid-template-columns:1fr}
.branch.is-adv{border-left:0}
.branch-go{align-self:stretch;justify-content:center}
.branch-foot{text-align:left}
}
@media (max-width:420px){
.branch-facts{grid-template-columns:1fr;gap:4px 0}
.branch-facts dd{margin-bottom:8px}
}
/* a lone Who-we-are card spans the row instead of sitting in half of it */
.who-grid.is-solo{grid-template-columns:1fr}
.who-grid.is-solo .who-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.who-grid.is-solo .who-art{border-bottom:0;border-right:1px solid var(--rule);height:100%}
@media (max-width:820px){
.who-grid.is-solo .who-card{grid-template-columns:1fr}
.who-grid.is-solo .who-art{border-right:0;border-bottom:1px solid var(--rule)}
}
/* About page: Who we are / Who we serve */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.who-card{background:var(--white);border:1px solid var(--rule);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t)}
.who-art{position:relative;background:var(--accent-2-tint);padding:clamp(22px,3vw,32px);overflow:hidden;border-bottom:1px solid var(--rule)}
.who-card-b .who-art{background:var(--accent-tint)}
.who-art svg{width:100%;height:auto;display:block;fill:none;stroke:var(--accent-2-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 12px rgba(196,78,20,.18))}
.who-card-b .who-art svg{stroke:var(--accent);filter:drop-shadow(0 6px 12px rgba(21,41,77,.18))}
.who-art svg .who-fill{fill:currentColor;stroke:none}
.who-art svg .who-soft{stroke-dasharray:4 3;opacity:.55;stroke-width:1.5}
.who-art svg .who-rect{fill:rgba(232,96,28,.12);stroke:var(--accent-2)}
.who-art svg .who-rect-alt{fill:rgba(21,41,77,.12);stroke:var(--accent)}
.who-art svg .who-rect-label{fill:var(--accent-2-deep);letter-spacing:.06em}
.who-art svg .who-rect-label-alt{fill:var(--accent);letter-spacing:.06em}
.who-art svg .who-team{fill:#fff;stroke:var(--accent);stroke-width:2.4}
.who-art svg .who-team-label{fill:var(--accent)}
.who-art svg .who-team-label-accent{fill:var(--accent-2)}
.who-copy{padding:clamp(22px,2.6vw,30px) clamp(22px,2.8vw,32px) clamp(24px,3vw,34px);display:flex;flex-direction:column}
.who-copy h2{font-size:clamp(1.6rem,2.4vw,2.05rem);line-height:1.12;margin:8px 0 14px;letter-spacing:-.015em}
.who-copy p{color:var(--ink-soft);font-size:1rem;line-height:1.6}
.who-copy p + p{margin-top:12px}
.who-copy strong{color:var(--accent);font-weight:700}
@media (max-width:880px){
.who-grid{grid-template-columns:1fr}
}
/* Who is T Advisors */
.wta-section{position:relative;overflow:hidden}
.wta-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);align-items:start;position:relative;z-index:1}
.wta-copy h2{font-size:clamp(1.85rem,2.8vw,2.5rem);max-width:14em;line-height:1.1}
.wta-copy p{margin-top:18px;max-width:34em}
.wta-values{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid var(--rule);padding-top:clamp(28px,3.5vw,40px);position:relative;z-index:1}
.wta-value{display:flex;align-items:flex-start;gap:14px}
.wta-value .ic{flex:none;width:38px;height:38px;border-radius:9px;background:var(--accent-2-tint);color:var(--accent-2);display:flex;align-items:center;justify-content:center}
.wta-value .ic svg{width:20px;height:20px}
.wta-value h4{color:var(--accent);font-size:.98rem;letter-spacing:-.005em;margin-bottom:4px;line-height:1.25}
.wta-value p{font-size:.88rem;color:var(--ink-soft);margin:0;line-height:1.5}
.wta-why{margin-top:0}
.wta-why h3{color:var(--accent);font-size:clamp(1.25rem,1.8vw,1.5rem);margin-bottom:10px;letter-spacing:-.015em}
.wta-why p{color:var(--ink-soft);line-height:1.62}
@media (max-width:880px){
.wta-grid{grid-template-columns:1fr;gap:30px}
.wta-values{grid-template-columns:1fr;gap:18px}
}
/* core competency sub-hero band */
.corecomp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.corecomp-head h2{margin-top:12px;max-width:15em}
.corecomp-lead{color:var(--ink-soft);font-size:clamp(1.05rem,1.4vw,1.22rem)}
@media (max-width:880px){.corecomp-grid{grid-template-columns:1fr;gap:18px}.corecomp-head h2{max-width:none}}
/* intelligence platform showcase */
.plat-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,68px);align-items:center}
.plat-copy p{color:rgba(255,255,255,.74);margin-top:16px}
.plat-copy .hero-actions{margin-top:28px}
.plat-badge{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.82rem;color:rgba(255,255,255,.6)}
.plat-badge svg{width:16px;height:16px;stroke:var(--accent-2);fill:none;stroke-width:1.8}
.plat-frame{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 44px 100px -44px rgba(0,0,0,.85);background:#0E1B33;transition:transform var(--t)}
.plat-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1)}
.plat-bar span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2)}
.plat-bar span:first-child{background:var(--accent-2)}
.plat-frame img{display:block;width:100%;height:auto}
@media (max-width:880px){.plat-grid{grid-template-columns:1fr;gap:28px}.plat-copy p{max-width:none}}
/* LinkedIn CTA strip */
.li-cta{margin-top:38px;padding:24px 28px;background:var(--accent-tint);border:1px solid var(--rule);border-left:4px solid var(--accent-2);border-radius:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.li-cta-left{display:flex;align-items:center;gap:18px;min-width:0}
.li-mark{flex:none;width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -10px rgba(10,102,194,.55)}
.li-mark svg{width:100%;height:100%;border-radius:10px;display:block}
.li-cta-title{font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--accent);margin-bottom:4px;letter-spacing:-.01em}
.li-cta-sub{font-size:.94rem;color:var(--ink-soft);max-width:48em}
@media (max-width:640px){
.li-cta{padding:22px}
.li-cta-left{gap:14px}
.li-mark{width:42px;height:42px}
}
/* projects / list rows */
/* per-card hue rotation across the six engagement cards */
/* selected engagements list */
.eng-list{display:flex;flex-direction:column;gap:14px}
/* The engagement is confidential, so the card expands rather than links out.
One practice color, not the six unrelated ones it used to cycle through. */
.eng-item{--c:var(--con);--c-tint:var(--con-tint);--cs:var(--con);--cs-deep:var(--con-deep);padding:0;overflow:hidden}
.eng-item.expanded{box-shadow:0 22px 44px -28px rgba(21,41,77,.32)}
.eng-card{
display:grid;grid-template-columns:240px minmax(0,1fr) auto auto;align-items:center;
gap:24px;padding:20px 24px;background:transparent;border:0;cursor:pointer;width:100%;
text-align:left;font-family:inherit;color:inherit;
}
.eng-card:hover .eng-codename{color:var(--c)}
.eng-card:focus-visible{outline:3px solid var(--c);outline-offset:-3px;border-radius:12px}
.eng-codename{font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:1.08rem;display:flex;align-items:center;gap:11px;letter-spacing:-.005em;transition:color var(--t)}
.eng-dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 4px var(--c-tint)}
.eng-summary{color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.eng-meta{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.eng-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--c-tint);color:var(--c);transition:transform var(--t),background var(--t),color var(--t);flex:none}
.eng-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.eng-item.expanded .eng-toggle{background:var(--c);color:#fff;transform:rotate(180deg)}
.eng-detail{border-top:1px solid var(--rule);background:var(--paper)}
.eng-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.eng-col{background:var(--paper);padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.eng-col-head{display:flex;align-items:center}
.eng-col-num{font-family:var(--font-head);font-weight:700;color:var(--c,var(--accent-2));font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.eng-col-num::before{content:"";width:18px;height:2px;background:currentColor;display:inline-block}
.eng-col p{font-size:.93rem;color:var(--ink);margin:0;line-height:1.55}
@media (max-width:880px){
.eng-card{grid-template-columns:1fr auto;gap:8px 18px}
.eng-summary{grid-column:1 / -1;order:3}
.eng-meta{grid-row:1;grid-column:1;order:2;align-self:flex-start}
.eng-codename{grid-row:1;grid-column:1;order:1}
.eng-toggle{grid-row:1;grid-column:2;order:4;align-self:center}
.eng-cols{grid-template-columns:1fr}
}
/* quote / case study */
.casebox{background:var(--white);border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -44px rgba(21,41,77,.35)}
.casebox .top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;border-left:5px solid var(--accent-2)}
.casebox .top-body{padding:clamp(32px,3.6vw,46px)}
.casebox h3{color:var(--accent);margin-bottom:10px;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.18;max-width:24em}
.casebox .meta{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:16px;display:inline-flex;align-items:center;gap:9px}
.casebox .meta::before{content:"";width:18px;height:2px;background:var(--accent-2)}
.casebox .top-body > p{color:var(--ink-soft);max-width:36em;line-height:1.65}
.casebox .pull{
position:relative;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
color:#fff;padding:clamp(32px,3.6vw,46px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.casebox .pull::before{
content:"\201C";position:absolute;top:-22px;right:18px;font-family:Georgia,serif;
font-size:14rem;line-height:1;color:var(--accent-2);opacity:.35;pointer-events:none;
}
.casebox blockquote{
font-family:var(--font-head);font-weight:500;font-size:clamp(1.05rem,1.4vw,1.32rem);
color:#fff;line-height:1.45;letter-spacing:-.01em;max-width:38em;position:relative;z-index:1;
}
.casebox cite{
display:flex;align-items:center;gap:14px;margin-top:24px;font-style:normal;
font-size:.9rem;color:rgba(255,255,255,.78);position:relative;z-index:1;
}
.casebox cite::before{
content:"ML";width:42px;height:42px;border-radius:50%;flex:none;
background:linear-gradient(135deg,var(--accent-2),var(--accent-2-deep));
display:inline-flex;align-items:center;justify-content:center;
color:#fff;font-family:var(--font-head);font-weight:700;font-size:.86rem;letter-spacing:.04em;
box-shadow:0 6px 16px -6px rgba(232,96,28,.6);
}
.casebox cite > span{display:block}
.casebox cite b{color:#fff;font-weight:700;display:block;font-size:1rem;letter-spacing:-.005em;line-height:1.25}
.casebox .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.casebox .col{background:var(--white);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.casebox .col-head{display:flex;align-items:center;gap:10px}
.casebox .col-head .col-ic{width:30px;height:30px;border-radius:8px;background:var(--accent-2-tint);color:var(--accent-2);display:flex;align-items:center;justify-content:center;flex:none}
.casebox .col-head .col-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.casebox .col h4{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0}
.casebox .col p{font-size:.93rem;color:var(--ink-soft);margin:0;line-height:1.55}
@media (max-width:880px){
.casebox .top{grid-template-columns:1fr}
.casebox .pull::before{font-size:11rem;top:-14px;right:6px}
}
/* client split: trusted service providers + private equity, two boxes */
.client-split{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,28px)}
.client-box{
background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--accent-2);
border-radius:14px;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;
position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.client-box.is-pe{border-top-color:var(--accent)}
.client-box-kick{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);display:inline-flex;align-items:center;gap:8px}
.client-box.is-pe .client-box-kick{color:var(--accent)}
.client-box-kick::before{content:"";width:18px;height:2px;background:currentColor;display:inline-block}
.client-box h3{color:var(--accent);font-size:1.32rem;margin:11px 0 7px;letter-spacing:-.015em}
.client-box > p{font-size:.93rem;color:var(--ink-soft);margin:0 0 22px;line-height:1.55}
.client-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;margin-top:auto}
.client-logo{background:var(--white);border:1px solid var(--rule);border-radius:10px;min-height:112px;display:flex;align-items:center;justify-content:center;padding:14px;transition:transform var(--t),box-shadow var(--t)}
/* Same rule as the partner wall: scale the mark to the tile, and let
max-height hold back a square logo so it does not dwarf a wordmark. */
.client-logo img{width:100%;height:auto;max-height:68px;object-fit:contain}
.client-logo.is-name{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--accent);text-align:center;line-height:1.25}
.client-box.is-pe .client-logo.is-name{color:var(--accent-deep)}
@media (max-width:520px){.client-logos{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}
/* partner logo wall */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.plogo{
background:var(--white);border:1px solid var(--rule);border-radius:10px;
padding:18px 16px;display:flex;flex-direction:column;align-items:center;
gap:0;transition:transform var(--t),box-shadow var(--t);min-height:104px;
}
.plogo-img{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
/* The marks are trimmed to their own edges, so they scale to the tile width
rather than sitting at their intrinsic size. max-height keeps a tall mark
from towering over a wide one; object-fit centers whichever is clamped. */
.plogo-img img{width:100%;height:auto;max-height:76px;object-fit:contain}
/* leadership monogram */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.team-solo{grid-template-columns:1fr}
/* A solo card spans the row, so the site-wide p{max-width:62ch} leaves the
copy stopping half way across it. Scoped here rather than lifted globally. */
.team-solo .pbody p{max-width:none}
.person{background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--accent-2);border-radius:12px;padding:36px 36px;display:flex;gap:28px;align-items:flex-start;transition:transform var(--t),box-shadow var(--t)}
.person .photo{flex:none;width:148px;height:148px;border-radius:16px;object-fit:cover;object-position:top center;background:var(--field);border:1px solid var(--rule)}
.person h3,.person h2{font-size:1.32rem;margin-bottom:2px}
.person h3 a:hover{color:var(--accent-2)}
.person .pbody > p + p{margin-top:13px}
.person .role{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin-bottom:13px}
.person .pbody{min-width:0}
.person p{font-size:.95rem;color:var(--ink-soft);margin-bottom:0;line-height:1.6}
.person-more{max-height:0;overflow:hidden;transition:max-height .45s ease}
.person.open .person-more{max-height:420px}
.person-more p{margin-top:13px}
.person-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px}
.bio-toggle{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:.92rem;color:var(--accent-2);display:inline-flex;align-items:center;gap:7px;transition:color var(--t);min-height:44px;padding:13px 0;margin:-13px 0}
.bio-toggle:hover{color:var(--accent-2-deep)}
.bio-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform var(--t)}
.person.open .bio-toggle svg{transform:rotate(180deg)}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,64px);align-items:start}
.contact-card{background:var(--white);border:1px solid var(--rule);border-radius:16px;padding:clamp(28px,3.4vw,42px);box-shadow:0 30px 70px -44px rgba(21,41,77,.4);position:relative;overflow:hidden}
.contact-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent-2),var(--accent-2-deep))}
.contact-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.contact-card-head .ic{flex:none;width:44px;height:44px;border-radius:10px;background:var(--accent-2-tint);display:flex;align-items:center;justify-content:center;color:var(--accent-2)}
.contact-card-head .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-card-head h3{color:var(--accent);font-size:1.18rem;margin-bottom:4px;letter-spacing:-.01em}
.contact-card-head p{font-size:.92rem;color:var(--ink-soft);margin:0}
form .field{margin-bottom:18px;position:relative}
form label{display:block;font-size:.74rem;font-weight:700;color:var(--ink-mute);margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase}
form .req{color:var(--accent-2);margin-left:3px}
form input,form select,form textarea{
width:100%;font-family:var(--font-body);font-size:.98rem;color:var(--ink);
background:var(--field);border:1.5px solid transparent;border-radius:9px;padding:14px 16px;
transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
form input::placeholder,form textarea::placeholder{color:var(--ink-mute);opacity:.7}
form input:hover:not(:focus),form select:hover:not(:focus),form textarea:hover:not(:focus){background:#ECEDE7}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--accent-2);background:var(--white);box-shadow:0 0 0 4px var(--accent-2-tint)}
form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
form textarea{resize:vertical;min-height:130px;line-height:1.55}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.captcha{display:flex;align-items:center;gap:14px;background:var(--accent-tint);border:1px solid var(--rule);border-radius:10px;padding:14px 18px;margin-bottom:22px}
.captcha label{margin:0;color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:.92rem;flex:1}
.captcha input{width:96px;text-align:center;font-weight:600;background:var(--white)}
form .submit-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
form .submit-row .btn{padding:15px 28px}
.form-meta{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-mute);font-weight:500}
.form-meta svg{width:16px;height:16px;stroke:var(--accent-2);fill:none;stroke-width:1.8;flex:none}
.form-note{font-size:.82rem;color:var(--ink-mute);margin-top:14px;line-height:1.5}
.form-ok{display:none;background:var(--good-tint);border:1px solid var(--good);color:var(--good-deep);border-radius:10px;padding:16px 20px;font-size:.95rem;font-weight:600;margin-top:18px}
.form-ok::before{content:"\2713";display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:var(--good);color:#fff;text-align:center;margin-right:10px;font-weight:700}
.form-ok.show{display:block}
.form-err{display:none;background:var(--bad-tint);border:1px solid var(--bad);color:var(--bad-deep);border-radius:10px;padding:16px 20px;font-size:.95rem;font-weight:600;margin-top:18px}
.form-err::before{content:"!";display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:var(--bad);color:#fff;text-align:center;margin-right:10px;font-weight:700}
.form-err.show{display:block}
.contact-side{display:flex;flex-direction:column;gap:14px}
.info-block{position:relative;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:20px 22px;display:flex;gap:14px;align-items:flex-start;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.info-block .ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--accent-2-tint);display:flex;align-items:center;justify-content:center;color:var(--accent-2);margin-bottom:0}
.info-block .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.info-block .body{min-width:0;flex:1}
.info-block h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px;font-weight:700}
.info-block a,.info-block p{color:var(--ink);font-size:.98rem;font-weight:500;line-height:1.5;display:inline-block}
.info-block a{min-height:44px;display:inline-flex;align-items:center;padding:10px 0;margin:-10px 0}
.info-block a:hover{color:var(--accent-2)}
.info-block.confidential{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);border-color:var(--accent-deep);color:#fff}
.info-block.confidential .ic{background:rgba(255,255,255,.14);color:#fff}
.info-block.confidential h4{color:rgba(255,255,255,.7)}
.info-block.confidential p{color:rgba(255,255,255,.92);font-weight:400;font-size:.93rem}
/* footer */
footer{background:var(--accent-deep);color:rgba(255,255,255,.66);padding:clamp(56px,7vw,84px) 0 32px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-brand .logo-lozenge{margin-bottom:20px}
.foot-brand p{font-size:.92rem;color:rgba(255,255,255,.6)}
.foot-col h5{font-family:var(--font-head);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col a{display:flex;align-items:center;min-height:44px;font-size:.92rem;padding:4px 0;color:rgba(255,255,255,.62);transition:color var(--t)}
.foot-col a:hover{color:var(--accent-2)}
.foot-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:28px;font-size:.84rem;color:rgba(255,255,255,.5)}
.foot-bot a{color:rgba(255,255,255,.5)}
.foot-bot a:hover{color:#fff}
.foot-social{width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:border-color var(--t),background var(--t)}
.foot-social:hover{border-color:var(--accent-2);background:rgba(232,96,28,.16)}
.foot-social svg{width:18px;height:18px;fill:rgba(255,255,255,.8)}
/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.reveal,.bi,.diagram .di{opacity:1!important;transform:none!important}
.page{animation:none}
}
/* responsive */
@media (max-width:1000px){
.hero-grid{grid-template-columns:1fr;gap:40px}
.split{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr;gap:40px}
.foot-grid{grid-template-columns:1fr 1fr;gap:32px 28px}
}
@media (max-width:820px){
.grid-3{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(2,1fr)}
.stats .stat:last-child{grid-column:1 / -1}
.rows{grid-template-columns:1fr}
.team{grid-template-columns:1fr}
.casebox .cols{grid-template-columns:1fr}
.logos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.value-strip{grid-template-columns:1fr}
.diagram{max-width:520px}
}
@media (max-width:900px){
.nav-links,.nav-cta .btn{display:none}
.burger{display:flex}
}
@media (max-width:680px){
body{font-size:16px}
.logo-lozenge svg{height:20px}
.grid-2,.grid-3{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
section{padding:52px 0}
.stats{grid-template-columns:1fr 1fr}
.logos{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.foot-grid{grid-template-columns:1fr}
.foot-bot{flex-direction:column;align-items:flex-start}
.person{flex-direction:column;gap:18px}
.frow{grid-template-columns:1fr}
}
@media (max-width:480px){
.hero-actions{flex-direction:column;align-items:stretch}
.hero-actions .btn{justify-content:center}
.logos{grid-template-columns:repeat(2,1fr)}
.casebox .top{padding:26px 22px}
}
/* ---- sub-page (service detail) ---- */
.sub-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:start}
.sub-art{position:relative;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:30px;box-shadow:0 22px 50px -32px rgba(21,41,77,.32)}
.sub-art .top-bar{position:absolute;left:30px;right:30px;top:0;height:5px;background:linear-gradient(90deg,var(--accent-2),var(--accent-2-deep));border-radius:0 0 4px 4px}
.sub-art svg{display:block;width:100%;height:auto}
.sub-art .cap{margin-top:18px;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);text-align:center}
.sub-body p+p{margin-top:14px}
.sub-body p{color:var(--ink-soft);font-size:1.02rem;max-width:34em}
.checklist{list-style:none;display:grid;gap:14px;margin:18px 0 24px}
.checklist li{display:flex;gap:12px;font-size:.97rem;color:var(--ink-soft)}
.checklist li svg{flex:none;width:20px;height:20px;stroke:var(--accent-2);fill:none;stroke-width:1.8;margin-top:3px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px}
.crumb a{color:var(--accent-2);transition:color var(--t);min-height:44px;display:inline-flex;align-items:center;padding:12px 0;margin:-12px 0}
.crumb a:hover{color:var(--accent-2-deep)}
/* the current page's crumb sits on the navy hero, so it takes the hero's muted white */
.hero .crumb [aria-current]{color:rgba(255,255,255,.74)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200}
.skip-link:focus{left:12px;top:12px}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.related a{display:block;padding:18px 20px;background:var(--white);border:1px solid var(--rule);border-radius:9px;border-left:3px solid var(--accent-2);transition:transform var(--t),box-shadow var(--t)}
.related a:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(21,41,77,.4);color:var(--accent)}
.related .rt{font-family:var(--font-head);font-weight:600;color:var(--accent);font-size:1rem}
/* ---- card link affordance ---- */
.card-link{cursor:pointer}
.card-link:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
/* branch rule: names which practice the work below it came from */
.branch-rule{
--pc:var(--con);--pc-deep:var(--con-deep);
background:var(--white);border-top:5px solid var(--pc);
padding:clamp(30px,3.6vw,44px) 0 clamp(20px,2.4vw,26px);
}
.branch-rule.is-con{--pc:var(--con);--pc-deep:var(--con-deep)}
.branch-rule.is-adv{--pc:var(--adv);--pc-deep:var(--adv-deep)}
.branch-rule-kick{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-deep)}
.branch-rule h2{color:var(--accent);font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-.02em;margin:10px 0 10px}
.branch-rule p{color:var(--ink-soft);max-width:none;margin:0}
.branch-rule .branch-dot{width:9px;height:9px;border-radius:50%;background:var(--pc);flex:none}
/* the two branch cards at the top of the Work page carry no bullet list */
.pchoose-slim .pcard-title{margin-bottom:14px}
/* practice badge inside an engagement row */
.eng-practice{
--pc:var(--con);--pc-deep:var(--con-deep);--pc-tint:var(--con-tint);
font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--pc-deep);background:var(--pc-tint);border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.eng-practice.is-con{--pc:var(--con);--pc-deep:var(--con-deep);--pc-tint:var(--con-tint)}
.eng-practice.is-adv{--pc:var(--adv);--pc-deep:var(--adv-deep);--pc-tint:var(--adv-tint)}
.eng-card{grid-template-columns:240px minmax(0,1fr) auto auto auto}
/* a linked engagement row: same shell, but it navigates instead of expanding */
@media (max-width:880px){
.eng-card{grid-template-columns:1fr auto}
.eng-practice{grid-row:2;grid-column:1;order:2;justify-self:start}
}
/* ---- case study pages (Technology Advisory Group client work) ----
Blue throughout, per the practice convention. The layout is shared by both
studies: hero + logo, stat strip, challenge / steps columns, status table,
highlight box, CTA, then the sibling study. */
.cs-crumb a{color:var(--adv-light)}
.cs-crumb a:hover{color:#fff}
/* These pages are Advisory work, so every eyebrow rule on them reads blue
rather than inheriting the site-default orange. */
.cs-page .eyebrow::before{background:var(--adv)}
.cs-page .lift .eyebrow,.cs-page .tinted .eyebrow{color:var(--adv-deep)}
.cs-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,56px);align-items:center}
.cs-hero .eyebrow{color:var(--adv-light)}
.cs-hero .eyebrow::before{background:var(--adv-light)}
.cs-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:16px}
.cs-hero .lead{margin-bottom:0}
.cs-logo{
flex:none;width:clamp(180px,20vw,240px);min-height:128px;display:flex;align-items:center;
justify-content:center;background:var(--white);border-radius:14px;padding:20px 24px;
box-shadow:0 22px 50px -30px rgba(0,0,0,.6);
}
.cs-logo img{max-height:84px;max-width:100%;width:auto;height:auto;object-fit:contain}
/* Until the client artwork lands the ![]()
404s; onerror reveals this name. */
.cs-logo .cs-logo-name{display:none;font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--accent);text-align:center;line-height:1.25}
.cs-logo.is-empty img{display:none}
.cs-logo.is-empty .cs-logo-name{display:block}
@media (max-width:760px){
.cs-hero{grid-template-columns:1fr;gap:26px}
.cs-logo{width:190px}
}
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cs-stat{background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--adv);border-radius:12px;padding:24px 22px;transition:transform var(--t),box-shadow var(--t)}
.cs-stat .cs-num{font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.025em}
.cs-stat .cs-lab{font-size:.88rem;color:var(--ink-soft);margin-top:10px;line-height:1.4}
@media (max-width:860px){.cs-stats{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.cs-stats{grid-template-columns:1fr}}
.cs-cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4.5vw,64px);align-items:start}
.cs-cols h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin-bottom:16px}
.cs-cols p{color:var(--ink-soft);max-width:none}
.cs-cols p + p{margin-top:13px}
.cs-quote{
margin-top:20px;padding:18px 22px;border-left:4px solid var(--adv);
background:var(--adv-tint);border-radius:0 8px 8px 0;font-style:italic;
color:var(--ink);font-size:.98rem;line-height:1.6;
}
.cs-steps{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0;counter-reset:cs}
.cs-step{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.2vw,24px);
background:var(--white);border:1px solid var(--rule);border-left:5px solid var(--cs,var(--adv));
border-radius:12px;padding:clamp(20px,2.4vw,26px) clamp(22px,2.8vw,30px);
transition:transform var(--t),box-shadow var(--t);
}
.cs-step-num{
flex:none;width:clamp(44px,4.6vw,54px);height:clamp(44px,4.6vw,54px);border-radius:14px;
background:var(--cs-deep,var(--adv-deep));color:#fff;display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.25rem);
box-shadow:0 12px 24px -10px var(--cs-deep,var(--adv-deep));
}
/* the client portal, shown as the client sees it */
.portal{margin:18px 0 2px;display:flex;flex-direction:column;gap:12px}
.portal img{
width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:12px;
box-shadow:0 26px 52px -34px rgba(21,41,77,.42);background:var(--white);
}
.portal figcaption{font-size:.84rem;color:var(--ink-soft);line-height:1.5}
.portal-kick{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--adv-deep)}
.portal-kick::before{content:"";width:16px;height:2px;background:var(--adv);display:inline-block;flex:none}
.cs-step h3{color:var(--accent);font-size:clamp(1.08rem,1.5vw,1.25rem);margin:0 0 9px;letter-spacing:-.015em}
.cs-step p{font-size:.95rem;color:var(--ink-soft);margin:0;line-height:1.6;max-width:none}
@media (max-width:900px){.cs-cols{grid-template-columns:1fr;gap:30px}}
.cs-table{background:var(--white);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.cs-table .cs-row{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);padding:20px clamp(22px,2.8vw,30px);border-top:1px solid var(--rule)}
.cs-table .cs-row:first-child{border-top:0}
.cs-key{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--adv-deep);display:flex;align-items:flex-start;gap:9px}
.cs-key::before{content:"";width:16px;height:2px;background:var(--adv);display:inline-block;flex:none;margin-top:.62em}
.cs-val{color:var(--ink);font-size:.98rem;line-height:1.55;max-width:none}
@media (max-width:680px){
.cs-table .cs-row{grid-template-columns:1fr;gap:8px}
}
.cs-highlight{
background:var(--adv-tint);border:1px solid var(--rule);border-left:5px solid var(--adv);
border-radius:12px;padding:clamp(24px,3vw,32px) clamp(26px,3.2vw,36px);margin-top:clamp(28px,3.4vw,40px);
}
.cs-highlight h3{color:var(--accent);font-size:clamp(1.15rem,1.7vw,1.4rem);margin:0 0 10px;letter-spacing:-.015em}
.cs-highlight p{color:var(--ink-soft);margin:0;max-width:none;line-height:1.65}
/* blue CTA banner, mirroring .eng-cta but in the Advisory color */
.cs-cta{background:var(--accent-deep);position:relative;overflow:hidden}
.cs-cta::before{content:"";position:absolute;right:-12%;top:-50%;width:50vw;height:50vw;max-width:640px;max-height:640px;background:radial-gradient(circle,rgba(59,130,196,.3),transparent 65%);pointer-events:none}
.cs-cta .eyebrow{color:var(--adv-light)}
.cs-cta .eyebrow::before{background:var(--adv-light)}
.cs-cta-btn{background:var(--adv-deep);color:#fff;border-color:var(--adv-deep)}
.cs-cta-btn:hover{background:var(--adv);border-color:var(--adv);color:#fff;transform:translateY(-2px)}
/* sibling case study card, also used on the services Advisory panel */
.cs-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* One card shell for every engagement on the site. .cs-card links to a case
study and lifts; .ocard is a static outcome; .eng-item expands in place. */
.cs-card,.ocard,.eng-item{
display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);
border-top:6px solid var(--cs,var(--adv));border-radius:14px;padding:26px 28px 24px;
transition:transform var(--t),box-shadow var(--t);
}
.ocard{--cs:var(--con);--cs-deep:var(--con-deep)}
.ocard p{font-size:.97rem;color:var(--ink);line-height:1.55;margin:0 0 16px}
.ocard .cs-tag{margin-top:auto;margin-bottom:0}
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.ocards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ocards{grid-template-columns:1fr}}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -32px rgba(21,41,77,.42)}
.cs-card:focus-visible{outline:3px solid var(--cs-deep,var(--adv-deep));outline-offset:3px}
/* the card takes the color of the practice that ran the engagement */
.cs-card.is-con{--cs:var(--con);--cs-deep:var(--con-deep)}
/* card header: the client's own mark, with the industry beside it */
.cs-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.cs-card-logo{
flex:none;display:flex;align-items:center;justify-content:center;
height:52px;padding:6px 12px;background:var(--white);
border:1px solid var(--rule);border-radius:9px;
}
.cs-card-logo img{height:38px;width:auto;max-width:150px;object-fit:contain;display:block}
.cs-card-top .cs-tag{margin-bottom:0}
@media (max-width:520px){
.cs-card-top{flex-direction:column;align-items:flex-start;gap:12px}
.cs-card-logo{height:48px}
}
.cs-tag{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-deep,var(--adv-deep));margin-bottom:11px;display:inline-flex;align-items:center;gap:8px}
.cs-tag::before{content:"";width:16px;height:2px;background:var(--cs,var(--adv));display:inline-block;flex:none}
.cs-card h3{color:var(--accent);font-size:clamp(1.2rem,1.7vw,1.45rem);margin:0 0 10px;letter-spacing:-.02em}
.cs-card > p{font-size:.95rem;color:var(--ink-soft);line-height:1.55;margin:0 0 18px;max-width:none}
.cs-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin:0 0 20px;padding:16px 0 0;border-top:1px solid var(--rule);list-style:none}
.cs-card-stats li{font-size:.85rem;color:var(--ink);line-height:1.35;position:relative;padding-left:15px}
.cs-card-stats li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--cs,var(--adv))}
.cs-card-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem;color:var(--cs-deep,var(--adv-deep));transition:gap var(--t)}
.cs-card-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--t)}
.cs-card:hover .cs-card-link svg{transform:translateX(4px)}
@media (max-width:760px){.cs-cards{grid-template-columns:1fr}}
/* dark strip under the two advisory case study cards */
.cs-strip{
display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);
margin-top:22px;background:var(--accent-deep);border-radius:12px;
padding:clamp(24px,2.8vw,30px) clamp(26px,3.2vw,34px);
}
.cs-strip-lead{font-family:var(--font-head);font-weight:700;color:#fff;font-size:1.08rem;letter-spacing:-.01em;margin:0;max-width:none}
.cs-strip p + p{margin-top:8px;font-size:.95rem;color:rgba(255,255,255,.72);max-width:none}
@media (max-width:760px){
.cs-strip{flex-direction:column;align-items:flex-start;gap:18px}
.cs-strip .btn{align-self:stretch;justify-content:center}
}
/* editorial section: a standing label beside running prose. The measure comes
from the grid column, not from a cap on the text. */
.story{
display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
gap:clamp(26px,4vw,64px);align-items:start;
padding:clamp(30px,3.6vw,46px) 0;border-top:1px solid var(--rule);
}
.story:first-of-type{border-top:0;padding-top:0}
.story-label{position:sticky;top:104px}
.story-label h2{font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.15;letter-spacing:-.02em;margin:0}
.story-body > p{font-size:1.04rem;line-height:1.72;color:var(--ink-soft);max-width:none}
.story-body > p + p{margin-top:16px}
.story-body strong{color:var(--accent);font-weight:600}
.story-pull{
border-left:4px solid var(--pc,var(--adv));background:var(--pc-tint,var(--adv-tint));
padding:18px 22px;border-radius:0 8px 8px 0;color:var(--ink)!important;
}
.story.is-con{--pc:var(--con);--pc-tint:var(--con-tint)}
.story.is-adv{--pc:var(--adv);--pc-tint:var(--adv-tint)}
@media (max-width:880px){
.story{grid-template-columns:1fr;gap:18px}
.story-label{position:static}
}
/* next case study: one link, not a section. With only two studies this can
never be a grid, so it does not pretend to be one. */
.cs-next{
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
padding:clamp(20px,2.4vw,26px) clamp(22px,2.8vw,30px);
background:var(--white);border:1px solid var(--rule);border-left:5px solid var(--adv);
border-radius:12px;text-decoration:none;transition:transform var(--t),box-shadow var(--t);
}
.cs-next:hover{transform:translateY(-2px);box-shadow:0 20px 44px -28px rgba(21,41,77,.4)}
.cs-next:focus-visible{outline:3px solid var(--adv-deep);outline-offset:3px}
.cs-next-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--adv-deep)}
.cs-next-name{font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:-.015em}
.cs-next svg{width:17px;height:17px;color:var(--adv-deep);margin-left:auto;align-self:center;transition:transform var(--t)}
.cs-next:hover svg{transform:translateX(4px)}
/* ---- responsive sub-page ---- */
@media (max-width:1000px){
.sub-grid{grid-template-columns:1fr}
}
/* ---- insights: article pages and the index ----
Built from the same tokens as the rest of the site. The article body is
sized by its grid column, not by a reading-width cap on the text. */
.feature-note{color:rgba(255,255,255,.88);margin-top:18px;font-size:1.08rem}
.article-hero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.08}
.draft-flag{display:inline-block;background:var(--accent-2);color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.04em;padding:6px 12px;border-radius:6px;margin:0 0 16px}
.article-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.article-meta{position:sticky;top:96px;display:grid;gap:26px}
.byline{display:flex;gap:14px;align-items:flex-start}
.byline-photo{flex:none;width:56px;height:56px;border-radius:12px;object-fit:cover;object-position:top center;border:1px solid var(--rule)}
.byline-name{display:block;font-family:var(--font-head);font-weight:600;color:var(--accent);font-size:1rem}
.byline-name a{color:var(--accent-2-deep);min-height:44px;display:inline-flex;align-items:center;padding:12px 0;margin:-12px 0}
.byline-cred{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:4px;line-height:1.45}
.byline-dates{display:block;font-size:.8rem;color:var(--ink-mute);margin-top:8px;line-height:1.5}
.toc{border-top:1px solid var(--rule);padding-top:18px}
.toc-title{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.toc ol{list-style:none;display:grid;gap:2px}
.toc a{display:flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--accent);line-height:1.35}
.toc a:hover{color:var(--accent-2-deep)}
.article-body{color:var(--ink-soft);font-size:1.06rem;line-height:1.72}
.article-body > * + *{margin-top:18px}
.article-body h2{font-size:clamp(1.45rem,2.3vw,1.85rem);line-height:1.18;margin-top:44px;scroll-margin-top:96px}
.article-body h3{font-size:1.2rem;margin-top:30px;scroll-margin-top:96px}
.article-body h2 + p,.article-body h3 + p{margin-top:12px}
.article-body ul,.article-body ol{padding-left:1.3em;display:grid;gap:8px}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li::marker{color:var(--accent-2)}
.article-body a{color:var(--accent-2-deep);text-decoration:underline;text-underline-offset:3px}
.article-body strong{color:var(--ink)}
.article-body blockquote{border-left:4px solid var(--accent-2);background:var(--accent-2-tint);padding:16px 20px;border-radius:6px;color:var(--ink)}
.article-body code{font-size:.92em;background:var(--field);padding:1px 5px;border-radius:4px}
.insight-card .cs-tag{margin-bottom:12px}
.insight-by{display:block;font-size:.88rem;color:var(--ink-mute);margin:6px 0 18px}
@media (max-width:900px){
.article-grid{grid-template-columns:1fr}
.article-meta{position:static}
}