/* DV8 Web - motion layer (ported from the DV8 Motion Kit, Oct 2026).
   Sits on top of dv8.css and dv8.js; nothing here replaces their reveal, counter or
   progress bar. Scroll scenes read CSS variables (--e, --b, --t, --c, --o) that
   motion.js writes per frame, and every variable defaults to the FINISHED state, so a
   visitor with reduced motion or a failed script sees a complete, still page.
   html.mo is set by motion.js only when motion is allowed. */

:root{--sk:0deg;--pin-h:100vh;--wipe:cubic-bezier(.7,0,.2,1);--spring:cubic-bezier(.2,.8,.2,1);}

/* position:sticky dies inside any ancestor with overflow:hidden, and dv8.css sets it on
   body and on .hero-ambient to stop sideways scroll. overflow:clip stops sideways scroll
   just the same without creating a scroll container, so the pinned scenes can pin. */
@supports (overflow:clip){
  body{overflow-x:clip}
  .hero-ambient{overflow:clip}
}

/* above-the-fold entrance: transform only, never opacity, so the first frame is paintable
   and Chrome can count it for Largest Contentful Paint. Waits for the intro curtain. */
.mo-rise{animation:mo-rise .9s var(--spring) both;animation-delay:var(--d,0s)}
html:not(.no-intro) .mo-rise{animation-delay:calc(var(--d,0s) + .75s)}
/* the separate translate property, so an element's own transform (a tilted mockup, a
   rotated card) is kept rather than overwritten when the animation finishes */
@keyframes mo-rise{from{translate:0 28px}to{translate:0 0}}
@media(prefers-reduced-motion:reduce){.mo-rise{animation:none}}

/* homepage h1: a big rotating line, with the keyword line underneath inside the same h1 */
.h1-big{display:block}
.h1-sub{display:block;font-family:var(--body);font-weight:600;font-size:clamp(17px,1.5vw,21px);line-height:1.4;letter-spacing:0;color:var(--text);margin-top:16px;max-width:30ch}
@supports (height:100svh){:root{--pin-h:100svh}}



/* Metric-matched fallback for the display font: local Arial scaled to Space Grotesk's
   width (measured 1.0184 at 700 weight) and line metrics, so headings wrap the same way
   before and after the web font swaps in and the hero does not jump (CLS). */
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:600 700;size-adjust:101.8%;ascent-override:96.3%;descent-override:28.5%;line-gap-override:0%}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial');font-weight:400 500;size-adjust:101.8%;ascent-override:96.3%;descent-override:28.5%;line-gap-override:0%}
:root{--disp:'Space Grotesk','Space Grotesk Fallback',sans-serif}

/* ---------- headline unmask (every page, applied by motion.js) ----------
   Never above the fold, never the h1, so it cannot touch Largest Contentful Paint. */
html.mo [data-unmask]{clip-path:inset(0 0 100% 0);transform:translateY(48px) skewY(3deg);filter:blur(8px);opacity:.3;transition:clip-path 1.15s var(--wipe),transform 1.25s var(--spring),filter 1s ease,opacity 1s ease;}
html.mo [data-unmask].in{clip-path:inset(-20% -6% -28% -6%);transform:none;filter:none;opacity:1;}

/* ---------- image wipe ---------- */
html.mo [data-wipe]{clip-path:inset(14% 8% 14% 8% round 28px);transition:clip-path 1.35s var(--wipe);}
html.mo [data-wipe] img{transform:scale(1.22);transition:transform 1.8s var(--spring);}
html.mo [data-wipe].in{clip-path:inset(0 0 0 0 round 18px);}
html.mo [data-wipe].in img{transform:none;}
/* an image wiped on its own (added automatically by motion.js) has no frame to scale inside */
html.mo img[data-wipe]{clip-path:inset(10% 7% 10% 7%);transform:none;transition:clip-path 1.3s var(--wipe);}
html.mo img[data-wipe].in{clip-path:inset(0 0 0 0);}

/* ---------- hero rotator: the end of the h1 swaps between outcomes ----------
   All variants stack in one grid cell, so the h1 is sized by the longest and never
   jumps. The first variant is the original headline, visible on the very first frame. */
.rot{display:inline-grid;vertical-align:top;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.rot .rw{grid-area:1/1;transition:transform .85s var(--spring);}
html.mo .rot .rw:not(.on){transform:translateY(110%);}
html.mo .rot .rw.out{transform:translateY(-110%);}
/* hidden until the rotator has parked them out of view, so nothing slides on load */
.rot:not(.ready) .rw:not(:first-child){visibility:hidden;}
.rot-tabs{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-6px 0 26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;}
.rot-tabs button{background:none;border:0;padding:6px 0;cursor:pointer;color:var(--muted);font:inherit;letter-spacing:inherit;display:grid;gap:6px;text-align:left}
.rot-tabs button.on{color:var(--head);}
.rot-tabs button i{display:block;height:2px;width:100%;min-width:56px;background:var(--line);overflow:hidden;position:relative}
.rot-tabs button i::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
.rot-tabs button.on i::after{animation:mo-fill var(--rot,3s) linear forwards}
html:not(.mo) .rot-tabs{visibility:hidden}
@keyframes mo-fill{to{transform:scaleX(1)}}

/* ---------- intro curtain (homepage, once per session) ----------
   Pure CSS so a script failure can never leave it covering the page. */
.mo-intro{position:fixed;inset:0;z-index:2000;pointer-events:none;animation:mo-gone 0s 1.3s forwards}
.mo-intro .half{position:absolute;left:0;right:0;height:50.5%;background:var(--navy);animation:mo-open .8s .6s var(--wipe) forwards}
.mo-intro .top{top:0}
.mo-intro .bot{bottom:0;animation-name:mo-openb}
.mo-intro .mid{position:absolute;inset:0;display:grid;place-items:center;animation:mo-fade .3s .48s forwards}
.mo-intro .mid span{display:flex;align-items:center;gap:14px;color:#fff;font-family:var(--disp);font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em}
.mo-intro .line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;animation:mo-line .5s .05s var(--wipe) forwards,mo-fade .2s .6s forwards}
.mo-intro .orb{position:relative;width:34px;height:34px}
.mo-intro .orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(255,255,255,.45)}
.mo-intro .orb::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.mo-intro .orb b{position:absolute;inset:0;animation:mo-spin 1.4s linear infinite}
.mo-intro .orb b::before{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--orange);box-shadow:0 0 9px rgba(255,106,31,.85)}
html.no-intro .mo-intro{display:none}
@keyframes mo-open{to{transform:translateY(-101%)}}
@keyframes mo-openb{to{transform:translateY(101%)}}
@keyframes mo-fade{to{opacity:0}}
@keyframes mo-line{to{transform:scaleX(1)}}
@keyframes mo-gone{to{visibility:hidden}}
@keyframes mo-spin{to{transform:rotate(360deg)}}

/* ---------- words light up ---------- */
.mo-words{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4.2vw,58px);line-height:1.16;letter-spacing:-.025em;color:var(--head);max-width:22ch}
html.mo .mo-words .w{color:var(--faint);opacity:.55;transition:color .25s,opacity .25s}
html.mo .mo-words .w.lit{color:var(--head);opacity:1}
html.mo .mo-words .w.hi.lit{color:var(--orange)}
.mo-words em{font-style:normal;color:var(--orange)}

/* ---------- kinetic type ---------- */
.mo-kinetic{overflow:hidden;padding:clamp(40px,7vw,90px) 0}
.mo-kin{font-family:var(--disp);font-weight:700;font-size:clamp(56px,11vw,170px);line-height:1.04;letter-spacing:-.04em;white-space:nowrap;will-change:transform}
.mo-kin.a{color:transparent;-webkit-text-stroke:1.5px var(--head)}
.mo-kin.a span{color:var(--head);-webkit-text-stroke:0}
.mo-kin.b{color:var(--orange)}
.mo-kinetic.slim{padding:clamp(26px,4vw,48px) 0 clamp(18px,3vw,34px);border-top:1px solid var(--line2)}
.mo-kinetic.slim .mo-kin{font-size:clamp(40px,7vw,104px)}

/* ---------- pinned scenes ---------- */
.mo-scene{position:relative;--e:1;--b:1;--t:1;--c:0}
.mo-pin{position:sticky;top:0;height:var(--pin-h);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
html:not(.mo) .mo-scene{height:auto !important}
html:not(.mo) .mo-pin{position:relative;height:auto;padding:90px 0}

/* scene: lead-sorting dashboard tilt-up */
.mo-tilt{height:250vh;background:var(--bg2);--tilt:50deg}
.mo-tilt .mo-pin{perspective:1600px}
.mo-tilt-head{text-align:center;max-width:760px;margin:0 auto clamp(18px,3.5vh,40px);padding:0 20px;transform:translateY(calc(-26px * var(--e)))}
.mo-tilt-head .h2{margin-bottom:10px}
.mo-tilt-head p{color:var(--muted);font-size:16px}
.mo-dash-wrap{position:relative;width:min(1080px,92vw);margin:0 auto}
.mo-dash{display:grid;grid-template-columns:200px 1fr;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 40px 90px -40px rgba(18,34,74,.45);overflow:hidden;transform-origin:50% 0;transform:rotateX(calc(var(--tilt) * (1 - var(--e)))) scale(calc(.74 + .26 * var(--e))) translateY(calc(120px * (1 - var(--e))))}
.mo-side{background:var(--navy);color:#c9d4e8;padding:20px 14px;display:grid;align-content:start;gap:3px;font-size:13.5px}
.mo-side b{color:#fff;font-family:var(--disp);font-size:15px;margin:0 0 16px 10px;display:flex;align-items:center;gap:9px}
.mo-side b img{width:26px;height:auto}
.mo-side span{padding:9px 12px;border-radius:8px;display:flex;justify-content:space-between}
.mo-side span.on{background:rgba(255,106,31,.18);color:#fff}
.mo-side span em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--orange2)}
.mo-main{padding:22px;display:grid;gap:14px;min-width:0}
.mo-hd{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mo-hd b{font-family:var(--disp);font-size:19px;color:var(--head)}
.mo-hd small{display:block;color:var(--muted);font-size:12.5px}
.mo-live{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}
.mo-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:mo-ping 1.8s infinite}
@keyframes mo-ping{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.mo-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mo-kpi{border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.mo-kpi small{font-size:11.5px;color:var(--muted)}
.mo-kpi b{display:block;font-family:var(--disp);font-size:23px;color:var(--head);letter-spacing:-.02em}
.mo-kpi i{font-style:normal;font-size:11.5px;color:#16a34a;font-weight:600}
.mo-row{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;min-width:0}
.mo-chart,.mo-inbox{border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0}
.mo-chart-hd{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--head);margin-bottom:10px}
.mo-chart-hd span{color:var(--muted);font-weight:500}
.mo-bars{display:flex;align-items:flex-end;gap:6px;height:150px}
.mo-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--orange-soft);transform-origin:50% 100%;transform:scaleY(clamp(.06,calc(var(--b) * 1.7 - var(--i) * .07),1))}
.mo-bars i:nth-last-child(-n+2){background:linear-gradient(180deg,var(--orange2),var(--orange))}
.mo-inbox-hd{font-size:12.5px;font-weight:700;color:var(--head);margin:0 0 6px}
.mo-lead{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2);font-size:12.5px}
.mo-lead:first-of-type{border-top:0}
.mo-src{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:var(--navy-soft);color:var(--navy2)}
:root[data-theme="dark"] .mo-src{color:#a9c1ff}
.mo-lead b{display:block;color:var(--head);font-weight:600}
.mo-lead small{color:var(--muted);font-size:11.5px}
.mo-tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap;border:1px solid currentColor}
.mo-tag.q{color:#16a34a}.mo-tag.bk{color:var(--orange-ink)}.mo-tag.no{color:var(--faint)}
.mo-chip{position:absolute;z-index:2;display:grid;gap:3px;background:var(--navy);color:#fff;border-radius:12px;padding:11px 15px;box-shadow:0 18px 40px -14px rgba(18,34,74,.6);font-size:13.5px;font-weight:600;white-space:nowrap;--o:1;opacity:var(--o);transform:translateY(calc(32px * (1 - var(--o)))) scale(calc(.9 + .1 * var(--o)))}
.mo-chip small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange2);font-weight:500}
.mo-chip.c0{left:-30px;top:22%}.mo-chip.c1{right:-26px;top:10%}.mo-chip.c2{left:-18px;bottom:10%}.mo-chip.c3{right:-22px;bottom:24%}
@media(max-width:899px){
  .mo-tilt{height:185vh;--tilt:28deg}
  .mo-dash{grid-template-columns:1fr}
  .mo-side{display:none}
  .mo-main{padding:14px;gap:10px}
  .mo-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mo-row{grid-template-columns:1fr}
  .mo-chart{display:none}
  .mo-lead:nth-of-type(n+4){display:none}
  .mo-dash-wrap{width:calc(100vw - 32px)}
  .mo-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .mo-chip{position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;white-space:normal;font-size:12.5px;padding:10px 12px}
  .mo-chip.c3{display:none}
}
@media(max-width:899px) and (max-height:720px){.mo-kpi:nth-child(n+3){display:none}.mo-tilt-head p{display:none}}

/* sticky steps: one screen stays put while the steps scroll past */
.mo-steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
.mo-device{position:sticky;top:13vh;height:72vh;border-radius:30px;background:var(--navy);box-shadow:0 40px 90px -40px rgba(18,34,74,.55);overflow:hidden}
.mo-scr{position:absolute;inset:0;padding:30px;display:flex;flex-direction:column;justify-content:center;gap:12px;color:#fff;opacity:0;transform:translateY(22px) scale(.97);transition:opacity .6s ease,transform .8s var(--spring)}
.mo-scr.on{opacity:1;transform:none}
.mo-step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:.32;transition:opacity .5s}
.mo-step.on{opacity:1}
.mo-step .num{font-family:var(--disp);font-weight:700;font-size:clamp(56px,6.5vw,92px);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--orange)}
.mo-step.on .num{color:var(--orange);-webkit-text-stroke:0;transition:color .5s}
.mo-step h3{font-family:var(--disp);font-size:clamp(24px,2.4vw,32px);color:var(--head);letter-spacing:-.02em}
.mo-step p{color:var(--text);max-width:46ch}
.mo-slot{display:none}
html:not(.mo) .mo-step{opacity:1}
@media(max-width:899px){
  .mo-steps{grid-template-columns:1fr;gap:0}
  .mo-device{display:none}
  .mo-step{min-height:0;opacity:1;padding:30px 0;border-top:1px solid var(--line)}
  .mo-slot{display:block;position:relative;height:330px;border-radius:22px;background:var(--navy);overflow:hidden;margin-top:6px}
  .mo-slot .mo-scr{opacity:1;transform:none;padding:22px}
}
.mo-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:13px 15px;font-size:13.5px}
.mo-card small{display:block;color:#9fb0cf;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.mo-card b{font-family:var(--disp);font-size:18px;line-height:1.25}
.mo-card.hot{border-color:rgba(255,106,31,.6);background:rgba(255,106,31,.14)}
.mo-feedrow{display:flex;justify-content:space-between;gap:10px;align-items:center}
.mo-feedrow span{font-family:var(--mono);font-size:10.5px;color:#9fb0cf;letter-spacing:.06em;text-transform:uppercase}
.mo-q{display:grid;gap:8px}
.mo-q div{padding:10px 14px;border-radius:14px;max-width:88%;font-size:14px;line-height:1.4}
.mo-q .a{background:rgba(255,255,255,.08);border-bottom-left-radius:4px}
.mo-q .u{background:var(--orange);align-self:flex-end;margin-left:auto;border-bottom-right-radius:4px}
.mo-score{display:flex;align-items:center;gap:14px}
.mo-score .ring{width:86px;height:86px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--orange) 0 86%,rgba(255,255,255,.1) 0);position:relative}
.mo-score .ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--navy)}
.mo-score .ring b{position:relative;font-family:var(--disp);font-size:26px}
.mo-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mo-cal i{aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.07);font-style:normal;font-size:11px;display:grid;place-items:center;color:#9fb0cf}
.mo-cal i.f{background:rgba(255,106,31,.25);color:#fff}
.mo-cal i.on{background:var(--orange);color:#fff;font-weight:700}

/* scene: window expand */
.mo-xp{height:230vh;background:var(--bg);--ix:22%;--iy:17%}
.mo-xp-cap{position:absolute;left:0;right:0;top:clamp(84px,12vh,130px);text-align:center;z-index:2;padding:0 20px;opacity:var(--c);transform:scale(calc(1 + .12 * (1 - var(--c))))}
.mo-xp-frame{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(var(--iy) * (1 - var(--e))) calc(var(--ix) * (1 - var(--e))) round calc(34px * (1 - var(--e))))}
.mo-xp-frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.28 - .28 * var(--e)))}
.mo-xp-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,21,36,.1),rgba(13,21,36,.78));opacity:var(--t)}
.mo-xp-txt{position:absolute;left:0;right:0;bottom:clamp(56px,10vh,110px);z-index:2;color:#fff;opacity:var(--t);transform:translateY(calc(46px * (1 - var(--t))))}
.mo-xp-txt h2{font-family:var(--disp);font-weight:700;font-size:clamp(38px,6.4vw,96px);line-height:1;letter-spacing:-.035em;color:#fff;margin:6px 0 0}
.mo-xp-txt .eyebrow{color:#fff}
.mo-xp-nums{display:flex;flex-wrap:wrap;gap:14px 42px;margin-top:22px}
.mo-xp-nums div{font-size:14.5px;color:rgba(255,255,255,.82)}
.mo-xp-nums b{display:block;font-family:var(--disp);font-size:clamp(38px,4.6vw,60px);line-height:1;color:#fff;letter-spacing:-.03em}
@media(max-width:899px){.mo-xp{height:170vh;--ix:6%;--iy:24%}}
html:not(.mo) .mo-xp .mo-pin{height:var(--pin-h);padding:0}

/* scene: sideways day timeline */
.mo-h{height:360vh;background:var(--bg2)}
.mo-h-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(22px,4vh,40px)}
.mo-h-head .h2 span{color:var(--faint)}
.mo-clock{min-width:220px;display:grid;gap:10px}
.mo-clock b{font-family:var(--disp);font-size:clamp(30px,3vw,42px);line-height:1;color:var(--head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mo-clock .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.mo-clock .bar i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.mo-track{display:flex;gap:18px;padding:0 max(28px,calc((100vw - 1280px) / 2 + 28px));will-change:transform;width:max-content}
.mo-hcard{position:relative;flex:0 0 clamp(280px,26vw,380px);height:min(56vh,500px);border-radius:22px;overflow:hidden;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.mo-hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateX(var(--px,0)) scale(1.15)}
.mo-hcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,21,36,.4),rgba(13,21,36,.05) 40%,rgba(13,21,36,.88))}
.mo-hcard>*{position:relative;z-index:1}
.mo-hcard .t{font-family:var(--disp);font-weight:600;font-size:clamp(38px,3.8vw,52px);line-height:1;letter-spacing:-.04em}
.mo-hcard .tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-bottom:10px}
.mo-hcard p{font-family:var(--disp);font-size:18px;font-weight:600;line-height:1.3;color:#fff}
.mo-hcard.ui{background:var(--navy2)}
.mo-hcard.ui::after{display:none}
.mo-note{background:#fff;color:#12224a;border-radius:14px;padding:13px 15px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);display:grid;gap:4px;font-size:13.5px}
.mo-note small{color:#6a768f;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between}
.mo-note b{font-weight:700}
.mo-hcard.end{background:var(--orange);justify-content:center;gap:20px}
.mo-hcard.end::after{display:none}
.mo-hcard.end h3{font-family:var(--disp);font-size:clamp(28px,2.8vw,38px);line-height:1.08;color:#fff;letter-spacing:-.02em}
.mo-hcard.end .btn{background:#fff;color:#12224a;align-self:flex-start;box-shadow:none}
@media(max-width:899px){
  .mo-h{height:auto}
  .mo-h .mo-pin{position:relative;height:auto;padding:84px 0 70px;overflow:visible}
  .mo-h-head{flex-direction:column;align-items:flex-start}
  .mo-clock{min-width:0;width:100%}
  .mo-scroller{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mo-scroller::-webkit-scrollbar{display:none}
  .mo-track{transform:none !important;padding:0 18px}
  .mo-hcard{flex-basis:80vw;height:430px;scroll-snap-align:center}
}
html:not(.mo) .mo-scroller{overflow-x:auto;scroll-snap-type:x mandatory}
html:not(.mo) .mo-track{transform:none !important}

/* ---------- service-area map (pre-rendered SVG, no map library at runtime) ---------- */
.mo-map-band{background:var(--navy);color:#fff;border-radius:26px;overflow:hidden;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr minmax(0,480px);gap:clamp(24px,4vw,60px);align-items:center;position:relative}
.mo-map-band .eyebrow{color:#fff}
.mo-map-band .h2{color:#fff}
.mo-map-band>div>p{color:rgba(255,255,255,.75)}
.mo-map-name{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.03em;margin-top:26px}
.mo-map-note{color:rgba(255,255,255,.65);font-size:14.5px;margin-top:4px}
.mo-map-note a{color:var(--orange2);font-weight:600}
.mo-map{position:relative;width:100%;aspect-ratio:520/700;max-height:640px;justify-self:center}
.mo-map svg{display:block;width:100%;height:100%}
.mo-map .cty{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.14);stroke-width:1}
.mo-map .pbc{fill:rgba(255,255,255,.06);stroke:rgba(255,138,61,.8);stroke-width:1.4}
.mo-map .ocean{font-family:var(--mono);font-size:11px;letter-spacing:.3em;fill:rgba(255,255,255,.28)}
.mo-map .arc{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;transition:stroke .3s,stroke-width .3s}
.mo-map .arc.on{stroke:rgba(255,255,255,.85);stroke-width:1.8}
.mo-map .beam{fill:none;stroke:url(#moBeam);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:110 890;animation:mo-beam var(--bd,2.6s) var(--bdl,0s) linear infinite}
.mo-map .pin{cursor:pointer}
.mo-map .pin .dot{fill:#fff;transition:r .25s}
.mo-map .pin.hub .dot{fill:var(--orange);stroke:#fff;stroke-width:2}
.mo-map .pin .pulse{fill:none;stroke:var(--orange2);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:mo-pulse 2.2s var(--pd,0s) infinite}
.mo-map .pin.on .dot{fill:var(--orange)}
.mo-map .lbl{font-family:var(--disp);font-weight:700;font-size:13px;fill:#12224a}
.mo-map .lblbg{fill:#fff}
@keyframes mo-beam{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes mo-pulse{from{transform:scale(1);opacity:1}to{transform:scale(4.5);opacity:0}}
.mo-map-band .gm-areas{justify-content:flex-start;margin-top:24px}
.mo-map-band .gm-areas a{color:#dbe3f3;border-color:rgba(255,255,255,.2);background:transparent}
.mo-map-band .gm-areas a.on,.mo-map-band .gm-areas a:hover{color:#fff;border-color:var(--orange);background:rgba(255,106,31,.16)}
@media(max-width:899px){.mo-map-band{grid-template-columns:1fr}.mo-map{max-width:420px;max-height:none}}

/* reduced motion: every scene resolves to its finished state */
@media(prefers-reduced-motion:reduce){
  .mo-map .beam,.mo-map .pin .pulse,.mo-live::before,.mo-intro{animation:none !important}
  .mo-intro{display:none}
}

/* window expand onto a real client site: no overlay headline, a small credit card instead */
.mo-xp.site .mo-xp-frame picture{display:block;width:100%;height:100%}
.mo-xp.site .mo-xp-frame img{object-position:50% 0}
.mo-xp.site .mo-xp-frame::after{display:none}
.mo-xp-card{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(16px,5vh,48px);z-index:2;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);max-width:360px;font-size:14.5px;line-height:1.5;opacity:var(--t);transform:translateY(calc(30px * (1 - var(--t))))}
.mo-xp-card b{display:block;font-family:var(--disp);font-size:18px;color:var(--head);margin-bottom:2px}
.mo-xp-card a{font-weight:700}