:root{
  --cobalt:#2149C7; --cobalt-deep:#173A8F; --cobalt-dark:#0F1E5F;
  --coral:#FF5C52; --coral-deep:#E23D33;
  --cream:#F9F5EB; --cream-2:#F3EEE0; --cream-3:#EFE9DB;
  --ink:#0F1730; --ink-soft:#2B3150; --fog:#6E6A78; --fog-2:#8A8797;
  --line:#E2DCCf; --line-2:#D4CDBB; --white:#ffffff;
  --panel-d1:#141B36; --panel-d2:#0C1226; --panel-line:#26304F;
  --display:'Fraunces',serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html{overflow-x:hidden}
body{background:var(--cream);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
::selection{background:var(--coral);color:var(--white)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
@media(max-width:640px){.wrap{padding:0 22px}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(249,245,235,0.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
nav.scrolled{border-bottom-color:var(--line)}
nav.on-dark{background:rgba(15,23,48,0.7)}
nav.on-dark.scrolled{background:rgba(15,23,48,0.92);border-bottom-color:rgba(255,255,255,0.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-0.02em;color:var(--ink);display:flex;align-items:center;gap:3px}
nav.on-dark .logo{color:var(--white)}
.logo .d{color:var(--coral)}
/* logo images */
.logo{flex:0 1 auto;min-width:0}
.logo-img{display:block;width:auto;max-width:100%}
.logo .logo-dark{display:none}
nav.on-dark .logo .logo-light{display:none}
nav.on-dark .logo .logo-dark{display:block}
@media(max-width:900px){nav .logo-img{max-height:44px}}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a{font-size:14px;color:var(--ink-soft);font-weight:500;transition:color .2s;position:relative}
nav.on-dark .nav-links a:not(.nav-cta){color:#C7CBDA}
.nav-links a:not(.nav-cta):hover{color:var(--cobalt)}
nav.on-dark .nav-links a:not(.nav-cta):hover{color:var(--white)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-links a.active:not(.nav-cta)::after{transform:scaleX(1)}
.nav-cta{font-size:14px;font-weight:600;color:#fff !important;background:var(--cobalt);padding:11px 22px;border-radius:3px;transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--cobalt-deep);color:#fff !important;transform:translateY(-1px)}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;
  width:44px;height:44px;min-width:44px;flex:0 0 44px;margin-left:auto;position:relative;z-index:2;
  border:1px solid var(--line-2);border-radius:8px;background:transparent;
  -webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s}
.burger span{width:22px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger:hover{border-color:var(--cobalt)}
nav.on-dark .burger{border-color:rgba(255,255,255,0.24)}
nav.on-dark .burger span{background:var(--white)}
.burger.open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media(max-width:900px){.nav-links{display:none}.burger{display:flex}.nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--cream);border-bottom:1px solid var(--line);padding:28px 40px;gap:24px;align-items:flex-start}nav.on-dark .nav-links.open{background:var(--ink)}}

/* shared type + bits */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt);margin-bottom:30px}
.eyebrow.coral{color:var(--coral)}
.eyebrow .sq{width:13px;height:13px;background:currentColor}
.eyebrow .live{width:8px;height:8px;border-radius:50%;background:var(--coral);position:relative}
.eyebrow .live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--coral);opacity:.5;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}

.btn-primary{font-size:15px;font-weight:600;color:var(--white);background:var(--cobalt);padding:16px 30px;border-radius:3px;display:inline-flex;align-items:center;gap:10px;transition:background .2s,transform .2s,box-shadow .2s}
.btn-primary:hover{background:var(--cobalt-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(33,73,199,0.22)}
.btn-primary .arr{transition:transform .2s}
.btn-primary:hover .arr{transform:translateX(4px)}
.btn-text{font-size:15px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:9px;padding:16px 4px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.btn-text:hover{color:var(--cobalt);border-bottom-color:var(--coral)}
.btn-text.on-dark{color:var(--cream)}
.btn-text.on-dark:hover{color:var(--white)}

/* page hero band (inner pages) */
.page-hero{padding:128px 0 62px;position:relative;overflow:hidden}
@media(max-width:760px){.page-hero{padding:104px 0 46px}}
.page-hero .aura{position:absolute;top:-6%;right:-8%;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(33,73,199,0.10),transparent 66%);pointer-events:none;z-index:-1}
h1.page-title{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,78px);line-height:1.0;letter-spacing:-0.03em;color:var(--ink);max-width:16ch}
h1.page-title .it{font-style:italic;font-weight:600;color:var(--cobalt)}
.page-sub{margin-top:32px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-soft);max-width:58ch}
.page-sub b{color:var(--ink);font-weight:600}

/* sections */
section{position:relative}
.sec-pad{padding:100px 0}
.sec-dark{background:var(--ink);color:var(--cream)}
.sec-dark h2,.sec-dark h3{color:var(--white)}
.sec-cream2{background:var(--cream-2)}

h2.big{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,52px);line-height:1.05;letter-spacing:-0.03em;color:var(--ink);max-width:18ch}
h2.big .it{font-style:italic;font-weight:500;color:var(--cobalt)}
/* on dark sections the base headline MUST be light, and the accent brighter for contrast */
.sec-dark h2.big{color:var(--white)}
.sec-dark h2.big .it{color:#7EA2F0}
.page-hero.dark h1.page-title .it{color:#7EA2F0}
.lead{font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:var(--ink-soft);max-width:62ch;margin-top:24px}
.sec-dark .lead{color:#C7CBDA}
.lead b{color:var(--ink);font-weight:600}
.sec-dark .lead b{color:var(--cream)}

/* footer */
footer{background:var(--ink);color:var(--cream);padding:80px 0 44px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,0.09)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr;gap:36px}}
.foot-brand .logo{color:var(--white);font-size:30px;margin-bottom:16px}
.foot-brand .logo-img{height:36px;width:auto}
.foot-brand p{color:#9AA0B8;font-size:14px;max-width:34ch;line-height:1.6}
.foot-brand .since{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-top:18px}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-2);margin-bottom:18px}
.foot-col a{display:block;font-size:14px;color:#C7CBDA;margin-bottom:12px;transition:color .2s}
.foot-col a:hover{color:var(--white)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:13px;color:var(--fog-2)}
.foot-bottom .mono{font-family:var(--mono);letter-spacing:.04em}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
.sec-dark :focus-visible{outline-color:var(--coral)}

/* ============================================================
   CRAFT PASS — typographic refinement to agency standard
   ============================================================ */

/* Enable real kerning + ligatures everywhere (browsers don't by default) */
html{text-rendering:optimizeLegibility;-webkit-font-feature-settings:"kern" 1,"liga" 1,"calt" 1;font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
body{font-feature-settings:"kern" 1,"liga" 1,"calt" 1;letter-spacing:-0.006em}

/* Display type: large serif wants TIGHTER tracking and tighter leading as it scales up.
   Fraunces has high optical contrast, so negative tracking reads crisp, not cramped. */
h1.hero,h1.page-title{letter-spacing:-0.035em;line-height:0.98;font-feature-settings:"kern" 1,"liga" 1}
h1.hero .l2,h1.page-title .it{letter-spacing:0.012em}      /* italics need a hair less negative */
h2.big{letter-spacing:-0.032em;line-height:1.02}
h2.big .it{letter-spacing:0.008em}
.prose h2 .it,.article h2 .it,.e404 h1 em,.pq blockquote .it{letter-spacing:0.008em}

/* Optical size: push Fraunces to its display optical axis on big type for finer serifs */
h1.hero,h1.page-title,h2.big,.big-1,.prow .v{font-variation-settings:"opsz" 144}
.tl-h,.cs-left h3,.article h2,.gen h3,.fc h3,.case h3,.sig h3{font-variation-settings:"opsz" 72}

/* Body copy: slightly open tracking at small sizes reads calmer; tighten the measure */
.lead{line-height:1.6;letter-spacing:-0.003em;max-width:60ch}
.hero-sub,.page-sub{letter-spacing:-0.004em;line-height:1.5}
p{font-feature-settings:"kern" 1,"liga" 1}

/* Eyebrows / mono labels: mono at tiny sizes wants MORE tracking for even colour */
.eyebrow,.foot-col h4,.foot-brand .since,.since,.panel-title,.panel-live,.byline,.c-item .k,.gen .era,.gen .role,.tag,.cs-left .who,.q .who,.sig .k,.article .k,.cap .cn,.fc .n,.roster .disc span{font-feature-settings:"kern" 1;font-variant-numeric:tabular-nums}

/* Numbers: tabular figures so stats + panel align on the decimal */
.ps .n,.tstat .n,.prow .v,.big-1,.proof-strip{font-variant-numeric:tabular-nums;font-feature-settings:"kern" 1,"tnum" 1}

/* Tighten the stat labels leading + balance */
.ps .l,.tstat .l{line-height:1.42;letter-spacing:0}

/* Body paragraphs in Signal (long-form) deserve editorial leading + optimal measure */
.article .body p{line-height:1.72;letter-spacing:-0.002em;max-width:62ch}
.article .body .stand{line-height:1.42;letter-spacing:-0.018em}

/* Buttons: labels read better with a touch of positive tracking */
.btn-primary,.nav-cta,.form button{letter-spacing:0.005em}
.btn-text,.m-link{letter-spacing:0.003em}

/* Nav links: even, calm tracking */
.nav-links a{letter-spacing:-0.002em}

/* Case-study + card headings: tighten leading so multi-line titles hold together */
.cs-left h3,.case h3,.gen h3,.fc h3,.sig h3,.tl-h,.article h2{line-height:1.1;letter-spacing:-0.022em}

/* Pull quote + big serif moments: tighter still */
.pq blockquote{letter-spacing:-0.028em;line-height:1.14}

/* Prevent orphaned one-word last lines on the big headlines where we control width */
h1.hero,h2.big,h1.page-title{text-wrap:balance}
.lead,.hero-sub,.page-sub{text-wrap:pretty}

/* Links inside body copy (Signal etc.) get a refined underline offset */
a{text-underline-offset:3px}

/* Cross-browser antialias for the crisp agency look on dark sections */
.sec-dark,.page-hero.dark,footer{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ------------------------------------------------------------
   The coral markers are switched off site-wide: the small square
   in front of a "coral" eyebrow, the pinging dot on the home hero,
   and the dot on the vertical spine. Hidden rather than deleted
   from the markup, so one line brings them all back.
   The cobalt squares on the other eyebrows are untouched.
   ------------------------------------------------------------ */
.eyebrow.coral .sq,.eyebrow .live,.spine-dot{display:none}