/* ==========================================================================
   components.css — Reusable interface components.
   Order: actions · links · header · navigation · footer · editorial ·
          media · forms · cards · bands
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-900);
  --btn-ink: var(--ivory-50);
  --btn-border: var(--navy-900);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 3rem;             /* comfortable touch target */
  padding: 0.85rem 1.6rem;
  background-color: var(--btn-bg);
  color: var(--btn-ink);
  border: var(--hairline) solid var(--btn-border);
  border-radius: var(--radius-1);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

/* A gold hairline wipes across the button on hover — emphasis, not decoration. */
.btn::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--rule-accent);
  background-color: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover::after,
.btn:focus-visible::after { transform: scaleX(1); }

.btn--primary:hover { --btn-bg: var(--navy-800); --btn-border: var(--navy-800); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-ink: var(--ink-strong);
  --btn-border: var(--rule-strong);
}

.btn--secondary:hover { --btn-border: var(--accent-rule); --btn-ink: var(--ink-strong); }

/* On navy surfaces the primary button inverts to ivory. */
.theme-dark .btn--primary { --btn-bg: var(--ivory-50); --btn-ink: var(--navy-950); --btn-border: var(--ivory-50); }
.theme-dark .btn--primary:hover { --btn-bg: var(--white); --btn-border: var(--white); }
.theme-dark .btn--secondary { --btn-ink: var(--ivory-50); --btn-border: rgb(245 242 234 / 0.4); }
.theme-dark .btn--secondary:hover { --btn-border: var(--gold-400); }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   2. Text links — a gold underline draws in from the left.
   -------------------------------------------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  position: relative;
  color: var(--ink-strong);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  padding-block-end: 0.3rem;
}

.link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--hairline);
  background-color: var(--rule-strong);
  transform-origin: left;
  transition: background-color var(--duration-base) var(--ease-out);
}

.link::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--rule-accent);
  background-color: var(--accent-rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.link:hover::before,
.link:focus-visible::before { transform: scaleX(1); }

.link .link__arrow {
  transition: transform var(--duration-base) var(--ease-out);
  flex: none;
}

.link:hover .link__arrow { transform: translateX(0.25rem); }

/* --------------------------------------------------------------------------
   3. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: var(--header-height);
  display: flex;
  align-items: center;
  /* Transparent over the hero; the background fades in on scroll. The
     element height never changes, so there is no layout shift. */
  background-color: transparent;
  border-block-end: var(--hairline) solid transparent;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    block-size var(--duration-base) var(--ease-out);
}

.site-header[data-scrolled="true"] {
  block-size: var(--header-height-compact);
  background-color: var(--navy-950);
  border-block-end-color: rgb(245 242 234 / 0.12);
}

/* Pages without a dark hero start in the solid state. */
.site-header[data-variant="solid"] {
  background-color: var(--navy-950);
  border-block-end-color: rgb(245 242 234 / 0.12);
}

.site-header__inner {
  inline-size: min(100% - (var(--gutter) * 2), var(--container-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.site-logo { display: inline-flex; align-items: center; flex: none; }

.site-logo img {
  block-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem);
  inline-size: auto;
  /* 4.057:1 — reserved so the header never reflows while the logo loads. */
  aspect-ratio: 2000 / 493;
}

/* ---- Primary navigation (desktop) ---- */
.primary-nav { display: none; }

@media (min-width: 64em) {
  .primary-nav { display: block; }
  .primary-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.2rem + 1.4vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

.primary-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--ivory-100);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--rule-accent);
  background-color: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.primary-nav__link:hover { color: var(--white); }
.primary-nav__link:hover::after { transform: scaleX(1); }

/* The current page is marked by a persistent gold rule *and* by weight and
   colour, so the state is never communicated by colour alone. */
.primary-nav__link[aria-current="page"] { color: var(--white); font-weight: 600; }
.primary-nav__link[aria-current="page"]::after { transform: scaleX(1); }

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

.site-header .btn--header {
  display: none;
  min-block-size: 2.75rem;
  padding: 0.6rem 1.35rem;
  font-size: var(--step--1);
  --btn-bg: transparent;
  --btn-ink: var(--ivory-50);
  --btn-border: rgb(245 242 234 / 0.4);
}

.site-header .btn--header:hover { --btn-bg: var(--gold-600); --btn-border: var(--gold-600); --btn-ink: var(--white); }

@media (min-width: 64em) { .site-header .btn--header { display: inline-flex; } }

/* ---- Menu toggle ---- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding-inline: var(--space-2xs);
  color: var(--ivory-50);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 64em) { .menu-toggle { display: none; } }

.menu-toggle__bars {
  position: relative;
  inline-size: 1.5rem;
  block-size: 0.75rem;
  flex: none;
}

.menu-toggle__bars span {
  position: absolute;
  inset-inline: 0;
  block-size: var(--rule-accent);
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.menu-toggle__bars span:first-child { inset-block-start: 0; }
.menu-toggle__bars span:last-child  { inset-block-end: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(0.365rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child  { transform: translateY(-0.365rem) rotate(-45deg); }

/* --------------------------------------------------------------------------
   4. Mobile menu — a composed navy panel, not a generic drawer.
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: var(--header-height) 1fr auto;
  background-color: var(--navy-950);
  color: var(--ivory-50);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility 0s linear var(--duration-base);
}

.mobile-menu[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s;
}

.mobile-menu__body {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--space-l);
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

.mobile-menu__item { border-block-start: var(--hairline) solid rgb(245 242 234 / 0.14); }
.mobile-menu__item:last-child { border-block-end: var(--hairline) solid rgb(245 242 234 / 0.14); }

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  padding-block: clamp(0.9rem, 0.5rem + 1.6vw, 1.4rem);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--ivory-50);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              padding-inline-start var(--duration-base) var(--ease-out);
}

.mobile-menu__link:hover { padding-inline-start: var(--space-xs); color: var(--white); }

.mobile-menu__index {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--gold-400);
  flex: none;
}

.mobile-menu__link[aria-current="page"] { color: var(--champagne); }
.mobile-menu__link[aria-current="page"] .mobile-menu__index::after {
  content: " ·";
}

.mobile-menu__foot {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-xl);
  display: grid;
  gap: var(--space-m);
  border-block-start: var(--hairline) solid rgb(245 242 234 / 0.14);
}

.mobile-menu__contact { display: grid; gap: var(--space-3xs); font-size: var(--step--1); color: #AFBACA; }
.mobile-menu__contact a { color: var(--ivory-50); text-decoration: none; }
.mobile-menu__contact a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* --------------------------------------------------------------------------
   5. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs { font-size: var(--step--2); letter-spacing: var(--tracking-wide); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2xs); color: var(--ink-subtle); }
.breadcrumbs li + li::before { content: "/"; color: var(--accent); }
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 0.25em; }
.breadcrumbs [aria-current="page"] { color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   6. Section introduction — numeral, label, heading, standfirst
   -------------------------------------------------------------------------- */
.section-intro { display: grid; gap: var(--space-m); }

.section-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.section-intro__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  block-size: var(--hairline);
  background-color: var(--rule);
  max-inline-size: 8rem;
}

.section-intro__title { font-size: var(--step-5); max-inline-size: 18ch; }
.section-intro__standfirst { font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); max-inline-size: 52ch; }

/* --------------------------------------------------------------------------
   7. Pull quote
   -------------------------------------------------------------------------- */
.pull-quote {
  position: relative;
  padding: var(--space-xl) 0 var(--space-xl) var(--space-l);
  max-inline-size: 34ch;
  margin: 0;
}

.pull-quote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--frame-reach);
  block-size: var(--frame-reach);
  border-block-start: var(--frame-stroke) solid var(--accent-rule);
  border-inline-start: var(--frame-stroke) solid var(--accent-rule);
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.22;
  color: var(--ink-strong);
}

.pull-quote footer { margin-block-start: var(--space-m); }

/* --------------------------------------------------------------------------
   8. Media — framed imagery with a mask reveal
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-sunken);
  border-radius: var(--radius-1);
}

/* The frame sets the aspect ratio; the image fills it absolutely so a
   `<picture>` wrapper cannot leave a gap or overshoot. */
.media picture,
.media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.media img { object-fit: cover; }

.media--landscape { aspect-ratio: 3 / 2; }

/* Image reveal: the frame grows from the edge rather than fading in. */
.js .media[data-reveal-media] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path var(--duration-reveal) var(--ease-editorial),
              transform 1200ms var(--ease-editorial);
}

.js .media[data-reveal-media].is-revealed img {
  clip-path: inset(0 0 0 0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .media[data-reveal-media] img { clip-path: none; transform: none; }
}

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

.form__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--space-3xs); }
.field--full { grid-column: 1 / -1; }

.field__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.field__required { color: var(--accent); }

/* Fields are ruled, not boxed. A single hairline carries the input; the rule
   thickens to gold on focus and the label lifts with it, so the active field
   is unmistakable without drawing a rectangle around it. */
.field__control {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.65rem 0 0.55rem;
  background-color: transparent;
  color: var(--ink-strong);
  border: 0;
  border-block-end: var(--hairline) solid var(--rule-strong);
  border-radius: 0;
  font-size: var(--step-0);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.field__control::placeholder { color: var(--ink-subtle); opacity: 1; }

textarea.field__control {
  appearance: none;
  min-block-size: 7.5rem;
  resize: vertical;
  line-height: 1.65;
  padding-block-start: 0.4rem;
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239E7720' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 0.7rem;
  padding-inline-end: 1.75rem;
  cursor: pointer;
}

.field__control:hover { border-block-end-color: var(--ink-subtle); }

/* The focus indicator is the gold rule plus a faint warm wash — visible at a
   glance, and never a box. */
.field__control:focus-visible {
  outline: none;
  border-block-end-color: var(--accent-rule);
  box-shadow: 0 2px 0 -1px var(--accent-rule);
  background-color: rgb(158 119 32 / 0.045);
}

.field:focus-within .field__label { color: var(--accent); }

.field__control[aria-invalid="true"] { border-block-end-color: #A42A1E; }
.field__control[aria-invalid="true"]:focus-visible {
  box-shadow: 0 2px 0 -1px #A42A1E;
  background-color: rgb(164 42 30 / 0.045);
}

.field__hint { font-size: var(--step--2); color: var(--ink-subtle); }

/* Errors are announced, prefixed with an icon and never colour-only. */
.field__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-3xs);
  font-size: var(--step--2);
  font-weight: 500;
  color: #8E2318;
}

.field__error[data-visible="true"] { display: flex; }
.field__error svg { flex: none; margin-block-start: 0.15em; }

/* Consent: a square mark in keeping with the logo geometry, drawn with
   borders rather than a filled control. */
.field--consent {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: start;
  margin-block-start: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--rule);
}

.field--consent input[type="checkbox"] {
  appearance: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0.25rem 0 0;
  background-color: transparent;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.field--consent input[type="checkbox"]::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.35rem;
  border-inline-start: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.field--consent input[type="checkbox"]:hover { border-color: var(--ink-subtle); }
.field--consent input[type="checkbox"]:checked { border-color: var(--accent-rule); }
.field--consent input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.field--consent input[type="checkbox"][aria-invalid="true"] { border-color: #A42A1E; }

.field--consent .field__error { grid-column: 2; }
.field--consent label { font-size: var(--step--1); color: var(--ink-muted); line-height: 1.55; }

/* Honeypot: hidden from sight and from assistive technology. */
.form__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__status {
  display: none;
  gap: var(--space-s);
  padding: var(--space-m);
  border-inline-start: var(--rule-accent) solid var(--accent-rule);
  background-color: var(--surface-sunken);
  font-size: var(--step--1);
  line-height: 1.6;
}

.form__status[data-state="success"],
.form__status[data-state="error"],
.form__status[data-state="info"] { display: grid; }

.form__status[data-state="error"] { border-inline-start-color: #A42A1E; }
.form__status[data-state="success"] { border-inline-start-color: var(--gold-500); }
.form__status strong { display: block; color: var(--ink-strong); font-size: var(--step-0); margin-block-end: var(--space-3xs); }

.btn[data-loading="true"] { pointer-events: none; }
.btn__spinner { display: none; inline-size: 1rem; block-size: 1rem; flex: none; }
.btn[data-loading="true"] .btn__spinner { display: block; animation: spin 900ms linear infinite; }
.btn[data-loading="true"] .btn__label { opacity: 0.7; }

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   10. Call-to-action band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  /* Tighter than a content section: this band is a sign-off, not a chapter. */
  padding-block: var(--section-space-tight);
}

.cta-band__inner {
  display: grid;
  gap: var(--grid-gap);
  align-items: end;
}

@media (min-width: 64em) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, auto); align-items: end; }
}

.cta-band__title { font-size: var(--step-4); max-inline-size: 24ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* A quiet Tembeka Frame anchored to the band's trailing corner. */
.cta-band::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: clamp(3.5rem, 7vw, 7rem);
  block-size: clamp(3.5rem, 7vw, 7rem);
  border-block-end: var(--frame-stroke) solid var(--accent-rule);
  border-inline-end: var(--frame-stroke) solid var(--accent-rule);
  opacity: 0.5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--navy-950);
  color: var(--ivory-100);
  padding-block: var(--space-2xl) var(--space-l);
}

.site-footer__top {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

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

.site-footer__brand img { block-size: clamp(2.1rem, 1.8rem + 1.2vw, 2.75rem); inline-size: auto; aspect-ratio: 2000 / 493; }
.site-footer__positioning { margin-block-start: var(--space-m); max-inline-size: 34ch; color: #AFBACA; font-size: var(--step--1); line-height: 1.65; }

.footer-nav__title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-block-end: var(--space-s);
}

.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer-nav a { color: #C9D2DE; font-size: var(--step--1); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.footer-nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.25em; }

.site-footer address { font-style: normal; color: #C9D2DE; font-size: var(--step--1); line-height: 1.7; display: grid; gap: var(--space-2xs); }
.site-footer address a { color: #C9D2DE; text-decoration: none; }
.site-footer address a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.25em; }

.site-footer__bottom {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid rgb(245 242 234 / 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--2);
  color: #8494A8;
}

.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); align-items: center; }
.site-footer__legal a { color: #AFBACA; text-decoration: none; }
.site-footer__legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.25em; }

/* Spike Technologies credit — discreet, but plainly readable and linked. */
.credit { display: inline-flex; align-items: center; gap: var(--space-2xs); color: #AFBACA; }

.credit__name {
  display: inline-block;
  min-block-size: 1.5rem;
  padding-block-end: 1px;
  color: var(--ivory-100);
  font-weight: 600;
  text-decoration: none;
  border-block-end: var(--hairline) solid rgb(200 167 91 / 0.5);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.credit__name:hover { color: var(--white); border-block-end-color: var(--gold-400); }

/* --------------------------------------------------------------------------
   12. Mobile menu bar + no-script navigation (appended after the menu block
   they belong to so the cascade order stays predictable).
   -------------------------------------------------------------------------- */
.mobile-menu__bar {
  display: flex;
  align-items: center;
  border-block-end: var(--hairline) solid rgb(245 242 234 / 0.14);
}

.mobile-menu__bar .site-header__inner { block-size: 100%; }
.mobile-menu__bar .site-logo img { block-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem); inline-size: auto; }

.noscript-nav {
  position: relative;
  z-index: calc(var(--z-header) - 1);
  padding-block: var(--space-s);
  padding-block-start: calc(var(--header-height) + var(--space-s));
  background-color: var(--navy-950);
  border-block-end: var(--hairline) solid rgb(245 242 234 / 0.14);
}

.noscript-nav ul {
  inline-size: min(100% - (var(--gutter) * 2), var(--container-wide));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  list-style: none;
  padding: 0;
}

.noscript-nav a { color: var(--ivory-100); font-size: var(--step--1); font-weight: 500; text-decoration: none; }
.noscript-nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.25em; }

@media (min-width: 64em) { .noscript-nav { display: none; } }

/* The no-script bar occupies real space, so the hero must start below it. */
.noscript-nav ~ main .hero,
.noscript-nav ~ main .page-header { padding-block-start: clamp(3rem, 2rem + 6vw, 7rem); }

.credit__name { font-weight: 600; color: var(--ivory-100); }

/* ==========================================================================
   13. Surface treatment
   Large navy fields are given a fine grain and a soft directional wash so
   they read as a printed or photographed surface rather than flat colour.
   ========================================================================== */
.theme-dark,
.site-footer,
.hero,
.page-header,
.error-page { position: relative; }

.theme-dark::before,
.site-footer::before,
.hero::after,
.page-header::before,
.error-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

.theme-dark > *,
.site-footer > *,
.page-header > *,
.error-page > * { position: relative; z-index: 1; }

/* ==========================================================================
   14. Cards
   Used where discrete, comparable items genuinely help the reader: credential
   tiles, engagement models, differentiators and sector summaries.
   Square-cornered and hairline-bordered, in keeping with the logo geometry.
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  background-color: var(--surface-raised);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-1);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

/* The gold rule across the head of a card is the one consistent accent. */
.card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  inline-size: 3rem;
  block-size: var(--rule-accent);
  background-color: var(--accent-rule);
  transition: inline-size var(--duration-slow) var(--ease-editorial);
}

.card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-card); }
.card:hover::before { inline-size: 6rem; }

/* A card that is itself a link lifts very slightly on hover. */
.card--link { text-decoration: none; color: inherit; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

.theme-dark .card {
  background-color: rgb(245 242 234 / 0.035);
  border-color: rgb(245 242 234 / 0.14);
}

.theme-dark .card:hover {
  background-color: rgb(245 242 234 / 0.06);
  border-color: rgb(245 242 234 / 0.26);
  box-shadow: none;
}

.card__index {
  font-size: var(--step--2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  line-height: 1.18;
  color: var(--ink-strong);
}

.card__body { font-size: var(--step--1); line-height: 1.68; color: var(--ink-muted); }

.card__meta {
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  border-block-start: var(--hairline) solid var(--rule);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.theme-dark .card__meta { border-block-start-color: rgb(245 242 234 / 0.16); }

.card-grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 48em)  { .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em)  { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40em)  { .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em)  { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   15. Credential strip
   A compact band of verified facts. Tabular figures and hairline dividers,
   closer to a prospectus than to a marketing statistic row.
   ========================================================================== */
.credential-strip {
  display: grid;
  gap: 0;
  border-block-start: var(--hairline) solid rgb(245 242 234 / 0.18);
}

@media (min-width: 40em) { .credential-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .credential-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.credential-strip__item {
  padding-block: var(--space-m);
  padding-inline-end: var(--space-m);
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  border-block-end: var(--hairline) solid rgb(245 242 234 / 0.12);
}

@media (min-width: 64em) {
  .credential-strip__item { border-block-end: 0; padding-inline: var(--space-l); }
  .credential-strip__item:first-child { padding-inline-start: 0; }
  .credential-strip__item + .credential-strip__item { border-inline-start: var(--hairline) solid rgb(245 242 234 / 0.18); }
}

.credential-strip__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--white);
}

.credential-strip__label {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #8FA0B6;
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   16. Target size
   WCAG 2.2 AA (2.5.8) asks for a 24x24 CSS-pixel minimum. Footer and inline
   utility links are padded to clear it without disturbing the type rhythm.
   -------------------------------------------------------------------------- */
.footer-nav a,
.site-footer address a,
.site-footer__legal a,
.mobile-menu__contact a {
  display: inline-block;
  min-block-size: 1.5rem;
  padding-block: 0.15rem;
}

.breadcrumbs a { display: inline-block; min-block-size: 1.5rem; padding-block: 0.1rem; }