/* Hero system
   ===========
   One definition of what a page hero is, for every marketing template.

   Before this file there were eleven hero class prefixes across twelve
   templates and, measured at 1440, twelve different heroes: H1s at 96, 76, 72,
   68, 60, 58, 52 and 48px; line-heights from 0.90 to 1.12; letter-spacing at
   normal, -0.5px and -1px; three different off-whites behind them (#fff,
   #fcfcfc, #f6f5f0); H1s in two different blacks (#000 on home and What We Do,
   #121211 everywhere else); first-baseline offsets from 120px to 220px; and
   eyebrows at 18px/2.5px or 20px/2px, red on four pages and grey on one.

   Five of them — who-we-help, how-we-work, about, careers and contact-us — were
   already painting the same warm off-white and the same pattern, each with its
   own copy of the rule. That surface is the one the design review asked the
   site to standardise on, so it is defined once here and the other templates
   come to it.

   The prefixes stay. Each template's hero holds genuinely different content —
   a media tile, a centred column, a CTA row, a search field — and rewriting
   twelve DOM structures buys nothing the shared spec below does not already
   buy. What the prefixes no longer do is decide what a hero looks like.

   Case studies are deliberately excluded: `.cs-hero` is mid-redesign behind
   `designRevision: 2` (see CLAUDE.md), and pulling it into this file would
   collide with work already in flight. */

:root {
  /* The warm off-white and its pattern — formerly five identical copies. */
  --hero-bg: #fcfcfc;
  --hero-pattern: url("/images/cu-hero-pattern.webp");

  /* One type ramp. 60px was the modal size across the set, so the clamp tops
     out there and the outliers — /blog/'s 96px, /careers/'s 76px — come down
     to it rather than the rest climbing. */
  --hero-h1-size: clamp(2.75rem, 4.4vw, 3.75rem);
  --hero-h1-lh: 1.04;
  --hero-h1-ls: -0.02em;

  /* One vertical rhythm. The top clears the fixed nav on every template, which
     is what the 120–220px spread was reaching for a page at a time. */
  --hero-pad-top: 140px;
  --hero-pad-bottom: 92px;
}

/* ---------------------------------------------------------------- surface */
/* Templates that already had a hero band class, plus `.hero-surface` for the
   ones that were painting a bare white section. */
.hero-surface,
.wh-hero,
.hw-hero,
.ab-hero,
.ca-hero,
.cu-hero,
.hb-hero.hb-hero {
  background-color: var(--hero-bg);
  /* Two layers: the pattern, and a wash over it that fades to the flat ground.
     Both are bounded to --hero-pattern-h and set no-repeat, so the pattern
     paints the hero and nothing below it.

     This is bounded rather than `cover` because the band a hero sits in is not
     always the hero. On the templates with a dedicated hero band the two are
     the same element, but on home, /success-stories/ and /blog/ the hero shares
     one `.surface-light` wrapper with everything under it — so `cover` put the
     pattern behind 35%, 83% and 80% of those pages respectively. The brief was
     to standardise the hero, not to paper the page. */
  background-image:
    linear-gradient(
      to bottom,
      rgb(252 252 252 / 0) 0%,
      rgb(252 252 252 / 0) 46%,
      rgb(252 252 252 / 0.86) 82%,
      var(--hero-bg) 100%
    ),
    var(--hero-pattern);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  /* BOTH layers take the same size. Sizing only the wash and leaving the
     pattern at `cover` bounds the fade but not the thing being faded, which
     puts the pattern down the whole band with nothing over it. */
  background-size: var(--hero-pattern-size), var(--hero-pattern-size);
}

/* Tall enough to carry the tallest hero in the set, short enough that the fade
   completes inside it. */
:root {
  --hero-pattern-size: 100% 720px;
}

/* Bands that are themselves the hero: the pattern covers them, and the wash
   fades across their full height. */
.wh-hero,
.hw-hero,
.ab-hero,
.ca-hero,
.cu-hero,
.hb-hero.hb-hero {
  --hero-pattern-size: cover;
}

/* The hero clears the fixed nav once, with --hero-pad-top. Several bands also
   carried `margin-top-80` to clear it, which stacked the two and pushed those
   heroes 50px further down than the rest — half the 120-to-220 spread in the
   first-baseline measurements. */
.hero-surface.margin-top-80,
.cu-hero.margin-top-80,
.hb-hero.margin-top-80 {
  margin-top: 0;
}

/* ------------------------------------------------------------------- type */
.hero-surface h1,
.wh-h1,
.hw-h1,
.ab-h1,
.ca-h1,
.cu-h1,
.ss-h1,
.res-h1,
.pp-h1,
.hb-h1,
.rp-h1 {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: var(--hero-h1-size);
  font-weight: 600;
  line-height: var(--hero-h1-lh);
  letter-spacing: var(--hero-h1-ls);
  color: var(--ink);
}

/* --------------------------------------------------------------- eyebrow */
/* Four specs became one. Grey rather than red: an eyebrow above every hero on
   the site was a large part of what made red stop reading as an accent (see the
   red audit on /how-we-work/), and the label is doing hierarchy work that its
   size and tracking already do. */
.hero-eyebrow,
.wh-eyebrow,
.hw-eyebrow,
.ab-eyebrow,
.ca-eyebrow,
.hb-eyebrow,
.rp-eyebrow {
  font-family: Calibre, "Calibre Fallback", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

/* ------------------------------------------------------------------ rhythm */
/* `:first-child` because `.hero-surface` is not always only the hero. On home
   that band holds nine children, seven of them `.container-standard` — so an
   unscoped descendant rule put the hero's 140/92 rhythm on seven sections and
   added ~1,600px to the page. Every band's hero container is its first child;
   the four other shared bands hold nothing else. */
.hero-surface > .container-standard:first-child,
.wh-hero .wh-hero-inner,
.hw-hero .hw-hero-inner,
.ab-hero .ab-hero-inner,
.ca-hero .ca-hero-inner,
.cu-hero .cu-hero-grid,
.hb-hero > .container-standard {
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
}

@media screen and (max-width: 991px) {
  :root {
    --hero-pad-top: 108px;
    --hero-pad-bottom: 64px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --hero-pad-top: 88px;
    --hero-pad-bottom: 52px;
  }
}