/* one39.co homepage v2 (2026-08-25) - aesthetic sibling of hire-talent + find-a-job.
   Arc: video hero -> marquee -> problem (white) -> answer (white) -> empathy (dark photo)
   -> proof people cards (white) -> trust strip -> salary (site.css) -> closing photo.
   Shared chrome (nav, footer, drawer, marquee, salary, .btn) lives in site.css. */

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

body.page-home {
  background: var(--paper, #fff);
  color: var(--ink, #0e0807);
}

/* Cursor accent styles are injected by shared /js/cursor.js */

/* ---------- reveals + entrance settle ---------- */
.hh-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.hh-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* hero entrance: mask-rise per headline line, watermark slow-fade, then sub/CTA, doors last */
.hv-hero-right p,
.hv-hero-right .btn,
.hv-hero-doors {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.hv-hero h1 .hv-mask {
  display: block;
  overflow: hidden;
}
.hv-hero h1 .hv-line {
  display: block;
  transform: translateY(114%);
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}
.hv-hero-script {
  opacity: 0;
  transition: opacity 1.2s ease .45s;
}
body.is-settled .hv-hero-right p,
body.is-settled .hv-hero-right .btn,
body.is-settled .hv-hero-doors {
  opacity: 1;
  transform: none;
}
body.is-settled .hv-hero h1 .hv-line { transform: none; }
body.is-settled .hv-hero-script { opacity: var(--hv-script-opacity, 0.045); }
/* stagger: line 1, line 2 (~140ms apart), sub, CTA, doors */
body.is-settled .hv-hero h1 .hv-mask:nth-child(1) .hv-line { transition-delay: .12s; }
body.is-settled .hv-hero h1 .hv-mask:nth-child(2) .hv-line { transition-delay: .26s; }
body.is-settled .hv-hero-right p { transition-delay: .4s; }
body.is-settled .hv-hero-right .btn { transition-delay: .52s; }
body.is-settled .hv-hero-doors { transition-delay: .62s; }
@media (prefers-reduced-motion: reduce) {
  .hh-reveal, .hv-hero-copy > *,
  .hv-hero-right p, .hv-hero-right .btn,
  .hv-hero h1 .hv-line, .hv-hero-doors {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hv-hero-script {
    opacity: var(--hv-script-opacity, 0.045) !important;
    transition: none !important;
  }
}

/* ---------- shared bits (benchmark DNA) ---------- */
/* statement gold word on its own line - hire-talent .ht-overdeliver h2 .gold pattern */
.gold { color: var(--gold); }
.hv-hero h1 .gold,
.hv-answer h2 .gold,
.hv-empathy h2 .gold,
.hv-close h2 .gold { display: block; color: var(--gold); }
/* full-ink second lines (gold discipline, 2026-08-26): Problem + Proof keep the
   line break but lose the gold span; gold in white bands lives in the Answer h2 only */
.hv-problem h2 .h2-line2,
.hv-proof h2 .h2-line2 { display: block; color: var(--ink); }

/* eyebrow - one sitewide treatment (matches coaching + who-we-are): 13px / 500 / 0.28em */
.hv-eyebrow {
  display: block;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dark, #8a6f38);
  margin-bottom: 22px;
}
.hv-eyebrow--center { text-align: center; margin-bottom: 30px; }
.hh-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: gap .2s, color .2s;
}
.hh-arrow-link:hover { gap: 13px; color: var(--gold-dark); }
/* dark-band variant */
.hh-arrow-link--light { color: #fff; }
.hh-arrow-link--light:hover { color: var(--gold); }

/* statement band type - big Helvetica 500, sentence case, tight (benchmark spec) */
.hv-problem h2,
.hv-answer h2,
.hv-empathy h2,
.hv-close h2 {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  line-height: 0.92;
  font-weight: 500;
  letter-spacing: -0.05em;
  text-transform: none;
  margin: 0;
}

/* ============================================================
   1. HERO - video bg, CENTERED stack, gold hairline below
   ============================================================ */
.hv-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  max-height: 920px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #000;
}
.hv-hero-media {
  position: absolute;
  inset: 0;
  /* poster doubles as the reduced-motion / video-hidden fallback */
  background: #000 url("/assets/video/hero-poster.jpg") center/cover no-repeat;
}
.hv-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hv-hero-video { display: none; }
}
/* no scrim slab (client, 2026-08-27): the video reads clean. Legibility comes from
   a light top strip (nav zone) + a subtle full-width bottom gradient + text-shadow. */
.hv-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,8,7,0.34) 0%, rgba(14,8,7,0) 24%),
    linear-gradient(180deg, rgba(14,8,7,0) 44%, rgba(14,8,7,0.3) 70%, rgba(14,8,7,0.62) 100%);
}
/* ghosted FULL One39 script wordmark - brand DNA spanning wide across the hero,
   whisper-subtle, seated in the upper half so it never fights the headline. */
.hv-hero-script {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 9%;
  transform: translateX(-50%);
  width: clamp(640px, 78vw, 1180px);
  height: auto;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}
/* asymmetric editorial split: statement lower-left, action lower-right,
   both bottom-anchored just above the doors */
.hv-hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  /* on the site grid: same 1240px inner + 60px pad as every section head below,
     so the hero copy's left edge lands at x=160 @1440 (Round B item 1) */
  max-width: 1240px;
  margin: auto auto 0;
  padding: 110px 60px 52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(36px, 4vw, 72px);
  text-align: left;
}
.hv-hero-left { min-width: 0; }
.hv-hero h1 {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  text-transform: none;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 2px 30px rgba(0,0,0,0.4);
}
/* two dramatic statement lines, same register, deliberately staggered:
   line 1 white at the inset, line 2 gold pushed right (client, 2026-08-27) */
.hv-hero h1 .hv-line {
  font-size: clamp(3.1rem, 5.9vw, 5.7rem);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.05em;
  white-space: nowrap;
  padding-bottom: 0.08em; /* keep round-off inside the mask */
  margin-bottom: -0.08em;
}
.hv-hero h1 .hv-mask:nth-child(1) .hv-line { color: #fff; }
.hv-hero h1 .hv-mask:nth-child(2) .hv-line { color: var(--gold); }
.hv-hero h1 .hv-mask:nth-child(2) { margin-left: clamp(2.2rem, 5.2vw, 5rem); }
.hv-hero-right {
  flex: 0 0 clamp(280px, 24vw, 340px);
  padding-bottom: 6px;
}
.hv-hero p {
  max-width: 34ch;
  margin: 0 0 26px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 16px rgba(0,0,0,0.4);
}

/* two-service split docked at the hero base - original One39 WP .hero-panel DNA,
   rebuilt as glass-dark doors over the live video */
.hv-hero-doors {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(198,172,116,0.4);
}
.hv-door {
  display: block;
  padding: 26px 24px 30px;
  text-align: center;
  color: #fff;
  background: rgba(10,7,5,0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .25s;
}
.hv-door + .hv-door { border-left: 1px solid rgba(198,172,116,0.5); }
.hv-door-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translateY(0);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.hv-door-label {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hv-door-line {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96);
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.hv-door-arrow { display: inline-block; transition: transform .25s; }
.hv-door:hover,
.hv-door:focus-visible { background: rgba(72,56,32,0.55); }
.hv-door:hover .hv-door-inner,
.hv-door:focus-visible .hv-door-inner { transform: translateY(-3px); }
.hv-door:hover .hv-door-arrow,
.hv-door:focus-visible .hv-door-arrow { transform: translateX(5px); }
.hv-door:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ============================================================
   3. THE PROBLEM - white, statement left + pain dots right
   ============================================================ */
.hv-problem {
  background: var(--paper);
  color: var(--ink);
  padding: 104px 0 110px;
}
.hv-problem-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
.hv-problem h2 {
  font-size: clamp(2.75rem, 4.6vw, 4.25rem);
  color: var(--ink);
  margin-bottom: 24px;
}
.hv-problem-sub {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  line-height: 30px;
  font-weight: 300;
  color: #3f3833;
  margin: 0;
  max-width: 480px;
}
.hv-problem-pains {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.hv-pain-item {
  display: flex; gap: 16px; align-items: flex-start;
}
/* minus-dot - hire-talent .ht-pain-item .dot pattern */
.hv-pain-item .dot {
  flex: 0 0 22px; width: 22px; height: 22px;
  background: var(--ink); border-radius: 50%;
  margin-top: 2px;
  position: relative;
  display: inline-block;
}
.hv-pain-item .dot::after {
  content: "";
  position: absolute;
  left: 6px; top: 10px;
  width: 10px; height: 2px;
  background: #fff;
}
.hv-pain-item p {
  margin: 0;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; line-height: 26px;
  color: var(--ink);
  font-weight: 400;
}

/* ============================================================
   4. THE ANSWER - two practices, gold numbered 1-2
   ============================================================ */
.hv-answer {
  background: var(--cream, #f4efe8);
  color: var(--ink);
  padding: 104px 0 110px;
  border-top: 1px solid var(--line);
}
.hv-answer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
}
.hv-answer-head { margin-bottom: 64px; }
.hv-answer h2 {
  font-size: clamp(2.75rem, 4.6vw, 4.25rem);
  color: var(--ink);
}
.hv-answer h2 .gold { color: var(--gold-dark); }
.hv-answer-sub {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  color: #3f3833;
  margin: 20px 0 0;
  max-width: 36em;
}
.hv-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.hv-practice { position: relative; }
/* dotted connector between steps - hire-talent .ht-step::before pattern */
.hv-practice::before {
  content: "";
  position: absolute;
  top: 15px; left: 44px; right: -36px;
  height: 1px;
  background-image: linear-gradient(to right, rgba(14,8,7,0.35) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}
.hv-practice:last-child::before { display: none; }
/* gold circle number - hire-talent .ht-step-num pattern */
.hv-practice-num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 600;
  margin: 0 0 24px 0;
  position: relative; z-index: 1;
}
.hv-practice-label {
  display: block;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
.hv-practice h3 {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 14px;
}
.hv-practice p {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: #3f3833;
  margin: 0 0 24px;
  max-width: 30em;
}

/* ============================================================
   5. EMPATHY PHOTO BAND - dark, split statement/copy
   ============================================================ */
.hv-empathy {
  position: relative; color: #fff;
  padding: 130px 0;
  background-color: #000;
  background-image: url("/assets/images/gathered/web/freedom-c3edfd-cd46d.jpg");
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 540px;
  display: flex;
  align-items: center;
}
.hv-empathy::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,8,7,0.72) 0%, rgba(14,8,7,0.45) 55%, rgba(14,8,7,0.3) 100%);
}
.hv-empathy-inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  width: 100%;
  padding: 0 60px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px;
  align-items: center;
}
.hv-empathy h2 {
  font-size: clamp(2.75rem, 4.8vw, 4.25rem);
  color: #fff;
  max-width: 620px;
}
.hv-empathy-right p {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 27px;
  font-weight: 300;
  color: rgba(255,255,255,0.92);
  margin: 0 0 28px;
  max-width: 30em;
}

/* ============================================================
   5b. STAFFING PROOF - hire-talent testimonial band, 1:1 lift
   (markup + card styles identical to ht-testimonials)
   ============================================================ */
.hv-staffproof {
  background: var(--ink);
  color: #fff;
  /* tighter than the 104/110 scale on purpose: this band continues the dark
     staffing chapter opened by .hv-empathy, and the whole band must fit one
     900px viewport (section-height gate) */
  padding: 72px 0 78px;
}
.hv-staffproof-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
}
.hv-staffproof .hv-proof-head { margin-bottom: 44px; }
.hv-staffproof .hv-eyebrow { margin-bottom: 16px; }
.hv-staffproof h2 {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.1rem, 3.1vw, 3rem);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.045em;
  text-transform: none;
  color: #fff;
  margin: 0;
}
.hv-staffproof h2 .h2-line2 { display: block; color: #fff; }
.hv-staffproof .hv-proof-head .hh-arrow-link { white-space: nowrap; margin-bottom: 6px; }
/* card anatomy copied from hire-talent.css .ht-testimonial* */
.hv-staffproof .ht-testimonials-inner {
  max-width: none;
  padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.hv-staffproof .ht-testimonial-photo {
  width: 100%; aspect-ratio: 1 / 1;
  background-size: cover; background-position: center 20%;
  border-radius: 22px; margin-bottom: 24px;
  /* Round C item 1: one shared warm-mono grade across the trio (Groeschel warm
     color / Chandler gray studio / Jenkins white-bg) so the row reads as one
     system inside the dark band; the soft top-down wash settles the bright
     Jenkins field into the band */
  position: relative;
  overflow: hidden;
  filter: grayscale(1) sepia(0.26) saturate(1.2) brightness(0.94) contrast(1.03);
}
/* the Jenkins studio shot's white field needs one step more settling than the
   other two to sit at the same value in the band */
.hv-staffproof .ht-testimonial-photo[style*="c45c1fd"] {
  filter: grayscale(1) sepia(0.26) saturate(1.2) brightness(0.87) contrast(1.04);
}
.hv-staffproof .ht-testimonial-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(14,8,7,0.05) 0%, rgba(14,8,7,0.16) 100%);
}
.hv-staffproof .ht-testimonial h4 {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px; font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
  color: #fff;
}
.hv-staffproof .ht-testimonial-org {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 18px; font-weight: 500;
}
.hv-staffproof .ht-testimonial-quote {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: rgba(255,255,255,0.92);
  font-size: 16px; line-height: 26px; font-weight: 300;
  margin: 0;
}

/* ============================================================
   6. PROOF - big portrait cards + typographic quote card
   ============================================================ */
.hv-proof {
  background: var(--paper);
  color: var(--ink);
  padding: 104px 0 110px;
}
.hv-proof-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 60px;
}
.hv-proof-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
}
.hv-proof h2 {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.1rem, 3.1vw, 3rem);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.045em;
  text-transform: none;
  color: var(--ink);
  margin: 0;
}
.hv-proof-head .hh-arrow-link { white-space: nowrap; margin-bottom: 6px; }
.hv-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
/* portrait card - hire-talent .ht-testimonial pattern, on white */
.hv-person-photo {
  width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 22px;
  margin-bottom: 24px;
  background: var(--cream);
}
.hv-person-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
.hv-person h4 {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px; font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.hv-person-org {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: var(--gold-dark);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 500;
}
.hv-person-stat {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: #3f3833;
  font-weight: 300;
  margin: 0;
}
.hv-person-stat .num {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hv-person-stat .delta {
  color: var(--gold-dark);
  font-weight: 600;
  margin-left: 6px;
}
/* typographic quote card */
.hv-quote-card {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px 32px 30px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.hv-quote-card blockquote {
  margin: 0 0 22px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
}
.hv-quote-card figcaption { margin-top: auto; }
.hv-quote-card figcaption strong {
  display: block;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}
/* same anatomy as the photo cards: name, org, stat row; attribution pinned to the
   card base via figcaption margin-top:auto so all three bottoms align (Round B item 2) */
.hv-quote-card .hv-person-org { margin: 0 0 14px; display: block; }
.hv-quote-card .hv-person-stat { margin: 0; }
.hv-quote-card .hv-person-stat + .hv-person-stat { margin-top: 5px; }

/* ============================================================
   7. TRUST STRIP - compact logo chips + one line
   ============================================================ */
.hv-trust {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: 64px 0 68px;
}
.hv-trust-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 60px;
}
.hv-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.hv-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  /* Round C item 2: 150px box brings the compact marks (Faith, Impact, The Well)
     to the same box width as the wordmark chips (155-171px) at 1440 */
  min-width: 150px;
  padding: 0 24px; /* 8px scale */
  border-radius: 3px;
  background: var(--cream, #f4efe8);
  border: 1px solid var(--line);
}
.hv-logo-chip img {
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.85;
  transition: opacity .25s;
}
.hv-logo-chip:hover img { opacity: 1; }
.hv-logo-chip img { height: 30px; max-width: 172px; }
.hv-logo-chip img[src*="faith-church"] { height: 52px; }
.hv-logo-chip img[src*="hope-city"] { height: 23px; max-width: 192px; }
.hv-lg-tall { height: 54px; }

/* ============================================================
   9. CLOSING - statement over photo
   ============================================================ */
.hv-close {
  position: relative;
  min-height: 600px;
  max-height: 880px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.hv-close-photo {
  position: absolute;
  inset: 0;
}
.hv-close-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hv-close-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* center ellipse holds the copy zone dark over the arena's stage-light hotspots
     so the gold line keeps >=3:1 on the brightest frame (audit R2 item 5) */
  background:
    radial-gradient(ellipse 62% 52% at 50% 52%, rgba(14,8,7,0.62) 0%, rgba(14,8,7,0.4) 60%, rgba(14,8,7,0) 100%),
    linear-gradient(180deg, rgba(14,8,7,0.62) 0%, rgba(14,8,7,0.52) 50%, rgba(14,8,7,0.72) 100%);
}
.hv-close-copy {
  position: relative;
  z-index: 1;
  padding: 120px 32px 110px;
  max-width: 860px;
}
.hv-close h2 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  color: #fff;
  margin-bottom: 24px;
}
.hv-close-copy p {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,0.92);
  margin: 0 auto 32px;
  max-width: 32em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hv-hero-copy { padding: 100px 36px 40px; }
  .hv-hero-right { flex-basis: 280px; }
  .hv-problem-inner,
  .hv-answer-inner,
  .hv-empathy-inner,
  .hv-proof-inner,
  .hv-staffproof-inner,
  .hv-trust-inner { padding-left: 36px; padding-right: 36px; }
  .hv-answer-grid { gap: 56px; }
  .hv-proof-grid { gap: 28px; }
  .hv-staffproof .ht-testimonials-inner { gap: 28px; }
}

@media (max-width: 900px) {
  .hv-hero { min-height: 640px; }
  /* no slab on mobile either: one full-width bottom-heavy gradient carries the
     copy zone through the video's bright choir frames */
  .hv-hero-media::after {
    background:
      linear-gradient(180deg, rgba(14,8,7,0.38) 0%, rgba(14,8,7,0) 22%),
      linear-gradient(180deg, rgba(14,8,7,0) 26%, rgba(14,8,7,0.5) 46%, rgba(14,8,7,0.72) 70%, rgba(14,8,7,0.85) 100%);
  }
  .hv-hero-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 96px 24px 30px;
  }
  .hv-hero h1 .hv-line {
    font-size: clamp(2.15rem, 9.6vw, 3.1rem);
  }
  .hv-hero h1 .hv-mask:nth-child(2) { margin-left: clamp(1rem, 5.5vw, 1.8rem); }
  .hv-hero-right { flex: none; padding-bottom: 0; }
  .hv-hero p { font-size: 16px; margin-bottom: 22px; }
  .hv-hero-script { width: 128vw; max-width: none; left: 50%; top: 13%; transform: translateX(-50%); --hv-script-opacity: 0.038; }
  .hv-hero-doors { grid-template-columns: 1fr; }
  .hv-door { padding: 17px 20px 19px; }
  .hv-door + .hv-door { border-left: 0; border-top: 1px solid rgba(198,172,116,0.5); }
  .hv-door-line { font-size: 18px; }

  .hv-problem { padding: 76px 0 80px; }
  .hv-problem-inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 0 24px;
  }
  .hv-problem-pains { gap: 24px; }

  .hv-answer { padding: 72px 0 80px; }
  .hv-answer-inner { padding: 0 24px; }
  .hv-answer-head { margin-bottom: 44px; }
  .hv-answer-grid { grid-template-columns: 1fr; gap: 48px; }
  .hv-practice::before { display: none; }

  .hv-empathy { padding: 90px 0; min-height: 0; }
  .hv-empathy-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
  }

  .hv-proof { padding: 72px 0 76px; }
  .hv-proof-inner { padding: 0 24px; }
  .hv-proof-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 36px;
  }
  .hv-proof-grid { grid-template-columns: 1fr; gap: 48px; }
  .hv-quote-card { align-self: auto; }

  .hv-staffproof { padding: 72px 0 76px; }
  .hv-staffproof-inner { padding: 0 24px; }
  .hv-staffproof .hv-proof-head { margin-bottom: 36px; }
  .hv-staffproof .ht-testimonials-inner { grid-template-columns: 1fr; gap: 48px; }

  .hv-trust { padding: 52px 0 56px; }
  .hv-trust-inner { padding: 0 24px; }
  /* Round C item 2: designed 2-2-2-1 pattern at phone widths (was a flowed
     2-2-1-1-1 rag) — strict 2-col grid, The Well closes the band on a full row */
  .hv-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 380px;
    margin: 0 auto;
  }
  .hv-logo-chip { height: 52px; padding: 0 16px; min-width: 0; width: 100%; }
  /* beat the desktop [src*=] max-widths (same specificity, later in file) so wide
     wordmarks stay inside their chip box */
  .hv-logos .hv-logo-chip img { max-width: 100%; }
  .hv-logos .hv-logo-chip img[src*="faith-church"] { height: 40px; }
  .hv-logo-chip:last-child { grid-column: 1 / -1; }
  .hv-lg-word { height: 21px; }
  .hv-lg-wide { height: 26px; }
  .hv-lg-mark { height: 34px; }
  .hv-lg-tall { height: 38px; }

  .hv-close { min-height: 520px; }
  .hv-close-copy { padding: 100px 24px 92px; }

  /* kill the dead white band between the salary image and the closing CTA
     (Round B item 5 — home-scoped; the shared band elsewhere is untouched) */
  .page-home .salary { padding: 60px 0 48px; }
  .page-home .salary-inner { gap: 36px; }
}

/* staffing promo band additions (2026-08-26) */
.hv-empathy-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.hv-eyebrow--dark { color: var(--gold); display: inline-block; margin-bottom: 14px; }

/* gold-on-cream token (2026-08-26): #8A6F38 reads 4.16:1 on the cream band bg,
   under AA for small text. Cream-band usages drop to #6f5b2d (>=4.5:1 on #f4efe8).
   #8A6F38 stays everywhere it sits on pure white (4.76:1, passes). */
.hv-answer .hv-eyebrow,
.hv-practice-label,
.hv-quote-card .hv-person-org { color: #6f5b2d; }