/*
 * Opportunità — About page V2 (Release 1.1.57.0).
 *
 * The design file is the specification: every rule below is the handoff's own
 * helmet <style>, ported unchanged except for the four substitutions the
 * handoff itself permits.
 *
 *   1. The preview shell's viewport clamps are gone. The prototype constrained
 *      .ab-page to 834 / 390px so the preview could be resized inside the
 *      design app; production is the real viewport.
 *   2. `@container` became `@media` and `cqw` became `vw`, at the same numbers.
 *      Container queries only worked because of that preview container.
 *   3. `.ab` became `.op-about-v2`, so the token family is scoped the way
 *      the homepage V2 stylesheet scopes the identical names.
 *   4. The theme selector is the site's: light is the bare class, dim and
 *      dark-contrast are attributes on <html>.
 *
 * Nothing else is re-spaced, re-coloured, re-worded or re-timed.
 */

/* ---- Theme tokens ------------------------------------------------------
 *
 * Bare names (--bg, --ink, --ac …) exactly as the design file writes them, so
 * the several hundred inline styles ported from the reference build read the
 * values they were written against. They are scoped to the page root, which is
 * the same arrangement opportunita-home-v2.css already uses for this family.
 */
.op-about-v2 {
	/*
	 * The mono face is not a global token on this site: opportunita-frontend.css
	 * declares --op-font-sans and every V2 surface declares its own mono. Without
	 * this line every chapter label, meta line and chip on the page falls back to
	 * the sans face and the design's whole typographic contrast disappears.
	 */
	--op-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
	--bg:#f6f7f8;
	--panel:#ffffff;
	--pop:#f4f6f8;
	--hdr:rgba(255,255,255,0.92);
	--ink:#15202b;
	--t0:#15202b;
	--t1:#2f3b46;
	--t2:#46525c;
	--t3:#46525c;
	--t4:#5c6670;
	--t5:#5c6670;
	--t6:#697380;
	--ac:#12615d;
	--ac2:#0d4744;
	--onac:#ffffff;
	--acw:rgba(18,97,93,0.07);
	--acb:rgba(18,97,93,0.24);
	--rose:#be123c;
	--amber:#b45309;
	--ind:#4f46e5;
	--wa03:#fbfcfd;
	--wa05:rgba(21,32,43,0.04);
	--wa06:#e6eaee;
	--wa08:#d9dee3;
	--wa10:#d2d8dd;
	--wa14:#c2cad1;
	--wa22:#aab3bc;
	--sh:0 10px 28px rgba(21,32,43,0.10);
	--dot:rgba(21,32,43,0.14);
	--inv:#0f172a;
	--invt:#e2e8f0;
	--invq:#94a3b8;
	--invac:#2dd4bf;
	--invline:rgba(255,255,255,0.10);
	--invcard:rgba(255,255,255,0.05);
	--deep:#0b1220;
	--fade:rgba(246,247,248,0);
	--fade1:rgba(246,247,248,0.78);
	--opx-hdr:rgba(255,255,255,0.92);
	--opx-surface:#ffffff;
	--opx-border:#d9dee3;
	--opx-text:#15202b;
	--opx-text-muted:#46525c;
	--opx-text-quiet:#5c6670;
	--opx-ink:#15202b;
	--opx-on-ink:#ffffff;
}

html[data-op-theme="dim"] .op-about-v2 {
	--bg:#0b1220;
	--panel:#0b1322;
	--pop:#131c2e;
	--hdr:rgba(11,18,32,0.86);
	--ink:#ffffff;
	--t0:#f1f5f9;
	--t1:#e2e8f0;
	--t2:#cbd5e1;
	--t3:#a7b3c4;
	--t4:#94a3b8;
	--t5:#8b98ad;
	--t6:#7e8ba0;
	--ac:#2dd4bf;
	--ac2:#5eead4;
	--onac:#06231f;
	--acw:rgba(45,212,191,0.10);
	--acb:rgba(45,212,191,0.26);
	--rose:#fb7185;
	--amber:#fbbf24;
	--ind:#a5b4fc;
	--wa03:rgba(255,255,255,0.03);
	--wa05:rgba(255,255,255,0.05);
	--wa06:rgba(255,255,255,0.06);
	--wa08:rgba(255,255,255,0.08);
	--wa10:rgba(255,255,255,0.10);
	--wa14:rgba(255,255,255,0.14);
	--wa22:rgba(255,255,255,0.22);
	--sh:0 10px 30px rgba(0,0,0,0.42);
	--dot:rgba(148,163,184,0.16);
	--inv:#111a2d;
	--invt:#e2e8f0;
	--invq:#8b98ad;
	--invac:#2dd4bf;
	--invline:rgba(255,255,255,0.10);
	--invcard:rgba(255,255,255,0.04);
	--deep:#060a12;
	--fade:rgba(11,18,32,0);
	--fade1:rgba(11,18,32,0.72);
	--opx-hdr:rgba(11,18,32,0.86);
	--opx-surface:#0b1322;
	--opx-border:rgba(255,255,255,0.08);
	--opx-text:#f1f5f9;
	--opx-text-muted:#cbd5e1;
	--opx-text-quiet:#8b98ad;
	--opx-ink:#2dd4bf;
	--opx-on-ink:#06231f;
}

html[data-op-theme="dark-contrast"] .op-about-v2 {
	--bg:#101013;
	--panel:#16161a;
	--pop:#1d1d20;
	--hdr:rgba(16,16,19,0.88);
	--ink:#f9fafb;
	--t0:#f3f4f6;
	--t1:#e5e7eb;
	--t2:#d1d5db;
	--t3:#c3c8cf;
	--t4:#9ca3af;
	--t5:#9ca3af;
	--t6:#878e99;
	--ac:#2dd4bf;
	--ac2:#5eead4;
	--onac:#061412;
	--acw:rgba(45,212,191,0.10);
	--acb:rgba(45,212,191,0.28);
	--rose:#fb7185;
	--amber:#fbbf24;
	--ind:#a5b4fc;
	--wa03:rgba(255,255,255,0.04);
	--wa05:rgba(255,255,255,0.06);
	--wa06:rgba(255,255,255,0.07);
	--wa08:rgba(255,255,255,0.10);
	--wa10:rgba(255,255,255,0.12);
	--wa14:rgba(255,255,255,0.16);
	--wa22:rgba(255,255,255,0.22);
	--sh:0 10px 30px rgba(0,0,0,0.55);
	--dot:rgba(255,255,255,0.10);
	--inv:#18181c;
	--invt:#e5e7eb;
	--invq:#9ca3af;
	--invac:#2dd4bf;
	--invline:rgba(255,255,255,0.10);
	--invcard:rgba(255,255,255,0.045);
	--deep:#07070a;
	--fade:rgba(16,16,19,0);
	--fade1:rgba(16,16,19,0.74);
	--opx-hdr:rgba(16,16,19,0.88);
	--opx-surface:#16161a;
	--opx-border:rgba(255,255,255,0.10);
	--opx-text:#f3f4f6;
	--opx-text-muted:#d1d5db;
	--opx-text-quiet:#9ca3af;
	--opx-ink:#2dd4bf;
	--opx-on-ink:#061412;
}

.op-about-v2, .op-about-v2 *, .op-about-v2 *::before, .op-about-v2 *::after { box-sizing:border-box; }
.op-about-v2 a { text-decoration:none; color:inherit; }
.op-about-v2 a:hover { color:var(--ac); }
.op-about-v2 p, .op-about-v2 h1, .op-about-v2 h2, .op-about-v2 h3 { margin:0; }
.op-about-v2 button { font-family:var(--op-font-sans); }
.ab-page { width:100%; margin:0 auto; background:var(--bg); position:relative; }
.ab-pad { padding-left:40px; padding-right:40px; }
.ab-wrap { max-width:1240px; margin:0 auto; }
.ab-ch { font-family:var(--op-font-mono); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ac); display:inline-flex; align-items:center; gap:10px; }
.ab-ch::before { content:""; width:22px; height:1px; background:var(--ac); }
.ab-h1 { font-size:clamp(44px,6.2vw,88px); line-height:0.98; letter-spacing:-0.035em; font-weight:700; color:var(--ink); text-wrap:balance; }
.ab-h2 { font-size:clamp(32px,4.2vw,58px); line-height:1.02; letter-spacing:-0.03em; font-weight:700; color:var(--ink); text-wrap:balance; }
.ab-h3 { font-size:clamp(24px,2.4vw,32px); line-height:1.12; letter-spacing:-0.02em; font-weight:700; color:var(--ink); }
.ab-lead { font-size:clamp(16px,1.35vw,19px); line-height:1.65; color:var(--t3); text-wrap:pretty; }
.ab-body { font-size:15.5px; line-height:1.72; color:var(--t4); text-wrap:pretty; }
.ab-sec { padding-top:120px; padding-bottom:120px; }
.ab-hero { height:260vh; }
.ab-sticky { position:sticky; top:0; height:100vh; overflow:hidden; }
.ab-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); align-items:center; height:100%; }
.ab-two { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; }
.ab-stickycol { position:sticky; top:140px; }
.ab-tabs { position:relative; height:400px; }
.ab-tab { position:absolute; width:31%; min-width:200px; background:var(--panel); border:1px solid var(--wa10); border-radius:10px; box-shadow:var(--sh); padding:12px 14px; display:flex; flex-direction:column; gap:8px; will-change:transform; }
.ab-diagram { display:grid; grid-template-columns:220px minmax(0,1fr) 230px; align-items:center; gap:0; }
.ab-chips3 > span { flex:0 0 auto; white-space:nowrap; max-width:100%; }
.ab-chips3 > span:nth-child(3n)::after { content:""; display:block; height:0; }
.ab-chips3 > .ab-br { flex-basis:100%; height:0; padding:0; border:0; margin:-5px 0 0; }
.ab-pinwrap { min-height:230vh; }
.ab-orbit { height:280vh; }
.ab-orbit-sticky { position:sticky; top:0; height:100vh; overflow:hidden; }
.ab-pinsticky { position:sticky; top:0; min-height:100vh; display:flex; align-items:center; padding:96px 0 48px; }
.ab-node { transform-origin:center; }
.op-about-v2 .ab-node-dark { display:none !important; }
.op-about-v2 .ab-node-light { display:block !important; }
html[data-op-theme="dim"] .op-about-v2 .ab-node-dark,
html[data-op-theme="dark-contrast"] .op-about-v2 .ab-node-dark { display:block !important; }
html[data-op-theme="dim"] .op-about-v2 .ab-node-light,
html[data-op-theme="dark-contrast"] .op-about-v2 .ab-node-light { display:none !important; }
.ab-scrim-side, .ab-scrim-bot { transition:none; }
.ab-slider { scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ab-slider::-webkit-scrollbar { display:none; }
.ab-stack { display:flex; flex-direction:column; gap:24px; }
.ab-stack > * { position:sticky; }
.ab-stack > *:nth-child(1) { top:120px; }
.ab-stack > *:nth-child(2) { top:140px; }
.ab-stack > *:nth-child(3) { top:160px; }
.ab-card { background:var(--panel); border:1px solid var(--wa10); border-radius:20px; transition:transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease; }
.ab-card:hover { border-color:var(--wa22); }
.ab-ledger { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ab-hwrap { height:340vh; }
.ab-hsticky { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.ab-track { display:flex; gap:22px; will-change:transform; padding-left:40px; padding-right:40px; }
.ab-pcard { flex:0 0 400px; min-height:440px; background:var(--invcard); border:1px solid var(--invline); border-radius:22px; padding:30px 30px 28px; display:flex; flex-direction:column; justify-content:space-between; gap:36px; }
.ab-aud { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; perspective:1200px; }
.ab-tilt { transform:rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg)); transition:transform 220ms ease; transform-style:preserve-3d; }
.ab-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--wa08); border:1px solid var(--wa08); border-radius:20px; overflow:hidden; }
.ab-integrity { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; }
.ab-snap { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ab-duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.ab-bar { transform-origin:left center; transform:scaleX(0); transition:transform 900ms cubic-bezier(0.2,0,0,1); }
.is-in .ab-bar { transform:scaleX(1); }
.ab-rev { transition:opacity 620ms cubic-bezier(0.2,0,0,1), transform 620ms cubic-bezier(0.2,0,0,1); }
.ab-rev.ab-pre { opacity:0; transform:translateY(22px); }
.ab-rev.is-in { opacity:1; transform:none; }
.ab-stag > *:nth-child(2) { transition-delay:70ms; }
.ab-stag > *:nth-child(3) { transition-delay:140ms; }
.ab-stag > *:nth-child(4) { transition-delay:210ms; }
.ab-stag > *:nth-child(5) { transition-delay:280ms; }
.ab-stag > *:nth-child(6) { transition-delay:350ms; }
.ab-rail { position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:14px; }
.ab-rail a { display:flex; align-items:center; gap:10px; justify-content:flex-end; font-family:var(--op-font-mono); font-size:10.5px; letter-spacing:0.08em; color:var(--t6); transition:color 200ms ease; }
.ab-rail a span:last-child { width:18px; height:1px; background:var(--wa22); transition:width 300ms cubic-bezier(0.2,0,0,1), background 200ms ease; }
.ab-rail a.is-on { color:var(--ink); }
.ab-rail a.is-on span:last-child { width:34px; background:var(--ac); }
.ab-rail a span:first-child { opacity:0; transform:translateX(6px); transition:opacity 200ms ease, transform 200ms ease; }
.ab-rail:hover a span:first-child, .ab-rail a.is-on span:first-child { opacity:1; transform:none; }
.ab-uline::after { content:""; position:absolute; left:0; right:0; bottom:0.02em; height:0.08em; background:var(--ac); border-radius:2px; transform-origin:left; transform:scaleX(0); transition:transform 900ms cubic-bezier(0.2,0,0,1) 380ms; }
.is-in .ab-uline::after { transform:scaleX(1); }
.ab-points > div { opacity:0; transform:perspective(900px) rotateX(-16deg) translateY(34px); filter:blur(6px); transition:opacity 700ms cubic-bezier(0.2,0.8,0.2,1), transform 900ms cubic-bezier(0.2,0.8,0.2,1), filter 700ms ease; transform-origin:top center; }
.ab-points.is-in > div { opacity:1; transform:none; filter:none; }
.ab-points > :nth-child(2) { transition-delay:90ms; } .ab-points > :nth-child(3) { transition-delay:180ms; } .ab-points > :nth-child(4) { transition-delay:270ms; } .ab-points > :nth-child(5) { transition-delay:360ms; } .ab-points > :nth-child(6) { transition-delay:450ms; }
.ab-points.is-in > div > span:first-child { color:var(--ac); }
.ab-integ-rows > div { opacity:0; transform:translateX(-18px); transition:opacity 600ms cubic-bezier(0.2,0.8,0.2,1), transform 700ms cubic-bezier(0.2,0.8,0.2,1); }
.ab-integ-rows.is-in > div { opacity:1; transform:none; }
.ab-integ-rows .ab-bar { transition:transform 1200ms cubic-bezier(0.2,0,0,1); }
.ab-integ-rows.is-in .ab-bar { transform:scaleX(1); }
.ab-integ-rows > :nth-child(2), .ab-integ-rows > :nth-child(2) .ab-bar { transition-delay:110ms; } .ab-integ-rows > :nth-child(3), .ab-integ-rows > :nth-child(3) .ab-bar { transition-delay:220ms; } .ab-integ-rows > :nth-child(4), .ab-integ-rows > :nth-child(4) .ab-bar { transition-delay:330ms; } .ab-integ-rows > :nth-child(5), .ab-integ-rows > :nth-child(5) .ab-bar { transition-delay:440ms; }
.ab-snap > div { opacity:0; transform:translateY(28px) scale(0.92); transition:opacity 600ms cubic-bezier(0.2,0.8,0.2,1), transform 800ms cubic-bezier(0.34,1.45,0.64,1); }
.ab-snap.is-in > div { opacity:1; transform:none; }
.ab-snap > :nth-child(2) { transition-delay:60ms; } .ab-snap > :nth-child(3) { transition-delay:120ms; } .ab-snap > :nth-child(4) { transition-delay:180ms; } .ab-snap > :nth-child(5) { transition-delay:240ms; } .ab-snap > :nth-child(6) { transition-delay:300ms; } .ab-snap > :nth-child(7) { transition-delay:360ms; } .ab-snap > :nth-child(8) { transition-delay:420ms; }
@media (prefers-reduced-motion: reduce) { .ab-points > div, .ab-integ-rows > div, .ab-snap > div { opacity:1; transform:none; filter:none; transition:none; } .ab-uline::after { transform:scaleX(1); transition:none; } }
.ab-quote > span { --k:clamp(0, calc((var(--p,0) - 0.05 - var(--i,0) * 0.012) * 7), 1); opacity:calc(0.08 + 0.92 * var(--k)); transform:translateY(calc((1 - var(--k)) * 0.3em)); filter:blur(calc((1 - var(--k)) * 5px)); display:inline-block; letter-spacing:calc(-0.035em + (1 - var(--k)) * 0.22em); }
.ab-quote > .ab-q1 { font-family:var(--op-font-mono); color:var(--t5); font-weight:500; font-size:clamp(11px, 0.2em, 14px); text-transform:uppercase; letter-spacing:calc(0.16em + (1 - var(--k)) * 0.4em); line-height:2.2; }
.ab-hl::after { content:""; position:absolute; left:-0.04em; right:-0.04em; bottom:0.04em; height:0.09em; background:var(--ac); border-radius:0.05em; transform-origin:left; transform:scaleX(var(--k)); opacity:0.9; z-index:-1; }
.ab-ghost { font-family:var(--op-font-sans); }
@media (max-width: 720px) { .ab-ghost { font-size:26vw !important; top:48% !important; letter-spacing:-0.04em !important; transform:translate(-50%,-50%) translateX(calc((var(--p,0) - 0.5) * -40px)) rotate(-4deg) !important; } .ab-quote > .ab-q1 { line-height:2; } }
.ab-quote > .ab-smile { transform:translateY(calc((1 - var(--k)) * 0.35em)) rotate(calc((1 - var(--k)) * -90deg)); transform-origin:center; }
@keyframes ab-float { 0% { transform:translateY(110%); opacity:0; } 12% { opacity:0.55; } 80% { opacity:0.35; } 100% { transform:translateY(-40vh) translateX(10px); opacity:0; } }
.ab-hearts > svg { position:absolute; bottom:0; color:#f472b6; opacity:0; animation:ab-float 11s linear infinite; }
.ab-hearts > svg:nth-child(2n) { color:var(--ac); animation-duration:13s; }
.ab-hearts > svg:nth-child(3n) { animation-duration:15s; }
@keyframes ab-spin { to { transform:rotate(360deg); } }
.ab-ring::before { content:""; position:absolute; inset:0; border-radius:999px; background:conic-gradient(from 0deg, var(--ac) 0 25%, transparent 25% 55%, #fbbf24 55% 70%, transparent 70% 100%); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation:ab-spin 9s linear infinite; }
.ab-ul::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--ac); transform-origin:left; transform:scaleX(0.28); opacity:0.5; transition:transform 260ms cubic-bezier(0.2,0,0,1), opacity 200ms ease; }
.ab-ul:hover::after { transform:scaleX(1); opacity:1; }
@keyframes ab-shine { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.ab-lovetxt { background:linear-gradient(90deg, #f472b6 0%, #fbbf24 35%, #f472b6 50%, #fbbf24 65%, #f472b6 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ab-shine 5s linear infinite; }
.ab-quote > :nth-child(1) { --i:0; } .ab-quote > :nth-child(2) { --i:1; } .ab-quote > :nth-child(3) { --i:2; } .ab-quote > :nth-child(4) { --i:3; } .ab-quote > :nth-child(5) { --i:4; } .ab-quote > :nth-child(6) { --i:5; } .ab-quote > :nth-child(7) { --i:6; } .ab-quote > :nth-child(8) { --i:7; } .ab-quote > :nth-child(9) { --i:8; } .ab-quote > :nth-child(10) { --i:9; } .ab-quote > :nth-child(11) { --i:10; } .ab-quote > :nth-child(12) { --i:11; } .ab-quote > :nth-child(13) { --i:12; } .ab-quote > :nth-child(14) { --i:13; } .ab-quote > :nth-child(15) { --i:14; } .ab-quote > :nth-child(16) { --i:15; } .ab-quote > :nth-child(17) { --i:16; } .ab-quote > :nth-child(18) { --i:17; } .ab-quote > :nth-child(19) { --i:18; } .ab-quote > :nth-child(20) { --i:19; }
@keyframes ab-beat { 0%, 100% { transform:scale(1); } 14% { transform:scale(1.25); } 28% { transform:scale(1); } 42% { transform:scale(1.18); } 56% { transform:scale(1); } }
.ab-heart { animation:ab-beat 1.6s ease-in-out infinite; transform-origin:center; }
.ab-love a, .ab-sig a:hover { color:var(--ac); }
@media (prefers-reduced-motion: reduce) { .ab-quote > span { opacity:1; transform:none; filter:none; } .ab-heart, .ab-hearts > svg, .ab-ring::before, .ab-lovetxt { animation:none; } .ab-sig, .ab-love { opacity:1 !important; transform:none !important; } }
.ab-flow { fill:none; stroke-linecap:round; stroke-dasharray:0.05 0.95; animation:ab-flow 1.9s linear infinite; opacity:clamp(0, calc(((var(--p,0) - var(--s,0)) * var(--k,1) - 0.85) * 6), 1); }
@keyframes ab-flow { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce) { .ab-flow { animation:none; display:none; } }
.ab-dash { stroke-dasharray:1; stroke-dashoffset:clamp(0, calc(1 - (var(--p,0) - var(--s,0)) * var(--k,1)), 1); }
.ab-cta { display:inline-flex; align-items:center; gap:9px; border-radius:999px; padding:14px 22px; font-size:14.5px; font-weight:700; transition:filter 170ms ease, transform 170ms ease, background 170ms ease, border-color 170ms ease; }
.ab-cta:hover { transform:translateY(-1px); }
.ab-cta:active { transform:scale(0.96); }
.ab-status > article { opacity:0; transform:perspective(900px) rotateX(-12deg) translateY(28px); filter:blur(5px); transform-origin:top center; transition:opacity 700ms cubic-bezier(0.2,0.8,0.2,1), transform 900ms cubic-bezier(0.2,0.8,0.2,1), filter 700ms ease; }
.ab-status.is-in > article { opacity:1; transform:none; filter:none; }
.ab-status > :nth-child(2) { transition-delay:120ms; }
.ab-home { height:230vh; }
.ab-drop { overflow:hidden; opacity:0.75; }
.ab-drop::after { content:""; position:absolute; left:0; top:-40%; width:1px; height:60%; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 55%, var(--ac) 100%); box-shadow:0 0 12px 1px var(--acb); animation:ab-drip 2s cubic-bezier(0.45,0,0.55,1) infinite; }
@keyframes ab-drip { 0% { top:-40%; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { top:110%; opacity:0; } }
@media (prefers-reduced-motion: reduce) { .ab-drop::after { animation:none; display:none; } }
@media (max-width: 720px) { .ab-home { height:340vh; } .ab-home .ab-drop1 { height:calc(192px + 50vh - 150px) !important; } }
@media (prefers-reduced-motion: reduce) { .ab-home { height:100vh; } }
.ab-mask { display:inline-block; overflow:hidden; padding-bottom:0.08em; margin-bottom:-0.08em; }
.ab-mask > span { display:inline-block; --k:clamp(0, calc((var(--p,0) - 0.06 - var(--i,0) * 0.07) * 5), 1); transform:translateY(calc((1 - var(--k)) * 105%)); opacity:var(--k); }
.ab-closeline > :nth-child(1) > span { --i:0; } .ab-closeline > :nth-child(2) > span { --i:1; } .ab-closeline > :nth-child(3) > span { --i:2; } .ab-closeline > :nth-child(4) > span { --i:3; }
@media (prefers-reduced-motion: reduce) { .ab-status > article { opacity:1; transform:none; filter:none; transition:none; } .ab-mask > span { transform:none; opacity:1; } }
.ab-cta svg { transition:transform 180ms ease; }
.ab-cta:hover svg { transform:translateX(3px); }
.ab-hidem { display:block; }
@keyframes ab-scrollline { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }
@keyframes ab-focus { 0% { opacity:0.4; transform:scale(0.93) translateY(6px); } 40% { opacity:1; transform:none; } 60% { opacity:1; transform:none; } 100% { opacity:0.4; transform:scale(0.93) translateY(6px); } }
@keyframes ab-pulse { 0% { box-shadow:0 0 0 0 var(--acb); } 100% { box-shadow:0 0 0 9px rgba(45,212,191,0); } }
.ab-scrollline { animation:ab-scrollline 2.2s cubic-bezier(0.65,0,0.35,1) infinite; }
.ab-live { animation:ab-pulse 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.ab-rev, .ab-rev.ab-pre { opacity:1; transform:none; transition:none; }
	.ab-bar, .is-in .ab-bar { transform:scaleX(1); transition:none; }
	.ab-scrollline, .ab-live { animation:none; }
	.ab-tilt { transform:none; }
	.ab-hero { height:100vh; }
	.ab-hwrap { height:auto; }
	.ab-hsticky { position:static; height:auto; }
	.ab-track { transform:none !important; flex-wrap:wrap; }
}
@media (max-width: 1080px) {
	.ab-pad { padding-left:28px; padding-right:28px; }
	.ab-sec { padding-top:88px; padding-bottom:88px; }
	.ab-rail { display:none; }
	.ab-hero { height:200vh; }
	.ab-hero-grid { grid-template-columns:minmax(0,1fr); align-content:end; padding-bottom:16vh; }
	.ab-two { grid-template-columns:minmax(0,1fr); gap:40px; }
	.ab-stickycol { position:static; }
	.ab-tabs { --tabk:0.25; margin-top:56px; }
	.ab-diagram { grid-template-columns:180px minmax(0,1fr) 200px; padding:22px !important; }
	.ab-pinwrap { min-height:200vh; }
	.ab-orbit { height:220vh; }
	.ab-orbit-top { padding-top:88px !important; }
	.ab-pinsticky { padding:80px 0 40px; }
	.ab-ledger { grid-template-columns:minmax(0,1fr); }
	.ab-hwrap { height:auto; }
	.ab-hsticky { position:static; height:auto; overflow:visible; }
	.ab-track { transform:none !important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-left:28px; padding-right:28px; padding-bottom:88px !important; }
	.ab-pcard { flex:1 1 auto; min-height:0; gap:22px; padding:26px; }
	.ab-points { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.ab-integrity { grid-template-columns:minmax(0,1fr); gap:32px; }
	.ab-snap { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
	.ab-pad { padding-left:18px; padding-right:18px; }
	.ab-sec { padding-top:64px; padding-bottom:64px; }
	.ab-hero { height:180vh; }
	.ab-h1 { font-size:clamp(34px,10vw,44px); }
	.ab-h2 { font-size:clamp(28px,7.6vw,34px); }
	.ab-h3 { font-size:22px; }
	.ab-lead { font-size:15.5px; }
	.ab-hero { height:160vh; }
	.ab-hero-copy { transform:translateY(calc((1 - clamp(0, calc(var(--p,0) * 2.2), 1)) * 28px + var(--p,0) * -30px)) !important; }
	.ab-hero-swap { min-height:0 !important; }
	.ab-hero-a { display:none !important; }
	.ab-hero-b { position:static !important; opacity:1 !important; transform:none !important; }
	.ab-hero-b > div { opacity:clamp(0, calc(var(--p,0) * 3), 1); transform:translateY(calc((1 - clamp(0, calc(var(--p,0) * 3), 1)) * 16px)); }
	.ab-tabs > .ab-tab { --settle:clamp(0, calc(var(--p,0) * 1.4), 1); animation:ab-focus linear both; animation-timeline:view(inline); animation-range:entry 0% exit 100%; }
	.ab-tab { transform:rotateY(calc(-26deg + var(--settle,0) * 12deg)) rotateX(calc(10deg - var(--settle,0) * 6deg)) rotateZ(-2deg) translateY(calc((1 - var(--settle,0)) * 40px)) !important; }
	.ab-tab:nth-child(even) { transform:rotateY(calc(24deg - var(--settle,0) * 12deg)) rotateX(calc(-8deg + var(--settle,0) * 5deg)) rotateZ(2deg) translateY(calc(14px + (1 - var(--settle,0)) * 56px)) !important; }
	.ab-tab:nth-child(3n) { transform:rotateY(calc(-18deg + var(--settle,0) * 10deg)) rotateX(calc(12deg - var(--settle,0) * 6deg)) rotateZ(1deg) translateY(calc(-10px + (1 - var(--settle,0)) * 30px)) !important; }
	.ab-dg-src > div { opacity:clamp(0.2, calc(var(--p,0) * 4), 1); transform:translateY(calc((1 - clamp(0, calc(var(--p,0) * 4), 1)) * 14px)); }
	.ab-stack .ab-card { opacity:clamp(0.2, calc(var(--p,0) * 3), 1); }
	.ab-pcard, .ab-points > div { animation:ab-focus linear both; animation-timeline:view(inline); animation-range:entry 0% exit 100%; }
	.ab-scrim-side { background:var(--fade1) !important; }
	.ab-scrim-bot { height:78% !important; background:linear-gradient(180deg,var(--fade),var(--bg) 70%) !important; }
	.ab-hero-grid { padding-bottom:12vh; }
	.ab-tabs { --tabk:0; height:auto; margin-top:24px; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 18px; padding:12px 18px 18px; margin-left:-18px; margin-right:-18px; scrollbar-width:none; }
	.ab-tabs::-webkit-scrollbar { display:none; }
	.ab-tabs { perspective:700px; perspective-origin:50% 40%; padding-top:24px; padding-bottom:28px; }
	.ab-tab { position:static; flex:0 0 70%; width:auto; padding:12px 14px; scroll-snap-align:center; transform-style:preserve-3d; transform:rotateY(-14deg) rotateX(4deg) rotateZ(-2deg) !important; }
	.ab-tab:nth-child(even) { transform:rotateY(12deg) rotateX(-3deg) rotateZ(2deg) translateY(14px) !important; }
	.ab-tab:nth-child(3n) { transform:rotateY(-8deg) rotateX(6deg) rotateZ(1deg) translateY(-10px) !important; }
	.ab-pinwrap { min-height:0; }
	.ab-orbit { height:190vh; }
	.ab-orbit-top { padding-top:64px !important; gap:10px !important; }
	.ab-orbit-lead { display:none; }
	.ab-maker { padding-top:64px !important; padding-bottom:40px !important; gap:28px !important; }
	.ab-quote { font-size:clamp(22px,6.8vw,28px) !important; max-width:15ch !important; }
	.ab-quote > .ab-q1 { font-size:clamp(9px, 0.3em, 10px) !important; line-height:1.9 !important; }
	.ab-maker .ab-ch, .ab-maker > span:nth-of-type(3) { font-size:9px !important; }
	.ab-sig { gap:10px !important; }
	.ab-sig .ab-ring { width:38px !important; height:38px !important; }
	.ab-sig img { width:32px !important; height:32px !important; }
	.ab-sig > div > span:first-child { font-size:12px !important; }
	.ab-sig a { font-size:9px !important; }
	.ab-love { font-size:6px !important; padding:7px 10px !important; gap:5px !important; margin-top:-8px !important; }
	.ab-love svg { width:7px; height:6px; }
	.ab-hearts > svg { transform:scale(0.7); }
	.ab-status > article { grid-template-columns:minmax(0,1fr) !important; padding:22px 20px !important; gap:12px !important; }
	.ab-close { padding-top:72px !important; padding-bottom:96px !important; }
	.ab-orbit-plate { width:calc(100% + 36px) !important; left:-18px !important; top:-20px !important; height:calc(100% + 60px) !important; background:linear-gradient(180deg, rgba(11,18,32,0.96) 0%, rgba(11,18,32,0.9) 70%, rgba(11,18,32,0) 100%) !important; }
	.ab-orbit-bottom { padding-bottom:28px !important; }
	.ab-pinsticky { position:static; min-height:0; padding:64px 0 0; }
	.ab-diagram { grid-template-columns:minmax(0,1fr); gap:0; padding:16px !important; border-radius:18px !important; }
	.ab-dg-src { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px !important; }
	.ab-dg-src > div { height:auto !important; padding:10px !important; flex-direction:column; align-items:flex-start !important; gap:8px !important; }
	.ab-dg-src > div > span:last-child > span { white-space:normal !important; }
	.ab-dg-mid { height:230px !important; }
	.ab-dg-h { display:none !important; }
	.ab-dg-v { display:block !important; }
	.ab-node { width:64px !important; height:64px !important; margin:-32px 0 0 -32px !important; }
	.ab-dg-cap1 { transform:translate(calc(-50% + 46px), -50%) !important; left:auto !important; right:0 !important; transform:translate(0,-50%) !important; font-size:9px !important; max-width:38%; white-space:normal !important; text-align:right; line-height:1.4; }
	.ab-dg-cap2 { display:none !important; }
	.ab-dg-cap3 { display:block !important; margin-top:6px; }
	.ab-dg-you { align-items:center; text-align:center; gap:8px !important; }
	.ab-dg-you > div { width:100%; align-items:center; }
	.ab-dg-you > div > div { justify-content:center; }
	.ab-stack > * { position:static; }
	.ab-stack .ab-card { padding:24px 20px !important; grid-template-columns:minmax(0,1fr) !important; gap:22px !important; transform:translateY(calc((1 - clamp(0, calc(var(--p,0) * 2.5), 1)) * 36px)) !important; }
	.ab-track { display:flex !important; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 18px; padding-left:18px; padding-right:18px; gap:12px; padding-bottom:64px !important; scrollbar-width:none; }
	.ab-track::-webkit-scrollbar { display:none; }
	.ab-pcard { flex:0 0 82%; scroll-snap-align:start; padding:22px 20px; border-radius:16px; min-height:0; }
	.ab-dots { display:flex !important; }
	.ab-ops { gap:0 !important; padding:4px 16px !important; }
	.ab-ops > div { flex-direction:column; align-items:flex-start; gap:4px !important; padding:12px 0; border-bottom:1px solid var(--wa08); }
	.ab-ops > div:last-child { border-bottom:0; }
	.ab-ops > div > span:first-child { font-size:11px !important; letter-spacing:0.06em; text-transform:uppercase; color:var(--t6) !important; }
	.ab-ops > div > span:last-child { font-size:15px; text-align:left !important; }
	.ab-aud { grid-template-columns:minmax(0,1fr); }
	.ab-points { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 18px; gap:10px; background:transparent; border:0; border-radius:0; padding:2px 18px 12px; margin-left:-18px; margin-right:-18px; scrollbar-width:none; }
	.ab-points::-webkit-scrollbar { display:none; }
	.ab-points > div { flex:0 0 78%; scroll-snap-align:start; border:1px solid var(--wa10); border-radius:16px; }
	.ab-snap { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
	.ab-duo { grid-template-columns:minmax(0,1fr); }
	.ab-hidem { display:none; }
	.ab-cta { width:100%; justify-content:center; min-height:48px; }
	.ab-tilt { transform:none; }
}

/* ---- Production-only additions ------------------------------------------
 *
 * Four rules the reference build did not need because it was a preview: the
 * page has no footer, the scroll rail must clear the site header, the scenes
 * need a painted box before three.js boots, and `[hidden]` has to beat the
 * `display` rules above it (a recurring trap on this codebase).
 */
.op-about-template .op-site-footer,
.op-about-template .opf,
.op-about-template .op-footer { display: none !important; }

.op-about-v2 [hidden] { display: none !important; }

.op-about-v2 op-about-scene,
.op-about-v2 op-orbit-scene { display: block; position: absolute; inset: 0; }

/*
 * The wall's card COUNT follows the container, as the handoff requires: nine
 * at desktop, six at tablet, five in the mobile slider. The server renders the
 * nine real positions and the extras are dropped here, because a media query is
 * the only thing on the page that knows the viewport.
 */
@media (max-width: 1080px) { .op-about-v2 .ab-tabs > .ab-tab:nth-child(n+7) { display: none; } }
@media (max-width: 720px) { .op-about-v2 .ab-tabs > .ab-tab:nth-child(n+6) { display: none; } }

/*
 * The site sets a sans face on anchors, which beats the mono the signature's
 * own container asks for. Re-asserted so the two maker links read the way the
 * design draws them.
 */
.op-about-v2 .ab-sig a { font-family: inherit; }

/*
 * The rail is fixed to the viewport, so it has to sit clear of the sticky
 * header rather than under it, and it must never cover the scroll-system's
 * floating controls in the bottom-right corner.
 */
.op-about-v2 .ab-rail { top: calc(50% + 32px); }
