/* ============================================================================
   Core Clinical Trials — the v6 interior pages (Leadership, Sponsors,
   Physicians, OnSite Nurses, Privacy), built from Pia's CORE comps.

   This file carries ONLY section styles. The design system — tokens, reset,
   buttons, eyebrows, headings, the wash, the reveal, the brand-icon mask —
   lives in home-v6.css and is loaded alongside it, so every page inherits one
   set of `--hv-` values and one set of primitives rather than a second copy
   that could drift.

   Every page therefore wraps its sections in `.hv6`, the design-system root.
   ========================================================================= */

/* ==========================================================================
   Shared interior-page furniture
   ========================================================================== */

/* The dark page banner every interior page opens with (Leadership, Privacy). */
.pv6-banner { background: var(--hv-dark); color: #fff; padding-block: clamp(52px, 6vw, 86px) }
.pv6-banner .hv6-eyebrow { color: var(--hv-o) }
.pv6-banner__rule { width: 74px; height: 3px; margin: 26px 0 24px; background: var(--hv-o) }
.pv6-banner p { max-width: 62ch; font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.6; color: #B7C4DA }
/* The banner carried one paragraph until Leadership's rewrite (2026-09-08)
   gave it three; without this they run together as a single block. */
.pv6-banner p + p { margin-top: 18px }

/* The closing "bring us your…" band: copy left, circular photograph right. */
.pv6-close { background: #fff }
.pv6-close__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(30px, 5vw, 86px) }
.pv6-close h2 { color: var(--hv-ink-2) }
.pv6-close .hv6-lede { max-width: 46ch }
.pv6-close__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }
.pv6-close__photo {
  flex: none; width: clamp(260px, 34vw, 460px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  /* The comps (OS 5, S6) draw a DOUBLE border: the photo circle sits inset in
     a slightly larger parent circle — white gutter, then a hairline ring. */
  padding: 12px; background: #fff; box-shadow: 0 0 0 1px #DFE4EB;
}
.pv6-close__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }

/* ==========================================================================
   LEADERSHIP — /leadership
   ========================================================================== */
.pv6-bio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(30px, 4.5vw, 74px); padding-block: clamp(40px, 4.6vw, 66px) }
.pv6-bio + .pv6-bio { border-top: 1px solid var(--hv-line) }
.pv6-bio__photo { flex: none; width: clamp(200px, 26vw, 380px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--hv-paper-2) }
.pv6-bio__photo img { width: 100%; height: 100%; object-fit: cover }
.pv6-bio__name { font-family: var(--hv-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -.03em; line-height: 1.1; color: var(--hv-o) }
.pv6-bio__role { margin-top: 8px; font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; color: var(--hv-ink-2) }
.pv6-bio__rule { width: 46px; height: 3px; margin: 18px 0 24px; background: var(--hv-o) }
.pv6-bio__body p { font-size: 16.5px; line-height: 1.68; color: var(--hv-body) }
.pv6-bio__body p + p { margin-top: 20px }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1020px) {
  .pv6-close__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center }
  .pv6-close__photo { order: -1; width: clamp(220px, 46vw, 340px) }
  .pv6-close__cta { justify-content: center }
  .pv6-close .hv6-lede { margin-inline: auto }
}

@media (max-width: 760px) {
  .pv6-bio { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 26px }
  .pv6-bio__photo { width: clamp(180px, 52vw, 260px) }
  .pv6-bio__rule { margin-inline: auto }
  .pv6-bio__body { text-align: left }
}

/* ==========================================================================
   SPONSORS — /sponsors
   ========================================================================== */

/* S1 · hero: copy left, photograph bleeding off the right. */
.sp6-hero { background: #fff; padding-block: clamp(56px, 6vw, 96px) }
/* The comp runs the photograph across ~78% of the frame with a deep white
   wash on its left so the whole handshake cast stays in view behind the copy. */
.sp6-hero__photo {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  right: max(0px, calc((100% - var(--hv-maxw)) / 2)); width: min(78%, 1140px);
  /* The image rides 200px past the box's right edge (client request 2026-09-02):
     that much of its right side hides, pulling the handshake toward center. */
  background: var(--sp6-photo) calc(100% + 200px) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 25%, #000 60%);
}
.sp6-hero__in { max-width: 39rem }
.sp6-hero .hv6-h1 { font-size: clamp(2.1rem, 3.9vw, 3.2rem); color: var(--hv-ink-2) }
.sp6-hero .hv6-lede { max-width: 42ch }
.sp6-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }

/* S2 · the four-figure band. */
.sp6-figures { background: #fff; padding-block: clamp(30px, 3.4vw, 46px) }
.sp6-figures__in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--hv-line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 54px -44px rgba(11, 27, 58, .5);
}
.sp6-fig { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 3vw, 40px) 18px }
.sp6-fig + .sp6-fig { border-left: 1px solid var(--hv-line) }
.sp6-fig .hv6-ico { --hv-ico-size: 66px; color: var(--hv-o) }
.sp6-fig__num { margin-top: 22px; font-family: var(--hv-display); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.9rem); letter-spacing: -.04em; line-height: 1; color: var(--hv-ink-2) }
.sp6-fig__num em { font-style: normal; color: var(--hv-o) }
.sp6-fig__label { margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.45; color: #5B6E93 }

/* S3 · dark band, photograph washed behind, three reasons.

   All four full-bleed washes on the interior pages (.sp6-why__photo,
   .sp6-caps__photo, .ph6-steps__photo, .po6-banner__photo) lock to the 1440
   envelope rather than the viewport: with `inset: 0` + cover, an ultrawide
   window scales the photograph past its comp size and faces render giant.
   Inside the envelope nothing changes; past it, --pv6-edge grows from 0 so
   the photo's outer edge fades instead of cutting hard against the ground. */
.sp6-why { background: var(--hv-dark); color: #fff }
.sp6-why__photo {
  position: absolute; inset: 0 max(0px, calc((100% - var(--hv-maxw)) / 2));
  z-index: 0; pointer-events: none;
  --pv6-edge: clamp(0px, calc((100vw - var(--hv-maxw)) / 6), 110px);
  /* 130%, top-right anchored: the comp scales the high-five past the section
     so its mass sits in the top-right corner with the bottom cropped away. */
  background: var(--sp6-photo) right top / auto 130% no-repeat; opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 78%, #000 calc(100% - var(--pv6-edge)), transparent);
  mask-image: linear-gradient(90deg, transparent 18%, #000 78%, #000 calc(100% - var(--pv6-edge)), transparent);
}
.sp6-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px) }
.sp6-card {
  padding: clamp(26px, 2.8vw, 36px);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 18px;
  background: rgba(255, 255, 255, .03);
  transition: transform .3s var(--hv-ease), border-color .3s var(--hv-ease), background .3s var(--hv-ease);
}
.sp6-card:hover { transform: translateY(-4px); border-color: rgba(255, 106, 0, .5); background: rgba(255, 106, 0, .05) }
.sp6-card .hv6-ico { --hv-ico-size: 60px; color: var(--hv-o) }
.sp6-card h3 { margin-top: 26px; font-size: clamp(1.12rem, 1.5vw, 1.32rem); color: #fff }
.sp6-card p { margin-top: 16px; font-size: 15.6px; line-height: 1.62; color: #B7C4DA }

/* S4 · capabilities over a washed corridor. */
.sp6-caps { background: var(--hv-paper-3) }
.sp6-caps__photo {
  position: absolute; inset: 0 max(0px, calc((100% - var(--hv-maxw)) / 2));
  z-index: 0; pointer-events: none;
  --pv6-edge: clamp(0px, calc((100vw - var(--hv-maxw)) / 6), 110px);
  /* Dead center, full strength (client request 2026-09-02): no vertical fade —
     the corridor reads clearly under the glass cards, as the comp draws it.
     Only the ultrawide side fades remain (0px at 1440, so a no-op there). */
  background: var(--sp6-photo) center top / auto 100% no-repeat; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pv6-edge), #000 calc(100% - var(--pv6-edge)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--pv6-edge), #000 calc(100% - var(--pv6-edge)), transparent);
}
.sp6-caps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px) }
.sp6-cap {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 16px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  transition: transform .3s var(--hv-ease), background .3s var(--hv-ease);
}
.sp6-cap:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .9) }
.sp6-cap__head { display: flex; align-items: center; gap: 16px }
.sp6-cap__head .hv6-ico { --hv-ico-size: 48px; color: var(--hv-o) }
.sp6-cap__head h3 { font-size: 1.06rem; letter-spacing: -.018em; color: var(--hv-ink-2) }
.sp6-cap p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--hv-body) }
.sp6-cap a { font-weight: 700; color: var(--hv-o); white-space: nowrap }
.sp6-cap a:hover { text-decoration: underline }
/* The link's arrow is the hv-icon since 2026-09-09 (it was a typed "→"); .hv6
   :where(svg) would otherwise drop it to its own line as a block. */
.sp6-cap p a svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px }

/* S5 · therapeutic areas. */
.sp6-tas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px) }
.sp6-ta {
  display: flex; align-items: center; gap: 18px; padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .025);
  font-size: 16px; letter-spacing: -.012em; color: #fff;
  transition: border-color .3s var(--hv-ease), background .3s var(--hv-ease);
}
.sp6-ta:hover { border-color: rgba(255, 106, 0, .5); background: rgba(255, 106, 0, .05) }
.sp6-ta .hv6-ico { --hv-ico-size: 46px; color: var(--hv-o) }
.sp6-ta span { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .16) }

@media (max-width: 1020px) {
  .sp6-hero__photo { width: 62%; opacity: .35 }
  .sp6-hero__in { max-width: none }
  .sp6-figures__in { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sp6-fig:nth-child(odd) + .sp6-fig { border-left: 1px solid var(--hv-line) }
  .sp6-fig:nth-child(3) { border-left: 0 }
  .sp6-fig:not(:nth-child(-n+2)) { border-top: 1px solid var(--hv-line) }
  .sp6-cards3, .sp6-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sp6-tas { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 760px) {
  .sp6-hero__photo { display: none }
  .sp6-figures__in { grid-template-columns: minmax(0, 1fr) }
  .sp6-fig + .sp6-fig { border-left: 0; border-top: 1px solid var(--hv-line) }
  .sp6-cards3, .sp6-caps__grid, .sp6-tas { grid-template-columns: minmax(0, 1fr) }
  .sp6-hero__cta .hv6-btn { flex: 1 1 auto }
}

/* The dark bands here are `.sp6-why`, not one of home-v6's --navy/--abyss
   section classes, so they were not picked up by that file's dark-ground lede
   rule and were rendering body-grey on navy. */
.sp6-why .hv6-lede, .pv6-banner .hv6-lede { color: #B7C4DA }

/* ==========================================================================
   Shared: split hero (copy left, photograph bleeding off the right)
   Used by /physicians and /onsite-nurses.
   ========================================================================== */
.pv6-shero { background: #fff; padding-block: clamp(56px, 6vw, 96px) }
.pv6-shero__photo {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  right: max(0px, calc((100% - var(--hv-maxw)) / 2)); width: min(68%, 985px);
  /* Wide and right-anchored: the comps (P1, OS1) run the photograph to its own
     right edge — nobody at the frame's right may be cut — and let the left
     side disappear under the wash instead. */
  background: var(--pv6-photo) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
  mask-image: linear-gradient(90deg, transparent, #000 34%);
}
.pv6-shero__in { max-width: 46ch }
.pv6-shero .hv6-h1 { font-size: clamp(2.1rem, 3.9vw, 3.2rem); color: var(--hv-ink-2) }
.pv6-shero .hv6-lede { max-width: 44ch }
.pv6-shero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }

/* Shared: the four-figure band (OnSite S2 reuses Sponsors' figure styles). */
.pv6-figures { background: #fff; padding-block: clamp(30px, 3.4vw, 46px) }
.pv6-figures__note { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--hv-body-2) }

/* ==========================================================================
   PHYSICIANS — /physicians
   ========================================================================== */
.ph6-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: start; gap: clamp(32px, 4vw, 72px) }
.ph6-split h2 { color: var(--hv-ink-2) }
.ph6-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(30px, 3.4vw, 44px) }
.ph6-benefit { display: flex; gap: 12px; padding: 20px 18px 20px 0 }
.ph6-benefit + .ph6-benefit { border-left: 1px solid var(--hv-line); padding-left: 18px }
.ph6-benefit:nth-child(n+4) { border-top: 1px solid var(--hv-line) }
.ph6-benefit:nth-child(4) { border-left: 0; padding-left: 0 }
/* The comp rings each check with a thin orange circle. */
.ph6-benefit .hv6-tick {
  width: 27px; height: 27px; margin-top: 2px; padding: 5px;
  border: 1.5px solid var(--hv-o); border-radius: 50%;
}
.ph6-benefit p { font-size: 14.6px; line-height: 1.5; color: var(--hv-body) }
.ph6-benefit strong { color: var(--hv-ink-2) }

.ph6-vs { padding: clamp(24px, 2.6vw, 34px); border-radius: 20px; background: var(--hv-paper-3) }
.ph6-vs__title { font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--hv-o) }
.ph6-vs__rule { width: 62px; height: 3px; margin: 14px 0 24px; background: var(--hv-o) }
.ph6-vs__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.ph6-vs__col { padding: 20px 18px; border: 1px solid var(--hv-line); border-radius: 14px; background: #fff }
.ph6-vs__col--core { background: #FFF9F4; border-color: #FBE2CE }
.ph6-vs__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--hv-o) }
.ph6-vs__col--you .ph6-vs__head { border-bottom-color: var(--hv-ink-2) }
.ph6-vs__head .hv6-ico { --hv-ico-size: 40px; color: var(--hv-o) }
.ph6-vs__col--you .hv6-ico { color: var(--hv-ink-2) }
.ph6-vs__head span { font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hv-o) }
.ph6-vs__col--you .ph6-vs__head span { color: var(--hv-ink-2) }
.ph6-vs__col li { padding: 13px 0; font-size: 15.4px; color: var(--hv-ink-2) }
.ph6-vs__col li + li { border-top: 1px solid var(--hv-line) }
.ph6-vs__foot { margin-top: 22px; font-size: 15.4px; line-height: 1.55; color: var(--hv-ink-2) }
.ph6-vs__foot em { font-style: normal; font-weight: 700; color: var(--hv-o) }

/* P3 - three steps over a washed laboratory photograph. */
.ph6-steps { background: var(--hv-paper-3) }
/* Unlike the other washes this one stays full-bleed at every width — the P3
   comp runs the laboratory across the whole section, and the scene is broad
   enough that cover's ultrawide zoom stays sane (no close faces). */
.ph6-steps__photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* 25% vertical anchor keeps the scientist's head and the bench in the band
     cover exposes — dead center at ultrawide crops her face at the jaw. */
  background: var(--pv6-photo) center 25% / cover no-repeat; opacity: .34;
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 12%, #000 72%);
}
.ph6-steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px) }
.ph6-step {
  padding: clamp(22px, 2.4vw, 30px); border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
.ph6-step__no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--hv-o); color: #fff; font-family: var(--hv-display); font-weight: 700; font-size: 1.2rem }
.ph6-step h3 { margin-top: 18px; font-size: 1.14rem; color: var(--hv-ink-2) }
.ph6-step p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--hv-body) }

/* ==========================================================================
   ONSITE NURSES — /onsite-nurses
   ========================================================================== */

/* OS1 · the one BLUE section in the orange system. Pia's OS 1.png keeps the
   OnSite hero in blue — blue dash on a navy eyebrow, second headline line and
   primary CTA in blue, neutral-bordered secondary — while OS 2–5 are orange.
   Confirmed against the comp 2026-09-02; scoped to this hero only. */
.os6-hero .hv6-eyebrow { color: var(--hv-ink-2) }
.os6-hero .hv6-eyebrow::before { background: #4292D5 }
.os6-hero__accent { color: #1580DB }
.os6-hero .hv6-btn--blue { background: #117AD6 }
.os6-hero .hv6-btn--blue:hover { background: #0E63AE; box-shadow: 0 12px 26px -12px rgba(17, 122, 214, .75) }
.os6-hero .hv6-btn--blue:focus-visible { outline-color: #117AD6 }
.os6-hero .hv6-btn--outline { border-color: #D5DCE5; color: var(--hv-ink-2) }
.os6-hero .hv6-btn--outline:hover { background: #F2F6FA; color: var(--hv-ink-2) }
/* The comp's copy column is wider than the shared split hero's: the headline
   breaks after the em-dash into exactly two lines and the lede runs long. */
.os6-hero .pv6-shero__in { max-width: 41rem }
.os6-hero .hv6-lede { max-width: 58ch }

/* OS2 · the comp's figure band carries no icons — every number (brackets
   included) is orange and the caps labels are full navy, not grey. */
.os6-figures .sp6-fig__num { margin-top: 0; color: var(--hv-o) }
.os6-figures .sp6-fig__label { color: var(--hv-ink-2) }

.os6-deliver { background: var(--hv-paper-3) }
.os6-deliver__photo {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  right: max(0px, calc((100% - var(--hv-maxw)) / 2)); width: min(56%, 820px);
  /* Right-anchored, not centered: the comp keeps the patient's whole body in
     frame through the photograph's right edge (his wheelchair ends there). */
  background: var(--pv6-photo) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.os6-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px) }
.os6-card {
  padding: clamp(20px, 2.2vw, 28px); border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  transition: transform .3s var(--hv-ease), background .3s var(--hv-ease);
}
.os6-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .94) }
.os6-card__head { display: flex; align-items: center; gap: 14px }
.os6-card__head .hv6-ico { --hv-ico-size: 46px; color: var(--hv-o) }
.os6-card__head h3 { font-size: 1.08rem; letter-spacing: -.018em; color: var(--hv-ink-2) }
.os6-card p { margin-top: 14px; font-size: 14.8px; line-height: 1.58; color: var(--hv-body) }

.os6-why { background: var(--hv-dark); color: #fff }
.os6-why .hv6-lede { color: #B7C4DA }
.os6-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px) }

/* ==========================================================================
   REENGAGE RESEARCH — /reengage-research (client revision, 2026-09-08)
   One photograph (the hero) and code-native graphics for everything else.
   Reuses the Physicians step cards and the hv-icon stroke set.
   ========================================================================== */
/* Hero: the photograph fills the section, the participant sits right, the copy
   sits in the negative space on the left behind a white-to-transparent veil
   (the client's own gradient stops). object-position 70% keeps her in frame
   as the viewport narrows; below 767px the copy stacks above the picture. */
.rg6-hero { display: flex; align-items: center; min-height: 680px; padding-block: clamp(56px, 6vw, 96px); background: #fff }
/* A flex item shrinks to its content and margin:auto would centre it — the copy
   must start at the gutter, in the negative space, not drift toward the subject. */
.rg6-hero > .hv6-wrap { width: 100% }
/* Headroom for the stand-in frame (hair at its top edge): the photograph starts
   a little below the section's top and its first rows fade in from the white
   ground, so her head has air above it at every width. Desktop only; the
   stacked phone picture is shown whole. Drop when the client's own image, with
   headroom, arrives. */
.rg6-hero__media {
  position: absolute; inset: 0; top: clamp(44px, 6vw, 84px); z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px);
  mask-image: linear-gradient(180deg, transparent 0, #000 120px);
}
/* 70% across per the client. Vertically TOP, not her "center": the stand-in
   frame has the participant's hair at its top edge, so a centred crop takes the
   top of her head off on any hero taller than 16:9 (wide monitors, the phone
   stack). Revisit when her own image, with headroom, arrives. */
.rg6-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% top }
.rg6-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 40%, rgba(255, 255, 255, .35) 62%, rgba(255, 255, 255, 0) 78%);
}
.rg6-hero__in { max-width: 44rem }
.rg6-hero .hv6-h1 { font-size: clamp(2.1rem, 3.9vw, 3.2rem); color: var(--hv-ink-2) }
.rg6-hero .hv6-lede { max-width: 54ch }
.rg6-hero__sub { margin-top: 14px; max-width: 54ch; font-size: 15.6px; font-weight: 600; line-height: 1.5; color: var(--hv-ink-2) }
.rg6-hero__cta { margin-top: 32px }

/* Value strip: three columns, orange line icons, 24px between icon, heading and text. */
.rg6-values { background: var(--hv-paper-3); padding-block: clamp(36px, 3.8vw, 56px); border-bottom: 1px solid var(--hv-line) }
.rg6-values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.8vw, 44px) }
.rg6-value { display: flex; flex-direction: column; gap: 24px }
.rg6-value > svg { width: 34px; height: 34px; color: var(--hv-o) }
.rg6-value h2 { font-size: 1.12rem; letter-spacing: -.02em; color: var(--hv-ink-2) }
.rg6-value p { font-size: 15px; line-height: 1.6; color: var(--hv-body) }

/* Narrow copy column shared by the tint bands (the client's ~720px cap). */
.rg6-narrow { max-width: 720px }
.rg6-narrow .hv6-lede + .hv6-lede { margin-top: 16px }

/* Use cases: four flat cards, one stroke icon each. */
.rg6-uses { background: #fff }
.rg6-uses__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px) }
.rg6-use { padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--hv-line); border-radius: 16px; background: var(--hv-paper-3) }
.rg6-use > svg { width: 30px; height: 30px; color: var(--hv-o) }
.rg6-use h3 { margin-top: 16px; font-size: 1.06rem; letter-spacing: -.018em; color: var(--hv-ink-2) }
.rg6-use p { margin-top: 10px; font-size: 14.8px; line-height: 1.58; color: var(--hv-body) }

/* Four steps on a plain blue-grey gradient — no photograph (revision item 6). */
.rg6-steps { background: linear-gradient(180deg, #F7F8FB 0%, #E9EEF6 100%) }
.ph6-steps__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.ph6-steps__grid--4 .ph6-step p { font-size: 14.6px }
.rg6-steps .ph6-step { border-color: #fff; background: #fff }

/* Deliverables: copy left, a checklist panel right. */
.rg6-deliver { background: #fff }
.rg6-deliver__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(32px, 4.5vw, 80px) }
.rg6-deliver .hv6-h2 { color: var(--hv-ink-2) }
.rg6-panel { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--hv-line); border-radius: 20px; background: var(--hv-paper-3); box-shadow: 0 18px 44px rgba(11, 27, 58, .07) }
.rg6-panel__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--hv-line); font-family: var(--hv-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-body-2) }
.rg6-panel ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px }
.rg6-panel li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hv-line); font-size: 15px; line-height: 1.5; color: var(--hv-ink-2) }
.rg6-panel li:nth-last-child(-n+2) { border-bottom: 0 }
.rg6-panel li .hv6-tick { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 4px; border: 1.5px solid var(--hv-o); border-radius: 50% }

/* From recontact to coordinated follow-up: copy, one outline button, then the
   workflow strip — four numbered nodes joined by a line, vertical on a phone. */
.rg6-recontact__cta { margin-top: 30px }
.rg6-flow { list-style: none; margin: clamp(40px, 4.4vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.rg6-flow__step { position: relative; padding: 0 22px 0 0 }
.rg6-flow__step::before { content: ""; position: absolute; top: 21px; left: 44px; right: 0; height: 2px; background: #F3C9A8 }
.rg6-flow__step:last-child::before { display: none }
.rg6-flow__no { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--hv-o); color: var(--hv-o); font-family: var(--hv-display); font-weight: 700 }
.rg6-flow__step h3 { margin-top: 16px; font-size: 1.04rem; letter-spacing: -.018em; color: var(--hv-ink-2) }
.rg6-flow__step p { margin-top: 8px; max-width: 26ch; font-size: 14.4px; line-height: 1.55; color: var(--hv-body) }

/* Governance: light blue-grey, a restrained shield, 720px copy. */
.rg6-gov { background: #EEF3F9 }
.rg6-gov__in { max-width: 720px }
.rg6-gov__icon { display: block; width: 44px; height: 44px; margin-bottom: 20px; color: var(--hv-o) }
.rg6-gov .hv6-lede + .hv6-lede { margin-top: 16px }

/* The close: navy, text-led, one orange button, the NDA line beneath it. */
.rg6-cta { background: var(--hv-dark); color: #fff }
.rg6-cta__in { max-width: 760px }
.rg6-cta .hv6-eyebrow { color: var(--hv-o) }
.rg6-cta .hv6-h2 { color: #fff }
.rg6-cta .hv6-lede { max-width: 58ch; color: #B7C4DA }
.rg6-cta__btn { margin-top: 32px }
.rg6-cta__note { margin-top: 20px; max-width: 54ch; font-size: 13.6px; line-height: 1.6; color: #93A4C2 }

/* Kept from the first build for the Physicians close. */
.pv6-close__note { margin-top: 18px; max-width: 46ch }

/* Laptop widths: the copy column would otherwise reach the participant, so the
   veil holds white further across and the column narrows (client QA: subject
   not obscured, copy readable, at 1024). */
@media (max-width: 1300px) {
  .rg6-hero__in { max-width: 30rem }
  .rg6-hero__veil {
    background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 46%, rgba(255, 255, 255, .55) 64%, rgba(255, 255, 255, 0) 84%);
  }
}
/* Tablets and phones stack the COPY ABOVE the picture (client item 1). The
   client wrote "767px and below"; at 768 the copy still lands on her face, so
   the stack starts at 900 to keep both her QA checks true on a 768 tablet. */
@media (max-width: 900px) {
  .rg6-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 40px 0 }
  .rg6-hero > .hv6-wrap { order: 1 }
  .rg6-hero__in { max-width: none }
  .rg6-hero__media { order: 2; position: static; height: 380px; margin-top: 34px; -webkit-mask-image: none; mask-image: none }
  .rg6-hero__media img { object-position: 72% top }
  .rg6-hero__veil { display: none }
}

/* ==========================================================================
   PRIVACY — /privacy
   ========================================================================== */
.po6-banner__photo {
  position: absolute; inset: 0 max(0px, calc((100% - var(--hv-maxw)) / 2));
  z-index: 0; pointer-events: none;
  --pv6-edge: clamp(0px, calc((100vw - var(--hv-maxw)) / 6), 110px);
  /* Oversized (130%, top-anchored to keep the faces) so the photograph reaches
     further left, its left side dissolving right where the image begins —
     the fade stops are box-relative, so they sit at the image's edge (~49%). */
  background: var(--pv6-photo) right top / auto 130% no-repeat; opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, transparent 46%, #000 76%, #000 calc(100% - var(--pv6-edge)), transparent);
  mask-image: linear-gradient(90deg, transparent 46%, #000 76%, #000 calc(100% - var(--pv6-edge)), transparent);
}
.po6-body { background: #fff }
.po6-body__wrap { max-width: 74ch }
.po6-body h2 { margin-top: clamp(34px, 3.6vw, 48px); font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--hv-ink-2) }
.po6-body h2:first-child { margin-top: 0 }
.po6-body p, .po6-body li { font-size: 16.2px; line-height: 1.7; color: var(--hv-body) }
.po6-body p { margin-top: 16px }
.po6-body ul { margin-top: 16px; display: grid; gap: 10px }
.po6-body li { position: relative; padding-left: 26px }
.po6-body li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--hv-o) }
/* Policy-text links only — .hv6-btn excluded, or the CTA in the ask card
   below renders orange-on-orange and reads as an empty bar. */
.po6-body a:not(.hv6-btn) { color: var(--hv-o); font-weight: 600 }
.po6-body a:not(.hv6-btn):hover { text-decoration: underline }

.po6-ask { position: relative; margin-top: clamp(46px, 5vw, 72px); border-radius: 22px; overflow: hidden; background: var(--hv-paper-3) }
.po6-ask__photo { position: absolute; inset: 0; z-index: 0; background: var(--pv6-photo) right center / cover no-repeat }
.po6-ask__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #F7F8FB 0, rgba(247, 248, 251, .92) 42%, rgba(247, 248, 251, .35) 74%, rgba(247, 248, 251, .1) 100%) }
.po6-ask__in {
  position: relative; z-index: 2; max-width: 46ch; padding: clamp(30px, 3.4vw, 46px);
  /* The comp's card is ~510px tall at 1440 — tall enough that cover height-fits
     the wide photo strip and the doctor is seen whole rather than beheaded. */
  min-height: clamp(340px, 35vw, 505px);
  display: flex; flex-direction: column; justify-content: center;
}
.po6-ask h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--hv-ink-2) }
.po6-ask p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--hv-body) }
.po6-ask .hv6-btn { margin-top: 26px; align-self: flex-start }

@media (max-width: 1020px) {
  .pv6-shero__photo { width: 62%; opacity: .35 }
  .pv6-shero__in { max-width: none }
  .pv6-close__note { margin-inline: auto }
  .rg6-uses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rg6-deliver__in { grid-template-columns: minmax(0, 1fr) }
  .rg6-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px }
  .rg6-flow__step:nth-child(2)::before { display: none }
  .ph6-split { grid-template-columns: minmax(0, 1fr) }
  .ph6-steps__grid, .os6-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .os6-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .os6-deliver__photo { width: 60%; opacity: .4 }
  .po6-ask__scrim { background: linear-gradient(180deg, rgba(247, 248, 251, .95) 0, rgba(247, 248, 251, .82) 60%, rgba(247, 248, 251, .5)) }
  .po6-ask__in { max-width: none }
}

@media (max-width: 760px) {
  .pv6-shero__photo, .os6-deliver__photo { display: none }
  .ph6-benefits { grid-template-columns: minmax(0, 1fr) }
  .ph6-benefit { padding: 16px 0; border-left: 0 !important; padding-left: 0 !important }
  .ph6-benefit + .ph6-benefit { border-top: 1px solid var(--hv-line) }
  .ph6-vs__cols { grid-template-columns: minmax(0, 1fr) }
  .ph6-steps__grid, .os6-grid, .os6-why__grid { grid-template-columns: minmax(0, 1fr) }
  .pv6-shero__cta .hv6-btn { flex: 1 1 auto }
}

/* ReEngage Research, phone widths (the 1020/760 blocks above carry the rest). */
@media (max-width: 760px) {
  .rg6-values__grid, .rg6-uses__grid, .rg6-panel ul { grid-template-columns: minmax(0, 1fr) }
  .rg6-panel li:nth-last-child(-n+2) { border-bottom: 1px solid var(--hv-line) }
  .rg6-panel li:last-child { border-bottom: 0 }
  .rg6-flow { grid-template-columns: minmax(0, 1fr); row-gap: 0 }
  .rg6-flow__step { padding: 0 0 26px 62px }
  .rg6-flow__no { position: absolute; left: 0; top: 0 }
  .rg6-flow__step::before, .rg6-flow__step:nth-child(2)::before { display: block; top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto }
  .rg6-flow__step:last-child::before { display: none }
  .rg6-flow__step h3 { margin-top: 8px }
  .rg6-flow__step p { max-width: none }
}

/* ==========================================================================
   PHASE I / EARLY PHASE — /phase-i-units (client design, 2026-09-09)

   Michelle's one-page design rebuilt on the v6 system. Almost everything it
   needs already exists, so this block is only what the page adds on top:

     · the hero is the homepage hero's frame — .hv6-hero (navy ground, white
       H1, white lede, orange eyebrow), .hv6-hero__in / __copy / __cta for the
       copy-plus-aside grid, and .hv6-layer for the glass panel. .p16-proof is
       that panel's inside: the big figure, the two items, the footer strip.
     · the two execution panels are .rg6-panel (ReEngage's tinted panel) with
       .rg6-panel__head for the title row; .p16-panel__head only turns the
       head's mono style back off for the h3, and .p16-caps / .p16-infra are
       the two kinds of list that sit inside them.
     · the operating model is the Physicians responsibilities block, .ph6-vs,
       moved onto navy: .p16-vs drops the tinted card and repaints the columns,
       heads, rows and dots for a dark ground.
     · the close is a plain .hv6-sec--tint band; its telephone link is the
       homepage's .hv6-send__tel, left-aligned instead of centred.

   Colour comes from the --hv- tokens; the on-dark greys (#B7C4DA lede,
   #93A7C4 caption) and the white/orange alphas are the values home-v6.css and
   the sections above already use on navy. Her hex values are never repeated —
   the two palettes are the same one.

   Her design collapses at 1050px and 760px; this uses the site's own 1020px
   and 760px, so the page breaks where every other v6 page breaks.
   ========================================================================== */

/* --- 1 · HERO (navy) ------------------------------------------------------ */
/* .hv6-hero's own padding is cut short for the homepage photograph. This hero
   carries no photograph, so it takes the section's fuller rhythm back. */
.p16-hero { padding-block: clamp(56px, 6.6vw, 96px) clamp(50px, 5.6vw, 84px) }
/* The 12ch cap exists so the homepage H1 breaks over the photograph. Here the
   line breaks are typed into the heading and the grid column is the only cap. */
.p16-hero .hv6-h1 { max-width: none }
.p16-hero .hv6-lede { max-width: 52ch }

/* The hero's one ornament: a faint square grid, faded out at both sides. */
.p16-hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 60%, transparent);
}

/* The proof panel. .hv6-layer brings the glass; the dividers here run the full
   width of it, so the panel's own padding moves onto the three parts. */
.p16-proof { padding: 0; overflow: hidden }
.p16-proof__top { padding: clamp(24px, 3vw, 40px) }
.p16-proof__kicker { color: #93A7C4 }
.p16-proof__num {
  margin-top: 8px; font-family: var(--hv-display); font-weight: 700;
  font-size: clamp(4.4rem, 7.2vw, 7.4rem); line-height: .92; letter-spacing: -.06em; color: var(--hv-o);
}
.p16-proof__label { margin-top: 12px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: #fff }
.p16-proof__sub { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #B7C4DA }
.p16-proof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .12) }
.p16-proof__item { padding: 22px clamp(18px, 2vw, 26px) }
.p16-proof__item + .p16-proof__item { border-left: 1px solid rgba(255, 255, 255, .12) }
.p16-proof__item strong {
  display: block; font-family: var(--hv-display); font-weight: 700;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.1; letter-spacing: -.03em; color: #fff;
}
.p16-proof__item span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: #B7C4DA }
.p16-proof__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(18px, 2vw, 26px); border-top: 1px solid rgba(255, 255, 255, .12);
}
.p16-proof__cap b { font-size: 14px; letter-spacing: -.01em; color: #fff }
.p16-proof__cap small {
  font-family: var(--hv-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-align: right; color: #B7C4DA;
}

/* --- 2 · EXECUTION (white) ------------------------------------------------ */
.p16-exec { background: var(--hv-paper) }
/* Heading left, its paragraph right, the two sitting on one baseline. */
.p16-exec__head {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: end; gap: clamp(24px, 5vw, 84px); margin-bottom: clamp(34px, 4vw, 52px);
}
.p16-exec__head .hv6-h2 { color: var(--hv-ink-2) }
.p16-exec__head .hv6-lede { margin-top: 0 }
/* Stretch, not start: the two panels are a pair and their bottom edges read as
   one line. With align-items:start the taller Infrastructure panel hung 36px
   below Study Capabilities at 1440 and the section's bottom edge stepped. */
.p16-exec__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(18px, 1.8vw, 24px) }
/* Her first panel is white; the second keeps the tint .rg6-panel ships with. */
.p16-panel--paper { background: var(--hv-paper) }
/* .rg6-panel__head sets the whole row in the small mono. The h3 takes the
   display face back; the caption beside it keeps the mono. */
.p16-panel__head { align-items: baseline }
.p16-panel__head h3 {
  font-family: var(--hv-display); font-size: clamp(1.2rem, 1.6vw, 1.44rem); font-weight: 700;
  letter-spacing: -.03em; text-transform: none; color: var(--hv-ink-2);
}

/* Six study capabilities, two columns, a hairline between the rows. */
.p16-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 2vw, 26px); margin-top: 4px }
.p16-cap { padding: 18px 0; border-bottom: 1px solid var(--hv-line) }
.p16-cap:nth-last-child(-n+2) { border-bottom: 0 }
/* --hv-o-ink, not --hv-o: this is 11px orange type on white. */
.p16-cap__abbr { display: block; font-family: var(--hv-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hv-o-ink) }
.p16-cap b { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -.012em; color: var(--hv-ink-2) }
.p16-cap small { display: block; margin-top: 5px; font-size: 13.8px; line-height: 1.45; color: var(--hv-body) }

/* Four infrastructure rows, numbered 01–04 in the mono the step cards number in. */
.p16-infra { margin-top: 4px }
.p16-infra__row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--hv-line) }
.p16-infra__row:last-child { border-bottom: 0 }
.p16-infra__no { font-family: var(--hv-mono); font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--hv-o-ink) }
.p16-infra__row b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.012em; color: var(--hv-ink-2) }
.p16-infra__row p { margin-top: 5px; font-size: 13.8px; line-height: 1.45; color: var(--hv-body) }

/* --- 3 · OPERATING MODEL (navy) ------------------------------------------- */
.p16-model { background: var(--hv-dark); color: #fff }
.p16-model .hv6-h2 { color: #fff }
.p16-model .hv6-lede { max-width: 720px; color: #B7C4DA }
.p16-model__head { max-width: 850px; margin-bottom: clamp(30px, 3.6vw, 46px) }

/* .ph6-vs on a dark ground: no tinted card around the two columns, and every
   line, fill and rule repainted in the alphas navy takes. */
.p16-vs { padding: 0; background: transparent }
.p16-vs .ph6-vs__cols { gap: clamp(14px, 1.8vw, 20px) }
.p16-vs .ph6-vs__col {
  padding: clamp(22px, 2.4vw, 28px); border-radius: 18px;
  background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .14);
}
.p16-vs .ph6-vs__col--core { background: rgba(255, 106, 0, .05); border-color: rgba(255, 106, 0, .45) }
.p16-vs .ph6-vs__col .ph6-vs__head { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12) }
.p16-vs .ph6-vs__col .ph6-vs__head span { font-family: var(--hv-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: #fff }
.p16-vs .ph6-vs__col--core .ph6-vs__head span { color: var(--hv-o) }
.p16-vs .ph6-vs__col li { display: flex; gap: 10px; padding: 11px 0; font-size: 14.7px; line-height: 1.5; color: #fff }
.p16-vs .ph6-vs__col li + li { border-top-color: rgba(255, 255, 255, .09) }
.p16-vs__dot { flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: #93A7C4 }
.p16-vs .ph6-vs__col--core .p16-vs__dot { background: var(--hv-o) }

/* The pull quote under the two columns. */
.p16-pull {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  gap: clamp(22px, 3.4vw, 44px); margin-top: clamp(26px, 3vw, 36px);
  padding-top: clamp(24px, 2.6vw, 32px); border-top: 1px solid rgba(255, 255, 255, .12);
}
.p16-pull strong {
  font-family: var(--hv-display); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15; letter-spacing: -.03em; color: #fff;
}
.p16-pull em { font-style: normal; color: var(--hv-o) }
.p16-pull p { font-size: 14.5px; line-height: 1.6; color: #B7C4DA }

/* --- 4 · CLOSE (tint) ----------------------------------------------------- */
.p16-close__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(30px, 5vw, 84px) }
.p16-close .hv6-h2 { color: var(--hv-ink-2) }
.p16-close__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px }
/* .hv6-send__tel centres itself inside the homepage's glass panel; under a
   left-aligned button it starts at the same edge the button does. */
.p16-close__tel { justify-content: flex-start }
.p16-close__sep { color: var(--hv-body-2) }
.p16-close__note { max-width: 48ch }

/* --- Responsive (the site's 1020 / 760, not her 1050 / 760) --------------- */

/* The hero holds two columns down to the site's 1020px, but this hero's copy
   column carries two buttons and they wrap into a ragged stack from about
   1100px. The client's own file collapses at 1050 for the same reason, so this
   hero — and only this one — stacks earlier than the site default. */
@media (max-width: 1100px) {
  .p16-hero .hv6-hero__in { grid-template-columns: minmax(0, 1fr) }
  .p16-proof { max-width: 620px }
}

@media (max-width: 1020px) {
  .p16-exec__head { grid-template-columns: minmax(0, 1fr); align-items: start }
  .p16-exec__grid, .p16-pull, .p16-close__in { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 760px) {
  .p16-proof__grid, .p16-caps { grid-template-columns: minmax(0, 1fr) }
  .p16-proof__item + .p16-proof__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12) }
  /* Stacked, "the last two rows" is just the last row. */
  .p16-cap:nth-last-child(-n+2) { border-bottom: 1px solid var(--hv-line) }
  .p16-cap:last-child { border-bottom: 0 }
  .p16-proof__cap { flex-direction: column; align-items: flex-start; gap: 8px }
  .p16-proof__cap small { text-align: left }
  /* Full-width buttons on a phone, as the hero's already are. */
  .p16-close__actions { align-self: stretch; align-items: stretch }
  .p16-close__actions .hv6-btn { justify-content: center }
}