/* ==========================================================================
   153 Base — main stylesheet
   Ported from the approved homepage mock. Depends on tokens.css.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; text-wrap: balance; }
p, figure, ul, ol { margin: 0; }
img, svg { max-width: 100%; height: auto; }
/* Links carry a permanent underline. The design note offered "no underline",
   which would make an in-content link indistinguishable from body text and
   fail 1.4.1; the underline is the affordance, colour is secondary. */
a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
}

/* Focus: two-tone ring. A single accent ring would fail 1.4.11 against white
   (3.3:1); pairing it with ink guarantees 3:1 on any ground we use. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid transparent;   /* keeps a visible ring in forced-colors */
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 6px var(--c-ink);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Entrance animation ----------
   The hidden state is scoped to .js-reveal, which only exists once the script
   has run and confirmed the user has not asked for reduced motion. No script,
   or reduced motion, means no hidden state and nothing to go wrong. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js-reveal [data-reveal="in"] {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .5s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
}
/* Artwork gets a fractionally longer, softer move than the text beside it. */
.js-reveal .hero__figure[data-reveal],
.js-reveal .service-detail__figure[data-reveal] {
  transform: translateY(20px) scale(.985);
}
.js-reveal .hero__figure[data-reveal="in"],
.js-reveal .service-detail__figure[data-reveal="in"] {
  transform: none;
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
}
/* Belt and braces: if the media query flips after load, everything settles. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal="in"] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---------- Utilities ---------- */
.wrap { max-width: var(--w-max); margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 1024px) { .wrap { padding-inline: var(--s-6); } }

.section { padding-block: var(--s-8); }
@media (min-width: 1024px) { .section { padding-block: var(--s-9); } }
.section--surface { background: var(--c-surface); }

/* A dark band. The site was two near-identical whites top to bottom; one
   inverted section gives the eye somewhere to land and breaks the plane. */
.section--dark { background: var(--c-dark); color: var(--c-dark-text); }
.section--dark .eyebrow { color: var(--c-dark-muted); }
.section--dark .h2,
.section--dark h2,
.section--dark h3 { color: var(--c-dark-text); }
.section--dark .lede,
.section--dark p { color: var(--c-dark-muted); }
.section--dark a { color: var(--c-dark-text); }
/* Text stays white — the accent at 3.7:1 is below the 4.5:1 a body-size link
   needs. The hover signal is carried by the underline instead. */
.section--dark a { color: var(--c-dark-text); }
.section--dark a:hover {
  color: var(--c-dark-text);
  text-decoration-color: var(--c-accent);
}

/* The same grid the illustrations are drawn on, used as a surface texture.
   Pure CSS, no extra request. */
.section--texture {
  background-image:
    linear-gradient(to right, rgba(16,58,93,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,58,93,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.section--dark.section--texture {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
}

/* The masthead is sticky, so an anchor target would otherwise land underneath
   it — hiding the heading and, for keyboard users, the focused element
   (WCAG 2.2 SC 2.4.11 Focus Not Obscured). Offset by the header's height. */
:where(section, .hero)[id] { scroll-margin-top: calc(96px + var(--s-5)); }

.eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--s-3);
}
.h2 {
  font-family: var(--f-serif); font-weight: 700;
  font-size: var(--t-h2); letter-spacing: -.022em;
}
.lede { max-width: var(--w-measure); color: var(--c-muted); margin-top: var(--s-4); }
.mono { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.rule-accent { width: 56px; height: 4px; background: var(--c-accent); margin-bottom: var(--s-5); }

/* Section content is marked up as lists so assistive tech announces the item
   count, but the items are laid out as grids and cards. The markers would be
   visual noise, so they go while the semantics stay. */
.standards__grid,
.cards,
.reasons,
.steps,
.models,
.proof__grid,
.commitments,
.hero__meta {
  list-style: none;
  padding-left: 0;
}

.screen-reader-text {
  position: absolute !important; 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;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-navy); color: #fff; font-weight: 600;
  padding: var(--s-3) var(--s-5); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.masthead {
  background: var(--c-page);
  border-bottom: 1px solid var(--c-border-dec);
  position: sticky; top: 0; z-index: 20;
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); padding-block: var(--s-5);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: auto; height: 44px; }
@media (min-width: 1024px) { .brand img { height: 52px; } }

.nav-primary { display: none; }
@media (min-width: 1024px) {
  .nav-primary { display: block; }
  .nav-primary ul {
    display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0;
    font-size: 1rem; font-weight: 600; letter-spacing: .005em;
  }
  .nav-primary a {
    color: var(--c-ink); text-decoration: none;
    padding-block: var(--s-2); border-bottom: 2px solid transparent;
    display: inline-block;
  }
  .nav-primary a:hover,
  .nav-primary .current-menu-item > a { border-bottom-color: var(--c-accent); }
}

.menu-toggle {
  font: inherit; font-size: var(--t-small); font-weight: 600;
  background: transparent; color: var(--c-ink);
  border: 2px solid var(--c-ink); border-radius: var(--radius-sm);
  padding: 10px var(--s-4); min-height: 44px; cursor: pointer;
}
.masthead .btn { display: none; }
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .masthead .btn { display: inline-flex; }
}

/* Mobile panel */
.nav-mobile {
  display: none; border-top: 1px solid var(--c-border-dec);
  background: var(--c-page);
}
.nav-mobile[data-open="true"] { display: block; }
@media (min-width: 1024px) { .nav-mobile { display: none !important; } }
.nav-mobile ul { list-style: none; margin: 0; padding: var(--s-4) 0; }
.nav-mobile a {
  display: block; padding: var(--s-3) 0; min-height: 44px;
  color: var(--c-ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--c-border-dec);
}

/* ---------- Buttons ---------- */
.btn { text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-5);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--f-sans); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.btn--primary:hover { background: var(--c-ink); border-color: var(--c-ink); }
.btn--outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: #fff; }
.btn--accent { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }
.btn--accent:hover { filter: brightness(.93); }
.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-8); }
@media (min-width: 1024px) { .hero { padding-block: var(--s-9); } }
.hero h1 {
  font-family: var(--f-serif); font-weight: 800; font-size: var(--t-display);
  letter-spacing: -.03em; line-height: 1.04; max-width: 16ch;
}
.hero__sub {
  margin-top: var(--s-5); max-width: 56ch;
  font-size: 1.25rem; color: var(--c-muted);
}
/* Trust chips. Previously a plain meta line below the buttons; as chips above
   them they read as scannable credentials rather than a footnote. */
.hero__meta {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  list-style: none; padding-left: 0;
}
.hero__meta li { display: inline-flex; }
.hero__meta strong {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: var(--s-2) var(--s-4);
  background: var(--c-page);
  border: 1px solid var(--c-border-fn);
  border-radius: var(--radius-sm);
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
}
.section--surface .hero__meta strong { background: var(--c-page); }

/* Split hero. Image sits second in the DOM so the heading and buttons come
   first for keyboard and screen reader users regardless of visual order. */
.hero__inner { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
  .hero--split h1 { max-width: 15ch; }
  .hero--split .hero__sub { max-width: 46ch; }
}
.hero__figure { min-width: 0; }
.hero__figure img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  /* Kept on small screens, but capped and centred: the illustration is
     ornament, so it may sit under the content it decorates without pushing
     the buttons off the fold. */
  .hero__figure { order: 2; }
  .hero__figure img { max-width: 420px; margin-inline: auto; }
}

/* ---------- Standards ---------- */
.standards__grid { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
/* Auto-fit rather than a fixed four, so adding a framework does not leave an
   orphan on its own row. */
@media (min-width: 640px) {
  .standards__grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (min-width: 1024px) { .standards__grid { gap: var(--s-6); } }
.standard { border-top: 3px solid var(--c-accent); padding-top: var(--s-4); }
.standard__code {
  display: block; font-family: var(--f-mono); font-weight: 500;
  font-size: 1.0625rem; color: var(--c-navy);
}
.standard p { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted); }
/* The status line is the whole point of the card for an evaluator, so it is
   set apart from the description rather than buried in it. */
.standard__status {
  margin-top: var(--s-3) !important;
  font-family: var(--f-mono); font-weight: 500; font-size: 0.8125rem;
  color: var(--c-ink) !important;
}
.section--dark .standard__status { color: var(--c-dark-text) !important; }

/* A linked standard turns the whole item into one target, so the claim and its
   evidence are a single thing to click rather than a stray "learn more". */
.standard__link {
  display: block; text-decoration: none; color: inherit;
  margin: calc(-1 * var(--s-2)); padding: var(--s-2); border-radius: var(--radius-sm);
}
.standard--linked .standard__code { text-decoration: underline; text-underline-offset: 3px; }
.standard__link:hover { background: var(--c-page); }
.standard__link:hover .standard__code { color: var(--c-blue); }
.standard__go {
  display: block; margin-top: var(--s-3);
  font-size: var(--t-caption); font-weight: 600; color: var(--c-blue);
}

/* ---------- Proof strip ----------
   Figures are set in mono because they are data, not marketing numbers, and
   they should read as something you could copy down and re-check. */
.proof__grid {
  display: grid; gap: var(--s-5); margin-top: var(--s-7);
  list-style: none; padding: 0;
}
@media (min-width: 560px)  { .proof__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .proof__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }
.proof__item {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-top: var(--s-4); border-top: 2px solid var(--c-border-fn);
}
.proof__value {
  font-family: var(--f-mono); font-weight: 500;
  font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1;
  color: var(--c-navy); font-variant-numeric: tabular-nums;
}
.proof__label { font-size: var(--t-small); color: var(--c-muted); }

/* On the dark band the figures carry the accent at display size, which is
   where the brand colour finally occupies real area rather than a hairline. */
.section--dark .proof__item { border-top-color: var(--c-dark-rule); }
.section--dark .proof__value { color: var(--c-accent); }
.section--dark .proof__label { color: var(--c-dark-muted); }
.section--dark .proof__note { color: var(--c-dark-muted); }
.proof__note {
  margin-top: var(--s-6); font-size: var(--t-small); color: var(--c-muted);
  max-width: var(--w-measure);
}

/* ---------- Commitments ---------- */
.commitments {
  display: grid; gap: var(--s-5); margin-top: var(--s-7);
  list-style: none; padding: 0;
}
@media (min-width: 768px) { .commitments { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-8); } }
.commitment { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-4); align-items: start; }
.commitment__mark { color: var(--c-accent); line-height: 0; padding-top: 2px; }
.commitment__body { display: block; }
.commitment__title {
  display: block; font-size: var(--t-h4); font-weight: 600; line-height: 1.3;
}
.commitment__text {
  display: block; margin-top: var(--s-2); font-size: 1rem; color: var(--c-muted);
}

/* ---------- Cards ---------- */
.cards { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
/* Two columns and an odd count leaves one card alone on the last row. Centre
   it at card width rather than let it hug the left edge like a leftover. */
@media (min-width: 640px) and (max-width: 1023px) {
  .cards > :last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--s-4)) / 2);
  }
}
.card {
  display: flex; flex-direction: column;
  background: var(--c-page); overflow: hidden;
  border: 1px solid var(--c-border-dec); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color .16s ease-out, background-color .16s ease-out;
}
.card:hover { border-color: var(--c-border-fn); background: var(--c-surface); }
.card svg { color: var(--c-navy); flex: none; }
.card h3 { font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.card p { font-size: var(--t-small); color: var(--c-muted); margin-top: var(--s-3); }
.card__go {
  margin-top: auto; padding-top: var(--s-4);
  font-size: var(--t-small); font-weight: 600; color: var(--c-blue);
}

/* Artwork runs edge to edge; the padding lives on the body so the illustration
   is not floating inside a box inside a box. */
.card__figure { border-bottom: 1px solid var(--c-border-dec); background: var(--c-surface); }
.card__figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.card__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: var(--s-5);
}

/* ---------- Service detail ----------
   The artwork is always second in source order; only the visual column
   swaps, so reading and tab order never depend on which side it is on. */
.service-detail__inner { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) {
  .service-detail__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
  .service-detail--flip .service-detail__body   { order: 2; }
  .service-detail--flip .service-detail__figure { order: 1; }
}
.service-detail__intro {
  margin-top: var(--s-4); max-width: 52ch;
  font-size: 1.1875rem; color: var(--c-muted);
}
.service-detail__label {
  margin-top: var(--s-6); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted);
}
.service-detail__list {
  margin-top: var(--s-4); padding-left: 0; list-style: none;
  display: grid; gap: var(--s-3);
}
.service-detail__list li {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3);
  align-items: start; font-size: 1rem;
}
.service-detail__tick { color: var(--c-accent); line-height: 0; padding-top: 3px; }
.service-detail__tick svg { width: 20px; height: 20px; }
/* The card must read as a card on BOTH grounds. It was white either way, so
   on white sections it disappeared and only the accent bar showed — which is
   the inconsistency the design review picked up. */
.service-detail__outcome {
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--c-accent);
  border-top: 1px solid var(--c-border-dec);
  border-right: 1px solid var(--c-border-dec);
  border-bottom: 1px solid var(--c-border-dec);
  background: var(--c-surface);
  font-size: 1rem; max-width: 52ch;
}
.section--surface .service-detail__outcome { background: var(--c-page); }
.service-detail__figure { min-width: 0; }
.service-detail__figure .card__figure {
  border: 1px solid var(--c-border-dec); border-radius: var(--radius);
  overflow: hidden; background: var(--c-surface);
  padding: var(--s-6);
}
.section--surface .service-detail__figure .card__figure { background: var(--c-page); }
/* Taller than the card crop and contained rather than cropped: at this size
   the artwork is the subject, not a banner, and a 16:9 sliver reads thin
   beside a full column of text. */
.service-detail__figure .card__figure img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: contain;
}

/* ---------- Reasons ---------- */
.reasons { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
@media (min-width: 768px) {
  .reasons { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-8); }
}
.reason h3 {
  font-size: var(--t-h4); font-weight: 600;
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border-dec);
}
.reason p { margin-top: var(--s-3); font-size: 1rem; color: var(--c-muted); }

/* ---------- Process ----------
   Numbered because the stages are a real sequence. Lists that are not
   sequences (e.g. .reasons) deliberately carry no numerals. */
.steps { display: grid; gap: var(--s-5); margin-top: var(--s-7); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(5, 1fr); gap: var(--s-4); } }
.step {
  counter-increment: step; position: relative;
  padding-top: var(--s-5); border-top: 2px solid var(--c-border-dec);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: calc(-1 * var(--s-5) - 4px); left: 0;
  font-family: var(--f-mono); font-weight: 500; font-size: var(--t-caption);
  color: var(--c-accent); background: var(--c-page); padding-right: var(--s-2);
}
.section--surface .step::before { background: var(--c-surface); }
.step h3 { font-size: 1.0625rem; font-weight: 600; }
.step p { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted); }

/* The deliverable each stage produces — the line an evaluator actually wants. */
.step__output {
  display: block; margin-top: var(--s-3);
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500;
  color: var(--c-ink);
}
/* Whole-step link: a real anchor, so it is reachable and announced. */
.step__link {
  display: block; text-decoration: none; color: inherit;
  margin: calc(-1 * var(--s-3)); padding: var(--s-3);
  border-radius: var(--radius-sm);
  transition: background-color .16s ease-out;
}
.step__link:hover { background: rgba(18, 24, 31, .04); }
.step__link:hover h3 { text-decoration: underline; text-decoration-color: var(--c-accent); }

/* ---------- Work record ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-accent-ink); background: var(--c-accent);
  border-radius: 3px; padding: 4px var(--s-3); margin-bottom: var(--s-4);
}
.record {
  margin-top: var(--s-7); padding: var(--s-5); background: var(--c-page);
  border: 1px solid var(--c-border-dec); border-radius: var(--radius);
}
.record--placeholder { border-style: dashed; border-color: var(--c-border-fn); }
.record dl { margin: 0; display: grid; gap: var(--s-3); }
.record__row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border-dec);
}
@media (min-width: 480px) {
  .record__row { grid-template-columns: 10ch 1fr; gap: var(--s-4); align-items: baseline; }
}
.record dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-muted);
}
.record dd { margin: 0; font-size: var(--t-small); }
.record__row--outcome { border-bottom: 0; padding-bottom: 0; }
.record__row--outcome dd {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 1.375rem; color: var(--c-ink);
}

/* ---------- Engagement models ---------- */
.models { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 768px) { .models { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.model {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-page);
  border: 1px solid var(--c-border-dec); border-radius: var(--radius);
}
.model__tag {
  font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted);
}
.model h3 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 1.375rem; margin-top: var(--s-2);
}
.model p { margin-top: var(--s-3); font-size: var(--t-small); color: var(--c-muted); }

/* ---------- Closing CTA ---------- */
.closing h2 {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.875rem, 3.6vw, 2.625rem); max-width: 20ch;
}
.closing p { margin-top: var(--s-4); max-width: 56ch; color: var(--c-muted); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-surface); border-top: 3px solid var(--c-navy);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--t-small); color: var(--c-muted);
}
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7); } }
.site-footer h2 {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-ink); margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.site-footer a { color: var(--c-blue); }
.site-footer a:hover { color: var(--c-ink); }

/* WCAG 2.2 SC 2.5.8 sets a 24x24 CSS px floor for pointer targets. These stacked
   footer links are ~20px of text, so they get padding to clear it outright
   rather than relying on the spacing exception. */
.site-footer li a,
.nav-mobile a { display: inline-flex; align-items: center; min-height: 24px; }
/* Scoped to the logo. As a bare `img` rule it also caught the certification
   badge and forced it to 40px tall, squashing the round seal into an oval. */
.footer__brand .brand img { height: 40px; width: auto; display: block; }
.footer__brand p { margin-top: var(--s-3); max-width: 34ch; }
.footer__bar {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-dec);
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  justify-content: space-between; font-size: var(--t-caption);
}
.footer__bar ul { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* ---------- Contact section ---------- */
.contact__inner { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) {
  .contact__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--s-8); }
}
.contact__main { min-width: 0; }
.contact__form { margin-top: var(--s-6); }
.contact__note {
  margin-top: var(--s-5); font-size: var(--t-small); color: var(--c-muted);
  max-width: 56ch;
}

.contact__aside {
  padding: var(--s-5); border: 1px solid var(--c-border-dec);
  border-top: 4px solid var(--c-accent); border-radius: var(--radius);
  background: var(--c-surface);
}
@media (min-width: 900px) { .contact__aside { position: sticky; top: 104px; } }
.contact__aside-title {
  font-family: var(--f-serif); font-weight: 600; font-size: 1.375rem;
}
.contact__details { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.contact__detail {
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-border-dec);
}
.contact__detail:last-child { border-bottom: 0; padding-bottom: 0; }
.contact__details dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-muted);
}
.contact__details dd { margin: var(--s-1) 0 0; font-size: 1rem; }
.contact__steps-title {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-dec);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-muted);
}
/* Numbered because these genuinely happen in order. */
.contact__steps {
  margin: var(--s-4) 0 0; padding-left: 0; list-style: none;
  counter-reset: cstep; display: grid; gap: var(--s-4);
}
.contact__steps li {
  counter-increment: cstep; position: relative;
  padding-left: 38px; font-size: var(--t-small);
}
.contact__steps li::before {
  content: counter(cstep, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--f-mono); font-weight: 500; font-size: var(--t-caption);
  color: var(--c-accent);
}

/* Fieldsets carry the grouping semantically, so the browser default border
   is removed rather than the grouping being faked with divs. */
.form__group { border: 0; margin: 0 0 var(--s-7); padding: 0; }
.form__group:last-of-type { margin-bottom: 0; }
.form__legend {
  padding: 0 0 var(--s-4);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-muted);
  border-bottom: 1px solid var(--c-border-dec);
  width: 100%; margin-bottom: var(--s-5);
}

/* ---------- Forms ----------
   Labels are visible and persistent, never placeholders. Borders use the
   functional token, which clears 1.4.11's 3:1 — the decorative grey would
   look tidier and fail. */
.form__row { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.form__row label { font-weight: 600; font-size: 1rem; }
.form__req { font-weight: 400; color: var(--c-muted); font-size: var(--t-small); }
.form__hint { font-size: var(--t-small); color: var(--c-muted); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%; max-width: 100%;
  min-height: 48px; padding: var(--s-3) var(--s-4);
  font-family: var(--f-sans); font-size: 1rem; color: var(--c-ink);
  background: var(--c-page);
  border: 2px solid var(--c-border-fn); border-radius: var(--radius-sm);
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 select { appearance: none; padding-right: var(--s-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
                    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: right 22px top 55%, right 16px top 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.wpcf7 :is(input, select, textarea):focus-visible {
  outline: 3px solid transparent; border-color: var(--c-navy);
  box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 6px var(--c-ink);
}

/* Error state: colour is never the only signal — the field also gets a
   thicker border and a text message beneath it. */
.wpcf7 .wpcf7-not-valid { border-color: var(--c-error); border-width: 3px; }
.wpcf7-not-valid-tip {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-2); font-size: var(--t-small); font-weight: 600;
  color: var(--c-error);
}
.wpcf7-not-valid-tip::before {
  content: "!"; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 2px;
  background: var(--c-error); color: #fff;
  border-radius: 50%; font-size: 12px; line-height: 1;
}

/* Consent: a real checkbox inside its label, at a size a finger can hit. */
.form__consent { margin-top: var(--s-6); }
.form__consent p { margin: 0; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-acceptance label {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3);
  align-items: start; cursor: pointer;
  font-size: var(--t-small); line-height: 1.55;
}
.wpcf7-acceptance input[type="checkbox"] {
  width: 24px; height: 24px; margin: 0; accent-color: var(--c-navy);
  cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"]:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 6px var(--c-ink);
  border-radius: 3px;
}
.wpcf7-acceptance .wpcf7-list-item-label { color: var(--c-muted); }
.wpcf7-acceptance a { color: var(--c-blue); }

/* Error summary: the first thing a keyboard user meets after a failed submit,
   because focus is moved here. Each entry links to the field it names. */
.form__errors {
  margin-bottom: var(--s-6); padding: var(--s-5);
  border: 3px solid var(--c-error); border-radius: var(--radius-sm);
  background: var(--c-page);
}
.form__errors:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 6px var(--c-ink);
}
.form__errors-title {
  font-family: var(--f-serif); font-size: 1.375rem; font-weight: 600;
  color: var(--c-error);
}
.form__errors-list { margin: var(--s-4) 0 0; padding-left: var(--s-5); }
.form__errors-list li + li { margin-top: var(--s-2); }
.form__errors-list a { color: var(--c-error); font-weight: 600; }

/* CF7 wraps its hidden inputs in a fieldset, which the browser gives a groove
   border — an empty box above the first field. */
.wpcf7 .hidden-fields-container { border: 0; margin: 0; padding: 0; }

/* CF7's own response banner. Only rendered once a submit has produced a
   result; otherwise it is an empty bordered box under the button. */
.wpcf7-response-output {
  display: none;
  margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5);
  border: 2px solid var(--c-border-fn); border-radius: var(--radius-sm);
  font-size: var(--t-small);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output { display: block; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--c-error); color: var(--c-error); font-weight: 600;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--c-success); color: var(--c-success); font-weight: 600;
}

.form__actions {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap; margin-top: var(--s-6);
}
.form__promise { font-size: var(--t-small); color: var(--c-muted); }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 var(--s-2); }

/* The honeypot: out of sight, out of the tab order, out of the a11y tree. */
.form__honey {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Editor placeholder marker ---------- */
.tbd {
  font-family: var(--f-mono); font-size: var(--t-small); color: var(--c-muted);
  border-bottom: 1px dashed var(--c-border-fn); padding-bottom: 1px;
}

/* ---------- Page / post content ---------- */
.entry { padding-block: var(--s-8); }
@media (min-width: 1024px) { .entry { padding-block: var(--s-9); } }
.entry__title { font-family: var(--f-serif); font-weight: 800; font-size: var(--t-h1); letter-spacing: -.025em; }
.entry__content { max-width: var(--w-measure); margin-top: var(--s-5); }

/* Long-form pages run the text to the full container width, so the column
   aligns with the logo on the left and the header button on the right. The
   reading-measure cap is lifted for these pages by request — lines are long,
   which is the trade for that alignment. */
.entry--prose .entry__content,
.entry--prose .entry__content .lede { max-width: none; }
.entry__content > * + * { margin-top: var(--s-5); }
.entry__content h2 { font-family: var(--f-serif); font-size: var(--t-h2); margin-top: var(--s-7); }
.entry__content h3 { font-size: var(--t-h3); margin-top: var(--s-6); }
.entry__content ul, .entry__content ol { padding-left: var(--s-5); }
.entry__content li + li { margin-top: var(--s-2); }
.entry__content .lede { font-size: 1.25rem; color: var(--c-muted); max-width: 56ch; }
.entry__content code {
  font-family: var(--f-mono); font-size: 0.9em;
  background: var(--c-surface); border: 1px solid var(--c-border-dec);
  border-radius: 3px; padding: 1px 5px;
}

/* A wide table scrolls inside its own container so the page never scrolls
   sideways. The container — not the table — carries the overflow: setting
   display:block on a <table> strips its semantics from the accessibility tree.
   The wrapper is focusable and labelled, because a region a mouse can scroll
   must also be reachable by keyboard (SC 2.1.1). */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 6px var(--c-ink);
}
.entry__content table {
  width: 100%; border-collapse: collapse; font-size: var(--t-small);
}
.entry__content caption {
  text-align: left; font-weight: 600; color: var(--c-muted);
  font-size: var(--t-caption); padding-bottom: var(--s-3);
}
.entry__content th, .entry__content td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border-dec); vertical-align: top;
}
.entry__content thead th {
  font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-muted); border-bottom: 2px solid var(--c-border-fn);
  white-space: nowrap;
}
.entry__content tbody th { font-weight: 600; }
.entry__content tbody tr:nth-child(odd) { background: var(--c-surface); }


/* ---------- Link exceptions ----------
   Whole-element links (cards, brand, nav) get their affordance from shape and
   position, so the body-copy underline would only add noise. */
.brand, .card, .standard__link, .nav-mobile a, .skip-link { text-decoration: none; }
.card:hover .card__go { text-decoration: underline; text-decoration-color: var(--c-accent); }
.card__go, .standard__go { color: var(--c-ink); }
.site-footer a { color: var(--c-ink); }
.site-footer a:hover { color: var(--c-ink); text-decoration-color: var(--c-accent); }


/* ---------- Certification (CAMSC) ----------
   Three shapes from one template: a band under the homepage hero, the full
   record on the Compliance page, and a compact link in the contact aside and
   footer. The badge is a raster seal (the council supplies it that way), so it
   is sized from a 280px source and never scaled past 120px. */
.certification__badge { display: block; flex: none; height: auto; }

/* Band */
.certification--band { padding-block: var(--s-6); }
.certification__band {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4) var(--s-5); align-items: center;
}
.certification--band .certification__badge { width: 80px; }
.certification--band .eyebrow { margin-bottom: var(--s-2); }
.certification__title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.25; max-width: 36ch;
}
.certification__meta { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted); }
.certification__links {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}
/* WCAG 2.2 SC 2.5.8: keep each text link at least 24px tall. */
.certification__links a { display: inline-flex; align-items: center; min-height: 24px; }
@media (min-width: 768px) {
  .certification__band { gap: var(--s-4) var(--s-6); }
  .certification--band .certification__badge { width: 120px; }
}
@media (min-width: 1024px) {
  .certification__band { grid-template-columns: auto minmax(0, 1fr) auto; }
  .certification__links { grid-column: auto; flex-direction: column; }
}

/* Panel */
.certification__panel { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) {
  .certification__panel {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--s-8);
  }
}
.certification__main { min-width: 0; }
.certification__lockup {
  display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6);
}
.certification__lockup .certification__badge { width: 96px; }
.certification__status {
  font-family: var(--f-serif); font-weight: 700; font-size: 1.375rem; line-height: 1.25;
}
.certification__facts {
  margin: var(--s-5) 0 0; display: grid;
  border-top: 1px solid var(--c-border-dec);
}
@media (min-width: 560px) {
  .certification__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
}
.certification__facts > div { padding-block: var(--s-3); border-bottom: 1px solid var(--c-border-dec); }
.certification__facts dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-muted);
}
.certification__facts dd { margin: var(--s-1) 0 0; }
.btn__meta { font-weight: 400; }
/* Long enough to wrap on a phone, and .btn has no vertical padding. */
.certification__main .btn { padding-block: var(--s-2); text-align: center; }
.certification__note {
  margin-top: var(--s-5); font-size: var(--t-small); color: var(--c-muted); max-width: 60ch;
}
/* A definite width, not margin-inline:auto. Auto margins make a grid item
   shrink to its content, the image's 100% then resolves against that, and the
   link collapses to its borders until the lazy image loads, then jumps. */
.certification__preview {
  display: block; width: 100%; max-width: 340px; justify-self: center;
  background: #fff; border: 1px solid var(--c-border-dec); border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(18,24,31,.06), 0 10px 28px rgba(18,24,31,.10);
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.certification__preview img { display: block; width: 100%; height: auto; }
.certification__preview:hover {
  box-shadow: 0 1px 2px rgba(18,24,31,.08), 0 14px 36px rgba(18,24,31,.16);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .certification__preview { transition: none; }
  .certification__preview:hover { transform: none; }
}

/* Compact: a whole-element link, so the underline sits on the name only. */
.certification--compact {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: var(--c-ink);
}
.certification--compact .certification__badge { width: 56px; }
.certification__text { display: grid; gap: 2px; }
.certification__name {
  font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.certification--compact:hover .certification__name {
  text-decoration-color: var(--c-accent); text-decoration-thickness: 2px;
}
.certification__sub { font-size: var(--t-caption); color: var(--c-muted); }
.footer__brand .certification--compact { margin-top: var(--s-5); }
.site-footer .certification--compact,
.site-footer .certification--compact:hover { text-decoration: none; }
.contact__cert {
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-dec);
}