/* ──────────────────────────────────────────────────────────────
   Home hero — label · title · subtitle

   Scoped to #Impact so it cannot reach the case study pages, which
   share the .ascii-hero-title class but are styled by case-study.css.
   ────────────────────────────────────────────────────────────── */

#Impact .container-large {
  text-align: center;
}

/* ── label ── */
/* Same treatment as .pfc__eyebrow and .rec__eyebrow, so this is the third
   surface speaking one eyebrow language rather than inventing a fourth. */
.hero-label {
  margin: 0 0 2rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-color--text-primary);
  opacity: 0.7;
  line-height: 1.4;
}

/* ── title ── */
#Impact .ascii-hero-title {
  margin: 0 auto;
  /* Wide enough for two lines at desktop. The reference breaks after
     "order"; anything narrower drops it to three and loses the shape. */
  max-width: 30ch;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: clamp(1.65rem, 4.2vw, 3.5625rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-color--text-primary);
  text-wrap: balance;
}

/* ── subtitle ── */
.hero-subtitle {
  margin: 2rem auto 0;
  /* The break is explicit (<br> in the string), so this only has to be
     wide enough that neither sentence wraps on its own. The PT line is the
     long one at 82 characters. */
  max-width: 86ch;
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--text-color--text-secondary);
}

/* The trigger sat flush left under a left-aligned title; centre it with
   the rest and give it room to breathe. */
#Impact .askw-trigger {
  margin-top: 2.5rem;
}

/* ── responsive ── */
@media (max-width: 767px) {
  .hero-label { margin-bottom: 1.25rem; }
  #Impact .ascii-hero-title {
    max-width: none;
    font-size: clamp(1.425rem, 6.375vw, 1.95rem);
  }
  .hero-subtitle {
    margin-top: 1.25rem;
    max-width: none;
  }
  #Impact .askw-trigger { margin-top: 1.75rem; }
}

/* ──────────────────────────────────────────────────────────────
   Horizon

   images/texture.svg used to live at the bottom of the carousel's intro
   card, which is gone. It was authored to sit on a bottom edge, so its
   composition already reads as terrain — it just needed a wider box.

   It is a real element in flow rather than a pseudo-element on #Impact:
   that section also contains the case carousel, so anchoring to its
   bottom edge put the texture behind the cards.

   The asset is a wide 1092x264 terrain strip: pale-blue fills for the
   mass, fine black/0.5px contour lines over them. It fills the width with
   background-size: cover, bottom-anchored so the detailed baseline stays
   and the top (invisible under the fade) is what gets cropped.
   ────────────────────────────────────────────────────────────── */

.hero-horizon {
  position: relative;
  z-index: 0;
  margin: 3.5rem calc(50% - 50vw) 0;
  /* Full-bleed width (100vw) with height locked to the SVG's own
     1092:264 aspect, so the whole artwork shows edge to edge — no crop,
     no distortion, no letterboxing. */
  height: calc(100vw * 264 / 1092);
  background: url("../images/texture.svg") center / 100% 100% no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

/* Not a divider: the carousel rises over the bottom half of the artwork,
   so the top half reads as a backdrop behind the type and the cards sit
   on it. The pull-up is exactly half the horizon's aspect-locked height. */
#Impact .hero-carousel {
  position: relative;
  z-index: 2;
  margin-top: calc(-100vw * 264 / 1092 / 2);
}

/* The track carried a 3rem top padding that opened a dead band at the top
   of the carousel — the texture showed through it, reading as if it sat
   over the cards. Dropped so the cards start at the carousel's top edge
   and cover the lower half of the artwork cleanly. */
#Impact .hc-track {
  padding-top: 0;
}

/* The cards were 20% translucent — fine over the plain page, but now the
   texture sits behind them and bled through, reading as if it were on top
   of the cards. Composite the same tint over an opaque page-coloured base
   so the cards look identical but block whatever is behind them. Both are
   theme variables, so it stays theme-aware. */
#Impact .hc-track .pfc {
  background-color: var(--background-color--background-primary);
  background-image: linear-gradient(var(--second-alternative-background), var(--second-alternative-background));
}

/* The SVG hardcodes its colours and has no currentColor, so it cannot
   follow the theme. Dimmed further on the dark surface, where both the
   pale blue and the black line work sit wrong. */
.dark-mode .hero-horizon {
  opacity: 0.22;
}

@media (max-width: 767px) {
  .hero-horizon {
    margin-top: 2.25rem;
    /* height stays aspect-locked from the base rule (vw-based), so the
       full artwork shows on mobile too. */
  }
}