/* Figma instance "hero/sub" (1440x697). Generic block reused by every page
   after Home (About, Services, Process, Case Studies); only the h1/h2/CTA
   copy in the partial changes between pages.

   The header sits on the photo directly (dark bg), so nav/logo/menu-mark
   flip to off-white within this scope only — site.css stays untouched. */

.hero-sub {
  position: relative;
  background-color: var(--dozen-dark);
  background-image: url("../../img/hero-sub-texture.jpg");
  background-image: image-set(
    url("../../img/hero-sub-texture-m.avif") type("image/avif"),
    url("../../img/hero-sub-texture-m.webp") type("image/webp"),
    url("../../img/hero-sub-texture.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

/* ---------- Dark header variant ---------- */

.hero-sub .site-header .logo {
  color: var(--light-purple);
}

.hero-sub .site-header__nav-list a {
  color: var(--off-white);
}

/* Closed-state D-mark only. Leave the open-overlay's teal state alone; the
   blue closed-state default reads too low-contrast on this bg. */
.hero-sub .site-header .nav-toggle[aria-expanded="false"] .nav-toggle__mark {
  background: var(--off-white);
}

/* ---------- Billboard ---------- */

.hero-sub__hero {
  padding-block: 2rem var(--space-60);
}

.hero-sub__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}

.hero-sub__lockup {
  display: flex;
  flex-direction: column;
  gap: 13.06px;
}

.hero-sub__heading {
  color: var(--off-white);
  line-height: 1.2;
}

.hero-sub__subline {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1225rem + 1.5027vw, 2.4748rem);
  line-height: 1.2;
  color: var(--dozen-teal);
}

.hero-sub__cta {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  border-radius: 60px;
  background: var(--gradient-blue-deep);
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--pure-white);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.hero-sub__cta:hover,
.hero-sub__cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- Photo variant (Process) ----------
   Full-color photo bg, dark heading, white subline, right-anchored
   billboard. Header flips back toward the site default (blue logo, blue
   D-mark) since the photo reads light — only the nav links stay off-white,
   inherited from the base dark-header rules above. */

.hero-sub--photo {
  background-color: #a982ac;
  background-image: url("../../img/hero-process.jpg");
  background-image: image-set(
    url("../../img/hero-process-m.avif") type("image/avif"),
    url("../../img/hero-process-m.webp") type("image/webp"),
    url("../../img/hero-process.jpg") type("image/jpeg")
  );
  /* The cube sits in the image's left half; on narrow screens favor the
     plain right side so the dark heading stays legible. */
  background-position: 82% center;
}

/* Between the phone and desktop layouts, cover fits the crop's full width
   into the viewport, so no background-position can keep the cube out from
   under the centered heading — serve the cube-free right side of the art. */
@media (min-width: 480px) {
  .hero-sub--photo {
    background-image: url("../../img/hero-process-plain.jpg");
    background-image: image-set(
      url("../../img/hero-process-plain.avif") type("image/avif"),
      url("../../img/hero-process-plain.webp") type("image/webp"),
      url("../../img/hero-process-plain.jpg") type("image/jpeg")
    );
    background-position: center;
  }
}

/* Desktop billboard is side-by-side (cube left, text right): restore the
   full art at its native size — the 828w mobile crop upscales soft here. */
@media (min-width: 1024px) {
  .hero-sub--photo {
    background-image: url("../../img/hero-process.jpg");
    background-image: image-set(
      url("../../img/hero-process.avif") type("image/avif"),
      url("../../img/hero-process.webp") type("image/webp"),
      url("../../img/hero-process.jpg") type("image/jpeg")
    );
    background-position: top center;
  }
}

.hero-sub--photo .site-header .logo {
  color: var(--dozen-blue);
}

.hero-sub--photo
  .site-header
  .nav-toggle[aria-expanded="false"]
  .nav-toggle__mark {
  background: var(--dozen-blue);
}

.hero-sub--photo .hero-sub__heading {
  color: var(--dozen-dark);
}

.hero-sub--photo .hero-sub__subline {
  color: var(--pure-white);
}

/* ---------- Scrim variant (Case Studies) ----------
   Photo bg dimmed by a dark scrim; content stays centered like the bare
   variant, so no layout overrides are needed here — the header already
   flips to its off-white/light-purple state under any .hero-sub. */

.hero-sub--scrim {
  background-image:
    linear-gradient(rgba(51, 51, 51, 0.6), rgba(51, 51, 51, 0.6)),
    url("../../img/hero-case-studies.jpg");
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--dozen-dark) 60%, transparent),
      color-mix(in srgb, var(--dozen-dark) 60%, transparent)
    ),
    url("../../img/hero-case-studies.jpg");
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--dozen-dark) 60%, transparent),
      color-mix(in srgb, var(--dozen-dark) 60%, transparent)
    ),
    image-set(
      url("../../img/hero-case-studies-m.avif") type("image/avif"),
      url("../../img/hero-case-studies-m.webp") type("image/webp"),
      url("../../img/hero-case-studies.jpg") type("image/jpeg")
    );
}

/* ---------- People override ----------
   Same dark/bare treatment (off-white heading, teal subline, blue CTA) as
   the base variant, just its own photo and a left-anchored billboard
   instead of centered — confirmed against the crop, Figma's counter-axis
   alignment on the content frame is MIN (left), not centered like About. */

.hero-sub--people {
  background-image: url("../../img/hero-people.jpg");
  background-image: image-set(
    url("../../img/hero-people-m.avif") type("image/avif"),
    url("../../img/hero-people-m.webp") type("image/webp"),
    url("../../img/hero-people.jpg") type("image/jpeg")
  );
}

/* ---------- Services override ----------
   Same scrim treatment, different photo and a heavier 70% scrim per the
   Figma fill (#333333/0.70 vs Case Studies' 0.60). */

.hero-sub--services {
  background-image:
    linear-gradient(rgba(51, 51, 51, 0.7), rgba(51, 51, 51, 0.7)),
    url("../../img/hero-services.jpg");
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--dozen-dark) 70%, transparent),
      color-mix(in srgb, var(--dozen-dark) 70%, transparent)
    ),
    url("../../img/hero-services.jpg");
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--dozen-dark) 70%, transparent),
      color-mix(in srgb, var(--dozen-dark) 70%, transparent)
    ),
    image-set(
      url("../../img/hero-services-m.avif") type("image/avif"),
      url("../../img/hero-services-m.webp") type("image/webp"),
      url("../../img/hero-services.jpg") type("image/jpeg")
    );
}

@media (min-width: 1024px) {
  /* The Figma frame is fixed at 697 (579 below the 118px header) and
     centers whatever billboard height a page brings — padding sums would
     drift per page as the copy changes line count. */
  .hero-sub__hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 579px;
  }

  .hero-sub__content {
    gap: 57px;
  }

  .hero-sub__heading {
    line-height: var(--h1-leading);
  }

  .hero-sub__subline {
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -1.39px;
  }

  .hero-sub__cta {
    align-self: center;
    padding: var(--space-20) var(--space-40);
  }

  /* Right-anchored billboard: content hugs the container's right edge
     rather than centering, so drop the shared max-width/centering and let
     each line shrink-wrap against the flex-end edge. */
  .hero-sub--photo .hero-sub__content {
    max-width: none;
    align-items: flex-end;
  }

  .hero-sub--photo .hero-sub__lockup {
    align-items: flex-end;
  }

  .hero-sub--photo .hero-sub__heading,
  .hero-sub--photo .hero-sub__subline {
    text-align: right;
  }

  .hero-sub--photo .hero-sub__cta {
    align-self: flex-end;
  }

  /* Left-anchored billboard (People): same idea as the photo variant's
     right anchor, mirrored, since the copy hugs the container's left edge
     in Figma (content frame counter-axis align = MIN, confirmed in the
     crop) instead of centering like the bare/scrim variants. */
  .hero-sub--people .hero-sub__content {
    max-width: none;
    align-items: flex-start;
  }

  .hero-sub--people .hero-sub__lockup {
    align-items: flex-start;
  }

  .hero-sub--people .hero-sub__heading,
  .hero-sub--people .hero-sub__subline {
    text-align: left;
  }

  .hero-sub--people .hero-sub__cta {
    align-self: flex-start;
  }
}

/* Desktop art: the mobile-first rules above ship 828w encodes; swap in the
   full boards once the layout is actually that wide. */
@media (min-width: 1024px) {
  .hero-sub {
    background-image: image-set(
      url("../../img/hero-sub-texture.avif") type("image/avif"),
      url("../../img/hero-sub-texture.webp") type("image/webp"),
      url("../../img/hero-sub-texture.jpg") type("image/jpeg")
    );
  }

  .hero-sub--photo {
    background-image: image-set(
      url("../../img/hero-process.avif") type("image/avif"),
      url("../../img/hero-process.webp") type("image/webp"),
      url("../../img/hero-process.jpg") type("image/jpeg")
    );
  }

  .hero-sub--scrim {
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--dozen-dark) 60%, transparent),
        color-mix(in srgb, var(--dozen-dark) 60%, transparent)
      ),
      image-set(
        url("../../img/hero-case-studies.avif") type("image/avif"),
        url("../../img/hero-case-studies.webp") type("image/webp"),
        url("../../img/hero-case-studies.jpg") type("image/jpeg")
      );
  }

  .hero-sub--people {
    background-image: image-set(
      url("../../img/hero-people.avif") type("image/avif"),
      url("../../img/hero-people.webp") type("image/webp"),
      url("../../img/hero-people.jpg") type("image/jpeg")
    );
  }

  .hero-sub--services {
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--dozen-dark) 70%, transparent),
        color-mix(in srgb, var(--dozen-dark) 70%, transparent)
      ),
      image-set(
        url("../../img/hero-services.avif") type("image/avif"),
        url("../../img/hero-services.webp") type("image/webp"),
        url("../../img/hero-services.jpg") type("image/jpeg")
      );
  }
}