/* ============================================================
   MSHRM website UI kit — component styles
   d- = desktop experience   ·   m- = mobile experience
   gf- = guided form (shared)
   Tokens come from colors_and_type.css
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#000000;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
i[data-lucide]{stroke-width:1.75}

.stage{width:100%}
.stage.is-desktop{background:#0a0b0d}
/* Mobile fills the real browser viewport — no demo frame, backdrop, or centering.
   Issue 138: pure-black mobile shell so any browser-exposed area (overscroll, safe
   area, behind the fixed header) matches the black theme-color. */
.stage.is-mobile{background:#000000}

/* ---- Accessibility (a11y) — additive only; no effect on the default mouse experience ---- */
/* <main> landmark wrapper: display:contents = no box, so layout is byte-identical to baseline. */
.app-main{display:contents}
/* Skip link (WCAG 2.4.1): visually hidden until keyboard focus, then a brand pill at top-left.
   position:fixed + off-screen top means it never occupies layout space in the normal flow. */
.skip-link{position:fixed;top:-120px;left:12px;z-index:100000;background:var(--pink-500);color:#fff;
  font-family:var(--font-sans);font-size:.9rem;font-weight:600;letter-spacing:.01em;padding:10px 16px;
  border-radius:10px;text-decoration:none;box-shadow:0 8px 28px rgba(0,0,0,.45);transition:top .16s ease}
.skip-link:focus{top:12px}
.skip-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Keyboard-only focus baseline (WCAG 2.4.7): :focus-visible matches keyboard/AT focus, never
   mouse clicks — so mouse users see no change. Component-specific focus styles override this. */
:focus-visible{outline:2px solid var(--craft-500);outline-offset:2px}

/* =================================================================
   DESKTOP
   ================================================================= */
.d-root{background:var(--paper);scroll-behavior:smooth}
.d-wrap{max-width:1320px;margin:0 auto;padding:0 64px}

.d-header{position:sticky;top:0;z-index:80;transition:background .3s var(--ease),border-color .3s var(--ease)}
.d-header-in{max-width:1320px;margin:0 auto;padding:0 64px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;height:100px;gap:32px}
.d-header.is-solid{background:rgba(10,11,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-600)}
.d-brand{display:flex;align-items:center;gap:18px;flex:none}
.d-brand-btn{background:none;border:0;padding:0;display:flex;cursor:pointer}
.d-logo{height:74px;width:auto;display:block}
.d-loc{display:flex;align-items:center;gap:16px;padding-left:18px;border-left:1px solid var(--ink-600);flex:none}
.d-loc-row{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-2);line-height:1;white-space:nowrap}
/* location / status dots — each its own colour, slow subtle pulse */
.d-loc-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.d-loc-dot.is-pink{background:var(--pink-500);animation:dotpulse-pink 3.4s var(--ease-inout) infinite}
.d-loc-dot.is-orange{background:var(--craft-500);animation:dotpulse-orange 3.4s var(--ease-inout) .6s infinite}
.d-loc-dot.is-teal{background:var(--data-500);animation:dotpulse-teal 3.4s var(--ease-inout) 1.2s infinite}
.d-loc-dot.is-green{background:#1FB66B;animation:dotpulse-green 3.4s var(--ease-inout) .6s infinite}
@keyframes dotpulse-green{0%,100%{opacity:.64;box-shadow:0 0 6px 0 rgba(31,182,107,.42)}50%{opacity:1;box-shadow:0 0 12px 2px rgba(31,182,107,.6)}}
@keyframes dotpulse-pink{0%,100%{opacity:.64;box-shadow:0 0 6px 0 rgba(255,0,94,.42)}50%{opacity:1;box-shadow:0 0 12px 2px rgba(255,0,94,.6)}}
@keyframes dotpulse-orange{0%,100%{opacity:.64;box-shadow:0 0 6px 0 rgba(255,102,0,.42)}50%{opacity:1;box-shadow:0 0 12px 2px rgba(255,102,0,.6)}}
@keyframes dotpulse-teal{0%,100%{opacity:.64;box-shadow:0 0 6px 0 rgba(0,132,144,.42)}50%{opacity:1;box-shadow:0 0 12px 2px rgba(0,132,144,.6)}}
/* Desktop nav must always stay on one horizontal line (matches the approved
   single-line reference). flex:none keeps the row at full content width so it
   never shrinks, and nowrap stops labels like "AI Systems" breaking onto two
   lines. Below the 1200px breakpoint the mobile composition takes over. */
.d-nav{display:flex;flex-wrap:nowrap;gap:30px;margin-left:auto;flex:none}
.d-nav-a{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-on-dark-2);transition:color .2s;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;flex:none}
.d-nav-a:hover{color:#fff}
.d-header-cta{padding:12px 20px;flex:none}

/* eyebrow legibility variants — keep premium, never loud */
.ds-eyebrow--pink{color:var(--pink-500);display:inline-flex;align-items:center;gap:0.625rem}
.ds-eyebrow--pink::before{content:"";width:1.375rem;height:1px;background:currentColor;opacity:.8}
.ds-eyebrow--ondark{color:var(--fg-on-dark-2)}
.ds-eyebrow--ai{color:#B98BE6}
.ds-eyebrow--blue{color:#3D8BFF;display:inline-flex;align-items:center;gap:0.625rem}
.ds-eyebrow--blue::before{content:"";width:1.375rem;height:1px;background:currentColor;opacity:.8}
.ds-eyebrow--teal{color:#22C3D0;display:inline-flex;align-items:center;gap:0.625rem}
.ds-eyebrow--teal::before{content:"";width:1.375rem;height:1px;background:currentColor;opacity:.85}

/* dark CTA button — black fill, white text, pink accent arrow */
.ds-btn--dark{background:var(--ink-900);color:#fff;border:0}
.ds-btn--dark:hover{background:#000;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(10,11,13,.5)}
.ds-btn--dark:active{transform:translateY(0) scale(.985)}

/* hero — balanced left composition, fits above the fold with ticker.
   The hero is locked to one viewport minus the ticker height (--d-tick-h) so the
   header(overlaid) + hero + ticker == exactly one screen and the ticker sits
   flush on the fold at every viewport height. Hero content is height-aware
   (clamp with vh) so it never spills past the fold on short screens while keeping
   the approved scale on normal/tall desktops. */
.d-hero{--d-tick-h:78px;position:relative;height:calc(100vh - var(--d-tick-h));height:calc(100dvh - var(--d-tick-h));min-height:480px;background:var(--ink-900);overflow:hidden;display:flex;align-items:center;margin-top:-100px;padding:100px 0 clamp(12px,2.2vh,22px);box-sizing:border-box}
.d-hero-img{position:absolute;right:0;bottom:0;top:auto;height:123%;width:79%;object-fit:cover;object-position:96% 50%}
.d-hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,#0a0b0d 28%,rgba(10,11,13,.3) 50%,rgba(10,11,13,0) 74%),
  linear-gradient(0deg,#0a0b0d 1%,rgba(10,11,13,0) 20%)}
/* subtle dark blue-teal atmospheric spill on the far left — adds depth, never bright */
.d-hero-scrim::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 62% at -6% 60%,rgba(0,132,144,.16),rgba(0,110,132,.06) 38%,transparent 64%)}
.d-hero-in{position:relative;width:100%;max-width:1320px;margin:0 auto;padding:0 64px;align-self:flex-start;margin-top:clamp(12px,3.4vh,60px)}
.d-hero-eb{margin:0 0 clamp(8px,1.6vh,16px);color:var(--fg-on-dark);display:inline-flex;align-items:center;gap:10px;opacity:.92;
  font-family:var(--font-mono);font-size:.9rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.d-hero-eb .eb-dot{width:7px;height:7px;border-radius:50%;background:var(--pink-500);flex:none}
/* min(7.41vw, 11.9vh) keeps the approved width-based scale at >=900px tall and
   only shrinks the heading on shorter viewports so it never pushes the ticker
   past the fold. */
.d-hero-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,min(7.41vw,11.9vh),6.88rem);line-height:.84;letter-spacing:-.015em;color:#fff;margin:0 0 clamp(10px,2vh,20px);max-width:12ch}
.d-hero-h .ds-accent{line-height:.84;display:inline-block}
.d-hero-sub{color:var(--fg-on-dark-2);margin:0 0 26px;max-width:27ch;font-family:var(--font-sans);font-size:1.05rem;line-height:1.5}
.d-hero-sub{color:var(--fg-on-dark-2);margin:0 0 clamp(14px,2.8vh,28px);max-width:42ch;font-family:var(--font-sans);font-size:clamp(1rem,min(1.2rem,2.1vh),1.2rem);line-height:1.45}
.d-hero-cta{display:flex;gap:16px;align-items:center}
/* Very short desktop viewports (heavy zoom / short resized windows): compress the
   hero further so the full composition still clears the fold above the ticker.
   The logo/header are never shrunk; we reclaim space from heading scale, vertical
   rhythm and the header-clearing padding (kept just below the 74px logo). */
@media (max-height:680px){
  .d-hero{padding-top:88px}
  .d-hero-in{margin-top:clamp(8px,1.6vh,18px)}
  .d-hero-eb{margin-bottom:clamp(6px,1vh,10px)}
  .d-hero-h{font-size:clamp(2.1rem,min(7.41vw,9.4vh),4.6rem);margin-bottom:clamp(8px,1.4vh,14px)}
  .d-hero-sub{margin-bottom:clamp(10px,1.8vh,18px);font-size:clamp(.95rem,min(1.1rem,1.9vh),1.1rem)}
}

/* ticker */
/* The dark ticker sits directly on the white .d-root, so under fractional
   rendering (browser zoom / non-integer DPR) the white root can rasterise a
   hairline through the ticker's top/bottom edges. z-index lifts the ticker above
   its neighbours and the 1px ink-900 box-shadow extends the ticker's own colour
   over each seam — no layout shift, no white bleed. */
.d-ticker{background:var(--ink-900);border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);overflow:hidden;padding:20px 0;position:relative;z-index:1;box-shadow:0 1px 0 0 var(--ink-900),0 -1px 0 0 var(--ink-900)}
.d-ticker-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:tick var(--ticker-speed) linear infinite;will-change:transform;backface-visibility:hidden}
.d-ticker-item{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;
  text-transform:uppercase;font-size:30px;color:#fff;letter-spacing:.01em}
.d-ticker-dot{width:7px;height:7px;border-radius:50%;background:var(--pink-500);margin:0 30px}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}
/* Issue 79 (desktop performance): a section fully outside the viewport gets
   .anim-suspended (added/removed by App.jsx, desktop only, with a 400px resume
   margin so animations are running before the section is visible). Pausing the
   offscreen keyframe animations removes their continuous style-recalc/layout cost
   during scroll WITHOUT changing any visible motion. Tickers are excepted so their
   continuous loop is never paused; transitions are unaffected (only @keyframes). */
.anim-suspended,.anim-suspended *{animation-play-state:paused!important}
.anim-suspended .d-ticker-track,.anim-suspended .d-footer-ticker-track{animation-play-state:running!important}

/* sections */
.d-sec{padding:var(--section-y-desktop) 0;position:relative}
.d-sec-h{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:var(--t-display-m);line-height:.98;letter-spacing:-.01em;margin:18px 0 0;color:var(--fg-on-light)}

/* services */
.d-services{background:var(--paper);overflow:hidden}
.d-svc-aura{position:absolute;inset:0;pointer-events:none}
/* subtle structured editorial lines — quiet near-white system marks, no glow */
.d-svc-aura::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, var(--line-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-100) 1px, transparent 1px);
  background-position:left top, right top;
  background-size:33.33% 100%, 33.33% 100%;
  background-repeat:repeat-x, no-repeat;
  opacity:.55;
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent)}
.d-svc-aura::after{content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%);width:1px;height:84%;
  background:linear-gradient(180deg,transparent,var(--line-200) 30%,var(--line-200) 70%,transparent);opacity:.5}
.d-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:24px;margin-top:64px;align-items:stretch}
.d-svc-grid>*{height:100%}
.d-svc{position:relative;height:100%;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-100);border-radius:var(--r-md);padding:34px 30px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.d-svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ic,var(--pink-500));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.d-svc:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ic) 45%,transparent);box-shadow:var(--shadow-md)}
.d-svc:hover::after{transform:scaleX(1)}
.d-svc-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:13px;background:var(--paper-2);margin-bottom:22px;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.d-svc:hover .d-svc-ic{background:color-mix(in srgb,var(--ic) 12%,var(--paper));box-shadow:0 0 0 1px color-mix(in srgb,var(--ic) 30%,transparent),0 0 18px -2px color-mix(in srgb,var(--ic) 45%,transparent)}
.d-svc-t{font-family:var(--font-sans);font-weight:600;font-size:1.3rem;margin:0 0 10px;color:var(--fg-on-light)}
.d-svc-d{font-size:1rem;line-height:1.6;color:var(--fg-on-light-2);margin:0}
.d-svc-cta{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:14px}
.d-svc-cta-note{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-3)}

/* proof */
.d-proof{background:var(--ink-900);overflow:hidden}
/* Issue 251: the Results "THE NUMBERS" eyebrow is ~25% larger (0.8rem -> 1rem) and uses the red
   accent instead of the muted grey. Scoped to this eyebrow only — wording, mono font, weight,
   uppercase, letter-spacing, left alignment and position are unchanged; metrics are untouched. */
.d-proof-eyebrow{font-size:1rem;color:var(--pink-500)}
.d-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px}
.d-proof-sub{color:var(--fg-on-dark-2);max-width:60ch;margin:22px 0 0;font-size:1.1rem;line-height:1.6}
.d-proof-item{border-top:1px solid var(--ink-600);padding-top:24px}
.d-proof-n{display:block;font-family:var(--font-display);font-weight:900;font-size:var(--t-proof);
  line-height:.85;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
/* .d-proof-n.is-pink removed — all proof numbers are white */
.d-proof-c{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-on-dark-2);margin:18px 0 0;line-height:1.5;max-width:20ch}

/* interactive proof cells — open chart modals */
.d-proof-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;
  border:0;border-top:1px solid var(--ink-600);background:none;cursor:pointer;padding:24px 0 0;
  -webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease,cubic-bezier(.4,0,.2,1))}
/* accent top-line: solid colour, always on — NO glow, NO pulse */
.d-proof-item::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--acc,var(--pink-500));transform:scaleX(1);transform-origin:left;z-index:1}
/* white sweep that travels left→right across the line on hover */
.d-proof-item::after{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  background-size:55% 100%;background-repeat:no-repeat;background-position:-60% 0;opacity:0}
.d-proof-item:hover::after,.d-proof-item.is-open::after{animation:proofsweep .6s ease-in forwards}
@keyframes proofsweep{0%{background-position:-60% 0;opacity:1}65%{opacity:1;background-position:80% 0}100%{background-position:140% 0;opacity:0}}
/* one quick left→right shine occupying ~20% of the cycle, idle the rest (so staggered items fire in sequence) */
@keyframes proofshine{0%{background-position:-60% 0;opacity:0}0.2%{opacity:1}4.5%{background-position:160% 0;opacity:1}5%{background-position:160% 0;opacity:0}100%{background-position:160% 0;opacity:0}}
/* hover: lift the cell (movement) + much stronger glow BEHIND the number */
.d-proof-item:hover,.d-proof-item.is-open{transform:translateY(-5px)}
.d-proof-item:hover .d-proof-n,.d-proof-item.is-open .d-proof-n{
  text-shadow:0 12px 42px color-mix(in srgb,var(--acc,var(--pink-500)) 40%,transparent)}
/* VIEW CHART cue: always lit in accent colour at rest */
.d-proof-cue{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:var(--font-mono);font-size:10px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acc,var(--pink-500));opacity:.85;
  transition:color .25s,opacity .25s,transform .25s}
.d-proof-item:hover .d-proof-cue,.d-proof-item.is-open .d-proof-cue{opacity:1;transform:translateX(2px)}

/* supporting copy inside the chart modal */
.nm-panel-copy{font-family:var(--font-sans);font-size:.98rem;line-height:1.55;color:var(--fg-on-dark-2);
  margin:0.875rem 0 0;max-width:60ch;text-wrap:pretty}

/* mobile: keep the modal inside the phone frame */
.nm-overlay.nm-mobile{position:absolute;padding:1rem}
.nm-overlay.nm-mobile .lv3-proof-panel{width:100%;max-width:100%;max-height:100%;box-sizing:border-box;
  padding:2.25rem 1.125rem 1.125rem;overflow:visible}
/* widen the glow to span the full card + fix clipping from overflow:visible */
.nm-overlay.nm-mobile .lv3-proof-panel-glow{width:140%;top:-30%;left:50%;transform:translateX(-50%)}
/* The shared .lv3-proof-panel-h is white-space:nowrap (fits desktop's wide panel).
   On the narrow mobile numbers modal the long titles (e.g. "3.4× more action from
   the same traffic.") overflowed the right border. Let them wrap to ~2 lines. */
/* Issue 5: real-phone readability for all four Results chart popups — substantially
   larger title/category/body and dramatically more legible axis labels (BASELINE /
   OVER THE ENGAGEMENT / NOW), brighter, with a taller chart. Panel keeps overflow:visible
   so it never scrolls internally; sizes are tuned to fit the phone frame at 390 & 430. */
.nm-overlay.nm-mobile .lv3-proof-panel-unit{font-size:0.85rem;letter-spacing:.1em;margin-bottom:0.5rem}
.nm-overlay.nm-mobile .lv3-proof-panel-h{font-size:1.85rem;max-width:none;white-space:normal;line-height:1.04}
.nm-overlay.nm-mobile .nm-panel-copy{font-size:1.04rem;line-height:1.5;margin-top:0.75rem}
.nm-overlay.nm-mobile .lv3-proof-panel-plot{margin-top:1.125rem}
.nm-overlay.nm-mobile .lv3-proof-panel-plot .lv3-rc-svg{height:13.5rem}
.nm-overlay.nm-mobile .lv3-proof-panel-axis{font-size:0.8125rem;letter-spacing:.06em;margin-top:0.75rem;color:var(--fg-on-dark-2)}

/* connected network field — visible web; pulses travel when .is-active */
.netfield-nodes circle{animation:netnode 4.5s var(--ease-inout) infinite}
@keyframes netnode{0%,100%{opacity:.45}50%{opacity:1}}
.netfield.is-active .netfield-nodes circle{filter:drop-shadow(0 0 5px currentColor)}
.netfield.is-active .netfield-signals circle{filter:drop-shadow(0 0 6px currentColor)}
/* quiet mode — faint dark-teal web that blends into the black, very subtle node pulse */
.netfield.is-quiet line{opacity:.5}
.netfield.is-quiet .netfield-quiet-nodes circle{animation:netquiet 5.4s var(--ease-inout) infinite}
@keyframes netquiet{0%,100%{opacity:.46}50%{opacity:.88}}
.netfield.is-quiet .netq-glowline{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 13px currentColor);animation:netqline 5.7s var(--ease-inout) infinite}
@keyframes netqline{0%,100%{opacity:.78}50%{opacity:1}}
.netfield.is-quiet .netq-glownode{filter:drop-shadow(0 0 6px currentColor)}
.myc{pointer-events:none}
.myc circle{transition:filter 1.2s var(--ease)}
.myc.is-glow circle{filter:drop-shadow(0 0 5px currentColor);animation:signode 4.5s var(--ease-inout) infinite}
@keyframes signode{0%,100%{opacity:.5}50%{opacity:1}}

/* cases — 6 cards, 2x3, ~30% smaller */
.d-cases{background:var(--paper-2)}
.d-cases-h{word-spacing:-.08em}
.d-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.d-case{background:#fff;border:1px solid var(--line-100);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);height:100%;
  /* Issue 79: own compositor layer so the .d-case-live backdrop-filter glass does not
     de-optimize card compositing / force main-thread repaints during scroll. */
  will-change:transform}
.d-case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-200)}
/* Live case cards are crawlable <a>; neutralise anchor UA styling so the card
   renders identically to the <article> version (block box, no link colour/underline). */
a.d-case,a.m-case{display:block;color:inherit;text-decoration:none}
/* Mobile case-study hero heading wrapper: promotes the existing hero logo/title
   image to a single semantic <h1> (its alt is the accessible name) WITHOUT a box of
   its own — display:contents leaves the image's layout/flex participation untouched,
   so there is zero visual change. The desktop case heroes already wrap their logo in
   an <h1>; this gives the mobile compositions the same single, meaningful heading. */
.case-hero-h{display:contents}
.d-case-img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-900)}
.d-case-img img{width:100%;height:100%;object-fit:cover;transition:transform .56s var(--ease)}
.d-case:hover .d-case-img img{transform:scale(1.05)}
.d-case-body{padding:22px 24px 24px}
.d-case-tag{font-size:.68rem;letter-spacing:.13em}
.d-case-t{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:.98;margin:11px 0 9px;color:var(--fg-on-light)}
.d-case-d{font-size:.92rem;line-height:1.55;color:var(--fg-on-light-2);margin:0 0 18px}
.d-case-chips{display:flex;flex-wrap:wrap;gap:7px}
.d-chip{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-2);background:var(--paper-2);border:1px solid var(--line-200);border-radius:var(--r-pill);padding:6px 11px}

/* creative direction + ai content */
.d-ai{background:var(--ink-850);overflow:hidden}
.d-ai-in{position:relative}
.d-ai-body{color:var(--fg-on-dark-2);max-width:62ch;margin-top:20px;font-size:1.1rem;line-height:1.6}
.d-ai-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px}
.d-ai-thumb{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--ink-600);cursor:pointer;transition:transform .4s var(--ease),border-color .4s var(--ease)}
.d-ai-thumb img{width:100%;height:300px;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.d-ai-thumb:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--data-500) 50%,var(--ink-500))}
.d-ai-thumb:hover img{transform:scale(1.045)}
.d-ai-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,13,.9) 8%,rgba(10,11,13,.12) 52%,rgba(10,11,13,.32) 100%)}
/* hover glow sits behind the thumbnail's own play button (no duplicate button) */
.d-ai-playglow{position:absolute;top:46%;left:50%;width:120px;height:120px;transform:translate(-50%,-50%) scale(.7);border-radius:50%;
  background:radial-gradient(circle, rgba(255,0,94,.45), transparent 65%);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.d-ai-thumb:hover .d-ai-playglow{opacity:1;transform:translate(-50%,-50%) scale(1)}
.d-ai-thumb figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;flex-direction:column;gap:4px}
.d-ai-brand{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1;color:#fff}
.d-ai-title{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-dark-2)}
/* cinematic field — light streaks, scan line, lens glow */
.cinefield{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cine-glow{position:absolute;top:18%;left:30%;width:520px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,132,144,.18), transparent 68%);filter:blur(8px);animation:cineglow 9s var(--ease-inout) infinite}
@keyframes cineglow{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:.9;transform:translateX(40px)}}
.cine-streak{position:absolute;height:1px;width:140%;left:-20%;background:linear-gradient(90deg,transparent,rgba(34,195,208,.4),transparent);opacity:.5}
.cine-streak.s1{top:24%;animation:cinestreak 11s linear infinite}
.cine-streak.s2{top:58%;background:linear-gradient(90deg,transparent,rgba(255,0,94,.3),transparent);animation:cinestreak 14s linear infinite reverse}
.cine-streak.s3{top:78%;animation:cinestreak 9s linear infinite}
@keyframes cinestreak{0%{transform:translateX(-10%)}100%{transform:translateX(10%)}}
.cine-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px)}

/* AI Systems atmosphere — drifting particles, soft scan, faint radial pulse (no web lines) */
.aifield{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aifield-pulse{position:absolute;top:34%;left:50%;width:760px;height:760px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--pink-500) 9%,transparent), transparent 62%);filter:blur(10px);animation:aipulse 8s var(--ease-inout) infinite}
@keyframes aipulse{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.94)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.04)}}
.aifield-scan{position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(180deg,transparent,rgba(34,195,208,.05),transparent);animation:aiscan 9s linear infinite}
@keyframes aiscan{0%{top:-40%}100%{top:120%}}
.aifield-dots{position:absolute;inset:0}
.aifield-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--ai-500);box-shadow:0 0 7px var(--ai-500);opacity:.4;animation:aidrift var(--ease-inout) infinite}
.aifield-dot:nth-child(3n){background:var(--pink-500);box-shadow:0 0 7px var(--pink-500)}
.aifield-dot:nth-child(4n){background:var(--data-500);box-shadow:0 0 6px var(--data-500)}
@keyframes aidrift{0%,100%{opacity:.18;transform:translateY(8px)}50%{opacity:.75;transform:translateY(-8px)}}

/* partnership — four-card system, equal height, no underglow */
.d-partner{background:var(--paper)}
.d-eng-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px;align-items:stretch}
.d-eng-grid>div{height:100%}
.d-eng{position:relative;border-radius:var(--r-md);padding:30px 26px;background:var(--paper-2);border:1px solid var(--line-100);height:100%;min-height:248px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.d-eng:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.d-eng--clk{cursor:pointer}
.d-eng--clk:hover{border-color:color-mix(in srgb,var(--pink-500) 32%,var(--line-100))}
.d-eng-cue{margin-top:auto;display:inline-flex;align-items:center;gap:6px;padding-top:16px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-500);opacity:.6;transition:opacity .2s}
.d-eng--clk:hover .d-eng-cue{opacity:1}
.d-eng.is-feat .d-eng-cue{display:none}
.d-eng-n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:900;font-size:1.35rem;color:var(--pink-500);background:var(--pink-100);border:1px solid color-mix(in srgb,var(--pink-500) 22%,transparent)}
.d-eng-t{font-family:var(--font-sans);font-weight:600;font-size:1.2rem;margin:20px 0 10px;color:var(--fg-on-light)}
.d-eng-d{font-size:.95rem;line-height:1.55;color:var(--fg-on-light-2);margin:0}
.d-eng.is-feat{background:var(--ink-900);border-color:var(--ink-700)}
.d-eng.is-feat:hover{border-color:var(--ink-500)}
.d-eng.is-feat .d-eng-n{background:rgba(255,0,94,.16);color:var(--pink-400);border-color:rgba(255,0,94,.4)}
.d-eng.is-feat .d-eng-t{color:#fff}
.d-eng.is-feat .d-eng-d{color:var(--fg-on-dark-2)}
.d-eng-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:16px 0 0;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-500)}
.d-eng-link:hover{color:var(--pink-400)}
.d-eng-cta{margin-top:52px;display:flex;justify-content:center}

/* ===== AI SYSTEMS (major) ===== */
.d-sys{background:var(--ink-900);overflow:hidden;text-align:center}
.d-sys-rings{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:900px;height:900px;pointer-events:none}
.d-sys-rings span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--pink-500);opacity:.1}
.d-sys-rings span:nth-child(1){width:300px;height:300px;animation:ringpulse 6s var(--ease-inout) infinite}
.d-sys-rings span:nth-child(2){width:520px;height:520px;border-color:var(--ai-500);animation:ringpulse 6s var(--ease-inout) .8s infinite}
.d-sys-rings span:nth-child(3){width:740px;height:740px;animation:ringpulse 6s var(--ease-inout) 1.6s infinite}
.d-sys-rings span:nth-child(4){width:900px;height:900px;border-color:var(--data-500);animation:ringpulse 6s var(--ease-inout) 2.4s infinite}
@keyframes ringpulse{0%,100%{opacity:.05;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.2;transform:translate(-50%,-50%) scale(1)}}
.d-sys-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--t-display-l);line-height:.96;letter-spacing:-.01em;color:#fff;margin:18px auto 0;max-width:16ch}
.d-sys-sub{font-family:var(--font-sans);font-size:1.15rem;line-height:1.6;color:var(--fg-on-dark-2);max-width:64ch;margin:26px auto 0}
/* flow engine */
.d-flow{display:flex;align-items:stretch;justify-content:center;gap:0;margin:76px 0 64px}
.d-flow-card-wrap{flex:1;max-width:360px}
.d-flow-card{position:relative;height:100%;text-align:left;background:linear-gradient(180deg,var(--ink-800),var(--ink-850));border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:30px 28px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.d-flow-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ic);opacity:.85}
.d-flow-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ic) 55%,var(--ink-500));box-shadow:0 24px 50px -28px color-mix(in srgb,var(--ic) 70%,transparent)}
.d-flow-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.d-flow-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:color-mix(in srgb,var(--ic) 18%,var(--ink-900));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 40%,transparent)}
.d-flow-step{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.16em;color:color-mix(in srgb,var(--ic) 70%,#fff)}
.d-flow-k{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.7rem;color:#fff;letter-spacing:.01em}
.d-flow-d{font-size:.95rem;line-height:1.55;color:var(--fg-on-dark-2);margin:12px 0 0}
.d-flow-pulse{position:absolute;bottom:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ic) 35%,transparent),transparent 70%);animation:flowpulse 4s var(--ease-inout) infinite}
@keyframes flowpulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:.7;transform:scale(1.05)}}
.d-flow-conn{flex:0 0 56px;align-self:center;height:2px;background:var(--ink-600);position:relative;overflow:hidden;border-radius:2px;margin-top:-30px}
.d-flow-signal{position:absolute;top:0;left:0;height:100%;width:34%;background:linear-gradient(90deg,transparent,var(--pink-500),transparent);animation:flowsig 2.2s var(--ease-inout) infinite}
@keyframes flowsig{0%{left:-34%}100%{left:100%}}
/* tools ticker — real logos + names, full-bleed across the section */
.d-tools{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;background:var(--ink-850);border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);overflow:hidden;padding:22px 0;margin:8px 0 0}
.d-tools::before,.d-tools::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.d-tools::before{left:0;background:linear-gradient(90deg,var(--ink-850),transparent)}
.d-tools::after{right:0;background:linear-gradient(270deg,var(--ink-850),transparent)}
.d-tools-track{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:tick 38s linear infinite}
.d-tool{display:inline-flex;align-items:center;gap:11px;margin:0 28px}
.d-tool-logo{height:26px;width:auto;max-width:40px;object-fit:contain;display:block}
.d-tool-name{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.08em;color:#fff}
.d-tool-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--pink-500),var(--ai-500));display:inline-block}
/* capability accordion */
.d-cap-wrap{max-width:820px;margin:72px auto 0;text-align:left}
.d-cap-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--ink-600)}
.d-cap-meta{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.d-cap-list{list-style:none;margin:0;padding:0}
.d-cap-row{border-bottom:1px solid var(--ink-700);transition:background .3s var(--ease)}
.d-cap-row:hover,.d-cap-row.is-open{background:linear-gradient(90deg,rgba(131,53,193,.12),transparent 60%)}
.d-cap-btn{width:100%;display:flex;align-items:center;gap:22px;padding:22px 6px;background:none;border:0;text-align:left;transition:padding .3s var(--ease)}
.d-cap-row:hover .d-cap-btn,.d-cap-row.is-open .d-cap-btn{padding-left:16px}
.d-cap-n{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--pink-500)}
.d-cap-row.is-open .d-cap-n{color:var(--ai-500)}
.d-cap-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.85rem;color:#fff;margin-right:auto;line-height:1}
.d-cap-chev{display:inline-flex;transition:transform .35s var(--ease)}
.d-cap-row.is-open .d-cap-chev{transform:rotate(180deg)}
.d-cap-panel-in{overflow:hidden}
.d-cap-panel-in p{margin:0;padding:0 56px 24px 40px;font-family:var(--font-sans);font-size:1.02rem;line-height:1.65;color:var(--fg-on-dark-2);max-width:70ch}
.d-sys-cta{margin-top:56px;display:flex;justify-content:center}
.d-sys-cta-btn{padding:20px 32px;font-size:.875rem}
/* AI tools ticker as closing strip — flush to the bottom edge of the black section */
.d-sys > .d-tools{margin-top:80px;margin-bottom:calc(-1 * var(--section-y-desktop))}

/* ===== LIVE WEBSITE WORK (white) ===== */
.d-web{background:var(--paper)}
.d-web-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.d-web-head>div{flex:1;min-width:60%}
.d-web-intro{font-family:var(--font-sans);font-size:1.1rem;line-height:1.6;color:var(--fg-on-light-2);margin:22px 0 0;max-width:54ch}
/* Issue 275: legacy `.d-web-cta{flex:none;margin-bottom:6px}` from the original design export removed;
   it was dead until the Issue 274 CTA element re-introduced the class and only added stray margin. */
/* Issue 274: grid-auto-rows:1fr equalises BOTH rows to the tallest, so all four cards are exactly
   equal height (not just per-row) even with the added View Live Website CTA. */
.d-web-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:28px;margin-top:60px;align-items:stretch}
.d-web-grid>*{height:100%}
.d-web-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.d-web-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-200)}
.d-web-img{position:relative;z-index:2;height:342px;flex:none;overflow:visible;background:linear-gradient(180deg,#fff,#FAFAF9);border-bottom:1px solid var(--line-200);padding:28px 30px 0}
.d-web-img img{display:block;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 5px 9px rgba(10,11,13,.10)) drop-shadow(0 24px 26px rgba(10,11,13,.20));transition:transform .7s var(--ease)}
.d-web-card:hover .d-web-img img{transform:translateY(-5px)}
/* Issue 274: min-height trimmed (232 -> 196) so cards are only as tall as their content needs;
   grid-auto-rows:1fr then equalises all four. Top padding nudged up slightly. */
.d-web-body{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;padding:32px 28px 26px;flex:1;min-height:196px}
.d-web-main{flex:1}
/* Issue 274A: CUSTOM UX/UI label — approved red (unchanged), +12% (10 -> 11.2px). */
.d-web-label{font-family:var(--font-mono);font-size:11.2px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-500)}
/* Issue 275A: title reverted to the approved pre-274 desktop size (1.9rem); family/weight/line-height/margin unchanged. */
.d-web-t{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.9rem;line-height:.98;margin:10px 0 6px;color:var(--fg-on-light)}
/* Issue 275B: category line reuses the approved mobile values exactly — mobile blue #2D82C8, mobile
   weight 500, mobile letter-spacing .05em, no stroke (clean/crisp) — sized ~14px (+~14% over the
   Issue 274 12.3px), bringing it closer to the mobile 15px proportion. */
.d-web-type{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:.05em;color:#2D82C8;margin:0 0 14px;text-transform:uppercase;-webkit-text-stroke:0}
.d-web-d{font-size:.96rem;line-height:1.55;color:var(--fg-on-light-2);margin:0;max-width:42ch}
/* Issue 275C: View Live Website CTA reproduces the approved mobile card CTA EXACTLY (.m-web-card
   .m-web-cta) — 0.874rem, weight 600, letter-spacing .1em, teal #22C3D0, blue #2D82C8 arrow, and the
   same 0.15px same-colour stroke + paint-order:stroke fill that renders the mono glyphs crisp (not a
   thick outline). Centred full-width within the card as its own bottom row (no longer left-aligned). */
.d-web-cta{display:flex;justify-content:center;align-items:center;gap:0.4rem;padding:2px 24px 22px;font-family:var(--font-mono);font-size:0.874rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#22C3D0;-webkit-text-stroke:0.15px currentColor;paint-order:stroke fill}
.d-web-cta-arrow{color:#2D82C8;font-size:1.08em;line-height:1;-webkit-text-stroke:0}
.d-web-card:hover .d-web-cta{color:#2AD4E0}
.d-web-qr{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;align-self:flex-end}
.d-web-qr .qr{border-radius:8px;box-shadow:var(--shadow-sm);display:block}
.d-web-qr-img{width:88px;height:88px;display:block;border-radius:8px;background:#fff;padding:4px;box-shadow:var(--shadow-sm)}
.d-web-scan{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-light-3)}
.d-web-accent{display:block;height:3px;width:100%;flex:none;background:var(--pink-500)}
.d-web-pw{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--fg-on-light-2);margin:12px 0 0}
.d-web-pw strong{color:var(--pink-500);font-weight:600;letter-spacing:.02em}
.d-web-cta-wrap{display:flex;justify-content:center;margin-top:56px}
.d-ai-thumb-link{display:block;text-decoration:none;color:inherit}
button.d-ai-thumb-link{width:100%;border:0;background:none;padding:0;margin:0;cursor:pointer;text-align:left;font:inherit}

/* final cta */
.d-final{background:var(--ink-900);overflow:hidden}
.d-final-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.d-final-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--t-display-l);
  line-height:1;color:#fff;margin:16px 0 30px}
.d-final-h .ds-accent{line-height:1}
.d-final-list{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:14px}
.d-final-list li{display:flex;align-items:center;gap:12px;font-size:1.05rem;color:var(--fg-on-dark-2)}

/* ===== FOUNDER (light, founder-led) ===== */
.d-founder{background:var(--paper-2)}
.d-founder-in{display:grid;grid-template-columns:0.85fr 1fr;gap:72px;align-items:center}
.d-founder-media{position:relative}
.d-founder-imgwrap{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.d-founder-imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.d-founder-badge{position:absolute;left:-22px;bottom:28px;background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:16px 20px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow-lg)}
.d-founder-badge-k{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-500)}
.d-founder-badge-v{font-family:var(--font-sans);font-size:.95rem;font-weight:500;color:#fff}
.d-founder-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,4.4vw,4.6rem);line-height:.9;letter-spacing:-.01em;color:var(--fg-on-light);margin:18px 0 0;max-width:none}
.d-founder-h .ds-accent{line-height:.92}
.d-founder-body{font-family:var(--font-sans);font-size:1.1rem;line-height:1.6;color:var(--fg-on-light-2);margin:22px 0 0;max-width:52ch}
.d-founder-attr{display:flex;flex-direction:column;gap:2px;margin:30px 0 26px;padding-left:18px;border-left:2px solid var(--pink-500)}
.d-founder-name{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1;color:var(--fg-on-light)}
.d-founder-role{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-light-3)}

/* ===== FOOTER (redesigned) ===== */
.d-footer{background:var(--ink-900);overflow:hidden;padding:96px 0 0;border-top:1px solid var(--ink-600);position:relative}
.d-footer-in{position:relative}
.d-footer-grid{display:grid;grid-template-columns:1.67fr 0.92fr 1.18fr 1.28fr 1.05fr;gap:0;padding-bottom:60px;align-items:start}
.d-footer-brand{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 52px 0 8px}
.d-footer-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin:0 0 22px}
.d-footer-logo-glow{position:absolute;width:316px;height:316px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.192),rgba(255,255,255,.054) 38%,transparent 66%);pointer-events:none}
.d-footer-logo{position:relative;height:140px;width:auto;display:block}
.d-footer-tag{color:var(--fg-on-dark-2);font-size:0.98rem;line-height:1.55;margin:0 0 26px;max-width:34ch}
.d-footer-cta{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:300px}
.d-footer-btn{height:48px;min-height:48px;padding:0 22px;width:100%;justify-content:center}
.d-footer-cta{max-width:286px}
/* clean premium pink button — subtle glow only (no heavy red bloom) */
.d-footer-cta .ds-btn--primary{box-shadow:0 8px 22px -10px rgba(255,0,94,.4)}
.d-footer-cta .ds-btn--primary:hover{box-shadow:0 10px 26px -10px rgba(255,0,94,.48)}
.d-footer-col{display:flex;flex-direction:column;position:relative;padding-left:46px;min-height:300px}
/* corrected reference: a divider line to the left of every link column except the first (Studio) */
.d-footer-grid>div:nth-child(3),.d-footer-grid>div:nth-child(4),.d-footer-grid>div:nth-child(5){border-left:0}
.d-footer-grid>div:nth-child(3)::before,.d-footer-grid>div:nth-child(4)::before,.d-footer-grid>div:nth-child(5)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.05) 22%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.05) 78%,transparent 100%);background-size:100% 320%;animation:footlineglow 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes footlineglow{0%{background-position:0 120%}100%{background-position:0 -120%}}
.d-footer-dot{width:7px;height:7px;border-radius:50%;background:currentColor;color:var(--pink-500);margin:0;flex:none;display:block;
  animation:footdot 2.8s var(--ease-inout) infinite}
/* one distinct premium accent per column heading */
.d-footer-grid>div:nth-child(2) .d-footer-dot{color:var(--pink-500)}
.d-footer-grid>div:nth-child(3) .d-footer-dot{color:var(--craft-500)}
.d-footer-grid>div:nth-child(4) .d-footer-dot{color:#1FB66B}
.d-footer-grid>div:nth-child(5) .d-footer-dot{color:var(--ai-500)}
@keyframes footdot{0%,100%{opacity:.5;box-shadow:0 0 5px 0 currentColor}50%{opacity:1;box-shadow:0 0 13px 2px currentColor}}
.d-footer-h{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-on-dark);margin:0 0 26px}
.d-footer-col a{color:var(--fg-on-dark-2);font-size:1rem;margin-bottom:22px;transition:color .2s}
.d-footer-grid>div:nth-child(3) a{white-space:nowrap}
.d-footer-col a:hover{color:var(--pink-500)}
.d-footer-phone{display:block;color:var(--fg-on-dark-2);font-size:1rem;margin:0 0 22px}
.d-footer-phone:hover{color:var(--pink-500)}
.d-footer-divider{height:1px;width:100%;background:var(--ink-600)}
.d-footer-legal{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap}
.d-footer-legal-link{color:var(--fg-on-dark-3);transition:color .2s}
.d-footer-legal-link:hover{color:var(--pink-500)}
.d-footer-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 28px;padding:26px 0;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.d-footer-status{display:flex;gap:22px;flex-wrap:wrap}
.d-st{display:inline-flex;align-items:center;gap:8px;color:var(--fg-on-dark-2)}
.d-footer-ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--ink-600);background:var(--ink-850);padding:22px 0}
.d-footer-ticker-track{display:flex;width:max-content;animation:tick 36s linear infinite;will-change:transform;backface-visibility:hidden}
.d-footer-ticker-item{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.01em;color:var(--fg-on-dark-2)}
.d-footer-ticker-item i{width:6px;height:6px;border-radius:50%;background:var(--pink-500);margin:0 24px}

/* =================================================================
   GUIDED FORM (shared)
   ================================================================= */
.gf{background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:32px}
.gf--compact{padding:1.5rem;border-radius:var(--r-md)}
.gf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.625rem}
.gf-step{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-500)}
.gf-bars{display:flex;gap:0.375rem}
.gf-bars i{width:1.625rem;height:0.25rem;border-radius:0.125rem;background:var(--ink-600);transition:background .3s}
.gf-bars i.is-on{background:var(--pink-500)}
.gf-q{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.7rem;color:#fff;margin:0 0 1.25rem;line-height:1}
.gf-opts{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.gf-opt{padding:1rem;border-radius:0.625rem;border:1px solid var(--ink-500);background:var(--ink-700);color:var(--fg-on-dark-2);
  font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;text-align:left;transition:all .2s var(--ease)}
.gf-opt:hover{border-color:var(--fg-on-dark-3)}
.gf-opt.is-sel{border-color:var(--pink-500);background:rgba(255,0,94,.12);color:#fff}
.gf-fl{display:block;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-3);margin:0 0 0.5rem}
.gf-inp{width:100%;padding:0.9375rem 1rem;border-radius:0.625rem;border:1px solid var(--ink-500);background:var(--ink-700);color:#fff;
  font-family:var(--font-sans);font-size:1rem;margin-bottom:1.125rem;outline:none;transition:border-color .2s,box-shadow .2s}
.gf-inp::placeholder{color:var(--fg-on-dark-3)}
.gf-inp:focus{border-color:var(--pink-500);box-shadow:0 0 0 3px rgba(255,0,94,.18)}
.gf-foot{display:flex;align-items:center;justify-content:space-between;margin-top:1.625rem}
.gf-back{display:inline-flex;align-items:center;gap:0.5rem;background:none;border:0;color:var(--fg-on-dark-2);
  font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase}
.gf-next{margin-left:auto;white-space:nowrap}
.gf--compact .gf-foot{flex-wrap:wrap;row-gap:0.875rem}
.gf--compact .gf-next{flex:1 1 100%;margin-left:0;justify-content:center}
/* Issue 89 B-E: mobile (compact) legibility for the shared Build Your Growth System
   module. All scoped to .gf--compact, so the desktop module (non-compact) is untouched.
   Selected behaviour/state logic unchanged; .is-sel pink stays the strongest state. */
.gf--compact .gf-step{font-size:0.825rem}                                          /* B: step label +20% */
.gf--compact .gf-bars i{width:1.875rem;height:0.2875rem}                           /* C: bars +15% (all three, alignment preserved) */
.gf--compact .gf-bars i:not(.is-on){background:var(--ink-500)}                     /* C: inactive grey brighter (#2A2E36 -> #3A3F49) */
.gf--compact .gf-opt{font-size:0.825rem}                                           /* D: option text +10% */
.gf--compact .gf-opt:not(.is-sel){color:#D6DAE1;background:#23262D;border-color:#4A4F5A}  /* D brighter text + E clearer unselected contrast */
.gf-done{text-align:center;padding:0.875rem 0}
.gf-check{display:inline-flex;align-items:center;justify-content:center;width:3.875rem;height:3.875rem;border-radius:50%;background:var(--pink-500);margin-bottom:1.25rem;box-shadow:var(--shadow-pink)}
.gf-done-d{color:var(--fg-on-dark-2);font-size:1rem;line-height:1.55;margin:0.875rem auto 0;max-width:34ch}

/* =================================================================
   MOBILE  (fills the real viewport; selected by width, not a toggle)
   ================================================================= */
/* Full-viewport mobile container (frame/notch removed). Keeps the positioned,
   overflow-clipped, definite-height context the internal mobile layout and
   lightbox portals rely on — now sized to the real viewport. dvh tracks mobile
   browser chrome where supported; vh is the fallback.
   Below the 1200px breakpoint the phone column is capped at --m-shell-maxw and
   centred so true phones fill the viewport while tablet/small-laptop widths stay
   proportioned (the stage background continues full-width in the side gutters). */
.phone{width:100%;max-width:480px;margin:0 auto;height:100vh;height:100dvh;background:#0a0b0d;overflow:hidden;position:relative}
.m-root{height:100%;overflow:hidden;background:var(--paper);position:relative}
/* No CSS scroll-behavior:smooth here. Programmatic menu navigation animates
   scrollTop via the smoothScrollTo rAF (ease-out cubic); a CSS smooth-scroll
   would re-animate every per-frame scrollTop write and fight the rAF, causing
   the stutter. The rAF is the single smooth-scroll system; touch scrolling and
   instant route resets (scrollTo(0,0)) are unaffected. */
.m-scroll{height:100%;overflow-y:auto;overflow-x:hidden;position:relative}
.m-scroll::-webkit-scrollbar{display:none}
.m-scroll.is-locked{overflow:hidden}

.m-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:0.5rem 1.25rem;background:rgba(10,11,13,.6);backdrop-filter:blur(10px)}
.m-bar-logo{height:2.5rem;width:auto}
.m-bar-burger{background:none;border:0;padding:0.25rem;display:flex}

/* mobile menu */
/* Issue 82: full-viewport coverage with zero underlying bleed-through.
   position:fixed + height:100dvh pins the menu to the VISIBLE viewport so the iOS
   dynamic-toolbar strip (which a position:absolute;height:100% panel left uncovered,
   exposing the index ticker at the bottom) is always covered. The opaque panel
   appears INSTANTLY (visibility toggle, no slide), so the bottom is never revealed
   during the open/close transition the way the old translateY(-100%) slide did;
   only the menu's CONTENTS fade/settle in. visibility is delayed off on close so the
   panel stays opaque for the whole content fade-out. The underlying .m-scroll is
   overflow-locked (.is-locked) so the page cannot scroll behind the menu.
   Tightened vertical rhythm + safe-area padding keep all six items and BOTH CTAs in
   view; overflow-y:auto is a fallback for genuinely short heights only. */
.m-menu{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:100;background:var(--ink-900);
  padding:max(1.25rem,env(safe-area-inset-top)) 1.375rem max(1.25rem,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  visibility:hidden;pointer-events:none;transition:visibility 0s linear .42s}
.m-menu.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.m-menu>*{opacity:0;transform:translateY(-14px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.m-menu.is-open>*{opacity:1;transform:none}
.m-menu-x{position:absolute;top:1.25rem;right:1.25rem;background:none;border:0;display:flex;padding:0.25rem;z-index:3;cursor:pointer}
.m-menu-brand{display:flex;justify-content:center;align-items:center;padding:0 0 1rem}
.m-menu-logo{height:5.5rem;width:auto;display:block}
.m-menu-nav{display:flex;flex-direction:column;border-top:1px solid var(--ink-600)}
.m-menu-a{display:flex;align-items:center;gap:0.875rem;padding:0.875rem 0;border-bottom:1px solid var(--ink-600);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:2rem;color:#fff;line-height:1}
.m-menu-num{font-family:var(--font-mono);font-size:0.6875rem;font-weight:500;letter-spacing:.1em;color:var(--pink-500);width:1.75rem}
.m-menu-a i[data-lucide]{margin-left:auto}
.m-menu-loc{display:flex;justify-content:center;gap:1.625rem;margin-top:1.125rem}
.m-menu-loc-row{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-2)}
.m-menu-cta{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.875rem}
.m-menu-cta .ds-btn{width:100%;justify-content:center}
.m-menu-ticker{margin-top:auto;overflow:hidden;white-space:nowrap;border-top:1px solid var(--ink-600);padding-top:1.125rem}
.m-menu-ticker-track{display:flex;align-items:center;width:max-content;animation:tick 30s linear infinite}
.m-menu-ticker span{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.m-menu-ticker span i{width:0.25rem;height:0.25rem;border-radius:50%;background:var(--pink-500);margin:0 1rem;flex:none}

/* mobile hero — own vertical composition */
.m-hero{position:relative;background:var(--ink-900);margin-top:-3.5rem}
.m-hero-imgwrap{position:relative;height:23.75rem;overflow:hidden}
.m-hero-img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.m-hero-fade{position:absolute;inset:0;background:linear-gradient(0deg,#0a0b0d 4%,rgba(10,11,13,.1) 50%,rgba(10,11,13,.5) 100%)}
.m-hero-in{position:relative;padding:0 1.375rem 2.5rem;margin-top:-2.5rem}
.m-hero-eb{color:var(--pink-500);margin:0 0 0.875rem}
.m-hero-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:3.5rem;line-height:.98;letter-spacing:-.01em;color:#fff;margin:0 0 1.875rem}
.m-hero-sub{font-size:1.05rem;line-height:1.5;color:var(--fg-on-dark-2);margin:0 0 1.625rem}
.m-hero-cta{width:100%;justify-content:center;font-size:.9rem;margin-bottom:0}
.m-hero-2nd{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.875rem;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#fff}

/* ===== mobile homepage hero — exact rebuild to mockup ===== */
.m-hero2{position:relative;min-height:100%;background:#0a0b0d;overflow:hidden;display:flex;flex-direction:column}
.m-hero2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 33%;z-index:0}
/* Issue 9: a dark lower scrim anchors the headline/locations/paragraph/CTA on a dark base
   (matching the approved composition's dark lower band) so that even when a browser toolbar
   shortens the hero and the title rises toward the mushroom, it never collides with the
   bright cap — the text always reads. Sits above the mushroom (z0), below content (z2). */
.m-hero2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,#0a0b0d 1%,rgba(10,11,13,.8) 26%,rgba(10,11,13,.4) 56%,rgba(10,11,13,0) 100%)}
/* Issue 81: branding group enlarged ~8% (logo/subline/burger) and lifted. Base
   top-padding reduced so the group anchors at the safe-area boundary (the highest
   safe position) on notched devices and sits higher on non-notch devices; the
   safe-area inset is still honoured (max()), so no status-bar/notch overlap. */
.m-hero2-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:max(1.75rem,env(safe-area-inset-top)) 1.25rem 0;min-height:2.9rem}
/* Issue 194: MSHRM logo ~15% larger (2.3 -> 2.65rem); width:auto preserves the exact white
   lockup proportions (no stretch/crop). A tiny margin-top re-balances it after enlarging. */
.m-hero2-logo{height:2.65rem;width:auto;display:block;margin-top:0.15rem}
/* Issue 194: nudge the hamburger up a tiny amount; size, right position, touch target and
   safe-area clearance preserved (still floored by env(safe-area-inset-top)). */
.m-hero2-burger{position:absolute;right:1.125rem;top:max(1.2rem,env(safe-area-inset-top));background:none;border:0;padding:0.25rem;display:flex;cursor:pointer}
.m-hero2-eb{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:0.6rem;margin:0.75rem 0 0;color:#fff;
  font-family:var(--font-mono);font-size:0.742rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.m-hero2-eb .m-hero2-dot{width:0.6075rem;height:0.6075rem}
.m-hero2-content{position:relative;z-index:2;margin-top:auto;padding:0 1.5rem 2rem}
.m-hero2-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:3.7rem;line-height:.86;letter-spacing:-.01em;color:#fff;margin:0;text-shadow:0 2px 22px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5)}
.m-hero2-h .ds-accent{display:inline-block;line-height:.92;font-size:.92em}
.m-hero2-loc{display:flex;gap:1.625rem;margin:2rem 0 0}
.m-hero2-loc-pill{display:inline-flex;align-items:center;gap:0.5625rem;background:none;border:0;border-radius:0;padding:0;
  font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.m-hero2-dot{display:inline-block;width:0.5625rem;height:0.5625rem;border-radius:50%;flex:none;animation:mhglow 2.6s var(--ease-inout) infinite}
.m-hero2-dot.is-eb{color:#fc5294;background:#fc5294}
.m-hero2-dot.is-c1{color:#4bfbfd;background:#4bfbfd;animation-name:mhglowDim}
.m-hero2-dot.is-c2{color:#fca705;background:#fca705}
@keyframes mhglow{0%,100%{opacity:.85;box-shadow:0 0 8px 1px currentColor}50%{opacity:1;box-shadow:0 0 14px 3px currentColor}}
@keyframes mhglowDim{0%,100%{opacity:.66;box-shadow:0 0 6px 1px currentColor}50%{opacity:.94;box-shadow:0 0 12px 2px currentColor}}
.m-hero2-sub{font-family:var(--font-sans);font-size:1.12rem;font-weight:400;line-height:1.5;color:var(--fg-on-dark);margin:1.375rem 0 0;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.m-hero2-cta{margin-top:1.875rem;width:100%;justify-content:center}
/* Issue 9: height-aware scaling. When a browser toolbar is expanded (or on shorter
   phones) the hero has less height; scale the headline down and tighten the content block
   so the mushroom keeps its vertical room and the title stays in the dark lower band
   instead of compressing up into the bright cap. Adapts live as the toolbar shows/hides. */
@media (max-height:780px){
  .m-hero2-h{font-size:3.2rem}
  .m-hero2-loc{margin-top:1.5rem}
  .m-hero2-sub{margin-top:1.0625rem}
  .m-hero2-cta{margin-top:1.375rem}
  .m-hero2-content{padding-bottom:1.5rem}
}
@media (max-height:670px){
  .m-hero2-h{font-size:2.8rem}
  .m-hero2-sub{font-size:1.02rem;margin-top:0.875rem}
  .m-hero2-loc{margin-top:1.125rem}
}

/* mobile ticker */
/* The band is its own compositing root (translateZ) and the moving track is promoted
   with will-change/backface-visibility. On iOS/WebKit a large translated text layer can
   otherwise be evicted mid-animation, leaving the band momentarily blank (Issue 5); a
   stable promoted layer keeps the marquee painted every frame. */
.m-ticker{background:var(--ink-900);border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);overflow:hidden;padding:0.875rem 0;transform:translateZ(0)}
/* Mobile-index ticker loop: driven by an EXACT measured pixel distance (--m-tick-dist, one rendered
   copy width, set + kept fresh by MTicker) rather than a percentage of this composited layer. A
   translateX(-50%) percentage is resolved against the layer's cached intrinsic width, which iOS
   Safari can leave stale after a font swap / viewport reflow — the loop then stops equalling one copy
   and exposes a blank gap. The `50%` fallback makes behaviour identical before JS runs (same value,
   no jump, same speed). Scoped to this ticker only via the dedicated mTickLoop keyframe; the shared
   `tick` keyframe (desktop/footer/menu/case-study tickers) is untouched. */
.m-ticker-track{display:flex;white-space:nowrap;width:max-content;animation:mTickLoop 22s linear infinite;will-change:transform;backface-visibility:hidden}
.m-ticker-track span{display:inline-flex;align-items:center;flex:none;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.25rem;color:#fff}
.m-ticker-track span i{width:0.3125rem;height:0.3125rem;border-radius:50%;background:var(--pink-500);margin:0 1.125rem;flex:none}
@keyframes mTickLoop{to{transform:translate3d(calc(-1 * var(--m-tick-dist, 50%)),0,0)}}

/* mobile sections */
.m-sec{padding:var(--section-y-mobile) 1.375rem;position:relative}
.m-sec-h{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:2.5rem;line-height:.96;letter-spacing:-.01em;color:var(--fg-on-light);margin:0.875rem 0 0}
.m-services{background:var(--paper)}
/* Issue 143A: WHAT WE DO eyebrow +30% (0.8 -> 1.04rem), nudged down and modestly closer
   to the heading; pink colour, decorative line, uppercase, tracking, left alignment kept. */
.m-services>.ds-eyebrow{font-size:1.04rem;margin-top:0.375rem}
.m-services>.m-sec-h{margin-top:0.45rem}
.m-svc-scroll{display:flex;gap:1rem;overflow-x:auto;margin:1.875rem -1.375rem 0;padding:0.25rem 1.375rem 0.875rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.m-svc-scroll::-webkit-scrollbar{display:none}
.m-svc{flex:0 0 80%;scroll-snap-align:center;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-lg);padding:1.625rem 1.625rem 1.75rem;box-shadow:var(--shadow-sm);min-height:15.625rem;display:flex;flex-direction:column}
.m-svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.375rem}
.m-svc-ic{display:inline-flex;width:3.5rem;height:3.5rem;border-radius:0.875rem;background:color-mix(in srgb,var(--ic,var(--pink-500)) 11%,#fff);border:1px solid color-mix(in srgb,var(--ic,var(--pink-500)) 22%,var(--line-100));align-items:center;justify-content:center}
.m-svc-n{font-family:var(--font-mono);font-size:0.8125rem;font-weight:600;letter-spacing:.16em;color:var(--fg-on-light-3)}
.m-svc-t{font-weight:600;font-size:1.22rem;line-height:1.1;letter-spacing:-.01em;margin:0 0 0.625rem;color:var(--fg-on-light)}
.m-svc-d{font-size:.96rem;line-height:1.55;color:var(--fg-on-light-2);margin:0}
.m-svc-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1.125rem}
.m-svc-dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--line-200);transition:width .3s var(--ease),background .3s var(--ease)}
.m-svc-dot.is-on{background:var(--pink-500);width:1.375rem;border-radius:0.25rem}

/* mobile services — stacked accordion (What We Do), Lip-Doctor full-stack style */
.m-svc-acc{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.625rem}
.m-svc-acc-row{position:relative;background:#fff;border:1px solid var(--line-200);border-radius:var(--r-lg);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.m-svc-acc-row.is-open{border-color:color-mix(in srgb,var(--acc) 45%,var(--line-200))}
.m-svc-acc-head{display:flex;align-items:center;gap:0.875rem;width:100%;padding:0.9375rem;background:none;border:0;cursor:pointer;text-align:left}
.m-svc-acc-ic{width:2.875rem;height:2.875rem;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acc) 12%,#fff);border:1px solid color-mix(in srgb,var(--acc) 20%,transparent);flex:none;transition:background .3s,border-color .3s}
.m-svc-acc-row.is-open .m-svc-acc-ic{background:color-mix(in srgb,var(--acc) 17%,#fff);border-color:color-mix(in srgb,var(--acc) 34%,transparent)}
.m-svc-acc-t{flex:1;font-family:var(--font-sans);font-weight:600;font-size:1.05rem;letter-spacing:-.005em;color:var(--fg-on-light);line-height:1.18}
.m-svc-acc-chev{flex:none;display:inline-flex;transition:transform .3s var(--ease)}
.m-svc-acc-row.is-open .m-svc-acc-chev{transform:rotate(180deg)}
.m-svc-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.m-svc-acc-body-in{overflow:hidden}
.m-svc-acc-d{margin:0 0.9375rem 0;padding-left:3.75rem;font-family:var(--font-sans);font-size:1.06rem;line-height:1.6;color:var(--fg-on-light-2)}
.m-svc-acc-viewsys{display:inline-flex;align-items:center;gap:0.5rem;margin:0.6875rem 0.9375rem 1rem;padding-left:3.75rem;font-family:var(--font-mono);font-size:0.9375rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);background:none;border:0;cursor:pointer;opacity:.85}
.m-svc-acc-viewsys:hover{opacity:1}
.m-svc-acc-row.is-open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0.1875rem;background:var(--acc)}
.m-svc-cta{margin-top:1.625rem;width:100%;justify-content:center}
.m-sec-cta{margin-top:1.875rem;width:100%;justify-content:center}

.m-proof{background:var(--ink-900);overflow:hidden}
.m-proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.125rem;margin-top:1.625rem}
/* Issue 84: larger Results intro (FERKNOT/VitaminTea body benchmark ~1.1rem/1.6). Width unchanged. */
.m-proof-sub{font-size:1.1rem;line-height:1.64;color:var(--fg-on-dark-2);margin:1.125rem 0 0}
.m-proof-item{border-top:1px solid var(--ink-600);padding-top:1rem}
.m-proof-n{display:block;font-family:var(--font-display);font-weight:900;font-size:3.4rem;line-height:.85;color:#fff;font-variant-numeric:tabular-nums}
/* .m-proof-n.is-pink removed — all mobile proof numbers are white */
.m-proof-c{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-dark-2);margin:0.75rem 0 0;line-height:1.5}

/* interactive mobile proof cells */
.m-proof-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;
  border:0;border-top:1px solid var(--ink-600);background:none;cursor:pointer;padding:1rem 0 0;-webkit-tap-highlight-color:transparent}
/* THE NUMBERS label in brand pink, 1.5x the base eyebrow size (scoped to proof). */
.m-proof .ds-eyebrow--ondark{color:var(--pink-500);font-size:1.2rem;margin-top:0.5rem;margin-bottom:-0.3125rem}
/* Accent line: static base. A short metric-coloured segment (var(--acc)) sits at
   the left; the rest stays the original white@25%. The animated white shine
   (::after, z-index 2) sweeps over the full width on top, unchanged. */
.m-proof-item::before{content:"";position:absolute;top:-1px;left:0;right:0;height:0.125rem;background:linear-gradient(90deg,var(--acc,rgba(255,255,255,.25)) 0,var(--acc,rgba(255,255,255,.25)) 1.75rem,rgba(255,255,255,0.25) 1.75rem);transform:scaleX(1);transform-origin:left;z-index:1}
/* sweep on tap/hover */
.m-proof-item::after{content:"";position:absolute;top:-1px;left:0;right:0;height:0.125rem;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--acc,rgba(255,255,255,.95)),transparent);
  background-size:38% 100%;background-repeat:no-repeat;background-position:-60% 0;opacity:0}
/* auto sequential shine: left→right, one item at a time (3.4 → −38% → 17M → 240), brief pause, repeat */
@media (prefers-reduced-motion: no-preference){
  .m-proof-item::after{animation:proofshine 14s linear infinite}
  .m-proof-item:nth-child(1)::after{animation-delay:0s}
  .m-proof-item:nth-child(2)::after{animation-delay:4s}
  .m-proof-item:nth-child(3)::after{animation-delay:8s}
  .m-proof-item:nth-child(4)::after{animation-delay:12s}
}
/* tap/open: dedicated single sweep takes over */
.m-proof-item:active::after,.m-proof-item.is-open::after{animation:proofsweep .6s ease-in forwards}
/* number glow on tap */
.m-proof-item:active .m-proof-n,.m-proof-item.is-open .m-proof-n{
  text-shadow:0 10px 38px color-mix(in srgb,var(--acc,var(--pink-500)) 40%,transparent)}
/* VIEW CHART: always lit */
.m-proof-cue{display:inline-flex;align-items:center;gap:0.46875rem;margin-top:0.75rem;font-family:var(--font-mono);font-size:0.84rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--acc,var(--pink-500));opacity:.85}

.m-cases{background:var(--paper-2)}
.m-case-list{display:flex;flex-direction:column;gap:1.25rem;margin-top:1.875rem}
.m-case{background:#fff;border:1px solid var(--line-100);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
/* Selected Work media: the sw_* artwork is authored 3:2 (1536×1024). A fixed
   190px height made the box ~1.81:1 and object-fit:cover cropped ~17% of the
   composition top/bottom. Use the native 3:2 aspect so the full banner shows and
   the media scales with card width under the fluid model (no crop, no letterbox). */
.m-case-img{aspect-ratio:3/2;overflow:hidden;background:var(--ink-900)}
.m-case-img img{width:100%;height:100%;object-fit:cover}
.m-case-body{padding:1.375rem}
/* Issue 86: simplified rows are shorter, so labels are enlarged (+24%); slightly
   tighter tracking keeps each row on one line. Colour comes from the inline accent. */
.m-case-tag{font-size:.82rem;letter-spacing:.1em}
.m-case-t{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.8rem;line-height:.95;margin:0.5625rem 0 0.5rem;color:var(--fg-on-light)}
.m-case-d{font-size:1.05rem;line-height:1.55;color:var(--fg-on-light-2);margin:0 0 1rem}
.m-case-chips{display:flex;flex-wrap:wrap;gap:0.375rem}
/* Issue 6: larger, more legible tag pills — consistent size/height/padding across all
   six mobile cards. Scoped to .m-case-chips so the shared desktop .d-chip is untouched.
   Issue 139: tightened size/tracking/padding so the longest 4-tag set (Fastball:
   UX/UI · PRODUCT DESIGN · CONTENT SYSTEM · GROWTH STRATEGY) wraps to 2 lines max,
   not 3, across 320-480. Still scoped to the index work cards only. */
.m-case-chips .d-chip{font-size:0.66rem;letter-spacing:.03em;padding:0.375rem 0.5rem;line-height:1.1}
/* Issue 139: at the narrowest stress widths (<=340px), drop the chip a touch more so
   even Fastball's two longest tags pair up and the set stays 2 lines. 360px+ (every
   modern phone, incl. the 390px reference) keeps the readable 0.66rem above. */
@media (max-width:340px){.m-case-chips .d-chip{font-size:0.6rem;letter-spacing:.02em;padding:0.375rem 0.4375rem}}

.m-ai{background:var(--ink-850);overflow:hidden}
/* Issue 88A: larger section intro (shared by Creative Direction + AI Systems intros). */
.m-ai-body{font-size:1.12rem;line-height:1.62;color:var(--fg-on-dark-2);margin:1.125rem 0 0}
.m-ai-thumbs{display:flex;flex-direction:column;gap:1rem;margin-top:1.625rem}
.m-ai-thumb{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--ink-600)}
.m-ai-thumb-link{display:block;text-decoration:none;color:inherit}
button.m-ai-thumb-link{width:100%;border:0;background:none;padding:0;margin:0;cursor:pointer;text-align:left;font:inherit}
.m-ai-thumb img{width:100%;height:11.875rem;object-fit:cover;display:block}
/* Lighter, bottom-concentrated scrim: dark only behind the bottom label band so
   the thumbnail reads bright; clears the upper ~40% (was .3 at the top, which
   flattened the whole image). */
.m-ai-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,13,.85) 0%,rgba(10,11,13,.5) 20%,rgba(10,11,13,.12) 42%,transparent 62%)}
.m-ai-thumb figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem;display:flex;flex-direction:column;gap:0.1875rem}
.m-ai-brand{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:1;color:#fff}
/* Issue 88B: card subtitle reduced ~15% (1rem -> 0.85rem); brand title unchanged. */
.m-ai-title{font-family:var(--font-mono);font-size:0.85rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-on-dark-2)}

.m-partner{background:var(--paper)}
.m-partner .ds-btn--primary{box-shadow:0 6px 16px -8px rgba(10,11,13,.28)}
.m-partner .ds-btn--primary:hover{box-shadow:0 10px 22px -10px rgba(10,11,13,.32)}
.m-ai .m-ai-eb{color:#22C3D0;white-space:nowrap}
/* Equal-height cards: grid-auto-rows:1fr makes every row the height of the
   tallest card. The card's content column flexes and the VIEW MODEL CTA is
   pinned to the bottom so it aligns consistently across all cards. */
.m-eng-list{display:grid;grid-auto-rows:1fr;gap:0.75rem;margin-top:1.875rem}
.m-eng{display:flex;gap:1.125rem;padding:1.375rem;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line-100)}
.m-eng>div{display:flex;flex-direction:column;flex:1;min-width:0}
.m-eng--clk{cursor:pointer}
.m-eng-n{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.12em;color:var(--pink-500)}
.m-eng-t{font-weight:600;font-size:1.3rem;margin:0 0 0.4375rem;color:var(--fg-on-light)}
.m-eng-d{font-size:1rem;line-height:1.55;color:var(--fg-on-light-2);margin:0}
.m-eng.is-feat{background:var(--ink-900)}
.m-eng.is-feat .m-eng-t{color:#fff}
.m-eng.is-feat .m-eng-d{color:var(--fg-on-dark-2)}
.m-eng-link{margin-top:auto;padding-top:0.875rem;display:inline-flex;align-items:center;gap:0.5rem;background:none;border:0;font-family:var(--font-mono);font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-400)}

/* mobile AI systems (structural mirror) */
.m-sys{background:var(--ink-900);overflow:hidden}
/* AI Systems: tighten eyebrow→heading gap and enlarge the intro paragraph. */
.m-sys .m-sec-h{margin-top:0.375rem}
.m-sys .m-ai-body{font-size:1.08rem;line-height:1.62}
.m-ai-body+.m-flow,.m-flow{display:grid;grid-auto-rows:1fr;gap:0.75rem;margin-top:1.625rem}
/* AI Systems cards — parity with the approved desktop .d-flow-* system, scaled
   for mobile: gradient surface, large card radius, top accent bar, icon tile with
   a colour inset ring, and readable body copy. Keeps the approved 44px icon tile
   and 20px (1.25rem) padding. */
/* Card surface lifted off the near-black page for clearer card definition. */
/* Issue 199: AI Systems cards are scroll-only (no tap/click) — drop the pointer cursor. */
.m-flow-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#1c2029,#16191f);border:1px solid var(--ink-500);border-radius:var(--r-lg);padding:1.375rem;cursor:default;-webkit-tap-highlight-color:transparent;transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.m-flow-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ic);opacity:.45;transition:opacity .35s var(--ease),height .35s var(--ease);z-index:1}
/* Issue 139: internal accent wash — the dimensional depth of the active card.
   Mirrors the Lip Doctor .lv3-gs-node.is-on treatment (radial --acc wash from the
   top, not a flat full-card tint). The wash sits BELOW the card content (z-index:0;
   content is lifted to z-index:1) so it illuminates the card interior around the
   icon without washing over the copy. */
/* Issue 199: ~15% stronger interior lighting (20% -> 23% accent) spread slightly more broadly
   through the card (radial 120%/70% -> 135%/82%, fade 62% -> 70%). INTERIOR wash only — the
   exterior halo/box-shadow and border in .is-active are intentionally left unchanged. */
.m-flow-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(135% 82% at 26% 0%,color-mix(in srgb,var(--ic) 23%,transparent),transparent 70%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;z-index:0}
.m-flow-head,.m-flow-d{position:relative;z-index:1}
/* Issue 139: active glow — driven by the per-card --ic accent, mirroring the Lip
   Doctor .lv3-gs-node.is-on treatment: internal radial wash + subtly illuminated
   border + restrained outer halo + a stronger glow around the icon + a small lift
   for depth. Exactly one card carries .is-active at a time; dimensions/copy/icons/
   radii/base bg/accents are unchanged — only the dimensional active state responds. */
.m-flow-card.is-active{border-color:color-mix(in srgb,var(--ic) 55%,var(--ink-500));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 30%,transparent),0 0 0 1px color-mix(in srgb,var(--ic) 22%,transparent),0 22px 48px -22px color-mix(in srgb,var(--ic) 55%,transparent);transform:translateY(-3px)}
.m-flow-card.is-active::before{opacity:1;height:3px}
.m-flow-card.is-active::after{opacity:1}
.m-flow-card.is-active .m-flow-ic{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 75%,transparent),0 0 26px -2px color-mix(in srgb,var(--ic) 75%,transparent);transform:scale(1.04)}
.m-flow-ic{transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
/* Icon + title share one vertically-centred header row. */
.m-flow-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.m-flow-ic{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;flex:none;border-radius:0.875rem;background:color-mix(in srgb,var(--ic) 18%,var(--ink-900));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 40%,transparent)}
.m-flow-k{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.55rem;line-height:1;letter-spacing:.01em;color:#fff}
.m-flow-d{font-size:1.06rem;line-height:1.6;color:var(--fg-on-dark-2);margin:0}
/* Full-bleed tools strip: span the mobile SHELL (not the viewport). The old
   left:50%/translateX(-50%)/width:100vw escaped to the viewport, overflowing
   the centred 480px shell above 480px. Cancel the .m-sec 22px (1.375rem) side
   padding with equal negative margins so the strip is exactly shell-wide at any
   width — 430px shell → 430px strip, 480px shell → 480px strip, no overflow. */
.m-tools{position:relative;width:auto;margin:2.625rem -1.375rem calc(-1 * var(--section-y-mobile));background:var(--ink-850);border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);overflow:hidden;padding:0.9375rem 0}
.m-tools-track{display:flex;width:max-content;white-space:nowrap;animation:tick 28s linear infinite}
.m-tool{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:0.75rem;font-weight:500;letter-spacing:.08em;color:#fff;margin:0 1.125rem}
.m-tool i{width:0.375rem;height:0.375rem;border-radius:0.125rem;background:var(--ai-500);box-shadow:0 0 7px var(--ai-500);transform:rotate(45deg)}
.m-cap-list{list-style:none;margin:1.375rem 0 0;padding:0;border-top:1px solid var(--ink-700)}
.m-cap-row{border-bottom:1px solid var(--ink-700)}
.m-cap-btn{display:flex;align-items:center;gap:1rem;width:100%;background:none;border:0;padding:1.375rem 0;cursor:pointer;text-align:left}
.m-cap-n{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;letter-spacing:.06em;color:var(--ai-500);flex:none;transition:text-shadow .35s var(--ease),color .35s var(--ease);text-shadow:0 0 9px color-mix(in srgb,var(--ai-500) 60%,transparent)}
.m-cap-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.9rem;color:#fff;line-height:1;flex:1}
.m-cap-chev{display:inline-flex;flex:none;transition:transform .35s var(--ease)}
.m-cap-row.is-open .m-cap-chev{transform:rotate(180deg)}
/* Active number: bright neon ultraviolet (not white), with a tasteful glow. */
.m-cap-row.is-open .m-cap-n{color:#c79bf2;text-shadow:0 0 16px var(--ai-500),0 0 5px var(--ai-500)}
.m-cap-panel p{margin:0;padding:0.125rem 0 1.25rem 2.875rem;font-size:1.06rem;line-height:1.62;color:var(--fg-on-dark-2)}
.m-sys-cta{margin-top:1.75rem;width:100%;justify-content:center}

.m-final{background:var(--ink-900);overflow:hidden}
/* Issue 89A: "START HERE" eyebrow nearly doubled (0.8rem -> 1.45rem); pink colour +
   decorative line preserved. Heading gap trimmed ~5% (0.875rem -> 0.83rem) to sit
   slightly closer to the heading. Scoped to .m-final so other eyebrows are untouched. */
/* Issue 141: START HERE eyebrow ~8% smaller (1.45 -> 1.334rem) and nudged down so it
   sits modestly closer to the heading; colour/line/tracking/alignment unchanged. */
.m-final .ds-eyebrow{font-size:1.334rem;margin-top:0.5rem}
.m-final-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:2.6rem;line-height:.92;color:#fff;margin:0.5rem 0 1.5rem}

.m-footer{background:var(--ink-900);overflow:hidden;padding:3.75rem 0 0;border-top:1px solid var(--ink-600)}
.m-footer>div{padding:0 1.375rem}
.m-footer-logo{height:8.875rem;margin:0 auto 1.125rem;display:block}
.m-footer-tag{color:var(--fg-on-dark-2);font-size:.9rem;line-height:1.5;margin:0 0 1.5rem;text-align:center}
.m-footer-cta{display:flex;flex-direction:column;align-items:center;gap:0.75rem;margin-bottom:1.625rem}
.m-footer-cta .ds-btn{width:min(16.25rem,100%);min-height:2.5rem;padding:1rem 1.625rem;font-size:.75rem;gap:0.5625rem;justify-content:center}
.m-footer-contact{display:flex;flex-direction:column;gap:0.625rem;padding-bottom:1.5rem}
.m-footer-contact a{color:var(--fg-on-dark-2);font-size:1rem}
.m-footer-contact .m-footer-site{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-500);margin-top:0.25rem;text-decoration:none}
.m-footer-nav{display:flex;flex-wrap:wrap;gap:0.875rem 1.5rem;padding:1.375rem 0;border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);margin-bottom:1.25rem}
.m-footer-nav a{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-dark-2)}
.m-footer-info{display:flex;flex-direction:column;gap:0.5rem;padding-bottom:1.625rem;font-family:var(--font-mono);font-size:0.625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.m-footer>.m-footer-ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--ink-600);background:var(--ink-850);padding:1.125rem 0;margin-bottom:0}
.m-footer-ticker-track{display:flex;align-items:center;width:max-content;animation:tick 30s linear infinite}
.m-footer-ticker-track span{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.3375rem;color:var(--fg-on-dark-2)}
.m-footer-ticker-track span i{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--pink-500);margin:0 1.625rem}

.m-sticky{position:absolute;left:0;right:0;bottom:0;z-index:55;padding:0.875rem 1.375rem max(1.375rem,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,#0a0b0d 60%,transparent);
  transform:translateY(125%);opacity:0;pointer-events:none;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.m-sticky.is-show{transform:none;opacity:1;pointer-events:auto}
.m-sticky .ds-btn{width:100%;justify-content:center}

/* mobile sticky scroll header — hidden at top of hero, slides in after scroll */
.m-stickyhead{position:absolute;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  padding:max(0.8125rem,env(safe-area-inset-top)) 1.25rem 0.8125rem;background:rgba(10,11,13,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.m-stickyhead.is-show{transform:translateY(0);opacity:1;pointer-events:auto}
.m-stickyhead-logo{height:1.875rem;width:auto;display:block}
.m-stickyhead-burger{background:none;border:0;padding:0.25rem;display:flex;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .d-ticker-track,.m-ticker-track,.m-menu-ticker-track,.d-footer-ticker-track,.m-footer-ticker-track,
  .m-tools-track,.d-tools-track,.d-flow-signal,.d-flow-pulse,.d-loc-dot,.d-loc-dot.is-pink,.d-loc-dot.is-orange,.d-loc-dot.is-teal,.d-footer-dot,
  .d-sys-rings span,.myc.is-glow circle,.netfield-nodes circle,.netfield-quiet-nodes circle,
  .aifield-pulse,.aifield-scan,.aifield-dot,.d-loc-dot.is-green,.netq-glowline,
  .cine-glow,.cine-streak,.cine-scan{animation:none}
}
.ds-accent--ai{color:#B98BE6}
/* Issue 85A: only the word "multiplier" recolours to the established bright teal
   (#22C3D0, same value as .ds-eyebrow--teal). "force" keeps the ds-accent--ai purple;
   both keep the serif italic. Class only appears in the mobile heading, so desktop is
   unaffected. Compound selector keeps specificity above .ds-accent--ai. */
.ds-accent--ai.m-sys-teal{color:#22C3D0}

/* =================================================================
   COOKIE CONSENT  (ck-)  — shared component, two layouts
   ================================================================= */
.ck-card{background:var(--ink-900);border:1px solid var(--ink-600);box-shadow:var(--shadow-darklift)}
.ck-head{display:flex;align-items:center;gap:0.5625rem}
.ck-ic{display:inline-flex;align-items:center;justify-content:center;color:var(--pink-500)}
.ck-eyebrow{font-family:var(--font-mono);font-size:0.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-on-dark-2)}
.ck-body{font-family:var(--font-sans);color:var(--fg-on-dark-2);margin:0.75rem 0 0}
.ck-link{color:var(--pink-500);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--pink-500) 40%,transparent);transition:border-color .2s var(--ease)}
.ck-link:hover{border-bottom-color:var(--pink-500)}
.ck-actions{display:flex;gap:0.625rem;margin-top:1.125rem}
.ck-btn{flex:1;justify-content:center}
.ck-btn--ghost{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:.8125rem;letter-spacing:var(--track-label);text-transform:uppercase;
  padding:1.125rem 1.75rem;min-height:2.75rem;border-radius:var(--r-pill);cursor:pointer;
  background:transparent;color:var(--fg-on-dark-2);border:1px solid var(--ink-500);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.ck-btn--ghost:hover{color:#fff;border-color:var(--ink-500);background:var(--ink-800)}

/* desktop — floating card, bottom-left, fixed to viewport */
.ck--desktop{position:fixed;left:24px;bottom:24px;z-index:200;width:380px;max-width:calc(100vw - 48px);
  transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.ck--desktop.is-show{transform:none;opacity:1;pointer-events:auto}
.ck--desktop .ck-card{border-radius:var(--r-md);padding:24px}
.ck--desktop .ck-body{font-size:.95rem;line-height:1.55}
.ck--desktop .ck-btn,.ck--desktop .ck-btn--ghost{padding:13px 20px;min-height:42px;font-size:.75rem}

/* mobile — bottom sheet, absolute inside the phone frame */
.ck--mobile{position:absolute;left:0;right:0;bottom:0;z-index:80;padding:0.875rem;
  transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .46s var(--ease),opacity .46s var(--ease)}
.ck--mobile.is-show{transform:none;opacity:1;pointer-events:auto}
.ck--mobile .ck-card{border-radius:var(--r-lg);padding:1.25rem;background:color-mix(in srgb,var(--ink-900) 95%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.ck--mobile .ck-head{gap:0.625rem}
.ck--mobile .ck-eyebrow{font-size:0.6875rem;letter-spacing:.16em}
.ck--mobile .ck-body{font-size:.9rem;line-height:1.55}
.ck--mobile .ck-actions{flex-direction:column;gap:0.625rem}
.ck--mobile .ck-btn,.ck--mobile .ck-btn--ghost{width:100%;padding:0.875rem 1.375rem;min-height:2.875rem;font-size:.75rem}

@media (prefers-reduced-motion:reduce){
  .ck--desktop,.ck--mobile{transition:opacity .3s linear}
}

/* mobile additions for this pass */
.m-tool-logo{height:1.25rem;width:auto;max-width:2.125rem;object-fit:contain;display:block}
.m-web{background:var(--paper)}
/* Issue 87B: section eyebrow +20% (0.8rem -> 0.96rem). Scoped to the direct child so
   only "LIVE WEBSITE WORK" grows, not the per-card pink labels. */
.m-web>.ds-eyebrow{font-size:.96rem}
/* Issue 87C: larger section intro. */
.m-web-intro{font-size:1.12rem;line-height:1.6;color:var(--fg-on-light-2);margin:0.875rem 0 0}
.m-web-cta{margin:1.875rem 0 0;width:100%;justify-content:center}
.m-web-list{display:flex;flex-direction:column;gap:1.125rem;margin-top:1.625rem}
.m-web-card{position:relative;display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-lg);overflow:visible;box-shadow:var(--shadow-sm)}
/* Phone-over-divider layering (Issue 9): the hairline divider is the body's top
   border and sits on the LOWER layer; the media (z2) + the device drop-shadow render
   in FRONT of it, with the bottom padding reduced just enough that the shadow crosses
   the divider into the body. overflow:visible on the card + media means the shadow is
   never clipped; rounded inner corners preserve the card silhouette without clipping. */
.m-web-img{position:relative;z-index:2;height:auto;overflow:visible;background:linear-gradient(180deg,#fff,#FAFAF9);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:1.375rem 1.375rem 1rem}
/* Issue 8: the device + its drop-shadow are promoted to their own stable compositing
   layer (translateZ + backface-visibility) so the shadow is never intermittently dropped,
   squared, or repainted late during scroll. overflow:visible on the card/media (above)
   keeps the full natural shadow in front of the divider, never clipped. */
/* Issue 87A: the image layer (z-index:2) already sits above the .m-web-body divider
   (z-index:1), but the phone shadow was faint and stayed within the image padding, so
   the divider line read THROUGH it as a "cut". Deepening the lower drop-shadow lets the
   phone shadow pool down across the divider and subtly into the white panel, so the
   device clearly floats above the divider. Phone position, divider and image unchanged. */
/* Issue 140C: the composite device image (laptop + a taller phone) now visibly CROSSES
   the image/content divider. A negative bottom margin pulls the body (and its top hairline
   divider) up under the lower portion of the image; the image keeps z-index:2 so the phone
   and its shadow render IN FRONT of the divider and the white panel, while the body's larger
   top padding keeps the title clear below the phone. overflow:visible on card + media means
   the phone is never clipped; the laptop stays in its position within the image region. */
/* Issue 197: the device composite sat with ~23px more empty space on the right than the left and
   crossed the divider only slightly. translateX recentres the VISIBLE artwork (balances L/R), a
   small scale makes the media slightly larger, and a deeper negative margin-bottom makes the phone
   cross the grey divider more. The four PNGs share near-identical margins, so one tuned set balances
   all four (verified per-card by rendered measurement). Quality/crop/shadow preserved. */
.m-web-img img{position:relative;z-index:2;display:block;width:100%;height:auto;object-fit:contain;margin-bottom:-2.9rem;filter:drop-shadow(0 4px 7px rgba(10,11,13,.10)) drop-shadow(0 21px 26px rgba(10,11,13,.28));transform:translateX(10px) scale(1.04) translateZ(0);backface-visibility:hidden}
/* Issue 142: overflow:hidden + the bottom radius clip the absolutely-positioned bottom
   accent (below) to the card's lower curve so it never protrudes past the rounded corners.
   The phone overlaps from the sibling .m-web-img layer (z2), so it is NOT clipped by this. */
/* Issue 170: the lower copy block sat too low. Trim the large top padding so the whole block
   (pink eyebrow, title, blue descriptor, paragraph) moves up and the excess white space between
   the divider/phone and the copy shrinks. Still clears the overlapping phone (margin-bottom:-2.5rem
   on .m-web-img) with room to spare, so divider + device shadow are untouched. */
/* Issue 197: copy block higher — trim the top padding so the gap between the (now deeper-overlapping)
   phone and the copy is ~halved while still clearing the device. Divider + shadow preserved. */
.m-web-body{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--line-200);border-radius:0 0 var(--r-lg) var(--r-lg);padding:2rem 1.25rem 1.375rem}
.m-web-main{flex:1;min-width:0}
.m-web-qr{flex:none;display:flex;flex-direction:column;align-items:center;gap:0.4375rem;padding-top:0.125rem}
.m-web-qr-img{width:4.625rem;height:4.625rem;display:block;border-radius:0.4375rem;background:#fff;padding:0.1875rem;box-shadow:var(--shadow-sm)}
.m-web-scan{font-family:var(--font-mono);font-size:0.53125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-light-3);text-align:center}
.m-web-accent{position:absolute;left:0;right:0;bottom:0;height:0.1875rem;background:var(--pink-500)}
/* Issue 87G: LA Dental password row ~2.2x (0.625rem -> 1.375rem) for phone readability;
   grey label + pink value + exact text preserved, with more line-height and top margin. */
/* Issue 237C: password line matches the body copy size above it (.m-web-d = 1.08rem); both
   "Password:" and the value drop from 1.375rem. The value keeps its pink/weight distinction below. */
.m-web-pw{font-family:var(--font-mono);font-size:1.08rem;line-height:1.3;letter-spacing:.03em;color:var(--fg-on-light-2);margin:1rem 0 0}
.m-web-pw strong{color:var(--pink-500);font-weight:600}
/* Issue 87D: pink card label substantially larger (0.59rem -> 0.8rem, +35%). */
.m-web-label{font-family:var(--font-mono);font-size:0.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-500)}
/* Issue 87E: card title +12.5% (1.6rem -> 1.8rem). Issue 140A: +15% (1.8 -> 2.07rem). */
.m-web-t{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:2.07rem;line-height:.98;margin:0.5rem 0 0.3125rem;color:var(--fg-on-light)}
/* Issue 87F: metadata + description substantially larger for real-phone readability.
   Issue 140B: category line +15% (0.82 -> 0.94rem) and recoloured to one consistent
   refined light blue (sufficient contrast on white) across all four cards; uppercase
   + separators preserved. */
/* Issue 170: blue descriptor line ~10% heavier (mono 400 -> 500) across all four cards;
   colour, size, wording, tracking unchanged. */
.m-web-type{font-family:var(--font-mono);font-size:0.94rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#2D82C8;margin:0 0 0.75rem}
.m-web-d{font-size:1.08rem;line-height:1.58;color:var(--fg-on-light-2);margin:0}
.m-web-link{display:inline-flex;align-items:center;gap:0.4375rem;background:none;border:0;padding:0;font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-900)}
.m-st{display:inline-flex;align-items:center;gap:0.5rem}
/* Issue 83: enlarge ONLY the three location rows (dots + labels) ~10% in the shared
   mobile footer for physical-phone legibility. Scoped to .m-footer-info .m-st so the
   surrounding copyright/EST lines are untouched, and to the footer so the globally
   shared .d-loc-dot (also used on desktop and elsewhere) is not affected. */
.m-footer-info .m-st{font-size:0.6875rem}
.m-footer-info .m-st .d-loc-dot{width:8.8px;height:8.8px}

/* mobile founder section */
.m-founder{background:var(--paper-2)}
.m-founder-imgwrap{position:relative;margin:1.5rem 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);box-shadow:var(--shadow-md);aspect-ratio:4/5}
.m-founder-imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.m-founder-badge{position:absolute;left:0.875rem;bottom:0.875rem;background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:0.75rem 1rem;display:flex;flex-direction:column;gap:0.1875rem;box-shadow:var(--shadow-lg)}
.m-founder-badge-k{font-family:var(--font-mono);font-size:0.59375rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-500)}
.m-founder-badge-v{font-family:var(--font-sans);font-size:.9rem;font-weight:500;color:#fff}
.m-founder-body{font-size:1rem;line-height:1.6;color:var(--fg-on-light-2);margin:1.125rem 0 0}
.m-founder-attr{display:flex;flex-direction:column;gap:0.125rem;margin:1.5rem 0 1.25rem;padding-left:1rem;border-left:2px solid var(--pink-500)}
.m-founder-name{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--fg-on-light)}
.m-founder-role{font-family:var(--font-mono);font-size:0.65625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-light-3)}
.m-founder-cta{width:100%;justify-content:center}
.m-founder .m-sec-h{font-size:2.7rem}
.m-nowrap{white-space:nowrap}

/* ===== Service-card premium modals (index "What we do") ===== */
.svcm-overlay{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;padding:1.75rem;pointer-events:none;background:rgba(5,6,8,0);transition:background .25s ease}
.svcm-overlay.is-pinned{pointer-events:auto;background:rgba(5,6,8,.72);backdrop-filter:blur(8px);animation:svcmFade .22s ease}
.svcm.svcm--eng{background:radial-gradient(130% 130% at 80% -8%,color-mix(in srgb,var(--acc) 22%,#191c24),#15171e 66%)}
.svcm-overlay--m .svcm--eng .svcm-node{font-size:0.75rem !important}
.svcm-overlay--m .svcm--eng .svcm-axis{font-size:0.5625rem !important}
.svcm-overlay--m{position:absolute;padding:1rem}
.svcm{pointer-events:auto;position:relative;width:min(56.25rem,100%);max-height:90vh;overflow:hidden;border-radius:1.5rem;padding:2.125rem 2.5rem 1.875rem;color:#fff;background:radial-gradient(130% 130% at 82% -10%,color-mix(in srgb,var(--acc) 18%,#0c0d11),#0a0b0d 58%);border:1px solid color-mix(in srgb,var(--acc) 48%,transparent);box-shadow:0 50px 110px -34px rgba(0,0,0,.85),0 0 70px -26px color-mix(in srgb,var(--acc) 55%,transparent);animation:svcmPop .34s var(--ease)}
@keyframes svcmFade{from{opacity:0}to{opacity:1}}
@keyframes svcmPop{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
.svcm-glow{position:absolute;top:-22%;right:-12%;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 32%,transparent),transparent 65%);filter:blur(46px);pointer-events:none}
.svcm-x{position:absolute;top:1.125rem;right:1.125rem;width:2.375rem;height:2.375rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;z-index:3;transition:background .2s}
.svcm-x:hover{background:rgba(255,255,255,.16)}
.svcm-label{position:relative;display:block;font-family:var(--font-mono);font-size:0.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.svcm-h{position:relative;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:2.7rem;line-height:.95;letter-spacing:-.01em;color:#fff;margin:0.8125rem 0 0;max-width:20ch}
.svcm-copy{position:relative;font-family:var(--font-sans);font-size:1rem;line-height:1.55;color:var(--fg-on-dark-2);margin:0.875rem 0 0;max-width:56ch}
.svcm-vis{position:relative;margin-top:1.125rem}
.svcm-vis svg{width:100%;height:auto;display:block}
.svcm-axis{fill:rgba(255,255,255,.4);font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase}
.svcm-node{fill:#fff;font-family:var(--font-mono);font-size:0.75rem;font-weight:600;letter-spacing:.06em}
/* mobile graph popups: maximise modal width + larger labels so the diagrams are readable on a phone */
/* Issue 195: tighter overlay gutter so each popup uses more of the mobile WIDTH. */
.svcm-overlay--m{padding:0.45rem !important}
/* Issues 168/171/178/181/192 (containment) + 195 (larger/immersive): every mobile popup must FIT
   the usable viewport with no internal scroll or clipping. The modal is a flex column capped at
   min(94vh,94dvh) (dynamic browser bars + safe area) with a min-height so even light-content popups
   fill more of the screen; the diagram region (.svcm-vis, flex:1) then GROWS each visual to its own
   available space — so every popup is reviewed/scaled by its real content, not a blind global value,
   and the SVG still scales to fit (never overflows/clips). */
.svcm-overlay--m .svcm{padding:1.6rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom)) !important;border-radius:1.25rem !important;display:flex !important;flex-direction:column;min-height:min(74vh,74dvh);max-height:min(94vh,94dvh);box-sizing:border-box}
.svcm-overlay--m .svcm-body{overflow:visible;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* Final audit (Concern E / no-horizontal-scroll): on the narrow mobile card the
   decorative corner glow (right:-12%) and the visual's negative-margin bleed leave
   a few px of horizontal scroll. Contain the glow within the card and clip the body
   x-axis so no mobile popup can scroll sideways. Mobile-only; desktop untouched. */
.svcm-overlay--m .svcm-glow{right:0;width:55%}
/* Issue 4 popups: real-phone readability for the growth-system popups. Larger category,
   title and body, and dramatically more legible + brighter chart labels (MONTH 1/30/60,
   nodes). Sized to stay within the phone frame without internal scrolling. */
.svcm-overlay--m .svcm-label{font-size:0.85rem !important;letter-spacing:.14em !important;padding-right:2.5rem}
.svcm-overlay--m .svcm-h{font-size:1.8rem !important;line-height:1.02 !important;margin-top:0.6875rem !important}
.svcm-overlay--m .svcm-copy{font-size:1.08rem !important;line-height:1.6 !important;color:#E4E7ED !important;max-width:none !important;margin-top:0.8125rem !important}
/* Issues 168/171/178/181/192: the diagram region takes the remaining column height and the
   SVG (or grid) inside scales DOWN to fit it — no internal scroll, no clipped final node/pill. */
.svcm-overlay--m .svcm-vis{margin-top:0.75rem !important;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.svcm-overlay--m .svcm-vis svg{width:auto !important;height:auto !important;max-width:100% !important;max-height:100% !important;margin:0 auto}
.svcm-overlay--m .svcm-vis > *{max-height:100%;min-height:0}
.svcm-overlay--m .svcm-node{font-size:1.05rem !important;fill:#fff !important}
.svcm-overlay--m .svcm-axis{font-size:1rem !important;fill:rgba(255,255,255,.78) !important;letter-spacing:.06em !important}
.d-svc.is-active{border-color:color-mix(in srgb,var(--ic) 55%,transparent) !important;box-shadow:0 0 0 1px color-mix(in srgb,var(--ic) 24%,transparent),0 24px 50px -28px color-mix(in srgb,var(--ic) 48%,transparent) !important;transform:translateY(-4px)}
.d-svc.is-active::after{transform:scaleX(1)}
.m-svc-acc-row{cursor:pointer}
.m-svc-acc-ic{cursor:pointer;padding:0}
/* chart entrance animations (~1.5s grow / draw / appear) */
/* Issue 143B: the intentional in-chart movement of the What We Do system popups
   (ServiceModal) is slowed to ~2.7x its original duration so the diagram reads as a
   deliberate build. The svcm-draw/area/dot/bar classes are used ONLY by ServiceModal, so
   their base durations AND stagger delays are scaled here (×2.7) — order, easing and final
   state preserved. The modal open (svcmPop/svcmFade), overlay, blur and close are untouched
   so the popup still opens immediately. Original baselines: draw 1.5s/.12s, area .9s/.55s,
   dot .4s/1.4s, bar .75s. No prior "slow desktop chart animations" commit exists, so these
   are the genuine originals (no double-slow). */
.svcm-draw{stroke-dasharray:2600;stroke-dashoffset:2600;animation:svcmDraw 4.05s var(--ease) .324s forwards}
@keyframes svcmDraw{to{stroke-dashoffset:0}}
.svcm-area{opacity:0;animation:svcmCFade 2.43s ease 1.485s forwards}
.svcm-dot{opacity:0;animation:svcmCFade 1.08s ease 3.78s forwards}
@keyframes svcmCFade{to{opacity:1}}
.svcm-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:svcmGrowY 2.025s var(--ease) forwards}
@keyframes svcmGrowY{to{transform:scaleY(1)}}
.svcm-fade{opacity:0;animation:svcmCFadeUp .6s var(--ease) forwards}
/* svcm-fade is shared with the case-study designed-popups; slow it ONLY inside the What We
   Do system popups (marked .svcm--sys) so those case-study popups keep their current speed. */
.svcm--sys .svcm-fade{animation-duration:1.62s}
@keyframes svcmCFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.svcm-draw,.svcm-area,.svcm-dot,.svcm-bar,.svcm-fade{animation:none;opacity:1;stroke-dashoffset:0;transform:none}}
@media (max-width:640px){
  .svcm{padding:1.625rem 1.375rem 1.5rem;border-radius:1.25rem}
  .svcm-h{font-size:1.92rem}
  .svcm-copy{font-size:.92rem;margin-top:0.6875rem}
}

@keyframes mgFadeIn{0%{opacity:0}100%{opacity:1}}

/* ============================================================
   LIVING-MUSHROOM HERO ANIMATION — non-destructive, LIGHT-ONLY.
   The static <img> base stays untouched underneath. The mushroom
   NEVER moves or scales. Light-only treatment:
     .mush-anim-glow  — screen-blended copy masked to the INNER gill
                        light; brightens + fills inward (screen keeps
                        the black background untouched, so the glow
                        cannot bleed outside the mushroom or blur)
     .mush-anim-lglow — same, masked to the glow BELOW in the water;
                        shares the cycle so upper + lower light rise
                        and fall together
     .mush-anim-water — waterline ripple: sub-pixel SVG displacement
   Disable with HERO_ANIM=false → exact static hero returns.
   ============================================================ */
.mush-anim,.mush-anim-img{pointer-events:none}
.mush-anim{position:absolute;inset:0;z-index:0}
.mush-anim-glow,.mush-anim-lglow,.mush-anim-water{position:absolute;pointer-events:none;overflow:hidden}
.mush-anim-glow .mush-anim-img,.mush-anim-lglow .mush-anim-img,.mush-anim-water .mush-anim-img{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Shared LIGHT cycle — pure brightness/opacity (NO transform, NO blur).
   Screen blend means black pixels stay black: only the already-lit orange
   areas brighten, and the illuminated region fills inward as the midtone
   gills lift — light "spreads" inside the mushroom without escaping it. */
@keyframes mushLight{
  0%,100%{opacity:.06;filter:brightness(1)}
  50%{opacity:.72;filter:brightness(1.2)}
}
.mush-anim-glow,.mush-anim-lglow{mix-blend-mode:screen}
.mush-anim-glow .mush-anim-img,.mush-anim-lglow .mush-anim-img{will-change:opacity,filter;
  animation:mushLight 9s ease-in-out infinite}

/* ---- DESKTOP : base box = right:0;bottom:0;height:123%;width:79%;object-position:96% 50% ---- */
.d-mush-glow{right:0;bottom:0;top:auto;height:123%;width:79%;
  -webkit-mask:radial-gradient(50% 56% at 78% 56%,#000 60%,transparent 92%);
          mask:radial-gradient(50% 56% at 78% 56%,#000 60%,transparent 92%)}
.d-mush-glow .mush-anim-img{object-fit:cover;object-position:96% 50%}
.d-mush-lglow{right:0;bottom:0;top:auto;height:123%;width:79%;
  -webkit-mask:radial-gradient(40% 30% at 80% 95%,#000 50%,transparent 90%);
          mask:radial-gradient(40% 30% at 80% 95%,#000 50%,transparent 90%)}
.d-mush-lglow .mush-anim-img{object-fit:cover;object-position:96% 50%}
.d-mush-water{right:0;bottom:0;top:auto;height:123%;width:79%;
  -webkit-mask:linear-gradient(to top,#000 0%,#000 6%,rgba(0,0,0,.45) 11%,transparent 17%);
          mask:linear-gradient(to top,#000 0%,#000 6%,rgba(0,0,0,.45) 11%,transparent 17%)}
.d-mush-water .mush-anim-img{object-fit:cover;object-position:96% 50%}

/* ---- MOBILE : base box = inset:0;object-position:50% 36% ---- */
.m-mush-glow{inset:0;
  -webkit-mask:radial-gradient(44% 32% at 80% 33%,#000 58%,transparent 92%);
          mask:radial-gradient(44% 32% at 80% 33%,#000 58%,transparent 92%)}
.m-mush-glow .mush-anim-img{object-fit:cover;object-position:50% 36%}
.m-mush-lglow{inset:0;
  -webkit-mask:radial-gradient(42% 14% at 80% 67%,#000 50%,transparent 90%);
          mask:radial-gradient(42% 14% at 80% 67%,#000 50%,transparent 90%)}
.m-mush-lglow .mush-anim-img{object-fit:cover;object-position:50% 36%}
/* The waterline-ripple layer is opaque (not screen-blended) and its shared SVG
   displacement filter clips the image to a hard-edged region (y=0.78). In the
   full-height body-scroll hero that hard top edge fell just below the location row
   and painted a bright horizontal seam; its bottom edge previously exposed a
   detached turquoise cap fragment below the CTA. Feather BOTH edges with the
   mobile-only mask: fully transparent above ~20% (the layer fades out before the
   hard filter boundary at 22% — no seam) and below ~8% (the cap fragment stays
   hidden). The sub-pixel ripple still plays in the soft central band; the base
   image, orange reflection, glow and main mushroom are untouched. The shared filter
   is unchanged, so desktop (.d-mush-water) is unaffected. */
.m-mush-water{inset:0;
  -webkit-mask:linear-gradient(to top,transparent 0%,transparent 8%,#000 13%,#000 17%,transparent 20%);
          mask:linear-gradient(to top,transparent 0%,transparent 8%,#000 13%,#000 17%,transparent 20%)}
.m-mush-water .mush-anim-img{object-fit:cover;object-position:50% 36%}

/* pause animation when the tab/page is hidden (set by a tiny visibility listener) */
html.anim-paused .mush-anim-glow .mush-anim-img,
html.anim-paused .mush-anim-lglow .mush-anim-img{animation-play-state:paused}

/* fully disable the living treatment for reduced-motion users → static hero */
@media (prefers-reduced-motion:reduce){
  .mush-anim{display:none}
}

/* Issue 192: RECOGNITION sits inside the brand-diagram circle — keep it small on mobile (the
   generic .svcm-node 1.05rem !important would oversize it past the circle outline). */
.svcm-overlay--m .svcm-node--center{font-size:10.5px !important}
/* Issue 191: Websites popup mono anchor CTA — teal label, warm-gold arrow, centred, comfy tap. */
/* Issue 236: "VIEW WEBSITES" text is white (was teal #22C3D0); the arrow keeps its orange via
   .svcm-anchor-arrow below. Mobile-only (this CTA renders only for variant==='mobile'); font, size,
   weight, letter-spacing, position, alignment, text<->arrow gap, destination and tap behaviour are
   all unchanged. */
.svcm-anchor-cta{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin:0.9rem auto 0;padding:0.55rem 0.5rem;background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:0.95rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;-webkit-tap-highlight-color:transparent}
.svcm-anchor-arrow{color:#FF9A3C;font-size:1.05em;line-height:1}
/* Issue 249 (desktop index): "VIEW WEBSITES" CTA placed OUTSIDE the Website Conversion popup
   card, just beneath it. The overlay stacks card + CTA in a centred column so the card keeps its
   exact width/dimensions. The pill is tinted with the popup accent (teal) and keeps the mobile
   CTA's white label + warm-gold arrow. Desktop-only (renders only for variant!=='mobile'). */
.svcm-overlay--stack{flex-direction:column}
.svcm-deck-cta{margin-top:1.125rem;display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;padding:0.72rem 1.5rem;border-radius:999px;cursor:pointer;font-family:var(--font-mono);font-size:0.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;pointer-events:auto;background:color-mix(in srgb,var(--acc) 10%,rgba(12,13,17,.6));border:1px solid color-mix(in srgb,var(--acc) 52%,transparent);box-shadow:0 12px 30px -18px color-mix(in srgb,var(--acc) 60%,transparent);transition:background .22s ease,border-color .22s ease,transform .22s ease}
.svcm-deck-cta:hover{background:color-mix(in srgb,var(--acc) 18%,rgba(12,13,17,.7));border-color:color-mix(in srgb,var(--acc) 72%,transparent);transform:translateY(-2px)}
.svcm-deck-cta-arrow{color:#FF9A3C;font-size:1.05em;line-height:1}
/* Issue 192: premium Branding CTA — supporting copy (white) outside a rounded pill button. */
.svcm-explore-wrap{margin-top:1rem;display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center}
.svcm-explore-copy{font-family:var(--font-sans);font-size:0.95rem;line-height:1.5;color:rgba(255,255,255,.86);margin:0;max-width:30ch}
.svcm-explore-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.85rem 1.6rem;border-radius:999px;font-family:var(--font-mono);font-size:0.92rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;background:linear-gradient(180deg,rgba(34,214,127,.18),rgba(34,214,127,.08));border:1.5px solid rgba(34,214,127,.65);box-shadow:0 0 0 1px rgba(34,214,127,.12),0 12px 30px -14px rgba(34,214,127,.6);-webkit-tap-highlight-color:transparent;transition:background .25s ease,box-shadow .25s ease}
.svcm-explore-btn:active{background:linear-gradient(180deg,rgba(34,214,127,.26),rgba(34,214,127,.12))}
.svcm-explore-btn-arrow{color:#22D67F}
/* Issue 258 (desktop Branding popup only): refine the copy + "VIEW BRANDING & CREATIVE" footer group.
   The wide desktop popup lets the approved copy sit on ONE clean line (it wrapped to three short
   lines at the mobile 30ch cap), so lift the width cap on desktop. Treat copy + button as one
   intentional group (a touch more copy→button spacing, balanced hierarchy) and give the button
   substantially more breathing room beneath it without inflating the popup — the desktop body has
   ample room. Scoped to the desktop overlay so the mobile popup is untouched. */
.svcm-overlay:not(.svcm-overlay--m) .svcm-explore-wrap{margin-top:1.25rem;margin-bottom:1.45rem;gap:1rem}
.svcm-overlay:not(.svcm-overlay--m) .svcm-explore-copy{max-width:64ch;font-size:1rem;line-height:1.55}

/* Issue 196: App Development popup case-study CTAs — two gold-accented pills (white text, gold
   border/arrow/glow), stacked with clear spacing and comfortable touch targets. */
.svcm-appdev-cta-row{display:flex;flex-direction:column;gap:0.55rem;margin-top:0.9rem}
.svcm-appdev-cta{display:flex;align-items:center;justify-content:center;gap:0.45rem;padding:0.7rem 1rem;border-radius:999px;font-family:var(--font-mono);font-size:0.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;cursor:pointer;background:linear-gradient(180deg,rgba(232,181,58,.16),rgba(232,181,58,.06));border:1.4px solid rgba(232,181,58,.6);box-shadow:0 0 0 1px rgba(232,181,58,.1),0 10px 26px -16px rgba(232,181,58,.6);-webkit-tap-highlight-color:transparent;transition:background .25s ease}
.svcm-appdev-cta:active{background:linear-gradient(180deg,rgba(232,181,58,.24),rgba(232,181,58,.1))}
.svcm-appdev-cta-arrow{color:#E8B53A;font-size:1.05em;line-height:1}
/* Issue 235: inline case-study brand logos inside the App Dev CTAs. Equal rendered height so the
   two marks read at the same visual size; width auto + object-fit keep each logo's aspect ratio
   (no stretch/distort); transparent PNGs sit directly on the button (no panel). max-width lets them
   shrink to avoid overflow on the narrowest phones without cropping or distortion. */
.svcm-appdev-cta-logo{height:1.32em;width:auto;max-width:46%;object-fit:contain;display:inline-block;vertical-align:middle;flex:0 1 auto;min-width:0}
/* Issue 250 (desktop App Development popup): desktop adaptation of the App Dev CTAs. The two
   case-study buttons sit side by side (room on desktop), and the whole popup is themed RED via
   var(--acc) instead of the mobile gold — borders, glow and arrows follow the accent. Logos keep
   equal rendered height + aspect ratio (no stretch). Scoped to .svcm--appdev-d so the mobile gold
   AppDevModal is untouched. */
.svcm--appdev-d .svcm-appdev-cta-row{flex-direction:row;gap:0.85rem;margin-top:1.25rem}
.svcm--appdev-d .svcm-appdev-cta{flex:1 1 0;padding:0.82rem 1rem;font-size:0.84rem;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 16%,transparent),color-mix(in srgb,var(--acc) 6%,transparent));border-color:color-mix(in srgb,var(--acc) 58%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 12%,transparent),0 14px 30px -18px color-mix(in srgb,var(--acc) 60%,transparent)}
.svcm--appdev-d .svcm-appdev-cta:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 24%,transparent),color-mix(in srgb,var(--acc) 10%,transparent))}
.svcm--appdev-d .svcm-appdev-cta-arrow{color:var(--acc)}
.svcm--appdev-d .svcm-appdev-cta-logo{height:1.4em;max-width:52%}

/* Issue 198: "VIEW LIVE WEBSITE" CTA on every Live Website Work card — teal label, contrasting
   descriptor-blue arrow, mono CTA styling, breathing room above; it's part of the card link so it
   opens the same live URL as the image. */
.m-web-cta{display:inline-flex;align-items:center;gap:0.4rem;margin-top:0.95rem;font-family:var(--font-mono);font-size:0.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#22C3D0}
.m-web-cta-arrow{color:#2D82C8;font-size:1.08em;line-height:1}
/* Issue 237B: the in-card "VIEW LIVE WEBSITE" CTA only (scoped to .m-web-card so the page-level
   "Start a Website Project" button — which shares the .m-web-cta class — is NOT affected): +12% size
   (0.78 -> 0.874rem), arrow scales with the text (1.08em); colour, alignment, spacing, destination
   unchanged. Weight requested +~5%: Geist Mono ships only static 400/500/600 instances (no 700, no
   variable axis), so 600 is the genuine maximum native weight. With no heavier face available, the
   extra ~5% is applied as a subpixel current-colour text stroke on the TEXT only (the same prefixed
   property both Chromium and WebKit honour). paint-order:stroke fill keeps the fill on top so glyphs
   stay crisp (no doubled edges, no blur), the stroke uses currentColor so the colour is unchanged, and
   it doesn't materially change the text's dimensions. The arrow is reset below so it is unaffected. */
.m-web-card .m-web-cta{font-size:0.874rem;font-weight:600;-webkit-text-stroke:0.15px currentColor;paint-order:stroke fill}
.m-web-card .m-web-cta-arrow{-webkit-text-stroke:0}
/* Issue 237D: the "Start a Website Project" button text is white (was teal from .m-web-cta). */
button.m-web-cta{color:#fff}

/* Issue 203: Connected Brand diagram pill labels — controlled, readable size on mobile so the
   generic .svcm-node 1.05rem !important no longer oversizes them past their (now per-label) pills. */
.svcm-overlay--m .svcm-node--brand{font-size:11px !important}

/* Issue 205: UX/UI System grid — the longest label (BOTTOM NAVIGATION) overflow fix lives in
   lipdoctor-v3.css next to the .svcm--tlkdes/.svcm--fbdes .svcm-node rule that actually controls
   these labels (that rule outranks anything here). See "Issue 205" there. */