/* ==========================================================================
   Novigen Biotech — foundation, layout and components
   Requires tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: var(--border); margin: var(--s-6) 0; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------- typography -- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.t-display { font-size: var(--t-display); line-height: var(--lh-tight); font-weight: 600; }
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }
.t-h3 { font-size: var(--t-h3); }
.t-h4 { font-size: var(--t-h4); }

.t-lead {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-80);
  max-width: var(--measure-serif);
  text-wrap: pretty;
}

.t-small  { font-size: var(--t-small); }
.t-muted  { color: var(--c-ink-60); }
.on-dark .t-muted, .site-footer .t-muted { color: var(--c-ink-inverse-70); }
.t-mono   { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.t-serif  { font-family: var(--font-serif); }
.t-center { text-align: center; }
.t-nowrap { white-space: nowrap; }
.t-measure { max-width: var(--measure); }

.t-micro {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-ink-60);
}

a {
  color: var(--c-emerald);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--c-teal); }
.on-dark a:not(.btn) { color: var(--c-amber); }
.on-dark a:not(.btn):hover { color: var(--c-white); }
.on-dark .btn { color: var(--btn-fg); }

/* --------------------------------------------------------- accessibility */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: var(--z-toast);
  background: var(--c-amber);
  color: var(--c-navy);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--r-2) var(--r-2);
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------- layout */

.container {
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
}
.container--narrow { width: min(100% - (var(--gutter) * 2), var(--container-narrow)); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--sand { background: var(--c-sand); }
.section--sand-deep { background: var(--c-sand-dark); }

/* The homepage alternates white → grey → tint so no two neighbouring bands share a
   ground. `--c-ground-tint` is a light wash of the accent, not an inverted band:
   text colours are unchanged and every token still resolves against a light surface. */
.section--tint { background: var(--c-ground-tint); }

.section--dark {
  background: var(--c-teal);
  color: var(--c-ink-inverse);
}
.section--navy { background: var(--c-navy); color: var(--c-ink-inverse); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--c-white); }

.section__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  max-width: var(--measure);
}
.section__head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
@media (max-width: 767px) {
  .section__head--split { grid-template-columns: 1fr; align-items: start; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.stack-sm > * + * { margin-top: var(--s-2); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: start;
}
.layout-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: start;
}
.layout-editorial--rail-first { grid-template-columns: 15rem minmax(0, 1fr); }

/* No contents rail: the content takes the full boxed width and starts on the container's left
   edge, so a standard page lines up with its own page-hero and with the listing pages. It was
   centred at first, which indented every paragraph relative to the hero above it and read as a
   sidebar that wasn't there.

   Only running text keeps a measure, and it is capped rather than centred — a grid, a table or
   a media row inside the page uses the whole column. Headings are left to span: `ch` is
   relative to the element's own font size, so capping a 40px h2 at 68ch would do nothing. */
.layout-reading { max-width: none; }
.layout-reading .prose { max-width: none; }
.layout-reading .prose > :where(p, ul, ol, blockquote) { max-width: var(--measure); }

@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-editorial,
  .layout-editorial--rail-first { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- eyebrow -- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-ink-60);
}
.eyebrow__index {
  color: var(--c-accent-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1px;
  background: var(--c-line-strong);
}
.eyebrow--plain::after { display: none; }
.on-dark .eyebrow, .section--dark .eyebrow, .section--navy .eyebrow { color: var(--c-ink-inverse-70); }

/* --------------------------------------------------------------- rules -- */

.rule { height: 1px; background: var(--c-line); border: 0; }
.rule--strong { background: var(--c-line-strong); }
.rule--ticks {
  height: 8px;
  background: var(--pattern-ticks);
  color: var(--c-line-strong);
  background-size: 16px 8px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}
.rule--amber { height: 3px; background: var(--c-amber); width: 3rem; }

/* ------------------------------------------------------------- buttons -- */

.btn {
  --btn-bg: var(--c-emerald);
  --btn-fg: var(--c-white);
  --btn-border: var(--c-emerald);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-1);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { --btn-bg: var(--c-emerald-700); --btn-border: var(--c-emerald-700); color: var(--c-white); }
.btn:active { transform: translateY(1px); }
.btn .icon { flex: 0 0 auto; }

.btn--amber   { --btn-bg: var(--c-amber); --btn-fg: var(--c-navy); --btn-border: var(--c-amber); }
.btn--amber:hover { --btn-bg: #D4901F; --btn-border: #D4901F; color: var(--c-navy); }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--c-teal); --btn-border: var(--c-line-strong); }
.btn--secondary:hover { --btn-bg: var(--c-teal); --btn-fg: var(--c-white); --btn-border: var(--c-teal); color: var(--c-white); }

.btn--dark { --btn-bg: var(--c-teal); --btn-fg: var(--c-white); --btn-border: var(--c-teal); }
.btn--dark:hover { --btn-bg: var(--c-navy); --btn-border: var(--c-navy); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--c-emerald); --btn-border: transparent;
  padding-inline: 0; min-height: 40px;
  text-decoration: underline; text-underline-offset: 0.25em;
}
.btn--ghost:hover { --btn-fg: var(--c-teal); color: var(--c-teal); background: none; }

.on-dark .btn--secondary,
.section--dark .btn--secondary,
.section--navy .btn--secondary { --btn-fg: var(--c-white); --btn-border: rgba(255,255,255,0.42); }
.on-dark .btn--secondary:hover,
.section--dark .btn--secondary:hover { --btn-bg: var(--c-white); --btn-fg: var(--c-teal); color: var(--c-teal); }

.btn--sm { min-height: 38px; padding-inline: var(--s-4); font-size: var(--t-micro); }
.btn--lg { min-height: 56px; padding-inline: var(--s-6); font-size: var(--t-body); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Text link with a moving arrow — the site's standard "go deeper" affordance. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--c-emerald);
}
.link-arrow::after {
  content: "";
  width: 1.35rem; height: 1px;
  background: currentColor;
  transition: width var(--dur) var(--ease-out);
}
.link-arrow:hover::after { width: 2.25rem; }
.on-dark .link-arrow { color: var(--c-amber); }

/* --------------------------------------------------------------- cards -- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--r-2);
  padding: var(--s-5);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card:hover { border-color: var(--c-teal); }
.card--flat { background: transparent; }
.card--sand { background: var(--c-sand); border-color: transparent; }
.card--dark { background: var(--c-teal); color: var(--c-ink-inverse); border-color: transparent; }
.card--pad-0 { padding: 0; }

.card__media { margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5); overflow: hidden; }
.card--pad-0 .card__media { margin: 0; }
.card__media img { transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.03); }

.card__body { padding: var(--s-5); }
.card--pad-0 > .card__body { padding: var(--s-5); }

.card__title { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__text { color: var(--c-ink-60); font-size: var(--t-small); }
.card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-size: var(--t-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--c-ink-60); font-weight: 600;
}
.card__foot { margin-top: auto; padding-top: var(--s-5); }

.card__index {
  position: absolute; top: var(--s-4); right: var(--s-5);
  font-size: var(--t-micro); font-weight: 700;
  color: var(--c-accent-text); font-variant-numeric: tabular-nums;
}

.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-1);
  color: var(--c-teal);
  margin-bottom: var(--s-4);
}
.card--dark .card__icon { color: var(--c-amber); border-color: var(--c-line-dark); }

/* --------------------------------------------------------------- media -- */

.media {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  background: var(--c-sand-dark);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.media-placeholder {
  display: grid;
  place-content: center;
  gap: var(--s-2);
  background: var(--c-teal-050);
  color: var(--c-teal);
  text-align: center;
  padding: var(--s-4);
}
.media-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--pattern-lattice);
  color: var(--c-teal);
  opacity: 0.12;
}
.media-placeholder.pattern-1::before { background-image: var(--pattern-grid); }
.media-placeholder.pattern-2::before { background-image: var(--pattern-ticks); background-size: 16px 100%; }
.media-placeholder.pattern-3::before { background-image: var(--pattern-lattice); transform: rotate(90deg); }
.media-placeholder__mark { position: relative; justify-self: center; opacity: 0.7; }
.media-placeholder__label {
  position: relative;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 600;
  max-width: 20ch;
}

.media-figure { margin: var(--s-6) 0; }
.media-figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-ink-60);
  border-left: 2px solid var(--c-line-strong);
  padding-left: var(--s-3);
}
.media-credit { color: var(--c-ink-60); }

.ratio-1-1  { --ratio: 1 / 1; }
.ratio-4-3  { --ratio: 4 / 3; }
.ratio-3-2  { --ratio: 3 / 2; }
.ratio-16-9 { --ratio: 16 / 9; }
.ratio-21-9 { --ratio: 21 / 9; }

/* --------------------------------------------------------------- stats -- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0; }
.stat {
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-top: 1px solid var(--c-line-strong);
  margin-right: var(--s-5);
}
.stat__value {
  display: block;
  font-size: var(--t-stat);
  line-height: 1;
  font-weight: 600;
  color: var(--c-accent-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
.stat__label {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-ink);
}
.stat__note { display: block; margin-top: var(--s-1); font-size: var(--t-micro); color: var(--c-ink-60); }

/* --------------------------------------------------------------- badge -- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.25rem var(--s-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-1);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-ink-60);
  background: var(--c-white);
}
.badge--amber   { border-color: var(--c-amber); color: var(--c-accent-text); background: var(--c-amber-100); }
.badge--emerald { border-color: var(--c-emerald); color: var(--c-emerald-700); background: var(--c-emerald-100); }
.badge--teal    { border-color: transparent; color: var(--c-white); background: var(--c-teal); }
.badge--muted   { background: var(--c-sand); }

/* ------------------------------------------------------------- pills ---- */

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--s-4);
  border: var(--border);
  border-radius: var(--r-1);
  background: var(--c-white);
  color: var(--c-ink-80);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pill:hover { border-color: var(--c-teal); color: var(--c-teal); }
.pill[aria-current="true"], .pill--active {
  background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white);
}
.pill__count { margin-left: var(--s-2); color: var(--c-ink-60); font-variant-numeric: tabular-nums; }
.pill[aria-current="true"] .pill__count { color: rgba(255,255,255,0.65); }

/* --------------------------------------------------------------- forms -- */

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field__label { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); }
.field__label .req { color: var(--c-danger); margin-left: 2px; }
.field__hint { font-size: var(--t-micro); color: var(--c-ink-60); text-transform: none; letter-spacing: 0; }
.field__error { font-size: var(--t-small); color: var(--c-danger); font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-1);
  color: var(--c-ink);
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-normal); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-40); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-emerald);
  box-shadow: 0 0 0 2px var(--c-emerald-100);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-60); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--c-danger);
}

.select {
  appearance: none;
  padding-right: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 8.5 12 15.5 19 8.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 559px) { .field-row { grid-template-columns: 1fr; } }

/* A group of related fields. The reset is the point: a bare `fieldset` draws a border and
   notches its legend into it, which belongs to no part of this design language — but the
   element still earns its place, because the legend names the group for a screen reader. */
.form-block {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-7);
  min-width: 0;   /* a fieldset defaults to min-content, which breaks grid children inside it */
}
.form-block > legend { padding: 0; }

/* Checkboxes read as a list, so two columns keeps a six-item group from running long. */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
@media (max-width: 559px) { .check-grid { grid-template-columns: 1fr; } }

.check {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-small);
  cursor: pointer;
}
.check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-emerald); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  font-size: var(--t-small);
  color: var(--c-ink-60);
  border-left: 2px solid var(--c-line-strong);
  padding-left: var(--s-4);
}

/* ------------------------------------------------------------- alerts --- */

.alert {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line-strong);
  border-left-width: 3px;
  border-radius: var(--r-1);
  background: var(--c-white);
  font-size: var(--t-small);
  margin-bottom: var(--s-5);
}
.alert__icon { flex: 0 0 auto; margin-top: 2px; }
.alert--success { border-left-color: var(--c-success); background: var(--c-success-bg); }
.alert--error   { border-left-color: var(--c-danger); background: var(--c-danger-bg); }
.alert--warning { border-left-color: var(--c-amber); background: var(--c-warning-bg); }
.alert--info    { border-left-color: var(--c-navy-700); background: var(--c-info-bg); }

/* -------------------------------------------------------------- tables -- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.spec-table { width: 100%; font-size: var(--t-small); }
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: var(--border);
  vertical-align: top;
}
.spec-table th {
  width: 40%;
  color: var(--c-ink-60);
  font-weight: 500;
}
.spec-table td { font-weight: 500; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

@media (max-width: 559px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table th { border-bottom: 0; padding-bottom: 0; }
  .spec-table td { padding-top: var(--s-1); }
}

/* ---------------------------------------------------------- accordion --- */

.accordion { border-top: var(--border); }
.accordion__item { border-bottom: var(--border); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--c-ink);
  font-family: var(--font-display);
}
.accordion__trigger .icon { flex: 0 0 auto; color: var(--c-emerald); transition: transform var(--dur) var(--ease-out); }
.accordion__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.accordion__panel { display: none; padding-bottom: var(--s-5); }
.accordion__panel[data-open] { display: block; }
.accordion__panel > * { max-width: var(--measure); color: var(--c-ink-80); }
.accordion__panel p + p { margin-top: var(--s-3); }

/* --------------------------------------------------------- breadcrumbs -- */

.breadcrumbs { padding-block: var(--s-4); font-size: var(--t-small); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.breadcrumbs li { display: flex; align-items: center; gap: var(--s-2); color: var(--c-ink-60); }
.breadcrumbs li:not(:last-child)::after {
  content: "/"; color: var(--c-ink-60);
}
.breadcrumbs a { color: var(--c-ink-60); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-teal); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-ink); font-weight: 500; }

/* --------------------------------------------------------- pagination --- */

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2); margin-top: var(--s-8);
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  border: var(--border); border-radius: var(--r-1);
  font-size: var(--t-small); font-weight: 600;
  text-decoration: none; color: var(--c-ink-80);
}
.pagination a:hover { border-color: var(--c-teal); color: var(--c-teal); }
.pagination [aria-current="page"] { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }
.pagination__gap { border: 0; min-width: auto; }

/* ======================================================== SITE HEADER === */

.utility-bar {
  background: var(--c-navy);
  color: var(--c-ink-inverse-70);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: var(--utility-h);
  padding-block: var(--s-2);
}
/* One line, always. A flex item will not shrink below its own content width unless told to,
   which is why the description wrapped to two lines and pushed the bar out of its height
   instead of truncating. `min-width: 0` releases it; the ellipsis does the rest. */
.utility-bar__inner > p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.utility-bar__links { display: flex; align-items: center; gap: var(--s-5); flex: 0 0 auto; }
/* A phone number broken across lines is unreadable — these two never wrap. */
.utility-bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.utility-bar a:hover { color: var(--c-white); }
@media (max-width: 767px) { .utility-bar { display: none; } }

.announcement {
  background: var(--c-amber);
  color: var(--c-navy);
  font-size: var(--t-small);
  font-weight: 500;
  text-align: center;
  padding: var(--s-2) var(--s-4);
}
.announcement a { color: var(--c-navy); font-weight: 600; }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-white);
  border-bottom: var(--border);
  transition: box-shadow var(--dur) var(--ease-out);
}
.site-header[data-scrolled] { box-shadow: var(--shadow-1); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-teal); }
.brand svg { height: 2.1rem; width: auto; }
.brand__text { display: grid; }
.brand__name { font-size: 1.05rem; font-weight: 700; letter-spacing: var(--track-tight); color: var(--c-teal); }
.brand__tag { font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--c-ink-60); }

/* Desktop navigation ------------------------------------------------------ */

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-ink-80);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__item[data-open] > .nav__link { color: var(--c-teal); }
.nav__link[aria-current="true"] { color: var(--c-teal); border-bottom-color: var(--c-amber); }
.nav__link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.nav__item[data-open] > .nav__link .icon { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 34rem;
  max-width: min(58rem, 92vw);
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  padding: var(--s-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav__item[data-open] > .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-5); }
.mega__link {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border-radius: var(--r-1);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mega__link:hover { background: var(--c-sand); border-left-color: var(--c-amber); }
.mega__title { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); display: flex; align-items: center; gap: var(--s-2); }
.mega__title .icon { color: var(--c-emerald); }
.mega__desc { font-size: var(--t-micro); color: var(--c-ink-60); text-transform: none; letter-spacing: 0; line-height: 1.45; }
.mega__foot { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--border); }

@media (max-width: 1023px) {
  .nav, .header-actions__desktop { display: none; }
}

.header-actions { display: flex; align-items: center; gap: var(--s-3); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  color: var(--c-ink-80);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--c-sand); color: var(--c-teal); }
.nav-toggle { display: none; }
@media (max-width: 1023px) { .nav-toggle { display: inline-flex; } }

/* Search overlay ---------------------------------------------------------- */

.search-panel {
  display: none;
  border-top: var(--border);
  background: var(--c-sand);
  padding-block: var(--s-5);
}
.search-panel[data-open] { display: block; }
.search-panel form { display: flex; gap: var(--s-3); }
.search-panel .input { min-height: 52px; }

.suggestions {
  margin-top: var(--s-3);
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
}
.suggestions:empty { display: none; }
.suggestions a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border);
  text-decoration: none; color: var(--c-ink);
  font-size: var(--t-small);
}
.suggestions a:last-child { border-bottom: 0; }
.suggestions a:hover, .suggestions a:focus { background: var(--c-sand); }
.suggestions__type { font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--c-ink-60); }

/* Mobile drawer ----------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
}
.drawer[data-open] { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 34, 34, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.drawer[data-open] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(24rem, 92vw);
  background: var(--c-white);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[data-open] .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--border);
  position: sticky; top: 0; background: var(--c-white); z-index: 1;
}
.drawer__body { padding: var(--s-4) var(--s-5) var(--s-8); }
.drawer__foot { margin-top: auto; padding: var(--s-5); border-top: var(--border); background: var(--c-sand); }

.drawer-nav__item { border-bottom: var(--border); }
.drawer-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 56px;
  font-size: var(--t-h4); font-weight: 600; color: var(--c-ink);
  text-decoration: none; text-align: left;
  font-family: var(--font-display);
}
.drawer-nav__link .icon { color: var(--c-ink-40); transition: transform var(--dur) var(--ease-out); }
.drawer-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.drawer-nav__sub { display: none; padding: 0 0 var(--s-4) var(--s-4); border-left: 1px solid var(--c-line); }
.drawer-nav__sub[data-open] { display: block; }
.drawer-nav__sub a {
  display: block; min-height: 44px; line-height: 44px;
  font-size: var(--t-small); color: var(--c-ink-60); text-decoration: none;
}
.drawer-nav__sub a:hover { color: var(--c-teal); }

/* Mobile sticky action bar ------------------------------------------------ */

.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  gap: var(--s-2);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--c-white);
  border-top: var(--border);
  box-shadow: 0 -4px 18px rgba(16, 42, 67, 0.08);
}
.sticky-bar .btn { flex: 1; }
@media (max-width: 767px) {
  .sticky-bar[data-enabled] { display: flex; }
  body:has(.sticky-bar[data-enabled]) { padding-bottom: 5rem; }
}

/* ======================================================== SITE FOOTER === */

.site-footer { background: var(--c-teal); color: var(--c-ink-inverse-70); }
.site-footer h2, .site-footer h3 { color: var(--c-white); }

.footer-top { padding-block: var(--section-y) var(--s-8); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: var(--s-7) var(--s-5);
}
.footer-grid--four { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand__mark svg { height: 2.4rem; width: auto; }
.footer-brand p { margin-top: var(--s-4); font-size: var(--t-small); max-width: 34ch; }

.footer-col__title {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line-dark);
}
.footer-col li + li { margin-top: var(--s-2); }
.footer-col a {
  font-size: var(--t-small);
  color: var(--c-ink-inverse-70);
  text-decoration: none;
}
.footer-col a:hover { color: var(--c-white); text-decoration: underline; }

.footer-contact dt { font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: rgba(237,243,242,0.75); }
.footer-contact dd { margin: 2px 0 var(--s-4); font-size: var(--t-small); color: var(--c-ink-inverse); }
.footer-contact a { color: var(--c-ink-inverse); text-decoration: none; }
.footer-contact a:hover { color: var(--c-amber); }

.newsletter { margin-top: var(--s-5); }
.newsletter form { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.newsletter .input {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-line-dark);
  color: var(--c-white);
  min-height: 44px;
}
.newsletter .input::placeholder { color: rgba(237,243,242,0.45); }

.social-row { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-1);
  color: var(--c-ink-inverse);
}
.social-row a:hover { border-color: var(--c-amber); color: var(--c-amber); }

.footer-bottom {
  border-top: 1px solid var(--c-line-dark);
  padding-block: var(--s-5);
  font-size: var(--t-micro);
}
.footer-bottom__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom a { color: var(--c-ink-inverse-70); text-decoration: none; }
.footer-bottom a:hover { color: var(--c-white); text-decoration: underline; }

/* ====================================================== SCROLL REVEAL === */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal][data-revealed] { opacity: 1; transform: none; }

/* ============================================ TARGET SIZE (WCAG 2.5.8) == */
/* Standalone links — those not sitting inside a sentence — need a 24px minimum
   target. Links inside prose paragraphs are covered by the inline exception. */

.link-arrow { min-height: 24px; }

.footer-col a,
.footer-bottom a,
.footer-contact a,
.utility-bar a,
.breadcrumbs a,
.breadcrumbs [aria-current="page"],
.card__meta a,
.suggestions__type {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ====================================== BUTTON COLOUR, LAST WORD ======== */
/* Generic link rules (.on-dark a, .footer-col a, .admin a …) have repeatedly outranked
   .btn and left buttons with text the same colour as their own background. This rule is
   declared last so a button always owns its label colour, whatever context it sits in. */

a.btn, a.btn:hover, a.btn:focus { color: var(--btn-fg); text-decoration: none; }

/* ================================================== REDUCED MOTION ====== */

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .card:hover .card__media img { transform: none; }
}

/* ============================================================= PRINT ==== */

@media print {
  .site-header, .site-footer, .sticky-bar, .drawer, .utility-bar,
  .breadcrumbs, .cta-band, .section-rail, .ad { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .section { padding-block: 1rem; }
}

/* Remaining WCAG 2.5.8 targets found in verification: the consent checkbox, the contact
   block's standalone links, and the legal page's contents list. */

.check input { width: 1.5rem; height: 1.5rem; }

.contact-block__value a,
.page-legal nav ol a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}