/* Wired CIO — Webfonts (redesign)
   Primary: Fraunces (display / headings)  ·  Secondary: Hanken Grotesk (body / UI)

   Both families are SELF-HOSTED as woff2 out of assets/fonts/: the variable
   subsets Google serves (latin and latin-ext), same bytes, no third party. The
   old @import cost a DNS lookup, a TLS handshake, and a CSS response on
   fonts.googleapis.com before the first woff2 request could even start, and
   the font URLs inside that CSS pointed at a second origin. Now the fonts come
   off our own connection, are preloaded from the page head (see writeShell in
   scripts/build-site.mjs), and cache immutably for a year.

   Weights are the full variable range, so every weight the site sets (560 to
   800 in the display face, 300 to 800 in the body face) comes out of one file.
   Fraunces also carries the opsz axis the heroes set at 144.

   Fraunces italic is deliberately absent: nothing on the site sets the display
   face in italic, and no reader-facing copy would gain from it. Body italic is
   used (service pages, and any <em> in an insight) so Hanken ships both.

   unicode-range means latin-ext is only fetched by a page that actually
   contains one of those characters, so it costs nothing on English pages.

   Renaming a file breaks the immutable cache contract in the wrong direction
   (stale copies survive a year). Ship a NEW filename when a font is updated. */


/* Fraunces — display. SIL OFL 1.1, licence in assets/fonts/Fraunces-OFL.txt */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk — body and UI. SIL OFL 1.1, licence in
   assets/fonts/HankenGrotesk-OFL.txt */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- tokens/colors.css ---- */
/* ============================================================
   Wired CIO — Color Tokens
   Source of truth: Wired CIO Brand Book (Colors page)
   Core swatches: #0C2C32 · #0C4651 · #2CC295
   Tints sampled from the brand background system (mint gradients).
   ============================================================ */
:root {
  /* ---- Brand core (verbatim from brand book) ---- */
  --wc-ink:        #0C2C32; /* darkest teal — primary dark surface / ink */
  --wc-teal:       #0C4651; /* deep teal — secondary dark */
  --wc-deep:       var(--wc-teal); /* alias the hero gradients reference; keep equal to --wc-teal */
  --wc-emerald:    #2CC295; /* signature Wired CIO green — primary accent */

  /* ---- Emerald scale (primary brand ramp) ---- */
  --wc-green-50:   #F0FBF8;
  --wc-green-100:  #DFF5F0; /* lightest mint (bg gradients) */
  --wc-green-200:  #BCEBE0;
  --wc-green-300:  #93E1C9;
  --wc-green-400:  #5FD3B0;
  --wc-green-500:  #2CC295; /* = --wc-emerald */
  --wc-green-600:  #1EA087; /* hover / pressed emerald */
  --wc-green-700:  #17796F;
  --wc-green-800:  #135D58;
  --wc-green-900:  #0F4744;

  /* ---- Teal / ink scale (dark neutrals, teal-biased) ---- */
  --wc-ink-50:     #EAF0F1;
  --wc-ink-100:    #CBD9DB;
  --wc-ink-200:    #9DB4B7;
  --wc-ink-300:    #6E8C91;
  --wc-ink-400:    #3F646B;
  --wc-ink-500:    #1B4A52;
  --wc-ink-600:    #0C4651; /* = --wc-teal */
  --wc-ink-700:    #0E3940;
  --wc-ink-800:    #0C2C32; /* = --wc-ink */
  --wc-ink-900:    #081E22; /* near-black teal */

  /* ---- Cool neutrals (UI grays, slight teal cast) ---- */
  --wc-white:      #FFFFFF;
  --wc-paper:      #F6FAFA; /* off-white page bg */
  --wc-gray-50:    #F1F5F5;
  --wc-gray-100:   #E6ECEC;
  --wc-gray-200:   #D2DBDB;
  --wc-gray-300:   #B4C0C1;
  --wc-gray-400:   #8A9899;
  --wc-gray-500:   #647273;
  --wc-gray-600:   #495556;
  --wc-gray-700:   #333E3F;
  --wc-gray-900:   #161D1E;

  /* ---- Semantic status ---- */
  --wc-success:    #2CC295;
  --wc-warning:    #E5A53B;
  --wc-danger:     #D8503E;
  --wc-info:       #2E84C4;

  /* ============================================================
     Semantic aliases — reference these in components, not raw scale
     ============================================================ */
  /* surfaces */
  --surface-page:        var(--wc-paper);
  --surface-card:        var(--wc-white);
  --surface-sunken:      var(--wc-gray-50);
  --surface-inverse:     var(--wc-ink-800);
  --surface-inverse-2:   var(--wc-ink-900);
  --surface-brand:       var(--wc-emerald);
  --surface-brand-soft:  var(--wc-green-100);
  --surface-header:      rgba(255,255,255,0.9);
  /* secondary accent — complements the primary greens (eyebrows / kickers) */
  --accent-2:            var(--wc-green-700);
  --accent-2-soft:       color-mix(in srgb, var(--accent-2) 15%, transparent);

  /* text */
  --text-strong:    var(--wc-ink-900);
  --text-body:      var(--wc-ink-700);
  --text-muted:     var(--wc-gray-500);
  --text-faint:     var(--wc-gray-400);
  --text-on-brand:  var(--wc-ink-900);   /* dark ink reads best on emerald */
  --text-on-dark:   var(--wc-white);
  --text-on-dark-muted: var(--wc-ink-200);
  --text-link:      var(--wc-green-700);

  /* borders & lines */
  --border-subtle:  var(--wc-gray-200);
  --border-default: var(--wc-gray-300);
  --border-strong:  var(--wc-ink-300);
  --border-brand:   var(--wc-emerald);
  --border-on-dark: rgba(255,255,255,0.14);

  /* focus */
  --focus-ring:     color-mix(in srgb, var(--wc-emerald) 55%, transparent);
  /* solid keyboard-focus outline color — green-600 clears 3:1 on the light
     surfaces where most focusable controls live, and stays legible (with the
     2px offset gap) on the dark teal sections. */
  --focus-ring-strong: var(--wc-green-600);
  --focus-ring-on-dark: var(--wc-emerald); /* brighter ring for dark surfaces */
}

/* ---- tokens/pillars.css ---- */
/* ============================================================
   Wired CIO — Pillar sub-brand system
   The business organizes around FOUR PILLARS. Each gets its own
   palette + icon so it is instantly recognizable, while all four
   stay in harmony with the primary Wired CIO green.

   Palette logic: a balanced set anchored on the brand emerald —
   GROW (emerald) · PROTECT (cyan-blue) · AUTOMATE (violet) ·
   ALIGN (amber-gold). Distinct hues, one tonal family.

   Per pillar:
     --pillar-*           base / signature color (icon, accents)
     --pillar-*-soft      light tint (chips, soft surfaces)
     --pillar-*-deep      deep variant (headings on tint, gradients)
     --pillar-*-on        text/icon color that sits on the base
   ============================================================ */
:root {
  /* GROW — emerald · enterprise applications, revenue, momentum */
  --pillar-grow:        #1FA383;
  --pillar-grow-soft:   #DEF4ED;
  --pillar-grow-deep:   #0E5C49;
  --pillar-grow-on:     #FFFFFF;

  /* PROTECT — cyan-blue · security, resilience, trust */
  --pillar-protect:      #1C8CC2;
  --pillar-protect-soft: #D8EEF8;
  --pillar-protect-deep: #0C4A66;
  --pillar-protect-on:   #FFFFFF;

  /* AUTOMATE — violet · AI, automation, leverage */
  --pillar-automate:      #7A5AE0;
  --pillar-automate-soft: #ECE7FB;
  --pillar-automate-deep: #3F2C86;
  --pillar-automate-on:   #FFFFFF;

  /* ALIGN — amber-gold · compliance, regulation, the gold standard */
  --pillar-align:      #D99A2B;
  --pillar-align-soft: #FAEFD6;
  --pillar-align-deep: #8A5A12;
  --pillar-align-on:   #1F1402;

  /* Bright variants — legible accents on dark bands and heroes */
  --pillar-grow-bright:     #3ECCAA;
  --pillar-protect-bright:  #5FB6E0;
  --pillar-automate-bright: #A78BFF;
  --pillar-align-bright:    #E8B558;

  /* soft tint borders (1px hairlines on tint surfaces) */
  --pillar-grow-line:     color-mix(in srgb, var(--pillar-grow) 28%, transparent);
  --pillar-protect-line:  color-mix(in srgb, var(--pillar-protect) 28%, transparent);
  --pillar-automate-line: color-mix(in srgb, var(--pillar-automate) 28%, transparent);
  --pillar-align-line:    color-mix(in srgb, var(--pillar-align) 30%, transparent);

  /* hover wash (interactive menu items, list rows) — the marketing header
     used inline color-mix at 10–12%; promote it to tokens. */
  --pillar-grow-hover:     color-mix(in srgb, var(--pillar-grow) 12%, transparent);
  --pillar-protect-hover:  color-mix(in srgb, var(--pillar-protect) 12%, transparent);
  --pillar-automate-hover: color-mix(in srgb, var(--pillar-automate) 12%, transparent);
  --pillar-align-hover:    color-mix(in srgb, var(--pillar-align) 12%, transparent);

  /* signature gradient (base → deep, 165deg) — the quadrant hero bands.
     Defined once here so the hero, landing template, and any pillar surface
     reference one source of truth instead of hardcoding the stops. */
  --pillar-grow-grad:     linear-gradient(165deg, var(--pillar-grow) 0%, var(--pillar-grow-deep) 100%);
  --pillar-protect-grad:  linear-gradient(165deg, var(--pillar-protect) 0%, var(--pillar-protect-deep) 100%);
  --pillar-automate-grad: linear-gradient(165deg, var(--pillar-automate) 0%, var(--pillar-automate-deep) 100%);
  --pillar-align-grad:    linear-gradient(165deg, var(--pillar-align) 0%, var(--pillar-align-deep) 100%);

  /* the quadrant identity flattened to a four-color spectrum band —
     hard stops, one quarter per pillar, in canonical pillar order */
  --pillar-spectrum: linear-gradient(90deg,
    var(--pillar-grow)     0 25%,
    var(--pillar-protect) 25% 50%,
    var(--pillar-automate) 50% 75%,
    var(--pillar-align)   75% 100%);
}

/* Every page hero carries the spectrum band along its bottom edge.
   Put className="wc-hero" on the hero <section>/<header> and the strip
   renders by default; the rule pins position so heroes that only set
   layout inline still anchor the band correctly. */
.wc-hero { position: relative; }
.wc-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--pillar-spectrum);
  z-index: 3;
  pointer-events: none;
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   Wired CIO — Typography Tokens
   Display / headings : Fraunces  (variable serif; components set
                        weights 560/580/620 inline, heroes add
                        font-variation-settings 'opsz' 144)
   Body / UI          : Hanken Grotesk  (clean, readable, neutral)
   ============================================================ */
:root {
  /* families */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* weights */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* type scale (rem, 16px base) — display uses Fraunces, text uses Hanken Grotesk */
  --text-display-2xl: 4.5rem;   /* 72 — hero */
  --text-display-xl:  3.5rem;   /* 56 */
  --text-display-lg:  2.75rem;  /* 44 */
  --text-h1:          2.25rem;  /* 36 */
  --text-h2:          1.75rem;  /* 28 */
  --text-h3:          1.375rem; /* 22 */
  --text-h4:          1.125rem; /* 18 */
  --text-lg:          1.125rem; /* 18 */
  --text-base:        1rem;     /* 16 */
  --text-sm:          0.875rem; /* 14 */
  --text-xs:          0.75rem;  /* 12 */
  --text-eyebrow:     0.8125rem;/* 13 — uppercase label */

  /* line-heights */
  --lh-tight:    1.05; /* @kind other */
  --lh-snug:     1.18; /* @kind other */
  --lh-heading:  1.25; /* @kind other */
  --lh-body:     1.6; /* @kind other */
  --lh-relaxed:  1.75; /* @kind other */

  /* letter-spacing */
  --ls-tight:    -0.02em; /* @kind other */
  --ls-snug:     -0.01em; /* @kind other */
  --ls-normal:   0; /* @kind other */
  --ls-eyebrow:  0.14em; /* @kind other */
  --ls-caps:     0.06em; /* @kind other */
}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   Wired CIO — Spacing, Sizing & Layout Tokens
   4px base grid.
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* section rhythm (marketing) */
  --section-y:        5.5rem;  /* vertical padding between marketing sections */
  --container-max:    1200px;
  --container-pad:    1.5rem;

  /* radii — brand reads soft-but-confident; pill for buttons/badges */
  --radius-xs:   4px;
  --radius-sm:   4px;
  --radius-md:   5px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* border widths */
  --bw-hairline: 1px;
  --bw-thick:    2px;
}

/* ---- tokens/controls.css ---- */
/* ============================================================
   Wired CIO — Control density tokens
   Two scales for form controls and dense UI:
     • Comfortable (default) — marketing pages, public forms
     • Compact — admin, estimators, data-dense web apps
   Apply compact by setting  data-density="compact"  on any
   container (or <html>); the tokens below re-scope under it.
   Form components reference the semantic --control-* tokens so
   one attribute reflows the whole subtree.
   ============================================================ */
:root {
  /* comfortable (default) */
  --control-h:        44px;   /* control height (inputs, selects, buttons) */
  --control-px:       14px;   /* horizontal padding inside controls */
  --control-font:     0.9375rem;
  --control-radius:   var(--radius-sm);
  --control-icon:     18px;   /* leading/trailing icon size */
  --field-gap:        18px;   /* vertical gap between fields */
  --field-label-gap:  6px;    /* gap from label to control */
  --label-size:       0.875rem;
  --help-size:        0.8125rem;
  --row-h:            52px;    /* table/list row height */
}

[data-density="compact"] {
  --control-h:        32px;
  --control-px:       10px;
  --control-font:     0.8125rem;
  --control-icon:     16px;
  --field-gap:        12px;
  --field-label-gap:  4px;
  --label-size:       0.75rem;
  --help-size:        0.75rem;
  --row-h:            38px;
}

/* ---- tokens/app.css ---- */
/* ============================================================
   Wired CIO — Product / App UI tokens
   A denser "product" mode of the brand for internal tools and
   client apps (questionnaire, estimator, admin). Same brand,
   tighter scale than the marketing layer.

   Namespaced --app-* so it never collides with marketing tokens.
   Default :root values are the LIGHT product theme. Apply the
   dark product theme by setting  data-app-theme="carbon"  on any
   container (or <html>); the block below re-scopes the tokens.

   Pair with  data-density="compact"  (see controls.css) for the
   tightest admin/estimator density.
   ============================================================ */
:root {
  /* ---- surfaces & ink (light product theme) ---- */
  --app-bg:              #f7f9fb;  /* page background        */
  --app-surface:         #ffffff;  /* cards, bars, inputs    */
  --app-surface-2:       #f4f7fa;  /* sunken / hover / heads */
  --app-ink:             #0f1a2e;  /* headings, strong text  */
  --app-ink-soft:        #1a2238;  /* labels                 */
  --app-body:            #4d5564;  /* body copy              */
  --app-muted:           #8791a3;  /* captions, meta         */
  --app-hairline:        #e8ebf0;  /* default dividers       */
  --app-hairline-strong: #cdd6d2;  /* input borders          */
  --app-on-accent:       #ffffff;  /* text on brand fill     */
  --app-overlay-bg:      rgba(247, 249, 251, 0.92);

  /* ---- brand (bridged to the master palette) ---- */
  --app-brand:        var(--wc-emerald);   /* #2CC295 */
  --app-brand-dark:   #1fa37d;             /* hover / pressed brand            */
  --app-brand-soft:   #e8faf4;             /* tinted fills, selected rows      */
  --app-brand-border: #a5d6b0;             /* tinted borders                   */

  /* ---- status (bg / text / border triples) ---- */
  --app-info:         #2f6fed;
  --app-info-soft:    #e7eefc;
  --app-info-border:  #bcd0f7;
  --app-success-bg:   #e6f4ea;
  --app-success-text: #1e6b3a;
  --app-warning-bg:     #fdf6e3;
  --app-warning-border: #ecdca6;
  --app-warning-text:   #9a7d1f;
  --app-warning-dot:    #f0b232;
  --app-error:    #d64545;
  --app-error-bg: #fde8e8;

  /* ---- radii, shadow, motion (product scale) ---- */
  --app-radius:    10px;  /* cards, modals, drawers      */
  --app-radius-sm: 6px;   /* inputs, buttons, chips      */
  --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --app-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --app-ease:      cubic-bezier(.2,.7,.2,1); /* @kind other */
  --app-focus-ring: 0 0 0 3px var(--app-brand-soft);  /* input focus glow */

  /* ---- product type scale (Work Sans, dense) ---- */
  --app-font:     var(--font-body);  /* Work Sans */
  --app-fs-2xs:   10.5px;  /* eyebrows, table micro-labels */
  --app-fs-xs:    12px;    /* meta, captions               */
  --app-fs-sm:    13px;    /* dense controls, table cells  */
  --app-fs-base:  14px;    /* default product body         */
  --app-fs-md:    15px;    /* card titles                  */
  --app-fs-lg:    18px;    /* section headings             */
  --app-fs-xl:    26px;    /* stat values                  */
}

/* ============================================================
   Carbon — dark product theme
   ============================================================ */
[data-app-theme="carbon"] {
  color-scheme: dark;
  --app-bg:              #0a0b0d;
  --app-surface:         #141619;
  --app-surface-2:       #1c1f24;
  --app-ink:             #f4f5f7;
  --app-ink-soft:        #d8dade;
  --app-body:            #a6abb3;
  --app-muted:           #7a808a;
  --app-hairline:        #262a31;
  --app-hairline-strong: #363b44;
  --app-on-accent:       #06231b;
  --app-overlay-bg:      rgba(10, 11, 13, 0.92);

  --app-brand:        #34d6a6;
  --app-brand-dark:   #2bbf92;
  --app-brand-soft:   #0f2a23;
  --app-brand-border: #2c6b58;

  --app-info:         #6f9bf2;
  --app-info-soft:    #14233f;
  --app-info-border:  #2f4d80;
  --app-success-bg:   #0f2a23;
  --app-success-text: #5fdcb0;
  --app-warning-bg:     #2e2913;
  --app-warning-border: #534a1f;
  --app-warning-text:   #e0bb57;
  --app-warning-dot:    #e0bb57;
  --app-error:    #f08a8a;
  --app-error-bg: #341c1c;

  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --app-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ---- tokens/effects.css ---- */
/* ============================================================
   Wired CIO — Effects: shadows, gradients, motion
   The shipped design is flat: every shadow token is intentionally
   `none`. Depth comes from 1px hairlines, tinted panels, and dark
   gradient bands, not elevation.
   Gradients echo the brand background system (mint → emerald → teal).
   ============================================================ */
:root {
  /* elevation — retired; tokens kept so existing references stay valid */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-brand: none;

  /* brand gradients (from background system) */
  --grad-mint:    linear-gradient(135deg, #DFF5F0 0%, #BCEBE0 55%, #93E1C9 100%); /* @kind color */
  --grad-emerald: linear-gradient(135deg, #2CC295 0%, #1EA087 100%); /* @kind color */
  --grad-deep:    linear-gradient(150deg, #0C4651 0%, #0C2C32 60%, #081E22 100%); /* @kind color */
  --grad-hero:    linear-gradient(160deg, #0C2C32 0%, #0F4744 55%, #17796F 100%); /* @kind color */
  /* subtle emerald wash for soft brand surfaces */
  --grad-wash:    linear-gradient(180deg, #F0FBF8 0%, #DFF5F0 100%); /* @kind color */

  /* motion — calm, executive; no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      200ms; /* @kind other */
  --dur-slow:      320ms; /* @kind other */
}

/* ---- tokens/base.css ---- */
/* ============================================================
   Wired CIO — Base layer
   Minimal global defaults so any surface that links styles.css
   renders in-brand out of the box. Components rely on tokens, not on
   these resets, so this stays intentionally light.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  margin: 0;
  font-weight: var(--fw-bold);
  /* The marketing site sets text-wrap:balance on every headline for even
     ragging on narrow viewports; promote it to a DS-wide default. */
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--wc-green-200); color: var(--wc-ink-900); }

/* Skip link: first tab stop on every page, visible only on keyboard focus.
   Jumps past the 30-link header to <main id="wc-main">. */
.wc-skip {
  position: absolute; left: 16px; top: -100px; z-index: 70;
  background: var(--surface-card); color: var(--text-strong);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 0.875rem;
  padding: 10px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}
.wc-skip:focus { top: 12px; }

/* shared utility: uppercase brand eyebrow / kicker */
.wc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-2);
}

/* ============================================================
   Keyboard focus — one visible ring for the whole system.
   :focus-visible keeps it off mouse clicks. outline (not box-shadow)
   so it survives ancestors/elements with overflow:hidden (e.g. the
   quadrant hero bands). Components that paint their own focus state
   on a wrapper set outline:none on the inner control, so there is no
   double ring. Elements on dark surfaces can opt into the brighter
   ring with [data-on-dark] or .wc-on-dark.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--focus-ring-strong);
  outline-offset: 2px;
}
:where([data-on-dark], .wc-on-dark):focus-visible,
:where([data-on-dark], .wc-on-dark) :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}
/* Drop the legacy UA ring only where :focus-visible is honored, so
   keyboard users on older engines still get a default outline. */
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   Reduced motion — global guard. Neutralizes CSS transitions and
   animations (and native smooth scroll) for users who ask for it.
   JS-driven motion (programmatic smooth scroll, scroll-morph) reads
   the same preference via matchMedia in its own components.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* redesign: buttons stay sans (inline styles in components set the display
   font; !important is the one cascade lever that beats an inline style). */
button { font-family: var(--font-body) !important; }

/* redesign: hover affordance for editorial row links (flat lists) */
a.wc-hub-row, a.wc-case-row, a.wc-ins-row, a.wc-idx-link { transition: opacity var(--dur-fast, 0.15s) ease-out; }
a.wc-hub-row:hover, a.wc-case-row:hover, a.wc-ins-row:hover { opacity: 0.78; }

/* Homepage insights marquee (HomeInsights in Proof.jsx). Resting colors are
   inline styles and the active slot is driven by React state; these rules
   cover only what an inline style cannot express — a pseudo-element and the
   hover/focus states (hence !important, as with the footer links above).
   --wc-tick is set per row to that post's pillar accent. */
a.wc-ins-tick { position: relative; }
a.wc-ins-tick::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: var(--wc-tick, var(--wc-emerald));
  opacity: 0;
  transition: opacity var(--dur-fast, 0.15s) ease-out;
}
a.wc-ins-tick:hover::before, a.wc-ins-tick:focus-visible::before { opacity: 1; }

.wc-q-row .wc-q-title { transition: color var(--dur-fast, 0.15s) ease-out; }
.wc-q-row:hover:not([aria-pressed='true']) .wc-q-title { color: var(--text-body) !important; }
.wc-q-row:focus-visible, a.wc-ins-tick:focus-visible, .wc-spot-link:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 3px;
}
.wc-spot-pause:hover { background: var(--wc-green-50) !important; }
.wc-spot-pause:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

/* Search field in the FAQ and insights toolbars (Pages.jsx). The field had no
   visible boundary at rest: a magnifier and a placeholder read as a caption,
   not as somewhere to type.

   The boundary is the toolbar's own bottom hairline rather than anything new.
   The wrapper stretches to the row and overlaps that line by 1px, so the
   segment under the field is simply a darker stretch of a rule the page
   already draws: no box, no second line parallel to the first (which reads as
   a mistake at this row height, the row is only 44px), and no reflow when the
   colour changes. --border-strong is 3.4:1 on the page surface, over the 3:1
   WCAG asks of a non-text boundary, against 1.3:1 for the subtle hairline it
   sits on, which is what makes the segment legible as a field edge.

   Placeholder colour is set explicitly because the UA default (#757575 in
   Chrome) is 4.38:1 here, just under the 4.5:1 for text this size, and every
   browser picks a different grey. --text-muted is 4.76:1. */
.wc-search {
  align-self: stretch;
  margin-bottom: -1px;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast, 0.15s) ease-out;
}
.wc-search:hover { border-bottom-color: var(--text-body); }
.wc-search:focus-within { border-bottom-color: var(--accent-2); }
.wc-search input::placeholder { color: var(--text-muted); opacity: 1; }

/* Insights marquee reflow: the spotlight and its Featured queue stack, and the
   queue's dividing rule moves from its left edge to its top. Lives here (not in
   a page shell) because the marquee renders on the homepage and on the pillar,
   service, and industry pages. Inline styles set the resting two-column grid,
   so the stacked state needs !important. */
@media (max-width: 880px) {
  .wc-spot-mq { grid-template-columns: 1fr !important; gap: 34px !important; }
  .wc-spot-queue { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--border-subtle); padding-top: 22px; }
}

/* Reduced motion: collapse transitions and smooth scrolling to instant. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Footer (SiteFooter in CTA.jsx): resting colors are inline styles, so
   hover needs !important; page shells force the grid to 2 / 1 columns at
   880 / 560px, this adds the three-column step between those and desktop. */
a.wc-foot-link, a.wc-foot-dim, a.wc-foot-head { transition: color var(--dur-fast, 0.15s) ease-out; }
a.wc-foot-link:hover, a.wc-foot-dim:hover { color: var(--wc-white) !important; }
a.wc-foot-head:hover { color: var(--wc-emerald) !important; }
@media (max-width: 1100px) and (min-width: 881px) {
  .wc-foot-grid { grid-template-columns: repeat(3, 1fr) !important; }
}