/* =========================================================================
   how-we-work-template.php
   This template's own CSS, moved out of its inline <style> block(s) on the
   owner's instruction, 10 Sep 2026. Enqueued in <head> for this template only
   (inc/enqueue.php). Every rule is scoped to an id on this page, so it beats
   the section files printed later in the body exactly as it did inline.
   ========================================================================= */

/* Full-bleed section on the owner's instruction: no card, no border,
   no radius. The warmth is carried entirely by the arc below, sitting
   on the plain surface, so the hero runs edge to edge like the rest of
   the site's sections rather than reading as a boxed panel.
   `overflow: hidden` is what crops the arc into a semi-circle. */
.hww-hero {
  position: relative;
  overflow: hidden;
  padding: var(--hero-pad-top) 0 var(--section-pad-lg);
  background: var(--bg-surface);
  text-align: center;
}

/* Positioning context for the arc. Anchoring the arc to the COPY box
   rather than to the section is what guarantees it covers every line:
   the section's height includes its top and bottom padding, so a shape
   centred on the section sits high of the text, which is what left the
   eyebrow and headline outside it before. */
.hww-hero__content { position: relative; }

/* ── The arc, removed ──────────────────────────────────────
   This hero used to carry three concentric hairline rings and a warm
   centre wash, all drawn in brand gradients on a `.hww-hero__glow`
   span. It came out with every other hero background on the owner's
   ruling that heroes ship a plain white ground: the rings were the
   one orange gradient left on this page above the fold.

   The span went with the rules rather than being hidden, so there is
   no element left painting nothing. `.hww-hero__content` keeps its
   positioning context below: `.hww-hero__copy` still stacks on it. */

.hww-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-inline: auto;
}

/* ── Eyebrow ────────────────────────────────────────────────
   Repaint of the shared `.es-eyebrow`, not a second chip class.

   ── What is repainted, and what is deliberately not ─────────
   Only the GROUND is repainted now. Size, padding, weight, tracking
   and case all come from the shared `.es-eyebrow` in utilities.css,
   which is what makes this pill read as the same object as the
   eyebrow on every other section of the site.

   It used to override four more declarations: --fs-small instead of
   --fs-eyebrow, normal tracking instead of 1.8px, sentence case
   instead of uppercase, and a roomier padding. Those four are what
   made it a bigger, softer pill than every other eyebrow on the
   page, and they are gone. What is left below reproduces
   `.es-hero__eyebrow` from section-hero.php exactly, which is the
   treatment every migrated hero already ships.

   ── The ground has to stay repainted. This is not optional ──
   The hero glow behind this pill is filled with `--brand-50`, and
   `--brand-50` is also the shared chip's own background. Dropping
   the repaint would paint the chip in precisely the colour it sits
   on, leaving a 1px brand-100 border drawing a pill around nothing.
   The uniformity contract covers this case directly: a panel with a
   brand-coloured ground repaints the chip. brand-600 on
   --bg-surface measures 4.67:1, so the label still clears AA.

   The shared chip is `width: fit-content` with no auto margin of its
   own; centring normally comes from the `.es-section-head.text-center`
   wrapper this hero does not use, so without the auto margin it renders
   flush left inside the centred column. */
.hww-hero .es-eyebrow {
  margin-inline: auto;
  border-color: var(--brand-200);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--brand-600);
}

.hww-hero__title {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-hero);
  font-weight: var(--font-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.hww-hero__subtitle {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-lede-lg);
  font-weight: var(--font-bold);
  line-height: var(--lh-subhead);
  color: var(--brand-500);
}

.hww-hero__desc {
  max-width: 640px;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.hww-hero .es-btn {
  margin-top: var(--space-7);
}
