/* ==========================================================================
   WHO WE HELP
   Sections in page order:
   1. Hero (shared .photo-hero)         5. Connected services (4 cards)
   2. Intro ("Built for complexity")  6. FAQ (uses shared .faq component)
   3. Industries (sticky index + 7)   7. Closing CTA
   4. How we work (5 fit cards)
   ========================================================================== */

/* Shared heading size for this page */
.wwh-h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.wwh-section {
  padding-block: var(--space-section);
}

/* Small "01 / FIT" labels inside cards */
.wwh-tag {
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
  color: var(--blue-500);
}

.wwh-tag--gold {
  color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   1. HERO — uses the shared .photo-hero component (components.css)
   -------------------------------------------------------------------------- */

/* Phones: slide the photo so the two people in hard hats stay in view (Mike, 7-oct-2026) */
@media (max-width: 767px) {
  .photo-hero__image[src*="who-we-help-hero"] {
    object-position: 88% 50%;
  }
}

/* Desktop: the H1 sits on one line (Mike, 8-oct-2026) */
@media (min-width: 992px) {
  .photo-hero__title {
    max-width: none;
    white-space: nowrap;
    font-size: var(--text-5xl);
  }
}

/* --------------------------------------------------------------------------
   2. INTRO
   -------------------------------------------------------------------------- */
.wwh-intro {
  background: var(--white);
}

.wwh-intro__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 32px;
  align-items: end;
}

.wwh-intro__grid > :first-child { grid-column: 1 / 6; }
.wwh-intro__grid > :last-child  { grid-column: 7 / -1; }

.wwh-intro__text {
  font-size: var(--text-20);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   3. INDUSTRIES
   -------------------------------------------------------------------------- */
.wwh-industries {
  background: var(--gray-100);
}

.wwh-industries__head {
  max-width: 780px;
  margin-bottom: 72px;
}

.wwh-industries__head .wwh-h2 {
  margin-bottom: 21px;
}

.wwh-industries__lead {
  color: var(--color-text-strong);
  font-size: var(--text-18);
  line-height: var(--leading-relaxed);
}

.wwh-industries__layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 48px;
  align-items: start;
}

.wwh-industries__layout > :first-child { grid-column: 1 / 5; }
.wwh-industries__layout > :last-child  { grid-column: 5 / -1; }

/* Sticky index card */
.wwh-index {
  position: sticky;
  top: 110px;
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--blue-900);
  color: var(--white);
}

.wwh-index ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.wwh-index a {
  display: flex;
  gap: 10px;
  padding: 16px 8px;
  border-bottom: 1px solid var(--on-dark-line);
  color: var(--white);
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-cozy);
  text-decoration: none;
  text-transform: uppercase;
}

.wwh-index a:hover {
  color: var(--gold-500);
}

.wwh-index__num {
  flex-shrink: 0;
  color: var(--gold-500);
}

/* Industry cards */
.wwh-sectors {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.sector-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px 48px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-card);
  background: var(--white);
  scroll-margin-top: 110px;
}

.sector-card__title {
  margin: 14px 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.sector-card__subtitle {
  margin-bottom: 14px;
  font-size: var(--text-24);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.sector-card__text {
  color: var(--color-text-strong);
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
}

.sector-card .link-arrow {
  margin-top: 12px;
  padding-left: 0;
  color: var(--blue-500);
}

/* The frame (.reveal, see components.css › IMAGE REVEAL + PARALLAX) carries the size; the photo fills it */
.sector-card__image {
  width: 100%;
  aspect-ratio: 1.26 / 1;
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------------------
   4. HOW WE WORK
   -------------------------------------------------------------------------- */
.wwh-fit {
  background: var(--white);
}

.wwh-fit .wwh-h2 {
  max-width: 850px;
  margin: 21px 0 48px;
}

.wwh-fit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--gray-100);
}

.fit-card__title {
  font-size: var(--text-24);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.fit-card__text {
  color: var(--color-text-strong);
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   5. CONNECTED SERVICES
   -------------------------------------------------------------------------- */
.wwh-services {
  background: var(--blue-900);
  color: var(--white);
}

.wwh-services .wwh-h2 {
  margin: 21px 0 48px;
}

.wwh-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 32px;
  border-radius: var(--radius-card);
  background: rgb(255 255 255 / 0.06);
}

.service-card__title {
  font-size: var(--text-24);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.service-card__text {
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
}

.service-card .link-arrow {
  align-self: center;
  margin-top: auto;
  padding-block: 8px;
}

/* --------------------------------------------------------------------------
   6. FAQ
   -------------------------------------------------------------------------- */
.wwh-faq {
  background: var(--white);
}

.wwh-faq__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 48px;
  align-items: start;
}

.wwh-faq__grid > :first-child { grid-column: 1 / 5; }
.wwh-faq__grid > :last-child  { grid-column: 5 / -1; }

.wwh-faq .wwh-h2 {
  margin-top: 21px;
  font-size: var(--text-2xl);
}

/* --------------------------------------------------------------------------
   7. CLOSING CTA
   Shared by every page: see .closing-cta in components.css.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .wwh-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .wwh-intro__grid > :first-child,
  .wwh-intro__grid > :last-child,
  .wwh-industries__layout > :first-child,
  .wwh-industries__layout > :last-child,
  .wwh-faq__grid > :first-child,
  .wwh-faq__grid > :last-child {
    grid-column: 1 / -1;
  }

  .wwh-index {
    position: static;
  }

  .wwh-industries__head {
    margin-bottom: 48px;
  }

  .wwh-fit__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .sector-card {
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .sector-card__image {
    order: -1;
    aspect-ratio: 1.7 / 1;
  }

  .wwh-sectors {
    gap: 24px;
  }

  .wwh-fit__grid,
  .wwh-services__grid {
    grid-template-columns: 1fr;
  }

  .wwh-index {
    padding: 24px;
  }
}