/**
 * Home hero — R7.
 */

.wc-hero {
  position: relative;
  /* overflow: visible so the brandmark logo can render at full size
     and bleed past the hero's bottom edge. The .wc-hero__bg sits at
     z-index 0 behind the inner content (z-index 1) so the bleed
     stays behind the next section's content. */
  overflow: visible;
  padding-block: var(--wc-space-3xl) var(--wc-space-2xl);
  background: linear-gradient(
    180deg,
    var(--wc-color-glacier) 0%,
    color-mix(in srgb, var(--wc-color-glacier) 35%, var(--wc-color-bg)) 55%,
    var(--wc-color-bg) 100%
  );
}

.wc-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* .wc-hero__brandmark is the position-anchor wrapper. Its top edge sits
   just below "Let's start a conversation" so the headline area stays
   clean. The wrapper itself has no background — the inner
   .wc-hero__brandmark-img holds the actual asset at full size, which
   is allowed to overflow the wrapper (and the hero) so the logo reads
   at its intended scale behind the body copy + pull-quote. */
.wc-hero__brandmark {
  /* Wrapper spans the hero's bounds; the inner image positions itself
     past the hero bottom and is centered on Bill Willis's photo. */
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
}

.wc-hero__brandmark-img {
  /* Per 2026-05-11 design review: bullseye is much larger and bleeds
     off the LEFT edge of the viewport. Sized to ~85vw with the center
     anchored at ~20vw so roughly half the bullseye sits past the
     viewport's left edge. The dart still arcs up-right behind the
     body copy. */
  position: absolute;
  top: 56vw;
  left: 20vw;
  transform: translate(-50%, -50%);
  width: min(85vw, 1632px);
  aspect-ratio: 2524 / 2633;
  background-image: url('../img/hero-bg-logo.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
}

.wc-hero__inner {
  /* Per Figma R7: H1 width=1172/1920 (61%), body width=1439/1920 (75%).
     Widened 20% on 2026-05-08 (960 → 1152px) so the body copy reads
     across a more comfortable measure under the larger headline. The
     wc-hero__inner max-width overrides the parent .wc-container 1100px
     cap because hero.css loads after tokens.css. */
  position: relative;
  z-index: 1;
  max-width: 1234px;
}

/* Type-prefixed selector ties specificity with the .wc-page h1 default
   (0,1,1) so this size + weight actually wins over the token-driven
   default. */
h1.wc-hero__headline {
  /* Source Serif 4. Leading tightened per comp 2026-05-11 (140pt on
     150pt text → ~0.93 ratio). Header copy keeps -25 tracking.
     Dialed back ~15% on 2026-05-12 per design review. */
  font-family: var(--wc-font-serif);
  font-size: clamp(2.75rem, 6.1vw, 5.5rem);
  font-weight: var(--wc-fw-regular);
  line-height: 0.93;
  color: var(--wc-color-brand);
  margin: 0 0 var(--wc-space-md);
  letter-spacing: var(--wc-tracking-tight);
}

.wc-hero__cta {
  /* Tightened bottom margin 2026-05-11 so the CTA and the first body
     paragraph read as part of the same block. */
  margin: 0 0 var(--wc-space-md);
  font-family: var(--wc-font-sans);
  font-size: clamp(1.25rem, 2.4vw, 3rem);
  font-weight: var(--wc-fw-light);
  letter-spacing: var(--wc-tracking-tight);
}

/* Default CTA link styling — text reads in charcoal per R7 comp, with
   only the trailing chevron painted in accent red. The type-prefixed
   `a.wc-link-cta` selector matches the .wc-page a default's specificity
   (0,1,1) so source order resolves in our favor. The Bottom-CTA's
   "Contact us" link explicitly re-overrides to brand burgundy in
   footer.css. */
a.wc-link-cta {
  display: inline-flex;
  /* Center-align so the larger 1.25em » glyph lines up vertically with
     the middle of the text instead of sitting on its baseline (which
     left the chevron's bottom dropping below the text). */
  align-items: center;
  /* Gap dialed down 2026-05-16 — tightens the space between
     "Contact us" / "Let's start a conversation" and the » chevron. */
  gap: 0;
  color: var(--wc-color-text);
  /* Inherit weight from the parent CTA wrapper — hero CTA's parent
     .wc-hero__cta sets Light (300), bottom CTA's parent
     .wc-bottom-cta__line sets Light too but .wc-bottom-cta__link
     re-overrides to Regular for the "Contact us" word. */
  font-weight: inherit;
  text-decoration: none;
  transition: color var(--wc-transition-fast);
}

a.wc-link-cta:hover,
a.wc-link-cta:focus-visible {
  color: var(--wc-color-brand);
}

a.wc-link-cta span[aria-hidden] {
  /* Uniform across the page (2026-05-11): all red » chevrons render
     in Source Serif 4 Regular at ~1.25em of the surrounding text. */
  color: var(--wc-color-accent);
  font-family: var(--wc-font-serif);
  font-size: 1.25em;
  font-weight: var(--wc-fw-regular);
  /* Tightened 2026-05-16 — was 0.15em; sits flush with the text. */
  margin-left: 0.05em;
  transition: transform var(--wc-transition-base), color var(--wc-transition-fast);
}

a.wc-link-cta:hover span[aria-hidden],
a.wc-link-cta:focus-visible span[aria-hidden] {
  color: var(--wc-color-accent-dark);
  transform: translateX(3px);
}

.wc-hero__body {
  /* Body copy uses NORMAL tracking (0) — only header copy / names /
     CTAs get the tight tracking. Tighter bottom margin 2026-05-11 to
     close the gap between the two paragraphs. */
  font-family: var(--wc-font-sans);
  font-size: clamp(0.9rem, 1.92vw, 2.4rem);
  font-weight: var(--wc-fw-light);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--wc-color-text);
  margin: 0 0 var(--wc-space-md);
  max-width: none;
}

.wc-hero__pullquote {
  /* Same sans + size as body, Inter Semi Bold burgundy. Italicized
     "with" inherits italic via <em> + the loaded
     "Inter Semi Bold Italic" face. Normal tracking (body copy). */
  font-family: var(--wc-font-sans);
  font-size: clamp(0.9rem, 1.92vw, 2.4rem);
  font-weight: var(--wc-fw-semibold);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--wc-color-brand);
  margin: 0;
  max-width: none;
}

@media (max-width: 640px) {
  .wc-hero {
    padding-block: var(--wc-space-2xl) var(--wc-space-xl);
  }

  .wc-hero__brandmark {
    background-size: auto 90%;
    background-position: right -25% top 20%;
    opacity: 0.7;
  }

  .wc-hero__headline {
    font-size: var(--wc-fs-4xl);
  }
}