/* ==========================================================================
   Lit10 — Layout Layer
   Site header, mobile navigation overlay, hero composition, and footer.
   Light mode throughout. Every ground is a flat, solid colour — no gradient
   backgrounds anywhere in the design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Site header
   Sits on the white hero ground from the start, then gains a hairline and a
   soft shadow once scrolled so it separates from the content beneath it.
   -------------------------------------------------------------------------- */
/*
  Transparent at rest so the hero artwork - including the top of its curved
  border - reads in full behind it. The solid ground and hairline only appear
  once the user scrolls, where the header must separate from the content
  passing beneath it.
*/
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  background-color: transparent;
  transition: background-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    backdrop-filter var(--dur-slow) var(--ease-out),
    padding-block var(--dur-slow) var(--ease-out);
}

.site-header.is-condensed {
  padding-block: 0.6rem;
  background-color: rgb(255 255 255 / 0.92);
  /* Frosted so content scrolling under it stays subtly visible. */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 0 var(--line), var(--shadow-sm);
}

/*
  While the overlay is open the header must sit ABOVE it, otherwise the close
  button is buried underneath. z-index on .menu-btn alone cannot achieve this:
  the button is trapped inside the header's own stacking context, so the
  header itself has to be promoted. The background also goes transparent so
  the overlay's blush ground shows through behind the logo and button.
*/
body.nav-open .site-header {
  z-index: calc(var(--z-overlay) + 1);
  background-color: transparent;
  box-shadow: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand-logo {
  display: block;
  flex: none;
}

.brand-logo img {
  inline-size: auto;
  block-size: clamp(34px, 2.4vw, 44px);
  transition: block-size var(--dur-slow) var(--ease-out);
}

/*
  The supplied logo is a pure-white wordmark built for dark grounds. On the
  light UI we recolour it without shipping a second asset by using the PNG's
  alpha channel as a mask: the element is filled with the brand colour and the
  artwork is punched through it. A filter chain cannot do this — inverting
  white yields black, and no later filter can lift a pure black back to a hue.

  The <img> is hidden from paint (opacity:0) but kept in flow so it still
  provides the intrinsic size and the alt text for assistive tech.
*/
.brand-logo--tinted {
  display: inline-block;
  background-color: var(--brand);
  -webkit-mask-image: url("../images/logo.png");
  mask-image: url("../images/logo.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color var(--dur-mid) var(--ease-out);
}

.brand-logo--tinted img {
  opacity: 0;
}

.brand-logo--tinted:hover {
  background-color: var(--brand-deep);
}

/* Fallback: if masking is unsupported, show the artwork on a brand chip so
   the white wordmark stays legible instead of vanishing on the light ground. */
@supports not ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .brand-logo--tinted {
    background-color: var(--brand);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
  }

  .brand-logo--tinted img {
    opacity: 1;
  }
}

.site-header.is-condensed .brand-logo img {
  block-size: clamp(30px, 2vw, 38px);
}

/* Desktop navigation */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.6vw, 2rem);
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
  transition: color var(--dur-mid) var(--ease-out);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--brand);
  transform: scaleX(0);
  /*
    transform-origin has no logical keywords - `inline-start` is invalid and
    the whole declaration is dropped, leaving the underline to sweep from the
    centre. Physical values, flipped for RTL, are the only correct option.
  */
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}

[dir="rtl"] .site-nav__link::after {
  transform-origin: right center;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--accent-text);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.header__cta {
  display: none;
  min-block-size: 46px;
  padding-inline: 1.6rem;
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Language toggle
   A 48px circle matching .menu-btn exactly, so the two sit as a pair in the
   header. The label is a two-letter code (AR / EN), which fits the circle
   without the generic .btn--ghost word-length padding.
   -------------------------------------------------------------------------- */
.lang-toggle {
  display: grid;
  place-items: center;
  /* Fixed square + pill radius = circle, same geometry as .menu-btn. */
  inline-size: 48px;
  block-size: 48px;
  /*
    .btn sets min-block-size:56px plus generous padding for word labels;
    both must be cancelled or the circle renders as a 48x56 oval.
  */
  padding: 0;
  min-block-size: 0;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* The codes are Latin and read left-to-right in both builds. */
  direction: ltr;
  line-height: 1;
  touch-action: manipulation;
}

.lang-toggle[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. Menu button — animated state-transition icon (burger <-> close)
   -------------------------------------------------------------------------- */
.menu-btn {
  position: relative;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  background-color: var(--white);
  transition: border-color var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
  touch-action: manipulation;
}

.menu-btn:hover {
  border-color: var(--brand);
  background-color: var(--brand-050);
}

.menu-btn__box {
  position: relative;
  inline-size: 20px;
  block-size: 14px;
}

.menu-btn__bar {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--text);
  transition: transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
}

.menu-btn__bar:nth-child(1) {
  inset-block-start: 0;
}

.menu-btn__bar:nth-child(2) {
  inset-block-start: 6px;
}

.menu-btn__bar:nth-child(3) {
  inset-block-start: 12px;
}

/* Open state: solid ground so the X stays legible over the overlay. */
.menu-btn[aria-expanded="true"] {
  background-color: var(--white);
  border-color: var(--brand);
}

.menu-btn[aria-expanded="true"] .menu-btn__bar {
  background-color: var(--brand-deep);
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   3. Mobile navigation overlay — flat blush ground, no blur, no gradient.
   -------------------------------------------------------------------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  align-content: center;
  padding-inline: var(--gutter);
  /* Top padding clears the fixed header, which now sits above this layer. */
  padding-block: 7rem var(--space-xl);
  overflow-y: auto;
  background-color: var(--blush);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out),
    visibility var(--dur-slow) var(--ease-out);
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-overlay__list {
  display: grid;
  gap: var(--space-2xs);
  max-inline-size: 30rem;
  margin-inline: auto;
  inline-size: 100%;
}

.nav-overlay__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--line-strong);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
  transition: color var(--dur-mid) var(--ease-out);
}

.nav-overlay.is-open .nav-overlay__link {
  opacity: 1;
  transform: none;
  /* Staggered entrance, 45ms apart, set inline per item via --i. */
  transition: opacity var(--dur-slow) var(--ease-out)
      calc(var(--i, 0) * 45ms),
    transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 45ms),
    color var(--dur-mid) var(--ease-out);
}

.nav-overlay__link:hover {
  color: var(--accent-text);
}

.nav-overlay__index {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.nav-overlay__cta {
  margin-block-start: var(--space-lg);
  max-inline-size: 30rem;
  margin-inline: auto;
  inline-size: 100%;
}

/* Locks background scroll while the overlay is open. */
body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Hero
   The SECTION is full-width, but the copy is NOT: it sits on the same
   container grid as every other section, so the headline starts at exactly
   the same inline-start edge as the Story, Testimonials and FAQ headings.
   Only the artwork bleeds, anchored to the viewport's inline-end edge.

   new-coach-image.png is a finished composite - photo, curved purple border,
   white inset and the script signature are all baked into the pixels. It is
   therefore POSITIONED and scaled by height, never cropped: object-fit:cover
   would slice the purple border off its edges.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--white);
  overflow: visible;
}

/* Copy column - constrained to the shared container measure. */
.hero__copy {
  position: relative;
  z-index: var(--z-raised);
}

/* Discipline badge - outlined pill, so it reads as a deliberate marker. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-block: 0.5rem;
  padding-inline: 1.1rem;
  margin-block-end: var(--space-md);
  border: 1.5px solid var(--brand-200);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.hero__badge svg {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
}

.hero__title {
  font-size: var(--step-5);
  letter-spacing: -0.02em;
  /* Wide enough to use the column; still inside a comfortable measure. */
  max-inline-size: 24ch;
  color: var(--brand-deep);
}

.hero__promise {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  max-inline-size: 52ch;
}

.hero__promise-tile {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--brand-200);
  color: var(--brand);
}

.hero__promise-tile svg {
  inline-size: 28px;
  block-size: 28px;
}

.hero__promise p {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--muted);
}

.hero__byline {
  margin-block-start: var(--space-lg);
  max-inline-size: 52ch;
}

.hero__name {
  display: block;
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--accent-text);
}

.hero__credentials {
  display: block;
  margin-block-start: 0.15rem;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--muted);
}

.hero__quote {
  position: relative;
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  padding-inline-start: 2.5rem;
  border-block-start: 1px solid var(--line);
  max-inline-size: 56ch;
}

.hero__quote-mark {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: 0;
  inline-size: 26px;
  block-size: 26px;
  color: var(--brand-200);
}

.hero__quote p {
  font-style: italic;
  color: var(--text);
  line-height: var(--leading-snug);
}

.hero__answer {
  margin-block-start: var(--space-md);
  padding-inline-start: 2.5rem;
  color: var(--muted);
  max-inline-size: 56ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--line);
  /* Wide enough to keep both items plus the divider on one line. */
  max-inline-size: none;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.trust-item svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  color: var(--brand);
}

/* Flags are inline SVG, never emoji: emoji render as bare letter pairs on
   most Windows browsers and are banned by the project spec. */
.trust-item .flag {
  inline-size: 22px;
  block-size: 15px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: inherit;
}

.trust-item strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trust-divider {
  inline-size: 1px;
  block-size: 20px;
  background-color: var(--line-strong);
}

/* Artwork ---------------------------------------------------------------- */
.hero__art {
  display: block;
  /* Height-driven so the baked-in curve is never cropped or distorted. */
  inline-size: auto;
  max-inline-size: none;
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   Hero - desktop (>= 64em)
   Section is full-width; the copy rides the container grid, the artwork is
   pinned to the viewport's inline-end edge and sized by height.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Hero
   Layout contract:
   - The copy always rides the shared container grid, so the headline starts
     at exactly the same inline-start edge as every other section heading.
   - The artwork always spans the full section height. It is never clipped
     short of the section end and never leaves a dead band beneath it.
   -------------------------------------------------------------------------- */
/*
  overflow-x clips the artwork's inline-start overflow (see .hero__media).
  overflow-y stays visible so no ancestor scroll context is created that
  would disable position: sticky further down the page.
*/
.hero {
  position: relative;
  background-color: var(--white);
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;

  /*
    The hero artwork is a fixed-ratio composite: the curved border, white
    inset and signature are baked into the pixels, so the media box must
    match the file's ratio exactly or the image letterboxes / crops.

    Declared once here because TWO rules below depend on it (the section's
    height floor and the media box), and they must never drift apart.
    --hero-art-ratio is the decimal w/h; --hero-art-aspect is the same
    value in aspect-ratio form.
  */
  --hero-art-ratio: 0.8902;      /* 900 / 1011 */
  --hero-art-aspect: 900 / 1011;
}

/*
  The Arabic build ships its own composite (coach-ar.png, 1188x1324), which
  is slightly wider. Overriding the two tokens re-derives the whole hero
  geometry for that file - no duplicated layout rules.
*/
[dir="rtl"] .hero {
  --hero-art-ratio: 0.8973;      /* 1188 / 1324 */
  --hero-art-aspect: 1188 / 1324;
}

.hero__inner {
  /* Identical measure to .container - keeps the headline aligned with the
     Story / Testimonials / FAQ headings below. */
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  position: relative;
  z-index: var(--z-raised);
}

.hero__media {
  position: absolute;
  /* Spans the section's full block axis, so it can never fall short. */
  inset-block: 0;
  inset-inline-end: 0;
  pointer-events: none;
  z-index: var(--z-base);
  overflow: hidden;
}

.hero__art {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Flat scrim between artwork and copy - never a gradient, per the spec. */
/*
  Legibility overlay. It must paint ABOVE the artwork but BELOW the copy, so
  it takes its own layer between them: sharing --z-base with .hero__media let
  DOM order decide, and the artwork won.
*/
.hero__scrim {
  display: none;
  position: absolute;
  inset: 0;
  background-color: rgb(255 255 255 / 0.9);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Desktop (>= 75em / 1200px): side-by-side.

   The artwork is a fixed-ratio composite whose width is DERIVED from the
   section height, so a tall copy column inflates it. At 1200px that has to
   be held in check explicitly (see min-block-size and .hero__copy below) or
   the artwork spreads under the text and the copy becomes unreadable.

   Below 1200px the hero uses the background-field treatment (artwork behind
   the copy with a flat scrim) - the composition already approved for tablet
   and mobile.
   -------------------------------------------------------------------------- */
@media (min-width: 75em) {
  .hero {
    display: flex;
    align-items: center;
    /*
      Floor equals the artwork's natural height at its rendered width
      (width / --hero-art-ratio). If the copy is taller the section grows
      artwork covers the extra height instead of leaving a gap.
    */
    min-block-size: calc(min(42vw, 780px) / var(--hero-art-ratio));
    padding-block: clamp(5rem, 3.5rem + 5vw, 7rem) var(--section-block);
  }

  /*
    The artwork spans the section's full height, its width following from the
    artwork's own ratio - but bounded by max-inline-size below, so a tall
    copy column can no longer inflate it across the whole section.

    Within that bound the box may still overflow slightly toward the
    inline-start, where the section clips it. That crop is safe by
    measurement of both composites: the leading edge is transparent for
    43-68% of the width at the top, ~30% at a quarter height and ~17% at
    mid height, tightening to 3-4% only near the block-end. Neither the
    curve nor the subject is ever cut.
  */
  .hero__media {
    /* Height is the driver; width derives from it via the ratio. */
    block-size: 100%;
    inline-size: auto;
    aspect-ratio: var(--hero-art-aspect);
    /* Floor keeps the artwork substantial when the copy is short. */
    min-inline-size: min(44vw, 720px);
    /*
      Ceiling. The box's width is derived from the section height, so tall
      copy inflated it until it spread under the text. 52% holds the artwork
      to its own side at every desktop width.

      Because the box may now be shorter than the file's ratio wants, the
      artwork uses object-fit: cover (below) rather than contain - the box
      is always filled edge to edge, so there is never a dead band, and the
      crop is taken off the transparent leading edge.
    */
    max-inline-size: 52%;
  }

  .hero__art {
    /*
      cover, not contain: the box is capped by max-inline-size above and so
      no longer always matches the file's ratio. contain would letterbox it
      and reintroduce the dead band under the artwork; cover fills the box
      and takes the crop off the composite's transparent leading edge, which
      measures 43-68% clear at the top and ~30% at quarter height.
    */
    object-fit: cover;
    object-position: right top;
  }

  /* Inline-end is physically LEFT in RTL, so the anchor must follow. */
  [dir="rtl"] .hero__art {
    object-position: left top;
  }

  /*
    The artwork's width is derived from the section height, so it can be wide.
    The copy is capped against the viewport (not the container) to guarantee
    it always clears the artwork's inline-start edge, with the curve's own
    empty corner providing the visual breathing room.
  */
  /*
    The copy's share of the section. 44vw is right on a wide monitor, but in
    the 1024-1300px band it collapses to ~450px: the text then wraps into a
    very tall column, the section grows to fit it, and because the artwork's
    width is DERIVED from that height, the artwork inflates until it covers
    the copy entirely.

    max() puts a floor under the column so it never gets narrow enough to
    trigger that runaway. 30rem keeps a comfortable measure at 1024px while
    still leaving the artwork its side; above ~1150px the 44vw term wins
    again and the wide-monitor composition is untouched.
  */
  .hero__copy {
    max-inline-size: min(48%, 38rem);
  }

  /* The hero copy is long; its rhythm is compressed here so the two columns
     stay close in height. */
  .hero__promise {
    margin-block-start: var(--space-sm);
  }

  .hero__byline,
  .hero__quote {
    margin-block-start: var(--space-md);
  }

  .hero__quote {
    padding-block-start: var(--space-sm);
  }

  .hero__answer,
  .hero__actions {
    margin-block-start: var(--space-sm);
  }

  .hero__trust {
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-sm);
  }
}

@media (min-width: 96em) {
  .hero__copy {
    max-inline-size: min(42vw, 44rem);
  }
}

/* --------------------------------------------------------------------------
   Below 75em (1200px): artwork becomes a full-section background field.
   cover guarantees it fills the section at any copy height - no clipping
   short of the end, no dead band.
   -------------------------------------------------------------------------- */
@media (max-width: 74.99em) {
  .hero {
    padding-block: clamp(6.5rem, 5rem + 8vw, 9rem) var(--section-block);
  }

  .hero__media {
    /* Full bleed behind the copy. */
    inset: 0;
    inline-size: 100%;
  }

  .hero__art {
    object-position: center top;
  }

  /* Overlay across the whole section so every line of copy stays legible
     over the artwork behind it. */
  /*
    0.85 is the lowest opacity that still clears WCAG AA here. Measured
    worst case (muted #655a6b over the artwork's dark gym background):
    0.85 -> 4.81:1 PASS, 0.80 -> 4.32:1 FAIL, 0.75 -> 3.85:1 FAIL.
    More of the photograph shows through than at 0.92, without pushing the
    credential line below the readable threshold.
  */
  .hero__scrim {
    display: block;
    background-color: rgb(255 255 255 / 0.85);
  }

  /* Full-width copy: no measure caps below the desktop breakpoint. */
  .hero__copy,
  .hero__title,
  .hero__promise,
  .hero__byline,
  .hero__quote,
  .hero__answer,
  .hero__trust {
    max-inline-size: none;
    inline-size: 100%;
    margin-inline: 0;
  }

  /*
    Centred per the project's mobile-centring rule. Each element is named
    explicitly: base.css sets `text-align: start` on h1-h4 and p via
    :where(), and although that has zero specificity it still beats plain
    inheritance from the parent.
  */
  .hero__copy,
  .hero__badge,
  .hero__title,
  .hero__byline,
  .hero__name,
  .hero__credentials,
  .hero__promise p,
  .hero__quote,
  .hero__quote p,
  .hero__answer,
  .hero__trust,
  .trust-item {
    text-align: center;
  }

  .hero__actions,
  .hero__trust {
    justify-content: center;
  }

  /* inline-flex: centred with auto margins, since justify-content only
     positions its own children. */
  .hero__badge {
    display: inline-flex;
    margin-inline: auto;
  }

  .hero__promise {
    flex-direction: column;
    text-align: center;
  }

  .hero__promise p,
  .hero__quote p,
  .hero__answer {
    text-align: center;
  }

  /* Indents and the inline rule read as clutter once the column is centred. */
  .hero__quote,
  .hero__answer {
    padding-inline: 0;
  }

  .hero__quote-mark {
    position: static;
    display: block;
    margin-inline: auto;
    margin-block-end: var(--space-2xs);
  }

  /*
    This block now reaches up to 1312px. Full-bleed centred copy is right on
    a phone, but at tablet/small-laptop widths an uncapped measure runs past
    100 characters, which is unreadable. Cap the column and centre it; the
    artwork still fills the section behind it.
  */
  @media (min-width: 40em) {
    .hero__copy {
      max-inline-size: 46rem;
      margin-inline: auto;
    }
  }
}

@media (max-width: 47.99em) {
  .hero__actions .btn {
    inline-size: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. Footer — the one dark ground on the page, flat plum.
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-block: var(--space-2xl) var(--space-lg);
  background-color: var(--plum);
  color: var(--text-on-dark);
}

.site-footer__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

/* The white logo sits on the dark footer as supplied — no filter needed. */
.site-footer .brand-logo img {
  block-size: 52px;
}

.footer__tagline {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--lilac);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
}

.footer__nav a {
  font-size: var(--step--1);
  color: var(--muted-on-dark);
  transition: color var(--dur-mid) var(--ease-out);
}

.footer__nav a:hover {
  color: var(--lilac);
}

.footer__social {
  display: flex;
  gap: var(--space-xs);
}

.footer__social a {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  border: 1px solid var(--hairline-dark);
  color: var(--muted-on-dark);
  transition: color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}

.footer__social a:hover {
  color: var(--lilac);
  border-color: var(--lilac);
  transform: translateY(-2px);
}

.footer__social svg {
  inline-size: 20px;
  block-size: 20px;
}

.footer__legal {
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--hairline-dark);
  inline-size: 100%;
  font-size: var(--step--1);
  color: var(--muted-on-dark);
}

/* --------------------------------------------------------------------------
   6. Responsive — mobile-first escalation
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .site-nav {
    display: block;
  }

  .header__cta {
    display: inline-flex;
  }

  .menu-btn {
    display: none;
  }

  .site-footer__inner {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    align-items: center;
    text-align: start;
  }

  .site-footer__inner .footer__legal {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer__nav {
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   Mobile header + footer refinements
   Tied to the NAV breakpoint (64em), not the hero's - the header collapses
   to the menu button independently of the hero composition.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99em) {
  /* The mark is the only branding visible on mobile, so give it presence. */
  .site-header .brand-logo img {
    block-size: 52px;
  }

  .site-header.is-condensed .brand-logo img {
    block-size: 44px;
  }
}

@media (max-width: 47.99em) {
  .site-header .brand-logo img {
    block-size: 48px;
  }

  .site-header.is-condensed .brand-logo img {
    block-size: 42px;
  }

  /* The footer logo anchors the closing block, so it stays large. */
  .site-footer .brand-logo img {
    block-size: 60px;
  }

  /* Copyright was left-aligned and wrapped awkwardly; centre it. */
  .footer__legal {
    text-align: center;
    text-wrap: balance;
  }
}