/* ============================================================
   OSINTERS THEME — MAIN STYLESHEET  v1.2
   Adaptive logo system:
     .brand__logo--dark   = original transparent PNG (dark ink)  → light backgrounds
     .brand__logo--light  = white PNG variant (white ink)        → dark hero / dark footer
   Header states managed by JS (data-header-state="dark"|"light").
   ============================================================ */

/* LAYER 1 — PRIMITIVE PALETTE */
:root{
  --navy:       #0C1E39;
  --teal:       #007874;
  --white:      #FFFFFF;
  --slate:      #5A6E88;
  --nearblack:  #090A0D;
  --warmaccent: #C46A2B;
  --mint:       #BFE0DD;
  --offwhite:   #F1ECE3;
  --warm-bg:     #F1ECE3;
  --warm-accent: var(--warmaccent);
  --warm-grey:   var(--nearblack);
  --warm-dark:   #1C1E2E;
  --warm-slate:  #6C7995;
}

/* LAYER 2 — SEMANTIC TOKENS (Palette A default) */
:root{
  --surface-0: var(--white);
  --surface-1: color-mix(in srgb, var(--mint) 28%, var(--white));
  --surface-2: color-mix(in srgb, var(--mint) 16%, var(--white));
  --surface-3: color-mix(in srgb, var(--mint) 10%, rgba(255,255,255,.88));
  --border-subtle: color-mix(in srgb, var(--slate) 22%, transparent);
  --card-border:   color-mix(in srgb, var(--mint) 52%,
                     color-mix(in srgb, var(--slate) 22%, transparent));
  --card-shadow:   0 8px 28px color-mix(in srgb, var(--mint) 32%, rgba(12,30,57,.08));
  --card-accent:       color-mix(in srgb, var(--mint) 72%, var(--teal));
  --card-accent-hover: var(--teal);
  --text-muted: rgba(11,19,32,.72);
  --accent: var(--teal);
  --chip-bg:     color-mix(in srgb, var(--mint) 42%, var(--white));
  --chip-border: color-mix(in srgb, var(--teal) 28%, transparent);
  --chip-text:   color-mix(in srgb, var(--navy) 82%, var(--teal));
  --button-ghost-bg:
    linear-gradient(160deg,
      color-mix(in srgb, var(--mint) 22%, rgba(255,255,255,.94)),
      rgba(255,255,255,.72));
  --button-ghost-border: color-mix(in srgb, var(--teal) 32%,
                           color-mix(in srgb, var(--slate) 18%, transparent));
  --button-ghost-text: var(--navy);
  --link-color: var(--teal);
  --link-hover: color-mix(in srgb, var(--teal) 80%, var(--navy));
  --cta-glow:
    radial-gradient(ellipse 1300px 560px at 12% 34%,
      rgba(0,120,116,.56), transparent 56%),
    radial-gradient(ellipse 740px 400px at 80% 70%,
      rgba(191,224,221,.28), transparent 62%);
  --footer-bg:         var(--navy);
  --footer-border-top: color-mix(in srgb, var(--teal) 58%, transparent);
  --footer-col-divider:color-mix(in srgb, var(--mint) 38%, transparent);
  --hero-overlay-1:
    linear-gradient(100deg,
      rgba(12,30,57,.90) 0%, rgba(12,30,57,.58) 46%, rgba(12,30,57,.10) 100%);
  --hero-overlay-2:
    radial-gradient(ellipse 860px 640px at 52% 68%,
      rgba(90,110,136,.26), transparent 72%);
  --hero-overlay-3:
    radial-gradient(ellipse 1000px 500px at 76% 18%,
      rgba(0,120,116,.32), transparent 60%);
  /* legacy aliases */
  --bg: var(--surface-0); --bg-alt: var(--surface-1);
  --hair: var(--border-subtle); --shadow: var(--card-shadow);
  --radius: 18px; --container: 1160px;
  --text: #0B1320; --muted: var(--text-muted);
  --header-surface:        var(--surface-3);
  --header-surface-strong: color-mix(in srgb, var(--mint) 8%, rgba(255,255,255,.96));
  --header-shadow:         0 10px 28px rgba(12,30,57,.08);
  --header-hair:           var(--border-subtle);
  --footer-link:       color-mix(in srgb, var(--mint) 80%, transparent);
  --footer-link-hover: var(--mint);
}

/* PALETTE B */
html[data-palette="B"]{
  --surface-0: var(--offwhite);
  --surface-1: color-mix(in srgb, var(--mint) 22%, var(--offwhite));
  --surface-2: color-mix(in srgb, var(--mint) 18%, var(--offwhite));
  --surface-3: color-mix(in srgb, var(--mint)  8%, rgba(241,236,227,.90));
  --border-subtle: color-mix(in srgb, var(--slate) 19%, transparent);
  --card-border:   color-mix(in srgb, var(--mint) 46%,
                     color-mix(in srgb, var(--slate) 18%, transparent));
  --card-shadow:   0 8px 28px color-mix(in srgb, var(--mint) 26%, rgba(12,30,57,.07));
  --chip-bg:     color-mix(in srgb, var(--mint) 38%, var(--offwhite));
  --chip-border: color-mix(in srgb, var(--teal) 24%, transparent);
  --header-surface:        var(--surface-3);
  --header-surface-strong: color-mix(in srgb, var(--mint) 6%, rgba(241,236,227,.97));
  --hero-overlay-1:
    linear-gradient(100deg,
      rgba(12,30,57,.86) 0%, rgba(12,30,57,.52) 46%, rgba(12,30,57,.08) 100%);
  --hero-overlay-2:
    radial-gradient(ellipse 860px 640px at 52% 68%,
      rgba(90,110,136,.22), transparent 72%);
  --hero-overlay-3:
    radial-gradient(ellipse 1000px 500px at 76% 18%,
      rgba(0,120,116,.26), transparent 60%);
}

/* PALETTE C — warm / premium */
html[data-palette="C"]{
  --surface-0: var(--warm-bg);
  --surface-1: color-mix(in srgb, var(--warmaccent)  8%, var(--warm-bg));
  --surface-2: color-mix(in srgb, var(--white)       20%, var(--warm-bg));
  --surface-3: color-mix(in srgb, var(--warm-dark)    8%, rgba(241,236,227,.90));
  --border-subtle: color-mix(in srgb, var(--warm-slate) 20%, transparent);
  --card-border:   color-mix(in srgb, var(--warmaccent) 20%,
                     color-mix(in srgb, var(--warm-slate) 18%, transparent));
  --card-shadow:   0 8px 28px color-mix(in srgb, var(--warmaccent) 12%, rgba(28,30,46,.08));
  --card-accent:       color-mix(in srgb, var(--warmaccent) 68%, transparent);
  --card-accent-hover: var(--warmaccent);
  --text-muted: rgba(28,30,46,.70);
  --accent: var(--warmaccent);
  --chip-bg:     color-mix(in srgb, var(--warmaccent) 14%, var(--warm-bg));
  --chip-border: color-mix(in srgb, var(--warmaccent) 30%, transparent);
  --chip-text:   color-mix(in srgb, var(--warm-dark) 88%, var(--warmaccent));
  --button-ghost-bg:
    linear-gradient(160deg,
      color-mix(in srgb, var(--warmaccent) 10%, rgba(255,255,255,.94)),
      rgba(255,255,255,.74));
  --button-ghost-border: color-mix(in srgb, var(--warmaccent) 28%,
                           color-mix(in srgb, var(--warm-slate) 18%, transparent));
  --button-ghost-text: var(--warm-dark);
  --link-color: var(--warm-dark);
  --link-hover: var(--warmaccent);
  --cta-glow:
    radial-gradient(ellipse 1300px 560px at 12% 34%,
      rgba(196,106,43,.46), transparent 56%),
    radial-gradient(ellipse 740px 400px at 80% 70%,
      rgba(196,106,43,.22), transparent 62%);
  --footer-bg:          var(--warm-dark);
  --footer-border-top:  color-mix(in srgb, var(--warmaccent) 52%, transparent);
  --footer-col-divider: color-mix(in srgb, var(--warmaccent) 36%, transparent);
  --footer-link:        rgba(241,236,227,.70);
  --footer-link-hover:  var(--warmaccent);
  --header-surface:        var(--surface-3);
  --header-surface-strong: color-mix(in srgb, var(--warm-dark) 6%, rgba(241,236,227,.97));
  --hero-overlay-1:
    linear-gradient(100deg,
      rgba(28,30,46,.92) 0%, rgba(28,30,46,.58) 46%, rgba(28,30,46,.10) 100%);
  --hero-overlay-2:
    radial-gradient(ellipse 860px 640px at 52% 68%,
      rgba(108,121,149,.24), transparent 72%);
  --hero-overlay-3:
    radial-gradient(ellipse 1000px 500px at 76% 18%,
      rgba(196,106,43,.22), transparent 60%);
}

/* PALETTE C — component overrides */
html[data-palette="C"] .btn{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--warm-dark) 88%, #2e3050), var(--warm-dark));
  border-color: color-mix(in srgb, var(--warm-dark) 85%, #000);
}
html[data-palette="C"] .btn:hover{
  box-shadow: 0 14px 30px rgba(196,106,43,.22), 0 4px 10px rgba(28,30,46,.18);
}
html[data-palette="C"] .btn--ghost:hover{
  border-color: color-mix(in srgb, var(--warmaccent) 52%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--warmaccent) 16%, rgba(255,255,255,.96)),
    rgba(255,255,255,.82));
}
html[data-palette="C"] .chip{cursor:pointer}
html[data-palette="C"] .chip:hover{
  border-color: color-mix(in srgb, var(--warmaccent) 52%, transparent);
  background: color-mix(in srgb, var(--warmaccent) 20%, var(--warm-bg));
}
html[data-palette="C"] .card:hover,
html[data-palette="C"] .work:hover,
html[data-palette="C"] .insight:hover{
  box-shadow: 0 18px 40px rgba(196,106,43,.18);
}
html[data-palette="C"] .btn--pill{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--warmaccent) 18%, var(--warm-bg)),
    color-mix(in srgb, var(--warmaccent) 10%, var(--warm-bg)));
  border-color: color-mix(in srgb, var(--warmaccent) 30%, transparent);
}
html[data-palette="C"] .btn--pill:hover{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--warmaccent) 26%, var(--warm-bg)),
    color-mix(in srgb, var(--warmaccent) 18%, var(--warm-bg)));
  box-shadow: 0 8px 18px rgba(196,106,43,.14);
}
html[data-palette="C"] .hero__kicker::before{ background: var(--warmaccent) }
html[data-palette="C"] .hero{ border-bottom: 2px solid color-mix(in srgb, var(--warmaccent) 40%, transparent) }
html[data-palette="C"] .panel--dark{ background: var(--warm-dark) }
html[data-palette="C"] .panel--dark .panel__kicker{ color: color-mix(in srgb, var(--warmaccent) 80%, #fff) }
html[data-palette="C"] .endorse{ box-shadow: 0 18px 48px rgba(196,106,43,.12) }
html[data-palette="C"] .endorse__badge{ background: color-mix(in srgb, var(--warmaccent) 14%, var(--surface-0)) }
html[data-palette="C"] .mini{
  background: color-mix(in srgb, var(--warmaccent) 12%, var(--surface-0));
  color: color-mix(in srgb, var(--warm-dark) 82%, var(--warmaccent));
}
html[data-palette="C"] .cta{
  background: var(--cta-glow), linear-gradient(100deg, rgba(28,30,46,1) 0%, rgba(28,30,46,.94) 100%);
}
html[data-palette="C"] .page-numbers.current{ background: var(--warm-dark) }

/* ============================================================
   BASE RESET
   ============================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text); background: var(--surface-0); line-height:1.45;
}
main{display:block}
a{color:inherit}
img{max-width:100%; display:block}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#fff; z-index:9999; border-radius:10px; box-shadow:var(--shadow)}
.container{width:min(var(--container), calc(100% - 48px)); margin-inline:auto}

/* ============================================================
   HEADER — BASE
   ============================================================ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .2s ease, border-color .2s ease,
             box-shadow .2s ease, backdrop-filter .2s ease;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.brand{display:flex; align-items:center; text-decoration:none}
.brand__logo{height:34px; width:auto; display:block; transition:opacity .2s ease}

/* ── Logo adaptive display (default: light background context) ── */
.brand__logo--dark { display:block  }   /* default (dark-ink) logo: visible */
.brand__logo--light{ display:none   }   /* light (white) logo: hidden by default */

/* ── When header is in dark-hero state (JS adds data-header-state="dark") ── */
.header[data-header-state="dark"] .brand__logo--dark { display:none  }
.header[data-header-state="dark"] .brand__logo--light{ display:block }

/* ── NAV ── */
.nav{display:flex; align-items:center; gap:18px; font-size:14px; color:rgba(11,19,32,.78)}
.nav a{position:relative; text-decoration:none; transition:color .18s ease}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease; opacity:.72;
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}

/* Nav links turn light in dark-hero state */
.header[data-header-state="dark"] .nav a{ color:rgba(255,255,255,.88) }
.header[data-header-state="dark"] .nav a:hover{ color:#fff }

.burger{display:none; background:transparent; border:0; padding:10px; border-radius:12px}
.burger span{display:block; width:22px; height:2px; background:rgba(11,19,32,.7); margin:5px 0; border-radius:2px; transition:background .18s ease}
.header[data-header-state="dark"] .burger span{ background:rgba(255,255,255,.85) }

/* ── Mobile nav ── */
.mobile{
  position:absolute; top:100%; left:0; right:0;
  border-top:1px solid var(--border-subtle);
  background:color-mix(in srgb, var(--header-surface-strong) 94%, transparent);
  backdrop-filter:blur(14px); box-shadow:0 18px 36px rgba(12,30,57,.10);
}
.mobile__inner{display:flex; flex-direction:column; gap:10px; padding:14px 0 18px}
.mobile__inner a{text-decoration:none; padding:10px 12px; border-radius:12px; transition:background .14s ease}
.mobile__inner a:hover{background:var(--chip-bg)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 16px; border-radius:14px; text-decoration:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--navy) 88%, #173258), var(--navy));
  color:#fff; border:1px solid color-mix(in srgb, var(--navy) 85%, #000);
  box-shadow:0 10px 24px rgba(12,30,57,.12); font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease,
             border-color .15s ease, color .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(12,30,57,.18)}
.btn:active{transform:none; box-shadow:0 6px 14px rgba(12,30,57,.12)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.btn--ghost{
  background:var(--button-ghost-bg); color:var(--button-ghost-text);
  border:1px solid var(--button-ghost-border); box-shadow:0 4px 12px rgba(12,30,57,.04);
}
.btn--ghost:hover{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--mint) 32%, rgba(255,255,255,.96)),
    rgba(255,255,255,.84));
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
}
.btn--pill{
  border-radius:999px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--teal) 22%, var(--surface-0)),
    color-mix(in srgb, var(--teal) 14%, var(--surface-0)));
  color:var(--navy); border:1px solid color-mix(in srgb, var(--teal) 28%, transparent);
  box-shadow:0 6px 14px rgba(0,120,116,.08);
}
.btn--pill:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--teal) 30%, var(--surface-0)),
    color-mix(in srgb, var(--teal) 22%, var(--surface-0)));
  box-shadow:0 8px 18px rgba(0,120,116,.12);
}
.btn--sm{padding:10px 12px; font-size:13px}
.btn--lg{padding:14px 18px; border-radius:16px}
.btn--ghostOnDark{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:#fff; border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 24px rgba(6,14,28,.10);
}
.btn--ghostOnDark:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.32);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:78vh; display:flex; align-items:stretch; overflow:hidden}
.hero__bg{
  position:absolute; inset:0;
  background-image: var(--hero-overlay-3), var(--hero-overlay-2), var(--hero-overlay-1), url("../img/hero_bg.jpg");
  background-size:cover; background-position:center; transform:scale(1.02);
}
.hero__inner{position:relative; padding:64px 0 52px; color:#fff; max-width:920px}
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.82);
}
.hero__kicker::before{content:""; width:34px; height:2px; background:var(--mint); border-radius:2px}
.hero__title{margin:16px 0 12px; font-size:clamp(36px, 4.6vw, 64px); line-height:1.03; letter-spacing:-0.02em}
.hero__lead{margin:0; font-size:clamp(16px, 1.55vw, 20px); color:rgba(255,255,255,.82); max-width:66ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.hero__stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:28px}
.stat{
  background:rgba(255,255,255,.08); border:1px solid rgba(191,224,221,.28);
  border-radius:16px; padding:14px; backdrop-filter:blur(6px);
}
.stat__num{font-weight:700; font-size:16px}
.stat__label{font-size:13px; color:rgba(255,255,255,.78); margin-top:6px}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{border-bottom:1px solid var(--border-subtle); background:color-mix(in srgb, var(--surface-1) 60%, var(--surface-0))}
.trustbar__inner{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; padding:16px 0}
.trustbar__label{
  font-size:13px; color:var(--slate); letter-spacing:.02em; padding-right:4px;
  border-right:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.trustbar__chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  background:var(--chip-bg); border:1px solid var(--chip-border);
  padding:7px 11px; border-radius:999px; font-size:13px;
  color:var(--chip-text); font-weight:500;
  transition:background .14s ease, border-color .14s ease;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:72px 0}
.section--alt{background:var(--surface-1)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.section__head h2{margin:0; font-size:clamp(26px, 2.8vw, 38px); letter-spacing:-0.015em}
.section__head p{margin:0; color:var(--text-muted); max-width:58ch}

/* ── Service cards ── */
.grid{display:grid; gap:16px}
.grid--cards{grid-template-columns:repeat(4, minmax(0,1fr))}
.card{
  background:var(--surface-2); border:1px solid var(--card-border);
  border-top:3px solid var(--card-accent); border-radius:var(--radius);
  padding:18px; box-shadow:var(--card-shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px color-mix(in srgb, var(--mint) 36%, rgba(12,30,57,.12));
  border-top-color:var(--card-accent-hover);
}
.card h3{margin:0 0 8px; font-size:17px}
.card p{margin:0 0 10px; color:var(--text-muted); font-size:14px}
.link{color:var(--link-color); text-decoration:none; font-weight:600; font-size:14px}
.link:hover{text-decoration:underline; color:var(--link-hover)}

.band{
  margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px; border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 10%, var(--surface-0)) 0%,
    color-mix(in srgb, var(--mint)   20%, var(--surface-0)) 100%);
}
.band__copy h3{margin:0 0 6px}
.band__copy p{margin:0; color:var(--text-muted)}

/* ── Industries split ── */
.split{display:grid; gap:16px; grid-template-columns:1fr 1fr}
.panel{
  border-radius:var(--radius); border:1px solid var(--card-border);
  background:var(--surface-2); padding:22px; box-shadow:var(--card-shadow);
}
.panel--dark{background:var(--navy); color:#fff; border-color:rgba(255,255,255,.12)}
html[data-palette="C"] .panel--dark{background:var(--warm-dark)}
.panel__kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.panel--dark .panel__kicker{color:var(--mint)}
html[data-palette="C"] .panel--dark .panel__kicker{color:color-mix(in srgb, var(--warmaccent) 80%, #fff)}
.panel h3{margin:10px 0 8px; font-size:22px}
.panel p{margin:0 0 12px; color:var(--text-muted)}
.panel--dark p{color:rgba(255,255,255,.78)}
.list{margin:0 0 14px; padding-left:18px; color:var(--text-muted); font-size:14px}
.list--light{color:rgba(255,255,255,.78)}
.list li{margin:6px 0}

/* ── Work cards ── */
.grid--work{grid-template-columns:repeat(3, minmax(0,1fr))}
.work{
  background:var(--surface-2); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--card-shadow);
  transition:box-shadow .15s ease, transform .15s ease;
}
.work:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px color-mix(in srgb, var(--mint) 36%, rgba(12,30,57,.12));
}
.work__meta{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.work h3{margin:10px 0 8px; font-size:18px}
.work p{margin:0 0 12px; color:var(--text-muted); font-size:14px}
.work__tags{display:flex; flex-wrap:wrap; gap:8px}
.work__tags span{
  font-size:12px; padding:5px 9px; border-radius:999px;
  background:var(--chip-bg); border:1px solid var(--chip-border);
  color:var(--chip-text); font-weight:500;
}

/* ── 2care ── */
.endorse{
  background:var(--surface-2); border:1px solid var(--card-border);
  border-radius:calc(var(--radius) + 8px); padding:26px;
  box-shadow:0 18px 48px color-mix(in srgb, var(--mint) 28%, rgba(12,30,57,.10));
}
html[data-palette="C"] .endorse{box-shadow:0 18px 48px rgba(196,106,43,.12)}
.endorse__badge{
  display:inline-flex; align-items:baseline; gap:10px; padding:8px 12px;
  border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background:color-mix(in srgb, var(--mint) 48%, var(--surface-0)); font-weight:700;
}
html[data-palette="C"] .endorse__badge{background:color-mix(in srgb, var(--warmaccent) 14%, var(--surface-0))}
.endorse__badge span{font-weight:500; color:rgba(11,19,32,.68)}
.endorse h2{margin:14px 0 10px; font-size:clamp(24px, 2.6vw, 36px)}
.endorse p{margin:0 0 16px; color:var(--text-muted); max-width:70ch}
.grid--mini{grid-template-columns:repeat(4, minmax(0,1fr)); margin:14px 0 18px}
.mini{
  padding:12px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background:color-mix(in srgb, var(--mint) 34%, var(--surface-0));
  font-weight:600; font-size:13px;
  color:color-mix(in srgb, var(--navy) 82%, var(--teal));
}
html[data-palette="C"] .mini{
  background:color-mix(in srgb, var(--warmaccent) 12%, var(--surface-0));
  color:color-mix(in srgb, var(--warm-dark) 82%, var(--warmaccent));
}
.endorse__cta{display:flex; gap:12px; flex-wrap:wrap}

/* ── Insights ── */
.grid--insights{grid-template-columns:repeat(3, minmax(0,1fr))}
.insight{
  background:var(--surface-2); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--card-shadow);
  transition:box-shadow .15s ease, transform .15s ease;
}
.insight:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px color-mix(in srgb, var(--mint) 36%, rgba(12,30,57,.12));
}
.insight__meta{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.insight h3{margin:10px 0 8px}
.insight p{margin:0; color:var(--text-muted); font-size:14px}

/* ── CTA band ── */
.cta{
  background: var(--cta-glow), linear-gradient(100deg, rgba(12,30,57,1) 0%, rgba(12,30,57,.94) 100%);
  color:#fff; padding:64px 0;
}
html[data-palette="C"] .cta{
  background: var(--cta-glow), linear-gradient(100deg, rgba(28,30,46,1) 0%, rgba(28,30,46,.94) 100%);
}
.cta__inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.cta h2{margin:0 0 8px; font-size:clamp(26px, 3vw, 40px); letter-spacing:-0.015em}
.cta p{margin:0; color:rgba(255,255,255,.82); max-width:66ch}
.cta__actions{display:flex; gap:12px; flex-wrap:wrap}

/* ============================================================
   FOOTER — always dark background → uses light logo
   ============================================================ */
.footer{background:var(--footer-bg); color:#fff; padding:42px 0; border-top:2px solid var(--footer-border-top)}
.footer__inner{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:18px}
.footer__logo{height:28px; margin-bottom:10px; display:block}
.footer__col a{display:block; color:var(--footer-link); text-decoration:none; margin:8px 0; transition:color .14s ease}
.footer__col a:hover{color:var(--footer-link-hover)}
.footer__title{font-weight:700; margin-bottom:10px; color:#fff; padding-bottom:8px; border-bottom:1px solid var(--footer-col-divider)}
.footer__small{font-size:13px; color:rgba(255,255,255,.58); line-height:1.6}
.footer__col p{margin:0; color:rgba(255,255,255,.72)}

/* ============================================================
   INNER-PAGE CONTENT
   ============================================================ */
.entry-content{padding:24px}
.entry-content h1,.entry-content h2,.entry-content h3{letter-spacing:-0.015em}
.entry-content p{color:var(--text-muted)}
.page-block-gap{margin-top:32px}
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--card-border);
  font-size:14px; font-weight:500; text-decoration:none; margin:0 3px;
  transition:background .14s ease;
}
.page-numbers.current{background:var(--navy); color:#fff; border-color:transparent}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .nav{display:none} .burger{display:block}
  .grid--cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid--work{grid-template-columns:1fr}
  .grid--insights{grid-template-columns:1fr}
  .grid--mini{grid-template-columns:repeat(2, minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr}
  .section__head{flex-direction:column; align-items:flex-start}
  .footer__inner{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .brand__logo{height:28px}
  .header__inner{padding:12px 0}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
}