/* ============================================================================
   Home hero — display type + service marks ("hero-x")
   ----------------------------------------------------------------------------
   Headline left; right = interlocking paper-cut cluster (Olson / Parc): soft
   sky/mint/blush grounds + ink disc. Marks: megaphone, clapper, story bubble,
   brand rings, play. Fine ink line, white fills, one red accent. Not sparse
   orphans — one composed unit with breathing room.

   Everything inside the cluster is positioned in SVG space, so the composition
   scales as a single unit and can never collide with the copy — only the box
   itself moves between breakpoints.

   Cascade note (see MEMORY: cms-typography-layers)
   ------------------------------------------------
   home-cms.js injects #cmsFieldStyles at runtime and now emits
   `html body #top.hero-x …` selectors so CMS type/geometry can override these
   defaults. Do not re-lock font-size/width/colour here with !important — that
   made the hero uneditable in the CMS. Layout structure (flex composition)
   stays in this file; typography is CMS-owned once a field style is set.

   Phone composition still lives here (beats mobile-experience.css at equal
   weight by source order when needed).
   ========================================================================== */

#top.hero-x {
  --hx-ink: #14161b;
  --hx-paper: #ffffff;
  --hx-paper-2: #f4f3f0;

  /* Pastel paper-cut grounds — Olson translucency, Parc Olympique depth. */
  --hx-sky: #aec6e0;
  --hx-blush: #e8b7a8;
  --hx-mint: #d4e2d6;

  /* Saturated accents. Small marks only, never a large fill. */
  --hx-a-red: #d6431f;
  --hx-a-blue: #1f3fa8;

  --hx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --hx-ease: cubic-bezier(.22, 1, .36, 1);
  /* ease-out-expo: marks arrive fast and settle flat. No overshoot — a bounce
     across a dozen shapes reads as novelty, not craft. */
  --hx-pop: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Canvas — the site background, untouched, plus a whisper of print grain.
   No colour wash: the brief is that the hero reads as the same surface as the
   rest of the page.
   -------------------------------------------------------------------------- */
#top.hero-x .hero-x-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#top.hero-x .hero-x-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hx-grain);
  background-size: 160px 160px;
  opacity: .16;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
}

/* --------------------------------------------------------------------------
   Art layer. A flex box with the same padding as .hero-row, so the cluster
   centres on exactly the band the headline occupies.
   -------------------------------------------------------------------------- */
#top.hero-x .hero-x-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;
}

/* When the CMS switches the hero to image/video or splash media, the art layer
   would fight the media. Stand down. */
body.hero-stage-media-on #top.hero-x .hero-x-art,
body.hero-stage-media-on #top.hero-x .hero-x-canvas,
body.stage-splash-on #top.hero-x .hero-x-art { display: none; }

#top.hero-x .hx-cluster {
  position: relative;
  flex: 0 0 auto;
  /* On a short viewport the band is smaller than the clamp; aspect-ratio pulls
     the width down with it rather than letting the cluster clip. */
  max-width: 100%;
  max-height: 100%;
}

#top.hero-x .hx-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--hx-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fine agency line weight — precise, not toddler-thick. */
#top.hero-x .hx-mark {
  stroke-width: 2.15;
}
#top.hero-x .hx-mark--on-ink {
  stroke: #fff;
  stroke-width: 2.35;
}

/* Cut-paper depth: grounds cast; marks float slightly above. */
#top.hero-x .hx-grounds {
  filter: drop-shadow(0 20px 32px rgba(20, 22, 27, .15));
}
#top.hero-x .hx-grounds > * { stroke: none; }

/* Riso grain, clipped to the ground shapes only. */
#top.hero-x .hx-noise {
  opacity: .18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* hxPop drives `transform`, hxDrift drives `translate` — separate properties,
   so both run on the same element and the drift never cancels the entrance.
   .hx-a is always an OUTER wrapper: the inner <g> owns the placement transform,
   which a CSS transform here would otherwise overwrite. */
#top.hero-x .hx-a {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation:
    hxPop .82s var(--hx-pop) var(--d, 0s) forwards,
    hxDrift var(--f, 11s) ease-in-out var(--d, 0s) infinite;
}

@keyframes hxPop {
  from { opacity: 0; transform: translate3d(0, 3%, 0) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes hxDrift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -.9%; }
}

/* Which composition is live. Wide = desktop column; strip = phone band. */
#top.hero-x .hx-svg--strip { display: none; }
#top.hero-x .hx-cluster { aspect-ratio: 640 / 560; }

/* --------------------------------------------------------------------------
   Copy — shared across breakpoints
   Defaults only. CMS (#cmsFieldStyles) must be able to override type + box
   model; do not lock font-size/width/colour here with higher-specificity
   !important (that made the hero uneditable in the CMS).
   -------------------------------------------------------------------------- */
html body #top.hero-x .hero-content,
html body #top.hero-x .hero-headline-block {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  transform: none;
}

html body #top.hero-x .hero-title {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  max-width: 100%;
  margin: 0;
  line-height: var(--hero-ln, .87);
  letter-spacing: -.045em;
  --hero-ln: .87;
}

html body #top.hero-x .hero-title .ln,
html body #top.hero-x .hero-title .ln > span { line-height: var(--hero-ln, .87); }

/* The lede column: pointer mark and secondary headline. */
#top.hero-x .hero-x-bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
}

#top.hero-x .hero-x-lede {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, .8vw, 12px);
  width: min(100%, 72rem);
  min-width: 0;
}

html body #top.hero-x .hero-tagline {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 1.06vw, 17px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.005em;
  max-width: 40ch;
  text-wrap: balance;
}

html body #top.hero-x .hero-subtext-col {
  position: static;
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  min-width: 0;
  transform: none;
  margin: 0;
  padding: 0;
  inset: auto;
}

html body #top.hero-x .hero-subtext-mask {
  position: static;
  width: 100%;
  max-width: 96ch;
  margin: 0;
  transform: none;
}

html body #top.hero-x .hero-subtext {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: clamp(12.5px, .95vw, 15px);
  line-height: 1.5;
  letter-spacing: -.004em;
  text-wrap: balance;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* CMS preview: hero copy is under pointer-events:none parents for the live
   site cursor — re-enable so resize/select/edit hit the fields. */
html.cms-preview-mode #top.hero-x .hero-row,
html.cms-preview-mode #top.hero-x .hero-content,
html.cms-preview-mode #top.hero-x .hero-subtext-col,
html.cms-preview-mode #top.hero-x .hero-x-bar,
html.cms-preview-mode #top.hero-x .hero-title,
html.cms-preview-mode #top.hero-x .hero-tagline,
html.cms-preview-mode #top.hero-x .hero-subtext {
  pointer-events: auto;
}

html.cms-preview-mode #top.hero-x .hero-subtext {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* ==========================================================================
   Desktop / laptop
   ========================================================================== */
@media (min-width: 1201px) {
  html body #top.hero-x .hero-row {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    flex: 1 1 auto;
    min-height: 0;
    gap: clamp(24px, 3vh, 44px);
    padding:
      clamp(132px, 17vh, 190px)
      var(--gutter)
      clamp(78px, 10vh, 96px);
  }

  /* Top padding matches .hero-row; the bottom also reserves the bar's height,
     so the cluster centres on the headline band rather than on the whole row
     and sits level with the type instead of drifting under it. */
  #top.hero-x .hero-x-art {
    padding:
      clamp(132px, 17vh, 190px)
      var(--gutter)
      clamp(150px, 21vh, 240px);
  }

  #top.hero-x .hx-cluster { width: clamp(300px, 34vw, 520px); }

  html body #top.hero-x .hero-content {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    min-height: 0;
  }

  /* The CMS emits `#top .hero-headline-block{align-self:flex-start}` for the
     old top-anchored hero; here the headline owns the middle band. */
  html body #top.hero-x .hero-headline-block { align-self: center; }

  /* Stepped down from the full-bleed size so the cluster gets its own column
     instead of fighting the last line for room. */
  html body #top.hero-x .hero-title {
    font-size: clamp(2.9rem, 6.6vw, 6rem);
  }

  html body #top.hero-x .hero-subtext-col { justify-content: flex-start; }
  html body #top.hero-x .hero-subtext-mask { max-width: 96ch; }
  html body #top.hero-x .hero-subtext { max-width: 100%; text-align: left; }
}

/* Short viewports (laptops, 16:10 at 1440): the middle band loses ~120px. */
@media (min-width: 1201px) and (max-height: 800px) {
  html body #top.hero-x .hero-row,
  #top.hero-x .hero-x-art { padding-top: clamp(112px, 15vh, 150px); }
  html body #top.hero-x .hero-title { font-size: clamp(2.7rem, 5.6vw, 4.8rem); }
  #top.hero-x .hx-cluster { width: clamp(260px, 28vw, 400px); }
}

/* ==========================================================================
   Flat layout — phones and portrait tablets.
   The square cluster re-composes as a horizontal strip in its own band under
   the caption: four icons, three grounds, no overlap with any copy.
   (This block also supersedes the hero rules in mobile-experience.css, which
   loads later but at specificity 121.)
   ========================================================================== */
@media (max-width: 1200px) {
  html body #top.hero-x .hero-row {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(20px, 4.4vw, 30px);
    padding:
      calc(6.5rem + env(safe-area-inset-top))
      var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem))
      clamp(80px, 20vw, 96px);
  }

  html body #top.hero-x .hero-title {
    font-size: clamp(2.25rem, 11vw, 3.35rem);
    max-width: 100%;
    letter-spacing: -.042em;
  }

  html body #top.hero-x .hero-title .ln {
    padding-bottom: .12em;
    margin-bottom: -.06em;
  }

  #top.hero-x .hero-x-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(18px, 4.4vw, 26px);
  }

  html body #top.hero-x .hero-tagline {
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.4;
    max-width: 40ch;
  }

  html body #top.hero-x .hero-subtext-col { justify-content: flex-start; }
  html body #top.hero-x .hero-subtext-mask { max-width: 34ch; }

  html body #top.hero-x .hero-subtext {
    max-width: 34ch;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.5;
    text-align: left;
  }

  #top.hero-x .hero-x-art {
    align-items: flex-end;
    /* Left-aligned so the strip sits on the same edge as the copy column. */
    justify-content: flex-start;
    padding:
      0
      var(--mobile-gutter, clamp(1.25rem, 5.6vw, 1.5rem))
      1.5rem;
  }

  #top.hero-x .hx-cluster {
    flex: 1 1 auto;
    width: 100%;
    max-width: 34rem;
    aspect-ratio: 640 / 200;
  }

  #top.hero-x .hx-svg--wide { display: none; }
  #top.hero-x .hx-svg--strip { display: block; }

}

/* Portrait tablet: wider gutters, and the strip caps out so it does not turn
   into a 250px-tall band. */
@media (min-width: 768px) and (max-width: 1200px) {
  #top.hero-x { --hx-tgutter: clamp(2rem, 5vw, 3rem); }

  html body #top.hero-x .hero-row { padding-inline: var(--hx-tgutter); }
  html body #top.hero-x .hero-row { padding-bottom: clamp(36px, 5vw, 56px); }
  html body #top.hero-x .hero-title { font-size: clamp(3.4rem, 8.4vw, 5.6rem); }
  html body #top.hero-x .hero-tagline { max-width: 40ch; }
  html body #top.hero-x .hero-subtext-mask { max-width: 44ch; }
  html body #top.hero-x .hero-subtext { max-width: 44ch; }
}

/* Landscape phones: the hero is ~380px tall. Copy only. */
@media (max-width: 1200px) and (max-height: 520px) and (orientation: landscape) {
  #top.hero-x .hero-x-art { display: none; }

  html body #top.hero-x .hero-row { padding-bottom: clamp(28px, 7vw, 44px); }
}

/* Hard-hide retired SVG hero graphics if anything reintroduces them. */
#top.hero-x .hero-x-art,
#top.hero-x .hero-x-canvas,
#top.hero-x .hero-x-pointer {
  display: none !important;
}