/* ============================================================
   PIT STOP PROS PERFORMANCE — Kelowna, BC
   ------------------------------------------------------------
   The palette is sampled from the hero footage, not from the old
   flat brand sheet: cool near-black brick, hot neon orange, and a
   cold white light-tube accent. Three light sources, one hue each.
   Everything else is greyscale so the orange always reads as light
   rather than as paint.
   ============================================================ */

:root {
  /* surfaces — cool, not neutral. The video's shadows are blue-grey. */
  --ink:       #08090b;
  --surface:   #0e1013;
  --surface-2: #14171b;
  --surface-3: #1b1f24;
  --line:      #22272d;
  --line-hot:  #33393f;

  /* light */
  --orange:      #ff8a1f;
  --orange-deep: #f2660d;
  --orange-dim:  rgba(255, 138, 31, 0.14);
  --tube:        #dce8ff;   /* the cold white light tubes */

  /* type */
  --text:  #f4f6f8;
  --muted: #98a0a9;
  --faint: #5d656d;

  --display: "Bahnschrift Condensed", "Bahnschrift", "Archivo Narrow", "Arial Narrow",
             "Helvetica Neue Condensed", Impact, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --slash: -18deg;
  --gut: clamp(20px, 5vw, 88px);
  --maxw: 1400px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--orange); color: #000; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--orange); color: #000; padding: 12px 20px; font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* The visible masthead is gone, but the page still needs a top-level heading. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   ACTION BAR — nav + phone. Slides in only after the hero, so the
   masthead stays "banner only" the way it was asked for, without
   costing the shop its call button.
   ============================================================ */

.actionbar {
  position: fixed; z-index: 90; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--gut);
  background: rgba(10, 12, 15, .86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-101%);
  transition: transform .5s var(--ease);
}
.actionbar.is-in { transform: none; }
.actionbar__mark {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .18em;
  font-size: .92rem; text-decoration: none; margin-right: auto; white-space: nowrap;
}
.actionbar__mark em { font-style: normal; color: var(--orange); }
.actionbar__links { display: flex; gap: 28px; }
.actionbar__links a {
  position: relative; text-decoration: none;
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .13em; font-size: .86rem; color: var(--muted);
  padding: 4px 0; transition: color .3s var(--ease);
}
.actionbar__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--orange); box-shadow: 0 0 10px var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.actionbar__links a:hover, .actionbar__links a.is-current { color: var(--text); }
.actionbar__links a:hover::after, .actionbar__links a.is-current::after { transform: scaleX(1); }

/* ---------- buttons ---------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), box-shadow .4s var(--ease), transform .3s var(--ease);
}
.btn--call {
  background: var(--orange); color: #120a02;
  box-shadow: 0 0 0 rgba(255,138,31,0), 0 10px 30px -12px rgba(255,138,31,.9);
}
.btn--call:hover {
  background: #ffa040; transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(255,138,31,.5), 0 14px 34px -12px rgba(255,138,31,1);
}
.btn--ghost { border-color: var(--line-hot); color: var(--text); }
.btn--ghost:hover {
  border-color: var(--orange); color: var(--orange);
  box-shadow: inset 0 0 22px rgba(255,138,31,.12), 0 0 18px rgba(255,138,31,.22);
}
.btn--sm { padding: 10px 20px; font-size: .86rem; }

/* ---------- shared type ---------- */

.chip {
  display: inline-block; width: 9px; height: 18px; margin-right: 12px;
  background: var(--orange); transform: skewX(var(--slash)); vertical-align: -2px;
  box-shadow: 0 0 12px rgba(255,138,31,.7);
}
.eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .24em;
  font-size: .78rem; color: var(--orange); margin: 0 0 18px;
}
.h-display {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5.2rem);
  line-height: .95; letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 22px;
}
.h-display em { color: var(--orange); font-style: normal; }
.lede { color: var(--muted); max-width: 60ch; margin: 0; font-size: 1.05rem; }

/* ============================================================
   HERO
   Default = static stacked (no JS, touch, reduced motion, rig
   failure). `.scrub` on <html> upgrades it to the scrubbed rig.
   ============================================================ */

.hero { position: relative; }
.hero__stage { position: relative; background: var(--ink); }

.hero__poster {
  position: relative; width: 100%;
  height: clamp(340px, 64vh, 620px); object-fit: cover; object-position: center top;
}
.hero__canvas, .hero__loader, .hero__hint { display: none; }

/* Only a soft foot, to hand off into the CTA band. Nothing is written over
   the footage any more, so the scrim no longer has to buy text contrast. */
.hero__scrim {
  position: absolute; inset: 0 0 auto 0; height: clamp(340px, 64vh, 620px);
  background: linear-gradient(to top, rgba(6,7,9,.92) 0%, rgba(6,7,9,.25) 22%, transparent 45%);
}

/* --- scrub upgrade --- */

/* Length comes from chapters.json via --hero-vh (set before ScrollTrigger
   measures). The fallback matters only if the config fails to load. */
.scrub .hero { height: var(--hero-vh, 640vh); }
.scrub .hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.scrub .hero__poster, .scrub .hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.scrub .hero__canvas { display: block; opacity: 0; transition: opacity .6s var(--ease); }
.scrub .hero__canvas.is-live { opacity: 1; }
.scrub .hero__poster { object-position: center top; }   /* matches the canvas crop rule */
.scrub .hero__loader { display: block; }
.scrub .hero__hint { display: flex; }

/* Bare minimum: a foot to hand off into the CTA, and the faintest corner
   vignette. The garbled floor lettering is removed by the 12% source crop in
   paint(), not by darkening, so the picture stays open. */
.scrub .hero__scrim {
  inset: 0; height: auto;
  background:
    linear-gradient(to top, rgba(5,6,8,.85) 0%, rgba(5,6,8,.22) 14%, transparent 34%),
    radial-gradient(140% 90% at 50% 46%, transparent 62%, rgba(0,0,0,.42) 100%);
}

/* scroll affordance — the word, then a falling light beneath it */
.hero__hint {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: opacity .5s var(--ease);
}
.hero__hint b {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .84rem; letter-spacing: .40em; text-indent: .40em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 16px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.7);
}
.hero__hint span {
  position: relative; display: block; width: 1px; height: 50px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,138,31,.20), rgba(255,138,31,.04));
}
.hero__hint span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--orange));
  box-shadow: 0 0 10px rgba(255,138,31,.85);
  animation: fall 2.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes fall {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.hero__hint.is-gone { opacity: 0; }

.hero__loader {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(220px, 46vw); transition: opacity .6s var(--ease);
}
.hero__loader.is-done { opacity: 0; pointer-events: none; }
.hero__loaderbar { display: block; height: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.hero__loaderbar i {
  display: block; height: 100%; width: 0; background: var(--orange);
  box-shadow: 0 0 12px var(--orange); transition: width .2s linear;
}

/* ============================================================
   HERO CTA
   Default (static, no JS, touch): its own band under the poster, sitting on
   the final still of the sequence.
   Scrub: the same markup lifts off the page and becomes an overlay that rises
   over the last stretch of the scroll, on the real footage, while the hero is
   still pinned — so the page never "spits you out" into a separate screen.
   ============================================================ */

.hero__cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(74px, 12vh, 132px) var(--gut) clamp(62px, 10vh, 112px);
}
.hero__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../assets/cta-still.webp") center 40% / cover no-repeat;
}
.hero__cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,7,9,.95) 0%, rgba(6,7,9,.86) 34%, rgba(6,7,9,.42) 66%, rgba(6,7,9,.62) 100%),
    linear-gradient(180deg, rgba(6,7,9,.92) 0%, rgba(6,7,9,.15) 26%, rgba(8,9,11,.75) 82%, var(--ink) 100%);
}
.hero__ctatitle {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.7rem, 8vw, 6.4rem);
  line-height: .92; letter-spacing: -.01em; text-transform: uppercase;
  margin: 0 0 20px; max-width: 16ch;
}
.hero__ctatitle em {
  font-style: normal; color: var(--orange);
  text-shadow: 0 0 40px rgba(255,138,31,.5);
}
.hero__ctacopy { color: #d3d8dd; max-width: 46ch; margin: 0 0 30px; font-size: 1.06rem; }
.hero__ctaactions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- scrub: overlay inside the pinned stage --- */

.scrub .hero__cta {
  position: absolute; overflow: visible;
  left: var(--gut); right: var(--gut); bottom: clamp(60px, 10vh, 116px);
  max-width: 900px; padding: 0;
  opacity: 0; transform: translateY(28px);
  pointer-events: none; will-change: opacity, transform;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.scrub .hero__cta::before, .scrub .hero__cta::after { display: none; }
.scrub .hero__stage.cta-in .hero__cta { opacity: 1; transform: none; pointer-events: auto; }

/* The contrast wash arrives with the CTA and only then — the footage stays
   clean for the whole reveal before it. */
.hero__ctascrim { display: none; }
.scrub .hero__ctascrim {
  display: block; position: absolute; inset: 0; opacity: 0;
  transition: opacity .8s var(--ease);
  /* Weighted hard to the left, where the copy sits, and released early so the
     car and the lit half of the shop stay bright. The whole point of the hold
     is to show this frame — dimming it globally would undo that. */
  background:
    linear-gradient(100deg, rgba(6,7,9,.90) 0%, rgba(6,7,9,.66) 26%, rgba(6,7,9,.14) 54%, transparent 72%),
    linear-gradient(180deg, transparent 62%, rgba(6,7,9,.42) 100%);
}
.scrub .hero__stage.cta-in .hero__ctascrim { opacity: 1; }
.scrub .hero__stage.cta-in .hero__hint { opacity: 0; }

/* ============================================================
   NEON EDGE — the hover system.
   A hairline that lights up around the whole element, a soft inner
   bloom, and a single sweep of light across the surface. One idea,
   applied consistently, so hover reads as "the tube switched on"
   rather than as five different effects.
   ============================================================ */

.edge {
  position: relative; isolation: isolate;
  overflow: hidden;              /* contains the sweep; box-shadow is unaffected */
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .45s var(--ease), background .45s var(--ease),
              transform .45s var(--ease), box-shadow .5s var(--ease);
}
.edge::before {   /* bloom */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 110%, rgba(255,138,31,.20), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.edge::after {    /* sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,180,90,.13), transparent);
  transform: skewX(var(--slash));
  transition: left .85s var(--ease);
  pointer-events: none;
}
.edge:hover, .edge:focus-within {
  background: var(--surface-2);
  border-color: rgba(255,138,31,.55);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255,138,31,.18),
    0 0 26px -4px rgba(255,138,31,.32),
    0 22px 40px -26px rgba(0,0,0,.9);
}
.edge:hover::before, .edge:focus-within::before { opacity: 1; }
.edge:hover::after, .edge:focus-within::after { left: 120%; }

/* ---------- sections ---------- */

.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(76px, 11vh, 150px) var(--gut);
  position: relative; z-index: 2; background: var(--ink);
}
.section__head { margin-bottom: clamp(38px, 6vh, 68px); }

/* ---------- trust strip ---------- */

.trust { position: relative; z-index: 3; background: var(--surface); border-block: 1px solid var(--line); }
.trust__list {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust__item { padding: 32px 24px 32px 0; position: relative; }
.trust__item + .trust__item { padding-left: 24px; }
.trust__item + .trust__item::before {
  content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--line-hot), transparent);
  transform: skewX(var(--slash));
}
.trust__item b {
  display: block; font-family: var(--display); text-transform: uppercase;
  letter-spacing: .05em; font-size: 1.2rem; margin-bottom: 5px;
}
.trust__item span { color: var(--muted); font-size: .9rem; }

/* ---------- performance grid ---------- */

/* Explicitly three across. auto-fit gave four columns at this max-width, which
   left the 6-card set as an orphaned 4+2. Three divides the content cleanly:
   6 perf cards = 2 full rows, and the service groups of 3/6/3 all land square. */
.perf__grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.perf__card { padding: 38px 30px 42px; }
.perf__num {
  font-family: var(--display); font-size: .82rem; letter-spacing: .22em; color: var(--orange);
}
.perf__card h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.68rem; line-height: 1.02; margin: 12px 0 12px;
}
.perf__card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- services ---------- */

.svc__group { margin-bottom: 44px; }
.svc__grouptitle {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .22em;
  font-size: .84rem; color: var(--orange); margin: 0 0 18px;
}
.svc__grouptitle::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-hot), transparent);
}
.svc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.svc { padding: 22px 24px 26px; }
.svc h4 { font-family: var(--display); text-transform: uppercase; font-size: 1.16rem; margin: 0 0 6px; }
.svc p { color: var(--muted); margin: 0; font-size: .91rem; }

/* ---------- band / marquee ---------- */

.trust + .band { border-top: 0; }

.band {
  position: relative; z-index: 2; overflow: hidden;
  background: var(--surface); border-block: 1px solid var(--line);
  padding: clamp(44px, 7vh, 84px) 0;
}
.band__intro {
  text-align: center; margin: 0 0 26px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .24em;
  font-size: .82rem; color: var(--faint);
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 24px; white-space: nowrap; width: max-content; will-change: transform; }
/* Neon tubing: the stroke is the glass, the drop-shadow is the light it throws.
   drop-shadow traces the stroke's alpha, so the glow hugs the letterform instead
   of blooming a solid slab the way text-shadow would on hollow type.
   Alternating white and orange — no dead grey. */
.marquee__track span {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--tube);
  filter: drop-shadow(0 0 5px rgba(220,232,255,.55)) drop-shadow(0 0 16px rgba(190,215,255,.28));
}
.marquee__track span:nth-child(4n+1) {
  -webkit-text-stroke-color: var(--orange);
  filter: drop-shadow(0 0 5px rgba(255,138,31,.65)) drop-shadow(0 0 18px rgba(255,120,20,.34));
}
.marquee__track i {
  color: var(--orange); font-style: normal; font-size: 1.2rem; opacity: .75;
  filter: drop-shadow(0 0 6px rgba(255,138,31,.6));
}

/* ---------- reviews ---------- */

.reviews__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.review { margin: 0; padding: 34px 30px 28px; }
.review__stars { color: var(--orange); letter-spacing: .18em; font-size: .8rem; margin-bottom: 16px; text-shadow: 0 0 12px rgba(255,138,31,.5); }
.review blockquote { margin: 0 0 18px; font-size: 1.03rem; color: #d3d8dd; line-height: 1.6; }
.review figcaption {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .18em;
  font-size: .8rem; color: var(--orange);
}

/* ---------- locations ---------- */

.loc__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.loc { padding: 42px 34px 38px; }
/* With a single location a full-bleed card reads as empty space. :only-child
   means this un-applies by itself if a second location is ever added back. */
.loc__grid > .loc:only-child { max-width: 700px; }
.loc--primary { background: var(--surface-2); border-color: var(--line-hot); }
.loc__tag {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; color: var(--orange); margin: 0 0 8px;
}
.loc__city { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1; margin: 0 0 14px; }
.loc__addr { font-style: normal; color: var(--muted); margin-bottom: 20px; }
.loc__meta { margin: 0 0 26px; display: grid; gap: 10px; }
.loc__meta div { display: flex; gap: 16px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; }
.loc__meta dt {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .17em;
  font-size: .7rem; color: var(--faint); min-width: 58px;
}
.loc__meta dd { margin: 0; }
.loc__meta a { text-decoration: none; }
.loc__meta a:hover { color: var(--orange); }
.loc__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- footer ---------- */

.foot { position: relative; z-index: 2; background: var(--surface); border-top: 1px solid var(--line); padding: clamp(52px, 7vh, 88px) var(--gut) 36px; }
.foot__top { max-width: var(--maxw); margin: 0 auto 40px; }
.foot__word {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2.3rem, 10vw, 8rem); line-height: .86; margin: 0;
  /* Same neon tubing as the marquee: the stroke is the glass, the drop-shadow
     is the light. Was a dead grey outline, which read as disabled type. */
  color: transparent;
  -webkit-text-stroke: 1.6px var(--tube);
  filter: drop-shadow(0 0 5px rgba(220,232,255,.5)) drop-shadow(0 0 18px rgba(190,215,255,.26));
}
.foot__tag { font-family: var(--display); text-transform: uppercase; letter-spacing: .3em; font-size: .76rem; color: var(--orange); margin: 12px 0 0; }
.foot__cols {
  max-width: var(--maxw); margin: 0 auto; display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line); padding-top: 36px;
}
.foot__cols h4 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .2em;
  font-size: .74rem; color: var(--faint); margin: 0 0 10px;
}
.foot__cols p { margin: 0; color: #c6ccd2; font-size: .93rem; line-height: 1.78; }
.foot__cols a { text-decoration: none; }
.foot__cols a:hover { color: var(--orange); }
.foot__legal {
  max-width: var(--maxw); margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: .78rem;
}

/* ---------- reveals ----------
   Class-driven, not tween-driven. The visible state is a plain CSS class, so
   if the animation never runs (throttled rAF, GSAP failed to load, background
   tab) the content still ends up visible instead of stuck at opacity 0. */

.js .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* last-resort: jump to the visible state with no transition at all */
.js .reveal.is-forced { transition: none !important; opacity: 1 !important; transform: none !important; }


/* ============================================================
   MOBILE SCRUB (.mhero)
   Phones get the portrait frame set. The canvas is a 4:5 panel
   rather than full-bleed: cover-fitting even the portrait crop
   into a ~0.46-ratio phone viewport would still throw away a
   third of the width, so the panel keeps the whole composition
   and the CTA sits beneath it inside the same pinned stage.
   ============================================================ */

.mhero.scrub .hero__stage {
  /* Grid, not flex: the poster and the canvas must share ONE cell so they
     overlap the way they do on desktop. As flex items they became two stacked
     panels and the poster rendered as a duplicate image above the film. */
  display: grid;
  grid-template-areas: "media" "cta";
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: clamp(14px, 3vh, 26px);
}
.mhero.scrub picture { display: contents; }
.mhero.scrub .hero__poster,
.mhero.scrub .hero__canvas {
  grid-area: media;
  position: relative; inset: auto;
  width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* the overlay scrims exist to buy contrast over the footage; on mobile the
   copy sits below the panel, so they are not needed */
.mhero.scrub .hero__scrim,
.mhero.scrub .hero__ctascrim { display: none; }

.mhero.scrub .hero__cta {
  grid-area: cta;
  position: relative; inset: auto;
  max-width: none; padding: 0 var(--gut);
  transform: translateY(14px);
}
.mhero.scrub .hero__stage.cta-in .hero__cta { transform: none; }
.mhero.scrub .hero__ctatitle { font-size: clamp(2rem, 9vw, 2.9rem); margin-bottom: 12px; }
.mhero.scrub .hero__ctacopy { font-size: .98rem; margin-bottom: 18px; }
.mhero.scrub .hero__ctaactions { flex-direction: column; align-items: stretch; }
.mhero.scrub .hero__ctaactions .btn { width: 100%; }

.mhero.scrub .hero__hint { bottom: 14px; }
.mhero.scrub .hero__loader { top: 42%; }

/* anchor targets clear the action bar */
[id] { scroll-margin-top: 90px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .perf__grid, .svc__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .actionbar__links { display: none; }
  .trust__list { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(3)::before { display: none; }
  .trust__item:nth-child(3) { padding-left: 0; }
}

@media (max-width: 700px) {
  .perf__grid, .svc__list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* keep the phone button whole; the wordmark yields space, not the CTA */
  .actionbar { gap: 12px; padding: 10px var(--gut); }
  .actionbar__mark { font-size: .74rem; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; }
  .actionbar .btn--sm { padding: 9px 14px; font-size: .8rem; }
  .trust__list { grid-template-columns: 1fr; }
  .trust__item { padding: 22px 0 !important; border-top: 1px solid var(--line); }
  .trust__item::before { display: none !important; }
  .trust__item:first-child { border-top: 0; }
  .loc { padding: 30px 22px; }
  [id] { scroll-margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .edge:hover { transform: none; }
}

/* Touch devices get no hover lift — it sticks after tap on iOS. */
@media (hover: none) {
  .edge:hover { transform: none; box-shadow: none; border-color: var(--line); background: var(--surface); }
  .edge:hover::before { opacity: 0; }
}