/* ============================================================
   Who We Help page — hero flow diagram, audience value lists,
   real product UI shots, shared-system diagram, CTA cards.
   ============================================================ */

/* Sticky-header offset for in-page anchor targets */
#contractors,
#associations,
#industry-partners {
  scroll-margin-top: 84px;
}

/* ---- Hero (full-bleed photo, centered copy) ---- */
.hero {
  --header-h: 68px;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(56px, 11vh, 130px));
  padding-bottom: clamp(56px, 11vh, 130px);
  min-height: min(80vh, 740px);
  display: flex;
  align-items: center;
}

.hero > .container {
  width: 100%;
}

/* Taller hero reveals more of the scene above and below the subjects,
   pulling the width-limited cover image back so it reads less zoomed-in */
.hero .photo-bg img {
  object-position: 50% 50%;
}

.hero-copy {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.hero-copy .lead {
  max-width: 680px;
  margin: var(--space-6) auto 0;
}

/* ---- Audience gateway cards (inset header photo + body) ---- */
.gateway-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}

/* Photo is inset from the card edges with its own rounded corners and
   a consistent proportion, so it reads as a framed image, not a bleed */
.gateway-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--space-6);
}

.gateway-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gateway-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Icon sits in normal flow below the image, so all three align */
.gateway-body .icon-tile {
  margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .gateway-card {
    padding: var(--space-6);
  }
}

/* ---- Audience sections ---- */
.audience-flow {
  margin-bottom: var(--space-12);
}

.value-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.value-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.value-list .icon-tile {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.value-list h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-1);
}

.value-list p {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  max-width: 48ch;
}

/* Left copy column: value list + reassurance card stacked */
.contractor-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Right media column: photo + real phone UI stacked together so
   they read as one connected column instead of leaving a dead gap
   below whichever column is shorter */
.aside-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* True-portrait roofer photo (intrinsic 4:5) — capped so it doesn't
   dominate the column at full bleed width */
.aside-photo {
  max-width: 340px;
  margin-inline: auto;
}

.section-ctas {
  margin-top: var(--space-12);
}

/* ---- Contractors: real phone UI (Bedrok product shots) ---- */
.contractor-ui figcaption {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-meta);
  color: var(--color-text-meta);
}

/* ---- Associations: real web UI shot + standalone event photo ---- */
.assoc-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  /* Keep the media column visually anchored to the top of the
     four-item value list */
  .assoc-media {
    position: sticky;
    top: 96px;
  }
}

/* ---- Industry partners: wide intro photo ----
   Photo is intrinsically 16:9; the previous 21:9 crop cut into the
   people in frame, so it renders uncropped. */
.partner-photo {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-12);
}

/* ---- Industry partner CTA ---- */
.partner-cta {
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
}

/* ---- Shared system diagram (dark band) ---- */
.system-diagram {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  margin-bottom: var(--space-16);
}

/* Node labels sit on the dark topo band — full card treatment so
   no text floats directly on the texture */
.system-node {
  width: 100%;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-card);
}

.system-node strong {
  display: block;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.system-node p {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.system-arrow {
  display: grid;
  place-items: center;
  color: var(--color-text-meta);
}

.system-arrow .icon {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
}

@media (min-width: 900px) {
  .system-diagram {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
  }

  .system-arrow .icon {
    transform: none;
  }
}

/* ---- Final CTA: two side-by-side cards ---- */
.cta-choice .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cta-choice .card p {
  margin-bottom: var(--space-6);
}

.cta-choice .card .btn {
  margin-top: auto;
}