/* ============================================================================
   Centric3 — design-tokens.css
   Auto-generated from ./designs/DESIGN-SYSTEM.md (locked --c3-* tokens from ./branding).
   Single source of truth for all 56 mockups. Tailwind v4 @theme mirrors these.
   Rules enforced here: single-coral (crimson retired) · CTA = coral-600 + white (NEVER
   white-on-coral-500) · body = slate-600 (7.58:1 AAA) · headings slate-900 · per-band
   FIXED dark/light (no OS theme) · semantic always pairs icon+label.
   ============================================================================ */
:root {
  /* ---- Coral (single brand red) ---- */
  --c3-coral-50:#FEF2F2; --c3-coral-100:#FDE3E3; --c3-coral-200:#FBC9C9; --c3-coral-300:#F79A9A;
  --c3-coral-400:#F26464; --c3-coral-500:#E54B4B; --c3-coral-600:#D93A3A; --c3-coral-700:#C0392B;
  --c3-coral-800:#9F2D22; --c3-coral-900:#7E241B; --c3-coral-950:#4A150F;
  /* ---- Navy (dark anchor) ---- */
  --c3-navy-950:#0B1220; --c3-navy-900:#111A2E; --c3-navy-800:#1B273F; --c3-navy-700:#2A3851;
  /* ---- Slate (text + surface) ---- */
  --c3-slate-50:#F8FAFC; --c3-slate-100:#F1F5F9; --c3-slate-200:#E2E8F0; --c3-slate-300:#CBD5E1;
  --c3-slate-400:#94A3B8; --c3-slate-500:#64748B; --c3-slate-600:#475569; --c3-slate-700:#334155;
  --c3-slate-800:#1E293B; --c3-slate-900:#0F172A; --c3-slate-950:#020617; --c3-white:#FFFFFF;
  /* ---- Semantic (each MUST pair icon + label, never color alone) ---- */
  --c3-success-700:#15803D; --c3-success-50:#F0FDF4;
  --c3-warning-700:#B45309; --c3-warning-50:#FFFBEB;
  --c3-error-600:#DC2626;   --c3-error-50:#FEF2F2;
  --c3-info-600:#2563EB;    --c3-info-50:#EFF6FF;

  /* ---- Semantic role aliases ---- */
  --c3-cta:var(--c3-coral-600); --c3-cta-hover:var(--c3-coral-700); --c3-cta-text:var(--c3-white);
  --c3-brand:var(--c3-coral-500);                 /* logo / large graphic ONLY — never white-text CTA fill */
  --c3-link-light:var(--c3-coral-700);            /* links on light surfaces (5.44:1) */
  --c3-link-dark:var(--c3-coral-400);             /* links on navy (6.05:1) */
  --c3-body:var(--c3-slate-600);                  /* body on light (7.58:1 AAA) */
  --c3-body-strong:var(--c3-slate-700);
  --c3-heading:var(--c3-slate-900);               /* headings on light (17.85:1) */
  --c3-muted:var(--c3-slate-500);
  --c3-bg:var(--c3-white);
  --c3-surface:var(--c3-slate-50);
  --c3-surface-2:var(--c3-slate-100);
  --c3-border:var(--c3-slate-200);
  --c3-border-strong:var(--c3-slate-300);
  /* dark-surface (navy-950) pairings */
  --c3-dark-bg:var(--c3-navy-950); --c3-dark-raised:var(--c3-navy-900); --c3-dark-border:var(--c3-navy-800);
  --c3-on-dark:var(--c3-white); --c3-on-dark-muted:var(--c3-slate-300); --c3-on-dark-caption:var(--c3-slate-400);

  /* ---- Type ---- */
  --c3-font-display:"Space Grotesk","Fira Sans",system-ui,sans-serif;
  --c3-font-body:"Inter","Roboto",system-ui,-apple-system,sans-serif;
  --c3-font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --c3-text-display-xl:4rem;  --c3-text-display-lg:3.25rem; --c3-text-h1:2.5rem; --c3-text-h2:2rem;
  --c3-text-h3:1.5rem; --c3-text-h4:1.25rem; --c3-text-body-lg:1.125rem; --c3-text-body:1rem;
  --c3-text-body-sm:.875rem; --c3-text-caption:.8125rem; --c3-text-eyebrow:.8125rem;
  --c3-text-code:.875rem; --c3-text-button:.9375rem;

  /* ---- Spacing (4px base) ---- */
  --c3-space-1:4px; --c3-space-2:8px; --c3-space-3:12px; --c3-space-4:16px; --c3-space-5:20px;
  --c3-space-6:24px; --c3-space-8:32px; --c3-space-10:40px; --c3-space-12:48px; --c3-space-16:64px;
  --c3-space-20:80px; --c3-space-24:96px; --c3-space-32:128px;
  /* ---- Radius / Elevation / Layout ---- */
  --c3-radius-sm:6px; --c3-radius-md:10px; --c3-radius-lg:14px; --c3-radius-xl:20px; --c3-radius-full:999px;
  --c3-shadow-sm:0 1px 2px rgba(11,18,32,.06); --c3-shadow-md:0 4px 12px rgba(11,18,32,.10);
  --c3-shadow-lg:0 12px 32px rgba(11,18,32,.16); --c3-shadow-coral:0 8px 24px rgba(217,58,58,.22);
  --c3-container:1280px; --c3-nav-h:72px; --c3-nav-h-condensed:56px;
  --c3-z-nav:100; --c3-z-ribbon:90; --c3-z-overlay:200; --c3-z-toast:300;
  --c3-ring:0 0 0 3px rgba(37,99,235,.45);        /* focus ring (info-600 @ .45) */
  /* ---- Icon sizes (referenced by .ic/.chev etc — MUST exist or SVGs render huge) ---- */
  --c3-icon-16:16px; --c3-icon-20:20px; --c3-icon-24:24px; --c3-icon-32:32px;
}

/* ---- Breakpoints (reference): sm 640 · md 768 · lg 1024 · xl 1280 ---- */

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body { font-family:var(--c3-font-body); font-size:var(--c3-text-body); line-height:1.6;
  background:var(--c3-bg); color:var(--c3-body); }
::selection { background:var(--c3-coral-100); color:var(--c3-coral-900); }
a { color:var(--c3-link-light); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:none; box-shadow:var(--c3-ring); border-radius:var(--c3-radius-sm); }
img,svg { display:block; max-width:100%; }
[hidden] { display:none !important; }   /* HTML hidden attribute must always win — prevents overlays/drawers bleeding at rest */

/* ---- Typography ---- */
h1,h2,h3,h4 { font-family:var(--c3-font-display); color:var(--c3-heading); letter-spacing:-.015em; line-height:1.12; }
h1 { font-size:var(--c3-text-h1); font-weight:600; }
h2 { font-size:var(--c3-text-h2); font-weight:600; line-height:1.18; letter-spacing:-.01em; }
h3 { font-size:var(--c3-text-h3); font-weight:500; line-height:1.25; letter-spacing:-.005em; }
h4 { font-size:var(--c3-text-h4); font-weight:500; line-height:1.3; letter-spacing:0; }
.display-xl { font-family:var(--c3-font-display); font-weight:700; font-size:var(--c3-text-display-xl); line-height:1.05; letter-spacing:-.02em; color:var(--c3-heading); }
.display-lg { font-family:var(--c3-font-display); font-weight:700; font-size:var(--c3-text-display-lg); line-height:1.08; letter-spacing:-.02em; color:var(--c3-heading); }
p { font-size:var(--c3-text-body); line-height:1.6; max-width:72ch; }
.lead { font-size:var(--c3-text-body-lg); line-height:1.6; color:var(--c3-body-strong); }
.text-sm { font-size:var(--c3-text-body-sm); } .text-muted { color:var(--c3-muted); }
.eyebrow { font-family:var(--c3-font-mono); font-weight:500; font-size:var(--c3-text-eyebrow);
  letter-spacing:.08em; text-transform:uppercase; color:var(--c3-link-light); }
code,.code,pre { font-family:var(--c3-font-mono); font-size:var(--c3-text-code); }

/* ---- Layout helpers ---- */
.container { max-width:var(--c3-container); margin:0 auto; padding-left:var(--c3-space-6); padding-right:var(--c3-space-6); }
.section { padding-top:var(--c3-space-24); padding-bottom:var(--c3-space-24); }
.flex { display:flex; } .flex-col { flex-direction:column; } .items-center { align-items:center; }
.justify-between { justify-content:space-between; } .justify-center { justify-content:center; }
.gap-2 { gap:var(--c3-space-2);} .gap-3 { gap:var(--c3-space-3);} .gap-4 { gap:var(--c3-space-4);}
.gap-6 { gap:var(--c3-space-6);} .gap-8 { gap:var(--c3-space-8);} .wrap { flex-wrap:wrap; }
.grid { display:grid; gap:var(--c3-space-6); }
.grid-2 { grid-template-columns:repeat(2,1fr);} .grid-3 { grid-template-columns:repeat(3,1fr);} .grid-4 { grid-template-columns:repeat(4,1fr);}
@media (max-width:1023px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .section{padding-top:var(--c3-space-16);padding-bottom:var(--c3-space-16);} .display-xl{font-size:2.25rem;} .display-lg{font-size:2rem;} h1{font-size:1.875rem;} h2{font-size:1.625rem;} }

/* ---- Bands (per-band FIXED dark/light) ---- */
.band { padding-block:var(--c3-space-24); }
.band--light { background:var(--c3-bg); color:var(--c3-body); }
.band--surface { background:var(--c3-surface); color:var(--c3-body); }
.band--dark { background:var(--c3-dark-bg); color:var(--c3-on-dark); }
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4,.band--dark .display-xl,.band--dark .display-lg { color:var(--c3-on-dark); }
.band--dark p { color:var(--c3-on-dark-muted); } .band--dark .eyebrow { color:var(--c3-link-dark); }
.band--dark a { color:var(--c3-link-dark); }

/* ---- Buttons (NO coral-500 fill variant) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--c3-space-2); padding:12px 22px;
  min-height:44px; border-radius:var(--c3-radius-md); font-family:var(--c3-font-body); font-weight:600;
  font-size:var(--c3-text-button); letter-spacing:.01em; border:1px solid transparent; cursor:pointer;
  transition:all .15s ease; text-decoration:none; line-height:1; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--c3-cta); color:var(--c3-cta-text)!important; text-decoration:none!important; box-shadow:var(--c3-shadow-coral); }
/* CTA legibility LAW: primary CTA label is ALWAYS white on coral, never link-styled — beats any local `a` color/underline rule */
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus { color:var(--c3-cta-text)!important; text-decoration:none!important; }
.btn-primary:hover { background:var(--c3-cta-hover); text-decoration:none; transform:translateY(-1px); }
.btn-secondary { background:transparent; border-color:var(--c3-border-strong); color:var(--c3-heading); }
.btn-secondary:hover { border-color:var(--c3-slate-400); background:var(--c3-surface); text-decoration:none; }
.btn-ghost { background:transparent; color:var(--c3-body); }
.btn-ghost:hover { background:var(--c3-surface-2); text-decoration:none; }
.btn-lg { padding:15px 30px; font-size:1rem; } .btn-sm { padding:8px 14px; font-size:var(--c3-text-caption); }
.band--dark .btn-secondary { border-color:var(--c3-navy-700); color:var(--c3-on-dark); }
.band--dark .btn-secondary:hover { background:var(--c3-navy-900); }
/* dark-band button text guards — beat `.band--dark a` (0,1,1) link color so CTAs keep their fill text */
.band--dark a.btn-primary, .nav--on-dark a.btn-primary, .footer a.btn-primary { color:var(--c3-cta-text); text-decoration:none; }
.band--dark a.btn-secondary, .nav--on-dark a.btn-secondary { color:var(--c3-on-dark); text-decoration:none; }
.band--dark a.btn-ghost, .nav--on-dark a.btn-ghost { color:var(--c3-on-dark-muted); text-decoration:none; }

/* ---- Cards ---- */
.card { background:var(--c3-bg); border:1px solid var(--c3-border); border-radius:var(--c3-radius-lg);
  padding:var(--c3-space-6); box-shadow:var(--c3-shadow-sm); }
.card:hover { box-shadow:var(--c3-shadow-md); }
.card--dark { background:var(--c3-dark-raised); border-color:var(--c3-dark-border); color:var(--c3-on-dark); }
.card-header { padding-bottom:var(--c3-space-4); border-bottom:1px solid var(--c3-border); margin-bottom:var(--c3-space-4); }

/* ---- Forms (icon+text validation, never color alone) ---- */
.field { display:flex; flex-direction:column; gap:6px; }
.label { font-size:var(--c3-text-body-sm); font-weight:500; color:var(--c3-body-strong); }
.input,.textarea,.select { width:100%; padding:12px 14px; border:1px solid var(--c3-border-strong);
  border-radius:var(--c3-radius-md); font-family:var(--c3-font-body); font-size:var(--c3-text-body-sm);
  background:var(--c3-bg); color:var(--c3-heading); transition:border-color .15s, box-shadow .15s; }
.input::placeholder { color:var(--c3-slate-500); }
.input:focus,.textarea:focus,.select:focus { border-color:var(--c3-info-600); box-shadow:var(--c3-ring); outline:none; }
.input--error { border-color:var(--c3-error-600); }
.helper { font-size:var(--c3-text-caption); color:var(--c3-muted); }
.msg-error { display:flex; align-items:center; gap:6px; font-size:var(--c3-text-caption); color:var(--c3-error-600); }
.msg-success { display:flex; align-items:center; gap:6px; font-size:var(--c3-text-caption); color:var(--c3-success-700); }

/* ---- Badges / chips ---- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:var(--c3-radius-full);
  font-size:var(--c3-text-caption); font-weight:600; }
.badge-success { background:var(--c3-success-50); color:var(--c3-success-700); }
.badge-warning { background:var(--c3-warning-50); color:var(--c3-warning-700); }
.badge-error { background:var(--c3-error-50); color:var(--c3-error-600); }
.badge-info { background:var(--c3-info-50); color:var(--c3-info-600); }
.badge-coral { background:var(--c3-coral-50); color:var(--c3-coral-700); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid var(--c3-border);
  border-radius:var(--c3-radius-full); font-size:var(--c3-text-body-sm); color:var(--c3-body); cursor:pointer; background:var(--c3-bg); }
.chip:hover { border-color:var(--c3-coral-300); color:var(--c3-coral-700); }
.chip--active { background:var(--c3-coral-600); border-color:var(--c3-coral-600); color:#fff; }

/* ---- Nav + mega-menu ---- */
.nav { position:sticky; top:0; z-index:var(--c3-z-nav); height:var(--c3-nav-h); background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--c3-border); }
.nav-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--c3-space-8); }
.nav-links { display:flex; align-items:center; gap:var(--c3-space-2); list-style:none; }
.nav-link { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:var(--c3-radius-sm);
  font-size:var(--c3-text-body-sm); font-weight:500; color:var(--c3-body-strong); cursor:pointer; }
.nav-link:hover,.nav-link[aria-expanded="true"] { color:var(--c3-coral-700); background:var(--c3-coral-50); text-decoration:none; }
.nav-link.active { color:var(--c3-coral-700); }
/* CANONICAL LOGO = the real asset image, never a simulated text wordmark.
   Light bg → assets/client-logo-1.webp (dark wordmark) · Dark bg → assets/client-logo-2.webp (light wordmark).
   Usage: <a class="logo-link" href="/"><img class="logo-img" src="assets/client-logo-1.webp" alt="Centric3" width="150" height="34"></a> */
.logo-link { display:inline-flex; align-items:center; }
.logo-img { height:34px; width:auto; display:block; }
.footer .logo-img { height:32px; }
.logo { font-family:var(--c3-font-display); font-weight:700; font-size:1.35rem; color:var(--c3-heading); letter-spacing:-.02em; } /* text fallback only — prefer .logo-img */
.logo b { color:var(--c3-coral-500); }
.megamenu { background:var(--c3-bg); border:1px solid var(--c3-border); border-radius:var(--c3-radius-lg);
  box-shadow:var(--c3-shadow-lg); padding:var(--c3-space-6); }

/* ---- Table ---- */
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:12px 16px; font-family:var(--c3-font-mono); font-size:var(--c3-text-caption);
  font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--c3-muted); border-bottom:2px solid var(--c3-border); }
td { padding:13px 16px; border-bottom:1px solid var(--c3-border); font-size:var(--c3-text-body-sm); color:var(--c3-body); }
tr:hover td { background:var(--c3-surface); }

/* ---- Stat / proof ---- */
.stat-value { font-family:var(--c3-font-display); font-weight:700; font-size:2.5rem; color:var(--c3-coral-600); line-height:1; }
.band--dark .stat-value { color:var(--c3-coral-400); }
.stat-label { font-family:var(--c3-font-mono); font-size:var(--c3-text-caption); text-transform:uppercase; letter-spacing:.08em; color:var(--c3-muted); margin-top:6px; }
.band--dark .stat-label { color:var(--c3-on-dark-caption); }

/* ---- Tabs ---- */
.tabs { display:flex; gap:0; border-bottom:2px solid var(--c3-border); }
.tab { padding:12px 18px; font-size:var(--c3-text-body-sm); font-weight:500; color:var(--c3-muted);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab.active { color:var(--c3-coral-700); border-bottom-color:var(--c3-coral-600); }

/* ---- Ribbon ---- */
.ribbon { display:flex; align-items:center; justify-content:center; gap:var(--c3-space-3); position:relative;
  background:var(--c3-navy-900); color:var(--c3-on-dark); font-size:var(--c3-text-body-sm); padding:10px 44px; text-align:center; }
.ribbon a { color:var(--c3-link-dark); font-weight:600; }
.ribbon .ribbon-x { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--c3-slate-400); background:none; border:none; cursor:pointer; }

/* ---- Toast / empty / skeleton ---- */
.toast { position:fixed; bottom:24px; right:24px; z-index:var(--c3-z-toast); padding:14px 18px; border-radius:var(--c3-radius-md);
  background:var(--c3-bg); border:1px solid var(--c3-border); box-shadow:var(--c3-shadow-lg); display:flex; align-items:center; gap:12px; font-size:var(--c3-text-body-sm); }
.empty-state { text-align:center; padding:var(--c3-space-20) var(--c3-space-8); color:var(--c3-muted); }
.empty-state h3 { margin-bottom:var(--c3-space-2); color:var(--c3-heading); }
.skeleton { background:linear-gradient(90deg,var(--c3-slate-100) 25%,var(--c3-slate-200) 50%,var(--c3-slate-100) 75%);
  background-size:200% 100%; animation:c3shimmer 1.4s infinite; border-radius:var(--c3-radius-sm); }
@keyframes c3shimmer { to { background-position:-200% 0; } }

/* ---- Footer ---- */
.footer { background:var(--c3-navy-950); color:var(--c3-on-dark-muted); padding-top:var(--c3-space-20); padding-bottom:var(--c3-space-8); }
.footer h5 { font-family:var(--c3-font-body); font-size:var(--c3-text-caption); text-transform:uppercase; letter-spacing:.08em; color:var(--c3-slate-400); margin-bottom:var(--c3-space-4); }
.footer a { color:var(--c3-on-dark-muted); font-size:var(--c3-text-body-sm); display:block; padding:5px 0; }
.footer a:hover { color:var(--c3-on-dark); }
/* Footer newsletter: stack the email field ABOVE a full-width button so the input gets the full
   (narrow) footer-column width instead of collapsing next to the Subscribe button. */
.footer .subscribe .flex { flex-direction:column; align-items:stretch; gap:var(--c3-space-2); }
.footer .subscribe .input, .footer .subscribe-inline .input { width:100%; flex:1 1 auto; min-width:0; }
.footer .subscribe .btn { width:100%; }
.footer .subscribe .consent a { display:inline; padding:0; }

/* ---- Icons & node motif (canonical — every mockup links this, so size icons HERE) ---- */
svg { fill:none; }
.ic { width:var(--c3-icon-20); height:var(--c3-icon-20); flex:0 0 auto; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ic-16 { width:var(--c3-icon-16); height:var(--c3-icon-16); }
.ic-24 { width:var(--c3-icon-24); height:var(--c3-icon-24); }
.ic-32 { width:var(--c3-icon-32); height:var(--c3-icon-32); }
path.ic, path.chev { width:auto; height:auto; }            /* when the class lands on a <path>, don't box it */
.chev { width:var(--c3-icon-16); height:var(--c3-icon-16); min-width:var(--c3-icon-16); flex:0 0 var(--c3-icon-16);
  stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
[aria-expanded="true"] > .chev, details[open] > summary .chev { transform:rotate(180deg); }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; padding:0;
  border:none; background:transparent; color:var(--c3-body-strong); cursor:pointer; border-radius:var(--c3-radius-md); }
.iconbtn:hover { background:var(--c3-surface-2); color:var(--c3-heading); }
.band--dark .iconbtn,.nav--on-dark .iconbtn { color:var(--c3-on-dark-muted); }
.band--dark .iconbtn:hover,.nav--on-dark .iconbtn:hover { background:var(--c3-navy-900); color:var(--c3-on-dark); }
.nodefield-svg { width:100%; height:auto; display:block; }
.nf-line { stroke:var(--c3-slate-200); stroke-width:1.5; fill:none; }
.band--dark .nf-line,.nf-on-dark .nf-line { stroke:var(--c3-navy-800); }
.nf-node { fill:var(--c3-coral-500); }
.band--dark .nf-node,.nf-on-dark .nf-node { fill:var(--c3-coral-400); }
.foot-watermark { position:absolute; right:var(--c3-space-8); bottom:var(--c3-space-6); width:200px; height:auto; opacity:.18; pointer-events:none; }
.foot-watermark .nf-line { stroke:var(--c3-navy-800); } .foot-watermark .nf-node { fill:var(--c3-coral-400); }

/* ---- Reduced motion: static equivalents ---- */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }