/* ============================================================================
   BIOVISTA CONSULTING — V9
   Clean rebuild against biovista-layout-brief-v2.md.

   V9 is a from-scratch rebuild, not an edit of site/. Those pages were
   single-line minified React exports with nearly every visual property inline,
   which made the brief's "cosmetic, CSS-only" category effectively unavailable.
   Here every visual decision lives in this file and the markup carries no
   style attributes at all.

   PALETTE POLICY
   The brief lists eleven approved colours and forbids new tints. Taken
   literally that removes every hover state and every secondary-text grey, so
   per Elizabeth's decision on 2026-08-09 the design-system's functional tokens
   are kept as DOCUMENTED EXTENSIONS. They are segregated below and each one
   states why it exists. No decorative colour is invented anywhere.

   No gradients. No drop shadows. No Inter. No purple.
   ============================================================================ */

:root {

  /* ---- THE ELEVEN APPROVED BRAND COLOURS -------------------------------- */
  --deep-blue:        #0C377A;   /* navy slabs, headlines on light, wave fill */
  --azure:            #1D5CB7;   /* card fills on navy, hairlines on navy     */
  --warm-accent:      #B77A1D;   /* PRIMARY CTA BUTTONS ONLY                  */
  --cool-teal:        #19A3B7;   /* eyebrows + hero italic — LIGHT BG ONLY    */
  --light-neutral:    #F4F6FA;   /* page canvas; body text on navy            */
  --medium-neutral:   #D1D6DD;   /* hairlines on light, captions on navy      */
  --ink:              #333741;   /* body text on light                        */
  --surface-dark:     #2D3740;   /* footer only                               */

  /* Documented functional token from design-system.md ("Card / elevated
     surfaces"), not one of the brief's eleven. Restored 2026-08-09: the About
     page needs one step of tone between canvas and white to separate the
     Problem block from the Solution block, and the eleven have nothing in that
     gap — Medium Neutral #D1D6DD is a hairline value and is far too dark for a
     section ground. Ink on it measures 10.0:1. */
  --surface-card:     #E8EAEF;
  --success:          #2E8B6E;   /* form states only, never decorative        */
  --warning:          #D97706;
  --error:            #C64545;
  --white:            #FFFFFF;   /* text on navy/azure. NEVER a background.    */

  /* ---- DOCUMENTED EXTENSIONS ------------------------------------------- *
     Kept from design-system.md v2.4 because the brief's eleven cannot express
     interaction state or a secondary text level. Each is justified; none is
     used decoratively.                                                      */

  /* Interaction state. Without these, no button or link can show hover or
     active, which fails WCAG 2.4.7 and reads as a broken control. */
  --deep-blue-active:   #092954;
  --warm-accent-active: #8F5A16;  /* also the AA-compliant CTA value, 5.77:1 */

  /* Secondary text on light. --ink at 100% for both body and captions
     flattens the hierarchy; --medium-neutral is a hairline value and fails
     contrast as text. */
  --ink-soft:           #5A5D67;  /* 7.04:1 on canvas */

  /* Teal that can legally carry text. The brand teal #19A3B7 fails AA as
     small text on canvas (2.68:1), so eyebrows use the darkened value. The
     brief confines teal to light backgrounds, which this respects. */
  --cool-teal-text:     #127182;  /* 5.23:1 on canvas */

  /* Teal on --surface-dark, permitted by the brief for footer column labels
     only. Never appears on --deep-blue or --azure. */
  --cool-teal-on-dark:  #4FC3D6;  /* 6.9:1 on surface-dark */
  /* Brighter teal for text on AZURE, added 2026-08-12 at Elizabeth's request.
     A DOCUMENTED PALETTE EXTENSION, not an accessibility exception: azure is a
     light-ish blue, so the on-dark teal (#4FC3D6) only reached 3.09:1 against
     it, under the 4.5 floor. This value measures 4.67:1 and passes AA outright,
     so no exception is being claimed. It is the third value outside the
     approved eleven, alongside the icon-chip pair.
     Scope: text on azure surfaces only. It is near-invisible on canvas
     (1.27:1) — never use it on a light ground. */
  --cool-teal-bright:   #A3E7F1;

  /* Icon-chip pair — added 2026-08-11 from a reference Elizabeth supplied.
     The only two values on the site outside the approved eleven. The layout
     brief's "no new colours" rule was waived deliberately for this one
     component; this is a decision, not drift. Used by .support-acc .chip only.
     Contrast is 2.30:1, under the 3:1 graphics floor — acceptable because the
     chips are aria-hidden decoration and the adjacent title carries the
     meaning. Do not reuse this pair for anything that must be perceived. */
  --icon-chip-bg:       #D2E1E9;
  --icon-chip-glyph:    #3E9FB2;

  /* Footer hairline. --medium-neutral is far too bright against surface-dark. */
  --surface-dark-rule:  #3A4351;

  /* Form-state backgrounds, semantic UI only. */
  --success-bg: #ECFDF5;
  --warning-bg: #FEF3C7;
  --error-bg:   #FEE2E2;

  /* ---- TYPE ------------------------------------------------------------ *
     Poppins carries the whole site: headlines, section titles, card titles,
     body, nav and buttons. Playfair Display italic is an accent face with
     exactly one job — the highlighted phrase in a hero headline. Georgia is
     retired; the only remaining serif on the site is inside the logo artwork,
     which is a raster image and unaffected. Both faces load from Google Fonts.

     Weights: 600 headings · 500 card titles and UI labels · 400 body.
     Loading only these three keeps the request small; no other weight is
     referenced anywhere in this file, so none will synthesise. */
  --font-display: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

  --w-heading: 600;
  --w-label:   500;
  --w-body:    400;

  /* ---- METRICS --------------------------------------------------------- */
  --maxw:   1200px;
  --gutter: 40px;
  --wave:   100px;   /* brief: 90–110px desktop */
  --radius: 6px;     /* brief: cards are 6px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--light-neutral);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: var(--w-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
img { max-width: 100%; display: block; }

/* ----------------------------------------------------------------------------
   Accessibility scaffolding
   ---------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--deep-blue); color: var(--white);
  font-size: 15px; font-weight: var(--w-label); text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--deep-blue);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On navy and on the footer the deep-blue ring is invisible. */
.slab :focus-visible,
.cta-band :focus-visible,
.foot :focus-visible { outline-color: var(--light-neutral); }

main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }

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

/* ============================================================================
   HEADER — brief: ~90px tall, logo ~200px wide, canvas background
   ============================================================================ */
.head { background: var(--light-neutral); }
.head-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 90px;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 16px; padding-top: 16px;
}
/* Vector source (biovista-logo.svg), so this is resolution-independent — the
   old 266x68 PNG was already upscaling 1.5x on retina at 200px.
   The supplied SVG had a 1920x1080 viewBox with the artwork floating in it and
   62% of the canvas empty; it is cropped to the measured artwork bounds
   (77 318 1766 444) so a width declaration means what it says.
   Sized +20% on 2026-08-11: 200 -> 240. Width is the brief's dimension, so it
   is the one declared. */
.wordmark img { width: 240px; height: auto; }

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 14px; font-weight: var(--w-label); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none;
  display: flex; align-items: center; min-height: 44px;  /* 2.5.8 target size */
  position: relative;
}
.nav-links a:hover { color: var(--deep-blue); }
.nav-links a[aria-current="page"] { color: var(--deep-blue); }
/* Active page marked with a deep blue underline, per copy-mvp.md design note.
   Not colour alone — it is a second, structural signal. */
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px;
  height: 2px; background: var(--deep-blue);
}

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--deep-blue); padding: 11px; min-width: 44px; min-height: 44px;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: var(--w-label); letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  padding: 16px 30px; min-height: 52px;
  border-radius: 999px; border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

/* The ONLY place --warm-accent appears in this stylesheet. */
.btn-primary { background: var(--warm-accent); color: var(--white); }
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible { background: var(--warm-accent-active); }

.btn-secondary {
  background: transparent; color: var(--deep-blue);
  border-color: var(--deep-blue);
}
.btn-secondary:hover,
.btn-secondary:focus-visible { background: var(--deep-blue); color: var(--white); }

/* Secondary button on a dark surface. Plain .btn-secondary is deep blue on
   deep blue there — 1.0:1, invisible. Lives here rather than in a page
   stylesheet because both the homepage and About use it. */
.btn-on-dark { border-color: var(--light-neutral); color: var(--light-neutral); }
.btn-on-dark:hover,
.btn-on-dark:focus-visible { background: var(--light-neutral); color: var(--deep-blue); }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Text link with arrow */
.arrowlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: var(--w-label); letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--deep-blue); padding: 10px 0;
}
.arrowlink::after { content: "\2192"; font-size: 15px; transition: transform 180ms ease; }
.arrowlink:hover::after { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .arrowlink:hover::after { transform: none; } }

/* ============================================================================
   SHARED TYPE
   ============================================================================ */
.eyebrow {
  display: block;
  font-size: 12px; font-weight: var(--w-label); letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cool-teal-text);
  margin-bottom: 16px;
}
/* Teal is forbidden on deep blue and azure — it fails contrast against both.
   On navy the eyebrow becomes Medium Neutral, per the brief. */
.slab .eyebrow, .cta-band .eyebrow { color: var(--medium-neutral); }
/* The footer is --surface-dark, where the brief explicitly permits teal. */
.foot .eyebrow { color: var(--cool-teal-on-dark); }

h1, h2 { font-family: var(--font-display); font-weight: var(--w-heading); }
/* Card and step titles sit a weight below section headings. */
h3, h4 { font-family: var(--font-display); font-weight: var(--w-label); }

h1 {
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--deep-blue);
  text-wrap: balance;
}
h2 {
  font-size: clamp(27px, 3.1vw, 40px); line-height: 1.16;
  letter-spacing: -0.012em; color: var(--deep-blue);
  text-wrap: balance;
}
h3 { font-size: 21px; line-height: 1.26; color: var(--deep-blue); }

.slab h1, .slab h2, .slab h3,
.cta-band h1, .cta-band h2, .cta-band h3 { color: var(--white); }

/* The hero headline's closing phrase, set in teal italic on canvas. */
/* The one and only use of the accent face on the site. */
.hero-em {
  font-family: var(--font-accent);
  font-weight: 500;
  font-style: italic;
  color: var(--cool-teal-text);
}

.lede {
  font-size: 17.5px; line-height: 1.66; color: var(--ink);
  max-width: 640px;   /* brief: subhead constrained to ~640px */
  text-wrap: pretty;
}
p { text-wrap: pretty; }
.body-copy { font-size: 16.5px; line-height: 1.68; color: var(--ink-soft); }
.body-copy + .body-copy { margin-top: 20px; }

.slab .lede, .slab p, .cta-band .lede, .cta-band p { color: var(--light-neutral); }

/* ============================================================================
   WAVE DIVIDERS — the signature element
   ============================================================================
   Inline SVG in the markup, preserveAspectRatio="none", filled --deep-blue,
   aria-hidden. Crests rise about a third of the SVG's height so the boundary
   interlocks rather than reading as a flat edge with a ripple.
   ============================================================================ */
.wave {
  display: block; width: 100%; height: var(--wave);
  fill: var(--deep-blue);
}
/* Guarantees no hairline gap renders between the SVG and the slab at
   fractional zoom levels (90% / 110%). */
.wave + .slab, .slab.after-wave { margin-top: -1px; }
.wave.wave-up { margin-top: -1px; }

/* The wave supplies its own vertical space, so the sections it touches give
   some back. */
.pad-bottom-tight { padding-bottom: 26px; }
.pad-top-tight    { padding-top: 30px; }

/* ============================================================================
   SECTIONS
   ============================================================================ */
.sec { padding: 86px 0; }
.sec-tight { padding: 58px 0; }

/* Navy slab */
.slab { background: var(--deep-blue); }
.slab-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Brief: never a wave between two light sections — a hairline there instead. */
.hairline { border: 0; border-top: 1px solid var(--medium-neutral); margin: 0; }

.centered { text-align: center; }
.centered .eyebrow { margin-left: auto; margin-right: auto; }
.centered .lede { margin-left: auto; margin-right: auto; }

/* Interior page header band — shorter than the home hero, no image, no buttons */
.page-head { padding: 62px 0 66px; text-align: center; }
.page-head .lede { margin-left: auto; margin-right: auto; }

/* Home hero */
.hero { padding: 72px 0 0; text-align: center; }
.hero .lede { margin: 22px auto 32px; }

/* ============================================================================
   CARDS ON NAVY — azure fill, centred, outlined icon square
   ============================================================================ */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.card-navy {
  background: var(--azure);
  border-radius: var(--radius);
  padding: 36px 28px 34px;
  text-align: center;
  display: flex; flex-direction: column;
}
.card-navy h3 { color: var(--white); margin: 20px 0 12px; }
.card-navy p { color: var(--light-neutral); font-size: 15px; line-height: 1.62; }
/* The EaaS strapline. White italic — teal would vanish against azure. */
.card-navy .strap {
  color: var(--white); font-style: italic; font-size: 15px;
  margin-bottom: 12px; display: block;
}
/* Outlined rounded square, Light Neutral border and glyph. Decorative only —
   aria-hidden in the markup; the card title carries the meaning. */
.icon-sq {
  width: 46px; height: 46px; margin: 0 auto;
  border: 1.5px solid var(--light-neutral); border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--light-neutral);
}
.icon-sq svg { display: block; }

/* CARDS ON CANVAS — brief: white fill, Medium Neutral hairline, no shadow.
   White is permitted here as a card fill against the canvas; the page
   background itself is never white. */
.card-light {
  background: var(--white);
  border: 1px solid var(--medium-neutral);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex; flex-direction: column;
}
.card-light h3 { margin-bottom: 10px; }
.card-light p { font-size: 15.5px; line-height: 1.64; color: var(--ink-soft); }
.card-light img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 4px; margin-bottom: 20px;
}
.card-light .strap {
  display: block; font-style: italic; color: var(--deep-blue);
  font-size: 15.5px; margin-bottom: 10px;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ============================================================================
   STATS ROW — inside the navy slab, below the cards
   ============================================================================ */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 52px; padding-top: 40px;
  border-top: 1px solid var(--azure);   /* brief: separated by an Azure hairline */
}
.stat { display: flex; align-items: baseline; gap: 16px; }
.stat-n {
  font-family: var(--font-display); font-weight: var(--w-heading);
  font-size: 44px; line-height: 1; color: var(--white);
}
.stat-t { font-size: 14.5px; line-height: 1.45; color: var(--medium-neutral); }

/* ============================================================================
   SPLIT ROWS — text one side, image the other
   ============================================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
/* The media sits second in the DOM, so ordering IT does nothing. Pushing the
   COPY to second is what actually swaps the sides. */
.split.flip .split-copy { order: 2; }

.split-copy .arrowlink { margin-top: 18px; }
.split-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
}
/* Reserved slot when no photograph is supplied. Sized identically so the real
   file drops in with zero layout change. */
.split-media .reserved {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--medium-neutral);
  border-radius: var(--radius);
}

/* ============================================================================
   CREDIBILITY POINTS (KEEP variant only)
   ============================================================================ */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 44px; }
.point { text-align: center; }
.point .icon-sq { border-color: var(--deep-blue); color: var(--deep-blue); }
.point p { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* ============================================================================
   CLOSING CTA BAND — navy, no waves; the colour change is the divider
   ============================================================================ */
.cta-band { background: var(--deep-blue); padding: 66px 0; }
.cta-band-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.cta-band-copy { max-width: 660px; }
.cta-band h2 { margin-bottom: 12px; }

/* ============================================================================
   SERVICES ROADMAP — its own navy slab
   ============================================================================ */
.roadmap { display: flex; flex-direction: column; gap: 40px; margin-top: 44px; }
.step {
  display: grid; grid-template-columns: 56px 1fr 1fr;
  gap: 32px; align-items: center;
  padding-top: 34px; border-top: 1px solid var(--azure);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step-n {
  font-family: var(--font-display); font-size: 30px; font-weight: var(--w-heading);
  color: var(--medium-neutral); line-height: 1;
}
.step h3 { margin-bottom: 8px; }
.step img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.step.flip .step-copy { order: 2; }

/* ============================================================================
   CONTACT
   ============================================================================ */
.contact-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 60px; align-items: start; }

.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: 13px; font-weight: var(--w-label); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.req { color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-ui); font-size: 16px;
  color: var(--ink); background: var(--light-neutral);
  border: 1px solid var(--medium-neutral); border-radius: 4px;
  padding: 13px 14px; min-height: 48px;
}
.field textarea { min-height: 132px; resize: vertical; }
/* Brief: warm-accent focus border on form inputs. This differs from
   design-system.md v2.4, which specifies a deep-blue ring site-wide; the brief
   is the later instruction and wins here. Warm accent is used as a BORDER, not
   as a button fill, so CTA scarcity is unaffected. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--warm-accent);
  outline-offset: 1px;
  border-color: var(--warm-accent);
}
.field select { appearance: none; }
.field select:has(option[value=""]:checked) { color: var(--ink-soft); }

.contact-aside .aside-row { margin-bottom: 20px; }
.contact-aside a { color: var(--deep-blue); }
.contact-aside .support { color: var(--ink-soft); font-size: 15.5px; margin-top: 26px; }

.form-note { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.form-status:empty { display: none; }
.form-status {
  border: 1px solid var(--success); background: var(--success-bg);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px;
}

/* ============================================================================
   FOOTER — unchanged from the existing site, per the brief
   ============================================================================ */
.foot { background: var(--surface-dark); color: var(--light-neutral); }
.foot-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 62px var(--gutter) 38px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px;
}
.foot-mark { width: 190px; height: auto; margin-bottom: 18px; }
.foot-tag { font-family: var(--font-display); font-size: 17px; max-width: 300px; }
.foot h4 {
  font-family: var(--font-ui); font-size: 12px; font-weight: var(--w-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cool-teal-on-dark); margin-bottom: 15px;
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot a { color: var(--light-neutral); font-size: 15px;   /* 14.5 -> 15, 2026-08-12 */ text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot li a, .foot p a { display: inline-block; padding: 4px 0; }
.foot-base {
  border-top: 1px solid var(--surface-dark-rule);
}
.foot-base-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--medium-neutral);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .split { gap: 44px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; --wave: 56px; }   /* brief: 50–60px on mobile */

  .head-inner { min-height: 76px; align-items: center; }
  .wordmark img { width: 202px; }   /* +20%, was 168px */

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--light-neutral);
    border-top: 1px solid var(--medium-neutral);
    border-bottom: 1px solid var(--medium-neutral);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--gutter) 14px; z-index: 50;
  }
  .nav-links.open { display: flex; }
  .head { position: relative; }
  .nav-links a[aria-current="page"]::after { bottom: 6px; right: auto; width: 30px; }

  .sec { padding: 56px 0; }
  .hero { padding: 44px 0 0; }
  .cards, .grid-3, .grid-2, .stats, .points { grid-template-columns: 1fr; }
  .stats { gap: 22px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  /* On one column the copy must always lead, whatever the desktop order was. */
  .split.flip .split-copy { order: 0; }
  .step { grid-template-columns: 44px 1fr; gap: 18px 20px; }
  .step .step-media { grid-column: 1 / -1; }
  .step.flip .step-copy { order: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .hero-actions { justify-content: center; }
}

/* ============================================================================
   SMALL UTILITIES
   ============================================================================
   A short, closed set so the markup can stay entirely free of style attributes.
   ============================================================================ */
.mt-sm  { margin-top: 14px; }
.mt-md  { margin-top: 26px; }
.mt-lg  { margin-top: 40px; }
.mt-xl  { margin-top: 56px; }
.measure      { max-width: 900px; }
.measure-tight{ max-width: 760px; }
.align-left   { text-align: left; }
/* The About page's closing line — a standalone statement, not a heading. */
.closing-line {
  margin-top: 34px;
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--white);
}

/* ============================================================================
   HOME — CLOSING BLOCK
   ============================================================================
   Layout taken from Elizabeth's reference screenshot: eyebrow, large heading,
   a row of three left-aligned hairline cards with the icon square at top-left,
   a full-width rule, then the stats row stacked beneath it. Applied 2026-08-09.

   The stats used to sit inside the navy slab directly under the three service
   cards; they were moved here so the slab ends on the cards.

   LAYOUT ONLY. The reference's dark ground, teal display type, grid texture
   and rounded glow are not imported — the block sits on canvas in the approved
   palette like the rest of the page.
   ============================================================================ */
.why-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 44px;
}
.why-card {
  border: 1px solid var(--medium-neutral);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
}
/* Icon square sits top-left here, not centred as on the navy cards. */
.why-card .icon-sq {
  margin: 0 0 20px;
  /* Teal on both border and glyph, chosen 2026-08-11. --cool-teal is the
     design system's sanctioned icon colour on light surfaces. The filled-chip
     treatment used by the Services accordion was offered and not taken, so the
     two icon sets are deliberately different: outlined here, filled there. */
  border-color: var(--cool-teal);
  color: var(--cool-teal);
}
.why-card h3 { margin-bottom: 10px; }
.why-card p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); }

/* .why-rule and .stats-stack below are NOT used by any live page — the metrics
   row was removed from the homepage on 2026-08-12. They are kept because
   index-previous.html, the archived homepage, still renders with them. Delete
   both blocks when that archive is deleted. */
.why-rule { border: 0; border-top: 1px solid var(--medium-neutral); margin: 52px 0 0; }


/* Stats, stacked — numeral on its own line with the caption beneath, which is
   how the reference sets them. The navy inline .stats rule is left untouched. */
.stats-stack {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 40px;
}
/* The base .stat is a baseline-aligned flex row for the navy slab. Here the
   numeral sits above its caption, so that has to be undone explicitly. */
.stats-stack .stat { display: block; }
.stats-stack .stat-n {
  display: block;
  font-family: var(--font-display); font-weight: var(--w-heading);
  font-size: 46px; line-height: 1; color: var(--deep-blue);
  margin-bottom: 14px;
}
.stats-stack .stat-t {
  display: block; font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  max-width: 30ch;
}

@media (max-width: 860px) {
  .why-cards { grid-template-columns: 1fr; }
}

/* ============================================================================
   CONTACT PAGE  — chosen layout, 2026-08-09 (was "option B")
   ============================================================================
   The form takes the wide column, the navy details panel sits right. Restores
   the two things the first v9 contact page had dropped: the navy information
   panel with icon rows, and the form as an elevated card with a teal top
   accent and a two-up field grid.

   Note on white: the brief's palette table says white "is not a background
   color anywhere", but its card spec says groups on canvas "use white fill
   with a Medium Neutral hairline border and no shadow". Settled 2026-08-09 in
   favour of the card spec — white is a permitted CARD fill on canvas, and
   still barred as a PAGE background. See design-system.md, Resolved 2026-08-09.

   This page also has no closing CTA band, by decision on the same date: the
   band duplicated the page's own h1, repeated the hero paragraph, and linked
   to the page the reader was already on. The other three pages keep theirs.
   ---------------------------------------------------------------------------- */
.contact-head { padding: 62px 0 46px; }
.contact-body { padding: 0 0 86px; }

.layout-b { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }

/* ---- navy information panel ---- */
.info-panel {
  position: relative; overflow: hidden;
  background: var(--deep-blue); color: var(--light-neutral);
  border-radius: var(--radius); padding: 34px 30px;
}
.info-panel .eyebrow { color: var(--medium-neutral); }   /* teal would fail on navy */
.info-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.info-chip {
  flex: none; width: 40px; height: 40px; border-radius: 8px;
  background: var(--azure); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.info-label {
  display: block; font-size: 11px; font-weight: var(--w-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--medium-neutral); margin-bottom: 3px;
}
.info-value { font-size: 15.5px; color: var(--white); text-decoration: none; }
.info-value:hover { text-decoration: underline; }
.info-support {
  border-top: 1px solid var(--azure); margin-top: 28px; padding-top: 22px;
  font-size: 15px; line-height: 1.6; color: var(--light-neutral);
}

/* ---- helix watermark ----------------------------------------------------
   Reinstated at Elizabeth's request. This overrides biovista-layout-brief-v2.md,
   which says the contact page has "no helix graphic" — her call, recorded here
   so it doesn't read as an oversight.

   NOT the animated hero helix (helix.js is canvas-based and home-only). This is
   the DNA circle from the logo lockup, knocked out to white at 16% and bled
   past the panel's bottom-right corner, as the original contact page had it. */
.watermark {
  position: absolute; right: -44px; bottom: -44px;
  width: 240px; height: 240px; opacity: 0.16; pointer-events: none;
}
.watermark img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0) invert(1);
}
.info-panel > *:not(.watermark) { position: relative; z-index: 1; }

/* ---- form card ---- */
.form-card {
  background: var(--white);
  border: 1px solid var(--medium-neutral);
  border-top: 3px solid var(--cool-teal);   /* teal as decoration on light — allowed */
  border-radius: var(--radius);
  padding: 34px 32px 36px;
}
.form-card h2 { font-size: 26px; margin-bottom: 26px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.form-card .field input,
.form-card .field textarea,
.form-card .field select { background: var(--light-neutral); }

@media (max-width: 860px) {
  .layout-b { grid-template-columns: 1fr; gap: 30px; }
  /* No order swap: the form stays first. The brief makes the form the primary
     element, and re-ordering would push it below a full-height details panel. */
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px 22px 28px; }
}

/* ============================================================================
   FLEXIBLE STRATEGIC SUPPORT — accordion   (services.html)
   ============================================================================
   Chosen 2026-08-09. Built on <details>/<summary>, deliberately: the brief bars
   JS beyond the mobile nav, and the native element supplies keyboard operation,
   the expanded/collapsed state for assistive tech, and browser find-in-page —
   none of which a div-and-click accordion gets without script. This section
   therefore ships with zero JavaScript.

   A flat-on-desktop variant was built and rejected on 2026-08-09: forcing a
   <details> open is not possible in CSS (Chromium applies content-visibility to
   ::details-content), so it required a second script for ~137px of layout gain.

   Teal note: the pale teal chip in the reference screenshot is a TINT, which
   the brief bars. The chip here is solid --cool-teal with a --deep-blue glyph,
   which measures 3.78:1 and clears the 3:1 floor for graphical objects. White
   would have failed at 2.9:1.

   Independent toggles, not exclusive (no name="" attribute): in a two-column
   grid an exclusive accordion would collapse an item in one column while
   expanding one in the other, which reads as a glitch.
   ---------------------------------------------------------------------------- */
.support-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; }

.support-acc .item {
  border-top: 1px solid var(--medium-neutral);
  padding: 0;
}
.support-acc .item:last-child { border-bottom: 1px solid var(--medium-neutral); }
/* the second column's first item needs its own top rule on desktop */
.support-acc .item:nth-child(2) { border-top: 1px solid var(--medium-neutral); }

.support-acc summary {
  display: grid; grid-template-columns: 52px 1fr 22px; gap: 18px;
  align-items: center; cursor: pointer; padding: 18px 0;
  list-style: none;                      /* Firefox */
}
.support-acc summary::-webkit-details-marker { display: none; }   /* Safari/Chrome */
.support-acc summary:hover .ttl { color: var(--azure); }

.support-acc .chip {
  width: 52px; height: 52px; border-radius: 10px;
  background: var(--icon-chip-bg); color: var(--icon-chip-glyph);
  display: inline-flex; align-items: center; justify-content: center;
}
.support-acc .ttl {
  font-size: 17px; font-weight: var(--w-heading); line-height: 1.3;
  color: var(--deep-blue);
}
.support-acc .caret {
  color: var(--cool-teal-text); display: inline-flex; justify-self: end;
  transition: transform 180ms ease;
}
.support-acc .item[open] .caret { transform: rotate(180deg); }

.support-acc .body {
  padding: 0 0 20px 70px;                /* aligns under the title, not the chip */
  font-size: 15px; line-height: 1.62; color: var(--ink-soft);
  margin: 0;
}

/* Focus lands on the summary; make it obvious. */
.support-acc summary:focus-visible {
  outline: 2px solid var(--deep-blue); outline-offset: 2px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .support-acc .caret { transition: none; }
}

@media (max-width: 860px) {
  .support-acc { grid-template-columns: 1fr; gap: 0; }
  .support-acc .item:nth-child(2) { border-top: 1px solid var(--medium-neutral); }
  .support-acc .body { padding-left: 70px; }
}

/* ============================================================================
   ABOUT PAGE — chosen 2026-08-09 ("version 2", colour inversion)
   ============================================================================
   Problem sits on canvas; Solution sits on a navy slab behind a wave, so it is
   the only inverted block on the page and the eye goes straight to it. Tone-step
   and contained-panel variants were built and rejected the same day.

   Note: the About hero is two columns, not the centred band the layout brief
   specifies for interior pages. That is deliberate — it is the only way to put
   the cycle diagram back beside the headline.
   ============================================================================ */

/* ============================================================================
   THE CYCLE DIAGRAM  (shared by all three)
   ============================================================================
   Rebuilt rather than ported. The original was a fixed 460x460 block of
   absolutely-positioned inline styles, which is why it needed a zoom: 0.8 hack
   between 768 and 807px. This version is percentage-positioned inside a square
   container, so it scales instead of breaking.

   The six steps are a real <ol> — they are sequential content, not decoration.
   On mobile the SAME list reflows into a two-column grid (no duplicated
   markup, so a screen reader never hears the steps twice) and the ring is
   dropped. The hub text becomes the list's heading at that width.
   ---------------------------------------------------------------------------- */
.cycle { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1; }
.cycle .ring { position: absolute; inset: 0; width: 100%; height: 100%; }

.cycle-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 41%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--deep-blue); color: var(--white);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; font-size: 17px; font-weight: var(--w-heading); line-height: 1.24;
}

.cycle-nodes { list-style: none; margin: 0; padding: 0; }
.cycle-nodes li {
  position: absolute; width: 132px; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cycle-node {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--deep-blue); background: var(--canvas);
  color: var(--deep-blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.cycle-num {
  position: absolute; top: -6px; right: -8px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--cool-teal-text); color: var(--white);
  font-size: 11px; font-weight: var(--w-heading);
  display: inline-flex; align-items: center; justify-content: center;
}
.cycle-label {
  margin-top: 9px; font-size: 13.5px; font-weight: var(--w-heading);
  line-height: 1.28; color: var(--ink);
}

/* on the ring: centre 50/50, radius 37.4% (172 of 460) */
.cycle-nodes .n1 { left: 50%;   top: 12.6%; }
.cycle-nodes .n2 { left: 82.4%; top: 31.3%; }
.cycle-nodes .n3 { left: 82.4%; top: 68.7%; }
.cycle-nodes .n4 { left: 50%;   top: 87.4%; }
.cycle-nodes .n5 { left: 17.6%; top: 68.7%; }
.cycle-nodes .n6 { left: 17.6%; top: 31.3%; }

.about-hero-grid { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; }

/* ---- the closing statement, centred on the page in every version ---- */
.closing-statement {
  text-align: center; max-width: 22ch; margin: 0 auto;
  font-size: clamp(24px, 3.2vw, 34px); font-weight: var(--w-heading);
  line-height: 1.24; color: var(--deep-blue);
}
.closing-statement::before {
  content: ""; display: block; width: 54px; height: 2px;
  background: var(--cool-teal); margin: 0 auto 26px;
}
.slab .closing-statement { color: var(--white); }
.slab .closing-statement::before { background: var(--cool-teal-on-dark); }

/* Solution cards are h4 — they sit under "Our Solution". Bind the colour to the
   card rather than to a tag: when they were demoted from h3 the tag-bound rule
   stopped matching and they rendered at 1.85:1, effectively invisible. */
.card-navy h3, .card-navy h4 { color: var(--white); }

@media (max-width: 1024px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 640px) {
  /* The ring cannot carry six labels at this width. Same list, no ring. */
  .cycle { aspect-ratio: auto; max-width: none; }
  .cycle .ring { display: none; }
  .cycle-hub {
    position: static; transform: none; width: auto; aspect-ratio: auto;
    border-radius: var(--radius); padding: 18px 20px; font-size: 16px;
    margin-bottom: 22px;
  }
  .cycle-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .cycle-nodes li { position: static; transform: none; width: auto; }
}

/* ---- "What we do" — heading rail left, prose right ------------------------
   Chosen 2026-08-09. The section was an eyebrow, a heading and three equal
   paragraphs in a narrow measure, which read as a wall. The eyebrow, heading
   and closing statement now stack in a narrow left rail with a teal edge, and
   the prose runs as one column beside it. Punch comes from the asymmetry, and
   the statement reads as a conclusion sitting BESIDE the argument rather than
   tacked underneath it.

   Copy is unchanged. "We don't just advise: we execute." is the same words,
   promoted out of the end of the third paragraph onto its own line.

   The section sits on --surface-card, one step darker than canvas, which sets
   it off as its own band. Note it is NOT a progression into the slab: the
   Problem section sits between this and the navy, and is on canvas, so the
   page reads canvas -> surface-card -> canvas -> navy. Putting Problem on the
   same darker ground would make it a true step-down, if that is wanted.
   Body text on this ground measures 5.46:1. */
.sec-tone { background: var(--surface-card); }

.wwd-b { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.wwd-b .rail { border-left: 3px solid var(--cool-teal); padding-left: 24px; }
.wwd-b .rail h2 { margin-bottom: 26px; }
.wwd-b .stmt {
  font-size: clamp(19px, 2.1vw, 24px); font-weight: var(--w-heading);
  line-height: 1.3; color: var(--deep-blue); margin: 0;
  padding-top: 22px; border-top: 1px solid var(--medium-neutral);
}
.wwd-b .prose p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.wwd-b .prose p + p { margin-top: 20px; }
.wwd-b .prose p:first-child { font-size: 19px; line-height: 1.6; color: var(--ink); }

@media (max-width: 860px) {
  .wwd-b { grid-template-columns: 1fr; gap: 30px; }
}


/* ============================================================================
   SERVICES ROADMAP — left rail  (chosen 2026-08-09, was "option 2")
   ============================================================================
   A sticky section heading on the left; the five stages run down a rail on the
   right, each with a numbered marker on the spine, and the spine fills as the
   reader scrolls.

   Chosen over the centre-spine version specifically for mobile. A centre spine
   has nothing to connect once rows stack, so it has to be hidden and its fill
   forced to 0% — the effect would have existed on desktop only. A left rail is
   already the shape a narrow screen wants, so the spine, the markers and the
   fill all survive at 375px.

   Motion lives in services-motion.js and is progressive: with the script
   blocked every row is visible and only the spine fill is lost.
   ============================================================================ */

/* ---- shared: quiet reveal for cards elsewhere on the page ---------------- */
.js-reveal .reveal { transform: translateY(28px); transition: transform 620ms cubic-bezier(.22,.61,.36,1); }
.js-reveal .reveal.is-visible { transform: none; }
.js-reveal .reveal:nth-child(2) { transition-delay: 80ms; }
.js-reveal .reveal:nth-child(3) { transition-delay: 160ms; }

/* ============================================================================
   OPTION 2 — LEFT RAIL, sticky section heading
   ============================================================================ */
.rm2-wrap { display: grid; grid-template-columns: 330px 1fr; gap: 56px; align-items: start; margin-top: 44px; }
.rm2-head { position: sticky; top: 90px; }
.rm2 { position: relative; padding-left: 68px; }
.rm2 .spine { position: absolute; left: 26px; top: 6px; bottom: 6px; width: 2px; background: var(--azure); }
.rm2 .spine-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--light-neutral); }
.rm2 .row { position: relative; display: grid; grid-template-columns: 1fr 210px; gap: 28px;
            align-items: center; padding-bottom: 42px; }
.rm2 .row:last-child { padding-bottom: 0; }
.rm2 .marker {
  position: absolute; left: -68px; top: 0; width: 54px; height: 54px; border-radius: 50%;
  background: var(--deep-blue); border: 2px solid var(--azure);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--w-heading);
  font-size: 17px; color: var(--medium-neutral);
  transition: border-color 300ms ease, color 300ms ease;
}
.rm2 .row.is-visible .marker { border-color: var(--light-neutral); color: var(--white); }
.rm2 img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.rm2 h3 { margin-bottom: 8px; }
.js-reveal .rm2 .row { transform: translateY(44px); transition: transform 640ms cubic-bezier(.22,.61,.36,1); }
.js-reveal .rm2 .row.is-visible { transform: none; }

/* Reveal motion is opt-out. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .rm2 .row { transform: none; transition: none; }
}

@media (max-width: 860px) {
  /* Rail and heading stack; the heading stops sticking. */
  .rm2-wrap { grid-template-columns: 1fr; gap: 28px; }
  .rm2-head { position: static; }

  /* The rail itself stays. A left rail is already the shape a narrow screen
     wants, so the spine, the markers and the scroll-driven fill all survive
     intact — just narrower. This is exactly why this option was chosen. */
  .rm2 { padding-left: 46px; }
  .rm2 .spine { left: 17px; }
  .rm2 .marker { width: 36px; height: 36px; font-size: 14px; left: -46px; }
  .rm2 .row { grid-template-columns: 1fr; gap: 14px; padding-bottom: 34px; }
}


/* Honeypot — off-screen, never focusable. Paired with contact-handler.php,
   which discards any submission where this field has a value. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Real photograph in the "Who we are" slot. Matches .reserved exactly, so the
   layout is identical whether the image has loaded or not.
   height:auto is load-bearing, not tidiness: the width/height attributes on the
   <img> map to CSS presentational hints, and that height hint outranks
   aspect-ratio. Without it the image renders at its literal 1050px height. The
   attributes stay because they reserve the right box before the file arrives. */
.split-img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); display: block;
}

/* ---- Services group headers ("How We Work Together" / "What We Help You Do")
   Added 2026-08-11, both relabelled 2026-08-12 into plain language.
   The two card groups previously carried sr-only headings —
   and the accordion also had an eyebrow repeating the same words — so the page
   read as one long undifferentiated run. These labels name each group and, in
   doing so, replace the hidden headings with real ones.
   The teal rule is decoration on a light surface, which the design system
   permits; it is not carrying meaning, hence aria-hidden on the span. */
.grp-head { margin-bottom: 32px; }
.grp-head .row { display: flex; align-items: center; gap: 22px; }
.grp-head h2 { margin: 0; white-space: nowrap; }
.grp-head .rule { flex: 1; height: 2px; background: var(--cool-teal); opacity: 0.55; }
.grp-head .lede { margin: 18px 0 0; }

@media (max-width: 620px) {
  /* the label wraps at narrow widths; let it, and drop the rule rather than
     squeezing it into a stub beside two lines of heading */
  .grp-head h2 { white-space: normal; }
  .grp-head .rule { display: none; }
}

/* ---- Accordion "Includes:" line ------------------------------------------
   Secondary detail under each expanded row. Deliberately quieter than .body —
   smaller, softer ink, and the label in teal — so the short description stays
   the primary content and the taxonomy sits underneath it. */
.support-acc .incl {
  margin-top: 10px;
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
.support-acc .incl span {
  font-weight: var(--w-label); color: var(--cool-teal-text);
}


/* ---- Group CTA beneath the homepage service cards ------------------------
   Replaces the "Explore services →" cue that used to sit in each card, so the
   group has one call to action instead of three. Added 2026-08-12. */
.cards-cta { margin: 34px 0 0; text-align: center; }

/* Strapline in teal, per Elizabeth 2026-08-12.
   Canvas uses --cool-teal-text (5.23:1). Azure needed a brighter value: none of
   the existing teals cleared AA against it (--cool-teal 2.13, --cool-teal-on-dark
   3.09), so --cool-teal-bright was added and measures 4.67:1. Both surfaces now
   pass AA; no accessibility exception is claimed for either. */
.card-navy .strap { color: var(--cool-teal-bright); }   /* 4.67:1 on azure */
.card-light .strap { color: var(--cool-teal-text); }

/* ---- Contact: reassurance line above the form ----------------------------
   Sits between the form heading and the first field, where a hesitant visitor
   decides whether to start typing. Teal rule rather than a filled box: it
   should read as a friendly aside, not a promotional banner. */
.form-card .form-lead {
  margin: -4px 0 22px;
  padding-left: 14px;
  border-left: 3px solid var(--cool-teal);
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
}

/* Verification note in the contact panel. Quieter than .info-support — it
   answers a question rather than prompting one. */
.info-panel .info-verify {
  margin-top: 14px;
  font-size: 14px; line-height: 1.6; color: var(--medium-neutral);
}