/* =====================================================================
 * MTRD Home — cinematic road-dryer landing experience
 * Shares the design language of the Road Drying page (road-drying.css):
 * dark, scroll-driven, orange-accented. Scoped under .mh so nothing leaks
 * into the rest of the site. Pairs with home.js.
 * ===================================================================== */

.mh {
  --mh-ink:      #08080a;
  --mh-char:     #111114;
  --mh-slate:    #17171b;
  --mh-line:     rgba(255,255,255,0.09);
  --mh-line-2:   rgba(255,255,255,0.05);
  --mh-orange:      #e2661f;
  --mh-orange-deep: #a8410f;
  --mh-paper:    #ffffff;
  --mh-mute:     #9a9aa2;
  --mh-dim:      #6c6c74;
  --mh-ease:     cubic-bezier(.22,.61,.36,1);
  --mh-max:      1240px;

  /* Vertical rhythm ladder: 72 / 48 / 36 / 24 (6:4:3:2), vw middles not vh, so
   * sections match contact.css and never grow with the height of the screen. */
  --mh-sp-section: clamp(44px, 8vw, 72px);
  --mh-sp-band:    clamp(44px, 5.4vw, 48px);
  --mh-sp-hero:    clamp(48px, 8vw, 72px);
  --mh-sp-head:    clamp(28px, 4vw, 36px);
  --mh-sp-text:    clamp(20px, 2.7vw, 24px);

  position: relative;
  width: 100%;
  margin-bottom: -1px; /* meet footer cleanly */
  background: var(--mh-ink);
  color: var(--mh-paper);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Neutralise the Kadence content wrapper so the hero sits flush to the nav. */
.home #inner-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
.home .entry-hero-container-inner,
.home .entry-header,
.home .content-title-style-normal .entry-header { display: none !important; }
.home #primary, .home .content-area { margin: 0 !important; max-width: none !important; }

.mh *, .mh *::before, .mh *::after { box-sizing: border-box; }
.mh img { display: block; max-width: 100%; height: auto; }

/* ----------------------------------------------------- layout helpers */
.mh__wrap { width: 100%; max-width: var(--mh-max); margin: 0 auto; padding: 0 28px; }
.mh section { position: relative; }

.mh__eyebrow {
  display: inline-flex; align-items: baseline; gap: .55em;
  font-size: .72rem; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--mh-mute);
  margin: 0 0 1.2rem;
}
.mh__eyebrow i {
  font-style: normal; color: var(--mh-orange); font-weight: 800;
  letter-spacing: .1em; font-feature-settings: "tnum";
}
.mh__eyebrow i::after { content: " /"; }

.mh h2.mh__title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 1.2rem; color: var(--mh-paper);
}
.mh .mh__lead {
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  color: var(--mh-mute); max-width: 60ch; margin: 0 0 1.5rem;
}
.mh p { color: #cfcfd6; }
.mh strong { color: var(--mh-paper); font-weight: 700; }
.mh em { color: var(--mh-orange); font-style: normal; }

/* =====================================================================
 * Scroll progress bar
 * ===================================================================== */
.mh__progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--mh-orange), #ffa63d);
  z-index: 9999; box-shadow: 0 0 14px rgba(226,102,31,.7);
  transition: width .1s linear;
}

/* =====================================================================
 * Buttons
 * ===================================================================== */
.mh__btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  padding: 1.05rem 2.1rem; border-radius: 2px;
  transition: transform .25s var(--mh-ease), background .25s, color .25s, box-shadow .25s;
}
.mh__btn--primary {
  background: var(--mh-orange); color: #fff;
  box-shadow: 0 10px 30px -8px rgba(226,102,31,.6);
}
.mh__btn--primary:hover { background: #fff; color: var(--mh-orange); transform: translateY(-3px); }
.mh__btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.mh__btn--ghost:hover { border-color: #fff; transform: translateY(-3px); }
.mh__btn svg { width: 1.05em; height: 1.05em; }

.mh__cta-row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}

/* =====================================================================
 * HERO
 * ===================================================================== */
/* The hero art is the brand banner (2026/08/banner.png): 1920x823, i.e. 2.33:1,
 * with the Multitech Road Dryers lockup baked into its top-left corner and a
 * three-photo collage down its right. Cropping it sideways is not an option —
 * the lockup starts 4% in, so any symmetrical `cover` trim leaves a half-word
 * sitting under the header logo, and anchoring left to save it blows the lockup
 * up to half the viewport on a laptop.
 *
 * So the banner is never cropped horizontally: it runs full width under the
 * header at its own aspect, and its bottom edge fades into the ink. The hero
 * keeps its full height, which puts the headline stack on the banner's lower
 * half (clear of the lockup, over dark wet road) and the CTAs on the ink below.
 * `aspect-ratio` — not a vw calc — sizes the band, so the scrollbar can't leave
 * a seam between the artwork and the fade.
 *
 * The lockup duplicating the header logo is baked into the supplied artwork. */
.mh__hero {
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 0 var(--mh-sp-hero);
  overflow: hidden;
}
.mh__hero-bg {
  position: absolute; inset: 0 0 auto 0; z-index: 0;
  aspect-ratio: 1920 / 823;
  background-size: 100% auto; background-position: center top;
  background-repeat: no-repeat;
}
.mh__hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.5) 0%, rgba(8,8,10,.14) 34%, rgba(8,8,10,.6) 80%, var(--mh-ink) 100%),
    radial-gradient(120% 80% at 80% 0%, rgba(226,102,31,.18), transparent 55%);
}
/* On a very wide, short window the band is taller than the hero and `overflow:
 * hidden` clips its own fade mid-ramp; this keeps the section ending in ink. */
.mh__hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,0), var(--mh-ink));
}
.mh__hero .mh__wrap { position: relative; z-index: 2; width: 100%; }

.mh__hero-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: #cfcfd6;
  display: flex; align-items: baseline; gap: .6em; margin: 0 0 1.4rem;
}
.mh__hero-eyebrow i { font-style: normal; color: var(--mh-orange); font-weight: 800; letter-spacing: .12em; }
.mh__hero-eyebrow i::after { content: " /"; }

.mh__hero h1 {
  font-size: clamp(2.7rem, 1.2rem + 6.6vw, 7rem);
  font-weight: 800; line-height: 1; letter-spacing: -.025em;
  margin: 0 0 1.4rem; color: #fff; text-transform: none;
}
.mh__hero h1 .mh__word { display: inline-block; vertical-align: top; }
.mh__hero h1 .mh__word > span {
  display: inline-block;
  opacity: 0; transform: translateY(.32em); filter: blur(10px);
  transition: opacity .9s var(--mh-ease), transform .9s var(--mh-ease), filter .9s var(--mh-ease);
}
.mh.is-ready .mh__hero h1 .mh__word > span { opacity: 1; transform: none; filter: blur(0); }
.mh__hero h1 .mh__word:nth-child(2) > span { transition-delay: .12s; }
.mh__hero h1 .mh__word:nth-child(3) > span { transition-delay: .24s; }

.mh__hero-sub {
  max-width: 58ch; font-size: clamp(1.05rem, .98rem + .5vw, 1.35rem);
  color: #d7d7dd; margin: 0 0 var(--mh-sp-text); line-height: 1.5;
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s var(--mh-ease) .45s, transform .9s var(--mh-ease) .45s;
}
.mh.is-ready .mh__hero-sub { opacity: 1; transform: none; }

.mh__hero .mh__cta-row {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s var(--mh-ease) .6s, transform .9s var(--mh-ease) .6s;
}
.mh.is-ready .mh__hero .mh__cta-row { opacity: 1; transform: none; }

.mh__scrollcue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center;
  gap: .6rem; color: var(--mh-mute); font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase;
  opacity: 0; transition: opacity 1s var(--mh-ease) 1s;
}
.mh.is-ready .mh__scrollcue { opacity: 1; }
.mh__scrollcue i {
  width: 12px; height: 12px;
  border-right: 2px solid var(--mh-orange); border-bottom: 2px solid var(--mh-orange);
  transform: rotate(45deg); animation: mh-cue 1.8s var(--mh-ease) infinite;
}
@keyframes mh-cue {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .4; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* =====================================================================
 * MARQUEE
 * ===================================================================== */
.mh__marquee {
  border-top: 1px solid var(--mh-line);
  border-bottom: 1px solid var(--mh-line);
  background: var(--mh-char);
  overflow: hidden; padding: 1.1rem 0;
}
.mh__marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: mh-marquee 38s linear infinite;
}
.mh__marquee:hover .mh__marquee-track { animation-play-state: paused; }
.mh__marquee-item {
  display: inline-flex; align-items: center; gap: 1.6rem; padding: 0 1.6rem;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.7rem); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: #2c2c33;
  white-space: nowrap;
}
.mh__marquee-item b { color: #f1f1f4; font-weight: 800; }
.mh__marquee-item::after { content: "/"; color: var(--mh-orange); font-size: .85em; font-weight: 800; }
@keyframes mh-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* =====================================================================
 * Generic scroll reveal
 * ===================================================================== */
.mh [data-reveal] {
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .85s var(--mh-ease), transform .85s var(--mh-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.mh [data-reveal].is-in { opacity: 1; transform: none; }
.mh [data-reveal="left"]  { transform: translateX(-46px); }
.mh [data-reveal="right"] { transform: translateX(46px); }
.mh [data-reveal="left"].is-in,
.mh [data-reveal="right"].is-in { transform: none; }
.mh [data-reveal="scale"] { transform: scale(.92); }
.mh [data-reveal="scale"].is-in { transform: none; }

/* =====================================================================
 * STATS  (dark band, static figures + Australia outline)
 * ===================================================================== */
.mh__stats { padding: var(--mh-sp-band) 0; background: var(--mh-char); border-top: 2px solid var(--mh-orange); }
.mh__stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--mh-line);
}
.mh__stat {
  background: var(--mh-char); padding: var(--mh-sp-head) 1rem; text-align: center;
}
.mh__stat b {
  display: block; font-size: clamp(3.4rem, 2rem + 5.5vw, 6.5rem); font-weight: 800;
  line-height: .92; color: var(--mh-orange); letter-spacing: -.03em;
}
.mh__stat b sup { font-size: .42em; vertical-align: super; }
/* Australia outline in place of a figure. The wrapper keeps the same .92em line
 * box as a numeric <b>, so every caption in the row sits on the same line. */
.mh__stat b.mh__stat-map { display: flex; align-items: center; justify-content: center; height: .92em; overflow: visible; }
.mh__stat b.mh__stat-map svg { display: block; height: 1.06em; width: auto; fill: currentColor; }
.mh__stat > span {
  display: block; margin-top: 1rem; font-size: clamp(.85rem, .8rem + .2vw, 1rem);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mh-paper);
}

/* =====================================================================
 * APPLICATION PILLARS  (three-up on the home page)
 * ===================================================================== */
.mh__pillars { padding: var(--mh-sp-section) 0; }
.mh__pillars-head { max-width: 760px; margin: 0 auto var(--mh-sp-head); text-align: center; }
.mh__pillars-head .mh__eyebrow { justify-content: center; }
.mh__pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }

/* Three-up variant for the home page's application cards. Steps 3 -> 2 at
 * 1100px; the shared 980px rule below then collapses it to a single column,
 * so this only needs the intermediate stop. */
.mh__pillars-grid--three { grid-template-columns: repeat(3, 1fr); }
.mh__pillars-grid--three .mh__pillar { min-height: 420px; }
@media (max-width: 1100px) {
  .mh__pillars-grid--three { grid-template-columns: 1fr 1fr; }
}
.mh__pillar {
  position: relative; overflow: hidden; border-radius: 6px;
  border: 1px solid var(--mh-line); background: var(--mh-char);
  min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: inherit;
  transition: transform .4s var(--mh-ease), border-color .4s;
}
.mh__pillar-img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform .8s var(--mh-ease);
}
.mh__pillar::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,8,10,.25) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.94) 100%);
}
.mh__pillar:hover { transform: translateY(-6px); border-color: rgba(226,102,31,.5); }
.mh__pillar:hover .mh__pillar-img { transform: scale(1.07); }
.mh__pillar-body { position: relative; z-index: 2; padding: clamp(28px, 4vw, 44px); }
.mh__pillar-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mh-orange); margin: 0 0 .8rem;
}
.mh__pillar h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.05; margin: 0 0 .8rem; color: #fff; text-transform: uppercase; letter-spacing: -.01em; }
.mh__pillar p { color: #cfcfd6; margin: 0 0 1.4rem; max-width: 44ch; }
.mh__pillar-link {
  display: inline-flex; align-items: center; gap: .55em; font-weight: 700;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.mh__pillar-link svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--mh-ease); }
.mh__pillar:hover .mh__pillar-link svg { transform: translateX(5px); }

/* =====================================================================
 * COVERAGE — the Australia-wide / 24-7 band
 * Replaced the old CAPABILITIES spec grid: machine spec now lives only on
 * /road-drying/. Section padding is per-section in this file (there is no
 * shared section utility), hence the explicit padding rule below.
 * ===================================================================== */
.mh__cover { padding: var(--mh-sp-section) 0; background: linear-gradient(180deg, var(--mh-char), var(--mh-ink)); border-top: 1px solid var(--mh-line-2); }
.mh__cover-head { text-align: center; max-width: 760px; margin: 0 auto var(--mh-sp-head); }
.mh__cover-head .mh__eyebrow { justify-content: center; }
.mh__cover-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.mh__cover-chips li {
  padding: .85rem 1.7rem; background: var(--mh-char);
  border: 1px solid var(--mh-line); border-radius: 4px; color: #fff;
  font-size: .95rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .35s var(--mh-ease), border-color .35s, background .35s;
}
.mh__cover-chips li:hover { transform: translateY(-4px); border-color: rgba(226,102,31,.5); background: var(--mh-slate); }

/* =====================================================================
 * FEATURED PROJECT — split with badge
 * ===================================================================== */
.mh__feature { padding: var(--mh-sp-section) 0; }
.mh__feature-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--mh-sp-head) clamp(36px, 5vw, 84px);
  align-items: center;
}
.mh__feature-media { position: relative; }
.mh__feature-media .mh__frame {
  position: relative; border-radius: 4px; overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
.mh__feature-media .mh__frame img {
  width: 100%; aspect-ratio: 4/3.2; object-fit: cover;
  transform: scale(1.12); will-change: transform;
}
.mh__feature-media .mh__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border: 1px solid var(--mh-line); border-radius: 4px; pointer-events: none;
}
.mh__badge {
  position: absolute; z-index: 3; bottom: -26px; left: -26px;
  background: var(--mh-orange); color: #fff; padding: 1.3rem 1.6rem;
  border-radius: 3px; box-shadow: 0 24px 50px -18px rgba(226,102,31,.7);
  max-width: 240px;
}
.mh__badge b { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; }
.mh__badge span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }

/* =====================================================================
 * AUTHORITIES
 * ===================================================================== */
.mh__auth { padding: var(--mh-sp-band) 0; border-top: 1px solid var(--mh-line-2); text-align: center; }
.mh__auth .mh__eyebrow { justify-content: center; }
.mh__auth-label { font-size: .8rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--mh-dim); margin: 0 0 var(--mh-sp-text); }

/* The bar runs the full width of .mh, not of .mh__wrap, and fades out at both
 * edges instead of cutting a logo in half — the mask sells it as continuous
 * motion rather than a clipped row. `width: 100%` on purpose: .mh is already
 * full-bleed and 100vw would put the scrollbar's width back into the layout. */
.mh__auth-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 4px 0;                     /* room for the hover lift, not clipped */
}
/* The fade is two gradient overlays, not a -webkit-mask-image on the bar.
 * Both render identically here because the band behind is flat --mh-ink, but
 * a mask over an overflow-clipped, continuously translated subtree is exactly
 * the combination that flickers and drops frames in older iOS Safari. Plain
 * gradients have no such history on any phone engine, and cost four vendor
 * prefixes less. If this section ever gains a non-flat background, these two
 * need to become a mask again — they cannot fade to a gradient. */
.mh__auth-marquee::before,
.mh__auth-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%;
  z-index: 1; pointer-events: none;
}
.mh__auth-marquee::before { left: 0;  background: linear-gradient(90deg, var(--mh-ink), rgba(8,8,10,0)); }
.mh__auth-marquee::after  { right: 0; background: linear-gradient(270deg, var(--mh-ink), rgba(8,8,10,0)); }

/* Two identical sets in one track, translated by exactly -50%: at the end of
 * the cycle set 2 sits precisely where set 1 started, so the jump back to 0 is
 * invisible. This is why the sets must stay identical — any difference in
 * count, tile size or gap between them shows up as a stutter once per loop.
 * --mh-marquee-dur is re-measured by home.js so the *speed* is constant at
 * every breakpoint; the value here is the no-JS fallback. */
.mh__auth-track {
  --mh-marquee-dur: 44s;
  display: flex;
  width: max-content;
  animation: mh-logo-marquee var(--mh-marquee-dur) linear infinite;
}
/* Pause-on-hover is gated to real pointers. A phone has no hover, so iOS and
 * Android synthesise :hover on tap and leave it stuck on the last thing
 * touched — scrolling the page with a finger on the bar would freeze it, and
 * it would stay frozen until the user happened to tap somewhere else. Nothing
 * in the bar is interactive, so touch users simply lose nothing here.
 * :focus-within stays ungated — it is keyboard/AT reach, not pointer. */
@media (hover: hover) and (pointer: fine) {
  .mh__auth-marquee:hover .mh__auth-track { animation-play-state: paused; }
}
.mh__auth-marquee:focus-within .mh__auth-track { animation-play-state: paused; }

/* Distinct name on purpose: the text ticker above already owns `mh-marquee`,
 * and duplicate @keyframes names don't cascade — the last one in the file wins
 * for every user of that name, so reusing it here silently reversed the
 * ticker's direction. */
@keyframes mh-logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.mh__auth-set {
  display: flex; align-items: center;
  gap: clamp(10px, 2vw, 28px);
  margin: 0; padding: 0 0 0 clamp(10px, 2vw, 28px); list-style: none;
}
.mh__auth-set li { flex: 0 0 auto; margin: 0; }

/* Every mark gets an identical tile and is fitted inside it, so the row reads
 * evenly however wide or tall the individual logos are. `height: 56px; width:
 * auto` was the old rule, and it can't work here: these are lockups with
 * wildly different proportions (a 5:1 AUSTek wordmark next to a 1.2:1 SA
 * crest), so matching their heights left the wide ones looking tiny and the
 * row looking random. The sources are also pre-trimmed of their baked-in white
 * margins — without that, `contain` just fits the whitespace. */
.mh__auth-set img {
  width: clamp(128px, 18vw, 190px);   /* floor keeps 2-up at 320px wide */
  height: clamp(78px, 9.5vw, 104px);
  object-fit: contain;
  background: #fff; border-radius: 8px; padding: .75rem 1rem;
  /* Resting state was `saturate(.2)` back when this row held four mostly
   * monochrome government crests. Six corporate marks later it read as a
   * rendering fault — Boral's yellow/green went beige, Colas khaki, Fulton
   * Hogan's cyan grey. Partner brands are shown in their own colours; the
   * slight opacity is all that's needed to sit them on the dark band. */
  filter: opacity(.92); transition: filter .3s var(--mh-ease), transform .3s var(--mh-ease);
}
/* Same gate as the pause above: on a phone this lift would stick to whichever
 * logo was last touched and ride along in the moving row. */
@media (hover: hover) and (pointer: fine) {
  .mh__auth-set img:hover { filter: none; transform: translateY(-3px); }
}

/* Phones get the tile's floor size (128x78), and .75rem/1rem of padding eats
 * a third of that — a 5:1 wordmark like AUSTek fitted the remaining 96x54 box
 * lands about 19px tall. Tightening the padding at the small end buys back
 * roughly 25% of mark height without letting anything touch the tile edge. */
@media (max-width: 560px) {
  .mh__auth-set img { padding: .5rem .65rem; border-radius: 6px; }
}

/* =====================================================================
 * FINAL CTA
 * ===================================================================== */
.mh__cta {
  position: relative; padding: var(--mh-sp-section) 0; text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(226,102,31,.28), transparent 60%),
    linear-gradient(180deg, var(--mh-char), var(--mh-ink));
  border-top: 1px solid var(--mh-line-2);
  overflow: hidden;
}
.mh__cta h2 {
  font-size: clamp(2.2rem, 1.3rem + 4vw, 4.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -.025em; margin: 0 auto 1.4rem; max-width: 16ch; text-transform: uppercase; color: #fff;
}
.mh__cta p { color: var(--mh-mute); max-width: 52ch; margin: 0 auto var(--mh-sp-text); font-size: 1.1rem; }
.mh__cta .mh__cta-row { justify-content: center; }
.mh__cta-strip {
  margin-top: var(--mh-sp-head); padding-top: var(--mh-sp-text); border-top: 1px solid var(--mh-line);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mh-dim);
}
.mh__cta-strip b { color: #fff; font-weight: 700; }
.mh__cta-strip a { color: #fff; text-decoration: none; }
.mh__cta-strip a:hover { color: var(--mh-orange); }

/* =====================================================================
 * RESPONSIVE
 * ===================================================================== */
/* Narrow: the band is only ~a sixth of the screen, so instead of leaving the
 * headline stranded at the bottom of a 100svh hero, the hero shrinks to its
 * content and the copy sits directly under the artwork. */
@media (max-width: 899px) {
  .mh__hero {
    min-height: 0;
    padding: calc(100vw / 2.333 + 26px) 0 var(--mh-sp-hero);
  }
  .mh__scrollcue { display: none; }
}
@media (max-width: 980px) {
  .mh__feature-grid, .mh__pillars-grid { grid-template-columns: 1fr; }
  .mh__stats-grid { grid-template-columns: repeat(2, 1fr); }
  .mh__badge { left: 16px; bottom: 16px; }
  .mh__pillar { min-height: 380px; }
}
@media (max-width: 560px) {
  .mh__wrap { padding: 0 20px; }
  .mh__cover-chips li { padding: .7rem 1.15rem; letter-spacing: .12em; }
  .mh__cta-row .mh__btn { width: 100%; justify-content: center; }
}

/* =====================================================================
 * Reduced motion
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mh *, .mh *::before, .mh *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .mh [data-reveal] { opacity: 1 !important; transform: none !important; }
  .mh__hero h1 .mh__word > span { transform: none !important; opacity: 1 !important; filter: none !important; }
  .mh__hero-sub, .mh__hero .mh__cta-row, .mh__scrollcue { opacity: 1 !important; transform: none !important; }

  /* The blanket rule above kills the marquee's animation but not its layout —
   * a max-content track inside an overflow:hidden bar would strand every logo
   * past the first screenful. Unwrap it back into the static centred row the
   * section used before, and drop the second (aria-hidden) copy so nothing is
   * shown twice. The edge fades go too: with nothing moving, they just dim
   * the outermost tiles of a static grid for no reason. */
  .mh__auth-marquee { overflow: visible; }
  .mh__auth-marquee::before, .mh__auth-marquee::after { display: none; }
  .mh__auth-track { width: auto; display: block; }
  .mh__auth-set { flex-wrap: wrap; justify-content: center; padding-left: 0; }
  .mh__auth-set[aria-hidden="true"] { display: none; }
}