/* ==========================================================================
   Novigen Biotech — THEME LAYER
   Visual language modelled on mercor.com.

   Load order: tokens.css → site.css → pages.css → theme.css

   tokens.css  holds the values.
   site.css / pages.css hold the component structure and layout.
   theme.css   (this file) sets how it all looks.

   The system in one line: one sans family, a white page separated by hairlines
   rather than colour bands, large light-weight headings with tight tracking,
   small radii, whisper-light shadows, and a single indigo accent.
   ========================================================================== */

/* ============================================================ TYPOGRAPHY = */

body {
  font-family: var(--font-sans);
  letter-spacing: var(--track-snug);
  color: var(--c-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--c-black);
}
h3, h4, h5, h6 {
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
}

.t-display { font-weight: var(--fw-normal); letter-spacing: var(--track-tight); }

.t-lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  line-height: var(--lh-relaxed);
  color: var(--gray-600);
  letter-spacing: var(--track-snug);
}

/* This system uses no letter-spaced uppercase. Small labels are sentence case,
   13px, medium weight, grey. */
.t-micro,
.eyebrow,
.card__meta,
.product-card__foot,
.download-row__meta,
.footer-col__title,
.contact-block__label,
.section-rail__title,
.article-toc__title,
.result__type,
.block-related__title,
.hero__credential dt,
.stat__note,
.ad__label,
.block-download__meta,
.person__quals,
.placeholder-flag,
.suggestions__type {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  color: var(--gray-500);
}

.eyebrow { gap: var(--s-2); }
.eyebrow::after { display: none; }
.eyebrow__index { display: none; }

.prose, .prose--sans, .intro__body, .article-standfirst,
.hero__standfirst, .why-item__body, .product-tagline,
.block-quote__text, .capability-card__body {
  font-family: var(--font-sans);
}
.prose {
  color: var(--gray-700);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}
.prose h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s-8);
  font-size: var(--t-h2);
}
.prose ul li::before { background: var(--gray-300); }
.prose blockquote { border-left-color: var(--c-accent); font-style: normal; color: var(--gray-800); }
.prose strong { font-weight: var(--fw-semi); color: var(--c-black); }
.prose code { background: var(--gray-100); }
.prose pre { background: var(--gray-900); border-radius: var(--r-2); }

/* ================================================================= LINKS = */

a { text-decoration: none; color: var(--c-accent); }
a:hover { color: var(--c-accent-hover); }

/* Links inside running text keep an underline so colour is not the only cue. */
.prose a, .block-callout a, .form-note a, .field__hint a, .check a, .field__error a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.link-arrow { color: var(--c-accent); font-weight: var(--fw-medium); }

/* ============================================================== BRAND ==== */

/* The wordmark, on one line. It uses the page's own Inter rather than an SVG drawing, so it
   scales with the type system. Replaced automatically by an uploaded file — see partials/logo. */
.brand__wordmark {
  display: block;
  white-space: nowrap;
  font-size: 1.125rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-snug);
  color: var(--c-black);
}
.brand__wordmark--light { color: var(--c-white); }
/* A DEFINITE height, not max-height, and a brand that will not shrink.
   Client logo artwork is usually an Illustrator export: a viewBox and no width/height, which
   gives the file an aspect ratio but no intrinsic size. A replaced element with `width: auto`
   and no intrinsic width resolves to zero inside a flex row — the header logo silently
   disappeared this way. Fixing the height lets the width resolve from the ratio instead, so
   any artwork the client uploads is sized by the layout rather than by the file. max-width
   stops an unusually wide mark from crowding the nav. */
.brand { flex: 0 0 auto; }
.brand__logo {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
}

/* =============================================================== SURFACE = */

.section--sand      { background: var(--gray-50); }
.section--sand-deep { background: var(--gray-100); }
.section--tint      { background: var(--c-ground-tint); }

/* The tint band is a wash, not an inverted surface — it carries the same ink as white.
   The hairline at each end is what actually separates one band from the next. */
.section--tint + .section,
.section + .section--tint { border-top: var(--border-soft); }
.section--tint .card { border-color: var(--gray-200); }

/* `--gray-500` is the lightest legal text colour on white; on the tint it falls to 4.32:1.
   Secondary text inside a tinted band therefore steps down one stop. */
.section--tint :is(.t-micro, .eyebrow, .t-muted, .card__meta, .card__text),
.cta-band--tint :is(.t-micro, .eyebrow, .t-muted, .card__meta, .card__text) {
  color: var(--gray-600);
}

/* There are no dark bands. Former dark sections become quiet surfaces
   separated by hairlines — the defining move of this design language. */
.section--dark,
.section--navy,
.hero,
.page-hero--dark {
  background: var(--c-white);
  color: var(--c-black);
}
.hero::before { display: none; }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--navy h1, .section--navy h2, .section--navy h3,
.page-hero--dark .page-hero__title,
.cta-band__title,
.hero__headline,
.why-item__title,
.benefit__title { color: var(--c-black); }

.cta-band { background: var(--gray-50); border-top: var(--border-soft); }
.cta-band__body { color: var(--gray-600); }

/* The conversion band carries the same hexagonal lattice as the page heroes, tiled over the
   tint rather than stretched. The tint stays the `background-color` underneath, so the ground
   the contrast auditor walks is unchanged and a re brand still carries it; the pattern only
   adds faint navy strokes, which can move dark text further from its ground, never closer. */
.cta-band--tint {
  background-color: var(--c-ground-tint);
  background-image: url("../img/hex-pattern.svg");
  background-repeat: repeat;
  background-size: 112px 97px;
  background-position: center;
}

/* Interior page heroes carry the homepage hero's ground: the same lattice backdrop under
   the same scrim, minus the video. The SVG is referenced as a CSS background rather than an
   <img>, which also renders it in the browser's static mode — the pattern arrives, the
   motion does not, which is what an interior header wants.

   The `--plain`, `--dark` and `--feature` modifiers all resolve to this one treatment now.
   They survive in the markup so `hero_style` keeps validating; they simply no longer differ. */
/* Interior heroes carry the same navy-into-green sweep as the figures band, over the lattice
   backdrop. The green stop runs past the edge for the same reason it does there: at a full 100%
   the white heading on the green end is 2.72:1. At this stop the worst point is 5.60:1. */
.page-hero,
.page-hero--plain,
.page-hero--dark {
  background-color: var(--c-ground-dark);
  background-image:
    linear-gradient(100deg, var(--stats-from) 0%, var(--stats-to) var(--stats-stop)),
    url("../img/hero-backdrop.svg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 0;
  color: var(--c-white);
}
.page-hero .page-hero__title,
.page-hero--dark .page-hero__title { color: var(--c-white); }
.page-hero .page-hero__lead { color: var(--c-ink-60); }
.page-hero .eyebrow { color: var(--c-ink-60); }
.page-hero .placeholder-flag { color: var(--c-ink-60); border-color: var(--c-line); }

/* =============================================================== BUTTONS = */

.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: var(--c-white);
  --btn-border: var(--c-accent);
  min-height: 40px;
  padding: 0 var(--s-5);
  border-radius: var(--r-1);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  box-shadow: none;
}
.btn:hover { --btn-bg: var(--c-accent-hover); --btn-border: var(--c-accent-hover); }
.btn:active { transform: none; }

.btn--amber { --btn-bg: var(--c-accent); --btn-fg: var(--c-white); --btn-border: var(--c-accent); }
.btn--amber:hover { --btn-bg: var(--c-accent-hover); --btn-border: var(--c-accent-hover); }

.btn--secondary {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
  --btn-border: var(--gray-300);
  box-shadow: var(--shadow-1);
}
.btn--secondary:hover {
  --btn-bg: var(--gray-50);
  --btn-fg: var(--c-black);
  --btn-border: var(--gray-400);
}

/* The bright CTA. Kelly Green carries a dark label rather than a white one — white on Kelly is
   2.79:1 and would fail outright, while near-black on it is 7.54:1. Use it for the one action
   a page most wants taken, not for every button, or it stops meaning anything. */
.btn--accent {
  --btn-bg: var(--c-accent-bright);
  --btn-fg: var(--c-accent-on-bright);
  --btn-border: var(--c-accent-bright);
  font-weight: var(--fw-semi);
}
.btn--accent:hover {
  --btn-bg: var(--c-accent-mint);
  --btn-fg: var(--c-accent-on-bright);
  --btn-border: var(--c-accent-mint);
}

/* Decorative accents — no text sits on these, so the lighter greens are free here. */
.link-arrow:hover { color: var(--c-accent-bright); }
.section__head::after,
.eyebrow__rule { background: var(--c-accent-bright); }

.btn--dark { --btn-bg: var(--c-black); --btn-fg: var(--c-white); --btn-border: var(--c-black); }
.btn--dark:hover { --btn-bg: var(--gray-800); --btn-border: var(--gray-800); }

.btn--ghost { --btn-fg: var(--c-accent); --btn-bg: transparent; --btn-border: transparent; text-decoration: none; }
.btn--ghost:hover { --btn-fg: var(--c-accent-hover); --btn-bg: transparent; }

/* site.css still carries the inverted button treatment written for dark bands.
   There are no dark bands now, so those overrides are neutralised here. */
.on-dark .btn--secondary,
.section--dark .btn--secondary,
.section--navy .btn--secondary {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
  --btn-border: var(--gray-300);
}
.on-dark .btn--secondary:hover,
.section--dark .btn--secondary:hover,
.section--navy .btn--secondary:hover {
  --btn-bg: var(--gray-50);
  --btn-fg: var(--c-black);
  --btn-border: var(--gray-400);
}

.btn--sm { min-height: 34px; padding-inline: var(--s-4); font-size: var(--t-micro); }
.btn--lg { min-height: 46px; padding-inline: var(--s-6); font-size: var(--t-body); }

/* ================================================================= CARDS = */

.card {
  border-radius: var(--r-2);
  border-color: var(--c-line);
  padding: var(--s-6);
  box-shadow: none;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-2); }
.card--sand { background: var(--gray-50); border-color: var(--c-line); }
.card--flat { border-color: transparent; }
.card--flat:hover { box-shadow: none; border-color: transparent; }
.card__media { margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-6); }
.card--pad-0 { overflow: hidden; padding: 0; }
.card--pad-0 .card__media { margin: 0; }
.card__icon {
  border-radius: var(--r-1);
  border-color: var(--c-line);
  background: var(--gray-50);
  color: var(--c-accent);
}
.card__index { display: none; }
.card__title { font-size: var(--t-h3); font-weight: var(--fw-medium); }
.card__title a { color: var(--c-black); }
.card__text { color: var(--gray-500); }
.card:hover .card__media img { transform: none; }

/* ====================================================== CHIPS AND BADGES = */

.badge, .pill {
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-600);
  background: var(--c-white);
  box-shadow: var(--shadow-1);
}
.pill { min-height: 34px; padding-inline: var(--s-4); }
.pill:hover { border-color: var(--gray-300); color: var(--c-black); }
.pill[aria-current="true"], .pill--active {
  background: var(--c-black); border-color: var(--c-black); color: var(--c-white); box-shadow: none;
}
.pill__count { color: var(--gray-500); }
.badge--amber, .badge--emerald { border-color: var(--c-line); color: var(--c-accent); background: var(--c-accent-soft); }
.badge--teal { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.badge--muted { background: var(--gray-50); }

/* ================================================================= RULES = */

.rule, .rule--strong { background: var(--c-line); }
.rule--ticks { background: none; border-top: var(--border); height: 1px; }
.rule--amber { background: var(--c-accent); height: 2px; }

/* ================================================================= FORMS = */

.input, .select, .textarea {
  border-radius: var(--r-1);
  border-color: var(--gray-300);
  min-height: 40px;
  font-size: var(--t-small);
  box-shadow: var(--shadow-1);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.field__label { font-weight: var(--fw-medium); font-size: var(--t-small); }
.field__hint  { color: var(--gray-500); font-size: var(--t-micro); }
.check input  { accent-color: var(--c-accent); }
/* A file input has an intrinsic width that will not shrink, which pushed the CV field
   past a 360px viewport. Force the grid track and the control to the available width. */
.file-field {
  border-radius: var(--r-2);
  border-color: var(--gray-300);
  background: var(--gray-50);
  grid-template-columns: minmax(0, 1fr);
}
.file-field input[type="file"] { width: 100%; max-width: 100%; font-size: var(--t-small); }

.alert { border-radius: var(--r-2); border-left-width: 1px; box-shadow: var(--shadow-1); }
.alert--success { border-color: var(--c-line); background: var(--c-success-bg); }
.alert--error   { border-color: var(--c-line); background: var(--c-danger-bg); }
.alert--warning { border-color: var(--c-line); background: var(--c-warning-bg); }
.alert--info    { border-color: var(--c-line); background: var(--c-accent-soft); }

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

.utility-bar { background: var(--c-white); color: var(--gray-500); border-bottom: var(--border-soft); }
.utility-bar a { color: var(--gray-500); }
.utility-bar a:hover { color: var(--c-black); }

.site-header { border-bottom: var(--border); box-shadow: none; }
.site-header[data-scrolled] { box-shadow: var(--shadow-1); }
.site-header__inner { min-height: var(--header-h); }

.nav__link {
  font-size: var(--t-small);
  font-weight: var(--fw-normal);
  color: var(--gray-600);
  border-bottom: 0;
  border-radius: var(--r-1);
  padding: var(--s-2) var(--s-3);
}
.nav__link:hover { color: var(--c-black); background: var(--gray-50); }
.nav__link[aria-current="true"] { color: var(--c-black); font-weight: var(--fw-medium); background: var(--gray-100); }

.brand__name { font-weight: var(--fw-semi); letter-spacing: var(--track-tight); color: var(--c-black); }
.brand__tag  { text-transform: none; letter-spacing: 0; color: var(--gray-500); }

.icon-btn { border-radius: var(--r-1); color: var(--gray-600); }
.icon-btn:hover { background: var(--gray-100); color: var(--c-black); }

.drawer-nav__link { font-size: var(--t-body); font-weight: var(--fw-medium); }
.drawer__foot { background: var(--gray-50); }

/* The closed drawer is parked off-screen with translateX(100%). Clipping it here
   stops it contributing to the document's horizontal scroll extent. */
.drawer { overflow: hidden; }
.skip-link { background: var(--c-accent); color: var(--c-white); border-radius: 0 0 var(--r-1) var(--r-1); }

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

/* The footer closes the page on the same blue the hero opened it with, over a dotted world
   map. The map is a separate absolutely-positioned layer rather than a background on the
   footer itself, so its opacity can be tuned without touching the gradient underneath.
   `.on-media` on the element supplies the inverted token set. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  /* Deep Navy, with a teal bloom at the top-left. Literal values, because a gradient cannot be
     resolved by walking the DOM — the contrast auditor pins this surface to the lightest
     composite below, so these two must be changed together. */
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(8, 127, 140, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, #0A1C2C 0%, #12304A 45%, #1B4266 100%);
  color: var(--c-ink-60);
}
/* Sized by width and centred in both axes, so the map reads as a small motif set into the
   footer rather than a texture filling it. Width rather than `contain`, because `contain`
   grows the map to the full footer width; height stays `auto` so the aspect never distorts.
   `cover` is wrong here for a different reason — it would crop the map to a field of
   anonymous dots at this aspect ratio.

   The artwork's dots are `#2BB99B`, much nearer the footer's navy than white would be, so
   the layer needs roughly twice the opacity a white map did to read at all: 0.13 leaves it
   at 1.25:1 against the ground, 0.24 brings it to about 1.55:1 — visible as a map, still
   clearly a backdrop. */
.footer-map {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/world-dots.svg") center center / 52% auto no-repeat;
  opacity: 0.28;
  pointer-events: none;
}

/* Below the four-column breakpoint the footer is tall and narrow, so the same percentage
   would leave the map too small to read as a map at all. */
@media (max-width: 767px) {
  .footer-map { background-size: 86% auto; }
}

.site-footer h2, .site-footer h3 { color: var(--c-white); }
.footer-col__title { color: var(--c-white); border-bottom: 0; padding-bottom: var(--s-2); }
.footer-col a { color: var(--c-ink-60); }
.footer-col a:hover { color: var(--c-white); }
.footer-brand p { color: var(--c-ink-60); }
.footer-contact dt { color: var(--c-ink-60); }
.footer-contact dd, .footer-contact a { color: var(--c-white); }
.footer-contact a:hover { color: var(--c-white); text-decoration: underline; }
.social-row a { border-color: var(--c-line); color: var(--c-ink-60); border-radius: var(--r-1); }
.social-row a:hover { border-color: var(--c-white); color: var(--c-white); }
/* The support widget is fixed to the bottom-right of the viewport, so it lands on top of
   the legal bar once the footer is scrolled into view. The extra bottom padding gives it
   empty footer to float over instead of the credit line. */
.footer-bottom {
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-60);
  padding-bottom: calc(var(--s-5) + 4rem);
}
.footer-bottom a { color: var(--c-ink-60); }
.footer-bottom a:hover { color: var(--c-white); }
.site-footer .t-muted { color: var(--c-ink-60); }

.footer-credit a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* =========================================================== NAVIGATION = */

.breadcrumbs { font-size: var(--t-micro); }
.breadcrumbs a, .breadcrumbs li { color: var(--gray-500); }
.breadcrumbs a:hover { color: var(--c-black); }
.breadcrumbs [aria-current="page"] { color: var(--c-black); font-weight: var(--fw-medium); }

.pagination a, .pagination span { border-radius: var(--r-1); font-weight: var(--fw-medium); }
.pagination [aria-current="page"] { background: var(--c-black); border-color: var(--c-black); }

.accordion, .accordion__item { border-color: var(--c-line); }
.accordion__trigger { font-size: var(--t-body); font-weight: var(--fw-medium); }
.accordion__trigger .icon { color: var(--gray-400); }

.section-rail a::before { background: var(--gray-300); }
.section-rail a[aria-current="true"] { color: var(--c-black); }
.section-rail a[aria-current="true"]::before { background: var(--c-accent); }

/* ================================================================= MEDIA = */

.media { border-radius: var(--r-2); background: var(--gray-100); }
.media-placeholder { background: var(--gray-50); color: var(--gray-400); }
.media-placeholder::before { opacity: 0.05; color: var(--c-black); }
.media-placeholder__label { color: var(--gray-500); }
.media-figure figcaption { border-left-color: var(--c-line); color: var(--gray-500); }

/* ================================================================= STATS = */

.stat { border-top-color: var(--c-line); }
.stat__value { color: var(--c-black); font-weight: var(--fw-normal); letter-spacing: var(--track-tight); }
.stat__label { color: var(--gray-700); font-weight: var(--fw-medium); }

/* =========================================== HOMEPAGE SECTION TREATMENTS = */

/* Hero — white, large light headline, generous space. */
.hero__inner { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.hero__headline { font-size: var(--t-display); max-width: 17ch; }
.hero__standfirst { color: var(--gray-600); font-size: var(--t-lead); max-width: 52ch; }
.hero__figure { border-color: var(--c-line); background: var(--gray-50); border-radius: var(--r-3); padding: 0; overflow: hidden; }
.hero__caption { background: rgba(255, 255, 255, 0.94); border-left: 0; color: var(--gray-600); border-top: var(--border-soft); }
.hero__credential dd { color: var(--c-black); font-weight: var(--fw-normal); letter-spacing: var(--track-tight); }
.hero__credentials { border-top-color: var(--c-line); }

/* Video hero — the one deliberately inverted surface in the system. It must be declared
   after the neutralising `.hero` rule above, which paints every other hero white.
   `.on-media` supplies the inverted token set; these rules only handle the components
   whose colours are hard-coded rather than tokenised. */
.hero--video { background: var(--c-ground-dark); color: var(--c-white); }
.hero--video .hero__headline,
.hero--video .hero__credential dd { color: var(--c-white); }
.hero--video .hero__standfirst,
.hero--video .hero__credential dt { color: var(--c-ink-60); }
.hero--video .eyebrow { color: var(--c-ink-60); }

/* Buttons and links on the scrim. Declared as their own rules rather than relying on the
   `.on-dark` overrides in site.css, which are neutralised and must stay that way.
   The `:not(.btn)` narrowing is the standing guard: a generic link rule here would
   otherwise outrank `.btn` and paint a button's label in its own background colour. */
/* The footer is `.on-media` too, but it carries its own complete link treatment above —
   which needs the quieter `--c-ink-60` for column links so the headings still lead. This
   rule is declared after it, so the footer is excluded rather than being out-specified. */
.on-media:not(.site-footer) a:not(.btn),
.page-hero a:not(.btn) {
  color: var(--c-white);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.on-media:not(.site-footer) a:not(.btn):hover,
.page-hero a:not(.btn):hover {
  color: var(--c-white);
  text-decoration-color: var(--c-white);
}
.on-media .btn,
.page-hero .btn { color: var(--btn-fg); }

.on-media .btn--secondary,
.page-hero .btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--c-white);
  --btn-border: rgba(255, 255, 255, 0.46);
}
.on-media .btn--secondary:hover,
.page-hero .btn--secondary:hover {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
  --btn-border: var(--c-white);
}
.on-media :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.page-hero :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--c-white);
}

/* The division tiles want a solid white pill, not the outlined `.on-media` ghost above: the
   card sits on a photograph, where a translucent border vanishes into any light patch. This
   has to live here, after that rule — in pages.css it would simply be outranked. */
.division-card .division-card__cta {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-accent-hover);
  --btn-border: var(--c-white);
  border-radius: var(--r-pill);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-1);
}
.division-card .division-card__cta:hover {
  --btn-bg: var(--gray-50);
  --btn-fg: var(--c-accent-hover);
  --btn-border: var(--gray-50);
}
.division-card__title { color: var(--c-white); }

/* Why Novigen — white cards lifted off the tinted band. */
.benefits-surface,
.section--dark.section { background: var(--gray-50); }
.benefit { background: var(--c-white); border-color: var(--c-line); }
.benefit__index { color: var(--c-accent); font-weight: var(--fw-medium); }
.benefit__title { color: var(--c-black); font-weight: var(--fw-medium); }
.benefit__body { color: var(--gray-600); }

/* For manufacturers — two action cards. The first carries the primary button, so it is
   the one the eye lands on; the second is the same card with a quieter action. */
.cta-card { background: var(--c-white); border-color: var(--c-line); }
.cta-card__title { color: var(--c-black); font-weight: var(--fw-medium); }
.cta-card__body { color: var(--gray-600); }

/* Clinical portfolio — tabbed */
.portfolio__title { border-bottom-color: var(--c-line); color: var(--c-black); font-weight: var(--fw-medium); }
.portfolio__list li { border-bottom-color: var(--c-line-soft); color: var(--gray-700); }
.portfolio__list li::before { background: var(--gray-300); }

.tabs-bar { border-bottom-color: var(--c-line); }
.tabs-bar__tab {
  border-color: var(--gray-200);
  color: var(--gray-600);
  box-shadow: var(--shadow-1);
}
.tabs-bar__tab:hover { border-color: var(--gray-300); color: var(--c-black); }
.tabs-bar__tab[aria-selected="true"] {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
  box-shadow: none;
}
.tabs-bar__count { color: var(--gray-500); }
.tabs-bar__tab[aria-selected="true"] .tabs-bar__count { color: rgba(255, 255, 255, 0.65); }

/* Division cards */
.division-card .card__title a { color: var(--c-black); }
.division-card .card__foot { padding-top: var(--s-4); }

/* Principles, capabilities, why-list */
.principle__index, .capability__index { color: var(--gray-500); }
.principles, .capability-list { border-top-color: var(--c-line); }
.principle, .capability { border-bottom-color: var(--c-line); }
.capability:hover { background: var(--gray-50); }
.why-item, .why-item:first-child { border-color: var(--c-line); }
.why-item__title::before { color: var(--gray-500); }

/* Industry tiles and logo wall */
.industry-grid, .logo-wall { background: var(--c-line); border-color: var(--c-line); border-radius: var(--r-2); overflow: hidden; }
.industry-tile:hover { background: var(--gray-50); }
.industry-tile .icon { color: var(--c-accent); }

/* ============================================================== CONTENT = */

.block-cta { background: var(--gray-50); border: var(--border); border-radius: var(--r-2); }
.block-cta__heading { color: var(--c-black); }
.block-cta__body { color: var(--gray-600); }
.block-callout { border-radius: var(--r-2); border-left-color: var(--c-accent); }
.block-callout--notice { border-left-color: var(--c-warning); background: var(--c-warning-bg); }
.block-quote { border-left-color: var(--c-accent); }
.block-quote__text { font-style: normal; font-weight: var(--fw-normal); letter-spacing: var(--track-snug); }
.block-download, .block-newsletter { border-radius: var(--r-2); border-color: var(--c-line); }
.ad { border-radius: var(--r-2); border-style: solid; border-color: var(--c-line); background: var(--gray-50); }
.ad--announcement { background: var(--c-black); color: var(--c-white); }
.ad--announcement a { color: var(--c-white); text-decoration: underline; }

.support-tile, .apply-panel, .map-frame { border-radius: var(--r-2); border-color: var(--c-line); }
.apply-panel { background: var(--gray-50); }
.support-tile:hover { border-color: var(--gray-300); box-shadow: var(--shadow-2); }
.support-tile .icon { color: var(--c-accent); }
.download-row, .job-row { border-bottom-color: var(--c-line); }
.job-row:hover, .download-row:hover { background: var(--gray-50); }
.job-row__title { font-weight: var(--fw-medium); }
.contact-block { border-top-color: var(--c-line); }
.contact-block__value a { color: var(--c-black); }
.contact-block__value a:hover { color: var(--c-accent); }
.feature-list li::before { background: var(--gray-300); }

.empty-note, .empty-state { border-radius: var(--r-2); border-style: solid; border-color: var(--c-line); background: var(--gray-50); }
.form-note { border-left-color: var(--c-line); color: var(--gray-500); font-size: var(--t-small); }
.placeholder-flag { color: var(--c-warning); }

.sticky-bar { border-top: var(--border); box-shadow: var(--shadow-2); }

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

[data-reveal] { transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none; }
}

/* ================================================== BUTTONS, LAST WORD == */
/* Descendant link rules (.footer-col a, .on-dark a, .contact-block__value a …)
   share specificity with a.btn, so this guard has to be the final declaration
   in the final stylesheet. A button always owns its own label colour. */

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