/* ============================================================
   One Stop People Solutions — Design System
   Editorial professional-services brand.
   Palette derived from circular red/white/blue logo, treated
   with restraint: deep federal navy, warm ivory, crimson accent.
   ============================================================ */

:root,[data-theme='light']{
  /* Type scale (fluid) */
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.85rem);
  --text-sm:clamp(0.875rem,0.82rem + 0.3vw,0.97rem);
  --text-base:clamp(1rem,0.96rem + 0.22vw,1.08rem);
  --text-lg:clamp(1.125rem,1.02rem + 0.6vw,1.4rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.3rem + 2.4vw,3.4rem);
  --text-3xl:clamp(2.5rem,1.2rem + 4vw,4.6rem);
  --text-hero:clamp(2.5rem,1.4rem + 3.6vw,4.4rem);

  /* Spacing */
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Surfaces — warm ivory / parchment */
  --color-bg:#f6f3ec;
  --color-surface:#fbf9f4;
  --color-surface-2:#ffffff;
  --color-surface-offset:#efeadf;
  --color-surface-deep:#13243d;     /* federal navy for dark sections */
  --color-divider:#e0d9ca;
  --color-border:#d7cfbe;

  /* Text */
  --color-text:#1b2536;
  --color-text-muted:#5c6472;
  --color-text-faint:#9aa0aa;
  --color-text-inverse:#f6f3ec;

  /* Primary — deep federal navy */
  --color-primary:#13243d;
  --color-primary-hover:#1d3658;
  --color-primary-soft:#e7ebf2;

  /* Accent — controlled crimson (from logo) */
  --color-accent:#b3322f;
  --color-accent-hover:#94251f;
  --color-accent-soft:#f3e0dd;

  /* Steel blue secondary (from logo) */
  --color-steel:#2f5d8a;
  --color-steel-soft:#e3ebf3;

  --radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1.25rem;--radius-full:9999px;
  --transition-interactive:200ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm:0 1px 2px rgba(19,36,61,.06);
  --shadow-md:0 8px 24px rgba(19,36,61,.09);
  --shadow-lg:0 22px 50px rgba(19,36,61,.14);

  --content-narrow:680px;--content-default:1020px;--content-wide:1240px;

  --font-display:'Fraunces','Georgia',serif;
  --font-body:'DM Sans','Helvetica Neue',sans-serif;
}

[data-theme='dark']{
  --color-bg:#0e1726;
  --color-surface:#152035;
  --color-surface-2:#1b2940;
  --color-surface-offset:#11192a;
  --color-surface-deep:#0a1322;
  --color-divider:#23314c;
  --color-border:#2c3b58;
  --color-text:#e7ebf2;
  --color-text-muted:#9aa6bc;
  --color-text-faint:#69768e;
  --color-text-inverse:#0e1726;
  --color-primary:#cdd9ec;
  --color-primary-hover:#e7ebf2;
  --color-primary-soft:#1c2a44;
  --color-accent:#e2675f;
  --color-accent-hover:#ef7d75;
  --color-accent-soft:#3a2220;
  --color-steel:#7aa6d4;
  --color-steel-soft:#1d2c45;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 22px 50px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#0e1726;--color-surface:#152035;--color-surface-2:#1b2940;
    --color-surface-offset:#11192a;--color-surface-deep:#0a1322;--color-divider:#23314c;
    --color-border:#2c3b58;--color-text:#e7ebf2;--color-text-muted:#9aa6bc;--color-text-faint:#69768e;
    --color-text-inverse:#0e1726;--color-primary:#cdd9ec;--color-primary-hover:#e7ebf2;
    --color-primary-soft:#1c2a44;--color-accent:#e2675f;--color-accent-hover:#ef7d75;
    --color-accent-soft:#3a2220;--color-steel:#7aa6d4;--color-steel-soft:#1d2c45;
  }
}

/* ---------- Layout primitives ---------- */
.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(var(--space-5),5vw,var(--space-16))}
.wrap-narrow{max-width:var(--content-narrow)}
.wrap-default{max-width:var(--content-default)}
/* Consistent, moderate section rhythm site-wide. One value so stacked sections
   never add up to an oversized void. */
section{padding-block:clamp(var(--space-12),5vw,var(--space-20))}
.section-tight{padding-block:clamp(var(--space-10),4vw,var(--space-14))}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);
  display:inline-flex;align-items:center;gap:var(--space-2);
}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--color-accent);display:inline-block}
.eyebrow.center::before{display:none}
/* Display type: disable Fraunces' quirky discretionary ligatures & alternates (the "off"-looking fi/ffi/st and wonky letterforms) so headings read clean. */
.brand-name,.brand-tag,h1,h2,h3,.display,.pullquote,.prose blockquote,.article-hero h1,.page-hero h1,.insight-card.feature h3,.hero h1{font-feature-settings:"liga" 0,"dlig" 0,"calt" 0,"hlig" 0;font-variant-ligatures:none}
h1,h2,h3{font-family:var(--font-display);font-weight:480;color:var(--color-primary);letter-spacing:-.01em}
.display{font-size:var(--text-hero);line-height:1.02;font-weight:430}
.h-xl{font-size:var(--text-2xl);line-height:1.08}
.h-lg{font-size:var(--text-xl);line-height:1.12}
.h-md{font-family:var(--font-body);font-weight:600;font-size:var(--text-lg);color:var(--color-text);letter-spacing:-.01em}
.lead{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.55;max-width:60ch}
.muted{color:var(--color-text-muted)}
p{max-width:68ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);
  border:1.5px solid transparent;white-space:nowrap;line-height:1;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);transform:translateY(-1px)}
.btn-dark{background:var(--color-primary);color:var(--color-text-inverse)}
[data-theme='dark'] .btn-dark{color:var(--color-bg)}
.btn-dark:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border)}
.btn-ghost:hover{border-color:var(--color-primary);background:var(--color-surface)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.btn-solid-light{background:#fff;color:var(--color-primary)}
.btn-solid-light:hover{transform:translateY(-1px);background:#f0ece2}
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-sm);color:var(--color-accent)}
.link-arrow svg{width:15px;height:15px;transition:transform var(--transition-interactive)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive)}
.header.scrolled{border-color:var(--color-divider);box-shadow:var(--shadow-sm)}
.header-utility{background:var(--color-primary);color:var(--color-text-inverse)}
[data-theme='dark'] .header-utility{background:var(--color-surface-deep)}
.header-utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-2);font-size:var(--text-xs)}
.header-utility a{color:var(--color-text-inverse);opacity:.82;display:inline-flex;align-items:center;gap:6px}
[data-theme='dark'] .header-utility a{color:#e7ebf2}
.header-utility a:hover{opacity:1}
.utility-left{display:flex;gap:var(--space-5);flex-wrap:wrap}
.utility-right{display:flex;gap:var(--space-5);align-items:center}
.util-cta{font-weight:600;border:1px solid rgba(255,255,255,.3);padding:3px 12px;border-radius:var(--radius-full)}
.util-cta:hover{background:rgba(255,255,255,.08)}
.header-main .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.brand-mark{width:46px;height:46px;flex-shrink:0;object-fit:contain;display:block}
.mobile-menu-head .brand-mark{filter:drop-shadow(0 0 0.5px rgba(255,255,255,.85)) drop-shadow(0 0 2px rgba(255,255,255,.35))}
/* footer logo sits on a dark navy bg: give the emblem a solid white circular
   backing so the navy ring and text read clearly, without recoloring the logo */
.footer .brand-mark{background:#fff;border-radius:50%;padding:4px;width:52px;height:52px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--color-primary);letter-spacing:-.01em}
.brand-tag{font-family:var(--font-display);font-style:italic;font-size:.78rem;letter-spacing:.005em;color:var(--color-accent);font-weight:500;white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--space-1)}
.nav a{font-size:var(--text-sm);font-weight:500;color:var(--color-text);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);position:relative;white-space:nowrap}
.nav a:hover{color:var(--color-accent)}
.nav a.active{color:var(--color-accent)}
.nav a.active::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:2px;height:2px;background:var(--color-accent);border-radius:2px}
.header-actions{display:flex;align-items:center;gap:var(--space-3)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-full);color:var(--color-text);border:1px solid var(--color-border)}
.icon-btn:hover{color:var(--color-accent);border-color:var(--color-accent)}
.menu-toggle{display:none}
@media(max-width:1340px) and (min-width:1025px){.header-main .wrap{gap:var(--space-4)}.nav{gap:0}.nav a{padding:var(--space-2) var(--space-2)}}
@media(max-width:1180px){.header-actions .btn{display:none}}
@media(max-width:640px){
  .header-utility .wrap{gap:var(--space-3)}
  .utility-left{gap:var(--space-3);min-width:0}
  .utility-right > span{display:none}
  .utility-right{gap:var(--space-3)}
}
@media(max-width:540px){
  .header-utility a.util-cta{display:none}
}
@media(max-width:460px){
  .utility-left a[href^="mailto"]{display:none}
  .header-main .wrap{gap:var(--space-3)}
  .brand{gap:var(--space-2)}
  .brand-mark{width:38px;height:38px}
  .brand-name{font-size:.98rem}
  .brand-tag{font-size:.68rem}
}
@media(max-width:360px){
  .brand-tag{display:none}
}
@media(max-width:1024px){
  .nav{display:none}
  .menu-toggle{display:grid}
}
/* Mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--color-bg);transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;padding:var(--space-6);overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8)}
.mobile-menu nav{display:flex;flex-direction:column;gap:var(--space-1)}
.mobile-menu nav a{font-family:var(--font-display);font-size:var(--text-lg);padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);color:var(--color-primary)}
.mobile-menu .btn{margin-top:var(--space-6)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--color-surface-deep);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 88% 8%,rgba(47,93,138,.38),transparent 55%),
  radial-gradient(80% 70% at 5% 95%,rgba(179,50,47,.16),transparent 60%);
  pointer-events:none}
.hero-grid{position:absolute;inset:0;opacity:.07;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--space-8),5vw,var(--space-20));align-items:center;padding-block:clamp(var(--space-20),9vw,var(--space-32))}
.hero h1{color:#fff;font-weight:430}
.hero .lead{color:rgba(255,255,255,.78);max-width:46ch}
.hero-eyebrow{color:#f0a39e}
.hero-eyebrow::before{background:#f0a39e}
.hero-ctas{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)}
.hero-meta{margin-top:var(--space-10);display:flex;gap:var(--space-8);flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-6)}
.hero-meta div{min-width:90px}
.hero-meta .num{font-family:var(--font-display);font-size:var(--text-lg);color:#fff;display:block}
.hero-meta .lbl{font-size:var(--text-xs);color:rgba(255,255,255,.6);letter-spacing:.04em}
/* hero side card */
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);padding:var(--space-6);backdrop-filter:blur(8px)}
.hero-card h3{color:#fff;font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2)}
.hero-card .dot{width:8px;height:8px;border-radius:50%;background:#5dd39e;box-shadow:0 0 0 4px rgba(93,211,158,.2)}
.hero-mini{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid rgba(255,255,255,.1)}
.hero-mini:first-of-type{border-top:none}
.hero-mini .t{color:#fff;font-weight:500;font-size:var(--text-sm)}
.hero-mini .s{color:rgba(255,255,255,.6);font-size:var(--text-xs)}
.hero-mini .tag{font-size:.66rem;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:var(--radius-full);background:rgba(93,211,158,.16);color:#7ee0ad;white-space:nowrap;align-self:center}
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;gap:var(--space-10)}
}

/* ---------- Blended photo hero (light) ---------- */
.hero-blend{background:var(--color-surface);color:var(--color-text);overflow:hidden}
.hero-blend::before{display:none}
.hero-blend .hero-photo{position:absolute;inset:0 0 0 auto;width:66%;background:url("./assets/hero-blend.png") right center/cover no-repeat;z-index:0}
/* fade the photo into the page background: transparent on the right, solid surface on the left */
.hero-blend .hero-fade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--color-surface) 0%,
    var(--color-surface) 38%,
    rgba(246,243,236,.88) 50%,
    rgba(246,243,236,.45) 62%,
    rgba(246,243,236,0) 78%);}
.hero-blend .wrap{position:relative;z-index:2;display:block;padding-block:clamp(var(--space-20),9vw,var(--space-32))}
.hero-blend .hero-copy{max-width:600px}
.hero-blend h1{color:var(--color-primary)}
.hero-blend .lead{color:var(--color-text-muted);max-width:44ch}
.hero-blend .hero-meta{border-top-color:var(--color-divider)}
.hero-blend .hero-meta .num{color:var(--color-primary)}
.hero-blend .hero-meta .lbl{color:var(--color-text-muted)}
/* dark mode: blend into the deep surface instead of ivory */
[data-theme="dark"] .hero-blend{background:var(--color-surface-deep)}
[data-theme="dark"] .hero-blend .hero-fade{background:linear-gradient(90deg,
    var(--color-surface-deep) 0%,
    var(--color-surface-deep) 38%,
    rgba(19,36,61,.88) 50%,
    rgba(19,36,61,.45) 62%,
    rgba(19,36,61,0) 78%);}
[data-theme="dark"] .hero-blend h1{color:#fff}
[data-theme="dark"] .hero-blend .lead{color:rgba(255,255,255,.78)}
[data-theme="dark"] .hero-blend .hero-meta .num{color:#fff}
[data-theme="dark"] .hero-blend .hero-meta{border-top-color:rgba(255,255,255,.14)}
[data-theme="dark"] .hero-blend .hero-meta .lbl{color:rgba(255,255,255,.6)}
@media(max-width:880px){
  /* on mobile, photo sits behind a stronger top-to-bottom fade so text stays readable */
  .hero-blend .hero-photo{width:100%;background-position:72% center;opacity:.5}
  .hero-blend .hero-fade{background:linear-gradient(180deg,
    var(--color-surface) 0%,
    rgba(246,243,236,.92) 45%,
    rgba(246,243,236,.82) 100%);}
  [data-theme="dark"] .hero-blend .hero-fade{background:linear-gradient(180deg,
    var(--color-surface-deep) 0%,
    rgba(19,36,61,.92) 45%,
    rgba(19,36,61,.82) 100%);}
  .hero-blend .hero-copy{max-width:none}
}

/* ---------- Dual audience split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.audience-card{position:relative;border-radius:var(--radius-xl);padding:clamp(var(--space-6),3vw,var(--space-10));overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface)}
.audience-card.dark{background:var(--color-primary);color:#fff;border-color:transparent}
.audience-card.dark h3,.audience-card.dark p{color:#fff}
.audience-card .ac-icon{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;margin-bottom:var(--space-5);background:var(--color-accent-soft);color:var(--color-accent)}
.audience-card.dark .ac-icon{background:rgba(255,255,255,.12);color:#fff}
.audience-card h3{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.audience-card p{margin-bottom:var(--space-6);color:var(--color-text-muted)}
.audience-card.dark p{color:rgba(255,255,255,.78)}
@media(max-width:760px){.split{grid-template-columns:1fr}}

/* ---------- Section headers ---------- */
.sec-head{max-width:62ch}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:var(--text-2xl);margin:var(--space-3) 0}
.sec-head p{color:var(--color-text-muted);font-size:var(--text-lg)}
.sec-head.center p{margin-inline:auto}

/* ---------- Capability cards ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-5);margin-top:var(--space-12)}
.cap-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),border-color var(--transition-interactive)}
.cap-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-steel)}
.cap-num{font-family:var(--font-display);font-size:var(--text-sm);color:var(--color-accent);font-weight:600}
.cap-card h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;color:var(--color-text);margin:var(--space-3) 0 var(--space-2)}
.cap-card p{font-size:var(--text-sm);color:var(--color-text-muted)}
.cap-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-steel-soft);color:var(--color-steel);display:grid;place-items:center;margin-bottom:var(--space-4)}

/* ---------- Trust strip ---------- */
.trust{background:var(--color-primary);color:#fff}
.trust .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
.trust h2{color:#fff;font-size:var(--text-2xl)}
.trust .lead{color:rgba(255,255,255,.78)}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.trust-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:var(--space-5)}
.trust-item .ti-icon{color:#f0a39e;margin-bottom:var(--space-3)}
.trust-item h4{color:#fff;font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-1);font-family:var(--font-body)}
.trust-item p{color:rgba(255,255,255,.66);font-size:var(--text-sm)}
.cred-badges{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.cred-badge{display:inline-flex;flex-direction:column;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.cred-badge .bk{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cred-badge .bv{font-weight:600;color:#fff;font-size:var(--text-sm)}
@media(max-width:880px){.trust .wrap{grid-template-columns:1fr}}

/* ---------- Opportunity preview / board ---------- */
.opp-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-8)}
.opp-search{flex:1;min-width:200px;position:relative}
.opp-search input{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) 42px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);font-size:var(--text-sm)}
.opp-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--color-text-faint)}
.opp-filters{display:flex;gap:var(--space-2);flex-wrap:wrap}
.chip{font-size:var(--text-sm);font-weight:500;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted)}
.chip:hover{border-color:var(--color-steel);color:var(--color-steel)}
.chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
[data-theme='dark'] .chip.active{color:var(--color-bg)}
.opp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--space-5)}
.opp-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),border-color var(--transition-interactive)}
.opp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-steel)}
.opp-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}
.opp-specialty{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-steel)}
.status{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-full);white-space:nowrap}
.status.open{background:#e2f3ea;color:#1f7a4d}
.status.soon{background:#fdf0db;color:#9a6b12}
.status.filled{background:#eceef1;color:#6a7384}
[data-theme='dark'] .status.open{background:#16331f;color:#6fd99a}
[data-theme='dark'] .status.soon{background:#3a2f15;color:#e3b85f}
[data-theme='dark'] .status.filled{background:#222d40;color:#8b95a8}
.opp-card h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;color:var(--color-text);margin-bottom:var(--space-3);line-height:1.25}
.opp-summary{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;margin:calc(var(--space-1) * -1) 0 var(--space-4)}
.opp-meta{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted)}
.opp-meta div{display:flex;align-items:center;gap:var(--space-2)}
.opp-meta svg{width:15px;height:15px;color:var(--color-text-faint);flex-shrink:0}
.opp-card .opp-foot{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-divider);display:flex;justify-content:space-between;align-items:center}
.opp-type{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);background:var(--color-surface-offset);padding:4px 10px;border-radius:var(--radius-sm)}
.opp-empty{grid-column:1/-1;text-align:center;padding:var(--space-16) var(--space-6);border:1px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-muted)}

/* ---------- Insights cards ---------- */
.insight-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-5);margin-top:var(--space-12)}
.insight-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);display:flex;flex-direction:column;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive)}
.insight-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.insight-card .ic-img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--color-primary),var(--color-steel));position:relative;overflow:hidden}
.insight-card.feature .ic-img{aspect-ratio:16/10}
.insight-card .ic-body{padding:var(--space-5);display:flex;flex-direction:column;flex:1}
.ic-cat{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-2)}
.insight-card h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;color:var(--color-text);line-height:1.3;margin-bottom:var(--space-2)}
.insight-card.feature h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:480;color:var(--color-primary)}
.insight-card p{font-size:var(--text-sm);color:var(--color-text-muted)}
.ic-meta{margin-top:auto;padding-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-faint);display:flex;gap:var(--space-3)}
.insight-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.insight-grid,.insight-grid-3{grid-template-columns:1fr}}

/* ---------- Article detail (CMS blog post view) ---------- */
.article-hero{max-width:760px;margin-inline:auto}
.article-hero .ic-cat{display:inline-block}
.article-hero h1{font-family:var(--font-display);font-weight:460;font-size:clamp(var(--text-2xl),4.4vw,var(--text-4xl));line-height:1.12;color:var(--color-primary);margin:var(--space-4) 0 var(--space-5)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;font-size:var(--text-sm);color:var(--color-text-faint);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:var(--space-4) 0;margin-bottom:var(--space-8)}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--color-text-faint)}
.article-figure{margin:0 0 var(--space-10);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/8;background:linear-gradient(135deg,var(--color-primary),var(--color-steel))}
.article-figure img{width:100%;height:100%;object-fit:cover}
.prose{max-width:720px;margin-inline:auto;font-size:var(--text-md);line-height:1.78;color:var(--color-text)}
.prose h2{font-family:var(--font-display);font-weight:480;font-size:var(--text-2xl);color:var(--color-primary);margin:var(--space-10) 0 var(--space-4)}
.prose h3{font-size:var(--text-lg);font-weight:700;color:var(--color-text);margin:var(--space-8) 0 var(--space-3)}
.prose p{margin-bottom:var(--space-5);color:var(--color-text-muted)}
.prose ul,.prose ol{margin:0 0 var(--space-5) var(--space-5);color:var(--color-text-muted)}
.prose li{margin-bottom:var(--space-2);line-height:1.7}
.prose strong{color:var(--color-text);font-weight:700}
.prose blockquote{border-left:3px solid var(--color-accent);padding:var(--space-2) 0 var(--space-2) var(--space-5);margin:var(--space-6) 0;font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--color-primary)}
.prose .lede{font-size:var(--text-lg);line-height:1.6;color:var(--color-text);font-weight:500}
.article-back{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--color-accent)}
.article-cta{max-width:720px;margin:var(--space-12) auto 0;padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-offset);text-align:center}
.article-disclaimer{max-width:720px;margin:var(--space-6) auto 0;font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;font-style:italic}

/* ---------- Forms ---------- */
.form-shell{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(var(--space-6),4vw,var(--space-12));box-shadow:var(--shadow-sm)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field.full{grid-column:1/-1}
.field label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.field label .req{color:var(--color-accent)}
.field input,.field select,.field textarea{
  padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);font-size:var(--text-sm);color:var(--color-text);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-steel);box-shadow:0 0 0 3px var(--color-steel-soft)}
.field textarea{resize:vertical;min-height:120px}
.field input[type=file]{padding:9px 12px;cursor:pointer;font-size:var(--text-sm)}
.field input[type=file]::file-selector-button{margin-right:12px;padding:6px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-offset);color:var(--color-text);font-weight:600;font-family:inherit;font-size:var(--text-sm);cursor:pointer;transition:border-color .15s,color .15s}
.field input[type=file]::file-selector-button:hover{border-color:var(--color-accent);color:var(--color-accent)}
.field .hint{font-size:var(--text-xs);color:var(--color-text-faint)}
.form-foot{margin-top:var(--space-8);display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.form-success{display:none;text-align:center;padding:var(--space-12) var(--space-6)}
.form-success.show{display:block}
.form-success .check{width:64px;height:64px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent);display:grid;place-items:center;margin:0 auto var(--space-5)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---------- Process steps ---------- */
/* Process steps: number sits in its OWN column, clearly beside the text —
   never overlapping. Two columns on desktop, single stacked column on mobile. */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10) clamp(var(--space-8),5vw,var(--space-16));margin-top:var(--space-12);counter-reset:step}
.step{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--space-5);
  align-items:start;
  padding-top:var(--space-6);
  border-top:1px solid var(--color-divider);
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  grid-row:1 / span 2;
  align-self:start;
  font-family:var(--font-display);font-size:var(--text-2xl);line-height:.9;
  color:var(--color-accent);
  font-feature-settings:"lnum" 1;
}
.step h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}
.step p{font-size:var(--text-sm);color:var(--color-text-muted)}
@media(max-width:680px){.steps{grid-template-columns:1fr}}

/* ---------- Generic page header ---------- */
/* page-head (secondary interior heroes): light hero text on the SAME single
   page background — no dark navy slab, no radial tint. Sits on the page canvas
   like the rest of the content; whitespace + the hairline divider below the
   hero do the separating. */
.page-head{background:var(--color-bg);color:var(--color-text);position:relative;overflow:hidden}
.page-head::before{display:none}
.page-head .wrap{position:relative;padding-block:clamp(var(--space-16),7vw,var(--space-24)) clamp(var(--space-10),5vw,var(--space-14))}
.page-head + section{padding-top:clamp(var(--space-8),4vw,var(--space-14)) !important}
.page-head .crumb{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.05em;margin-bottom:var(--space-4)}
.page-head .crumb a{color:var(--color-text-muted)}
.page-head .crumb a:hover{color:var(--color-primary)}
.page-head h1{color:var(--color-primary);font-size:var(--text-3xl);max-width:18ch}
[data-theme="dark"] .page-head h1{color:#fff}
.page-head .lead{color:var(--color-text-muted);margin-top:var(--space-5)}
.page-head .eyebrow{color:var(--color-accent)}
.page-head .eyebrow::before{background:var(--color-accent)}

/* ---------- Prose ---------- */
.prose p{margin-bottom:var(--space-5);color:var(--color-text-muted);font-size:var(--text-base)}
.prose h2{font-size:var(--text-xl);margin:var(--space-12) 0 var(--space-4)}
.prose h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:600;color:var(--color-text);margin:var(--space-8) 0 var(--space-3)}
.prose ul{margin:0 0 var(--space-5) var(--space-5);color:var(--color-text-muted);display:flex;flex-direction:column;gap:var(--space-2)}

/* pull quote */
.pullquote{border-left:3px solid var(--color-accent);padding-left:var(--space-6);margin:var(--space-10) 0;font-family:var(--font-display);font-size:var(--text-xl);line-height:1.3;color:var(--color-primary);font-weight:430}

/* two-col editorial */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
.two-col.alt{direction:rtl}.two-col.alt>*{direction:ltr}
@media(max-width:820px){.two-col,.two-col.alt{grid-template-columns:minmax(0,1fr);direction:ltr}}
.visual-panel{position:relative;aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface-offset)}
.visual-panel img{width:100%;height:100%;object-fit:cover}
/* soft blend: photo melts toward the page on its right (text) edge */
.visual-panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,243,236,0) 55%,rgba(246,243,236,.55) 88%,var(--color-surface) 100%)}
[data-theme="dark"] .visual-panel::after{background:linear-gradient(90deg,rgba(19,36,61,0) 55%,rgba(19,36,61,.55) 88%,var(--color-surface) 100%)}
/* when the image sits on the right (alt layout), fade the left edge instead */
.two-col.alt .visual-panel::after{background:linear-gradient(270deg,rgba(246,243,236,0) 55%,rgba(246,243,236,.55) 88%,var(--color-surface) 100%)}
[data-theme="dark"] .two-col.alt .visual-panel::after{background:linear-gradient(270deg,rgba(19,36,61,0) 55%,rgba(19,36,61,.55) 88%,var(--color-surface) 100%)}
@media(max-width:820px){.visual-panel::after{display:none}}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-6);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);padding-block:var(--space-10)}
.stat-band-2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.stat-band,.stat-band-2{grid-template-columns:1fr 1fr;gap:var(--space-5)}.stat-band .n{font-size:var(--text-xl)}}
@media(max-width:460px){.stat-band,.stat-band-2{grid-template-columns:1fr}}
.stat .n{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-primary);display:block;line-height:1}
.stat .l{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--color-accent);color:#fff;border-radius:var(--radius-xl)}
.cta-band .inner{padding:clamp(var(--space-10),5vw,var(--space-20));display:grid;grid-template-columns:1.3fr .7fr;gap:var(--space-8);align-items:center}
.cta-band h2{color:#fff;font-size:var(--text-2xl)}
.cta-band p{color:rgba(255,255,255,.85)}
.cta-band .cta-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:flex-end}
@media(max-width:820px){.cta-band .inner{grid-template-columns:1fr}.cta-band .cta-actions{justify-content:flex-start}}

/* ---------- Footer ---------- */
.footer{background:var(--color-surface-deep);color:rgba(255,255,255,.7);padding-block:var(--space-20) var(--space-10)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-10)}
.footer h4{color:#fff;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-5);font-family:var(--font-body);font-weight:600}
.footer ul{display:flex;flex-direction:column;gap:var(--space-3)}
.footer a{color:rgba(255,255,255,.7);font-size:var(--text-sm)}
.footer a:hover{color:#fff}
.footer .brand-name{color:#fff}
.footer .brand-tag{color:rgba(255,255,255,.65)}
/* always show the motto in the footer, even on narrow screens */
.footer-brand .brand-tag{display:block !important}
.footer-about p{color:rgba(255,255,255,.6);font-size:var(--text-sm);margin:var(--space-5) 0;max-width:38ch}
.footer-contact{font-size:var(--text-sm);display:flex;flex-direction:column;gap:var(--space-2)}
.footer-contact a{display:inline-flex;gap:8px;align-items:center}
.social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.social a{width:38px;height:38px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff}
.social a:hover{background:var(--color-accent);border-color:var(--color-accent)}
.footer-bottom{margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-xs);color:rgba(255,255,255,.5)}
.footer-bottom .naics{display:flex;gap:var(--space-5);flex-wrap:wrap}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   EDITORIAL FLOW REDESIGN (v2)
   Goal: dissolve the block/boxed feel. One continuous page that
   moves through subtle tonal shifts, blended imagery, overlap and
   layered composition — restrained, premium, custom.
   ============================================================ */

/* 1 — Single solid page canvas ----------------------------------------------
   ONE solid background color for the whole page. No vertical washes, no
   radial tints, no tonal stripes. Sections are content that sits on top of
   this single canvas, separated by whitespace and hairline dividers only. */
body{
  background:var(--color-bg);
}
[data-theme='dark'] body{
  background:var(--color-bg);
}

/* sections sit on the page canvas, not on their own color blocks.
   Exception: the page-head interior hero keeps its navy background. */
main > section:not(.page-head):not(.page-hero){background:transparent !important;position:relative}
main > section.page-head,
main > section.page-hero{position:relative}

/* generous, slightly tightened rhythm so sections breathe into one another */
main > section{padding-block:clamp(var(--space-12),5vw,var(--space-20))}

/* 2 — Soft "wash" zones instead of hard alternating backgrounds -------------
   Replace the old offset-color blocks with a faint, edge-feathered tonal
   field that fades in and out — no visible seams. */
/* washes removed — sections sit directly on the single page canvas */
.flow-wash{position:relative}
.flow-wash::before{display:none}

/* 3 — Section overlap: let blocks bleed into the next for continuity -------- */
.flow-pull-up{margin-top:calc(-1 * clamp(var(--space-8),5vw,var(--space-16)))}

/* 4 — De-box the cards ------------------------------------------------------
   Cards become quiet surfaces that lift on hover rather than hard outlined
   boxes. Hairline borders soften; fills go translucent; shadows do the work. */
.cap-card,.opp-card,.insight-card,.audience-card{
  border-color:transparent !important;
  background:color-mix(in oklab, var(--color-surface) 72%, transparent) !important;
  backdrop-filter:blur(2px);
  box-shadow:0 1px 0 color-mix(in oklab,var(--color-border) 50%, transparent),
             0 18px 40px -28px rgba(19,36,61,.35);
}
[data-theme='dark'] .cap-card,
[data-theme='dark'] .opp-card,
[data-theme='dark'] .insight-card,
[data-theme='dark'] .audience-card{
  background:color-mix(in oklab, var(--color-surface-2) 55%, transparent) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 20px 44px -30px rgba(0,0,0,.7);
}
.cap-card:hover,.opp-card:hover,.insight-card:hover{
  border-color:transparent !important;
  transform:translateY(-5px);
  box-shadow:0 1px 0 color-mix(in oklab,var(--color-border) 60%, transparent),
             0 30px 60px -34px rgba(19,36,61,.5);
}
.audience-card{padding:clamp(var(--space-6),3vw,var(--space-10))}

/* capability grid: dividers instead of boxes for an editorial index feel */
.cap-grid.flow-index{gap:0;margin-top:var(--space-12);
  border-top:1px solid var(--color-divider)}
.cap-grid.flow-index .cap-card{
  background:transparent !important;backdrop-filter:none;box-shadow:none !important;
  border-radius:0;border-bottom:1px solid var(--color-divider) !important;
  padding:var(--space-8) var(--space-6) var(--space-8) 0;
}
.cap-grid.flow-index .cap-card:hover{transform:none;background:color-mix(in oklab,var(--color-surface) 50%,transparent) !important}
@media(min-width:760px){
  .cap-grid.flow-index{grid-template-columns:1fr 1fr}
  .cap-grid.flow-index .cap-card{padding-inline:clamp(var(--space-6),3vw,var(--space-10)) clamp(var(--space-6),3vw,var(--space-10))}
  .cap-grid.flow-index .cap-card:nth-child(odd){padding-left:0}
}

/* 5 — Trust: dissolve the hard navy slab into a feathered tonal field ------- */
.trust.flow-trust{background:transparent !important;color:var(--color-text);overflow:visible}
/* wash removed — trust content sits on the single page canvas */
.trust.flow-trust::before{display:none}
.trust.flow-trust h2{color:var(--color-primary)}
.trust.flow-trust .lead{color:var(--color-text-muted)}
.trust.flow-trust .eyebrow,.trust.flow-trust .eyebrow::before{color:var(--color-accent);background-color:var(--color-accent)}
.trust.flow-trust .eyebrow{background:none}
.trust.flow-trust .trust-item{
  background:color-mix(in oklab,var(--color-surface) 60%, transparent);
  border-color:color-mix(in oklab,var(--color-border) 60%, transparent);
}
.trust.flow-trust .trust-item .ti-icon{color:var(--color-accent)}
.trust.flow-trust .trust-item h4{color:var(--color-text)}
.trust.flow-trust .trust-item p{color:var(--color-text-muted)}
.trust.flow-trust .cred-badge{border-color:var(--color-border)}
.trust.flow-trust .cred-badge .bk{color:var(--color-text-faint)}
.trust.flow-trust .cred-badge .bv{color:var(--color-primary)}

/* 6 — Full-bleed blended editorial photo (replaces boxed visual-panel) -----
   The image fades into the page on every inner edge — like the hero — instead
   of being a hard rounded rectangle. */
/* Blended in-page figure — NOT a boxed photo card. No rounded corners, no hard
   edges. The image dissolves into the page on every side (and especially on the
   inner edge toward the copy), exactly like the hero photo treatment. */
.visual-bleed{position:relative;aspect-ratio:4/3;border-radius:0;overflow:visible;background:transparent}
/* feather all four edges into the page canvas (works in light AND dark): a
   page-bg-colored inset frame fades the straight photo edges into the background. */
.visual-bleed::before{content:"";position:absolute;inset:-1px;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 44px 26px var(--color-bg), inset 0 0 14px 4px var(--color-bg);}
.visual-bleed img{width:100%;height:100%;object-fit:cover;border-radius:0;
  -webkit-mask-image:radial-gradient(105% 115% at 58% 52%, #000 24%, rgba(0,0,0,.55) 56%, transparent 80%);
          mask-image:radial-gradient(105% 115% at 58% 52%, #000 24%, rgba(0,0,0,.55) 56%, transparent 80%);
}
.visual-bleed::after{display:none}
/* image on the RIGHT of the copy: pull the soft focal point toward the right so
   the inner (left) edge dissolves most strongly toward the text. */
.two-col.alt .visual-bleed img,
.split .visual-bleed:last-child img{
  -webkit-mask-image:radial-gradient(105% 120% at 66% 52%, #000 22%, rgba(0,0,0,.55) 54%, transparent 82%);
          mask-image:radial-gradient(105% 120% at 66% 52%, #000 22%, rgba(0,0,0,.55) 54%, transparent 82%);
}
/* image on the LEFT of the copy: focal point toward the left, inner (right)
   edge dissolves toward the text. */
.two-col:not(.alt) .visual-bleed img,
.split .visual-bleed:first-child img{
  -webkit-mask-image:radial-gradient(105% 120% at 34% 52%, #000 22%, rgba(0,0,0,.55) 54%, transparent 82%);
          mask-image:radial-gradient(105% 120% at 34% 52%, #000 22%, rgba(0,0,0,.55) 54%, transparent 82%);
}
@media(max-width:820px){
  .visual-bleed img,
  .split .visual-bleed:first-child img,
  .split .visual-bleed:last-child img{
    -webkit-mask-image:radial-gradient(130% 110% at 50% 50%, #000 28%, rgba(0,0,0,.55) 58%, transparent 88%) !important;
            mask-image:radial-gradient(130% 110% at 50% 50%, #000 28%, rgba(0,0,0,.55) 58%, transparent 88%) !important;
  }
}

/* 7 — Insights: the dark third card becomes a soft tonal card, not a slab --- */
.insight-card .ic-body.flow-quiet-dark{
  background:color-mix(in oklab,var(--color-primary) 9%, transparent) !important;color:var(--color-text) !important;
}
[data-theme='dark'] .insight-card .ic-body.flow-quiet-dark{
  background:color-mix(in oklab,var(--color-surface-2) 65%, transparent) !important;
}
.insight-card .ic-body.flow-quiet-dark h3{color:var(--color-primary) !important}
.insight-card .ic-body.flow-quiet-dark p{color:var(--color-text-muted) !important}
.insight-card .ic-body.flow-quiet-dark .ic-cat{color:var(--color-accent) !important}
.insight-card .ic-body.flow-quiet-dark .ic-meta{color:var(--color-text-faint) !important}

/* 8 — CTA: dissolve the crimson box into an open, centered editorial close --- */
.cta-band.flow-cta{background:transparent !important;border-radius:0;overflow:visible}
/* wash removed — closing CTA is centered editorial text on the page canvas */
.cta-band.flow-cta::before{display:none}
.cta-band.flow-cta .inner{grid-template-columns:1fr;text-align:center;justify-items:center;gap:var(--space-6);
  padding-block:clamp(var(--space-8),3.5vw,var(--space-12))}
.cta-band.flow-cta h2{color:var(--color-primary);font-size:var(--text-3xl);max-width:18ch}
.cta-band.flow-cta p{color:var(--color-text-muted);max-width:54ch;font-size:var(--text-lg)}
.cta-band.flow-cta .cta-actions{justify-content:center}
.cta-band.flow-cta .btn-solid-light{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.cta-band.flow-cta .btn-solid-light:hover{background:var(--color-accent-hover)}
.cta-band.flow-cta .btn-light{background:transparent;color:var(--color-primary);border-color:var(--color-border)}
.cta-band.flow-cta .btn-light:hover{border-color:var(--color-primary);background:color-mix(in oklab,var(--color-surface) 60%,transparent)}

/* 9 — Hairline section dividers: hint at structure without hard edges ------- */
.flow-rule{position:relative}
.flow-rule::before{
  content:"";position:absolute;top:0;left:clamp(var(--space-5),5vw,var(--space-16));right:clamp(var(--space-5),5vw,var(--space-16));
  height:1px;background:linear-gradient(90deg,transparent,var(--color-divider) 18%,var(--color-divider) 82%,transparent);
}

/* 10 — The paired audience cards both read as quiet light cards on the canvas;
   no dark navy block creating a hard contrast slab next to its sibling. */
.audience-card.dark{
  background:var(--color-surface) !important;
  border:1px solid var(--color-border) !important;
  color:var(--color-text) !important;
}
.audience-card.dark h3{color:var(--color-primary) !important}
[data-theme="dark"] .audience-card.dark h3{color:#fff !important}
.audience-card.dark p{color:var(--color-text-muted) !important}
.audience-card.dark .ac-icon{background:var(--color-accent-soft) !important;color:var(--color-accent) !important}

/* 11 — Page-head is now light on the single page canvas; no bottom fade band */
.page-head.flow-head{overflow:visible}
.page-head.flow-head::after{display:none}
.page-head.flow-head .wrap{position:relative;z-index:3}

/* Newsletter close — open editorial composition, no hard box */
.form-shell.form-open{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:clamp(var(--space-8),5vw,var(--space-16)) clamp(var(--space-4),4vw,var(--space-8));
  position:relative;
}
.form-shell.form-open::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 30%, rgba(47,93,138,0.07), transparent 70%);
}
.form-shell.form-open input{
  background:var(--color-surface) !important;
  box-shadow:var(--shadow-sm);
}

/* ============================================================
   PAGE HERO — integrated blended background photo (v3)
   Replaces the navy page-head on subject pages. The photo lives
   only in the hero/top portion, bleeds from the right, and fades
   into the page below so the rest scrolls in editorial flow.
   Per-page image set via --hero-img.
   ============================================================ */
/* ------------------------------------------------------------------
   LAYERED BACKGROUND HERO (v4)
   The photo is a FULL-BLEED layer that stays anchored in the background
   while the content scrolls over it (fixed attachment on desktop, smooth
   scroll-anchored fallback on mobile). A navy-to-transparent scrim keeps
   text fully readable, and a soft bottom fade melts the photo into the
   page below so the page reads as one continuous surface, never a box. */
/* The interior hero now mirrors the HOMEPAGE blended hero exactly:
   it sits on the SAME single page background, with the page-relevant photo
   anchored to the right and softly faded into that background on the left
   where the dark-on-light copy sits. No dark slab, no scrim, no bottom-fade
   band — the page reads as one continuous canvas. */
.page-hero{
  position:relative;
  color:var(--color-text);
  overflow:hidden;
  isolation:isolate;
  background:var(--color-bg);
  /* a true hero: substantial height so the photo reads as a full background.
     Content is TOP-aligned (not centered) so the headline begins right under
     the nav, exactly like the homepage hero — no empty space at the top. */
  display:flex;
  align-items:flex-start;
  min-height:clamp(520px,58vh,680px);
}
/* the photo: anchored to the right edge, ~66% wide, like the homepage hero */
.page-hero .ph-photo{
  position:absolute;inset:0 0 0 auto;
  width:66%;
  background-image:var(--hero-img);
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:0;
}
/* horizontal fade: solid page background on the left under the copy, fully
   transparent over the photo on the right — the image dissolves INTO the page,
   not a rounded card sitting on top of it. */
.page-hero .ph-fade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* soft bottom fade so the photo melts into the page — no hard cutoff line */
    linear-gradient(180deg, transparent 62%, color-mix(in oklab,var(--color-bg) 55%,transparent) 86%, var(--color-bg) 100%),
    /* horizontal fade: solid page bg on the left under the copy, transparent over the photo */
    linear-gradient(90deg,
      var(--color-bg) 0%,
      var(--color-bg) 30%,
      color-mix(in oklab,var(--color-bg) 85%,transparent) 44%,
      color-mix(in oklab,var(--color-bg) 35%,transparent) 58%,
      transparent 74%);
}
/* no separate bottom band — the hero already shares the page background */
.page-hero .ph-base{display:none}
/* content begins high under the nav (top-aligned), with a modest top padding
   that matches the homepage hero — no oversized empty band before the headline. */
.page-hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(var(--space-8),3vw,var(--space-10)) clamp(var(--space-12),5vw,var(--space-16))}
/* the section directly after a hero gets a reduced top so the transition is a
   consistent, moderate gap rather than two large paddings added together. */
.page-hero + section{padding-top:clamp(var(--space-8),4vw,var(--space-14)) !important}
.page-hero .ph-copy{max-width:600px}
.page-hero .crumb{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.05em;margin-bottom:var(--space-4)}
.page-hero .crumb a{color:var(--color-text-muted)}
.page-hero .crumb a:hover{color:var(--color-primary)}
.page-hero .eyebrow{color:var(--color-accent)}
.page-hero .eyebrow::before{background:var(--color-accent)}
.page-hero h1{color:var(--color-primary);font-size:var(--text-3xl);max-width:18ch}
.page-hero .lead{color:var(--color-text-muted);margin-top:var(--space-5);max-width:44ch}
.page-hero .hero-ctas{margin-top:var(--space-8)}

/* dark mode: same idea — photo fades into the dark page background */
[data-theme="dark"] .page-hero{background:var(--color-bg)}
[data-theme="dark"] .page-hero h1{color:#fff}
[data-theme="dark"] .page-hero .lead{color:var(--color-text-muted)}

/* mobile: photo sits faintly behind a top-to-bottom fade so the copy stays
   readable on the single page background, matching the homepage hero. */
@media(max-width:880px){
  .page-hero{min-height:clamp(440px,62vh,560px)}
  .page-hero .ph-photo{
    width:100%;
    background-position:72% center;
    opacity:.5;
  }
  /* on mobile the photo sits behind the copy: solid at the top under the text,
     fading down so the image is present but the copy stays readable. */
  .page-hero .ph-fade{
    background:linear-gradient(180deg,
      var(--color-bg) 0%,
      color-mix(in oklab,var(--color-bg) 90%,transparent) 38%,
      color-mix(in oklab,var(--color-bg) 72%,transparent) 72%,
      var(--color-bg) 100%);
  }
  .page-hero .ph-copy{max-width:none}
  .page-hero h1{font-size:var(--text-2xl)}
}

/* page-hero secondary CTA now sits on the light page background, so use the
   standard outlined light button treatment (dark text, hairline border). */
.page-hero .btn-light{
  background:transparent;
  color:var(--color-primary);
  border-color:var(--color-border);
  box-shadow:none;
}
.page-hero .btn-light:hover{
  background:color-mix(in oklab,var(--color-surface) 60%,transparent);
  border-color:var(--color-primary);
  transform:translateY(-1px);
}

/* ============================================================
   PROOF BAND — the "do business with us" moment
   A full-bleed, image-backed editorial statement: a large, confident
   line of copy over a darkened page-relevant photo, with a row of
   credibility points. Top and bottom edges are feathered into the page
   background so it reads as an integrated chapter, never a hard strip.
   Per-page image set via --proof-img.
   ============================================================ */
/* The proof moment is now a LIGHT editorial statement that sits on the single
   page canvas — NOT a dark full-bleed slab. The page-relevant photo is anchored
   to the right and softly blended into the page background on the left, exactly
   like the homepage / interior hero. Dark text on the page background, no scrim,
   no full-viewport band, no feathered top/bottom edges. */
.proof-band{
  position:relative;
  isolation:isolate;
  color:var(--color-text);
  padding-block:clamp(var(--space-16),8vw,var(--space-28));
  overflow:hidden;
  background:var(--color-bg);
}
.proof-band .pb-photo{
  position:absolute;inset:0 0 0 auto;z-index:0;
  width:58%;
  background-image:var(--proof-img);
  background-size:cover;background-position:right center;background-repeat:no-repeat;
}
/* horizontal fade: solid page bg on the left under the statement, transparent
   over the photo on the right — the image dissolves INTO the page. */
.proof-band .pb-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    var(--color-bg) 0%,
    var(--color-bg) 42%,
    color-mix(in oklab,var(--color-bg) 88%,transparent) 54%,
    color-mix(in oklab,var(--color-bg) 42%,transparent) 66%,
    transparent 82%);
}
/* no feathered band edges — the section already shares the page background */
.proof-band .pb-edges{display:none}
.proof-band .wrap{position:relative;z-index:1}
.proof-band .pb-inner{max-width:600px}
.proof-band .eyebrow{color:var(--color-accent)}
.proof-band .eyebrow::before{background:var(--color-accent)}
.proof-band .pb-statement{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:1.08;
  font-weight:440;
  color:var(--color-primary);
  margin:var(--space-4) 0 0;
  max-width:20ch;
}
[data-theme="dark"] .proof-band .pb-statement{color:#fff}
.proof-band .pb-sub{
  color:var(--color-text-muted);
  font-size:var(--text-lg);
  margin-top:var(--space-6);
  max-width:48ch;
}
.proof-band .pb-points{
  display:flex;flex-wrap:wrap;gap:clamp(var(--space-6),4vw,var(--space-12));
  margin-top:var(--space-10);
  padding-top:var(--space-8);
  border-top:1px solid var(--color-divider);
}
.proof-band .pb-point{max-width:24ch}
.proof-band .pb-point .pk{
  display:block;font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);line-height:1;margin-bottom:var(--space-2)
}
[data-theme="dark"] .proof-band .pb-point .pk{color:#fff}
.proof-band .pb-point .pv{display:block;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
@media(max-width:880px){
  .proof-band .pb-photo{width:100%;background-position:72% center;opacity:.38}
  .proof-band .pb-scrim{
    background:linear-gradient(180deg,
      var(--color-bg) 0%,
      color-mix(in oklab,var(--color-bg) 92%,transparent) 45%,
      color-mix(in oklab,var(--color-bg) 82%,transparent) 100%);
  }
  .proof-band .pb-inner{max-width:none}
  .proof-band .pb-statement{font-size:var(--text-2xl)}
  .proof-band .pb-points{gap:var(--space-6)}
}

/* ------------------------------------------------------------------
   FLOW HELPERS (v4) — soften the stacked-block feel further
   ------------------------------------------------------------------ */
/* A quiet directional wash that drifts across a section so adjacent
   sections feel like one continuous canvas rather than separate strips. */
/* drift wash removed — no tonal field between sections */
.flow-drift{position:relative}
.flow-drift::before{display:none}
/* let a section's content rise slightly into the section above for overlap */
.flow-overlap{margin-top:calc(-1 * clamp(var(--space-10),6vw,var(--space-20)));position:relative;z-index:2}
/* a softly-floating editorial figure that fades into the page on all edges */
.float-figure{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:16/10;
  box-shadow:0 40px 80px -50px rgba(19,36,61,.55);
}
.float-figure img{width:100%;height:100%;object-fit:cover;display:block}
.float-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in oklab,var(--color-bg) 22%,transparent));
}
[data-theme='dark'] .float-figure{box-shadow:0 44px 90px -54px rgba(0,0,0,.8)}