@charset "UTF-8";
/* ==========================================================================
   Digital Assure Limited
   Hand-authored stylesheet. No framework, no build step, no generated output.
   Edit this file directly.

   Contents
     1. Fonts
     2. Tokens
     3. Reset
     4. Base typography
     5. Layout
     6. Components
     7. Utilities
     8. Motion and accessibility

   House rules, enforced throughout:
     - No gradients of any kind. Flat fills only.
     - Font weights 400 and 500 only.
     - Orange text on a light surface is always --rust, never --signal.
     - Text on an orange fill is always --on-orange.
   ========================================================================== */


/* 1. Fonts
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Tokens
   ========================================================================== */

:root {
  /* Orange family */
  --signal:       #FF6B1A;   /* fills only: buttons, logo mark, CTA band, active state */
  --ember:        #FF8A3D;   /* secondary emphasis, hover */
  --flare:        #FFA76B;   /* tertiary, tonal progression */
  --rust:         #C2470C;   /* the only orange permitted as text on light. 4.89:1 */
  --on-orange:    #2A0F02;   /* text on orange fills. 6.31:1 on signal */
  --on-orange-2:  #7A2E05;   /* only 3.32:1 on signal — not for text on an orange
                                fill. Fine on light surfaces (9.25:1 on page),
                                where it serves as the link hover colour. */

  /* Light surfaces */
  --page:         #FFFCF8;
  --surface:      #FFFFFF;
  --tint:         #FFF3EA;
  --tint-2:       #FFF0E3;
  --hairline:     #F0E2D4;
  --hairline-2:   #E4D5C6;

  /* Light-surface text */
  --ink:          #10161F;   /* headings. 17.5:1 */
  --body:         #55616F;   /* body copy. 6.17:1 */
  --muted:        #8A7768;   /* 4.17:1 — FAILS AA as text. Decorative and non-text use only.
                                See BUILD-PROMPT.md amendment A2. */
  --label:        #7A6857;   /* small labels. 5.20:1. Added by A2 to replace --muted as text */

  /* Dark surfaces */
  --dark:         #10161F;
  --dark-2:       #1B2836;
  --dark-line:    #232C38;
  --dark-text:    #B8C2CE;   /* 9.93:1 on --dark */
  --dark-muted:   #7A8694;   /* 4.83:1 on --dark */

  /* Accents */
  --steel:        #2D7FD3;
  --alert:        #E24B4A;   /* 3.93:1 against white — use for borders, icons and
                                large text, not as a background for body copy */

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type. Interpolates between a 390px and a 1280px viewport.
     Values are the desktop -> mobile pairs from section 4 of the brief. */
  --t-hero:   clamp(1.875rem, 1.2725rem + 2.4719vw, 3.25rem);    /* 30 -> 52 */
  --t-h1:     clamp(1.75rem,  1.4214rem + 1.3483vw, 2.5rem);     /* 28 -> 40 */
  --t-h2:     clamp(1.375rem, 1.1559rem + 0.8989vw, 1.875rem);   /* 22 -> 30 */
  --t-h3:     clamp(1.125rem, 1.0428rem + 0.3371vw, 1.3125rem);  /* 18 -> 21 */
  --t-body:   clamp(0.9375rem, 0.8827rem + 0.2247vw, 1.0625rem); /* 15 -> 17 */
  --t-small:  clamp(0.8125rem, 0.7851rem + 0.1124vw, 0.875rem);  /* 13 -> 14 */
  --t-kicker: 0.75rem;                                           /* 12, fixed */

  /* Space */
  --gutter:    1.5rem;
  --container: 75rem;        /* 1200px */
  --radius:    9px;
  --radius-sm: 5px;
  --tap:       44px;         /* minimum touch target */

  /* Section rhythm */
  --section-y: clamp(3.5rem, 2.4rem + 4.5vw, 6rem);
}


/* 3. Reset
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] {
  list-style: none;
  padding: 0;
}

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

img { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Never rely on browser-default weights above 500. */
strong, b, th, optgroup { font-weight: 500; }


/* 4. Base typography
   ========================================================================== */

body {
  background: var(--page);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.02em;  line-height: 1.2; }
h2 { font-size: var(--t-h2); letter-spacing: -0.018em; line-height: 1.25; }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.3; }
h4 { font-size: var(--t-body); letter-spacing: -0.01em; line-height: 1.4; }

p { text-wrap: pretty; }

a {
  color: var(--rust);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { color: var(--on-orange-2); }

small, .small {
  font-size: var(--t-small);
  line-height: 1.6;
}

.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rust);
}

.kicker--muted { color: var(--label); }
.kicker--on-dark { color: var(--dark-muted); }

.lede {
  font-size: clamp(1rem, 0.93rem + 0.29vw, 1.1875rem);
  line-height: 1.6;
  color: var(--body);
  max-width: 62ch;
}

/* Long-form prose blocks */
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.15rem; list-style: disc; }
.prose li + li { margin-top: 0.4em; }
.prose { max-width: 68ch; }


/* 5. Layout
   ========================================================================== */

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

.container--narrow { max-width: 52rem; }

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

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

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

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #FFFFFF; }

.section--dark a { color: var(--flare); }

/* A hairline between two same-coloured sections */
.section--ruled { border-top: 1px solid var(--hairline); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.section-head .kicker { margin-bottom: 0.75rem; }
.section-head p { margin-top: 0.85rem; }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }

.grid {
  display: grid;
  gap: 1.25rem;
}

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

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Two-column split used for editorial rows */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}


/* 6. Components
   ========================================================================== */

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--t-small);
}

.skip-link:focus { top: 0.5rem; color: #FFFFFF; }


/* --- Top bar ------------------------------------------------------------- */

.top-bar {
  background: var(--dark);
  color: var(--dark-text);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--dark-line);
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  flex-wrap: wrap;
}

.top-bar__group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.top-bar a {
  color: var(--dark-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.5rem;
}

.top-bar a:hover { color: #FFFFFF; text-decoration: underline; }

.top-bar svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--dark-muted);
}

.top-bar__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--dark-muted);
}

/* Under 640px only the primary number survives. */
@media (max-width: 640px) {
  .top-bar__inner { justify-content: center; }
  .top-bar__secondary { display: none; }
}


/* --- Header -------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

/* Logo lockup */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex: none;
}

.logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--signal);
  color: var(--on-orange);
  display: grid;
  place-items: center;
  flex: none;
}

.logo__mark svg { width: 19px; height: 19px; }

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo__name {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.logo__sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}


/* --- Navigation ---------------------------------------------------------- */

.nav { display: flex; align-items: center; gap: 0.25rem; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item { position: relative; }

.nav__link,
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--tap);
  padding: 0 0.7rem;
  color: var(--body);
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav__link:hover,
.nav__toggle:hover { color: var(--ink); background: var(--tint); }

.nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* Current-section marker. Underline carries the meaning, not colour alone. */
.nav__link[aria-current="page"]::after,
.nav__item--current > .nav__toggle::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.55rem;
  height: 2px;
  background: var(--signal);
  border-radius: 2px;
}

.nav__toggle svg {
  width: 14px;
  height: 14px;
  color: var(--label);
  transition: transform 0.18s ease;
}

.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Dropdown panel */
.nav__panel {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  min-width: 17rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -12px rgba(16, 22, 31, 0.18);
  list-style: none;
  margin: 0;
  display: none;
}

.nav__panel--wide { min-width: 21rem; }

.nav__toggle[aria-expanded="true"] + .nav__panel { display: block; }

/* Keyboard fallback when JavaScript has not loaded. nav.js adds .js to the
   root element, which stands this down so aria-expanded stays authoritative. */
html:not(.js) .nav__item:focus-within .nav__panel { display: block; }

.nav__panel a {
  display: block;
  padding: 0.6rem 0.7rem;
  min-height: var(--tap);
  color: var(--body);
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.nav__panel a:hover { background: var(--tint); color: var(--ink); }

.nav__panel a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.nav__panel-note {
  display: block;
  font-size: var(--t-small);
  color: var(--label);
  margin-top: 0.1rem;
}

.nav__sep {
  height: 1px;
  background: var(--hairline);
  margin: 0.4rem 0.7rem;
}

/* Hamburger */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
}

.nav__burger svg { width: 20px; height: 20px; }

/* Below 900px the desktop nav collapses. */
@media (max-width: 900px) {
  .nav__burger { display: inline-flex; }

  .header__cta { display: none; }

  .nav {
    position: fixed;
    inset: auto 0 0 0;
    top: var(--header-offset, 112px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem var(--gutter) 2rem;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    overflow-y: auto;
  }

  .nav[data-open="true"] { display: flex; }

  /* Without JavaScript the burger cannot open anything, so the navigation
     renders inline and stacked instead, and the burger is withdrawn. Every
     link stays reachable with scripting disabled. */
  html:not(.js) .nav__burger { display: none; }

  html:not(.js) .nav {
    position: static;
    display: flex;
    padding: 0 0 1rem;
    border-top: 0;
    overflow: visible;
  }

  html:not(.js) .header__inner { flex-wrap: wrap; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__link,
  .nav__toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
  }

  .nav__link:hover,
  .nav__toggle:hover { background: transparent; }

  .nav__link[aria-current="page"]::after,
  .nav__item--current > .nav__toggle::after { display: none; }

  .nav__link[aria-current="page"] {
    border-left: 2px solid var(--signal);
    padding-left: 0.6rem;
  }

  .nav__panel {
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.25rem 0 0.5rem 0.85rem;
    background: transparent;
  }

  /* On mobile the panel is a disclosure, so keep the fallback out of the way. */
  html:not(.js) .nav__item:focus-within .nav__panel { display: block; }
  .nav__toggle[aria-expanded="true"] + .nav__panel { display: block; }

  .nav__cta-mobile {
    display: block;
    margin-top: 1.25rem;
  }
}

@media (min-width: 901px) {
  .nav__cta-mobile { display: none; }
}


/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.6875rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--signal);
  color: var(--on-orange);
}

.btn--primary:hover {
  background: var(--ember);
  color: var(--on-orange);
}

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--hairline-2);
}

.btn--secondary:hover {
  background: var(--tint);
  color: var(--ink);
  border-color: var(--rust);
}

.btn--ghost {
  background: transparent;
  color: var(--rust);
  padding-inline: 0.5rem;
}

.btn--ghost:hover { color: var(--on-orange-2); text-decoration: underline; }

/* Dark button, used on the signal CTA band and on dark sections. */
.btn--dark {
  background: var(--ink);
  color: #FFFFFF;
}

.btn--dark:hover { background: var(--dark-2); color: #FFFFFF; }

.btn--on-dark {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn--on-dark:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }

.btn--full { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}


/* --- Card ---------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.card--link { text-decoration: none; transition: border-color 0.16s ease; }
.card--link:hover { border-color: var(--hairline-2); }

.card__chip {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--tint-2);
  color: var(--rust);
  margin-bottom: 1.1rem;
  flex: none;
}

.card__chip svg { width: 21px; height: 21px; }

.card__title {
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.card--link:hover .card__title { color: var(--rust); }

.card__body {
  color: var(--body);
  font-size: var(--t-body);
  margin: 0;
}

.card__foot {
  margin-top: auto;
  padding-top: 1.1rem;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--rust);
  font-size: var(--t-small);
  font-weight: 500;
}

.card__more svg { width: 15px; height: 15px; }


/* --- Taxonomy tags ------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--hairline-2);
  border-radius: 4px;
  background: var(--page);
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* --- Badge pill ---------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  color: var(--rust);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 500;
}

.badge svg { width: 15px; height: 15px; flex: none; }


/* --- Stat block ---------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
}

.stat__figure {
  color: var(--signal);        /* permitted: display size, not body text */
  font-size: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat__label {
  color: var(--ink);
  font-size: var(--t-body);
  margin-top: 0.75rem;
  max-width: 30ch;
}

.stat__source {
  display: block;
  color: var(--label);
  font-size: var(--t-small);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
  max-width: 34ch;
}

.stat__source cite { font-style: normal; }

/* The figure sits on dark in some placements. */
.section--dark .stat__label { color: #FFFFFF; }
.section--dark .stat__source { color: var(--dark-muted); border-top-color: var(--dark-line); }


/* --- Process steps ------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step {
  padding-top: 1.1rem;
  border-top: 3px solid var(--hairline-2);
}

/* Tonal progression across the four steps. */
.step:nth-child(1) { border-top-color: var(--rust); }
.step:nth-child(2) { border-top-color: var(--signal); }
.step:nth-child(3) { border-top-color: var(--ember); }
.step:nth-child(4) { border-top-color: var(--flare); }

.step__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--label);
  margin-bottom: 0.6rem;
}

.step__title {
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
  margin-bottom: 0.4rem;
}

.step__body { margin: 0; font-size: var(--t-body); }


/* --- CTA band ------------------------------------------------------------ */

.cta-band {
  background: var(--signal);
  color: var(--on-orange);
  padding-block: clamp(2.75rem, 2rem + 3.2vw, 4.25rem);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  flex-wrap: wrap;
}

.cta-band__text { max-width: 46rem; }

.cta-band h2 {
  color: var(--on-orange);
  font-size: var(--t-h2);
}

/* --on-orange-2 on --signal is only 3.32:1, so it cannot carry body text here.
   It stays legitimate on light surfaces (9.25:1 on --page), which is where the
   link hover states use it. See BUILD-PROMPT.md amendment A5. */
.cta-band p {
  color: var(--on-orange);
  margin-top: 0.6rem;
  max-width: 54ch;
}

.cta-band .btn--dark { flex: none; }


/* --- Trusted-by strip ---------------------------------------------------- */

.trusted {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.trusted__label {
  font-family: var(--font-mono);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
}

.trusted__placeholder {
  color: var(--label);
  font-size: var(--t-small);
}


/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--dark);
  color: var(--dark-text);
  padding-block: clamp(3rem, 2.2rem + 3.2vw, 4.5rem) 0;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

@media (max-width: 900px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__cols { grid-template-columns: minmax(0, 1fr); } }

.footer__title {
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.footer__list { list-style: none; margin: 0; padding: 0; }

.footer__list li + li { margin-top: 0.15rem; }

.footer__list a,
.footer__contact a {
  display: inline-block;
  color: var(--dark-text);
  font-size: var(--t-small);
  text-decoration: none;
  padding-block: 0.35rem;
}

.footer__list a:hover,
.footer__contact a:hover { color: #FFFFFF; text-decoration: underline; }

.footer__blurb {
  color: var(--dark-muted);
  font-size: var(--t-small);
  margin-top: 1rem;
  max-width: 32ch;
}

.footer .logo__name { color: #FFFFFF; }
.footer .logo__sub  { color: var(--dark-muted); }

.footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-small);
}

.footer__contact li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding-block: 0.2rem;
}

.footer__contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 0.55rem;
  color: var(--dark-muted);
}

.footer__contact span { padding-block: 0.35rem; }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--dark-line);
  color: var(--dark-muted);
  font-size: var(--t-small);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__legal a {
  color: var(--dark-muted);
  text-decoration: none;
  padding-block: 0.35rem;
  display: inline-block;
}

.footer__legal a:hover { color: #FFFFFF; text-decoration: underline; }


/* --- Placeholder marker -------------------------------------------------- */
/* Phase 1 scaffolding. Every instance is removed by Phase 4. */

.placeholder {
  border: 1px dashed var(--hairline-2);
  border-radius: var(--radius);
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) 1.5rem;
  text-align: center;
  color: var(--label);
  background: var(--surface);
}

.placeholder__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.6rem;
}


/* --- Development notice -------------------------------------------------- */
/* Rendered by head.php when page metadata is missing or out of spec.
   Never appears in production. */

/* White on --alert is 3.93:1, short of AA. This banner is development-only and
   never ships, but it is held to the same bar as everything else. The darker
   red gives 6.68:1. See BUILD-PROMPT.md amendment A5. */
.dev-notice {
  position: relative;
  z-index: 500;
  background: #B3201F;
  color: #FFFFFF;
  padding: 0.85rem var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.dev-notice ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.dev-notice strong { font-weight: 500; }


/* 7. Utilities
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mx-auto    { margin-inline: auto; }
.mt-0       { margin-top: 0; }
.measure    { max-width: 62ch; }
.flow-lg    { --stack-gap: 1.5rem; }

[hidden] { display: none !important; }


/* 8. Motion and accessibility
   ========================================================================== */

/* Focus ring.
   The brief specifies a 2px signal ring at 2px offset. Signal on white is only
   2.85:1, below the 3:1 that WCAG 2.2 SC 1.4.11 requires. The box-shadow fills
   the 2px offset gap with ink, so on light surfaces the ink ring carries the
   contrast (17.5:1) and on dark surfaces the signal ring does (6.29:1).
   See BUILD-PROMPT.md amendment A3. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ink);
  border-radius: var(--radius-sm);
}

.section--dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.footer :where(a, button, [tabindex]):focus-visible,
.top-bar :where(a, button, [tabindex]):focus-visible,
.cta-band :where(a, button, [tabindex]):focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

@media print {
  .top-bar, .header, .cta-band, .skip-link { display: none; }
  body { background: #FFFFFF; color: #000000; }
}