/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · light theme · /about
   The page is authored dark on --ab-* tokens (about.html, #about-v2); light re-points the tokens and re-lights the glass.
     hero ........ pearl slabs on white (the services hero's light treatment), the ink split button
     founders .... a soft grey sheet so the pearl slabs read as objects; monograms in ink
     record ...... logo cloud on hairlines, marks in ink, on white between the two grey surfaces
     operate ..... the supporting grey card, as the services process card; inside it a white panel with grey rows, and the open principle on white
     next ........ white, with two grey cards
   ══════════════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .ab {
  --ab-bg: #fff; --ab-bg2: #f4f4f6; --ab-card: #f4f4f6; --ab-ink: #0e0e0e; --ab-body: #3f3f46; --ab-meta: #6b6b72;
  --ab-grey: #8d8d8d; --ab-dim: rgba(14, 14, 14, .3); --ab-line: rgba(14, 14, 14, .10); --ab-line2: rgba(14, 14, 14, .18); --ab-chip: rgba(14, 14, 14, .06);
  --ab-accent: #0e0e0e; --ab-edge: rgba(14, 14, 14, .05);
  --ab-st-off: #8e8e94; --ab-st-off2: #6b6b72; --ab-st-glow: rgba(14, 14, 14, .7);
  --op-panel: #fff; --op-panel-line: rgba(14, 14, 14, .06); --op-row: #f4f4f6; --op-row-line: rgba(14, 14, 14, .05); --op-up: #fff; --op-up-line: rgba(14, 14, 14, .08);
  --op-mid: rgba(14, 14, 14, .34); --op-on: #fff; --op-on-line: rgba(14, 14, 14, .06); --op-hover: rgba(255, 255, 255, .55);
  --op-shadow: 0 1.1em 2.2em -1.1em rgba(14, 14, 14, .22), 0 .2em .5em rgba(14, 14, 14, .04);
}

/* ───── hero ───── */
html[data-theme="light"] .ab-hero-bg { background: #fff; }
/* the studio in daylight: warm paper, a shade deeper where the arc stands, white by the stat bar; the grain multiplies, lightly */
html[data-theme="light"] .ab-hero { --ab-warm: rgba(160,120,80,.07); --ab-sky: rgba(255,255,255,.7); --ab-g1: #fbfbfa; --ab-g2: #f1f0ed; --ab-g3: #f7f6f4; --ab-g4: #fff; --ab-grain: .06; --ab-floor: rgba(120,90,60,.07); }
html[data-theme="light"] .ab-hero::before { mix-blend-mode: multiply; }
html[data-theme="light"] .ab-slab {
  background: linear-gradient(162deg, #fbfbfc 0%, #e9e9ed 24%, #cfcfd6 46%, #ececf0 58%, #fbfbfc 74%, #d9d9df 100%);
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .10), inset 0 2px 0 rgba(255, 255, 255, 1), 0 60px 120px rgba(14, 14, 14, .16);
}
html[data-theme="light"] .ab-slab::after { background: linear-gradient(112deg, transparent 32%, rgba(14, 14, 14, .045) 46%, rgba(14, 14, 14, .012) 51%, transparent 64%); }
html[data-theme="light"] .ab-veil { background: radial-gradient(55% 50% at 50% 44%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .55) 62%, rgba(255, 255, 255, .25) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, #fff 100%); }
html[data-theme="light"] .ab { --ab-sub: #2b2b31; }
html[data-theme="light"] .ab .ab-btn { color: #fff; }
html[data-theme="light"] .ab-btn-l, html[data-theme="light"] .ab-btn-ar { background: var(--lt-ink, #0e0e0e); }
html[data-theme="light"] .ab-btn:hover .ab-btn-l, html[data-theme="light"] .ab-btn:hover .ab-btn-ar { background: #2b2b2e; }
html[data-theme="light"] .ab-btn:active .ab-btn-l, html[data-theme="light"] .ab-btn:active .ab-btn-ar { background: #000; }
html[data-theme="light"] .ab-btn:focus-visible { outline-color: #0e0e0e; }

/* ───── founders ───── */
html[data-theme="light"] .fd-slab { --fd-surface: linear-gradient(172deg, #fdfdfd 0%, #f1f1f3 55%, #ebebee 100%); --fd-edge: rgba(14, 14, 14, .09); --fd-grain: .05;
  --fd-lift: rgba(255, 255, 255, .9); --fd-ink-a: rgba(14, 14, 14, .86); --fd-ink-b: rgba(14, 14, 14, .42); --fd-ink-c: rgba(14, 14, 14, .04); --fd-label: #5d5d64;
  box-shadow: inset 0 0 0 1px var(--fd-edge), 0 30px 60px -50px rgba(14, 14, 14, .35); }
html[data-theme="light"] .fd-li:hover i { color: #fff; }

/* ───── how we operate ───── */
html[data-theme="light"] .ab-op { box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .06); }
html[data-theme="light"] .ab-quote-av { background: linear-gradient(160deg, #ffffff 0%, #e4e4e9 60%, #f4f4f6 100%); box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .12); color: var(--ab-ink); }
html[data-theme="light"] .op-stage { box-shadow: inset 0 0 0 1px var(--op-panel-line), 0 30px 60px -36px rgba(14, 14, 14, .18); }
html[data-theme="light"] .op-stage::before { background: none; }
html[data-theme="light"] .op-it.is-on { box-shadow: inset 0 0 0 1px var(--op-on-line), 0 14px 30px -22px rgba(14, 14, 14, .2); }

/* ───── track record ───── */
html[data-theme="light"] .lc { --lc-line: rgba(14, 14, 14, .10); --lc-shade: rgba(14, 14, 14, .025); }
html[data-theme="light"] .lc-cell img { filter: brightness(0); opacity: .78; }
html[data-theme="light"] .lc-plus { color: rgba(14, 14, 14, .45); }
html[data-theme="light"] .lc-cell:focus-visible { outline-color: var(--ab-ink); }
@media (hover: hover) {
  html[data-theme="light"] .lc-cell:hover { background: rgba(14, 14, 14, .05); }
  html[data-theme="light"] .lc-cell:hover img { opacity: 1; }
}

/* ───── next ───── */
html[data-theme="light"] .nx { box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .06); }
html[data-theme="light"] .nx:hover { box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .1), 0 24px 50px rgba(14, 14, 14, .1); }
html[data-theme="light"] .nx-fan img { box-shadow: 0 0 0 1px rgba(14, 14, 14, .08), 0 14px 30px rgba(14, 14, 14, .16); }