/* MAVE Design — homepage v2 (draft)
   Everything below the kept hero: the dot-grid ground, What We Do, Who we
   work with (pan rail), Featured work, Who I Am, How we work (the peak), and
   Contact. Structure + motion come from the Claude Design "MAVE Home" draft,
   merged onto the live brand system (css/mave-cta.css, css/mave-surface.css).

   Scroll mechanics: js/scrollcraft.js (the engine, untouched) drives pinned
   acts (`data-sc-act`), publishes `--sc-p`, pans the client rail and fires
   the flow reveals (`data-sc-in`). Bespoke section behaviour lives in
   js/mave-home.js and reads the engine's progress.

   Rules honoured: .mave-cta for every button; gradients only via the shared
   tokens; type never above 600; decoration in the empty corners of a card,
   never under body text. */

/* ============================================================ tokens ==== */
:root{
  --mvh-ink:#f5f5f8;
  --mvh-ink-soft:#cdd0e6;      /* 10.8:1 on #1b1b1b */
  --mvh-ink-mute:#8b90bf;      /* 5.0:1  on #1b1b1b */
  --mvh-gutter:clamp(1.25rem,4vw,48px);
  --mvh-max:1360px;
  --mvh-font-display:'Montserrat',Arial,sans-serif;
  --mvh-font-text:'Roboto',Verdana,sans-serif;
  --mvh-ease:cubic-bezier(.16,1,.3,1);
}

/* ============================================== scrollcraft device css ==
   The subset of engine/scrollcraft.css this page needs. The engine's own
   sheet carries a global reset that would fight the Webflow base, so only
   the device states are reproduced here (values retuned to the brand). */
.sc-act--pinned{position:relative;}
.sc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;}
[data-sc-cue]{opacity:0;will-change:opacity,transform;}
.sc-split{display:inline-block;overflow:hidden;vertical-align:top;}
.sc-split--line{display:block;padding-bottom:.14em;margin-bottom:-.14em;}
.sc-split__i{display:inline-block;will-change:transform,opacity;}
.sc-is-split{opacity:1 !important;}
[data-sc-pan]{display:flex;will-change:transform;}
[data-sc-parallax]{will-change:transform;}
[data-sc-in],[data-sc-stagger]>*{
  opacity:0;transform:translate3d(0,44px,0);
  transition:opacity 1s var(--mvh-ease),transform 1s var(--mvh-ease);
}
[data-sc-in].sc-in,[data-sc-stagger]>.sc-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  [data-sc-in],[data-sc-stagger]>*{transform:none;transition-duration:220ms;}
  [data-sc-parallax],[data-sc-pan],.sc-split__i{transform:none !important;}
  [data-sc-act="pan"] .sc-stage{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;}
  [data-sc-pan]>*{scroll-snap-align:center;}
}

/* ====================================================== the ground ===== */
#mvh-grid{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;
}
#mvh-grid.is-on{opacity:1;}
/* The hero already paints its own ground; the kept hero circle sits above. */
.mave-body{position:relative;z-index:1;}

/* ==================== world system on projects + case studies ========== */
/* the heading row: subtitle sits on the heading's baseline, ranged right */
.horizontal-text{align-items:baseline !important;}
.horizontal-text .section-title.center{text-align:right;}
/* the fixed canvas is z:0; page content must sit above it */
body.cs .cs-hero, body.cs main, .mave-hero.sub-hero, .mave-proj-wrap, .proj-main{position:relative;z-index:1;}
/* case-study rule-rows sit tight over the kicker */
.mvh-rule--cs{margin-bottom:14px;padding-top:10px;}
.mvh-rule--projects{max-width:1200px;margin:0 auto 18px;}
/* hero registration ticks */
.mvh-cs-tick{position:absolute;width:16px;height:16px;opacity:.55;z-index:3;pointer-events:none;}
.mvh-cs-tick--tl{top:86px;left:18px;border-top:1px solid rgba(255,255,255,.55);border-left:1px solid rgba(255,255,255,.55);}
.mvh-cs-tick--br{bottom:18px;right:18px;border-bottom:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55);}

/* ---- gradient-safe split titles: spans paint, the clipping parent stops -- */
.mvh-split--grad{background:none !important;-webkit-text-fill-color:initial !important;color:#f5f5f8;}
body.cs .cs-title .mvh-wi{
  background:linear-gradient(120deg,#ffffff 18%,var(--cta-c1) 62%,var(--spectrum-t2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-gradhost-off{background:none !important;-webkit-text-fill-color:#fff !important;}
.mave-hero .mvh-gradhost-off .hero-title .mvh-wi{
  background:linear-gradient(to bottom,#ffffff 12%,#d4d9ff 88%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
/* projects.html: the host is the spectrum text, so each word carries the arc */
.mave-hero .mv-spectrum-text.mvh-gradhost-off .hero-title .mvh-wi{
  background:var(--brand-spectrum-text);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
/* projects ghost numeral + the case-study close chip */
.mvh-ghost-host{position:relative;}
.mvh-ghost--projects{top:-140px;right:var(--mvh-gutter);}
.mvh-direct-wrap{display:flex;justify-content:center;padding:clamp(2rem,5vw,3.5rem) 1.5rem clamp(2.5rem,6vw,4rem);}
.mvh-direct--cs{gap:20px;padding:14px 26px 14px 14px;flex-wrap:wrap;justify-content:center;}
.mvh-direct--cs .mave-cta{flex:none;}
@media (max-width:560px){.mvh-direct--cs{padding:16px;}}

/* ======================================================= hero sizing === */
/* the hero owns the first viewport (the Webflow base caps it at 80svh) */
.mave-hero{min-height:100svh !important;}
/* phones: the hero's opaque ground (spectrum + scrim) used to end on a hard
   edge where the particle field begins. Its last stretch masks out instead, so
   the colour dissolves into the field rather than stopping on a line. */
@media (max-width:767px){
  .mave-hero .hero-overlay.mobile,.mave-hero .background-video.mobile{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 260px),rgba(0,0,0,.55) calc(100% - 120px),transparent 100%);
    mask-image:linear-gradient(180deg,#000 calc(100% - 260px),rgba(0,0,0,.55) calc(100% - 120px),transparent 100%);}
}
/* phones: no circle at all — the hero is a clean column, the ring is desktop's */
@media (max-width:767px){
  .mave-hero-circle{
    width:100% !important;min-width:0 !important;max-width:none !important;
    height:auto !important;border:none !important;border-radius:0 !important;
    background:none !important;
  }
  .mvh-scribe{display:none;}
}

/* ======================================================= primitives ==== */
.mvh-wrap{max-width:var(--mvh-max);margin:0 auto;padding-left:var(--mvh-gutter);padding-right:var(--mvh-gutter);box-sizing:border-box;}
.mvh-section{position:relative;}
.mvh-kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-family:var(--mvh-font-text);font-weight:400;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
}
/* the lead rule is a static accent, so warm at rest is correct here */
.mvh-kicker::before{content:"";display:block;width:26px;height:2px;background:var(--cta-grad-hover);flex:none;}
.mvh-kicker span{
  background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-h2{
  margin:0;font-family:var(--mvh-font-display);font-weight:600;
  font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.08;letter-spacing:-.018em;
  color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);background:none;text-transform:none;
  text-wrap:balance;
}
.mvh-h2 .mvh-grad{
  background:var(--brand-spectrum-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-h2 .mvh-grad--cool{
  background:linear-gradient(115deg,var(--cta-c1) 0%,var(--spectrum-t1) 45%,var(--cta-c2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-lead{
  margin:0;font-family:var(--mvh-font-text);font-weight:300;
  font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.7;color:var(--mvh-ink-soft);-webkit-text-fill-color:var(--mvh-ink-soft);
  max-width:62ch;text-wrap:pretty;
}
.mvh-num{
  font-family:var(--mvh-font-display);font-weight:600;font-size:.95rem;letter-spacing:.08em;
  background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-h3{
  margin:0;font-family:var(--mvh-font-display);font-weight:600;
  font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:1.15;letter-spacing:-.015em;
  color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);background:none;text-transform:none;
}
.mvh-p{margin:0;font-family:var(--mvh-font-text);font-weight:300;font-size:.95rem;line-height:1.7;color:var(--mvh-ink-soft);-webkit-text-fill-color:var(--mvh-ink-soft);text-wrap:pretty;}
.mvh-section img{display:block;}

/* word-split headline reveal (bespoke: keeps gradient child spans intact) */
.mvh-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em;}
.mvh-wi{display:inline-block;transform:translateY(115%);transition:transform .85s cubic-bezier(.22,1,.36,1);}
.mvh-split.is-in .mvh-wi{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.mvh-wi{transform:none !important;transition:none !important;}}

/* marquees */
@keyframes mvh-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mvh-marquee-rev{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.mvh-marquee{display:flex;align-items:center;width:max-content;will-change:transform;animation:mvh-marquee var(--mvh-dur,26s) linear infinite;}
.mvh-marquee--rev{animation-name:mvh-marquee-rev;}
@media (prefers-reduced-motion:reduce){.mvh-marquee{animation:none;}}

/* card shell: brand surface from mave-surface.css (.mv-card) + our shadow */
.mvh-card{border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);}

/* ================================================== the preloader ====== */
/* the real MAVE sting, embedded from /sting/ (first visit per session) */
#mvh-loader{
  position:fixed;inset:0;z-index:200;background:#070708;
  opacity:1;transition:opacity .5s ease;
}
#mvh-loader.is-done{opacity:0;pointer-events:none;}
#mvh-loader iframe{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* cover: the 16:9 stage fills any viewport, letterbox stays outside */
  width:max(var(--mv-vw,100vw),178vh);height:max(100vh,56.5vw);
  border:0;display:block;pointer-events:none;background:#070708;
}
#mvh-loader-skip{
  position:absolute;right:26px;bottom:22px;z-index:2;
  font-family:var(--mvh-font-text);font-weight:300;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);
  background:none;border:1px solid rgba(255,255,255,.16);border-radius:40px;padding:10px 20px;cursor:pointer;
  transition:color .3s ease,border-color .3s ease;
}
#mvh-loader-skip:hover{color:#ff7a2e;-webkit-text-fill-color:#ff7a2e;border-color:rgba(255,101,7,.5);}

/* ============================================== industrial texture ===== *//* ============================================== industrial texture ===== */
/* corner stamps on the hero (the design baseline's survey marks) */
.mvh-hero-stamps{position:absolute;inset:0;pointer-events:none;z-index:6;}
.mvh-stamp{
  position:absolute;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mvh-font-text);font-weight:300;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);
  opacity:0;transition:opacity 1.2s ease 1.4s;
}
html.mv-play .mvh-stamp{opacity:1;}
.mvh-stamp--tl{top:30px;left:34px;}
.mvh-stamp--tr{top:30px;right:34px;}
.mvh-stamp--bl{bottom:26px;left:34px;}
.mvh-stamp--br{bottom:26px;right:34px;}
@media (max-width:900px){.mvh-hero-stamps{display:none;}}
/* section rule-rows: hairline + index + a stamp. The quiet counterpart of the
   three gradient kickers; every section carries exactly one of the two. */
.mvh-rule{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-top:14px;margin-bottom:20px;border-top:1px solid rgba(255,255,255,.09);
  font-family:var(--mvh-font-text);font-weight:300;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);
  font-variant-numeric:tabular-nums;
}
.mvh-contact-head .mvh-rule{align-self:stretch;justify-content:space-between;}
/* the sting's opening beat: the hero circle scribes itself in */
/* User-unit stroke on purpose: vector-effect:non-scaling-stroke silently broke
   this ring in Chromium (stroke stuck at ~1px, gradient ignored), so the width
   and dash run in viewBox units instead. 0.45u ≈ 3.3px on the 720px circle;
   307.2 is the true circumference of r=48.9, driving the scribe-in draw. */
.mvh-scribe{
  position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);pointer-events:none;overflow:visible;
  z-index:3; /* above the circle's overlay scrim (z:1) and gradient layers */
  filter:drop-shadow(0 0 14px rgba(155,138,224,.55));
}
.mvh-scribe circle{
  fill:none;stroke:url(#mvh-ring-grad);stroke-width:.36;stroke-linecap:round;
  stroke-dasharray:307.2;stroke-dashoffset:307.2;transform:rotate(-90deg);transform-origin:50% 50%;
}
html.mv-play .mvh-scribe circle{transition:stroke-dashoffset 1.6s cubic-bezier(.6,.05,.3,1) .15s;stroke-dashoffset:0;}
@media (prefers-reduced-motion:reduce){.mvh-scribe circle{stroke-dashoffset:0;transition:none;}.mvh-stamp{opacity:1;transition:none;}}
/* the hero circle's CSS border hands the job to the scribe ring */
.mave-hero-circle{border-color:transparent !important;}

/* ghost index numerals: the layer behind each rule-row section */
.mvh-ghost{
  position:absolute;z-index:0;pointer-events:none;line-height:.8;
  font-family:var(--mvh-font-display);font-weight:600;font-size:clamp(7rem,17vw,15rem);
  color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
  font-variant-numeric:tabular-nums;
}
.mvh-ghost--clients{top:34px;right:var(--mvh-gutter);}
.mvh-ghost--work{top:-30px;right:0;}
.mvh-ghost--contact{top:-40px;left:calc(var(--mvh-gutter) * -0.25);}
.mvh-contact-wrap{position:relative;}
#work{position:relative;}
/* layered plates: a second hairline frame inside every big card */
.mvh-card{position:relative;}
.mvh-card::after{
  content:"";position:absolute;inset:9px;border-radius:12px;pointer-events:none;
  border:1px solid rgba(255,255,255,.045);
}
.mvh-ind{box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 30px 80px rgba(0,0,0,.45);}
/* registration ticks on the featured shots + the portrait */
.mvh-shot--main::before,.mvh-shot--main::after{
  content:"";position:absolute;width:14px;height:14px;z-index:2;pointer-events:none;opacity:.5;
}
.mvh-shot--main::before{top:10px;left:10px;border-top:1px solid rgba(255,255,255,.55);border-left:1px solid rgba(255,255,255,.55);}
.mvh-shot--main::after{bottom:10px;right:10px;border-bottom:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55);}


/* ================================================= Why MAVE Design ===== */
/* the stage sticks for the length of .mvh-why-gap: the tagline lights word by
   word while the diamond forms on .mvh-proc-canvas (js/mave-world.js), the
   paragraph arrives, then the phase cards climb over it while initWhy blurs
   the whole group out. The group is centered in the viewport. */
#why{padding-top:0;}
.mvh-why-stage{
  position:sticky;top:0;height:100svh;box-sizing:border-box;overflow:clip;
  display:flex;align-items:center;justify-content:center;
  padding:72px var(--mvh-gutter) 24px;
}
.mvh-why-inner{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  width:100%;max-width:var(--mvh-max);will-change:opacity,filter,transform;
}
.mvh-why-head{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:960px;text-align:center;flex:none;
}
.mvh-why-head .mvh-kicker{margin:0;}
/* centered kicker gets a matching trailing dash so it reads as balanced */
.mvh-why-head .mvh-kicker::after{content:"";display:block;width:26px;height:2px;background:var(--cta-grad-hover);flex:none;}
.mvh-why-quote{
  font-size:clamp(2rem,4vw,3.8rem);line-height:1.08;letter-spacing:-.02em;max-width:16ch;margin:0 auto;
  text-wrap:balance;color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);background:none;
}
.mvh-why-quote em{font-style:italic;background:linear-gradient(120deg,var(--cta-h1) 0%,var(--spectrum-t2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
/* the diamond, above the words */
.mvh-proc-visual{
  position:relative;flex:none;width:min(100%,820px);height:clamp(220px,36svh,440px);
  display:flex;align-items:center;justify-content:center;
}
.mvh-proc-canvas{width:100%;height:100%;display:block;}
/* the paragraph arrives once the gem has formed (initWhyStage adds .is-in) */
.mvh-why-phil{
  flex:none;max-width:640px;margin:0 auto;text-align:center;
  font-size:clamp(1rem,1.2vw,1.15rem);
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .8s var(--mvh-ease);
}
.mvh-why-phil.is-in{opacity:1;transform:none;}
.mvh-why-gap{height:210svh;}
@media (max-height:760px){
  .mvh-why-stage{padding-top:64px;}
  .mvh-why-inner{gap:12px;}
  .mvh-why-head{gap:10px;}
  .mvh-proc-visual{height:clamp(180px,30svh,300px);}
  .mvh-why-quote{font-size:clamp(1.8rem,3.6vw,3rem);}
  .mvh-why-phil{font-size:.95rem;line-height:1.5;}
}
/* interactive 3D icon (the building on Who we build for): the engine's magnet
   drives the wrapper's transform and its tilt drives the img, so the resting
   pose lives in rotate/translate and a slow float the engine never touches */
.mvh-3d{position:absolute;display:block;width:clamp(70px,9vw,130px);pointer-events:none;}
.mvh-3d img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));}
.mvh-3d--building{top:34%;left:-26%;width:clamp(56px,7vw,104px);rotate:6deg;animation:mvh-float 9.5s ease-in-out infinite;}
@keyframes mvh-float{0%,100%{translate:0 0;}50%{translate:0 -14px;}}
@media (prefers-reduced-motion:reduce){.mvh-3d{animation:none !important;}}
@media (max-width:900px){.mvh-3d--building{display:none;}}
.mvh-why-cards{
  position:relative;z-index:2;
  max-width:var(--mvh-max);margin:-34svh auto 0;   /* the cards climb over the stuck stage while initWhy blurs it out */
  padding:0 var(--mvh-gutter) clamp(3rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start;
}
.mvh-why-cards>[data-plx]{will-change:transform;}
.mvh-why-cards>[data-plx]:nth-child(2){margin-top:110px;}
.mvh-why-cards>[data-plx]:nth-child(3){margin-top:220px;}
.mvh-why-card{display:flex;flex-direction:column;overflow:hidden;}
.mvh-why-media{
  position:relative;overflow:hidden;height:300px;
  background:#101018;
}
.mvh-why-media--cool{background:radial-gradient(120% 90% at 100% 0%,rgba(131,157,209,.16),transparent 55%),#101018;}
.mvh-why-media--warm{background:radial-gradient(120% 90% at 0% 100%,rgba(255,101,7,.12),transparent 55%),#101018;}
.mvh-why-media--philly{
  background:radial-gradient(140% 110% at 50% 115%,rgba(255,101,7,.22),rgba(207,3,50,.08) 45%,transparent 72%),#101018;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.mvh-why-media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) .8px,transparent 1px);background-size:9px 9px;opacity:.06;
}
.mvh-why-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#101018 0%,transparent 16%,transparent 84%,#101018 100%);
}
.mvh-why-media--philly::after{background:linear-gradient(0deg,#101018 4%,transparent 40%);}
.mvh-chipfield{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px;
  transform:rotate(-4deg) scale(1.18);
}
.mvh-chipfield--r{transform:rotate(4deg) scale(1.18);}
.mvh-chipfield .mvh-marquee{gap:14px;}
.mvh-chip{
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:40px;
  border:1px solid rgba(255,255,255,.16);background:#1c1c2a;
  font-family:var(--mvh-font-display);font-weight:500;font-size:14px;white-space:nowrap;
  color:#e7e8f0;-webkit-text-fill-color:#e7e8f0;
}
.mvh-chip img{width:17px;height:17px;flex:none;}
/* card copy tiers: phase name, one positioning line, the paragraph */
.mvh-why-lead{margin:-4px 0 0;font-family:var(--mvh-font-text);font-weight:400;font-size:1rem;line-height:1.5;color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);}
.mvh-why-copy{display:flex;flex-direction:column;gap:14px;padding:30px 30px 34px;border-top:1px solid rgba(255,255,255,.08);}
/* Philly card */
.mvh-philly-canvas{position:absolute;inset:0;width:100%;height:100%;}
.mvh-philly-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%;display:block;}
.mvh-philly-word{
  position:relative;z-index:1;font-family:var(--mvh-font-display);font-weight:600;line-height:1;white-space:nowrap;
}
.mvh-philly-word--stroke{
  font-size:clamp(3rem,4.6vw,4.4rem);letter-spacing:.03em;
  color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px rgba(139,144,191,.6);
}
.mvh-philly-word--grad{
  font-size:clamp(1.8rem,2.8vw,2.6rem);letter-spacing:.1em;
  background:var(--brand-spectrum-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-philly-meta{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;padding:0 16px;
  font-family:var(--mvh-font-text);font-size:.66rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);
}
.mvh-dot{width:4px;height:4px;border-radius:50%;background:var(--cta-h1);flex:none;display:inline-block;}
.mvh-philly-event{
  position:relative;z-index:1;font-family:var(--mvh-font-text);font-size:.69rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  color:#ff9a5c;-webkit-text-fill-color:#ff9a5c;transition:opacity .5s;
}

/* ================================================= Who we work with ==== */
#clients .sc-stage{
  box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3svh,40px);
  padding-top:64px;
}
#clients .mvh-h2{font-size:clamp(2rem,3.8vw,3.3rem);}
@media (max-height:760px){#clients .mvh-clients-intro .mvh-lead{display:none;}#clients .sc-stage{padding-top:56px;}}
.mvh-clients-head{
  width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
}
.mvh-clients-head .mvh-kicker{margin-bottom:16px;}
.mvh-clients-intro{display:flex;flex-direction:column;max-width:640px;}
.mvh-clients-head{position:relative;}
.mvh-clients-head .mvh-3d--building{top:-8px;right:4%;left:auto;bottom:auto;width:clamp(64px,7.5vw,112px);rotate:6deg;animation:mvh-float 8s ease-in-out infinite;}
@media (max-width:900px){.mvh-clients-head .mvh-3d--building{display:block;right:0;top:-26px;width:60px;}}
.mvh-clients-intro .mvh-lead{margin-top:14px;max-width:56ch;}
/* the pan ends with the last card ranged left and open ground on the right,
   where the arrow turns to point down (js/mave-world.js) */
.mvh-rail{gap:28px;padding:0 clamp(340px,34vw,680px) 0 clamp(260px,32vw,560px);width:max-content;}
.mvh-ind{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  width:min(860px,80vw);height:clamp(360px,50svh,560px);
  border-radius:20px;border:1px solid rgba(255,255,255,.12);
  background-color:var(--mv-panel);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.mvh-ind--1{background-image:radial-gradient(120% 90% at 100% 0%,rgba(131,157,209,.15),transparent 55%);}
.mvh-ind--2{background-image:radial-gradient(120% 90% at 0% 0%,rgba(91,75,163,.18),transparent 55%);}
.mvh-ind--3{background-image:radial-gradient(140% 110% at 100% 110%,rgba(255,101,7,.16),rgba(207,3,50,.06) 45%,transparent 72%);}
.mvh-ind::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) .8px,transparent 1px);background-size:9px 9px;opacity:.05;
}
.mvh-ind-icon{
  position:absolute;top:-28px;right:-18px;transform:rotate(12deg);opacity:.08;
  transition:opacity .6s ease,transform .6s ease;pointer-events:none;
}
.mvh-ind:hover .mvh-ind-icon{opacity:.26;transform:rotate(6deg) scale(1.07);}
.mvh-ind-shine{
  position:absolute;top:0;bottom:0;left:0;width:34%;
  transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);pointer-events:none;
}
.mvh-ind.is-shine .mvh-ind-shine{transition:transform .9s ease;transform:translateX(520%) skewX(-18deg);}
.mvh-ind-top{position:relative;display:flex;flex-direction:column;gap:14px;padding:44px 48px 0;}
.mvh-ind-top .mvh-num{font-size:1.05rem;}
.mvh-ind-top .mvh-h3{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.08;}
.mvh-ind-top .mvh-lead{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.65;max-width:620px;}
.mvh-ind-bottom{position:relative;display:flex;flex-direction:column;gap:16px;padding:0 0 32px;}
.mvh-ind-bottom .mvh-marquee{gap:14px;}
.mvh-ind-bottom .mvh-marquee--logos{gap:56px;}
.mvh-tag{
  font-family:var(--mvh-font-text);font-size:.95rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:#a6abd4;-webkit-text-fill-color:#a6abd4;padding:15px 28px;border-radius:40px;
  border:1px solid rgba(255,255,255,.12);background:#101018;
}
/* one white-silhouette treatment for every client mark, same as the hero marquee */
.mvh-ind-logo{height:44px;width:auto;opacity:.72;filter:brightness(0) invert(1);}
.mvh-ind-logo--inv{opacity:.78;}
.mvh-ind-word{
  font-family:var(--mvh-font-display);font-weight:600;font-size:1.5rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--mvh-ink-soft);-webkit-text-fill-color:var(--mvh-ink-soft);opacity:.75;
}
.mvh-ind::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--mv-panel) 0%,transparent 10%,transparent 90%,var(--mv-panel) 100%);
}
.mvh-ind-top,.mvh-ind-bottom{z-index:1;}

/* ====================================================== Featured ======= */
#work{padding-top:clamp(5rem,10vw,8.5rem);padding-bottom:clamp(4.5rem,9vw,8rem);}
.mvh-work-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:clamp(1.8rem,3.4vw,3rem);
}
.mvh-work-head .mvh-kicker{margin-bottom:18px;}
.mvh-feats{display:flex;flex-direction:column;gap:clamp(3rem,5vw,4.5rem);}
/* the cards stack: each one rides up and settles over the last */
@media (min-width:861px){
  .mvh-feats .mvh-feat{position:sticky;}
  .mvh-feats .mvh-feat:nth-of-type(1){top:84px;}
  .mvh-feats .mvh-feat:nth-of-type(2){top:100px;}
  .mvh-feats .mvh-feat:nth-of-type(3){top:116px;}
  .mvh-feats .mvh-feat:nth-of-type(4){top:132px;}
  .mvh-feats .mvh-feat:nth-of-type(5){top:148px;}
  /* an opaque ground so the card underneath never bleeds through the dots */
  .mvh-feats .mvh-feat.mv-card{background-color:#14141f;box-shadow:0 -14px 44px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.45);}
}
.mvh-feat{
  padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:26px;
  border-radius:20px;
}
/* the dot-matrix ground runs across the whole card here (the collage covers
   the top-right corner where the default mask would put it); it thins toward
   the bottom-left where the copy sits */
.mvh-feat.mv-card::before{
  opacity:.16;background-size:9px 9px;
  -webkit-mask-image:linear-gradient(228deg,#000 0%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.35) 100%);
          mask-image:linear-gradient(228deg,#000 0%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.35) 100%);
}
.mvh-collage{
  display:grid;grid-template-columns:1.9fr 1fr;gap:14px;
  transition:grid-template-columns .8s var(--mvh-ease);
  background:none !important;
}
.mvh-feat:hover .mvh-collage,.mvh-feat:focus-within .mvh-collage{grid-template-columns:2.6fr 1fr;}
.mvh-shot{
  position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.10);
  background:#101018;
}
.mvh-shot--main{aspect-ratio:16/10;}
.mvh-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1s var(--mvh-ease);}
.mvh-feat:hover .mvh-shot img,.mvh-feat:focus-within .mvh-shot img{transform:scale(1.05);}
.mvh-shots-side{display:flex;flex-direction:column;gap:14px;min-height:0;}
.mvh-shots-side .mvh-shot{flex:1;min-height:0;}
.mvh-shots-side .mvh-shot img{position:absolute;inset:0;height:100%;}
.mvh-shot-cta{
  position:absolute;right:18px;bottom:18px;
  font-size:.75rem;padding:12px 22px;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;
}
.mvh-feat:hover .mvh-shot-cta,.mvh-feat:focus-within .mvh-shot-cta{opacity:1;transform:translateY(0);}
.mvh-feat-meta{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:start;}
.mvh-feat-id{display:flex;flex-direction:column;gap:10px;}
.mvh-feat-tag{
  font-family:var(--mvh-font-text);font-size:.78rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);
}
.mvh-feat-title{
  font-family:var(--mvh-font-display);font-weight:600;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.06;letter-spacing:-.02em;
  color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);background-image:none;
  transition:color .3s ease;
}
/* an interactive element: cool/neutral at rest, warm on contact */
a.mvh-feat-title:hover,a.mvh-feat-title:focus-visible{
  background-image:var(--cta-grad-hover);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-feat-desc{display:flex;flex-direction:column;gap:16px;}
.mvh-feat-desc .mvh-p{font-size:.97rem;max-width:620px;}
.mvh-pills{display:flex;flex-wrap:wrap;gap:8px;}
.mvh-pill{
  font-family:var(--mvh-font-text);font-size:.72rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--mvh-ink-soft);-webkit-text-fill-color:var(--mvh-ink-soft);
  padding:8px 15px;border-radius:40px;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 120% at 100% 0%,rgba(131,157,209,.10),transparent 60%),var(--mv-panel);
}
.mvh-work-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.25rem;margin:clamp(2.5rem,5vw,4rem) 0 0;}

/* ====================================================== Who I Am ======= */
#About-Me .sc-stage{
  box-sizing:border-box;position:sticky;display:flex;align-items:center;overflow:hidden;
}
/* the photograph is the stage: full bleed, he faces into the open right side */
.mvh-portrait--full{
  position:absolute;inset:0;margin:0;background:var(--mv-panel);
  opacity:0;transform:scale(1.045);
  transition:opacity 1.1s ease,transform 1.6s var(--mvh-ease);
}
#About-Me .sc-stage.is-bg .mvh-portrait--full{opacity:1;transform:none;}
.mvh-portrait--full img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:16% 28%;
  filter:grayscale(1) contrast(1.12) brightness(.58);display:block;
}
.mvh-portrait-wash{position:absolute;inset:0;background:var(--brand-spectrum);opacity:.52;mix-blend-mode:color;}
/* density only where the copy sits: a right-side column plus a bottom band */
.mvh-portrait-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(16,16,24,0) 30%, rgba(16,16,24,.66) 55%, rgba(16,16,24,.94) 80%),
    linear-gradient(0deg, rgba(16,16,24,.66) 0%, transparent 30%);
}
.mvh-portrait-dots{
  position:absolute;right:0;top:0;width:55%;height:60%;
  background-image:radial-gradient(rgba(255,255,255,.9) .8px,transparent 1px);background-size:8px 8px;opacity:.1;
  -webkit-mask-image:linear-gradient(228deg,#000 0%,rgba(0,0,0,.3) 30%,transparent 52%);mask-image:linear-gradient(228deg,#000 0%,rgba(0,0,0,.3) 30%,transparent 52%);
}
.mvh-portrait-cap{position:absolute;left:clamp(20px,3vw,44px);bottom:26px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;}
.mvh-portrait-cap b{font-family:var(--mvh-font-display);font-weight:600;font-size:1.06rem;color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);}
.mvh-portrait-cap span{font-family:var(--mvh-font-text);font-size:.78rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--mvh-ink-soft);-webkit-text-fill-color:var(--mvh-ink-soft);}
/* the content column lives in the dead space he looks into */
.mvh-story{
  position:relative;z-index:1;width:100%;
  display:flex;justify-content:flex-end;
  padding-right:max(var(--mvh-gutter),calc((100vw - 1320px) / 2));
  padding-left:var(--mvh-gutter);box-sizing:border-box;
}
.mvh-story-left{display:flex;flex-direction:column;gap:28px;max-width:560px;}
.mvh-story-left .mvh-kicker{margin:0;}
.mvh-quote{
  margin:0;padding:0;border:0;
  font-family:var(--mvh-font-display);font-weight:600;
  font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.22;letter-spacing:-.015em;max-width:20ch;
  color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);background:none;
}
.mvh-quote em{font-style:italic;background:linear-gradient(120deg,var(--cta-h1) 0%,var(--spectrum-t2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.is-scrub{background:none;}
.is-scrub em{background:none;}
/* shared word scrub (Who I Am quote, Why MAVE Design tagline): splitWords in
   js/mave-home.js wraps the words, scrubWords lights them */
.is-scrub .w{
  opacity:.12;filter:blur(4px);transition:opacity .1s linear;
  background:linear-gradient(115deg,var(--cta-c1) 0%,var(--spectrum-t1) 60%,var(--mvh-ink-soft) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
/* lifted warm arc: the raw hover red measures ~2:1 over the photograph */
.is-scrub .w-em{font-style:italic;background:linear-gradient(120deg,var(--cta-h1) 0%,var(--spectrum-t2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.mvh-story-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s var(--mv-ease,cubic-bezier(.22,.61,.36,1));}
.mvh-story.is-in .mvh-story-reveal{opacity:1;transform:none;}
.mvh-story.is-in .mvh-story-reveal:nth-of-type(2){transition-delay:.15s;}
.mvh-sig img{width:220px;display:block;}
.mvh-story-body{display:flex;flex-direction:column;gap:18px;}
.mvh-story-body .mvh-p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.75;max-width:46ch;}
.mvh-story-body .mave-cta{align-self:flex-start;}
.mvh-portrait--full::before,.mvh-portrait--full::after{
  content:"";position:absolute;width:14px;height:14px;z-index:2;pointer-events:none;opacity:.5;
}
.mvh-portrait--full::before{top:14px;left:14px;border-top:1px solid rgba(255,255,255,.5);border-left:1px solid rgba(255,255,255,.5);}
.mvh-portrait--full::after{top:14px;right:14px;border-top:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);}
.mvh-accolades{position:relative;padding:22px 0;margin:0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden;background:rgba(16,16,24,.42);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mvh-accolades .mvh-marquee{
  gap:44px;--mvh-dur:38s;
  font-family:var(--mvh-font-text);font-size:.8rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);
}
.mvh-acc-grad{background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.mvh-acc-dot{color:var(--cta-h1);-webkit-text-fill-color:var(--cta-h1);}

/* the coda card under the phase cards: a link to /offerings, so the brand
   rule applies: cool at rest, warm on contact. It lives inside #why, whose
   sticky stage (positioned, z auto) paints above static content and the cards
   sit at z 2, so the link needs its own layer above both or clicks never
   reach it. */
.mvh-after{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:14px;
  margin:clamp(2.5rem,5vw,4rem) auto 0;width:100%;max-width:var(--mvh-max);box-sizing:border-box;
  padding:16px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background:radial-gradient(120% 120% at 100% 0%,rgba(131,157,209,.10),transparent 60%),radial-gradient(120% 120% at 100% 100%,rgba(255,101,7,.08),transparent 60%),var(--mv-panel);
  font:inherit;text-align:left;cursor:pointer;
  transition:border-color .25s ease,transform .25s ease;
}
.mvh-after:hover{border-color:rgba(255,255,255,.22);transform:translateY(-1px);}
/* as an <a>: the base anchor rule clips backgrounds to text and the site-wide
   hover paints a warm gradient; pin the surface in both states (see memory) */
a.mvh-after{-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-text-fill-color:initial;color:inherit;text-decoration:none;}
a.mvh-after:hover{background:radial-gradient(120% 120% at 100% 0%,rgba(131,157,209,.14),transparent 60%),radial-gradient(120% 120% at 100% 100%,rgba(255,101,7,.10),transparent 60%),var(--mv-panel);}
.mvh-after:focus-visible{outline:2px solid var(--cta-h1);outline-offset:3px;}
.mvh-after-label{
  font-family:var(--mvh-font-display);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mvh-after:hover .mvh-after-label{background:var(--cta-grad-hover);-webkit-background-clip:text;background-clip:text;}
.mvh-after .mvh-p{font-size:.85rem;line-height:1.55;margin:0;}
.mvh-after-hint{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex:none;
  font-family:var(--mvh-font-text);font-weight:400;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--cta-c1);-webkit-text-fill-color:var(--cta-c1);transition:color .25s ease;
}
.mvh-after-hint svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.mvh-after:hover .mvh-after-hint{color:var(--cta-h1);-webkit-text-fill-color:var(--cta-h1);}
.mvh-after:hover .mvh-after-hint svg{transform:translateX(4px);}
@media (max-width:640px){.mvh-after{flex-wrap:wrap;}.mvh-after-hint{margin-left:0;}}
@media (prefers-reduced-motion:reduce){.mvh-after,.mvh-after-hint svg{transition:none;}.mvh-after:hover{transform:none;}.mvh-after:hover .mvh-after-hint svg{transform:none;}}

/* ====================================================== Contact ======== */
#contact{padding:clamp(5rem,10vw,8.5rem) 0 clamp(3rem,6vw,5rem);}
.mvh-contact-head{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:720px;margin:0 auto;text-align:center;}
.mvh-contact-head .mvh-h2{font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.06;letter-spacing:-.02em;}
.mvh-contact-head .mvh-lead{text-align:center;}
.mvh-contact-form{margin-top:clamp(1rem,2vw,1.5rem);}
/* testimonials follow the form again, scaled down from their hero-size default */
.mvh-contact-form .mave-t-card{flex:0 0 min(760px,78vw);min-height:clamp(300px,26vw,380px);}
.mvh-contact-form .mave-t-quote{font-size:clamp(1rem,1.5vw,1.3rem);max-width:54ch;}
.mvh-contact-form .mave-t-section{padding:44px 0 56px;}
/* direct-line personality row */
.mvh-direct{
  display:inline-flex;align-items:center;gap:16px;margin-top:10px;
  padding:10px 22px 10px 12px;border-radius:60px;border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(120% 140% at 100% 0%,rgba(131,157,209,.10),transparent 60%),var(--mv-panel);
}
.mvh-direct-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;display:block;background:#101018;}
.mvh-direct-copy{font-family:var(--mvh-font-text);font-weight:300;font-size:.88rem;line-height:1.4;color:var(--mvh-ink-soft);-webkit-text-fill-color:var(--mvh-ink-soft);text-align:left;}
.mvh-direct-copy b{font-weight:600;color:var(--mvh-ink);-webkit-text-fill-color:var(--mvh-ink);}
.mvh-direct-coffee{width:44px;flex:none;rotate:-8deg;display:block;}
.mvh-direct-coffee img{width:100%;height:auto;display:block;}
@media (max-width:560px){.mvh-direct{border-radius:24px;padding:12px 16px;}.mvh-direct-coffee{display:none;}}
/* the shared carousel sets cards to 100% under 768px (edge to edge); on this
   page the active card keeps a gutter so the next card still peeks */
@media (max-width:768px){
  .mvh-contact-form .mave-t-card{flex:0 0 calc(100% - 2.5rem);border-radius:16px;}
}

/* ==================================================== responsive ======= */
@media (max-width:1024px){
  .mvh-why-cards{grid-template-columns:1fr 1fr;}
  .mvh-why-cards>[data-plx]:nth-child(3){margin-top:0;grid-column:1/-1;}
  /* unpinned, but the photograph stays the ground: one full viewport, content low-right */
  #About-Me[data-sc-act]{height:auto !important;}
  #About-Me .sc-stage{position:relative;height:auto;min-height:100svh;align-items:flex-end;padding:clamp(4rem,9vw,7rem) 0 90px;}
  .mvh-portrait--full img{object-position:22% 30%;}
  .mvh-portrait-scrim{background:linear-gradient(0deg, rgba(16,16,24,.9) 0%, rgba(16,16,24,.55) 45%, transparent 78%);}
}
@media (max-width:860px){
  .mvh-why-cards{grid-template-columns:1fr;margin-top:-26svh;}
  .mvh-why-cards>[data-plx]:nth-child(2){margin-top:0;}
  .mvh-clients-head{flex-direction:column;align-items:flex-start;}
  /* the rail stays pinned and pans under the thumb on phones too; everything
     is sized so head + card fit one phone viewport */
  #clients .sc-stage{gap:20px;padding-top:72px;}
  #clients .mvh-h2{font-size:clamp(1.8rem,8vw,2.4rem);}
  .mvh-clients-intro .mvh-lead{font-size:.92rem;line-height:1.55;margin-top:10px;}
  .mvh-rail{gap:16px;padding:0 clamp(90px,26vw,140px) 0 var(--mvh-gutter);}
  .mvh-ind{width:min(520px,84vw);height:clamp(330px,46svh,520px);border-radius:16px;}
  .mvh-ind-top{padding:26px 24px 0;gap:10px;}
  .mvh-ind-top .mvh-h3{font-size:clamp(1.5rem,6.4vw,2rem);}
  .mvh-ind-top .mvh-lead{font-size:.95rem;line-height:1.5;}
  .mvh-ind-bottom{padding-bottom:22px;gap:12px;}
  .mvh-tag{font-size:.78rem;padding:11px 18px;}
  .mvh-ind-logo{height:32px;}
  .mvh-ind-word{font-size:1.1rem;}
  .mvh-collage{grid-template-columns:1fr;}
  .mvh-feat:hover .mvh-collage,.mvh-feat:focus-within .mvh-collage{grid-template-columns:1fr;}
  .mvh-shots-side{flex-direction:row;}
  .mvh-shots-side .mvh-shot{aspect-ratio:16/10;}
  .mvh-shot-cta{opacity:1;transform:none;}
  .mvh-feat-meta{grid-template-columns:1fr;gap:18px;}
  .mvh-work-head{flex-direction:column;align-items:flex-start;}
  .mvh-why-stage{padding:64px var(--mvh-gutter) 16px;}
  .mvh-proc-visual{height:clamp(200px,32svh,320px);}
  .mvh-why-quote{font-size:clamp(1.9rem,8vw,2.7rem);max-width:none;}
  .mvh-why-gap{height:150svh;}
}
@media (prefers-reduced-motion:reduce){
  .mvh-why-inner{opacity:1 !important;filter:none !important;transform:none !important;}
  .mvh-why-cards>[data-plx]{transform:none !important;}
  .is-scrub .w{opacity:1;filter:none;}
  .mvh-why-phil{opacity:1 !important;transform:none !important;}
  .mvh-story-reveal{opacity:1;transform:none;transition:none;}
  .mvh-portrait--full{opacity:1;transform:none;transition:none;}
  .mvh-after{opacity:1;transform:none;}
  .mvh-collage,.mvh-shot img,.mvh-shot-cta{transition:none;}
  .mvh-shot-cta{opacity:1;transform:none;}
}


/* ================================================ Sept 2026 copy deck === */
/* who we build for: the optional fourth line, quieter than the lead */
.mvh-lead--note{margin-top:10px;font-size:.92rem;color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);}
/* how we work: one line under the heading; drops on short viewports (pinned stage) */
/* who I am: the credibility line */
.mvh-story-cred{margin-top:14px;color:var(--mvh-ink-mute);-webkit-text-fill-color:var(--mvh-ink-mute);}
/* free audit band */
#audit{padding:clamp(1rem,2vw,2rem) 0 clamp(4rem,8vw,6rem);}
.mvh-audit{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,48px);
  padding:clamp(24px,3.5vw,40px) clamp(24px,4vw,48px);
}
.mvh-audit-copy{max-width:60ch;}
.mvh-audit .mvh-h3{font-size:clamp(1.35rem,2.2vw,1.9rem);}
.mvh-audit .mvh-p{margin:10px 0 0;}
.mvh-audit .mave-cta{flex:none;}
@media (max-width:760px){.mvh-audit{flex-direction:column;align-items:flex-start;}}
/* contact: the two standard CTAs under the lead, above the intake form */
.mvh-contact-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}