@charset "UTF-8";
/* ==========================================================================
   Heights Consulting Group, design system
   --------------------------------------------------------------------------
   One stylesheet, no framework, no build step. Organised as:
     1. Design tokens
     2. Fonts
     3. Reset and base elements
     4. Layout primitives
     5. Typography components
     6. Interactive components
     7. Page components
     8. Forms
     9. Utilities
    10. Responsive and preference overrides

   The visual language is derived from the Heights mark: a hard-edged summit.
   That gives the system its rules, straight hairlines, near-square corners,
   an asymmetric grid, and colour used as punctuation rather than surface.
   Documented in docs/DESIGN-SYSTEM.md.
   ========================================================================== */

/* 1. Design tokens ======================================================== */

:root {
    /* --- Brand ---------------------------------------------------------- */
    /* The Heights logo is monochrome. The palette stays close to it: a near
       black ink for authority, a warm paper for calm, one cold accent. */
    --color-ink-900: #0b1220;   /* primary dark surface: hero, footer, CTA */
    --color-ink-800: #121a2b;   /* raised dark surface */
    --color-ink-700: #1c2541;   /* secondary dark, carried over from the
                                   existing Heights portal palette */
    --color-ink-600: #2a3547;

    --color-paper:         #fbfaf7;  /* page background */
    --color-surface:       #ffffff;  /* raised light surface */
    --color-surface-sunken:#f2f0ea;  /* recessed light surface */

    /* --- Text ----------------------------------------------------------- */
    --color-text:            #14181f;
    --color-text-secondary:  #454f5f;
    --color-text-muted:      #656e7e;
    --color-text-on-dark:           #ffffff;
    --color-text-on-dark-secondary: #c3cad6;
    --color-text-on-dark-muted:     #8d97a8;

    /* --- Lines ---------------------------------------------------------- */
    --color-line:          #dfdcd4;
    --color-line-strong:   #c2bdb1;
    --color-line-on-dark:  rgba(255, 255, 255, 0.16);
    --color-line-on-dark-strong: rgba(255, 255, 255, 0.34);

    /* --- Brand ramp ------------------------------------------------------
       Phase 2.2: the Heights blue is a SURFACE, not a hairline. A full ramp so
       it can carry whole sections, diagram cores and emphasis blocks while
       staying inside one hue family. */
    --color-brand-900: #06192c;
    --color-brand-800: #0b3a63;
    --color-brand-700: #0f4c81;   /* the verified accent */
    --color-brand-600: #17679f;
    --color-brand-500: #2f83bd;
    --color-brand-400: #5aa2d4;
    --color-brand-300: #8fbde8;
    --color-brand-100: #d3e5f4;
    --color-brand-50:  #edf4fa;

    --color-accent:          var(--color-brand-700);
    --color-accent-strong:   var(--color-brand-800);
    --color-accent-on-dark:  var(--color-brand-300);
    --color-accent-wash:     var(--color-brand-50);

    /* Warm mid-tone, so the page is not only ink-or-paper. */
    --color-sand:      #e9e4d9;
    --color-sand-deep: #ddd6c7;

    /* --- Feedback (forms only) ------------------------------------------ */
    --color-error:      #96201a;
    --color-error-wash: #fbeeed;
    --color-success:    #1c5f3f;

    /* --- Type ----------------------------------------------------------- */
    /* Inter Tight for display, Inter for everything else. One family, two
       optical widths: it matches the tight geometric grotesque of the Heights
       wordmark, where the previous serif pulled against it. */
    --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --text-hero:      clamp(2.125rem, 1.35rem + 2.7vw, 3.25rem);
    --text-display-1: clamp(2rem, 1.4rem + 2.1vw, 2.875rem);
    --text-display-2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
    --text-display-3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --text-heading:   clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
    --text-subheading: 1.0625rem;
    --text-lede:      clamp(1.0625rem, 1.02rem + 0.28vw, 1.1875rem);
    --text-body:      1.0625rem;
    --text-small:     0.9375rem;
    --text-micro:     0.8125rem;

    --leading-tight: 1.02;
    --leading-snug:  1.14;
    --leading-body:  1.6;
    --leading-loose: 1.7;

    --tracking-display: -0.035em;
    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.08em;
    --tracking-eyebrow: 0.16em;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

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

    --section-space: clamp(3.5rem, 2rem + 6vw, 7rem);
    --section-space-tight: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

    /* --- Grid and containers -------------------------------------------- */
    --container-max:    75rem;   /* 1200px */
    --container-wide:   84rem;   /* 1344px, edge-to-edge sections */
    --container-narrow: 45rem;   /* 720px, prose measure */
    --container-gutter: clamp(1.25rem, 0.7rem + 2.2vw, 3rem);
    --grid-gap:         clamp(1.5rem, 1rem + 2vw, 3rem);

    /* --- Borders and radii ---------------------------------------------- */
    /* Corners stay almost square. Two values only. */
    --border-hairline: 1px;
    --border-heavy:    2px;
    --radius-sm: 2px;
    --radius-md: 3px;

    /* --- Elevation ------------------------------------------------------ */
    /* Two shadows, both restrained. Depth is expressed with rules, not glow. */
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
    --shadow-md: 0 12px 32px -12px rgba(11, 18, 32, 0.22);

    /* --- Motion --------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0, 0.15, 1);
    --duration-fast: 120ms;
    --duration: 200ms;

    /* --- Focus ---------------------------------------------------------- */
    --focus-ring: 2px solid var(--color-accent);
    --focus-offset: 3px;

    /* --- Layers --------------------------------------------------------- */
    --z-header: 50;
    --z-drawer: 60;

    /* --- Sticky chrome ---------------------------------------------------
       Everything that pins to the top derives its offset from these, so the
       header, the in-page index and the sticky section headings can never
       drift out of step with each other. */
    --chrome-header: 4.5rem;   /* the site header */
    --chrome-index:  0rem;     /* raised on pages carrying an in-page index */
    --chrome-top:    calc(var(--chrome-header) + var(--chrome-index));
    --sticky-gap:    var(--space-8);
}

/* Pages with the in-page section index carry 3.25rem more sticky chrome. */
:root:has(.section-index) {
    --chrome-index: 3.25rem;
}

/* 2. Fonts ================================================================ */

/* Self-hosted, latin subset, so the site makes no third-party font request.
   `swap` keeps text visible during load. Two files, 93 KB total. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/inter-variable-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: "Inter Tight";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/fonts/inter-tight-variable-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;
}

/* 3. Reset and base ======================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchored sections clear every piece of sticky chrome. */
    scroll-padding-top: calc(var(--chrome-top) + var(--space-6));
}

body {
    margin: 0;
    background-color: var(--color-paper);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: inherit;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

p, ul, ol, dl, figure, blockquote, table {
    margin: 0;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease);
}

a:hover {
    color: var(--color-accent-strong);
    text-decoration-thickness: 2px;
}

.brand-case {
    text-transform: none;
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

hr {
    border: 0;
    border-top: var(--border-hairline) solid var(--color-line);
    margin: 0;
}

::selection {
    background: var(--color-ink-900);
    color: var(--color-text-on-dark);
}

strong, b {
    font-weight: var(--weight-semibold);
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* 4. Layout primitives ==================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-space);
}

.section--tight {
    padding-block: var(--section-space-tight);
}

.section--ink {
    background-color: var(--color-ink-900);
    color: var(--color-text-on-dark);
}

.section--sunken {
    background-color: var(--color-surface-sunken);
}

.section--ruled {
    border-top: var(--border-hairline) solid var(--color-line);
}

.section--ink h1,
.section--ink h2,
.section--ink h3 {
    color: var(--color-text-on-dark);
}

.section--ink p {
    color: var(--color-text-on-dark-secondary);
}

.section--ink a:not(.btn) {
    color: var(--color-accent-on-dark);
}

.section--ink a:not(.btn):hover {
    color: var(--color-text-on-dark);
}

.stack > * + * {
    margin-top: var(--space-4);
}

.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.stack-12 > * + * { margin-top: var(--space-12); }

.grid {
    display: grid;
    gap: var(--grid-gap);
}

/* Asymmetric editorial split: a section title column and a content column. */
/* The editorial split. Matches the homepage's leadership-gap composition:
   the heading and its statement hold the left, the structured content holds
   the right, and the aside stays with the reader while the right column
   scrolls. Interior pages used to render this as a small heading beside a wall
   of paragraphs, which is what made them read as a different site. */
.grid--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
    align-items: start;
}

.grid--split > .section-header {
    position: sticky;
    top: calc(var(--chrome-top) + var(--sticky-gap));
}

.section-index ~ * .grid--split > .section-header,
.section-index ~ * .leadgap__aside,
.section-index ~ .section .grid--split > .section-header,
.section-index ~ .section .leadgap__aside {
    top: calc(var(--chrome-header) + 3.25rem + var(--sticky-gap));
}

/* The aside's supporting sentence gets the same weight as the homepage's. */
.grid--split > .section-header p {
    font-size: var(--text-lede);
    line-height: 1.55;
    max-width: 40ch;
}

/* Body copy in the right column keeps a comfortable measure and never runs
   the full width of a wide container. */
.grid--split > * > p,
.grid--split > .stack-6 > p,
.grid--split > .stack-8 > p,
.grid--split > .stack-12 > p {
    max-width: 64ch;
}

.grid--split-wide {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
    align-items: start;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.flow > * + * {
    margin-top: 1.1em;
}

/* 5. Typography components ================================================ */

.eyebrow {
    margin: 0 0 var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.section--ink .eyebrow {
    color: var(--color-text-on-dark-muted);
}

.display-1 {
    font-size: var(--text-display-1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
}

.display-2 {
    font-size: var(--text-display-2);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
}

.display-3 {
    font-size: var(--text-display-3);
    line-height: var(--leading-snug);
}

.heading {
    font-size: var(--text-heading);
}

.subheading {
    font-family: var(--font-sans);
    font-size: var(--text-subheading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
}

.lede {
    font-size: var(--text-lede);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    max-width: 38ch;
}

.lede--wide {
    max-width: 60ch;
}

.section--ink .lede {
    color: var(--color-text-on-dark-secondary);
}

.text-small { font-size: var(--text-small); }
.text-micro { font-size: var(--text-micro); }

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.section--ink .text-muted { color: var(--color-text-on-dark-muted); }

.measure { max-width: 62ch; }
.measure-narrow { max-width: 46ch; }

/* Answer-first summary block: the concise, quotable answer that leads an
   important page. Kept in normal document flow and normal contrast, it is
   primary content, not a decorative pull quote. */
.answer {
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    max-width: 46ch;
}

.section--ink .answer,
.surface--brand .answer {
    color: #fff;
}

.section--ink .answer {
    border-left-color: var(--color-accent-on-dark);
    color: var(--color-text-on-dark);
}

/* 6. Interactive components =============================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.875rem 1.5rem;
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
}

.btn--primary {
    background-color: var(--color-ink-900);
    border-color: var(--color-ink-900);
    color: var(--color-text-on-dark);
}

.btn--primary:hover {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: var(--color-text-on-dark);
}

.btn--secondary {
    background-color: transparent;
    border-color: var(--color-line-strong);
    color: var(--color-text);
}

.btn--secondary:hover {
    border-color: var(--color-ink-900);
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* On ink surfaces the emphasis inverts: paper is the loud option.
   Every dark context is listed here so a button can never end up ink-on-ink. */
.section--ink .btn--primary,
.cta-panel .btn--primary,
.site-footer .btn--primary {
    background-color: var(--color-paper);
    border-color: var(--color-paper);
    color: var(--color-ink-900);
}

.hero .btn--primary {
    background-color: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: #fff;
}

.hero .btn--primary:hover {
    background-color: var(--color-brand-500);
    border-color: var(--color-brand-500);
    color: #fff;
}

.section--ink .btn--primary:hover,
.cta-panel .btn--primary:hover,
.site-footer .btn--primary:hover,
.btn--on-ink:hover {
    background-color: var(--color-accent-on-dark);
    border-color: var(--color-accent-on-dark);
    color: var(--color-ink-900);
}

.section--ink .btn--secondary,
.hero .btn--secondary,
.cta-panel .btn--secondary,
.site-footer .btn--secondary {
    border-color: var(--color-line-on-dark-strong);
    color: var(--color-text-on-dark);
}

.section--ink .btn--secondary:hover,
.hero .btn--secondary:hover,
.cta-panel .btn--secondary:hover,
.site-footer .btn--secondary:hover {
    border-color: var(--color-paper);
    background-color: transparent;
    color: var(--color-text-on-dark);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

/* Keep both calls to action on one row wherever they fit; the primary stays
   visually dominant through fill, not size. */
.btn-row .btn {
    white-space: nowrap;
}

/* Text link with a trailing rule, used for "read more" affordances. */
.link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.link-arrow::after {
    content: "→";
    transition: transform var(--duration) var(--ease);
}

.link-arrow:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.link-arrow:hover::after {
    transform: translateX(3px);
}

/* 7. Page components ====================================================== */

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--color-ink-900);
    color: var(--color-text-on-dark);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--duration) var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
    color: var(--color-text-on-dark);
}

/* --- Header --------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-paper);
    border-bottom: var(--border-hairline) solid var(--color-line);
}

/* The header call to action is the one place brand blue appears in the chrome. */
.site-header .btn--primary {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #fff;
}

.site-header .btn--primary:hover {
    background-color: var(--color-brand-800);
    border-color: var(--color-brand-800);
    color: #fff;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 4.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.brand img {
    width: 210px;
    height: auto;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* The in-nav call to action only appears in the collapsed mobile menu; on
   desktop the header keeps a single, persistent CTA button. */
.nav__cta {
    display: none;
}

.nav__link {
    position: relative;
    display: inline-block;
    padding-block: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: var(--tracking-normal);
}

.nav__link:hover {
    color: var(--color-text);
}

/* The one active state: heavier text and a 2px blue underline directly beneath
   the label. Deliberately NOT the focus indicator, which stays the focus ring. */
.nav__link[aria-current="page"] {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid var(--color-brand-700);
}

/* The flagship offering carries a little more weight than the rest of the nav,
   expressed through the type alone. It gets no separate rule of its own: two
   indicators competing in one bar is what made the header noisy. */
.nav__link--flagship {
    color: var(--color-text);
}

/* --- Mobile navigation ---------------------------------------------------- */
.nav-toggle,
.nav-toggle[hidden] {
    display: none;
}

.nav-toggle {
    align-items: center;
    gap: var(--space-2);
    /* 44px minimum touch target. */
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: var(--border-hairline) solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
}

.nav-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1rem;
    height: 0.625rem;
}

.nav-toggle__bars span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform var(--duration) var(--ease), opacity var(--duration-fast) var(--ease);
}

/* Open state: the bars become a cross and the label reads "Close", so the
   control says what it does in both states. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
}

.nav-toggle__label--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__label--open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__label--close {
    display: inline;
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs {
    padding-block: var(--space-5);
    border-bottom: var(--border-hairline) solid var(--color-line);
    font-size: var(--text-micro);
}

/* Compact variant: sits inside a coloured hero, no band, no rule. */
.breadcrumbs--inline {
    padding-block: 0 var(--space-5);
    border-bottom: 0;
}

.surface--brand .breadcrumbs--inline a,
.surface--brand .breadcrumbs--inline li {
    color: rgba(255, 255, 255, 0.6);
}

.surface--brand .breadcrumbs--inline [aria-current="page"] {
    color: rgba(255, 255, 255, 0.9);
}

.surface--brand .breadcrumbs--inline li + li::before {
    color: rgba(255, 255, 255, 0.35);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
    content: "/";
    color: var(--color-line-strong);
}

.breadcrumbs a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--color-text);
}

/* --- Hero -----------------------------------------------------------------
   A single-column editorial statement on deep navy.

   The approved photograph (homepage-vciso-leadership.jpg) has not been
   licensed, so rather than leave a dead second column or substitute a stock
   image, the hero commits to one column: eyebrow, three-line headline, one
   sentence, two calls to action, then a rule and the audience line. See
   docs/HOMEPAGE_IMAGE_REQUIREMENTS.md for the specification and for the change
   required when the photograph arrives.

   Height is held near 650px on desktop so the question band below is always
   partly visible at 1440x900. */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    /* Tuned so the question band below always breaks the fold at 1440x900. */
    min-height: clamp(24rem, 13rem + 26vw, 36rem);
    background-color: var(--color-ink-900);
    color: var(--color-text-on-dark);
    padding-block: clamp(2.5rem, 1.75rem + 2.4vw, 4rem);
    overflow: hidden;
    isolation: isolate;
}

.hero > .container {
    width: 100%;
}

/* The one background treatment: a single soft blue field, low and to the
   right, so the navy has a light source and the headline still sits on the
   darkest part of the panel. No grid, no pattern, no second layer. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        78% 105% at 88% 72%,
        rgba(23, 103, 159, 0.42) 0%,
        rgba(15, 76, 129, 0.15) 46%,
        transparent 72%
    );
}

.hero__message {
    display: grid;
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.hero__statement {
    grid-column: 1;
}

/* The model column is capped so it stays in the 520 to 600px band the design
   calls for rather than stretching with the viewport. */
.hero__visual {
    grid-column: 2;
    justify-self: end;
    width: 100%;
    max-width: 37.5rem;
}

/* Not the sitewide .eyebrow: that component leads with a blue rule, and thin
   blue rules are no longer the page's decorative device. */
.hero__eyebrow {
    margin: 0 0 var(--space-5);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand-300);
}

.hero__title {
    margin: 0;
    font-size: clamp(2.25rem, 1.3rem + 2.35vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-bold);
}

.hero__line {
    display: block;
}

/* The offer is white; the two supporting lines are a controlled light blue.
   Light enough to read as secondary, strong enough not to look disabled. */
.hero__line--accent {
    color: var(--color-brand-300);
}

.hero__lede {
    margin: var(--space-6) 0 0;
    max-width: 46ch;
    font-size: var(--text-lede);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
    margin-top: var(--space-8);
    flex-wrap: wrap;
    align-items: stretch;
}

.hero__actions .btn {
    white-space: nowrap;
    padding-inline: var(--space-6);
}


/* --- The three-stage vCISO model ------------------------------------------
   One container, three stages, one left-to-right flow. Every label is HTML
   text. The two chevrons are pseudo-elements sitting in the grid gap, so no
   connector is ever drawn between individual items and nothing can drift out
   of alignment with the content. No animation and no hover state. */
.flow {
    background-color: var(--color-ink-800);
    border: var(--border-hairline) solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: clamp(1.25rem, 0.9rem + 1.1vw, 2rem);
}

.flow__title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-on-dark-muted);
}

.flow__stages {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: stretch;
}

.flow__stage {
    position: relative;
    padding: var(--space-5) var(--space-4) var(--space-6);
    border-radius: var(--radius-sm);
    border: var(--border-hairline) solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.045);
}

/* One chevron between stages, in the gap, never touching a label. */
.flow__stage + .flow__stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--space-6) / -2);
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.225rem;
    margin-left: -0.225rem;
    border-top: 2px solid var(--color-brand-400);
    border-right: 2px solid var(--color-brand-400);
    transform: rotate(45deg);
}

/* The middle stage is the point of the graphic, so it carries the Heights
   blue and the only solid fill. */
.flow__stage--core {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-600);
}

.flow__label {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-hairline) solid rgba(255, 255, 255, 0.16);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-brand-300);
}

.flow__stage--core .flow__label {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.flow__items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.86);
}

.flow__stage--core .flow__items {
    font-weight: var(--weight-semibold);
    color: #fff;
}


/* --- Interior page hero ---------------------------------------------------
   The homepage hero, reused. Same navy field, same eyebrow, same headline
   scale and weight, same lede, same two-button row, all in the left column,
   with a supporting panel on the right where the homepage carries the
   three-stage model.

   Deliberately shorter than the homepage hero: an interior page has content to
   get to. */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(20rem, 12rem + 18vw, 28rem);
    background-color: var(--color-ink-900);
    color: var(--color-text-on-dark);
    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
    overflow: hidden;
    isolation: isolate;
}

.page-hero > .container {
    width: 100%;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        78% 110% at 88% 78%,
        rgba(23, 103, 159, 0.36) 0%,
        rgba(15, 76, 129, 0.12) 48%,
        transparent 74%
    );
}

/* The brand-toned variant, for the flagship page. */
.page-hero--brand {
    background-color: var(--color-brand-900);
}

.page-hero--brand::before {
    background: radial-gradient(
        80% 110% at 85% 75%,
        rgba(47, 131, 189, 0.4) 0%,
        rgba(15, 76, 129, 0.18) 50%,
        transparent 76%
    );
}

.page-hero .breadcrumbs--inline {
    margin-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

/* No panel, no empty column. */
.page-hero--solo .page-hero__inner {
    grid-template-columns: minmax(0, 1fr);
}

.page-hero--solo .page-hero__message {
    max-width: 54rem;
}

.page-hero__eyebrow {
    margin: 0 0 var(--space-5);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand-300);
}

.page-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 2.1vw, 3.25rem);
    font-weight: var(--weight-bold);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    max-width: 18ch;
}

.page-hero--solo .page-hero__title {
    max-width: 24ch;
}

.page-hero__lede {
    margin: var(--space-6) 0 0;
    max-width: 46ch;
    font-size: var(--text-lede);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.page-hero__actions {
    margin-top: var(--space-8);
    flex-wrap: nowrap;
    align-items: stretch;
}

.page-hero__actions .btn {
    white-space: nowrap;
    padding-inline: var(--space-6);
}

.page-hero .btn--primary {
    background-color: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: #fff;
}

.page-hero .btn--primary:hover {
    background-color: var(--color-brand-500);
    border-color: var(--color-brand-500);
    color: #fff;
}

.page-hero .btn--secondary {
    border-color: var(--color-line-on-dark-strong);
    color: #fff;
}

.page-hero .btn--secondary:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.page-hero .breadcrumbs--inline a,
.page-hero .breadcrumbs--inline li {
    color: rgba(255, 255, 255, 0.62);
}

.page-hero .breadcrumbs--inline [aria-current="page"] {
    color: rgba(255, 255, 255, 0.9);
}

.page-hero .breadcrumbs--inline li + li::before {
    color: rgba(255, 255, 255, 0.35);
}

/* --- Fact panel -----------------------------------------------------------
   The interior counterpart to the homepage's three-stage model: the same dark
   container, border and radius, carrying a short factual list rather than a
   diagram. Never a statistic and never a claim. */
.factbox {
    background-color: var(--color-ink-800);
    border: var(--border-hairline) solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: clamp(1.25rem, 0.9rem + 1.1vw, 2rem);
}

.page-hero--brand .factbox {
    background-color: rgba(6, 25, 44, 0.55);
}

.factbox__title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-on-dark-muted);
}

.factbox__list {
    margin: 0;
    display: grid;
    gap: var(--space-4);
}

.factbox__row {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border: var(--border-hairline) solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.045);
}

.factbox__row dt {
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-brand-300);
}

.factbox__row dd {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}


/* --- Insights: typographic article treatments -----------------------------
   No imagery anywhere in this set. A card is a topic label, a rule, a title,
   a summary and a byline. Nothing stands in for a photograph. */
.topicbar {
    background-color: var(--color-surface-sunken);
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.topicbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-4);
}

.topicbar__label {
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.topicbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.topicbar__list li {
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-brand-800);
}

.lead-article__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
}

.lead-article__aside {
    border-top: var(--border-heavy) solid var(--color-brand-700);
    padding-top: var(--space-5);
}

.lead-article__flag {
    margin: 0;
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.lead-article__topic {
    margin: var(--space-4) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-subheading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.lead-article__byline {
    margin: var(--space-4) 0 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.lead-article__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.875rem);
    font-weight: var(--weight-bold);
    line-height: 1.08;
    letter-spacing: var(--tracking-display);
    max-width: 22ch;
}

.lead-article__title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

.lead-article__title a:hover {
    color: var(--color-brand-700);
}

.lead-article__summary {
    margin: var(--space-6) 0 0;
    font-size: var(--text-lede);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 60ch;
}

.insight-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: var(--border-heavy) solid var(--color-brand-700);
}

.insight-card__topic {
    margin: 0;
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.insight-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-display-3);
    font-weight: var(--weight-bold);
    line-height: 1.16;
    letter-spacing: var(--tracking-tight);
}

.insight-card__title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

.insight-card__title a:hover {
    color: var(--color-brand-700);
}

.insight-card__summary {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.insight-card__byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: auto 0 0;
    padding-top: var(--space-4);
    font-size: var(--text-micro);
    color: var(--color-text-muted);
}

/* The article header: the site's hero, holding a byline instead of buttons. */
.page-hero--article {
    min-height: 0;
}

.page-hero--article .byline {
    margin-top: var(--space-8);
    color: rgba(255, 255, 255, 0.72);
}

.page-hero--article .byline a {
    color: var(--color-brand-300);
}

/* --- Article reading layout -----------------------------------------------
   A sticky rail beside a long-form body. The rail carries the contents, the
   attribution and the related links, so a long article is navigable and the
   page is not one narrow ribbon of text down the middle of a wide screen. */
.article-layout__inner {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
    align-items: start;
}

.article-rail {
    position: sticky;
    top: calc(var(--chrome-top) + var(--sticky-gap));
    display: grid;
    gap: var(--space-8);
}

.article-rail__block {
    border-top: var(--border-heavy) solid var(--color-brand-700);
    padding-top: var(--space-4);
}

.article-rail__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.article-rail__toc,
.article-rail__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
    font-size: var(--text-small);
    line-height: 1.4;
}

.article-rail__toc {
    counter-reset: toc;
}

.article-rail__toc li {
    counter-increment: toc;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
}

.article-rail__toc li::before {
    content: counter(toc, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-400);
    font-weight: var(--weight-semibold);
}

.article-rail__meta {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* The body keeps a long-form measure regardless of how wide the column gets. */
.article-body .prose {
    max-width: 68ch;
}

.article-sources {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: var(--border-hairline) solid var(--color-line);
    max-width: 68ch;
}

.article-sources__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-subheading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.article-sources ol {
    margin: 0;
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-small);
    line-height: 1.6;
}

/* --- Qualifier ------------------------------------------------------------
   A short titled paragraph. Used where a page has to carry three or four
   consecutive explanatory paragraphs: each gets a heading so the section is
   scannable rather than a wall of prose. */
.qualifier {
    border-top: var(--border-hairline) solid var(--color-line);
    padding-top: var(--space-5);
}

.qualifier--emphasis {
    border-top: var(--border-heavy) solid var(--color-brand-700);
}

.qualifier--on-ink {
    border-top-color: var(--color-line-on-dark);
}

.qualifier--on-ink.qualifier--emphasis {
    border-top-color: var(--color-brand-400);
}

.qualifier__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.section--ink .qualifier__title {
    color: #fff;
}

.qualifier__text {
    margin: var(--space-3) 0 0;
    line-height: var(--leading-body);
    color: var(--color-text-secondary);
    max-width: 62ch;
}

.section--ink .qualifier__text {
    color: var(--color-text-on-dark-secondary);
}

/* --- Section headers ------------------------------------------------------ */
.section-header {
    max-width: 34ch;
}

.section-header--wide {
    max-width: 46ch;
}

.section-header p {
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
}

.section--ink .section-header p,
.surface--brand .section-header p {
    color: var(--color-text-on-dark-secondary);
}

/* Full-width section header, used where the content below needs the whole
   container, the services index, where a nested column squeezes the service
   names into two-word wraps. */
.group-header {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--grid-gap);
    align-items: baseline;
    padding-bottom: var(--space-6);
}

.group-header__summary {
    color: var(--color-text-secondary);
    max-width: 52ch;
}

.section--ink .group-header__summary {
    color: var(--color-text-on-dark-secondary);
}

/* --- Numbered rows: the primary list pattern ------------------------------
   Used for problem framing, outcomes and process steps. Rules and numerals
   instead of a wall of rounded cards. */
.rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline) solid var(--color-line);
}

.rows > li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-6);
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.rows--plain > li {
    grid-template-columns: minmax(0, 1fr);
}

.section--ink .rows,
.section--ink .rows > li {
    border-color: var(--color-line-on-dark);
}

.rows__number {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    padding-top: 0.2rem;
}

.section--ink .rows__number {
    color: var(--color-accent-on-dark);
}

.rows__title {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-2);
}

.rows__body {
    color: var(--color-text-secondary);
    max-width: 62ch;
}

.section--ink .rows__body {
    color: var(--color-text-on-dark-secondary);
}

/* --- Two-column definition list (outcomes, deliverables) ------------------- */
.definitions {
    margin: 0;
    display: grid;
    gap: 0;
    border-top: var(--border-hairline) solid var(--color-line);
}

.definitions > div {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.definitions dt {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.definitions dd {
    margin: 0;
    color: var(--color-text-secondary);
}

.section--ink .definitions,
.section--ink .definitions > div {
    border-color: var(--color-line-on-dark);
}

.section--ink .definitions dt { color: var(--color-text-on-dark); }
.section--ink .definitions dd { color: var(--color-text-on-dark-secondary); }

/* --- Checklist ------------------------------------------------------------ */
.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.checklist li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--color-text-secondary);
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 0.75rem;
    border-top: var(--border-heavy) solid var(--color-accent);
}

.section--ink .checklist li { color: var(--color-text-on-dark-secondary); }
.section--ink .checklist li::before { border-top-color: var(--color-accent-on-dark); }

/* --- Service / industry index rows ---------------------------------------- */
.index-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline) solid var(--color-line);
}

.index-list__item {
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.index-list__link {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
    gap: var(--space-5);
    align-items: baseline;
    padding-block: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--duration) var(--ease);
}

.index-list__link:hover {
    background-color: var(--color-surface);
    color: inherit;
}

.index-list__link:hover .index-list__name {
    color: var(--color-accent);
}

.index-list__name {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    transition: color var(--duration) var(--ease);
}

.index-list__summary {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.index-list__cue {
    color: var(--color-text-muted);
    font-size: var(--text-small);
}

.section--ink .index-list__link:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.section--ink .index-list__link:hover .index-list__name {
    color: var(--color-accent-on-dark);
}

.section--ink .index-list__name {
    color: var(--color-text-on-dark);
}

.section--ink .index-list__summary,
.section--ink .index-list__cue {
    color: var(--color-text-on-dark-secondary);
}

/* --- Article previews ----------------------------------------------------- */
.article-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
    border-top: var(--border-hairline) solid var(--color-line);
}

.article-preview {
    border-bottom: var(--border-hairline) solid var(--color-line);
    padding-block: var(--space-8);
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--grid-gap);
    align-items: start;
}

.section--ink .article-list,
.section--ink .article-preview {
    border-color: var(--color-line-on-dark);
}

.article-preview__meta {
    font-size: var(--text-micro);
    color: var(--color-text-muted);
    display: grid;
    gap: var(--space-2);
}

.article-preview__category {
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

.section--ink .article-preview__category { color: var(--color-accent-on-dark); }
.section--ink .article-preview__meta { color: var(--color-text-on-dark-muted); }

.article-preview__title {
    font-size: var(--text-display-3);
    margin: 0 0 var(--space-3);
    letter-spacing: var(--tracking-tight);
}

.article-preview__title a {
    color: inherit;
    text-decoration: none;
}

.article-preview__title a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.section--ink .article-preview__title a:hover { color: var(--color-accent-on-dark); }

.article-preview__summary {
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.section--ink .article-preview__summary { color: var(--color-text-on-dark-secondary); }

.article-preview--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-6);
}

.article-preview--compact .article-preview__title {
    font-size: var(--text-heading);
}

/* --- Article body (prose) ------------------------------------------------- */
.prose {
    max-width: 68ch;
    font-size: 1.09375rem;
    line-height: var(--leading-loose);
    color: var(--color-text);
}

.prose > * + * {
    margin-top: var(--space-6);
}

.prose h2 {
    font-size: var(--text-display-3);
    margin-top: var(--space-12);
    letter-spacing: var(--tracking-tight);
}

.prose h3 {
    font-size: var(--text-heading);
    margin-top: var(--space-10);
}

.prose ul,
.prose ol {
    padding-left: var(--space-6);
    display: grid;
    gap: var(--space-3);
}

.prose li {
    color: var(--color-text-secondary);
}

.prose blockquote {
    border-left: var(--border-heavy) solid var(--color-line-strong);
    padding-left: var(--space-6);
    font-family: var(--font-display);
    font-size: var(--text-lede);
    line-height: var(--leading-loose);
    color: var(--color-text);
}

.prose a {
    color: var(--color-accent);
}

.callout {
    border: var(--border-hairline) solid var(--color-line);
    border-left: var(--border-heavy) solid var(--color-accent);
    background-color: var(--color-surface);
    padding: var(--space-5) var(--space-6);
}

.callout__title {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.key-points {
    border-top: var(--border-heavy) solid var(--color-ink-900);
    border-bottom: var(--border-hairline) solid var(--color-line);
    padding-block: var(--space-5);
}

.key-points__title {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

/* --- Article header / byline ---------------------------------------------- */
.byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

.byline a {
    color: var(--color-text-secondary);
}

.byline__separator {
    color: var(--color-line-strong);
}

.sources {
    border-top: var(--border-hairline) solid var(--color-line);
    padding-top: var(--space-6);
}

.sources ol {
    padding-left: var(--space-6);
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-small);
}

/* --- FAQ (native disclosure, no JavaScript) -------------------------------- */
.faq {
    border-top: var(--border-hairline) solid var(--color-line);
}

.faq__item {
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.faq__question {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    flex: none;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: var(--weight-regular);
    color: var(--color-accent);
}

.faq__item[open] .faq__question::after {
    content: "−";
}

.faq__answer {
    padding-bottom: var(--space-6);
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.faq__answer > * + * {
    margin-top: var(--space-4);
}

/* --- Comparison table ------------------------------------------------------ */
.comparison {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-small);
    text-align: left;
}

.comparison caption {
    text-align: left;
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    padding-bottom: var(--space-4);
}

.comparison th,
.comparison td {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: var(--border-hairline) solid var(--color-line);
    vertical-align: top;
}

.comparison thead th {
    border-bottom: var(--border-heavy) solid var(--color-ink-900);
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.comparison tbody th {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    width: 26%;
}

.comparison td {
    color: var(--color-text-secondary);
}

.table-scroll {
    overflow-x: auto;
}

/* --- vCISO / Services brand heroes ---------------------------------------
   A balanced two-column composition on a brand field. Sized so the message,
   both calls to action and the full diagram fit above the fold, with the next
   section's seam visible beneath. */
.vciso-hero,
.services-hero {
    padding-block: clamp(1.5rem, 0.8rem + 2.4vw, 3rem) clamp(2rem, 1rem + 3vw, 3.75rem);
}

.vciso-hero__inner,
.services-hero__inner {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    align-items: center;
}

.services-hero__inner {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
}

.vciso-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 46rem;
}

.vciso-hero__title,
.services-hero__title {
    font-size: clamp(1.875rem, 1.2rem + 2.3vw, 2.875rem);
    font-weight: var(--weight-bold);
    line-height: 1.06;
    letter-spacing: var(--tracking-display);
    max-width: 16ch;
    color: #fff;
}

.vciso-hero__summary,
.services-hero__summary {
    margin-top: var(--space-5);
    font-size: var(--text-lede);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.84);
    max-width: 48ch;
}

.vciso-hero__actions,
.services-hero__actions {
    margin-top: var(--space-7, 1.75rem);
    flex-wrap: nowrap;
}

/* --- Page mastheads -------------------------------------------------------
   The opening block on service and industry pages. A hairline closes it off so
   the first content section reads as a new movement rather than a continuation. */
.service-masthead,
.industry-masthead {
    border-bottom: var(--border-hairline) solid var(--color-line);
    padding-bottom: var(--section-space-tight);
}

/* --- vCISO opening -------------------------------------------------------- */
.vciso-open__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
}

/* --- Obligation map (industry pages) --------------------------------------
   Same construction as the hero operating model: HTML labels, one stretched
   SVG connector layer, vertical fallback when it stacks. Driven by the
   industry's own framework list, so it genuinely differs per page. */
.ob-map {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) clamp(1.75rem, 5vw, 4rem) minmax(0, 1fr);
    align-items: center;
}

.ob-map__label {
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.section--ink .ob-map__label {
    color: var(--color-text-on-dark-muted);
}

.ob-map__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.ob-map__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    padding: 0.45rem 0.7rem;
    border: var(--border-hairline) solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.section--ink .ob-map__item {
    border-color: var(--color-line-on-dark);
    background: rgba(255, 255, 255, 0.03);
}

.ob-map__name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-small);
}

.ob-map__kind {
    font-size: var(--text-micro);
    color: var(--color-text-muted);
}

.section--ink .ob-map__kind {
    color: var(--color-text-on-dark-muted);
}

.ob-map__wires {
    width: 100%;
    height: 78%;
    display: block;
    overflow: visible;
}

.ob-map__wire {
    fill: none;
    stroke: var(--color-line-strong);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.section--ink .ob-map__wire {
    stroke: var(--color-line-on-dark-strong);
}

.ob-map__pulse {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 12 150;
    stroke-dashoffset: 162;
    animation: op-flow 5s linear infinite;
}

.section--ink .ob-map__pulse {
    stroke: var(--color-accent-on-dark);
}

.ob-map__target {
    padding: var(--space-5);
    border: var(--border-hairline) solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-accent-wash);
}

.section--ink .ob-map__target {
    border-color: var(--color-accent-on-dark);
    background: rgba(143, 189, 232, 0.1);
}

.ob-map__target-title {
    font-family: var(--font-display);
    font-size: var(--text-subheading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.ob-map__target-body {
    margin-top: var(--space-2);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.section--ink .ob-map__target-body {
    color: var(--color-text-on-dark-secondary);
}

/* ==========================================================================
   PHASE 2.2, SURFACES, FIELDS AND STRATEGIC DIAGRAMS
   --------------------------------------------------------------------------
   The previous system had two surfaces (paper, ink) and used the brand blue
   only for hairlines and small labels. That is what made every page read as a
   document. This layer adds real colour fields, a mid-tone, full-bleed visual
   moments, controlled overlap, and the large diagrams that carry meaning.
   ========================================================================== */

/* --- Surfaces --------------------------------------------------------------
   Four section surfaces instead of two, so a page can change density and
   temperature as you scroll rather than alternating light/dark. */

.surface--brand-soft {
    background: linear-gradient(180deg, var(--color-brand-50), #ffffff);
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.surface--brand {
    background:
        radial-gradient(120% 90% at 12% 0%, var(--color-brand-600) 0%, transparent 58%),
        linear-gradient(168deg, var(--color-brand-700) 0%, var(--color-brand-800) 62%, var(--color-brand-900) 100%);
    color: #fff;
    position: relative;
    isolation: isolate;
}


/* --------------------------------------------------------------------------
   Dark surfaces re-map the text and line tokens rather than overriding one
   selector at a time. Any component built from --color-text,
   --color-text-secondary, --color-text-muted or --color-line inverts
   automatically, so a light-surface component dropped onto a dark field can
   never render dark-on-dark. This replaces a growing list of per-component
   overrides that only covered the components anybody had noticed.
   -------------------------------------------------------------------------- */
.section--ink,
.surface--brand,
.hero,
.page-hero,
.conversion,
.portfolio__group--featured {
    --color-text: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.82);
    --color-text-muted: rgba(255, 255, 255, 0.66);
    --color-line: var(--color-line-on-dark);
    --color-line-strong: var(--color-line-on-dark-strong);
    --color-accent: var(--color-brand-300);
    --color-surface-sunken: rgba(255, 255, 255, 0.06);
}

.surface--brand h1,
.surface--brand h2,
.surface--brand h3,
.surface--brand h4 { color: #fff; }

.surface--brand p,
.surface--brand dd,
.surface--brand li { color: rgba(255, 255, 255, 0.82); }

.surface--brand .eyebrow { color: var(--color-brand-300); }

.surface--brand a:not(.btn) { color: #fff; text-decoration-color: var(--color-brand-300); }

.surface--brand .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--color-brand-800);
}

.surface--brand .btn--primary:hover {
    background: var(--color-brand-100);
    border-color: var(--color-brand-100);
    color: var(--color-brand-900);
}

.surface--brand .btn--secondary {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.surface--brand .btn--secondary:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.surface--sand {
    background-color: var(--color-sand);
}

/* --- Full-bleed visual moment --------------------------------------------- */
.bleed {
    width: 100%;
}

/* Pull a block up so it straddles the boundary between two surfaces. */
.overlap-up {
    margin-top: calc(var(--section-space) * -1);
    position: relative;
    z-index: 3;
}

/* ==========================================================================
   SERVICE ARCHITECTURE, the /services/ hero visual
   ========================================================================== */

.arch {
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.arch__lead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: clamp(0.9rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.6rem);
    border-radius: var(--radius-md);
    background: linear-gradient(165deg, var(--color-brand-600), var(--color-brand-800));
    box-shadow:
        0 0 0 1px rgba(143, 189, 232, 0.55),
        0 20px 40px -22px rgba(6, 25, 44, 0.95);
    color: #fff;
    text-decoration: none;
}

.arch__lead:hover {
    color: #fff;
    box-shadow:
        0 0 0 1px var(--color-brand-300),
        0 24px 48px -20px rgba(6, 25, 44, 0.95);
}

.arch__badge {
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-brand-900);
    background: var(--color-brand-300);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.arch__lead-title {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
}

.arch__lead-body {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.82);
}

/* The bracket that shows the supporting tiers hanging off leadership. */
.arch__bracket {
    height: var(--space-4);
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-inline: 12%;
    position: relative;
}

.arch__bracket::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 1px;
    height: var(--space-5);
    background: rgba(255, 255, 255, 0.22);
    transform: translate(-50%, -100%);
}

.arch__tiers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.arch__tier {
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-top: 3px solid var(--color-brand-400);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    gap: var(--space-2);
    align-content: start;
}

.arch__tier-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: var(--weight-bold);
    color: #fff;
    letter-spacing: var(--tracking-tight);
}

.arch__tier-role {
    font-size: 0.75rem;
    color: var(--color-brand-100);
    line-height: 1.35;
}

.arch__tier-list {
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
}

.arch__tier-list a {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 0.15rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.arch__tier-list a:hover {
    color: #fff;
    border-bottom-color: var(--color-brand-300);
}

.arch__note {
    font-size: var(--text-micro);
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* ==========================================================================
   HOMEPAGE SECTIONS
   --------------------------------------------------------------------------
   Each section below is used on the homepage only. They exist as separate
   components rather than as variants of one grid because the brief for this
   page is explicit: no two consecutive sections may share a layout, and the
   page may not read as a card grid repeated eleven times.

   The rhythm, top to bottom:
       navy -> light blue -> paper -> brand blue -> sand ->
       paper -> ink -> light neutral -> paper -> sand -> navy
   ========================================================================== */

/* --- 2. Executive question band -------------------------------------------
   One connected full-width composition: three columns divided by rules, not
   three floating cards. Each question is a link into the vCISO page. */
.qband {
    background: linear-gradient(180deg, var(--color-brand-50) 0%, #ffffff 100%);
    border-bottom: var(--border-hairline) solid var(--color-brand-100);
    padding-block: clamp(2.75rem, 1.75rem + 3vw, 4.5rem);
}

.qband__head {
    padding-bottom: var(--space-8);
}

.qband__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-display-2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    max-width: 22ch;
}

.qband__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--border-heavy) solid var(--color-brand-700);
}

.qband__item + .qband__item {
    border-left: var(--border-hairline) solid var(--color-brand-100);
}

.qband__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    height: 100%;
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--duration) var(--ease);
}

.qband__item + .qband__item .qband__link {
    padding-left: var(--space-6);
}

.qband__link:hover {
    background-color: rgba(15, 76, 129, 0.06);
    color: inherit;
}

.qband__num {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-brand-400);
    font-variant-numeric: tabular-nums;
}

.qband__body {
    display: block;
    min-width: 0;
}

.qband__q {
    display: block;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.qband__link:hover .qband__q {
    color: var(--color-brand-700);
}

.qband__a {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.qband__cue {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-700);
    border-bottom: var(--border-hairline) solid var(--color-brand-300);
    padding-bottom: 2px;
}

/* --- 3. The leadership gap ------------------------------------------------
   Editorial split: one statement held on the left against a two-column list of
   short, recognizable problems on the right. Not seven cards. */
.leadgap {
    background-color: var(--color-paper);
}

.leadgap__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
    align-items: start;
}

.leadgap__aside {
    position: sticky;
    top: calc(var(--chrome-top) + var(--sticky-gap));
}

.leadgap__statement {
    margin-top: var(--space-6);
    font-size: var(--text-lede);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 42ch;
}

.leadgap__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: var(--border-hairline) solid var(--color-line);
}

.leadgap__item {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.leadgap__item:nth-child(odd) {
    border-right: var(--border-hairline) solid var(--color-line);
}

/* The last item sits alone on its row and reads as the summary of the set, so
   it takes the full width and a brand-tinted ground. */
.leadgap__item:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    padding-right: 0;
    background-color: var(--color-brand-50);
    padding-left: var(--space-6);
}

.leadgap__term {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand-800);
}

.leadgap__text {
    margin: var(--space-2) 0 0;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* --- 4. What vCISO leadership changes -------------------------------------
   The brand-blue field. Four large outcome statements carried by type size,
   not by boxes or connectors. */
.outcome-field__head {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-6) var(--grid-gap);
    align-items: end;
    padding-bottom: var(--space-10);
    border-bottom: var(--border-hairline) solid rgba(255, 255, 255, 0.22);
}

.outcome-field__lede {
    margin: 0;
    font-size: var(--text-lede);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    max-width: 44ch;
}

.outcome-field__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.outcome-field__item {
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.75rem, 1rem + 2vw, 2.75rem) 0;
    border-bottom: var(--border-hairline) solid rgba(255, 255, 255, 0.18);
}

.outcome-field__item:nth-child(odd) {
    border-right: var(--border-hairline) solid rgba(255, 255, 255, 0.18);
}

.outcome-field__item:nth-child(even) {
    padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
    padding-right: 0;
}

.outcome-field__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-brand-100);
    font-variant-numeric: tabular-nums;
}

.outcome-field__term {
    margin: var(--space-3) 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: var(--tracking-display);
    color: #fff;
}

.outcome-field__text {
    margin: var(--space-4) 0 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 46ch;
}

.outcome-field__more {
    margin-top: var(--space-10);
}

/* --- 5. The flagship engagement -------------------------------------------
   The dominant composition on the page: a warm sand field, an oversized
   headline on the left, and the responsibilities as a bordered panel that
   sits half over the field edge. */
.flagband {
    background-color: var(--color-sand);
    position: relative;
}

.flagband__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
    align-items: start;
}

.flagband__eyebrow {
    margin: 0 0 var(--space-4);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.flagband__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
    font-weight: var(--weight-bold);
    line-height: 1.06;
    letter-spacing: var(--tracking-display);
    max-width: 17ch;
}

.flagband__lede {
    margin-top: var(--space-6);
    font-size: var(--text-lede);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 52ch;
}

.flagband__actions {
    margin-top: var(--space-8);
}

.flagband__detail {
    background-color: var(--color-surface);
    border: var(--border-hairline) solid var(--color-line);
    border-top: var(--border-heavy) solid var(--color-brand-700);
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}

.flagband__subhead {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-subheading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.flagband__list {
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.flagband__list li {
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline) solid var(--color-line);
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.flagband__list li:last-child {
    border-bottom: 0;
}

.flagband__note {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-5);
    border-top: var(--border-hairline) solid var(--color-line);
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* --- 6. Supporting portfolio ----------------------------------------------
   A structured editorial grid with one featured group at double width, so the
   section is not four identical tiles. */
.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--border-hairline);
    background-color: var(--color-line);
    border: var(--border-hairline) solid var(--color-line);
}

.portfolio__group {
    background-color: var(--color-surface);
    padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}

.portfolio__group--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-6) clamp(2rem, 1rem + 3vw, 4rem);
    align-items: start;
    background-color: var(--color-brand-900);
    color: var(--color-text-on-dark);
    padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.portfolio__group--featured .portfolio__name {
    font-size: var(--text-display-2);
}

.portfolio__group--featured .portfolio__services {
    margin-top: 0;
    grid-row: span 2;
    grid-column: 2;
}

.portfolio__group--featured .portfolio__summary {
    grid-column: 1;
}

.portfolio__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-display-3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
}

.portfolio__summary {
    margin: var(--space-3) 0 0;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 52ch;
}

.portfolio__group--featured .portfolio__summary {
    color: rgba(255, 255, 255, 0.78);
}

.portfolio__services {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

.portfolio__group--featured .portfolio__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
}

.portfolio__services li {
    border-top: var(--border-hairline) solid var(--color-line);
}

.portfolio__group--featured .portfolio__services li {
    border-top-color: rgba(255, 255, 255, 0.18);
}

.portfolio__services a {
    display: block;
    padding: var(--space-3) 0;
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 0;
}

.portfolio__services a:hover {
    color: var(--color-brand-700);
}

.portfolio__group--featured .portfolio__services a {
    color: #fff;
}

.portfolio__group--featured .portfolio__services a:hover {
    color: var(--color-brand-300);
}

/* --- 7. Engagement stages -------------------------------------------------
   Four stages across on desktop, a vertical sequence on mobile. The sequence
   is expressed by numbering and by a single top rule, not by arrows. */
.stageline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.stageline__step {
    padding: var(--space-8) var(--space-6) 0 0;
    border-top: var(--border-heavy) solid var(--color-brand-500);
}

.stageline__step + .stageline__step {
    padding-left: var(--space-6);
    border-left: var(--border-hairline) solid var(--color-line-on-dark);
}

/* The same sequence on a light surface. */
.stageline--light .stageline__step {
    border-top-color: var(--color-brand-700);
}

.stageline--light .stageline__step + .stageline__step {
    border-left-color: var(--color-line);
}

.stageline--light .stageline__num {
    color: var(--color-brand-600);
}

.stageline--light .stageline__title {
    color: var(--color-text);
}

.stageline--light .stageline__text {
    color: var(--color-text-secondary);
}

.stageline__num {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-brand-300);
    font-variant-numeric: tabular-nums;
}

.stageline__title {
    margin: var(--space-4) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: #fff;
}

.stageline__text {
    margin: var(--space-3) 0 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-on-dark-secondary);
}

/* --- 8. Industries and regulatory environments ----------------------------
   A light neutral field. The industries are wide rows rather than tiles, and
   the frameworks sit under them as a tag set, so the two kinds of information
   do not compete. */
.sectorfield {
    background-color: var(--color-surface-sunken);
}

.sectorfield__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6) var(--grid-gap);
}

.sectorfield__lede {
    margin-top: var(--space-4);
    font-size: var(--text-lede);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 46ch;
}

.sectorfield__list {
    margin: var(--space-10) 0 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline) solid var(--color-line-strong);
}

.sectorfield__item {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-4) var(--grid-gap);
    align-items: baseline;
    padding: var(--space-6) 0;
    border-bottom: var(--border-hairline) solid var(--color-line);
    color: inherit;
    text-decoration: none;
    transition: padding-left var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.sectorfield__item:hover {
    background-color: rgba(15, 76, 129, 0.05);
    padding-left: var(--space-4);
    color: inherit;
}

.sectorfield__name {
    font-family: var(--font-display);
    font-size: var(--text-display-3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
}

.sectorfield__item:hover .sectorfield__name {
    color: var(--color-brand-700);
}

.sectorfield__summary {
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.sectorfield__frameworks {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-6) var(--grid-gap);
    margin-top: var(--space-12);
    padding-top: var(--space-10);
    border-top: var(--border-hairline) solid var(--color-line-strong);
}

.sectorfield__frameworks .tag-list {
    align-content: start;
    gap: var(--space-3);
}

.sectorfield__frameworks .tag-list li {
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-surface);
    border: var(--border-hairline) solid var(--color-line);
    border-left: 3px solid var(--color-brand-600);
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.sectorfield__subhead {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.sectorfield__note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 34ch;
}

/* --- 9. Leadership credibility --------------------------------------------
   No approved photograph of the founder exists, so the identity block is
   typographic: a brand-ruled panel rather than a stock portrait. */
.principal__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
    align-items: start;
}

.principal__statement {
    margin-top: var(--space-6);
    font-size: var(--text-lede);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 42ch;
}

.principal__figure {
    border-left: 3px solid var(--color-brand-700);
    padding-left: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.principal__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-display-3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.principal__role {
    margin: var(--space-1) 0 0;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.principal__bio {
    margin: var(--space-5) 0 0;
    line-height: var(--leading-body);
    color: var(--color-text-secondary);
    max-width: 62ch;
}

.principal__expertise {
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: var(--border-hairline) solid var(--color-line);
}

.principal__expertise li {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: var(--border-hairline) solid var(--color-line);
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

/* --- 11. Final conversion -------------------------------------------------
   One call to action on navy. The telephone and email are contact routes in
   running text, deliberately not a second button competing with the CTA. */
.conversion {
    background-color: var(--color-ink-900);
    color: var(--color-text-on-dark);
    padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem);
}

.conversion__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.conversion__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: var(--tracking-display);
    max-width: 20ch;
}

.conversion__lede {
    margin: var(--space-5) 0 0;
    font-size: var(--text-lede);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    max-width: 52ch;
}

.conversion__action .btn {
    width: 100%;
}

.conversion__direct {
    margin: var(--space-5) 0 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--color-text-on-dark-secondary);
}

.conversion__direct a {
    color: var(--color-brand-300);
}

/* ==========================================================================
   RESPONSIBILITY MODEL, annotated, for "what the vCISO owns"
   ========================================================================== */

.respmodel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1px;
    background: var(--color-line);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.surface--brand .respmodel,
.section--ink .respmodel {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.16);
}

.respmodel__cell {
    background: var(--color-surface);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-2);
    align-content: start;
    position: relative;
}

.section--ink .respmodel__cell {
    background: var(--color-ink-800);
}

.respmodel__cell--anchor {
    background: linear-gradient(165deg, var(--color-brand-600), var(--color-brand-800));
    color: #fff;
}

.respmodel__cell--anchor .respmodel__title,
.respmodel__cell--anchor .respmodel__body {
    color: #fff;
}

.respmodel__index {
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-brand-600);
    font-variant-numeric: tabular-nums;
}

.section--ink .respmodel__index { color: var(--color-brand-300); }
.respmodel__cell--anchor .respmodel__index { color: var(--color-brand-300); }

.respmodel__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.section--ink .respmodel__title { color: var(--color-text-on-dark); }

.respmodel__body {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.section--ink .respmodel__body { color: var(--color-text-on-dark-secondary); }

/* ==========================================================================
   TRIGGER MATRIX, high contrast, dense, scannable
   ========================================================================== */

.matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.matrix__cell {
    background: var(--color-brand-900);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-2);
    align-content: start;
    transition: background-color var(--duration) var(--ease);
}

.matrix__cell:nth-child(3n+2) { background: #071f37; }
.matrix__cell:nth-child(4n+3) { background: #08243f; }

.matrix__cell:hover {
    background: var(--color-brand-700);
}

.matrix__num {
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    color: var(--color-brand-400);
    font-variant-numeric: tabular-nums;
}

.matrix__title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: #fff;
}

.matrix__body {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.68);
}

/* ==========================================================================
   ECOSYSTEM, leadership, IT, providers, board
   ========================================================================== */

.ecosystem {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: center;
}

.ecosystem__hub {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-md);
    background: linear-gradient(165deg, var(--color-brand-600), var(--color-brand-800));
    box-shadow: 0 0 0 1px rgba(143, 189, 232, 0.5), 0 20px 44px -22px rgba(6, 25, 44, 0.9);
    text-align: center;
    color: #fff;
}

.ecosystem__hub-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.ecosystem__hub-body {
    margin-top: var(--space-2);
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.85);
}

.ecosystem__node {
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    position: relative;
}

.section--ink .ecosystem__node,
.surface--brand .ecosystem__node {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}

.ecosystem__node-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-1);
}

.ecosystem__node-body {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.section--ink .ecosystem__node-body,
.surface--brand .ecosystem__node-body {
    color: rgba(255, 255, 255, 0.72);
}

.ecosystem__link {
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand-600);
    margin-top: var(--space-2);
    display: block;
}

.surface--brand .ecosystem__link,
.section--ink .ecosystem__link { color: var(--color-brand-300); }

/* ==========================================================================
   STAGE TIMELINE, large numbered stages
   ========================================================================== */

.stages {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

.stage {
    display: grid;
    grid-template-columns: clamp(4rem, 9vw, 7.5rem) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.25rem, 2.5vw, 2rem);
    border-top: 1px solid var(--color-line);
    align-items: start;
}

.section--ink .stage,
.surface--brand .stage { border-top-color: rgba(255, 255, 255, 0.18); }

.stage:last-child { border-bottom: 1px solid var(--color-line); }
.section--ink .stage:last-child,
.surface--brand .stage:last-child { border-bottom-color: rgba(255, 255, 255, 0.18); }

.stage__num {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.4rem + 3vw, 4.5rem);
    font-weight: var(--weight-bold);
    line-height: 0.8;
    letter-spacing: var(--tracking-display);
    color: var(--color-brand-600);
    font-variant-numeric: tabular-nums;
}

.section--ink .stage__num,
.surface--brand .stage__num {
    color: var(--color-brand-300);
}

.stage__timing {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.section--ink .stage__timing,
.surface--brand .stage__timing { color: var(--color-brand-300); }

.stage__title {
    font-family: var(--font-display);
    font-size: var(--text-display-3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
}

.stage__body {
    color: var(--color-text-secondary);
    padding-top: 0.3rem;
}

.section--ink .stage__body,
.surface--brand .stage__body { color: rgba(255, 255, 255, 0.78); }

/* ==========================================================================
   FEATURE BAND, a service given a full-width moment
   ========================================================================== */

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.feature--reverse .feature__visual { order: -1; }

.feature__body {
    padding: clamp(1.5rem, 3vw, 2.75rem);
    display: grid;
    gap: var(--space-4);
    align-content: center;
}

.feature__visual {
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background: linear-gradient(165deg, var(--color-brand-700), var(--color-brand-900));
    display: grid;
    align-content: center;
    gap: var(--space-3);
}

.feature__kicker {
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-brand-300);
}

.feature__stat-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.feature__stat-list li {
    padding: 0.55rem 0.75rem;
    border-left: 3px solid var(--color-brand-400);
    background: rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    color: #fff;
}

.feature__title {
    font-size: var(--text-display-2);
    letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   SERVICE BANDS, horizontal, staggered
   ========================================================================== */

.band {
    display: grid;
    grid-template-columns: clamp(3rem, 6vw, 5rem) minmax(0, 4fr) minmax(0, 6fr) auto;
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
    padding-block: clamp(1rem, 2vw, 1.5rem);
    border-top: 1px solid var(--color-line);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--duration) var(--ease), padding-left var(--duration) var(--ease);
}

.band:last-of-type { border-bottom: 1px solid var(--color-line); }

.band:hover {
    background: var(--color-brand-50);
    color: inherit;
    padding-left: var(--space-3);
}

.band__num {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    color: var(--color-brand-400);
    font-variant-numeric: tabular-nums;
}

.band__name {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
}

.band__summary {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.band__cue {
    color: var(--color-brand-600);
    font-size: var(--text-small);
}

/* Group heading strip above a set of bands. */
.band-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
}

.band-group__name {
    font-family: var(--font-display);
    font-size: var(--text-display-3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.band-group__role {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    max-width: 46ch;
}

/* --- Sticky split ---------------------------------------------------------
   An explanatory column that stays put while its details scroll past. Used for
   "what the vCISO owns" and the industry risk model. */
.sticky-split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--grid-gap);
    align-items: start;
}

.sticky-split__aside {
    position: sticky;
    top: 6.5rem;
}

/* --- Pillars --------------------------------------------------------------
   Deliberately NOT a grid of identical cards. A lead pillar is set larger and
   accented; the rest are compact rows beneath it, so the group reads as one
   idea with facets rather than seven equal boxes. */
.pillars {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
    border-top: var(--border-hairline) solid var(--color-line);
}

.section--ink .pillars {
    border-color: var(--color-line-on-dark);
}

.pillar {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.section--ink .pillar {
    border-bottom-color: var(--color-line-on-dark);
}

.pillar--lead {
    padding-block: var(--space-6);
    background: linear-gradient(90deg, var(--color-accent-wash), transparent 62%);
}

.section--ink .pillar--lead {
    background: linear-gradient(90deg, rgba(143, 189, 232, 0.1), transparent 62%);
}

.pillar__mark {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-accent);
    flex: none;
}

.section--ink .pillar__mark {
    color: var(--color-accent-on-dark);
}

.pillar__title {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-1);
}

.pillar--lead .pillar__title {
    font-size: var(--text-display-3);
}

.pillar__body {
    color: var(--color-text-secondary);
    max-width: 62ch;
}

.section--ink .pillar__body {
    color: var(--color-text-on-dark-secondary);
}

/* --- Process rail ---------------------------------------------------------
   A horizontal sequence with large stage numerals, connected by one continuous
   rule. Becomes a vertical rail below 62rem. */
.process {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--process-columns, 4), minmax(0, 1fr));
    gap: var(--grid-gap);
    counter-reset: process;
}

.process--4 { --process-columns: 4; }
.process--3 { --process-columns: 3; }

.process__step {
    position: relative;
    padding-top: var(--space-8);
    counter-increment: process;
}

.process__step::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 0;
    right: calc(var(--grid-gap) * -1);
    border-top: var(--border-hairline) solid var(--color-line);
}

.section--ink .process__step::before {
    border-top-color: var(--color-line-on-dark);
}

.process__step:last-child::before {
    right: 0;
}

.process__step::after {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
}

.section--ink .process__step::after {
    background: var(--color-accent-on-dark);
}

.process__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    color: var(--color-brand-600);
    margin-bottom: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.section--ink .process__number {
    color: var(--color-brand-300);
}

.process__title {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-2);
}

.process__body {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.section--ink .process__body {
    color: var(--color-text-on-dark-secondary);
}

/* --- Transformation ledger ------------------------------------------------
   "From current state to a managed program": two columns facing each other
   across a centre rule, so the before/after reads at a glance. */
.ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.ledger__side {
    padding: var(--space-6) 0;
}

.ledger__side--after {
    padding-left: var(--grid-gap);
}

.ledger__side--before {
    padding-right: var(--grid-gap);
}

.ledger__rule {
    width: 1px;
    background: var(--color-line);
    position: relative;
}

.section--ink .ledger__rule {
    background: var(--color-line-on-dark);
}

.ledger__rule::after {
    content: "→";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: var(--border-hairline) solid var(--color-line-strong);
    border-radius: 50%;
    background: var(--color-paper);
    color: var(--color-accent);
    font-size: var(--text-small);
}

.section--sunken .ledger__rule::after {
    background: var(--color-surface-sunken);
}

.section--ink .ledger__rule::after {
    background: var(--color-ink-900);
    border-color: var(--color-line-on-dark-strong);
    color: var(--color-accent-on-dark);
}

.ledger__label {
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.section--ink .ledger__label {
    color: var(--color-text-on-dark-muted);
}

.ledger__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.ledger__list li {
    padding-left: var(--space-5);
    position: relative;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.section--ink .ledger__list li {
    color: var(--color-text-on-dark-secondary);
}

.ledger__list--before li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.6rem;
    border-top: 1px dashed var(--color-line-strong);
}

.ledger__list--after li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.6rem;
    border-top: var(--border-heavy) solid var(--color-accent);
}

.section--ink .ledger__list--after li::before {
    border-top-color: var(--color-accent-on-dark);
}

/* --- Full-width statement -------------------------------------------------
   A single sentence given a whole band. Used once per page at most. */
.statement {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2rem);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    letter-spacing: var(--tracking-tight);
    max-width: 34ch;
}

.statement strong {
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.section--ink .statement strong {
    color: var(--color-text-on-dark);
}

/* --- Section index (in-page navigation) -----------------------------------
   Sticky on long pages. Real anchors to real ids; nothing depends on script. */
.section-index + .section {
    padding-top: var(--section-space-tight);
}

.section-index {
    position: sticky;
    top: var(--chrome-header);
    z-index: 20;
    background: rgba(251, 250, 247, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: var(--border-hairline) solid var(--color-line);
}

.section-index__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: thin;
    /* Phase 2.2: halved. The strip was consuming a band of the first viewport
       before any content appeared. */
    padding-block: var(--space-2);
}

.section-index__label {
    flex: none;
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.section-index__link {
    flex: none;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding-block: var(--space-1);
    border-bottom: var(--border-heavy) solid transparent;
    white-space: nowrap;
}

.section-index__link:hover,
.section-index__link[aria-current="true"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* --- Comparison, restyled as facing columns on small screens -------------- */
.compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    border-top: var(--border-heavy) solid var(--color-ink-900);
}

.section--ink .compare {
    border-top-color: var(--color-accent-on-dark);
}

.compare__head {
    padding: var(--space-4) var(--space-5) var(--space-4) 0;
    font-family: var(--font-display);
    font-size: var(--text-subheading);
    font-weight: var(--weight-semibold);
}

.compare__head--b {
    padding-left: var(--space-5);
    border-left: var(--border-hairline) solid var(--color-line);
}

.section--ink .compare__head--b {
    border-left-color: var(--color-line-on-dark);
}

.compare__dimension {
    grid-column: 1 / -1;
    padding-top: var(--space-5);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-top: var(--border-hairline) solid var(--color-line);
}

.section--ink .compare__dimension {
    color: var(--color-text-on-dark-muted);
    border-top-color: var(--color-line-on-dark);
}

.compare__cell {
    padding: var(--space-3) var(--space-5) var(--space-5) 0;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.section--ink .compare__cell {
    color: var(--color-text-on-dark-secondary);
}

.compare__cell--b {
    padding-left: var(--space-5);
    border-left: var(--border-hairline) solid var(--color-line);
}

.section--ink .compare__cell--b {
    border-left-color: var(--color-line-on-dark);
}

/* --- Editorial article graphic -------------------------------------------
   Code-generated, deterministic per article, so the Insights grid never has a
   missing or repeated stock image, and an automated publishing job never
   needs to source one. Decorative only; the title and summary carry meaning. */
.article-graphic {
    position: relative;
    aspect-ratio: 16 / 9;
    border: var(--border-hairline) solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-ink-900);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.article-graphic svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Insight cards -------------------------------------------------------- */
.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.insight-card {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.insight-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-micro);
    color: var(--color-text-muted);
}

.insight-card__title {
    font-size: var(--text-display-3);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
}

.insight-card__title a {
    color: inherit;
    text-decoration: none;
}

.insight-card__title a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.insight-card__summary {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

/* --- Conversion panel ------------------------------------------------------ */
.cta-panel {
    background-color: var(--color-ink-900);
    color: var(--color-text-on-dark);
    padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    border-radius: var(--radius-md);
}

.cta-panel__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--grid-gap);
    align-items: center;
}

.cta-panel h2 {
    font-size: var(--text-display-2);
    color: var(--color-text-on-dark);
    max-width: 20ch;
}

.cta-panel p {
    margin-top: var(--space-4);
    color: var(--color-text-on-dark-secondary);
    max-width: 52ch;
}

.cta-inline {
    border-top: var(--border-heavy) solid var(--color-ink-900);
    padding-top: var(--space-6);
    display: grid;
    gap: var(--space-4);
}

.cta-inline__title {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: var(--weight-semibold);
}

.cta-inline p {
    color: var(--color-text-secondary);
    max-width: 60ch;
}

/* --- Contact details ------------------------------------------------------- */
.contact-details {
    display: grid;
    gap: var(--space-6);
    border-top: var(--border-hairline) solid var(--color-line);
    padding-top: var(--space-6);
}

.contact-details__label {
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.contact-details address {
    font-style: normal;
    color: var(--color-text-secondary);
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-ink-900);
    color: var(--color-text-on-dark-secondary);
    padding-block: var(--section-space-tight) var(--space-8);
    font-size: var(--text-small);
}

.site-footer a {
    color: var(--color-text-on-dark-secondary);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-text-on-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--grid-gap);
    padding-bottom: var(--space-10);
    border-bottom: var(--border-hairline) solid var(--color-line-on-dark);
}

.site-footer__brand img {
    width: 200px;
    height: auto;
}

.site-footer__description {
    margin-top: var(--space-5);
    max-width: 40ch;
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-small);
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.site-footer__secondary .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer__heading {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-4);
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.site-footer__secondary {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--grid-gap);
    padding-block: var(--space-8) 0;
}

.site-footer__address {
    font-style: normal;
    color: var(--color-text-on-dark-secondary);
    line-height: var(--leading-loose);
}

.site-footer__description--flush {
    margin-top: 0;
}

.site-footer__action {
    margin-top: var(--space-5);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-6);
    font-size: var(--text-micro);
    color: var(--color-text-on-dark-muted);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 8. Forms ================================================================= */

.form {
    display: grid;
    gap: var(--space-6);
}

.form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.field {
    display: grid;
    gap: var(--space-2);
    /* Stop controls stretching to match a taller neighbouring field: a hint or
       an error message under one input must not resize the input beside it. */
    align-content: start;
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.field__optional {
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
}

.field__hint {
    font-size: var(--text-micro);
    color: var(--color-text-muted);
}

.field__control {
    width: 100%;
    padding: 0.75rem var(--space-4);
    background-color: var(--color-surface);
    border: var(--border-hairline) solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.5;
    color: var(--color-text);
    transition: border-color var(--duration) var(--ease);
}

.field__control:hover {
    border-color: var(--color-ink-600);
}

.field__control:focus {
    outline: var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--color-accent);
}

textarea.field__control {
    min-height: 9rem;
    resize: vertical;
}

select.field__control {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
                      linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-10);
}

.field--invalid .field__control {
    border-color: var(--color-error);
    background-color: var(--color-error-wash);
}

.field__error {
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    color: var(--color-error);
}

.field--consent {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
}

.field--consent input {
    margin-top: 0.3rem;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-accent);
}

.field--consent .field__error {
    grid-column: 1 / -1;
}

.field--consent .field__label {
    font-weight: var(--weight-regular);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: var(--leading-body);
}

/* Honeypot: off-screen but reachable, never display:none (some bots skip
   hidden fields, and screen readers get an explicit instruction plus
   aria-hidden on the wrapper). */
.field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    border: var(--border-hairline) solid var(--color-line);
    border-left: var(--border-heavy) solid var(--color-error);
    background-color: var(--color-error-wash);
    padding: var(--space-4) var(--space-5);
}

.form-status--notice {
    border-left-color: var(--color-accent);
    background-color: var(--color-accent-wash);
}

.form-status__title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.form-status ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-1);
    font-size: var(--text-small);
}

/* 9. Utilities ============================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Spacing utilities. Deliberately few: layout spacing belongs to components,
   these only cover the gap between a component and the text above it. */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.rule {
    border-top: var(--border-hairline) solid var(--color-line);
}

.section--ink .rule { border-top-color: var(--color-line-on-dark); }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-8);
    font-size: var(--text-small);
}

.pagination__status {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-micro);
    color: var(--color-text-muted);
}

.figure {
    margin: 0;
}

.figure img {
    width: 100%;
    border: var(--border-hairline) solid var(--color-line);
}

.figure figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-micro);
    color: var(--color-text-muted);
}

/* 10. Responsive =========================================================== */

@media (max-width: 75rem) {
    /* Heroes stack below 1200px so the diagrams get the full container width
       and their labels stay on one line. */
    .hero__inner,
    .services-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .vciso-hero__title,
    .services-hero__title {
        max-width: 22ch;
    }

    .hero__title,
    .hero__line--secondary {
        max-width: 24ch;
    }

    .hero__lede {
    max-width: 44ch;
        max-width: 62ch;
    }
}

@media (max-width: 62rem) {
    .grid--split,
    .grid--split-wide,
    .group-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .cta-panel__inner,
    .site-footer__top,
    .site-footer__secondary,
    .article-preview,
    .index-list__link,
    .sticky-split,
    .insight-grid,
    .vciso-open__inner,
    .qband__list,
    .feature,
    .arch__tiers {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature--reverse .feature__visual { order: 0; }

    /* The ecosystem becomes a vertical sequence: hub first, then the parties
       it coordinates, rather than a squeezed three-column diagram. */
    .ecosystem {
        grid-template-columns: minmax(0, 1fr);
    }

    .ecosystem__hub {
        grid-column: 1;
        grid-row: auto;
    }

    /* Questions become a vertical sequence with rules between them. */
    .qband__item + .qband__item {
        border-left: 0;
        border-top: var(--border-hairline) solid var(--color-brand-100);
    }

    .qband__link,
    .qband__item + .qband__item .qband__link {
        padding: var(--space-5) 0;
    }

    /* Stages lose the third column; the body sits under the title. */
    .stage {
        grid-template-columns: clamp(3rem, 12vw, 4.5rem) minmax(0, 1fr);
    }

    .stage__body {
        grid-column: 2;
        padding-top: var(--space-3);
    }

    .band {
        grid-template-columns: clamp(2.5rem, 8vw, 3.5rem) minmax(0, 1fr) auto;
        align-items: start;
    }

    .band__summary {
        grid-column: 2;
        padding-top: var(--space-2);
    }

    .band__cue {
        grid-row: 1;
        grid-column: 3;
    }

    .sticky-split__aside {
        position: static;
    }

    .process {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* Horizontal rail becomes a vertical one rather than shrinking. */
    .process__step {
        padding: 0 0 var(--space-6) var(--space-8);
    }

    .process__step::before {
        top: 0.6rem;
        bottom: 0;
        left: 0.24rem;
        right: auto;
        width: 1px;
        border-top: 0;
        border-left: var(--border-hairline) solid var(--color-line);
    }

    .section--ink .process__step::before {
        border-left-color: var(--color-line-on-dark);
    }

    .process__step:last-child::before {
        bottom: auto;
        height: 0;
    }

    .process__number {
        font-size: 1.75rem;
        margin-bottom: var(--space-2);
    }





    /* Facing columns become stacked before/after blocks with the arrow
       rotated, so the relationship survives the reflow. */
    .ledger {
        grid-template-columns: minmax(0, 1fr);
    }

    .ledger__side--before,
    .ledger__side--after {
        padding-inline: 0;
    }

    .ledger__rule {
        width: 100%;
        height: 1px;
        margin-block: var(--space-4);
    }

    .ledger__rule::after {
        content: "↓";
    }

    .section-index {
        top: 3.75rem;
    }

    .index-list__cue {
        display: none;
    }

    .site-footer__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .definitions > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }
}

/* Navigation collapses at 60rem rather than 48rem: between roughly 768px and
   960px the horizontal nav plus the persistent call to action no longer fit,
   and the button was clipping off the right edge. */
@media (max-width: 60rem) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav-toggle[hidden] {
        display: none;
    }

    .site-header__actions {
        gap: var(--space-3);
    }

    .site-header__actions .btn {
        display: none;
    }

    .site-header {
        padding-bottom: var(--space-2);
    }

    html:not(.js) .site-header {
        position: static;
    }

    .site-header__inner {
        flex-wrap: wrap;
    }

    .nav {
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: var(--border-hairline) solid var(--color-line);
    }

    .nav[data-collapsed="true"] {
        display: none;
    }

    /* With the panel open the header owns the viewport: the body is scroll
       locked by the script, and the panel gets the room it needs. */
    .site-header--menu-open .nav {
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
    }

    .nav__link {
        padding-block: var(--space-4);
        border-bottom: var(--border-hairline) solid var(--color-line);
        font-size: var(--text-body);
    }

    .nav > .nav__link:first-of-type {
        margin-top: var(--space-2);
    }

    /* In the stacked panel the active item is marked on its leading edge; a
       bottom underline would collide with the row separators. Nothing sits
       above a menu item. */
    .nav__link[aria-current="page"]::after {
        left: 0;
        right: auto;
        top: 50%;
        bottom: auto;
        width: 3px;
        height: 1.25rem;
        transform: translate(-0.75rem, -50%);
        border-bottom: 0;
        background: var(--color-brand-700);
    }

    .nav__cta {
        display: block;
        margin-top: var(--space-5);
    }

    .nav__cta .btn {
        width: 100%;
    }

}

@media (max-width: 48rem) {
    /* Navigation collapses into a disclosure panel.
       The links are always in the server-rendered document, nothing is
       injected by JavaScript, so the mobile navigation is fully crawlable.
       Without JavaScript the toggle stays hidden, the list renders expanded in
       normal flow, and the header stops being sticky so a tall menu cannot
       occupy the viewport. */
    .grid--2,
    .form__grid,
    .site-footer__columns,
    .compare {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The comparison stops being two columns and becomes labelled pairs, so
       nothing is squeezed to two words per line. */
    .compare__head {
        padding: var(--space-3) 0 0;
        border-left: 0;
    }

    .compare__head--b {
        padding-left: 0;
    }

    .compare__cell {
        padding: var(--space-2) 0 var(--space-4);
        border-left: 0;
    }

    .compare__cell--b {
        padding-left: 0;
    }

    .compare__cell::before {
        content: attr(data-side);
        display: block;
        font-size: var(--text-micro);
        font-weight: var(--weight-semibold);
        color: var(--color-text-muted);
        margin-bottom: var(--space-1);
    }

    .section--ink .compare__cell::before {
        color: var(--color-text-on-dark-muted);
    }

    .arch__tiers {
        grid-template-columns: minmax(0, 1fr);
    }

    .arch__bracket {
        margin-inline: 35%;
    }


    .matrix,
    .respmodel {
        grid-template-columns: minmax(0, 1fr);
    }







    .ob-map {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .ob-map__wires {
        display: none;
    }


    .pillar {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .statement {
        max-width: none;
    }

    .rows > li {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }


    .brand img {
        width: 168px;
    }

    .site-header__inner {
        position: relative;
        min-height: 3.75rem;
    }

    .comparison tbody th {
        width: auto;
    }
}

/* Mobile landscape and other short viewports: the hero must not push its own
   calls to action off-screen, so its vertical rhythm compresses. */
@media (max-height: 34rem) and (orientation: landscape) {
    .hero {
        padding-block: var(--space-6);
    }

    .hero__lede {
    max-width: 44ch;
        margin-top: var(--space-4);
    }

    .hero__actions {
        margin-top: var(--space-5);
    }


    .site-header {
        position: static;
    }
}

@media (max-width: 34rem) {
    .flow__stages {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .flow__stage {
        padding: var(--space-4);
    }

    /* Side by side inside each stage: the label reads as the heading of a row
       rather than stacking three more lines onto the hero. */
    .flow__stage {
        display: grid;
        grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
        gap: var(--space-4);
        align-items: start;
    }

    .flow__label {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .flow__items {
        gap: var(--space-2);
    }

    /* The chevron turns to point down, and moves to the top edge of the stage
       it precedes rather than to its left edge. */
    .flow__stage + .flow__stage::before {
        top: calc(var(--space-5) / -2);
        left: 50%;
        margin-top: -0.225rem;
        transform: rotate(135deg);
    }
}

@media (max-width: 30rem) {
    .btn {
        width: 100%;
    }

    .btn-row {
        gap: var(--space-3);
    }

    .btn-row .btn {
        white-space: normal;
    }

    /* Phone width is the one case where the two calls to action stack. Held
       side by side they shrink to four wrapped words each, which is worse than
       two full-width targets. */
    .hero__actions,
    .vciso-hero__actions,
    .services-hero__actions {
        flex-wrap: wrap;
    }

    .hero__title {
        max-width: none;
    }

    .hero__line--secondary {
        max-width: none;
    }

    .insight-card__title {
        font-size: var(--text-heading);
    }
}

/* Preference overrides ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ob-map__pulse {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        opacity: 0.55;
    }

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .link-arrow:hover::after {
        transform: none;
    }

    /* The diagram chevrons and the scroll cue are the only motion on the site.
       Both stop entirely; the chevrons hold at a readable opacity so the
       diagram still reads as a flow. */

    .band:hover {
        padding-left: 0;
    }

}

@media (forced-colors: active) {
    .btn {
        border: 1px solid ButtonText;
    }

    .checklist li::before {
        border-top-color: CanvasText;
    }
}

@media print {
    .site-header,
    .site-footer,
    .cta-panel,
    .nav-toggle {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444;
    }
}


/* 11. Homepage responsive ==================================================
   The homepage components adapt in three steps: wide compositions collapse to
   one column, then multi-column lists become single column, then the numbered
   sequences become vertical. Nothing is hidden at any width.
   ========================================================================== */

@media (max-width: 75rem) {
    .hero__message {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .hero__statement,
    .hero__visual {
        grid-column: 1;
    }

    .hero__visual {
        justify-self: start;
        max-width: 44rem;
    }

    .outcome-field__head {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .portfolio__group--featured .portfolio__services {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 62rem) {
    .grid--split > .section-header {
        position: static;
    }

    .leadgap__inner,
    .flagband__inner,
    .principal__inner,
    .conversion__inner,
    .sectorfield__frameworks {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sticky only makes sense beside a long scrolling list. */
    .leadgap__aside {
        position: static;
    }

    .portfolio__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio__group--featured {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
    }

    .portfolio__group--featured .portfolio__services,
    .portfolio__group--featured .portfolio__summary {
        grid-column: 1;
        grid-row: auto;
    }

    .stageline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .conversion__action .btn {
        width: auto;
    }
}

@media (max-width: 48rem) {
    /* One question, one problem, one outcome, one stage at a time. Dividing
       rules move from vertical to horizontal so the sequence still reads. */
    .qband__list,
    .leadgap__list,
    .outcome-field__list,
    .principal__expertise,
    .portfolio__grid,
    .stageline {
        grid-template-columns: minmax(0, 1fr);
    }

    .qband__item + .qband__item {
        border-left: 0;
        border-top: var(--border-hairline) solid var(--color-brand-100);
    }

    .qband__link,
    .qband__item + .qband__item .qband__link {
        padding: var(--space-5) 0;
    }

    .leadgap__item:nth-child(odd) {
        border-right: 0;
    }

    .leadgap__item:last-child {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .outcome-field__item,
    .outcome-field__item:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
    }

    .outcome-field__item:nth-child(odd) {
        border-right: 0;
    }

    .portfolio__group--featured .portfolio__services {
        grid-template-columns: minmax(0, 1fr);
    }

    .stageline__step {
        padding: var(--space-6) 0 var(--space-6);
        border-top-width: var(--border-hairline);
    }

    .stageline__step:first-child {
        border-top-width: var(--border-heavy);
    }

    .stageline__step + .stageline__step {
        padding-left: 0;
        border-left: 0;
    }

    .sectorfield__item {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .principal__figure {
        border-left-width: 2px;
        padding-left: var(--space-5);
    }
}

@media (max-width: 75rem) {
    .page-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }

    .page-hero__title {
        max-width: 24ch;
    }
}

@media (max-width: 30rem) {
    .page-hero__actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 62rem) {
    .lead-article__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 62rem) {
    .article-layout__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The rail becomes an intro block above the body rather than a column. */
    .article-rail {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: var(--space-6);
    }
}