/* ==========================================================================
   components.css — Reusable UI components
   --------------------------------------------------------------------------
   Naming: BEM — .block, .block__element, .block--modifier.
   Components are self-contained and positioned by layout.css primitives.
   All colors come from semantic tokens (tokens.css), so every component
   supports light/dark automatically.

   Contents
     1.  Icons
     2.  Skip link
     3.  Brand lockup
     4.  Site header, navigation, menu + theme toggles
     5.  Buttons
     6.  Eyebrow + section header
     7.  Dark surfaces (shared token scope for hero, banners, CTA, footer)
     8.  Home hero + shield emblem / promo video variant
     9.  Page hero (inner pages)
     10. Cards (generic, service, value, layer)
     11. Lists (check list, chips, jump nav)
     12. Steps + flow
     13. CTA band
     14. Forms
     15. Prose (long-form text)
     16. Site footer
     17. Scroll reveal
   ========================================================================== */

@layer components {
  /* ------------------------------------------------------------------------
     1. Icons — inline SVGs drawn with strokes that inherit currentColor
     ------------------------------------------------------------------------ */
  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Square tinted badge that frames an icon on cards */
  .icon-badge {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-m);
    background-color: var(--color-icon-bg);
    color: var(--color-icon);
  }

  .icon-badge .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* ------------------------------------------------------------------------
     2. Skip link — first focusable element on every page (WCAG 2.4.1)
     ------------------------------------------------------------------------ */
  .skip-link {
    position: absolute;
    top: var(--space-s);
    left: var(--space-s);
    z-index: 1000;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) ease;
  }

  .skip-link:focus {
    transform: none;
    color: var(--color-on-primary);
  }

  /* ------------------------------------------------------------------------
     3. Brand lockup — hosted logo mark + "TRUST POINT" set in type
     ------------------------------------------------------------------------ */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-heading);
    text-decoration: none;
  }

  .brand:hover {
    color: var(--color-heading);
  }

  .brand__mark {
    width: 2.5rem;
    height: 2.5rem;
  }

  .brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  .brand__name {
    font-size: 1.15rem;
    font-weight: var(--weight-black);
    letter-spacing: 0.04em;
  }

  .brand__tag {
    margin-top: 0.3em;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------------------------------
     4. Site header
     Mobile-first. Without JavaScript the nav simply wraps onto its own row
     and is always visible. When JS is available, theme-init.js adds .has-js
     to <html> before first paint, turning the nav into a collapsible panel
     controlled by the menu button (wired up in nav.js).
     ------------------------------------------------------------------------ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-xs);
    min-height: var(--header-height);
  }

  .site-header .brand {
    margin-right: auto;
    padding-block: var(--space-xs);
  }

  /* Visual order on mobile: brand · theme · menu, then the nav row.
     DOM order is brand · menu · nav · theme so the menu button comes
     directly before the panel it controls for keyboard users. */
  .site-header .theme-toggle {
    order: 1;
  }

  .site-header .nav-toggle {
    order: 2;
  }

  .site-nav {
    order: 3;
    flex-basis: 100%;
    padding-bottom: var(--space-s);
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-2xs);
    padding: 0;
    list-style: none;
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* WCAG 2.5.8 target size, generously */
    padding-inline: var(--space-xs);
    border-radius: var(--radius-s);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  .site-nav__link:hover {
    color: var(--color-heading);
    background-color: var(--color-surface-2);
  }

  /* Current page: an underline bar, not color alone (WCAG 1.4.1) */
  .site-nav__link[aria-current="page"] {
    color: var(--color-heading);
    font-weight: var(--weight-semibold);
    box-shadow: inset 0 -3px 0 var(--color-accent);
  }

  .site-nav__cta {
    margin-top: var(--space-xs);
  }

  /* JS mobile behaviour: nav is a drop-down panel */
  @media (max-width: 59.99em) {
    .has-js .site-nav {
      display: none;
      max-height: calc(100dvh - var(--header-height));
      overflow-y: auto;
      padding-block: var(--space-xs) var(--space-m);
      border-top: 1px solid var(--color-border);
    }

    .has-js .site-header[data-nav-open="true"] .site-nav {
      display: block;
    }

    .has-js .site-nav__list {
      flex-direction: column;
    }

    .has-js .site-nav__link {
      width: 100%;
      min-height: 48px;
      font-size: var(--step-1);
    }

    .has-js .site-nav__link[aria-current="page"] {
      box-shadow: inset 3px 0 0 var(--color-accent);
    }

    .has-js .site-nav__cta {
      width: 100%;
      margin-top: var(--space-s);
    }
  }

  /* Desktop: single row — brand · nav · CTA · theme toggle */
  @media (min-width: 60em) {
    .site-nav {
      order: 1;
      flex-basis: auto;
      display: flex;
      align-items: center;
      gap: var(--space-s);
      padding-bottom: 0;
    }

    .site-nav__list {
      flex-wrap: nowrap;
    }

    .site-nav__cta {
      margin-top: 0;
    }

    .site-header .theme-toggle {
      order: 2;
    }
  }

  /* Shared look for the two icon buttons in the header.
     Both need JS, so they only display once <html> has .has-js; the menu
     button is also mobile-only. */
  .theme-toggle,
  .nav-toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    background-color: transparent;
    color: var(--color-heading);
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }

  .has-js .theme-toggle {
    display: inline-grid;
  }

  @media (max-width: 59.99em) {
    .has-js .nav-toggle {
      display: inline-grid;
    }
  }

  .theme-toggle:hover,
  .nav-toggle:hover {
    background-color: var(--color-surface-2);
    border-color: var(--color-border-strong);
  }

  /* Theme toggle shows the moon in light mode (click → dark) and the sun in dark mode.
     aria-pressed carries the state for assistive tech. */
  .theme-toggle[aria-pressed="true"] .theme-toggle__moon,
  .theme-toggle[aria-pressed="false"] .theme-toggle__sun {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__open,
  .nav-toggle[aria-expanded="false"] .nav-toggle__close {
    display: none;
  }

  /* ------------------------------------------------------------------------
     5. Buttons
     ------------------------------------------------------------------------ */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.7em 1.35em;
    border: 1.5px solid transparent;
    border-radius: var(--radius-s);
    font-weight: var(--weight-semibold);
    font-size: var(--step-0);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      color var(--dur-fast) ease,
      transform var(--dur-fast) ease;
  }

  .button:active {
    transform: translateY(1px);
  }

  .button--primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }

  .button--primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
    text-decoration: none;
  }

  .button--secondary {
    border-color: var(--color-border-strong);
    background-color: transparent;
    color: var(--color-heading);
  }

  .button--secondary:hover {
    border-color: var(--color-heading);
    color: var(--color-heading);
    text-decoration: none;
  }

  .button--small {
    min-height: 44px;
    padding: 0.5em 1em;
    font-size: var(--step--1);
  }

  .button[disabled] {
    opacity: 0.7;
    cursor: progress;
  }

  /* Arrow icon nudges right on hover as a subtle affordance */
  .button .icon {
    transition: transform var(--dur-fast) ease;
  }

  .button:hover .icon--arrow {
    transform: translateX(3px);
  }

  /* Inline text link with arrow, e.g. "Learn more →" */
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .text-link:hover {
    text-decoration: underline;
  }

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

  .text-link .icon {
    transition: transform var(--dur-fast) ease;
  }

  /* ------------------------------------------------------------------------
     6. Eyebrow + section header
     ------------------------------------------------------------------------ */
  /* Small mono label above headings, led by a brand triangle */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-eyebrow);
  }

  .eyebrow::before {
    content: "";
    width: 0.7em;
    height: 0.6em;
    background: linear-gradient(135deg, var(--sky-500), var(--blue-600));
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
  }

  .section-header {
    max-width: var(--width-narrow);
    margin-bottom: var(--space-xl);
  }

  .section-header > * + * {
    margin-top: var(--space-s);
  }

  .section-header--center {
    margin-inline: auto;
    text-align: center;
  }

  .section-header__lead {
    font-size: var(--step-1);
    color: var(--color-text-muted);
    line-height: 1.55;
  }

  /* ------------------------------------------------------------------------
     7. Dark surfaces
     The hero, page banners, CTA band and footer are always dark navy.
     Rather than writing "on-dark" variants of every component, we re-point
     the semantic tokens inside these containers so buttons, links, eyebrows
     and focus rings automatically get dark-appropriate, AA-contrast colors.
     ------------------------------------------------------------------------ */
  .hero,
  .page-hero,
  .cta-band,
  .site-footer {
    --color-heading: var(--neutral-0);
    --color-text: var(--neutral-0);
    --color-text-muted: var(--hero-text-muted);
    --color-link: var(--sky-300);
    --color-link-hover: var(--neutral-0);
    --color-primary: var(--sky-500);
    --color-primary-hover: var(--sky-400);
    --color-on-primary: var(--neutral-950);
    --color-eyebrow: var(--sky-300);
    --color-focus: var(--sky-300);
    --color-border: rgb(255 255 255 / 0.16);
    --color-border-strong: rgb(255 255 255 / 0.34);
    --color-surface-2: rgb(255 255 255 / 0.08);
    --color-icon: var(--sky-300);
    --color-icon-bg: rgb(52 165 221 / 0.16);
    --color-accent-text: var(--sky-300);

    color: var(--color-text);
    background-color: var(--hero-bg-1);
  }

  /* ------------------------------------------------------------------------
     8. Home hero
     ------------------------------------------------------------------------ */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 2rem + 8vw, 8rem);
    background-image:
      radial-gradient(ellipse 80% 70% at 85% 30%, rgb(32 89 160 / 0.45), transparent 70%),
      linear-gradient(160deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  }

  /* Static mosaic for no-JS / before the canvas starts; hidden once animated */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/mosaic.svg") right center / auto 120% no-repeat;
    opacity: 0.55;
    mask-image: linear-gradient(to right, transparent 10%, #000 70%);
  }

  .hero--animated::before {
    display: none;
  }

  /* Thin brand gradient line along the bottom edge */
  .hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--navy-700), var(--blue-600), var(--sky-500));
  }

  .hero__canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    /* Fade the mosaic out behind the headline so text contrast stays high */
    mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
  }

  @media (min-width: 64em) {
    .hero__canvas {
      mask-image: linear-gradient(to right, transparent 25%, #000 75%);
    }
  }

  .hero__inner {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
  }

  /* Top-aligned (not centered) so the panel doesn't jump when the web font
     swaps in and the headline column changes height (layout shift). */
  @media (min-width: 64em) {
    .hero__inner {
      grid-template-columns: 1.35fr 1fr;
      align-items: start;
    }

  }

  .hero__content > * + * {
    margin-top: var(--space-m);
  }

  .hero__title {
    font-size: var(--step-5);
    max-width: 16ch;
  }

  /* The eyebrow-style kicker sits inside the H1 (for SEO weight) but keeps
     the small mono look and its own line. */
  .hero__kicker {
    display: flex;
    margin-bottom: var(--space-m);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    letter-spacing: var(--tracking-wide);
  }

  /* Highlighted words get the brand gradient */
  .hero__title-accent {
    background: linear-gradient(90deg, var(--sky-300), var(--sky-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__lead {
    max-width: 40rem;
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--color-text-muted);
  }

  .hero__actions {
    padding-top: var(--space-2xs);
  }

  /* Shield emblem in place of the stat panel: centred in the right column,
     with a soft blue glow so it sits on the dark hero. */
  .hero-shield {
    justify-self: center;
    width: min(100%, 17rem);
    margin: 0;
  }

  .hero-shield__img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 48px rgb(52 165 221 / 0.3));
  }

  @media (min-width: 64em) {
    .hero-shield {
      width: min(100%, 26rem);
    }
  }

  /* Promo video variant of the hero: video takes the right column (wider
     than the text column) in place of the shield emblem. Top-aligned
     for the same layout-shift reason as above; the fixed 16:9 box means the
     player never changes size while the file loads. */
  @media (min-width: 64em) {
    .hero__inner--video {
      grid-template-columns: 1fr 1.15fr;
    }

    .hero__inner--video .hero-video {
      margin-top: var(--space-l);
    }
  }

  .hero-video {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: #000;
    box-shadow: 0 30px 60px rgb(0 0 0 / 0.35);
  }

  .hero-video__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- Minimal controls (added by hero-video.js) -------------------------
     Invisible until the player is hovered, keyboard-focused, or tapped
     (.is-active, touch). A soft bottom scrim keeps the buttons legible. */
  .hero-video__controls {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-xl) var(--space-s) var(--space-s);
    background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
    opacity: 0;
    transition: opacity var(--dur-base) ease;
  }

  /* :has(:focus-visible) rather than :focus-within, so only keyboard focus
     pins the controls open; a tapped button keeps focus on touch screens,
     which would otherwise stop them from hiding. */
  .hero-video:has(:focus-visible) .hero-video__controls,
  .hero-video.is-active .hero-video__controls {
    opacity: 1;
  }

  /* Hover only where a real pointer exists: touch screens keep a "sticky"
     :hover after a tap, which would pin the controls open. */
  @media (hover: hover) {
    .hero-video:hover .hero-video__controls {
      opacity: 1;
    }
  }

  .hero-video__control,
  .hero-video__start {
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: 50%;
    background-color: rgb(6 6 26 / 0.7);
    color: var(--neutral-0);
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }

  .hero-video__control {
    width: 44px;
    height: 44px;
  }

  @media (hover: hover) {
    .hero-video__control:hover,
    .hero-video__start:hover {
      border-color: transparent;
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }
  }

  .hero-video__control:focus-visible,
  .hero-video__start:focus-visible {
    outline-color: var(--neutral-0);
  }

  /* Filled play triangle; the other icons are strokes */
  .hero-video__icon--play,
  .hero-video__start .icon {
    fill: currentColor;
  }

  /* Only the icon matching the current state is shown */
  .hero-video__icon {
    display: none;
  }

  .hero-video[data-playback="playing"] .hero-video__icon--pause,
  .hero-video[data-playback="paused"] .hero-video__icon--play,
  .hero-video[data-playback="ended"] .hero-video__icon--replay,
  .hero-video[data-sound="muted"] .hero-video__icon--muted,
  .hero-video[data-sound="on"] .hero-video__icon--sound {
    display: block;
  }

  /* Large centered play button when the video isn't autoplaying */
  .hero-video__start {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    height: 4.5rem;
    transform: translate(-50%, -50%);
  }

  .hero-video__start .icon {
    width: 2rem;
    height: 2rem;
    margin-left: 0.2rem; /* optically center the triangle */
  }

  /* Real link laid exactly over the video's own "Book a Consultation" pill.
     Percentages are measured from the 1920×1080 frame (x 645–1275, y 625–738),
     so it tracks the pill at any player size. */
  .hero-video__cta {
    position: absolute;
    left: 33.59%;
    top: 57.87%;
    width: 32.81%;
    height: 10.46%;
    border-radius: var(--radius-pill);
    transition: box-shadow var(--dur-fast) ease;
  }

  .hero-video__cta:hover {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6), 0 0 24px rgb(52 165 221 / 0.6);
  }

  .hero-video__cta:focus-visible {
    outline: 3px solid var(--neutral-0);
    outline-offset: 3px;
  }

  /* ---- Video hero on smaller screens --------------------------------------
     Below desktop the video leads the hero (above the headline). On phones
     it runs edge to edge, flush under the header, like a native video. */
  @media (max-width: 63.99em) {
    .hero--video .hero__inner {
      gap: var(--space-xl);
    }

    .hero--video .hero-video {
      order: -1;
    }
  }

  @media (max-width: 39.99em) {
    .hero--video {
      padding-top: 0;
    }

    .hero--video .hero__inner {
      gap: var(--space-l);
    }

    .hero--video .hero-video {
      margin-inline: calc(-1 * var(--gutter));
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .hero--video .hero-video__controls {
      padding: var(--space-l) var(--space-xs) var(--space-xs);
    }

    .hero--video .hero-video__start {
      width: 3.75rem;
      height: 3.75rem;
    }
  }

  /* ------------------------------------------------------------------------
     9. Page hero — compact dark banner at the top of inner pages
     ------------------------------------------------------------------------ */
  .page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
    background-image:
      radial-gradient(ellipse 70% 90% at 90% 10%, rgb(32 89 160 / 0.4), transparent 70%),
      linear-gradient(160deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  }

  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/mosaic.svg") right -4rem center / auto 150% no-repeat;
    opacity: 0.4;
    mask-image: linear-gradient(to right, transparent 30%, #000 85%);
  }

  .page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--navy-700), var(--blue-600), var(--sky-500));
  }

  .page-hero__content {
    max-width: 48rem;
  }

  .page-hero__content > * + * {
    margin-top: var(--space-s);
  }

  .page-hero__lead {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------------------------------
     10. Cards
     ------------------------------------------------------------------------ */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-l);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      border-color var(--dur-base) ease;
  }

  /* Cards that link somewhere lift slightly on hover/focus */
  .card--interactive:hover,
  .card--interactive:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-strong);
  }

  /* "Stretched link": the card's title link covers the whole card so the
     entire card is clickable, while the accessible name stays just the title. */
  .card__link {
    color: inherit;
    text-decoration: none;
  }

  .card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .card__link:hover {
    color: inherit;
  }

  .card__link:focus-visible {
    outline: none;
  }

  .card__link:focus-visible::after {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .card__title {
    font-size: var(--step-1);
  }

  .card__text {
    color: var(--color-text-muted);
  }

  /* Outcome line at the bottom of a card, separated by a hairline */
  .card__outcome {
    margin-top: auto;
    padding-top: var(--space-s);
    border-top: 1px dashed var(--color-border-strong);
    font-weight: var(--weight-semibold);
    color: var(--color-accent-text);
    font-size: var(--step--1);
  }

  .card__more {
    margin-top: auto;
    color: var(--color-link);
  }

  /* Layer card (security stack): numbered, optional "critical" emphasis */
  .layer-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .layer-card__number {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
  }

  .layer-card--critical {
    border-color: transparent;
    background:
      linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
      linear-gradient(135deg, var(--sky-500), var(--blue-600), var(--navy-700)) border-box;
    border-width: 2px;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.7em;
    border-radius: var(--radius-pill);
    background-color: var(--color-icon-bg);
    color: var(--color-accent-text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------
     11. Lists
     ------------------------------------------------------------------------ */
  /* Bulleted list with drawn check marks (pure CSS — no image requests) */
  .check-list {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    list-style: none;
  }

  .check-list > li {
    position: relative;
    padding-left: 1.9em;
  }

  .check-list > li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 0.3em;
    width: 0.45em;
    height: 0.85em;
    border: solid var(--color-accent-text);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
  }

  @media (min-width: 40em) {
    .check-list--2col {
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-l);
    }
  }

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

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.4em 0.85em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    color: var(--color-text);
  }

  .chip .icon {
    color: var(--color-icon);
  }

  /* In-page "jump to" navigation (services page) */
  .jump-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: 0;
    list-style: none;
  }

  .jump-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4em 1em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  .jump-nav__link:hover {
    border-color: var(--color-primary);
    color: var(--color-heading);
  }

  /* ------------------------------------------------------------------------
     12. Steps (numbered process) + Flow (stack-effect sequence)
     ------------------------------------------------------------------------ */
  .steps {
    display: grid;
    gap: var(--space-l);
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  @media (min-width: 48em) {
    .steps {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .steps__item {
    position: relative;
    padding-top: var(--space-xl);
    border-top: 2px solid var(--color-border);
    counter-increment: step;
  }

  /* Accent bar over the first part of the rule + zero-padded step number */
  .steps__item::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-600), var(--sky-500));
  }

  .steps__item::after {
    content: "0" counter(step);
    position: absolute;
    top: var(--space-s);
    left: 0;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--color-accent-text);
    letter-spacing: 0.08em;
  }

  .steps__title {
    margin-bottom: var(--space-2xs);
  }

  .steps__text {
    color: var(--color-text-muted);
  }

  /* Flow: vertical timeline of "threat → which layer stops it" */
  .flow {
    position: relative;
    display: grid;
    gap: var(--space-l);
    padding: 0;
    list-style: none;
  }

  /* The connecting spine */
  .flow::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: calc(1.5rem - 1px);
    width: 2px;
    background: linear-gradient(var(--sky-500), var(--blue-600), var(--navy-500));
  }

  .flow__item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-m);
    align-items: start;
  }

  .flow__marker {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    background-color: var(--color-bg);
    color: var(--color-icon);
  }

  .flow__body {
    padding-top: 0.35rem;
  }

  .flow__label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-text);
  }

  .flow__title {
    margin-block: var(--space-3xs) var(--space-2xs);
  }

  .flow__text {
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------------------------------
     13. CTA band — rounded dark panel that closes most pages
     ------------------------------------------------------------------------ */
  .cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: var(--space-l);
    padding: clamp(2rem, 1rem + 5vw, 4rem);
    border-radius: var(--radius-l);
    background-image:
      radial-gradient(ellipse 60% 120% at 100% 0%, rgb(52 165 221 / 0.3), transparent 70%),
      linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2));
  }

  .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/mosaic.svg") right -6rem bottom -2rem / auto 140% no-repeat;
    opacity: 0.35;
  }

  @media (min-width: 56em) {
    .cta-band {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }

  .cta-band__content > * + * {
    margin-top: var(--space-s);
  }

  .cta-band__title {
    font-size: var(--step-3);
    max-width: 22ch;
  }

  .cta-band__text {
    max-width: 44rem;
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------------------------------
     14. Forms
     ------------------------------------------------------------------------ */
  .form {
    display: grid;
    gap: var(--space-m);
  }

  @media (min-width: 40em) {
    .form__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-m);
    }
  }

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

  .form__note {
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  /* Honeypot for Netlify spam filtering: removed from layout AND from the
     accessibility tree (display:none), so real people never see or fill it. */
  .form__honeypot {
    display: none;
  }

  /* align-content: start stops a field's input from stretching when the
     neighbouring field in the same row grows (e.g. shows an error message). */
  .field {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
  }

  .field__label,
  .choice-group__legend {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }

  /* Required marker is decorative; the `required` attribute conveys it to AT */
  .field__required {
    color: var(--color-danger);
    margin-left: 0.15em;
  }

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

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

  .field__input {
    width: 100%;
    min-height: 48px;
    padding: 0.65em 0.85em;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-s);
    background-color: var(--color-input-bg);
    color: var(--color-text);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  }

  .field__input:hover {
    border-color: var(--color-text-muted);
  }

  .field__input:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 1px;
    border-color: var(--color-focus);
  }

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

  select.field__input {
    cursor: pointer;
  }

  .field__input[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: inset 0 0 0 1px var(--color-danger);
  }

  /* Error text is written by form.js; prefix symbol so color isn't the only cue */
  .field__error {
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    color: var(--color-danger);
  }

  .field__error::before {
    content: "⚠ ";
  }

  .choice-group {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .choice-group__legend {
    margin-bottom: var(--space-2xs);
    padding: 0;
  }

  .choice-group__options {
    display: grid;
    gap: var(--space-2xs) var(--space-m);
  }

  @media (min-width: 40em) {
    .choice-group__options {
      grid-template-columns: 1fr 1fr;
    }
  }

  .choice {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    cursor: pointer;
  }

  .choice__input {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    accent-color: var(--color-primary);
    cursor: pointer;
  }

  /* ------------------------------------------------------------------------
     15. Prose — long-form legal/statement text
     ------------------------------------------------------------------------ */
  .prose {
    max-width: var(--width-prose);
  }

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

  .prose h2 {
    margin-top: var(--space-xl);
    font-size: var(--step-2);
  }

  .prose h3 {
    margin-top: var(--space-l);
  }

  .prose li + li {
    margin-top: var(--space-2xs);
  }

  .prose__meta {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .callout {
    padding: var(--space-m);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background-color: var(--color-bg-alt);
  }

  /* ------------------------------------------------------------------------
     16. Site footer
     ------------------------------------------------------------------------ */
  .site-footer {
    position: relative;
    padding-block: var(--space-2xl) var(--space-l);
    background-image: linear-gradient(180deg, var(--hero-bg-1), #06061a);
  }

  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--sky-500), var(--blue-600), var(--navy-700));
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-xl);
  }

  @media (min-width: 48em) {
    .site-footer__grid {
      grid-template-columns: 1.6fr repeat(3, 1fr);
    }
  }

  .site-footer__about > * + * {
    margin-top: var(--space-s);
  }

  .site-footer__tagline {
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    letter-spacing: 0.01em;
  }

  .site-footer__text {
    max-width: 34ch;
    color: var(--color-text-muted);
    font-size: var(--step--1);
  }

  .site-footer__heading {
    margin-bottom: var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-eyebrow);
  }

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

  .site-footer__list a {
    display: inline-block;
    padding-block: 0.3em;
    color: var(--color-text-muted);
    font-size: var(--step--1);
    text-decoration: none;
  }

  .site-footer__list a:hover {
    color: var(--neutral-0);
    text-decoration: underline;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-l);
    margin-top: var(--space-2xl);
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-border);
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .site-footer__area {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
  }

  .site-footer .brand__tag {
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------------------------------
     17. Scroll reveal
     Only active once reveal.js adds .reveal-ready to <html> (JS on and motion
     allowed). Without it, content is simply visible — nothing is ever hidden
     by CSS alone.
     ------------------------------------------------------------------------ */
  /* Implemented with a one-shot animation (fill-mode: backwards) rather than a
     transition: once it finishes it leaves no styles behind, so card hover
     transforms and transitions keep working without inheriting stagger delays. */
  .reveal-ready [data-reveal]:not([data-reveal="stagger"]):not(.is-revealed),
  .reveal-ready [data-reveal="stagger"]:not(.is-revealed) > * {
    opacity: 0;
  }

  .reveal-ready [data-reveal]:not([data-reveal="stagger"]).is-revealed,
  .reveal-ready [data-reveal="stagger"].is-revealed > * {
    animation: reveal-in var(--dur-slow) var(--ease-out) backwards;
  }

  .reveal-ready [data-reveal="stagger"].is-revealed > :nth-child(2) { animation-delay: 70ms; }
  .reveal-ready [data-reveal="stagger"].is-revealed > :nth-child(3) { animation-delay: 140ms; }
  .reveal-ready [data-reveal="stagger"].is-revealed > :nth-child(4) { animation-delay: 210ms; }
  .reveal-ready [data-reveal="stagger"].is-revealed > :nth-child(5) { animation-delay: 280ms; }
  .reveal-ready [data-reveal="stagger"].is-revealed > :nth-child(6) { animation-delay: 350ms; }
  .reveal-ready [data-reveal="stagger"].is-revealed > :nth-child(7) { animation-delay: 420ms; }
  .reveal-ready [data-reveal="stagger"].is-revealed > :nth-child(8) { animation-delay: 490ms; }

  @keyframes reveal-in {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }
}