/* ============================================================================
   Core Clinical Trials — homepage v6, and the v6 design system.

   Five sections since the client's Implementation Spec of 2026-09-07 (§3):
   hero, verified proof, five capabilities, therapeutic areas, sponsor CTA.
   (Four capabilities until the client revision of 2026-09-09, Michelle's
   email, added Phase I units as a fifth.)
   The rules for the seven sections that spec deleted — the traditional-vs-Core
   comparison, the six-stage tab rail, the phase continuum, the TrialPulse
   answer, the OnSite Nurses map, the ReEngage timeline and the investigators
   band — went with their markup.

   Everything is scoped under `.hv6`. The site already ships two design systems
   — style.css for the older page bodies and chrome-v5.css for the header and
   footer — and all three disagree about what `.btn`, `.hero`, `.eyebrow` and
   `--ink` mean. Every class here is therefore prefixed `hv6-`, and every custom
   property `--hv-`, so this file can never reach the chrome or another page.

   Fonts are the three the layout already loads: Inter (self-hosted), Inter
   Tight and IBM Plex Mono. Nothing new is fetched.

   Loaded by resources/views/cms/blocks/home_v6.blade.php via @pushOnce('head'),
   and by every interior v6 page alongside pages-v6.css for the design system —
   tokens, reset, layout primitives, type, buttons, the wash, the reveal, the
   brand-icon mask. Those shared parts stay whatever the homepage does.
   ========================================================================= */

.hv6 {
  /* Ink and paper ------------------------------------------------------- */
  --hv-ink: #0B1B3A;          /* headings on light                          */
  --hv-ink-2: #08152C;        /* the darkest navy type                      */
  --hv-body: #4B5A7C;         /* lede and body copy on light                */
  --hv-body-2: #5B6A88;       /* captions, footnotes                        */
  --hv-line: #E3E8F0;
  --hv-line-2: #D5DCE9;
  --hv-paper: #FFFFFF;
  --hv-paper-2: #F4F5F9;      /* the tinted light sections                  */
  --hv-paper-3: #F7F8FB;

  /* ONE dark for every dark section (Ryan, 2026-08-26). The hero is the only
     dark section left on the homepage; the interior pages take --hv-dark
     directly. --hv-hero stays as the hero's own name for it. */
  --hv-dark: #001331;
  --hv-hero: var(--hv-dark);

  /* Orange. --hv-o is the artwork value; --hv-o-ink is a half-step darker
     and is used ONLY for small type on light backgrounds, where the bright
     orange sits at about 2.9:1 against white. At 11px the two are hard to
     tell apart, and the darker one is legible. */
  --hv-o: #FF6A00;
  --hv-o-ink: #D65A00;
  --hv-o-dk: #E85C00;
  --hv-o-soft: #FFF1E6;
  --hv-o-line: #FFCFA8;

  --hv-maxw: 1440px;
  --hv-gutter: clamp(20px, 2.9vw, 42px);

  --hv-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hv-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --hv-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hv-ease: cubic-bezier(.22, .61, .36, 1);

  font-family: var(--hv-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--hv-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* The reset is wrapped in :where() so it carries the specificity of `.hv6`
   alone. Written as `.hv6 p { margin: 0 }` it would be one class AND one type
   selector, which quietly outranks every single-class rule below it — every
   `.hv6-lede { margin-top }` in this file would have been ignored. */
.hv6 *, .hv6 *::before, .hv6 *::after { box-sizing: border-box }
.hv6 :where(p, ul, ol, figure) { margin: 0 }
.hv6 :where(ul, ol) { padding: 0; list-style: none }
.hv6 :where(a) { color: inherit; text-decoration: none }
.hv6 :where(img, svg) { display: block; max-width: 100% }
.hv6 :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
.hv6 :where(h1, h2, h3, h4) {
  margin: 0; font-family: var(--hv-display); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.06;
}
.hv6 ::selection { background: var(--hv-o); color: #fff }

/* --- Layout primitives ---------------------------------------------------- */
.hv6-sec { position: relative; padding-block: clamp(64px, 8vw, 118px); overflow: hidden }
.hv6-wrap { position: relative; z-index: 2; max-width: var(--hv-maxw); margin-inline: auto; padding-inline: var(--hv-gutter) }

.hv6-sec--paper { background: var(--hv-paper) }
.hv6-sec--tint { background: var(--hv-paper-2) }

/* The washed-out photograph that bleeds off the top-right corner of the
   capabilities section (and of any interior section that opts in).

   It uses the full-colour original Pia delivered, and the wash — desaturate,
   lift, fade — is done here rather than baked into the file, so the framing
   is a background-position edit and the strength is one number. */
.hv6-wash {
  position: absolute; top: 0; right: max(0px, calc((100% - var(--hv-maxw)) / 2)); z-index: 0; pointer-events: none;
  width: min(var(--hv-wash-w, 44%), var(--hv-wash-max, 634px)); aspect-ratio: var(--hv-wash-box, 158 / 100);
  background: var(--hv-wash) var(--hv-wash-pos, right top) / var(--hv-wash-size, cover) no-repeat;
  filter: grayscale(1) brightness(1.12);
  opacity: var(--hv-wash-a, .3);
  -webkit-mask-image: linear-gradient(100deg, transparent 3%, #000 44%), linear-gradient(180deg, #000 52%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(100deg, transparent 3%, #000 44%), linear-gradient(180deg, #000 52%, transparent 96%);
  mask-composite: intersect;
}

/* --- Type ----------------------------------------------------------------- */
.hv6-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--hv-mono); font-size: 16.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--hv-o);
  margin: 0 0 30px;
}
.hv6-eyebrow::before { content: ""; flex: none; width: 30px; height: 2px; background: currentColor }
/* The hero and the sponsor CTA set their eyebrow in the sans, not the mono — as drawn. */
.hv6-eyebrow--sans { font-family: var(--hv-sans); font-weight: 700; font-size: 13.5px; letter-spacing: .15em }
.hv6-hero .hv6-eyebrow { color: var(--hv-o) }

.hv6-h1 { font-size: clamp(2.45rem, 4.9vw, 4.05rem) }
.hv6-h2 { font-size: clamp(1.95rem, 3.7vw, 2.95rem); text-wrap: balance }
.hv6-h3 { font-size: clamp(1.2rem, 1.6vw, 1.44rem); letter-spacing: -.022em }

.hv6-lede { margin-top: 22px; max-width: 62ch; font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.58; color: var(--hv-body) }
.hv6-hero .hv6-lede { color: #B7C4DA }

.hv6-o { color: var(--hv-o) }
/* Footnote-sized copy. No longer on the homepage; the interior pages use it. */
.hv6-note { font-size: 13.5px; line-height: 1.6; color: var(--hv-body-2) }
.hv6-head { max-width: 840px; margin-bottom: clamp(38px, 5vw, 66px) }
.hv6-head .hv6-lede, .hv6-send__in .hv6-lede { margin-top: 30px }

/* The rule-and-quote callout under the therapeutic-areas lede. */
.hv6-quote {
  margin-top: 30px; padding-left: 20px; border-left: 3px solid var(--hv-o);
  font-family: var(--hv-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.45; letter-spacing: -.02em;
}

/* --- Buttons -------------------------------------------------------------- */
.hv6-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 15px 24px; border-radius: 9px; border: 1.5px solid transparent;
  font-family: var(--hv-sans); font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  background: var(--hv-o); color: #fff; overflow: hidden;
  transition: transform .22s var(--hv-ease), background .22s var(--hv-ease),
              box-shadow .22s var(--hv-ease), border-color .22s var(--hv-ease), color .22s var(--hv-ease);
}
.hv6-btn > * { position: relative; z-index: 1 }
.hv6-btn svg { flex: none; transition: transform .28s var(--hv-ease) }
.hv6-btn:hover { background: var(--hv-o-dk); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(255, 106, 0, .75) }
.hv6-btn:hover svg { transform: translateX(4px) }
.hv6-btn:active { transform: translateY(0) }
.hv6-btn:focus-visible { outline: 2px solid var(--hv-o); outline-offset: 3px }
/* A light sweeps across the primary button on hover. */
.hv6-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.hv6-btn:hover::after { opacity: 1; animation: hv6-sheen .7s var(--hv-ease) }
@keyframes hv6-sheen { from { left: -60% } to { left: 115% } }

.hv6-btn--onDark { background: transparent; color: #fff; border-color: rgba(154, 186, 226, .45) }
.hv6-btn--onDark:hover { background: rgba(255, 255, 255, .07); border-color: #fff; box-shadow: none }
.hv6-btn--onDark::after { display: none }
/* Navy-outlined secondary on light ground (interior pages; unused on the homepage). */
.hv6-btn--ghost { background: #fff; color: var(--hv-ink-2); border-color: var(--hv-ink-2) }
.hv6-btn--ghost:hover { background: #F4F6FA; box-shadow: none }
.hv6-btn--ghost::after { display: none }

.hv6-btn--outline { background: transparent; color: var(--hv-ink); border-color: var(--hv-o) }
.hv6-btn--outline:hover { background: var(--hv-o-soft); color: var(--hv-o-ink); box-shadow: none }
.hv6-btn--outline::after { display: none }
.hv6-btn--block { width: 100% }

/* --- Small mono labels (the operating-layer panel's head) ------------------ */
.hv6-meta { font-family: var(--hv-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase }

/* --- The orange tick the interior pages' lists use ------------------------ */
.hv6-tick { flex: none; width: 18px; height: 18px; color: var(--hv-o) }

/* --- Scroll reveal -------------------------------------------------------- */
/* The starting state is applied only under `.hv6-js`, which home-v6.js adds
   after it has confirmed IntersectionObserver — so with JS off, or if the
   script fails to load, nothing is ever left invisible. */
/* Elements, never whole sections, carry data-hv-reveal; the transition is short
   (client, 2026-09-08: 150–300 ms) and anything on screen at load skips it. */
.hv6-js [data-hv-reveal] { opacity: 0; transform: translateY(10px) }
.hv6-js [data-hv-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .26s var(--hv-ease), transform .26s var(--hv-ease);
  transition-delay: var(--hv-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .hv6-js [data-hv-reveal] { opacity: 1 !important; transform: none !important; transition: none !important }
  .hv6 *, .hv6 *::before, .hv6 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   01 · HERO — "From protocol to patient. One operating layer."
   ========================================================================== */
.hv6-hero { background: var(--hv-hero); color: #fff; padding-block: clamp(44px, 4.6vw, 66px) clamp(40px, 4.2vw, 60px) }

/* The photograph is placed rather than tiled: it is a 558px-wide cut, and at
   `cover` on a full-width hero it would blow up past its resolution. Masking
   both vertical edges means it never shows a seam whatever the viewport. */
/* The photograph is a placed box rather than a full-bleed background: the cut
   is 558x694 and renders at its native scale, as the comp does.

   Anchored to the CONTAINER, not the viewport: its right edge lands exactly on
   the glass panel's left edge (42px gutter + 460px panel = 502px in from the
   1440 envelope), so no part of the photograph — and in particular no part of
   the woman's face or hair — ever sits under the panel, at any viewport width.
   The drift animation's origin is the right edge for the same reason: a scale
   that grows from the centre would push the photo back under the glass. */
.hv6-hero__photo {
  position: absolute; top: 0; right: calc(max(0px, (100% - var(--hv-maxw)) / 2) + 502px); z-index: 0; pointer-events: none;
  width: min(46%, 558px); height: 92%; transform-origin: right center;
  background: url("img/home/hero-corridor.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, #000 76%, transparent 100%);
  mask-composite: intersect;
  animation: hv6-drift 26s var(--hv-ease) infinite alternate;
}
@keyframes hv6-drift { from { transform: scale(1) } to { transform: scale(1.055) } }

.hv6-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;

  /* The copy column's left edge, written in exactly the terms .hv6-hero__photo
     uses for its right edge. In a 90deg gradient the gradient line IS the box
     width, so 100% here resolves against the same number the photo's `right`
     does. Re-angle this gradient and the px offsets shift. */
  --hv-copy-l: calc(max(0px, (100% - var(--hv-maxw)) / 2) + var(--hv-gutter));

  background:
    /* Opaque under the copy column, clear across the clinicians, dark again
       under the glass panel. The three left stops used to be 26% / 33% / 42%
       of the VIEWPORT while the photograph is anchored in PIXELS to the 1440
       container, so the wash slid out from under the copy at every width but
       1440 and the last words of each lede line landed on a white lab coat —
       measured 1.0–2.9:1 at every desktop width, 2.67:1 at 1440 itself.
       Anchored to the copy column they hold the comp's relationship at every
       width. At 1440 they resolve to 414 / 512 / 642 against the comp's
       374 / 475 / 605: the clear window opens 37px later on a 558px-wide
       photograph, and the right-hand clinician is untouched. */
    linear-gradient(90deg,
                    var(--hv-hero) 0,
                    var(--hv-hero)       calc(var(--hv-copy-l) + 372px),
                    rgba(0, 19, 49, .55) calc(var(--hv-copy-l) + 470px),
                    rgba(0, 19, 49, 0)   calc(var(--hv-copy-l) + 600px),
                    rgba(0, 19, 49, 0) 64%,
                    rgba(0, 19, 49, .45) 74%, var(--hv-hero) 90%),
    linear-gradient(180deg, rgba(0, 19, 49, .34) 0, transparent 14%, transparent 78%, var(--hv-hero) 99%);
}

.hv6-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 4vw, 70px); align-items: start }
.hv6-hero__copy { padding-top: clamp(8px, 2vw, 34px) }
.hv6-hero .hv6-h1 { color: #fff; max-width: 12ch }
/* White, not the #B7C4DA set above (which stays as written — this rule has
   equal specificity and comes later, so it overrides for the hero only). #B7C4DA
   measured 1.0–2.7:1 where the lede crosses the photograph; #fff plus the anchored
   scrim above is 5.34:1 worst case across 1021–3440px. A near-white loses ~1.2 of
   that ratio in exactly the failing zone, so: plain #fff. The step to <strong>
   below now rests on weight 600 vs 400 — fonts-inter.css ships 400/600/700/800/900
   only, so `font-weight:500` here would be a silent no-op. */
.hv6-hero .hv6-lede { max-width: 43ch; color: #fff }
.hv6-hero .hv6-lede strong { color: #fff; font-weight: 600 }
.hv6-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }

/* --- The operating-layer panel -------------------------------------------- */
.hv6-layer {
  border-radius: 18px; padding: 20px clamp(18px, 1.8vw, 26px) 16px;
  background: linear-gradient(170deg, rgba(11, 31, 56, .84), rgba(3, 17, 34, .90));
  border: 1px solid rgba(255, 255, 255, .11);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.hv6-layer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px }
.hv6-layer__head .hv6-meta { color: #fff; letter-spacing: .19em; font-size: 11.5px }
.hv6-layer__pill { border: 1px solid rgba(255, 255, 255, .3); border-radius: 100px; padding: 7px 16px; color: #fff; font-family: var(--hv-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap }
.hv6-layer__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .09) }
.hv6-layer__row svg { width: 26px; height: 26px; color: #fff }
.hv6-layer__name { font-family: var(--hv-display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: #fff; grid-column: 2 }
.hv6-layer__sub { grid-column: 2; font-size: 13.6px; line-height: 1.45; color: #93A7C4 }
.hv6-layer__out { grid-column: 3; grid-row: 1 / span 2; text-align: right; font-size: 13.6px; color: #C4D2E6; white-space: nowrap }
.hv6-layer__foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 13.6px; color: #C4D2E6 }
.hv6-layer__foot svg { flex: none; width: 18px; height: 18px; color: #fff }
/* The strapline is set word-by-word and justified across the panel, as drawn. */
.hv6-layer__foot span { display: flex; flex: 1; justify-content: space-between; gap: 6px }

/* ==========================================================================
   02 · VERIFIED PROOF — the two approved metrics, in a white band
   ========================================================================== */
/* Its own white band under the hero rather than a glass card inside it, so the
   top of the page carries the headline and the panel and nothing else. Two
   equal columns: the spec allows three or four, but only two metrics are
   approved, and a column per metric is what keeps the strip a strip. */
.hv6-proof { background: #fff; padding-block: clamp(40px, 4.4vw, 62px) }
.hv6-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.hv6-stat { display: flex; flex-direction: column; padding-inline: clamp(14px, 1.6vw, 24px) }
.hv6-stat + .hv6-stat { border-left: 1px solid var(--hv-line) }
.hv6-stat__top { display: flex; align-items: center; gap: 13px }
.hv6-stat__top > span { min-width: 0 }
.hv6-stat__icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border: 1.5px solid var(--hv-o); border-radius: 11px; color: var(--hv-o) }
.hv6-stat__icon svg { width: 27px; height: 27px }
.hv6-stat__num { display: block; font-family: var(--hv-display); font-weight: 700; font-size: clamp(1.7rem, 2.2vw, 2.1rem); letter-spacing: -.035em; line-height: 1; color: var(--hv-o) }
.hv6-stat__label { display: block; margin-top: 6px; font-size: 14.6px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--hv-ink-2); text-wrap: balance }
.hv6-stat__desc { margin-top: 14px; font-size: 13.6px; line-height: 1.5; color: var(--hv-body) }

/* ==========================================================================
   03 · WHY SPONSORS CHOOSE CORE — five capability cards, 2×2 plus a full-width fifth
   ========================================================================== */
.hv6-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 1.9vw, 26px) }
/* A fifth card would orphan in the 2×2, so the last one spans both columns (client revision, 2026-09-09). */
.hv6-caps > .hv6-cap:nth-child(5):last-child { grid-column: 1 / -1 }
.hv6-cap {
  display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px);
  background: #fff; border: 1px solid var(--hv-line); border-radius: 18px;
  transition: transform .3s var(--hv-ease), box-shadow .3s var(--hv-ease), border-color .3s var(--hv-ease);
}
.hv6-cap:hover { transform: translateY(-5px); border-color: var(--hv-o-line); box-shadow: 0 26px 50px -32px rgba(11, 27, 58, .45) }
.hv6-cap__no { font-family: var(--hv-mono); font-size: 13.5px; font-weight: 500; color: var(--hv-o) }
.hv6-cap h3 { margin-top: 20px; color: var(--hv-ink-2) }
.hv6-cap p { margin-top: 16px; font-size: 15.6px; line-height: 1.58; color: var(--hv-body) }
/* The text link a card carries only where a dedicated page exists. Navy type
   with an orange rule under it, not orange type: at 15px neither orange clears
   4.5:1 on white, and the rule plus the arrow already say "link" without
   leaning on colour. `margin-top: auto` sits it on the card's floor so the two
   linked cards, which share a row, align. */
.hv6-cap__link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: auto; padding-top: 22px;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--hv-ink-2);
  transition: color .2s var(--hv-ease);
}
.hv6-cap__link > span { border-bottom: 2px solid var(--hv-o); padding-bottom: 2px }
.hv6-cap__link svg { flex: none; width: 16px; height: 16px; color: var(--hv-o); transition: transform .28s var(--hv-ease) }
.hv6-cap__link:hover { color: var(--hv-o-ink) }
.hv6-cap__link:hover svg { transform: translateX(4px) }
.hv6-cap__link:focus-visible { outline: 2px solid var(--hv-o); outline-offset: 4px; border-radius: 4px }

/* ==========================================================================
   04 · THERAPEUTIC DEPTH — indication list beside the network
   ========================================================================== */
/* The three orange periods in the headline read as accent marks rather than as
   type, so they are pinned at 30px instead of scaling with the h2's clamped
   31–47px. Scoped to this headline on purpose: everywhere else .hv6-o wraps a
   whole phrase ("One operating layer.", "Bring it to Core.") that must keep the
   heading's own size. */
#therapeutic .hv6-h2 .hv6-o { font-size: 30px }

.hv6-ta__card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(28px, 5vw, 90px); padding: clamp(26px, 3.4vw, 52px);
  background: #fff; border: 1px solid var(--hv-line); border-radius: 24px;
}
.hv6-ta__row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 34px; align-items: center; gap: 10px;
  width: 100%; padding: 19px 4px; text-align: left; border-bottom: 1px solid var(--hv-line);
}
.hv6-ta__no { font-family: var(--hv-mono); font-size: 13.5px; font-weight: 500; color: var(--hv-o) }
.hv6-ta__name { font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 500; letter-spacing: -.018em; color: var(--hv-ink-2); transition: color .25s var(--hv-ease), transform .25s var(--hv-ease) }
.hv6-ta__arrow { justify-self: end; color: var(--hv-o); opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--hv-ease), transform .25s var(--hv-ease) }
.hv6-ta__arrow svg { width: 22px; height: 22px }
.hv6-ta__row:hover .hv6-ta__name, .hv6-ta__row.is-active .hv6-ta__name { color: var(--hv-o); transform: translateX(3px) }
.hv6-ta__row:hover .hv6-ta__arrow, .hv6-ta__row.is-active .hv6-ta__arrow { opacity: 1; transform: none }
.hv6-ta__row:focus-visible { outline: 2px solid var(--hv-o); outline-offset: 2px; border-radius: 8px }

.hv6-ta__photo { position: relative; flex: none; width: clamp(280px, 40vw, 600px); aspect-ratio: 1 }
.hv6-ta__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
/* A quarter-arc of orange that turns slowly around the portrait. */
.hv6-ta__photo::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--hv-o); border-right-color: rgba(255, 106, 0, .25);
  animation: hv6-spin 14s linear infinite;
}
@keyframes hv6-spin { to { transform: rotate(360deg) } }

/* ==========================================================================
   05 · FOR SPONSORS & CROS — the sponsor conversion CTA
   ========================================================================== */
.hv6-send { background: #fff }
.hv6-send .hv6-h2 { font-size: clamp(2.2rem, 4vw, 3.4rem) }
.hv6-send__photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("img/home/nurse-tablet.webp") 78% 40% / cover no-repeat;
}
.hv6-send__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0, rgba(255, 255, 255, .88) 30%, rgba(255, 255, 255, .5) 52%, rgba(255, 255, 255, .05) 78%, rgba(255, 255, 255, 0) 100%),
              linear-gradient(180deg, rgba(255, 255, 255, .4), transparent 18%, transparent 82%, rgba(255, 255, 255, .35));
}
.hv6-send__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: clamp(30px, 4vw, 66px); align-items: center }
.hv6-panel {
  padding: clamp(28px, 3.2vw, 46px); border-radius: 26px;
  background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 34px 80px -46px rgba(11, 27, 58, .48);
}
.hv6-panel__cta { display: grid; gap: 18px }
.hv6-panel__cta .hv6-btn { padding: 19px 26px; font-size: 17px; border-radius: 12px }
/* The telephone as a text link under the button — secondary text, not a
   competing button. The label carries the orange rule; the number beside it
   is plain so a desktop reader can dial it by hand. */
.hv6-send__tel {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px;
  font-size: 15px; line-height: 1.4; color: var(--hv-ink-2);
}
.hv6-send__tel-label { font-weight: 700; letter-spacing: -.01em; border-bottom: 2px solid var(--hv-o); padding-bottom: 2px; transition: color .2s var(--hv-ease) }
.hv6-send__tel-no { font-family: var(--hv-mono); font-size: 14px; letter-spacing: .02em; color: var(--hv-body) }
.hv6-send__tel:hover .hv6-send__tel-label { color: var(--hv-o-ink) }
.hv6-send__tel:focus-visible { outline: 2px solid var(--hv-o); outline-offset: 4px; border-radius: 4px }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1140px) {
  .hv6-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 420px) }
  .hv6-stat__icon { width: 50px; height: 50px }
  .hv6-stat__icon svg { width: 26px; height: 26px }
  .hv6-stat__desc { padding-left: 66px }
}

@media (max-width: 1020px) {
  /* The hero panel drops under the copy; the photograph becomes a top band so
     it is still present but never competes with the type. */
  .hv6-hero__in { grid-template-columns: minmax(0, 1fr) }
  /* Stacked, the photograph becomes a band behind the top of the copy rather
     than a column beside it — present, but never competing with the type. */
  .hv6-hero__photo {
    right: 0; width: min(70%, 520px); height: 40%; opacity: .55;
    background-position: center 18%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(180deg, #000 34%, transparent 96%);
    mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(180deg, #000 34%, transparent 96%);
  }
  .hv6-hero__scrim { background: linear-gradient(180deg, rgba(0, 19, 49, .74) 0, rgba(0, 19, 49, .92) 30%, var(--hv-hero) 58%) }
  .hv6-layer { max-width: 560px }

  .hv6-send__in { grid-template-columns: minmax(0, 1fr) }
  /* Labels above the image on a narrow screen (spec §3.04): the list keeps
     source order and the portrait follows it. */
  .hv6-ta__card { grid-template-columns: minmax(0, 1fr); justify-items: center }
  .hv6-ta__photo { width: clamp(220px, 46vw, 340px) }
  .hv6-ta__list { width: 100% }
  .hv6-send__scrim { background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0, rgba(255, 255, 255, .8) 48%, rgba(255, 255, 255, .9)) }
}

@media (max-width: 760px) {
  .hv6 { font-size: 16px }
  .hv6-sec { padding-block: clamp(52px, 12vw, 72px) }
  .hv6-wash { width: 74%; opacity: .8 }
  /* The two metrics stack as rows. */
  .hv6-stats { grid-template-columns: minmax(0, 1fr) }
  .hv6-stat { padding: 22px clamp(16px, 3vw, 26px) }
  .hv6-stat + .hv6-stat { border-left: 0; border-top: 1px solid var(--hv-line) }
  .hv6-stat__desc { padding-left: 0; margin-top: 12px }
  .hv6-hero .hv6-h1 { max-width: none }
  .hv6-hero__cta .hv6-btn { flex: 1 1 auto; justify-content: center }
  .hv6-caps { grid-template-columns: minmax(0, 1fr) }
  .hv6-layer__foot span { flex-wrap: wrap; justify-content: flex-start; gap: 0 5px }
}

@media (max-width: 620px) {
  .hv6-layer__row { grid-template-columns: 30px minmax(0, 1fr); row-gap: 3px }
  .hv6-layer__out { grid-column: 2; grid-row: 3; text-align: left; color: var(--hv-o); font-size: 12.6px; letter-spacing: .04em }
}

/* ==========================================================================
   Motion that home-v6.js drives
   ========================================================================== */

/* Anchor clearance. chrome-v5.css already sets a flat 86px for every page;
   the script measures the real header and overrides it here, which matters on
   mobile where the bar is 66px and the flat value leaves a visible gap. */
.hv6 section[id] { scroll-margin-top: var(--hv-anchor, 86px) }

/* --- Pia's brand icons, as masks ------------------------------------------ */
/* CORE-ICONS-n are flat #F26522 PNGs with alpha. Painting them as a mask over
   `currentColor` means one set of files serves both the light sections (orange)
   and the dark ones (white), straight from her artwork. The enclosing ring is
   part of the drawing, so these are never put inside another circle or tile. */
.hv6-ico {
  display: inline-block; flex: none; width: var(--hv-ico-size, 56px); height: var(--hv-ico-size, 56px);
  background: currentColor;
  -webkit-mask: var(--hv-ico) center / contain no-repeat;
  mask: var(--hv-ico) center / contain no-repeat;
}

/* ---- Pia's CORE-ICONS in the proof strip (client, 2026-09-02) -------------
   Her ring is part of the artwork, so the stat tile that drew its own border
   loses that chrome and takes the icon inside. Colour rides currentColor from
   the existing wrapper — orange on the white band. */
.hv6-stat__icon { border: 0 }
.hv6-stat__icon .hv6-ico { --hv-ico-size: 50px }