/* pieriandx.com styles, ported from the approved prototype (9 Nov 2026).
   Page wrappers keep the prototype's ids (#pg-home, #pg-cgw, ...) so its selectors apply unchanged.
   Review tooling, review annotations and form placeholders are not ported. */
/* site.css: the prototype's shared stylesheet (loads last, after page styles) */
/* pieriandx.com prototype.
   Visual reference: Jamie's website prototype (Velsera website redesign export, Clinical and CGW-Report pages).
   Tokens and anything the prototype does not cover: Velsera 2026 Design System. */
:root {
  --navy: #0E2841;
  --navy-deep: #0A1F33;   /* prototype footer and statement bands */
  --navy-raised: #1E3A5A;
  --white: #FFFFFF;
  --wash: #F2F4F7;
  --hairline: #E2E6EC;
  --ink: #1A2230;
  --secondary: #45505F;
  --kicker: #65707F;   /* was #6B7685: 4.18:1 on --wash. Now 4.56:1 on --wash, 5.03:1 on white. */
  --source: #98A1AD;
  --orange: #F3540C;
  --teal: #2A7E96;
  --on-navy-muted: #A9B2BF;
  --on-navy-text: rgba(255, 255, 255, 0.86);
  --on-navy-eyebrow: #F89B6C;   /* orange tint for eyebrows on navy, as in the prototype */
  --orange-hover: #D9490A;
  --risk: #C0392B;
  --caution: #B07D0A;

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "IBM Plex Serif", Georgia, serif;

  --wrap: 1320px;
  --gutter: 48px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Deliberately light-only, like the production site. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 12px; }

/* ── Header ────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--hairline); background: var(--white); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--navy); line-height: 1.1; }
.brand-name { font: 500 22px/1 var(--sans); letter-spacing: -0.01em; }
.brand-name .period, .period { color: var(--orange); }
.brand-endorse { font: 400 10px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); margin-top: 4px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; color: var(--ink); font-size: 19px; padding: 8px 10px; border-radius: 4px; }
.nav a:hover { color: var(--orange); }
.nav a[aria-current="page"] { color: var(--orange); }
.nav .btn { margin-left: 8px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--hairline); border-radius: 4px; padding: 8px 10px; font: 500 19px var(--sans); color: var(--navy); }
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--hairline); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 16px; }
  .nav.open { display: flex; }
  .nav .btn { margin: 8px 0 0; text-align: center; }
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: 600 19px/1 var(--sans); padding: 14px 26px; border-radius: 4px;
  border: 1px solid var(--navy); transition: filter 160ms var(--ease), background 160ms var(--ease);
}
/* Orange primary and ghost secondary, as in the prototype. */
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
/* Orange buttons: white on #F3540C is 3.45:1. AA needs 4.5:1 for normal text but 3:1 for large text, which is
   at least 18.66px (14pt) and bold (700). So the text is 19px at 700 (decided 9 Nov 2026, option B). */
.btn-primary, .nav .btn-primary { font-weight: 700; font-variation-settings: "wght" 700; font-size: 19px; }
/* IBM Plex Sans is declared for weights 400 to 600 (so <b> and the rest keep the prototype's 600), but the file has a real 700. The weight axis is set
   directly for the buttons, which needs no second font declaration. */ /* .nav a sets 15px, so the header button needs its own selector */
/* The larger text is about a quarter wider, so the side padding drops from 26px to 20px. That keeps the two hero buttons on
   one line at desktop width, as in the approved design. The header button keeps its own padding (.nav > .btn). */
.btn-primary { padding-left: 20px; padding-right: 20px; }
.btn-primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--white); }
.btn-secondary { background: transparent; color: var(--navy); border-color: #B9C1CC; font-weight: 500; }
.btn-secondary:hover { color: var(--navy); border-color: var(--navy); }
.on-navy .btn-primary, .on-navy .btn-primary:hover { color: var(--white); }
.on-navy .btn-secondary { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.on-navy .btn-secondary:hover { color: var(--white); border-color: var(--white); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Type ──────────────────────────────────────────────── */
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--kicker); margin: 0 0 16px; }
/* Serif page and section headings, as in the prototype; sans for h3 and below. */
h1, h2, h3 { color: var(--navy); margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h3 { font-weight: 500; }
h1 { font-size: clamp(34px, 4.2vw, 48px); line-height: 1.12; max-width: 740px; }
h2 { font-size: clamp(26px, 2.8vw, 32px); line-height: 1.24; max-width: 720px; }
h3 { font-size: 19px; line-height: 1.3; }
.lede { font-size: 18px; line-height: 1.6; color: var(--secondary); max-width: 600px; margin: 22px 0 0; }
.section-intro { color: var(--secondary); max-width: 64ch; margin: 16px 0 0; }
p { margin: 0 0 14px; }
.muted { color: var(--secondary); }
.small { font-size: 14px; }

/* ── Sections ──────────────────────────────────────────── */
/* Navy hero over the convergence field (public/field.js), as in the prototype. */
.hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding: clamp(56px, 7vw, 82px) 0 clamp(56px, 7vw, 86px); }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--white); }
.hero .lede { color: var(--on-navy-text); }
.hero .eyebrow { color: rgba(255, 255, 255, 0.55); }
.hero .strip { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); font: 400 13px/1.6 var(--mono); color: var(--on-navy-muted); letter-spacing: 0.04em; max-width: 760px; }
.field { position: absolute; inset: 0; overflow: hidden; }
.field canvas { position: absolute; inset: 0; display: block; }
.field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, rgba(14, 40, 65, 0.78) 48%, rgba(14, 40, 65, 0.2) 100%); }
.section { padding: clamp(56px, 7vw, 84px) 0; }
.section + .section { border-top: 1px solid var(--hairline); }
.section.wash { background: var(--wash); border-top: 0; }
.section.wash + .section { border-top: 0; }
.section.navy { position: relative; overflow: hidden; background: var(--navy); color: var(--white); border-top: 0; }
.section.navy > .wrap { position: relative; z-index: 1; }
.band { background: var(--navy-deep); color: var(--white); border-top: 0; }
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--white); }
.on-navy .eyebrow { color: var(--on-navy-eyebrow); }
/* Clinical Services heroes: one shared scene, the lab seen through glass from an interpretation and operations desk. */
.cs-hero { background: radial-gradient(120% 90% at 78% 55%, #16344f 0%, #0e2841 55%, #0a1f33 100%); }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cs-scene { margin: 0; }
.cs-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.cs-room { fill: none; stroke: #34567A; stroke-width: 1; }
.cs-glass { fill: rgba(157, 195, 212, 0.05); stroke: #4A6E92; stroke-width: 1; }
.cs-ink { fill: var(--navy); stroke: #7593B1; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.cs-lab { opacity: 0.85; }
.cs-screen { fill: #14304B; }
.cs-axis { fill: none; stroke: #34567A; }
.cs-led { fill: #2D4E72; transition: fill 400ms var(--ease); transition-delay: calc(var(--i) * 450ms + 300ms); }
.cs-u { fill: #4A6683; } .cs-l { fill: #2D4E72; } .cs-o { fill: var(--orange); } .cs-panel { fill: #1E3A5A; } .cs-hit { opacity: 0.85; }
.cs-f { opacity: 0; transition: opacity 450ms var(--ease); transition-delay: var(--d); }
.cs-gx { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 600ms var(--ease); transition-delay: var(--d); }
.cs-target { fill: none; stroke: #2D4E72; stroke-width: 1; stroke-dasharray: 2 3; }
.cs-spark { fill: none; stroke: #9DB4CC; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1200ms var(--ease) 2200ms; }
.cs-scene.is-on .cs-led { fill: var(--orange); }
.cs-scene.is-on .cs-f { opacity: 1; }
.cs-scene.is-on .cs-hit { opacity: 0.85; }
.cs-scene.is-on .cs-gx { transform: none; }
.cs-scene.is-on .cs-spark { stroke-dashoffset: 0; }
.cs-scene.cs-reset .cs-led, .cs-scene.cs-reset .cs-f, .cs-scene.cs-reset .cs-gx, .cs-scene.cs-reset .cs-spark { transition: none !important; }
@media (max-width: 900px) { .cs-hero-grid { grid-template-columns: 1fr; gap: 36px; } .cs-scene { max-width: 520px; } }
@media (prefers-reduced-motion: reduce) { .cs-led, .cs-f, .cs-gx, .cs-spark { transition: none !important; } }
/* Outcome checklist ("What success looks like"), shared by the Clinical Services pages. */
.oc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; margin-bottom: 32px; }
.oc-split .section-head { margin-bottom: 0; }
.oc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.oc-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); font: 500 18px/1.4 var(--sans); color: var(--white); }
.oc-n { font: 500 13px var(--mono); letter-spacing: 0.08em; color: var(--orange); }
@media (max-width: 900px) { .oc-split { grid-template-columns: 1fr; gap: 32px; } }

.oc-list li { grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
.oc-check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.32); display: flex; align-items: center; justify-content: center; transition: background 300ms var(--ease), border-color 300ms var(--ease); }
.oc-check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 360ms var(--ease); }
.oc-split.is-seen .oc-check { background: var(--orange); border-color: var(--orange); }
.oc-split.is-seen .oc-check svg { stroke-dashoffset: 0; }
.oc-split.oc-reset .oc-check, .oc-split.oc-reset .oc-check svg { transition: none !important; }
.oc-list li:nth-child(1) .oc-check, .oc-list li:nth-child(1) .oc-check svg { transition-delay: 200ms; }
.oc-list li:nth-child(2) .oc-check, .oc-list li:nth-child(2) .oc-check svg { transition-delay: 550ms; }
.oc-list li:nth-child(3) .oc-check, .oc-list li:nth-child(3) .oc-check svg { transition-delay: 900ms; }
.oc-list li:nth-child(4) .oc-check, .oc-list li:nth-child(4) .oc-check svg { transition-delay: 1250ms; }
.oc-list li:nth-child(5) .oc-check, .oc-list li:nth-child(5) .oc-check svg { transition-delay: 1600ms; }
/* Certification hero: the shared scene zoomed in on one analyst classifying a variant. */
.sd-card { fill: #1E3A5A; } .sd-q { fill: #7593B1; } .sd-var { fill: var(--orange); } .sd-opt { fill: #2D4E72; } .sd-topt { fill: #2D4E72; }
.sd-rule, .sd-divide { fill: none; stroke: #34567A; }
.sd-ev { fill: #2D4E72; }
.sd-ev.met { transition: fill 300ms var(--ease); transition-delay: var(--d); }
.sd-tchip { opacity: 0.55; transition: opacity 300ms var(--ease); }
.sd-tring { fill: none; stroke: transparent; stroke-width: 1.4; transition: stroke 300ms var(--ease) 1500ms; }
.sd-track { fill: #2D4E72; }
.sd-prog { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1600ms var(--ease) 300ms; }
.sd-submit { fill: none; stroke: #F3540C; stroke-width: 1.2; opacity: 0; transition: opacity 400ms var(--ease) 2200ms; }
.cs-scene.is-on .sd-ev.met { fill: #9DC3D4; }
.cs-scene.is-on .sd-sel .sd-tring { stroke: #fff; }
.cs-scene.is-on .sd-sel .sd-tchip { opacity: 1; transition-delay: 1500ms; }
.cs-scene.is-on .sd-prog { transform: none; }
.cs-scene.is-on .sd-submit { opacity: 1; }
.cs-scene.cs-reset .sd-ev, .cs-scene.cs-reset .sd-tring, .cs-scene.cs-reset .sd-tchip, .cs-scene.cs-reset .sd-prog, .cs-scene.cs-reset .sd-submit { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sd-ev, .sd-tring, .sd-tchip, .sd-prog, .sd-submit { transition: none !important; } }
/* Breadcrumb link back to the Clinical Services overview on its subpages. */
.eyebrow a.crumb { color: inherit; text-decoration: underline; text-decoration-color: rgba(248, 155, 108, 0.45); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 200ms var(--ease); }
.eyebrow a.crumb:hover, .eyebrow a.crumb:focus-visible { text-decoration-color: currentColor; }
.eyebrow a.crumb:focus-visible { outline: 2px solid #F89B6C; outline-offset: 3px; border-radius: 2px; }
.on-navy .section-intro, .on-navy .lede, .on-navy .muted { color: var(--on-navy-text); }
.on-navy a { color: var(--white); }
.band { padding: 28px 0; }
.band p { margin: 0; font: 400 clamp(20px, 2.2vw, 26px)/1.35 var(--serif); }
.section-head { margin-bottom: 40px; }

/* ── Grids and cards ───────────────────────────────────── */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  position: relative; background: var(--white); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 34px 32px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 300ms ease;
}
.card:hover { box-shadow: 0 14px 40px rgba(14, 40, 65, 0.10); }
.wash .card { background: var(--white); }
.card::after { content: ""; position: absolute; left: 32px; right: 100%; bottom: 0; height: 2px; background: var(--orange); transition: right 450ms cubic-bezier(.2, .7, .2, 1); }
.card:hover::after { right: 32px; }
.card h3 { margin-bottom: 2px; }
.card p { margin: 0; color: var(--secondary); }
.card .num { font: 500 13px var(--mono); color: var(--orange); letter-spacing: 0.1em; }
.card .quote { font-size: 18px; color: var(--navy); font-weight: 500; }
.card .answer { border-top: 1px solid var(--hairline); padding-top: 12px; margin-top: auto; color: var(--ink); }
.card .more { margin-top: auto; font-weight: 500; text-decoration: none; }
.card .more::after { content: " \2192"; }
.on-navy .card { background: var(--navy-raised); border-color: var(--navy-raised); color: var(--white); }
.on-navy .card p { color: var(--on-navy-muted); }

/* ── Steps (CGW walkthrough) ───────────────────────────── */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 16px 24px; padding: 28px 0; border-bottom: 1px solid var(--hairline); }
.step .n { font: 500 14px var(--mono); color: var(--orange); letter-spacing: 0.1em; padding-top: 4px; }
.step h3 { margin-bottom: 8px; }
.step .gate { font-size: 15px; color: var(--secondary); background: var(--wash); border-left: 2px solid var(--navy); padding: 10px 14px; margin-top: 12px; }
.step .gate b { font: 500 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); display: block; margin-bottom: 4px; }
@media (min-width: 900px) { .step { grid-template-columns: 64px 1fr 340px; } .step .visual { grid-column: 3; grid-row: 1 / span 3; } }

/* ── Lists ─────────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 22px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 1px; background: var(--navy); }
.cols { columns: 2 260px; column-gap: 40px; }
.cols li { break-inside: avoid; }
dl.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; margin: 0; border-top: 1px solid var(--hairline); }
dl.kv dt, dl.kv dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
dl.kv dt { font: 500 12px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--kicker); padding-right: 16px; }

/* ── Tables ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--navy); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th { text-align: left; font: 500 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); padding: 12px 12px 10px 0; border-bottom: 1px solid var(--hairline); }
table.data td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.data tr.group td { font: 500 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); padding-top: 22px; }

/* ── FAQ ───────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--hairline); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 500; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--kicker); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; color: var(--secondary); max-width: 68ch; }

/* ── Forms ─────────────────────────────────────────────── */
.form { display: grid; gap: 18px; max-width: 640px; }
.field label { display: block; font-weight: 500; color: var(--navy); margin-bottom: 6px; }
.field .hint { font-size: 14px; color: var(--secondary); margin: 4px 0 0; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px var(--sans); color: var(--ink); background: var(--white);
  border: 1px solid #B9C1CC; border-radius: 4px; padding: 11px 12px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--navy); outline-offset: 0; border-color: var(--navy); }
.field .req { color: var(--kicker); font-weight: 400; font-size: 14px; }
.notice { background: var(--wash); border-left: 2px solid var(--orange); padding: 10px 14px; font-size: 15px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--secondary); }
.check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--navy); }
.error { color: var(--risk); font-size: 14px; margin-top: 4px; }

/* ── Footer ────────────────────────────────────────────── */
.site-footer { background: var(--navy-deep); color: var(--on-navy-muted); padding: 56px 0 32px; margin-top: 0; font-size: 15px; }
.site-footer .cols4 { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer h3 { font: 500 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-navy-muted); margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer .legal { border-top: 2px solid var(--navy-raised); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-size: 13px; }
.site-footer .endorse { display: flex; align-items: center; gap: 10px; }
.site-footer .endorse img { height: 16px; width: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Clinical Services sub-navigation (src/pages/_services-nav.mjs) ──
   Hairline-bordered tabs under the hero of the three service pages.
   Current tab: 2px navy underline. Deliberately no orange. */
.subnav { border-bottom: 1px solid var(--hairline); background: var(--white); }
.subnav .wrap { display: flex; flex-wrap: wrap; gap: 0; }
.subnav a {
  padding: 14px 20px; font: 500 15px var(--sans); color: var(--secondary); text-decoration: none;
  border-right: 1px solid var(--hairline); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:first-child { border-left: 1px solid var(--hairline); }
.subnav a:hover { color: var(--navy); }
.subnav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); }
@media (max-width: 640px) { .subnav a { flex: 1 1 100%; border-left: 1px solid var(--hairline); border-bottom-width: 1px; } .subnav a[aria-current="page"] { border-bottom: 2px solid var(--navy); } }

/* ── Narrow screens ────────────────────────────────────── */
body { overflow-wrap: break-word; }
.placeholder { overflow-wrap: anywhere; }
@media (max-width: 700px) { :root { --gutter: 20px; } }
@media (max-width: 600px) {
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { padding-bottom: 0; border-bottom: 0; }
  .step { grid-template-columns: 1fr; }
  .grid, .grid.two { grid-template-columns: 1fr; }
}

/* ── Navigation dropdowns (prototype mega-menu) ─────────── */
.site-header .wrap { min-height: 72px; }
.nav { gap: 0; }
.nav-item { position: relative; display: flex; align-items: center; height: 72px; }
.nav .nav-top { font-weight: 400; color: var(--navy); padding: 8px 14px; }
.nav .nav-login { margin-left: 8px; }
.drop {
  position: absolute; top: 72px; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 400px;
  background: var(--white); border: 1px solid var(--hairline); border-top: 2px solid var(--orange); border-radius: 0 0 6px 6px;
  box-shadow: 0 24px 60px rgba(14, 40, 65, 0.16); padding: 14px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 40;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav .drop-link { display: grid; gap: 4px; padding: 12px 14px; border-radius: 4px; }
.nav .drop-link:hover, .nav .drop-link[aria-current="page"] { background: var(--wash); color: var(--navy); }
/* Dropdown text matches the 19px nav (decided 10 Nov); titles stay semi-bold so they read apart from the descriptions. */
.drop-t { font-weight: 600; font-size: 19px; color: var(--navy); }
.drop-d { font-size: 16px; line-height: 1.45; color: var(--kicker); }
.nav > .btn { margin-left: 12px; padding: 10px 20px; }
@media (max-width: 1000px) {
  .nav-item { height: auto; flex-direction: column; align-items: stretch; }
  .drop { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: 0; border-left: 1px solid var(--hairline); border-radius: 0; min-width: 0; padding: 0 0 8px 12px; margin-left: 14px; }
  .has-drop:hover .drop, .has-drop:focus-within .drop { transform: none; }
  .drop-d { display: none; }
  .nav .drop-link { padding: 11px 12px; }
}
.hero-extra { margin-top: 36px; max-width: 760px; }

/* ── Navy header and PierianDx lockup ──────────────────── */
.site-header { background: var(--navy); border-bottom-color: rgba(255, 255, 255, 0.12); }
.nav .nav-top { color: var(--white); }
.nav .nav-top:hover, .nav .nav-top[aria-current="page"] { color: var(--on-navy-eyebrow); }
.nav-toggle { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.lockup { display: inline-grid; gap: 6px; text-decoration: none; padding: 10px 0; }
.lockup-mark { display: block; height: 25px; width: auto; }
.lockup-endorse { display: inline-flex; align-items: center; gap: 5px; font: 400 10.5px/1 var(--sans); letter-spacing: 0.04em; color: var(--on-navy-muted); white-space: nowrap; }
.lockup-endorse img { display: block; height: 9px; width: auto; }
@media (max-width: 1000px) { .nav { background: var(--navy); border-bottom-color: rgba(255, 255, 255, 0.12); } .drop { background: transparent; } .drop-t { color: var(--white); } .nav .drop-link:hover, .nav .drop-link[aria-current="page"] { background: var(--navy-raised); } }

/* ── Sequencer hero (Home), from the Clinical prototype ── */
.sequencer { position: absolute; inset: 0; overflow: hidden; }
.sequencer canvas { width: 100%; height: 100%; display: block; }
.sequencer .seq-label { position: absolute; bottom: 18px; transform: translateX(-50%); font: 400 10.5px var(--mono); letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.sequencer-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 40, 65, 0.55) 0%, rgba(14, 40, 65, 0.15) 30%, rgba(14, 40, 65, 0.15) 62%, rgba(14, 40, 65, 0.9) 100%); }
.sequencer-stage { height: 250px; margin-bottom: 8px; }
@media (max-width: 700px) { .sequencer-stage { height: 170px; } }
/* Keep the animation in the stage above the headline, not behind it. */
.has-sequencer .sequencer, .has-sequencer .sequencer-shade { inset: 0 0 auto 0; height: calc(clamp(56px, 7vw, 82px) + 270px); }
@media (max-width: 700px) { .has-sequencer .sequencer, .has-sequencer .sequencer-shade { height: calc(56px + 190px); } }

/* ── Demo request modal (HubSpot form placeholder) ─────── */
.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-top: 3px solid var(--orange); border-radius: 4px; padding: 28px 32px 32px; color: var(--ink); background: var(--white); box-shadow: 0 24px 60px rgba(14, 40, 65, 0.3); }
.modal::backdrop { background: rgba(10, 31, 51, 0.6); }
/* The form modals open with dialog.show(), not showModal(), so they are NOT in the top layer and Google's reCAPTCHA challenge
   (z-index 2147483647) can appear above them. They get their own backdrop; see public/js/chrome.js. */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 31, 51, 0.6); }
.modal-backdrop[hidden] { display: none; }
dialog.modal[open] { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 1001; overflow-y: auto; }
.modal h2 { font-size: clamp(24px, 3vw, 28px); margin-bottom: 12px; }
.modal .notice { margin: 16px 0; }
.modal .placeholder { min-height: 260px; }
.modal-close-row { display: flex; justify-content: flex-end; margin: -12px -16px 0 0; }
.modal-close { background: none; border: 0; font: 400 28px/1 var(--sans); color: var(--kicker); cursor: pointer; padding: 4px 8px; }
.modal-close:hover { color: var(--navy); }
@media (max-width: 600px) { .modal { padding: 20px; } }

/* ── Problem grid and icon tiles ───────────────────────── */
.problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--hairline); }
.problem { padding: 32px 32px 8px 0; }
.problem + .problem { border-left: 1px solid var(--hairline); padding-left: 32px; }
.problem h3 { margin-bottom: 12px; }
.problem p { color: var(--secondary); font-size: 15.5px; margin: 0; }
@media (max-width: 780px) { .problem, .problem + .problem { border-left: 0; padding: 24px 0 0; } .problem + .problem { border-top: 1px solid var(--hairline); margin-top: 16px; } }
/* Tier 1 icon tile (Velsera Design System), sized for cards. */
.icon-tile { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
  background: linear-gradient(180deg, #FFFFFF 60%, #F4F6F9 100%); border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(14, 40, 65, 0.06), 0 4px 10px rgba(14, 40, 65, 0.05); }
.icon-tile img { width: 34px; height: 34px; }
.card .num { color: var(--kicker); }

/* ── Assay carousel (public/carousel.js) ───────────────── */
.carousel { position: relative; margin: 40px 0 8px; }
.carousel-track { position: relative; height: 206px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.c-card { position: absolute; top: 10px; left: 50%; width: min(300px, 78vw); height: 180px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--hairline); border-radius: 4px; cursor: pointer;
  transition: transform 600ms var(--ease), opacity 600ms var(--ease), box-shadow 300ms ease; }
.c-card.is-centre { cursor: default; border-color: #CBD3DD; box-shadow: 0 14px 40px rgba(14, 40, 65, 0.10); }
a.c-card.is-centre { cursor: pointer; }
.c-card.is-centre::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; background: var(--orange); }
.c-vendor { font: 500 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); }
.c-name { font: 400 21px/1.25 var(--serif); color: var(--navy); }
.c-type { font: 500 12px var(--mono); color: var(--secondary); margin-top: auto; }
.c-more { font-size: 14px; font-weight: 500; color: var(--navy); }
.c-more::after { content: " \2192"; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.c-btn { width: 40px; height: 40px; border-radius: 4px; border: 1px solid #B9C1CC; background: var(--white); color: var(--navy); font: 400 18px/1 var(--sans); cursor: pointer; }
.c-btn:hover { border-color: var(--navy); }
.c-count { font: 400 12px var(--mono); letter-spacing: 0.08em; color: var(--kicker); min-width: 64px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .c-card { transition: none; } }

/* ── Feature rows (Home: software and people) ──────────── */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding: 8px 0 56px; }
.feature + .feature { border-top: 1px solid var(--hairline); padding-top: 56px; padding-bottom: 0; }
.feature.flip .feature-copy { order: 2; }
.feature h3 { font: 400 clamp(24px, 2.4vw, 28px)/1.2 var(--serif); margin-bottom: 14px; }
.feature-body { color: var(--secondary); max-width: 52ch; }
.feature .ticks { margin: 18px 0 22px; font-size: 15.5px; }
.feature .more { font-weight: 500; text-decoration: none; }
.feature .more::after { content: " \2192"; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 28px; } .feature.flip .feature-copy { order: 0; } }

/* Illustrative CGW case view */
.mock { margin: 0; background: var(--navy); border-radius: 6px; padding: 18px; color: #DCE6EF; box-shadow: 0 24px 60px rgba(14, 40, 65, 0.18); font: 400 13px/1.4 var(--mono); }
.mock-bar, .mock-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; color: var(--on-navy-muted); font-size: 11.5px; letter-spacing: 0.04em; }
.mock-bar { border-bottom: 2px solid var(--orange); padding-bottom: 10px; margin-bottom: 6px; }
.mock-status { color: #F89B6C; }
.mock-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mock-table th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy-muted); padding: 10px 6px 6px 0; }
.mock-table td { padding: 9px 6px 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--white); }
.tier { display: inline-block; min-width: 30px; text-align: center; padding: 1px 6px; border-radius: 2px; font-size: 11px; }
.tier.t1 { background: var(--orange); color: var(--white); }
.tier.t2 { background: #2A7E96; color: var(--white); }
.tier.t3 { background: #45607C; color: #DCE6EF; }
.mock-foot { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 10px; margin-top: 4px; }
.mock figcaption { margin-top: 14px; font: 400 12px/1.5 var(--sans); color: var(--on-navy-muted); }

/* Clinical Services path */
.path { margin: 0; background: var(--white); border: 1px solid var(--hairline); border-radius: 6px; padding: 26px; box-shadow: 0 14px 40px rgba(14, 40, 65, 0.08); }
.path figcaption { margin-top: 16px; font: 400 12px/1.5 var(--sans); color: var(--kicker); }
.path-stages { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kicker); }
.path-stages::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 1px; background: #B9C1CC; }
.path-stages li { position: relative; padding-top: 20px; }
.path-stages li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--white); border: 1px solid var(--navy); box-sizing: border-box; }
.path-areas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.area { border-radius: 4px; padding: 12px 14px; display: grid; gap: 4px; font-size: 13.5px; }
.area b { font-weight: 600; color: var(--navy); font-size: 14px; }
.area span { color: var(--secondary); }
.area.a1 { grid-column: 1 / span 4; background: var(--wash); border-left: 2px solid var(--navy); }
.area.a2 { grid-column: 5 / span 2; background: #E8F1F4; border-left: 2px solid var(--teal); }
.area.a3 { grid-column: 1 / span 6; background: #FFF4EE; border-left: 2px solid var(--orange); }
@media (max-width: 560px) { .path { padding: 18px; } .path-stages { font-size: 9px; letter-spacing: 0.02em; } .area.a1, .area.a2, .area.a3 { grid-column: 1 / -1; } }
.path-areas { align-items: start; }
/* Sequencer sits behind the hero text at reduced strength (review comment, 7 Oct 2026). */
.has-sequencer .sequencer, .has-sequencer .sequencer-shade { inset: 0; height: auto; }
.has-sequencer .sequencer { opacity: 0.42; }
.has-sequencer .sequencer-shade { background: linear-gradient(90deg, rgba(14, 40, 65, 0.92) 0%, rgba(14, 40, 65, 0.7) 42%, rgba(14, 40, 65, 0.15) 100%); }
.has-sequencer { padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(80px, 9vw, 120px); }
@media (max-width: 700px) { .has-sequencer .sequencer { opacity: 0.25; } }
.has-sequencer .sequencer { opacity: 0.6; }
.has-sequencer .sequencer-shade { background: linear-gradient(90deg, rgba(14, 40, 65, 0.72) 0%, rgba(14, 40, 65, 0.5) 45%, rgba(14, 40, 65, 0.1) 100%); }
/* Text call-to-action link */
.cta-link { margin: 20px 0 0; text-align: center; }
.cta-link a { font-weight: 600; text-decoration: none; color: var(--navy); border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.cta-link a::after { content: " \2192"; }
.cta-link a:hover { color: var(--orange); }

/* ── PierianDx lockup (Velsera brand guidelines: sub-brand family) ──
   Wordmark: IBM Plex Sans Medium 500, two-part split. Light grounds: root navy
   #0E2841 + suffix steel #506F87. On navy: the split collapses to all white.
   Never orange. Endorsement: mono kicker grey between hairlines, centred under
   the wordmark, never competing with it. Clear space: half the cap height.
   Built as live text until the vector family (/assets/brands/family/) is supplied. */
.lockup { display: inline-grid; justify-items: center; gap: 5px; text-decoration: none; padding: 10px 0; }
.wordmark { font: 500 26px/1 var(--sans); letter-spacing: -0.01em; color: var(--navy); white-space: nowrap; }
.wordmark .wm-suffix { color: #506F87; }
.lockup-endorse { display: flex; align-items: center; gap: 8px; width: 100%; font: 400 8.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--kicker); white-space: nowrap; }
.lockup-endorse::before, .lockup-endorse::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.6; }
.on-navy .wordmark, .site-header .wordmark, .on-navy .wordmark .wm-suffix, .site-header .wordmark .wm-suffix { color: var(--white); }
.site-header .lockup-endorse, .site-footer .lockup-endorse { color: var(--on-navy-muted); }
.site-header .lockup:hover .wordmark { color: var(--white); }
.lockup-endorse { width: calc(100% + 36px); margin: 0 -18px; }
.lockup-endorse::before, .lockup-endorse::after { min-width: 12px; }

/* Problem → How we help: one continuous story (review comment, 7 Oct 2026).
   No rule or gap between them; a short orange connector runs down from the
   problem grid into the answers, which sit on a soft wash fade. */
.section.leads { padding-bottom: 0; }
.section.leads .problems { border-bottom: 1px solid var(--hairline); padding-bottom: 32px; }
.section.continues { border-top: 0; padding-top: 0; background: linear-gradient(180deg, var(--white) 0%, var(--wash) 100%); }
.section.continues .section-head { position: relative; padding-top: 72px; }
.section.continues .section-head::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 52px; background: linear-gradient(180deg, var(--hairline), var(--orange)); }
.section.continues + .section.wash { padding-top: clamp(40px, 5vw, 64px); }

/* ── Problem flip cards (review comment, 7 Oct 2026) ─────
   Hover or keyboard focus turns the card. Touch screens (no hover) show both
   faces stacked; reduced motion swaps faces with a fade instead of a turn. */
.section.leads .problems { border-top: 0; border-bottom: 0; padding-bottom: 32px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.problem, .problem + .problem { border: 0; padding: 0; margin: 0; perspective: 1200px; outline: none; }
.problem .flip { position: relative; height: 210px; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.problem:hover .flip, .problem:focus-visible .flip { transform: rotateY(180deg); }
.problem .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; padding: 28px 30px; display: flex; flex-direction: column; }
.problem .front { background: var(--white); border: 1px solid var(--hairline); }
.problem .front h3 { font: 400 clamp(24px, 2.2vw, 28px)/1.2 var(--serif); margin-top: 14px; }
.problem .p-num { font: 500 12px var(--mono); letter-spacing: 0.16em; color: var(--orange); }
.problem .p-hint { margin-top: auto; font: 500 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); }
.problem .p-hint::after { content: " \21BB"; }
.problem .back { background: var(--navy); color: var(--white); transform: rotateY(180deg); justify-content: center; }
.problem .back h3 { color: var(--on-navy-eyebrow); font: 500 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.problem .back p { color: var(--on-navy-text); font-size: 16.5px; line-height: 1.55; margin: 0; }
.problem:focus-visible .flip { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
@media (hover: none) {
  .problem .flip { height: auto; transform: none !important; }
  .problem .face { position: relative; backface-visibility: visible; transform: none; }
  .problem .front { border-bottom: 0; border-radius: 4px 4px 0 0; padding-bottom: 8px; }
  .problem .back { border-radius: 0 0 4px 4px; }
  .problem .back h3, .problem .p-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .problem .flip { transform: none !important; transition: none; }
  .problem .back { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .problem:hover .back, .problem:focus-visible .back { opacity: 1; }
}

/* ── Problem and help: one panel, cross-referenced (review comment, 7 Oct 2026) ──
   Both sections share one wash panel with no divider. Problem cards are navy
   and turn to white. Each problem's back names the help areas that answer it;
   each help card carries the numbers of the problems it answers, and hovering
   either side lights up the other. The vertical connector line is removed. */
.section.leads, .section.continues { background: var(--wash); }
.section.continues .section-head { padding-top: 64px; }
.section.continues .section-head::before { display: none; }
.section.leads .problems { padding-bottom: 8px; }

.problem .front { background: var(--navy); border-color: var(--navy); }
.problem .front h3 { color: var(--white); }
.problem .p-num { color: var(--on-navy-eyebrow); }
.problem .p-hint { color: var(--on-navy-muted); }
.problem .back { background: var(--white); border: 1px solid var(--hairline); color: var(--ink); }
.problem .back h3 { color: var(--kicker); }
.problem .back p { color: var(--secondary); }
.problem .back .p-helps { margin-top: 14px; font-size: 14px; color: var(--kicker); }
.p-helps a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); }
.problem.is-linked .front { box-shadow: 0 0 0 2px var(--orange); }

.card .answers { position: absolute; top: 26px; right: 26px; display: flex; gap: 4px; }
.card .answers b { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--orange); border: 1px solid #F6C3A9; border-radius: 2px; padding: 4px 5px; background: #FFF6F1; }
.card.is-linked { border-color: var(--orange); box-shadow: 0 14px 40px rgba(243, 84, 12, 0.12); }
.card[id] { scroll-margin-top: 110px; }
@media (hover: none) { .problem .back { border-top: 0; } }
/* Assay carousel on navy (Home): the section is set apart on a navy ground. */
.on-navy .c-btn { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.on-navy .c-btn:hover { border-color: var(--white); }
.on-navy .c-count { color: var(--on-navy-muted); }
.on-navy .cta-link a { color: var(--white); }
.on-navy .cta-link a:hover { color: var(--on-navy-eyebrow); }
.on-navy .c-card.is-centre { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }

/* ══ 7 Oct comment sweep ══════════════════════════════════ */

/* Header "Request a demo": white type in every state. */
.nav .btn-primary, .nav .btn-primary:hover, .nav .btn-primary:focus, .nav .btn-primary:active { color: var(--white); }

/* Three-column card grid (3 × 2 layouts). */
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid.three { grid-template-columns: 1fr; } }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid.four { grid-template-columns: 1fr; } }
.grid.compact .card { padding: 22px 22px 24px; }
.grid.compact .card h3 { font-size: 16px; }
.section.navy .card { background: var(--white); border-color: var(--white); }
.section.navy .card h3 { color: var(--navy); }
.section.navy .card p { color: var(--secondary); }

/* Flip cards with a headline figure (Knowledgebase coverage). */
.problems.flips { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 0; margin-bottom: 24px; }
.problem.stat .flip { height: 190px; }
.problem.stat .front { background: var(--navy); border-color: var(--navy); justify-content: space-between; }
.stat-num { font: 400 clamp(40px, 4.2vw, 52px)/1 var(--serif); color: var(--white); }
.problem.stat .p-hint { color: var(--on-navy-muted); }
.problem.stat .back { background: var(--white); border: 1px solid var(--hairline); }
.problem.stat .back p { color: var(--ink); font-size: 16px; }

/* Tabs. */
.tabs .tab-list { display: none; }
.tabs.is-ready .tab-list { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--hairline); margin-bottom: 32px; }
.tabs.is-ready .tab-title { display: none; }
.tab-list [role="tab"] { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 20px; font: 500 15px var(--sans); color: var(--secondary); cursor: pointer; }
.tab-list [role="tab"]:hover { color: var(--navy); }
.tab-list [role="tab"][aria-selected="true"] { color: var(--navy); border-bottom-color: var(--orange); }
.tab-panel + .tab-panel { margin-top: 40px; }
.tabs.is-ready .tab-panel + .tab-panel { margin-top: 0; }
.tab-title { font: 400 24px/1.2 var(--serif); margin-bottom: 16px; }
.tab-panel > p:first-of-type { max-width: 68ch; }
.tab-panel .ticks { margin: 16px 0 20px; }
@media (max-width: 600px) { .tab-list [role="tab"] { padding: 12px 12px; font-size: 14px; } }

/* Assay menu filter. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.filter-table:not(.is-ready) .filter-bar { display: none; }
.filter-btn { font: 500 14px var(--sans); color: var(--navy); background: var(--white); border: 1px solid #B9C1CC; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.filter-btn:hover { border-color: var(--navy); }
.assay-menu .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-lbl { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary); min-width: 112px; }
.assay-menu .filter-count { margin: 4px 0 16px; color: var(--secondary); font-size: 15px; }
.form-card { background: var(--white); color: var(--ink); border-radius: 4px; padding: 28px; }
.on-navy .notice { background: rgba(255, 255, 255, 0.07); color: var(--on-navy-text); }
.ev-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.ev-list li { border-bottom: 1px solid var(--hairline); }
.ev { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px 12px 24px 0; color: inherit; text-decoration: none; transition: background 200ms var(--ease), padding 200ms var(--ease); }
.ev:hover { background: var(--white); padding-left: 16px; }
.wash .ev:hover { background: var(--white); }
.ev:focus-visible { outline: 2px solid #0A3FFF; outline-offset: 2px; }
.ev-date { display: flex; flex-direction: column; gap: 2px; }
.ev-date b { font: 500 22px/1.1 var(--sans); color: var(--navy); }
.ev-date span { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kicker); }
.ev-body { display: flex; flex-direction: column; gap: 4px; }
.ev-name { font: 600 20px/1.3 var(--sans); color: var(--navy); }
.ev-meta { font-size: 15px; color: var(--secondary); }
.ev-what { font-size: 16px; color: var(--ink); }
.ev-cta { font-weight: 500; color: var(--navy); white-space: nowrap; }
.ev:hover .ev-cta { color: #B8400A; }
@media (max-width: 760px) { .ev { grid-template-columns: 1fr; gap: 8px; } .ev-date { flex-direction: row; gap: 10px; align-items: baseline; } }
.filter-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter-count { margin-left: auto; font: 400 12px var(--mono); letter-spacing: 0.06em; color: var(--kicker); }

/* CGW pipeline walkthrough. */
.pipeline { --pl-pos: 0%; background: var(--white); border: 1px solid var(--hairline); border-radius: 6px; padding: 28px 28px 32px; box-shadow: 0 14px 40px rgba(14, 40, 65, 0.08); }
.pl-head { display: flex; align-items: flex-start; gap: 16px; }
.pl-rail { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.pl-rail::before, .pl-rail::after { content: ""; position: absolute; left: 7px; top: 7px; height: 2px; }
.pl-rail::before { right: calc(100% / 6 - 8px); background: var(--hairline); }
.pl-rail::after { background: var(--orange); transition: width 600ms var(--ease); }
.pipeline .pl-rail::after { width: var(--pl-pos); max-width: calc(100% - 14px); }
.pl-stop { position: relative; z-index: 1; display: grid; gap: 4px; justify-items: start; text-align: left; background: none; border: 0; padding: 24px 6px 6px 0; cursor: pointer; color: var(--secondary); width: 100%; }
.pl-stop::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid #B9C1CC; box-sizing: border-box; transition: border-color 300ms, background 300ms; }
.pl-stop.is-done::before { border-color: var(--orange); background: var(--orange); }
.pl-stop.is-active::before { border-color: var(--orange); background: var(--white); box-shadow: 0 0 0 5px rgba(243, 84, 12, 0.15); }
.pl-n { font: 500 11px var(--mono); letter-spacing: 0.12em; color: var(--kicker); }
.pl-short { font: 500 15px/1.2 var(--sans); color: var(--navy); }
.pl-art { font: 400 10.5px var(--mono); letter-spacing: 0.1em; color: var(--kicker); text-transform: uppercase; }
.pl-stop.is-active .pl-short { color: var(--orange); }
.pl-play { flex: none; font: 500 19px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); background: var(--white); border: 1px solid #B9C1CC; border-radius: 4px; padding: 7px 12px; cursor: pointer; }
.pipeline:not(.is-ready) .pl-head, .pipeline:not(.is-ready) .pl-progress { display: none; }
.pl-progress { height: 2px; background: var(--wash); margin: 18px 0 28px; }
.pl-progress span { display: block; height: 100%; width: 0; background: var(--navy); }
.pl-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; animation: pl-in 400ms var(--ease); }
.pipeline:not(.is-ready) .pl-panel + .pl-panel { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.pl-copy h3 { font: 400 clamp(22px, 2.2vw, 26px)/1.25 var(--serif); margin-bottom: 12px; }
.pl-copy p { color: var(--secondary); }
.pl-copy .gate { font-size: 15px; background: var(--wash); border-left: 2px solid var(--orange); padding: 10px 14px; margin-top: 16px; }
.pl-copy .gate b { font: 500 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); display: block; margin-bottom: 4px; }
.pl-screen { background: var(--navy); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px rgba(14, 40, 65, 0.18); }
.pl-screen-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 2px solid var(--orange); font: 400 11px var(--mono); letter-spacing: 0.06em; color: var(--on-navy-muted); }
.pl-screen-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.pl-screen-bar span { margin-left: 8px; }
.pl-screen-body { min-height: 230px; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font: 400 13px/1.5 var(--mono); color: var(--on-navy-muted); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, 0.025) 10px 20px); }
.pl-screen-body .tag { font-size: 11.5px; }
.pl-screen-body.has-shot { display: block; min-height: 0; padding: 0; background: #FFFFFF; }
.report-example { margin: 32px 0 0; max-width: 760px; }
/* Knowledgebase hero: source stream (proposal C) */
.kb-hero { background: radial-gradient(120% 90% at 78% 55%, #16344f 0%, #0e2841 55%, #0a1f33 100%); }
.kb-hero .wrap { position: relative; z-index: 2; }
.kb-hero-copy { max-width: 620px; }
.kbs { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.kbs-row { overflow: hidden; white-space: nowrap; }
.kbs-track { display: inline-flex; gap: 32px; animation: kbs-drift var(--dur) linear infinite; animation-direction: var(--dir); }
.kbs-track span { font: 500 15px var(--mono); letter-spacing: 0.08em; color: #2D4E72; }
.kbs-track span.hot { color: var(--orange); }
@keyframes kbs-drift { to { transform: translateX(-50%); } }
.kbs-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 31, 51, 0.97) 0%, rgba(14, 40, 65, 0.9) 42%, rgba(14, 40, 65, 0.2) 75%, rgba(14, 40, 65, 0) 100%); }
@media (max-width: 860px) { .kbs-shade { background: rgba(10, 31, 51, 0.88); } }
@media (prefers-reduced-motion: reduce) { .kbs-track { animation: none; } }

.rx { display: grid; grid-template-columns: minmax(200px, 25%) minmax(0, 520px); gap: 48px; align-items: stretch; margin: 8px 0 28px; }
.section.wash#cgw-reports { padding-bottom: 32px; }
.cgw-continues { padding-top: 24px; }
.section-intro.full { max-width: none; }
.rx-figure { margin: 0; }
.rx-frame { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: 4px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(14, 40, 65, 0.10); }
.rx-frame img { display: block; width: 100%; height: auto; }
.rx-spot { position: absolute; left: 0; right: 0; top: 0; height: 0; outline: 2px solid var(--orange); outline-offset: -2px; box-shadow: 0 0 0 2000px rgba(226, 230, 236, 0.78); opacity: 0; transition: opacity 250ms var(--ease), top 300ms var(--ease), height 300ms var(--ease); pointer-events: none; }
.rx.is-on .rx-spot { opacity: 1; }
.rx-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--secondary); }
.rx-boxes { display: flex; flex-direction: column; gap: 16px; }
.rx-boxes .rx-box { flex: 1 1 0; justify-content: center; }
.rx-note { margin: 0; color: var(--ink); font-size: 15px; }
.rx-box { cursor: pointer; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.rx-box.is-active { border-color: var(--orange); box-shadow: 0 8px 24px rgba(14, 40, 65, 0.08); }
.rx-box:focus-visible { outline: 2px solid #0A3FFF; outline-offset: 3px; }
@media (max-width: 860px) { .rx { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rx-spot { transition: none; } }
.pull-quote { margin: 0 auto; max-width: 860px; text-align: center; }
.pull-quote::before { content: ""; display: block; width: 48px; height: 3px; margin: 0 auto 24px; background: var(--orange); }
#cgw-proof .section-head.centered { text-align: center; align-items: center; margin-left: auto; margin-right: auto; max-width: 860px; }
#cgw-proof .section-head.centered h2 { width: 100%; max-width: none; text-align: center; margin-left: auto; margin-right: auto; }
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p { margin: 0; font: 400 clamp(22px, 2.2vw, 28px)/1.45 var(--serif); color: var(--navy); }
.pull-quote figcaption { margin-top: 18px; color: var(--secondary); font-size: 16px; }
.pull-quote .pq-name { color: var(--ink); font-weight: 600; }
.report-example img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: 4px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(14, 40, 65, 0.10); }
.report-example figcaption { margin-top: 10px; font-size: 14px; color: var(--secondary); }
.proof-pair { align-items: stretch; }
.proof-pair .card { justify-content: center; }
.pl-screen-body.has-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
@keyframes pl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pl-panel { animation: none; } }
@media (max-width: 860px) {
  .pl-panel { grid-template-columns: 1fr; gap: 24px; }
  .pl-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .pl-rail::before, .pl-rail::after { display: none; }
  .pipeline { padding: 20px; }
}

/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }
.stat-num { white-space: nowrap; font-size: clamp(32px, 3.2vw, 46px); }

/* ══ 7 Oct comment sweep 2 ════════════════════════════════ */

/* Smooth in-page scrolling (Home "Learn more"), clear of the sticky header. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 90px; }

/* CGW walkthrough: transitions about twice as fast. */
.pl-rail::after { transition-duration: 300ms; }
.pl-stop::before { transition-duration: 150ms; }
.pl-panel { animation-duration: 200ms; }

/* Static headline figures (Knowledgebase coverage). */
.stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 24px; }
.stat { background: var(--navy); border-radius: 4px; padding: 28px 28px 26px; display: grid; gap: 14px; align-content: start; }
.stat .stat-num { color: var(--white); }
.stat p { margin: 0; color: var(--on-navy-text); font-size: 15.5px; line-height: 1.5; }

/* Five cards in a row (Knowledgebase sources). */
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid.five { grid-template-columns: 1fr; } }
.grid.five .card .num { font-size: 11px; }

/* AMP team block with headshot placeholders. */
.team { display: flex; flex-wrap: wrap; gap: 28px; margin: 4px 0 18px; }
.person { margin: 0; display: flex; align-items: center; gap: 16px; }
.headshot { width: 84px; height: 84px; border-radius: 50%; background: var(--white); border: 1px dashed #B9C1CC; display: flex; align-items: center; justify-content: center; }
.headshot span { font: 400 26px var(--serif); color: var(--navy); }
img.headshot { object-fit: cover; border: 0; background: var(--hairline); flex: none; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.team-grid .person { align-items: center; }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.ev-more { margin: 20px 0 0; color: var(--secondary); }
.res-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.res-tools .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.res-search { display: block; max-width: 520px; margin-bottom: 20px; }
.res-search input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--white); color: var(--ink); }
.res-search input:focus { outline: 2px solid #0A3FFF; outline-offset: 1px; }
.pdx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.res-tools .filter-count { margin: 4px 0 20px; color: var(--secondary); font-size: 15px; }
.res-top { display: flex; align-items: center; gap: 10px; }
.res-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; background: var(--wash); flex: none; }
.res-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.res-prod { font-size: 14px; color: var(--secondary); }
.res-empty { margin-top: 16px; color: var(--secondary); }
.res-card { display: flex; flex-direction: column; gap: 8px; }
.res-card .res-meta { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kicker); margin: 0; }
.res-card h3 { margin: 0; }
.res-card p { margin: 0; }
.res-link { margin-top: auto; padding-top: 12px; font-weight: 500; color: var(--navy); text-decoration: none; }
.res-link::after { content: " \2197"; }
.res-link:hover { color: #B8400A; text-decoration: underline; text-underline-offset: 3px; }
.person figcaption { display: grid; gap: 2px; }
.person b { font-weight: 600; color: var(--navy); }
.person figcaption span { font-size: 14px; color: var(--secondary); }

/* Two-up grids stay two columns on wide screens (e.g. CGW interpretation 2x2). */
@media (min-width: 701px) { .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Flip cards with icons (Clinical Services problems). */
.problems.flipcards { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; }
@media (max-width: 1080px) { .problems.flipcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .problems.flipcards { grid-template-columns: 1fr; } }
.flipcards .problem .flip { height: 280px; }
.flipcards .front { gap: 4px; }
.flipcards .front .icon-tile { margin-bottom: 14px; }
.flipcards .front h3 { font-size: clamp(20px, 1.7vw, 23px); margin-top: 6px; }
.flipcards .back p { font-size: 15.5px; }
@media (hover: none) { .flipcards .problem .flip { height: auto; } }

/* Pipeline: any number of stops (lab journey has four). */
.pl-rail { grid-template-columns: repeat(var(--pl-n, 6), minmax(0, 1fr)); }
.pl-rail::before { right: calc(100% / var(--pl-n, 6) - 8px); }
@media (max-width: 860px) {
  .pl-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .pl-head .pl-rail { flex: none; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-play { align-self: flex-start; }
  .pl-screen-body.has-shot img { aspect-ratio: auto; }
}
.pl-chips-label { font: 500 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--kicker); margin: 20px 0 8px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pl-chips span { font: 400 12px var(--mono); padding: 4px 9px; border-radius: 3px; background: rgba(42, 126, 150, 0.10); border: 1px solid rgba(42, 126, 150, 0.35); color: #1F5F72; }
/* Built illustrations inside the screen frame (light ground). */
.pl-screen-body.has-viz { display: block; text-align: left; background: var(--wash); color: var(--ink); padding: 24px 26px; font: 400 14px var(--sans); }
.viz-label { font: 500 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kicker); margin: 0 0 10px; }
.viz-list { list-style: none; margin: 0; padding: 0; }
.viz-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.viz-list li > span:first-child { display: flex; align-items: center; gap: 10px; }
.viz-tick { width: 16px; height: 16px; border-radius: 4px; background: var(--teal); color: var(--white); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.viz-status { font: 400 10.5px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.viz-status.done { color: var(--teal); } .viz-status.live { color: var(--orange); } .viz-status.wait { color: var(--kicker); }
.viz-note { font-size: 12px; color: var(--kicker); margin: 12px 0 0; }

/* ── Accordion (Clinical operations "How we help") ─────── */
.accordion { display: grid; gap: 12px; }
.acc-item { background: var(--white); border: 1px solid var(--hairline); border-radius: 4px; }
.acc-item[open] { border-color: #CBD3DD; box-shadow: 0 14px 40px rgba(14, 40, 65, 0.08); }
.acc-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center; padding: 22px 26px; position: relative; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; font: 400 26px/1 var(--mono); color: var(--orange); }
.acc-item[open] summary::after { content: "\2212"; }
.acc-title { font: 400 clamp(20px, 2vw, 24px)/1.25 var(--serif); color: var(--navy); }
.acc-summary { font-size: 15px; color: var(--secondary); }
.acc-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.acc-body { padding: 4px 26px 28px; border-top: 1px solid var(--hairline); }
.acc-body > :first-child { margin-top: 20px; }
.acc-body .ticks { margin: 12px 0 18px; }
.acc-body .grid { margin: 12px 0 18px; }
/* Footer: brand column plus one company column. */
.site-footer .footer-cols { grid-template-columns: minmax(0, 1fr) auto; column-gap: 96px; }
.site-footer .footer-cols > div:first-child p { max-width: 54ch; text-wrap: balance; }
/* No stranded last words in headings and intro lines, site-wide. */
h1, h2, h3, .section-intro, .lede { text-wrap: balance; }
p { text-wrap: pretty; }
.site-footer .footer-cols > div:last-child { min-width: 180px; }
@media (max-width: 600px) { .site-footer .footer-cols { grid-template-columns: 1fr; } }

/* Stats row under proof placeholders (Clinical Services overview). */
.grid + .stats { margin-top: 24px; }

/* Hero "Who we work with" row (Clinical Services overview), after Yuri's buyer strip. */
.hero-who { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.hero-who-label { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9DC3D4; margin: 0 0 20px; }
.hero-who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.hero-who-item { display: flex; gap: 16px; align-items: flex-start; }
.hero-who-tile { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.hero-who-item h3 { font-family: "IBM Plex Sans", sans-serif; font-size: 16px; font-weight: 600; color: #fff; margin: 4px 0 6px; }
.hero-who-item p { font-size: 14.5px; color: #B7C4D0; margin: 0; }
.hero-extra:has(.hero-who) { max-width: none; }

/* HubSpot forms load on demand (public/js/hubspot.js): a quiet placeholder until the form arrives. */
.hs-form-html:empty::before { content: "Loading the form\2026"; display: block; padding: 8px 0; color: var(--secondary); font-size: 15px; }
.hs-form-html[data-hs-failed]:empty::before { content: "The form didn\2019t load. Please use the Contact page or email marketing@velsera.com."; }

/* HubSpot forms (developer embed): styled to match the site. Carried over from the holding page; the submit button is
   the same 19px bold orange button as the rest of the site (white on #F3540C is 3.45:1, fine for 19px bold large text). */
.hs-form-html {
  --hsf-global__font-family: var(--sans);
  --hsf-global__font-size: 15px;
  --hsf-global__color: var(--ink);
  --hsf-global__error-color: var(--risk);
  --hsf-row__horizontal-spacing: 12px;
  --hsf-row__vertical-spacing: 14px;
  --hsf-module__vertical-spacing: 6px;
  --hsf-background__padding: 0;
  --hsf-background__background-color: transparent;
  --hsf-richtext__font-size: 13px;
  --hsf-richtext__color: var(--secondary);
  --hsf-field-label__font-family: var(--sans);
  --hsf-field-label__font-size: 15px;
  --hsf-field-label__color: var(--navy);
  --hsf-field-label-requiredindicator__color: var(--orange);
  --hsf-field-input__font-size: 15px;
  --hsf-field-input__color: var(--ink);
  --hsf-field-input__background-color: var(--white);
  --hsf-field-input__border-color: #B9C1CC;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-radius: 4px;
  --hsf-field-input__padding: 10px 12px;
  --hsf-field-input__placeholder-color: var(--source);
  --hsf-field-textarea__font-size: 15px;
  --hsf-field-textarea__border-color: #B9C1CC;
  --hsf-field-textarea__border-radius: 4px;
  --hsf-field-textarea__padding: 10px 12px;
  --hsf-button__font-family: var(--sans);
  --hsf-button__font-size: 19px;
  --hsf-button__font-weight: 700;
  --hsf-button__color: var(--white);
  --hsf-button__background-color: var(--orange);
  --hsf-button__border-color: var(--orange);
  --hsf-button__border-radius: 4px;
  --hsf-button__padding: 14px 20px;
  --hsf-button__box-shadow: none;
  --hsf-button--hover__background-color: var(--orange-hover);
  --hsf-button--hover__border-color: var(--orange-hover);
  --hsf-button--focus__background-color: var(--orange-hover);
  --hsf-button--focus__border-color: var(--navy);
  --hsf-navigationrow-buttons-single__justify-content: flex-start;
}

/* The thank-you message HubSpot shows after a form is sent (hsfc-PostSubmit): the site's heading and body type.
   The WORDS are set in HubSpot (the form's Options, "After a visitor submits"); this only styles them.
   --hsf-richtext__font-size above (13px) is for the small consent text, so it is overridden here. */
.hs-form-html .hsfc-PostSubmit { font-family: var(--sans); color: var(--ink); }
/* font-size is !important because on pages where the form sits inside <main>, the page-heading type scale (#pg-... main h1) is more specific. */
.hs-form-html .hsfc-PostSubmit .hsfc-Heading { font: 500 clamp(21px, 1.9vw, 26px)/1.25 var(--sans); font-size: clamp(21px, 1.9vw, 26px) !important; color: var(--navy); margin: 0 0 12px; text-wrap: balance; }
.hs-form-html .hsfc-PostSubmit .hsfc-RichText,
.hs-form-html .hsfc-PostSubmit .hsfc-RichText p { font: 400 clamp(17px, 0.45vw + 13.5px, 19px)/1.6 var(--sans); color: var(--ink); margin: 0 0 14px; }
.hs-form-html .hsfc-Button { font-variation-settings: "wght" 700; }