/* ============================================================
   VARNHAM & CO. — ROOT STYLESHEET
   VAR/BR/17 · v4.7 · Canonical brand specification VAR/BR/15.6

   This stylesheet contains:
   - Foundation palette as CSS variables (paper grounds, ink, neutrals)
   - Type system (DM Sans + Playfair Display, with optical-size rules)
   - Layout primitives (container, grids, spacing)
   - Shared components (nav, footer, wordmark, buttons, forms, cards)
   - Editorial display components (added in v4.7 for the website redesign)

   Per-register accent overrides live in register-a.css through
   register-g.css. Pages link this file plus their register stylesheet.

   v4.7 additions (April 2026):
   - Display-scale typography: .display-xl, .display-2xl utility classes
     for confident hero treatments (sparingly used; once per surface)
   - Asymmetric grid utilities: .split-7-3, .split-3-7, .split-6-4,
     .split-4-6, .split-8-4 for compositional range beyond the existing
     symmetric splits
   - Editorial components: .statement (large type-led standalone block),
     .callout-quiet (restrained pullquote without dark background),
     .kicker (short overline that introduces sections)
   - Funnel component: .funnel and .funnel-step children for the
     three-step assessment-to-retainer funnel
   - .section-feature: more confident vertical padding for strategic
     moments on primary pages
   - Tag rule refined: .tag em styling explicit per VAR/BR/15.6 §3
     headline-emphasis rule (DM Sans italic, distinct from Playfair)

   Key changes in v4.6 (from v4.0):
   - Wordmark restructured: VARNHAM & CO. with italic Playfair ampersand,
     replacing the previous VARNHAM CONSULTING structure.
   - Lifted oxblood #B5394F added as dark-ground variant of oxblood
     (per VAR/BR/15.6 §5.0b).
   - Register-aware ampersand colour (per VAR/BR/15.6 §6): the italic
     Playfair ampersand colour follows the artefact's register accent.
     Mechanism: --ampersand-color custom property, defaulted to var(--accent),
     overridable per register, with hardcoded oxblood for the principal-name
     treatment (the single exception per §6).
   - Small-scale glyph rule (per VAR/BR/15.6 §3): italic Playfair ampersand
     uses Medium (500) at display scale, SemiBold (600) below 24px.
     Implemented as utility classes .amp-display and .amp-small.
   - Dark-ground ampersand handling: .amp inside .section.dark or other
     dark-ground components automatically uses lifted oxblood / lifted
     register-accent.
   ============================================================ */

/* ============================================================
   1. CSS RESET — minimal
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: none; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   2. FOUNDATION PALETTE — applies to every page
   ============================================================ */
:root {
  /* Foundation grounds */
  --paper-warm: #f7f3ec;       /* print ground */
  --paper-cool: #faf8f4;       /* digital ground — default body */
  --parchment: #ede4d0;        /* knowledge-base ground (internal reference material) */
  --ink: #111418;              /* primary text, wordmark */
  --ink-soft: #2d3138;         /* body prose */
  --muted: #7a7468;            /* secondary text, metadata */
  --rule: #d8d2c4;             /* dividers, borders */
  --stone: #8a8478;            /* tertiary text, alternative muted */

  /* Accent variables — register stylesheets override these */
  --accent: #6b1e2c;           /* default to oxblood (Register A) */
  --accent-deep: #4a1219;      /* hover/active state */
  --accent-soft: #f4e8e8;      /* tinted backgrounds */
  --accent-on-dark: #f4e8e8;   /* accent text on dark grounds */

  /* Ampersand colour — follows register accent by default.
     Per VAR/BR/15.6 §6, the italic Playfair ampersand colour follows
     the artefact's register accent, not always oxblood. Each register
     stylesheet may set this independently if needed. The principal-name
     treatment (.pf-name) is the single exception and uses --oxblood
     hardcoded, not this variable. */
  --ampersand-color: var(--accent);

  /* Always-oxblood — the principal's name (.pf-name) is always oxblood
     regardless of register, per VAR/BR/15.6 §6 single-exception rule. */
  --oxblood: #6b1e2c;

  /* Lifted oxblood — for use on dark grounds, per VAR/BR/15.6 §5.0b.
     The two oxbloods are not interchangeable. Light grounds use
     --oxblood; dark grounds use --oxblood-lift. */
  --oxblood-lift: #b5394f;

  /* Layout tokens */
  --container-max: 1280px;
  --container-pad: 50px;

  /* Type tokens */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Cambria, Georgia, 'Times New Roman', serif;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 36px;
  --space-5: 50px;
  --space-6: 70px;
  --space-7: 100px;
  --space-8: 130px;
}

/* ============================================================
   3. BODY DEFAULTS
   ============================================================ */
body {
  background: var(--paper-cool);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   4. CONTAINER
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

@media (max-width: 800px) {
  :root { --container-pad: 24px; }
}

/* ============================================================
   5. WORDMARK — VARNHAM & CO.

   The wordmark uses three child elements: .v (VARNHAM), .amp (the italic
   Playfair ampersand), .co (CO.). The ampersand colour follows the
   register accent via --ampersand-color, except where overridden by a
   contextual rule (e.g. on dark grounds, where it shifts to lifted
   oxblood per the rule in section 7 below).

   HTML usage:
     <span class="wm">
       <span class="v">VARNHAM</span><span class="amp">&amp;</span><span class="co">CO.</span>
     </span>

   For dark-ground use (e.g. presentation cover slides), wrap in or apply
   inside .section.dark or use the .wm-dark class — the ampersand will
   automatically shift to lifted oxblood per the rule in section 7.
   ============================================================ */
.wm {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 0.95;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  letter-spacing: 0.10em;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 14px;
}
.wm .v { font-weight: 600; }
.wm .amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  color: var(--ampersand-color);
  margin: 0 0.18em;
  letter-spacing: 0;
}
.wm .co { font-weight: 600; }

/* Wordmark size variants per VAR/BR/15.6 §17.1.1 */
.wm.wm-hero { font-size: 56px; letter-spacing: 0.04em; }
.wm.wm-large { font-size: 32px; letter-spacing: 0.06em; }
.wm.wm-standard { font-size: 18px; letter-spacing: 0.10em; }
.wm.wm-compact { font-size: 14px; letter-spacing: 0.10em; }
.wm.wm-mini { font-size: 12px; letter-spacing: 0.10em; }

/* Wordmark on dark grounds — paper-cool letters, lifted oxblood ampersand
   (per VAR/BR/15.6 §17.1.6). Use either .wm.wm-dark explicitly, or
   .section.dark .wm via the contextual rule in section 7 below. */
.wm.wm-dark {
  color: var(--paper-cool);
}
.wm.wm-dark .amp {
  color: var(--oxblood-lift);
}

/* Wordmark lockup — for letterheads where the wordmark sits above
   a horizontal rule and tagline */
.wm-lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
}
.wm-lockup .h-rule {
  height: 1px;
  background: var(--ink);
}
.wm-lockup .tag {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
  font-size: 9px;
}

/* ============================================================
   6. COMPACT V&CO. — for inline / footer / running placements
   (per VAR/BR/15.6 §17.1.2)

   HTML usage:
     <span class="vco">
       <span class="v">V</span><span class="amp">&amp;</span><span class="co">Co.</span>
     </span>

   Period drops below 11px per VAR/BR/15.6 §17.1.2.
   ============================================================ */
.vco {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  color: var(--ink);
}
.vco .v { margin-right: -0.04em; }
.vco .amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ampersand-color);
  margin: 0 0.02em;
}
.vco .co { margin-left: -0.02em; }

/* Period drops at small scale — per VAR/BR/15.6 §17.1.2.
   Apply .vco-no-period when the compact mark renders below 11px. */
.vco.vco-no-period .co::after { content: none; }

/* Compact mark on dark grounds — paper-cool letters, lifted-oxblood ampersand */
.vco.vco-dark { color: var(--paper-cool); }
.vco.vco-dark .amp { color: var(--oxblood-lift); }

/* ============================================================
   7. STACKED V& — for square / avatar / icon placements
   (per VAR/BR/15.6 §17.1.3)

   The "Co." is dropped in the stacked form. Used for social media
   avatars, square watermarks, app icon contexts.

   HTML usage:
     <span class="vsq">
       <span class="v">V</span><span class="amp">&amp;</span>
     </span>

   For app icon contexts (oxblood ground always per §17.1.5), wrap in
   .vsq-on-oxblood class which sets the ground and inverts the type.
   ============================================================ */
.vsq {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
}
.vsq .v { margin-right: -0.04em; }
.vsq .amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ampersand-color);
  margin-left: 0.02em;
}

/* App icon container — oxblood ground always, paper-cool V&,
   paper-cool ampersand (the app icon is the one variant where the
   ampersand becomes paper-cool rather than register-coloured, because
   the app icon sits on saturated oxblood and the ampersand needs to
   read against that ground, not against a register). */
.vsq-on-oxblood {
  background: var(--oxblood);
  color: var(--paper-cool);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18%;
}
.vsq-on-oxblood .vsq { color: var(--paper-cool); }
.vsq-on-oxblood .vsq .amp { color: var(--paper-cool); }

/* ============================================================
   8. SMALL-SCALE AMPERSAND RULE
   (per VAR/BR/15.6 §3 optical-size rule)

   The italic Playfair ampersand uses Medium weight (500) at display
   scale (24px and above) and SemiBold weight (600) at small scale
   (below 24px). Apply .amp-small explicitly to ampersand instances
   that render below 24px (favicon, small avatars, small watermarks).
   The default .amp / .wm .amp / .vco .amp / .vsq .amp uses Medium 500.
   ============================================================ */
.amp-small {
  font-weight: 600 !important;
}

/* When the wordmark itself is small, the ampersand inside it uses 600 */
.wm.wm-mini .amp,
.wm.wm-compact .amp {
  font-weight: 600;
}

/* The compact V&Co. at small scale also uses SemiBold ampersand */
.vco.vco-small .amp {
  font-weight: 600;
}

/* ============================================================
   9. PRINCIPAL NAME — Playfair italic, always oxblood
   (per VAR/BR/15.6 §3 and §6 — the single exception to the
   register-aware ampersand colour rule)

   This is the only element where Playfair italic colour does NOT follow
   the register accent. Always uses --oxblood (hardcoded), never
   --ampersand-color or --accent.
   ============================================================ */
.pf-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oxblood);
}

/* On dark grounds, the principal name uses lifted oxblood */
.section.dark .pf-name,
.featured-band .pf-name,
.pullquote .pf-name {
  color: var(--oxblood-lift);
}

/* ============================================================
   10. DARK-GROUND AMPERSAND RULE
   (per VAR/BR/15.6 §5.0b two-oxblood rule)

   Wherever an ampersand appears on a dark ground, it uses lifted
   oxblood automatically. This applies to .section.dark, the editorial
   .featured-band, the .pullquote, and the .stat dark-ground stat
   blocks. Register stylesheets may add their own dark-ground contexts
   that follow the same pattern.
   ============================================================ */
.section.dark .wm .amp,
.section.dark .vco .amp,
.section.dark .vsq .amp {
  color: var(--oxblood-lift);
}

.section.dark .wm,
.section.dark .vco,
.section.dark .vsq {
  color: var(--paper-cool);
}

/* ============================================================
   11. TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

h1 { font-size: clamp(44px, 5.5vw, 72px); line-height: 1; letter-spacing: -0.025em; }
h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
h4 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
h5 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }

/* Headline emphasis — DM Sans italic on operative word or phrase
   Per VAR/BR/15.6 §3 the headline-emphasis rule. Use within h1/h2 only.
   Distinct from .pf-name (Playfair italic for principal's name only). */
h1 em.emph,
h2 em.emph,
h1 .emph,
h2 .emph {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  color: inherit;
}

p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
p strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.standfirst {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.metadata {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* Document reference — Playfair italic in the artefact's register accent
   per VAR/BR/15.6 §6 register-aware ampersand colour rule.
   Used in document footers (e.g. VAR/HC/01) and inline references. */
.doc-ref {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ampersand-color);
  font-size: 12px;
}

/* ============================================================
   12. NAV — shared across all pages, accent varies by register
   ============================================================ */
.nav {
  background: rgba(250, 248, 244, 0.92);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
}

/* Nav wordmark — larger than the original 14px, visible from across
   the room. Per VAR/BR/15.6 §17.1.1 sizing tier, this sits at
   wm-standard scale (18px) — the tier intended for letterhead and
   document headers. The nav is the persistent brand surface and
   warrants the standard scale, not the compact one. */
.nav .wm {
  font-size: 17px;
  letter-spacing: 0.10em;
}

/* Nav lockup — wordmark stacked over tagline, with a thin horizontal
   rule between them. The rule is the same pattern as the footer
   .wm-lockup but proportioned for the nav scale — narrower than
   the wordmark width so it doesn't overpower the typography.
   The lockup pattern brings the brand identity (mark + rule + tagline)
   into the persistent nav surface so every visitor sees both. */
.nav-lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-decoration: none;
}
.nav-lockup .nav-rule {
  width: 80px;
  height: 1px;
  background: var(--ink);
  margin: 2px 0;
}
.nav-lockup .nav-tag {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
  white-space: nowrap;
}
.nav-lockup .nav-tag em {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--accent); font-weight: 600; }

.nav-cta {
  color: var(--paper-cool) !important;
  font-weight: 600;
  background: var(--accent);
  padding: 12px 18px;
  transition: background 0.2s ease;
}
.nav-cta:hover {
  background: var(--accent-deep);
  color: var(--paper-cool) !important;
}

@media (max-width: 800px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-lockup .nav-tag { display: none; }
}

/* ============================================================
   13. PAGE STRIP — register signal at top of certain pages
   ============================================================ */
.page-strip {
  padding: 14px 0;
  color: var(--paper-cool);
}
.strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.strip-inner .label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(250, 248, 244, 0.65);
}
.strip-inner .meta {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(250, 248, 244, 0.5);
}

/* ============================================================
   14. SECTION SHELL
   ============================================================ */
.section {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--rule);
}
.section.no-border { border-bottom: none; }

.section.dark {
  background: var(--ink);
  color: var(--paper-cool);
  border-bottom-color: var(--ink);
}
.section.dark p { color: rgba(250, 248, 244, 0.78); }
.section.dark p strong { color: var(--paper-cool); }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: var(--paper-cool); }

@media (max-width: 800px) {
  .section { padding: var(--space-6) 0; }
}

/* ============================================================
   15. SECTION HEADERS
   ============================================================ */
.section-head {
  margin-bottom: var(--space-5);
}
.section-head .eyebrow {
  display: block;
  margin-bottom: 18px;
}
.section-head h2 {
  margin-bottom: 24px;
  max-width: 800px;
}
.section-head .section-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 720px;
}
.section.dark .section-head .section-intro {
  color: rgba(250, 248, 244, 0.78);
}

/* ============================================================
   16. BUTTONS
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  padding: 16px 28px;
  background: var(--accent);
  color: var(--paper-cool);
}
.btn-primary:hover { background: var(--accent-deep); color: var(--paper-cool); }

.btn-secondary {
  padding: 14px 0 14px 18px;
  border-left: 2px solid var(--accent);
  color: var(--accent);
}
.btn-secondary:hover { color: var(--accent-deep); border-left-color: var(--accent-deep); }

.btn-tertiary {
  padding: 16px 28px;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-tertiary:hover { background: var(--ink); color: var(--paper-cool); }

.section.dark .btn-tertiary {
  border-color: var(--paper-cool);
  color: var(--paper-cool);
}
.section.dark .btn-tertiary:hover { background: var(--paper-cool); color: var(--ink); }

/* ============================================================
   17. PRINCIPAL CARD — used on home page hero, about pages
   ============================================================ */
.principal-card {
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  position: relative;
  box-shadow: 0 30px 60px -25px rgba(74, 18, 25, 0.12);
}
.principal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--accent);
}
.pc-portrait {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d8d2c4 0%, #b9b1a0 50%, #8a8478 100%);
  position: relative;
  overflow: hidden;
}
.pc-portrait::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 35% 35%, rgba(255, 255, 255, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 0.18) 0%, transparent 50%);
}
.pc-portrait::after {
  content: 'PORTRAIT';
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
}
.pc-body { padding: 32px 36px 36px; }
.pc-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pc-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 24px;
}
.pc-bio {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}
.pc-creds {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  line-height: 1.9;
}
.pc-creds strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   18. ATTRIBUTION BAR — institution beneath principal
   ============================================================ */
.attribution {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-cool);
}
.attribution-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.attribution .left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.attribution .of {
  font-size: 11px;
  color: var(--muted);
}
.attribution .wm { font-size: 12px; }
.attribution .meta {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* ============================================================
   19. CARDS — used for service tiles, sector cards, principles
   ============================================================ */
.card {
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .card-grid, .card-grid.two, .card-grid.four { grid-template-columns: 1fr; }
}

.card .card-num {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 14px;
}
.card h4 {
  margin-bottom: 14px;
}
.card p {
  font-size: 14px;
  line-height: 1.65;
  flex: 1;
}
.card .card-link {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
}

/* ============================================================
   20. STAT BLOCKS — used on dark sections with stats
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(250, 248, 244, 0.12);
  border: 1px solid rgba(250, 248, 244, 0.12);
}
.stat {
  background: var(--ink);
  padding: 36px 32px;
}
.stat .num {
  font-weight: 600;
  font-size: 48px;
  color: var(--paper-cool);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.stat .num .unit {
  font-size: 0.45em;
  color: var(--accent-on-dark);
  margin-left: 4px;
  font-weight: 500;
}
.stat .desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(250, 248, 244, 0.7);
}

@media (max-width: 800px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   21. FORM ELEMENTS
   ============================================================ */
.form-row {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  margin: 0 auto;
  max-width: 520px;
}
.form-row.inline {
  grid-template-columns: 1fr auto;
}
.form-row input,
.form-row textarea {
  border: none;
  padding: 16px 20px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.form-row input:focus,
.form-row textarea:focus { background: rgba(255, 255, 255, 0.4); }
.form-row button {
  padding: 16px 28px;
  background: var(--accent);
  color: var(--paper-cool);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.form-row button:hover { background: var(--accent-deep); }

@media (max-width: 600px) {
  .form-row.inline { grid-template-columns: 1fr; }
}

/* ============================================================
   22. CONTACT CARD — used on contact band sections

   Note: per VAR/BR/15.6 §12, no direct contact details (email, phone,
   postal address) are displayed on any web page or marketing surface.
   This card is retained for surfaces where contact details are
   permitted (outbound correspondence, business cards rendered as HTML
   for proofing) but should not be used on public pages.
   ============================================================ */
.contact-card {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 44px 40px;
  border-left: 4px solid var(--accent);
}
.contact-card .label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 22px;
}
.contact-card .row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: baseline;
}
.contact-card .row:last-child { border-bottom: none; padding-bottom: 0; }
.contact-card .row .k {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.contact-card .row .v {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.contact-card .row .v a { color: var(--accent); }
.contact-card .row .v a:hover { color: var(--accent-deep); }

/* ============================================================
   22b. INTAKE CARD — replaces direct-contact card on web pages
   Per VAR/BR/15.6 §12 contact funnel discipline.
   ============================================================ */
.intake-card {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 44px 40px;
  border-left: 4px solid var(--accent);
}
.intake-card .label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 22px;
}
.intake-card h4 {
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}
.intake-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.intake-card p strong { color: var(--ink); font-weight: 600; }
.intake-card .intake-steps {
  margin: 22px 0 26px 0;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.intake-card .intake-steps .step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.intake-card .intake-steps .step:last-child { margin-bottom: 0; }
.intake-card .intake-steps .step .num {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.intake-card .intake-steps .step strong { color: var(--ink); font-weight: 600; }
.intake-card .btn-primary {
  width: 100%;
  justify-content: center;
}

/* ============================================================
   23. FOOTER — shared across all pages
   ============================================================ */
.footer {
  background: var(--paper-warm);
  padding: 70px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 50px;
}
.footer-brand .wm-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.footer-brand .wm { font-size: 13px; }
.footer-brand .h-rule {
  width: 80px;
  height: 1px;
  background: var(--ink);
}
.footer-brand .tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
}
.footer-brand .principal-line {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.footer-brand .principal-line .label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 6px;
}
.footer-brand .principal-line .name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--ink);
}
.footer-col h5 {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--accent); }
.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   24. UTILITY CLASSES
   ============================================================ */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split-12-10 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.split-13-10 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; }

@media (max-width: 1100px) {
  .split-2, .split-12-10, .split-13-10 { grid-template-columns: 1fr; gap: 50px; }
}

.divider-rule {
  height: 1px;
  background: var(--rule);
  margin: var(--space-5) 0;
}

.text-center { text-align: center; }
.max-580 { max-width: 580px; }
.max-720 { max-width: 720px; }
.max-840 { max-width: 840px; }

.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* ============================================================
   25. PROSE — for legal pages, long-form content
   ============================================================ */
.prose {
  max-width: 720px;
}
.prose h1 { font-size: clamp(36px, 4.5vw, 56px); margin-bottom: 24px; }
.prose h2 {
  font-size: 28px;
  margin: 48px 0 16px;
}
.prose h3 {
  font-size: 20px;
  margin: 32px 0 14px;
}
.prose p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.75;
}
.prose ul, .prose ol {
  margin: 18px 0 18px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; color: var(--ink); }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.prose a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

.prose .meta {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 32px;
}

/* ============================================================
   26. DISPLAY TYPOGRAPHY (v4.7)

   For confident hero treatments. Used sparingly — once per page,
   typically the home-page hero and occasionally a strategic
   section heading. The brand's "moment of confident scale"
   per the redesign brief.
   ============================================================ */
.display-xl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.display-2xl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(80px, 11vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* Display-scale headline-emphasis — DM Sans italic on the
   operative phrase. Per VAR/BR/15.6 §3, distinct from Playfair italic. */
.display-xl em,
.display-xl .emph,
.display-2xl em,
.display-2xl .emph {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  color: inherit;
}

/* On dark grounds, display headlines invert */
.section.dark .display-xl,
.section.dark .display-2xl {
  color: var(--paper-cool);
}

/* ============================================================
   27. ASYMMETRIC GRID UTILITIES (v4.7)

   Beyond the existing symmetric splits. Asymmetric layouts read
   as composed; symmetric layouts read as default. Use sparingly —
   each asymmetry should serve the content's hierarchy, not be
   decoration.
   ============================================================ */
.split-7-3 { display: grid; grid-template-columns: 7fr 3fr; gap: 80px; align-items: start; }
.split-3-7 { display: grid; grid-template-columns: 3fr 7fr; gap: 80px; align-items: start; }
.split-8-4 { display: grid; grid-template-columns: 8fr 4fr; gap: 80px; align-items: start; }
.split-4-8 { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; align-items: start; }
.split-6-4 { display: grid; grid-template-columns: 6fr 4fr; gap: 80px; align-items: start; }
.split-4-6 { display: grid; grid-template-columns: 4fr 6fr; gap: 80px; align-items: start; }

/* Variants with center alignment for hero-like contexts */
.split-7-3.align-center,
.split-3-7.align-center,
.split-8-4.align-center,
.split-4-8.align-center,
.split-6-4.align-center,
.split-4-6.align-center { align-items: center; }

@media (max-width: 1100px) {
  .split-7-3, .split-3-7, .split-8-4, .split-4-8,
  .split-6-4, .split-4-6 {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

/* ============================================================
   28. SECTION FEATURE (v4.7)

   A more deliberate, more confident vertical padding for
   strategic-moment sections on primary pages. Used for the
   home-page operating-model section, the funnel, the closing
   call-to-action — moments where the section is doing
   load-bearing positioning work.
   ============================================================ */
.section-feature {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--rule);
}
.section-feature.no-border { border-bottom: none; }

/* Dark variant — inherits the .section.dark visual treatment
   but with section-feature's more generous padding. */
.section-feature.dark {
  background: var(--ink);
  color: var(--paper-cool);
  border-bottom-color: var(--ink);
}
.section-feature.dark p { color: rgba(250, 248, 244, 0.78); }
.section-feature.dark p strong { color: var(--paper-cool); }
.section-feature.dark h1,
.section-feature.dark h2,
.section-feature.dark h3,
.section-feature.dark h4 { color: var(--paper-cool); }

/* Lifted oxblood ampersand in section-feature dark grounds, per
   VAR/BR/15.6 §5.0b two-oxblood rule (parallel to .section.dark) */
.section-feature.dark .wm .amp,
.section-feature.dark .vco .amp,
.section-feature.dark .vsq .amp {
  color: var(--oxblood-lift);
}
.section-feature.dark .wm,
.section-feature.dark .vco,
.section-feature.dark .vsq {
  color: var(--paper-cool);
}

@media (max-width: 800px) {
  .section-feature { padding: var(--space-6) 0; }
}

/* ============================================================
   29. EDITORIAL COMPONENTS (v4.7)

   Type-led moments: statements that stand alone, callouts that
   don't require dark grounds, kickers that introduce without
   the tracked-uppercase eyebrow treatment.
   ============================================================ */

/* Statement — a large type-led standalone block. The text is
   the whole section. No card chrome, no decoration. */
.statement {
  max-width: 1080px;
}
.statement-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.statement-text em,
.statement-text .emph {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  color: inherit;
}
.statement-attribution {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.statement-attribution strong {
  color: var(--ink);
  font-weight: 600;
}

/* Callout-quiet — pullquote-like treatment without the dark
   background. Used in body prose where a dark pullquote would be
   too loud, but the reader's attention should still settle on a
   single line. */
.callout-quiet {
  margin: 50px 0;
  padding: 32px 0 32px 36px;
  border-left: 3px solid var(--accent);
}
.callout-quiet .text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 720px;
}
.callout-quiet .text em {
  font-style: italic;
}
.callout-quiet .attr {
  margin-top: 18px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* Kicker — a short overline that introduces a section without
   the tracked-uppercase eyebrow treatment. Quieter than .eyebrow,
   used where the eyebrow would feel too formal. */
.kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}

/* ============================================================
   30. FUNNEL COMPONENT (v4.7)

   The three-step assessment-to-retainer funnel. Each step
   names commitment level explicitly so the prospect can see
   the path. Visual progression between steps via a connecting
   rule and incremental colour weighting.
   ============================================================ */
.funnel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper-cool);
}
.funnel-step {
  padding: 40px 36px 44px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  position: relative;
}
.funnel-step:last-child { border-right: none; }
.funnel-step .step-num {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 18px;
}
.funnel-step .step-title {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
}
.funnel-step .step-detail {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 22px;
  flex: 1;
}
.funnel-step .step-commitment {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.funnel-step .step-commitment .label {
  color: var(--muted);
}
.funnel-step .step-commitment .value {
  color: var(--accent);
  font-size: 13px;
}

/* Direction-of-travel: each step inherits a slightly more
   committed visual register. Step 3 carries a deeper accent
   to signal the conversion product. */
.funnel-step.step-3 {
  background: var(--paper-warm);
}

@media (max-width: 1100px) {
  .funnel { grid-template-columns: 1fr; }
  .funnel-step {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .funnel-step:last-child { border-bottom: none; }
}

/* ============================================================
   31. TAG REFINEMENT (v4.7)

   Per VAR/BR/15.6 §3, the tagline "Data Protection, Delivered"
   uses DM Sans italic on "Delivered" — the headline-emphasis
   rule. Made explicit here so the rendering is deliberate
   rather than relying on browser defaults.
   ============================================================ */
.tag em,
.wm-lockup .tag em,
.footer-brand .tag em {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   END OF ROOT STYLESHEET
   VAR/BR/17 v4.7 · April 2026
   ============================================================ */