/* ═════ about (ab-) ═════ */
:root{--ab-o:#FF5B1A;--ab-oi:#C2410C;--ab-pe:#FFA77F;--ab-pn:#0E1018;--ab-ln:#22263A;--ab-mu:#A3A8B8}

/* ── banner: web eras morph ── */
.ab-era{position:relative;background:rgba(13,15,22,.74);border:1px solid var(--ab-ln);padding:18px 20px 16px;max-width:620px;margin-left:auto;box-shadow:0 40px 80px -40px rgba(255,91,26,.35);backdrop-filter:blur(2px)}
.ab-era-top{display:flex;align-items:baseline;gap:14px;min-height:36px}
.ab-era-yr{font:700 30px/1 var(--f-flex);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.ab-era-top{flex-wrap:wrap}
.ab-era-cap{font:500 14px/1.3 var(--f-sans);color:var(--ab-pe)}
.ab-era-site{margin-left:auto;font:500 12.5px var(--f-sans);color:#8E93A6}.ab-era-site b{font-weight:600;color:#fff;border-bottom:1px dashed var(--ab-o)}
.ab-era[data-site="1"]{--ab-tint:#C2410C}.ab-era[data-site="2"]{--ab-tint:#E07A42}.ab-era[data-site="3"]{--ab-tint:#9C4316}
.ab-era-stage{position:relative;height:clamp(240px,27vw,350px);margin:14px 0 12px;background:radial-gradient(ellipse at 50% 100%,rgba(255,91,26,.12),transparent 65%);border-bottom:1px solid var(--ab-ln)}
.ab-era-dev{position:absolute;overflow:hidden;transition:left .9s cubic-bezier(.7,0,.2,1),top .9s cubic-bezier(.7,0,.2,1),width .9s cubic-bezier(.7,0,.2,1),height .9s cubic-bezier(.7,0,.2,1),border-radius .9s,background .9s,border-color .9s,border-width .9s;background:#D8D4CC;border:7px outset #8B877F}
.ab-e{position:absolute;transition:left .9s cubic-bezier(.7,0,.2,1),top .9s cubic-bezier(.7,0,.2,1),width .9s cubic-bezier(.7,0,.2,1),height .9s cubic-bezier(.7,0,.2,1),opacity .6s,background .9s,border-color .9s,border-radius .9s;overflow:hidden;box-sizing:border-box}
.ab-e-hd{display:flex;align-items:center;justify-content:space-between;padding:0 6%}
.ab-e-logo{display:block;width:18%;height:38%;background:currentColor;border-radius:2px}
.ab-e-nav{display:block;width:38%;height:22%;background:repeating-linear-gradient(90deg,currentColor 0 22%,transparent 22% 34%);opacity:.7}
.ab-e-side{display:grid;gap:6%;padding:10% 10%;align-content:start}
.ab-e-side i{display:block;height:18px;background:#B9B3A8;border:2px outset #CFC9BE}
.ab-e-btn{display:grid;place-items:center;font:600 11px var(--f-sans);color:#fff;white-space:nowrap}
.ab-e-c i{display:block;margin:12% 10% 0;height:24%;background:currentColor;opacity:.25;border-radius:2px}
.ab-e-ft{display:grid;place-items:center;font:500 10px var(--f-sans);color:#4A463F;white-space:nowrap}
.ab-e-bdg{display:grid;place-items:center;align-content:center;gap:2px;text-align:center;color:#fff}
.ab-e-bdg svg{width:52%;max-width:70px;transform:rotate(-90deg)}
.ab-e-bdg circle{fill:none;stroke-width:5}.ab-e-rt{stroke:#2A2F40}.ab-e-ra{stroke:var(--ab-o);stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset 1.4s .6s ease-out;stroke-linecap:round}
.ab-era[data-era="3"] .ab-e-ra{stroke-dashoffset:22}
.ab-e-bdg b{font:700 15px var(--f-sans);margin-top:-46%;margin-bottom:28%}.ab-e-bdg small{font:500 10px var(--f-sans);color:var(--ab-pe)}
.ab-e-ans{background:#151823;border:1px solid #2E3344;border-left:3px solid var(--ab-o);padding:3% 4%;display:grid;gap:5px;align-content:start;color:#fff}
.ab-e-ans small{font:500 10px var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ab-pe)}
.ab-e-ans b{font:500 clamp(12px,1.05vw,15px)/1.35 var(--f-sans)}
.ab-e-cite{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--f-sans);color:#C9CBD3;opacity:0;transform:translateY(6px);transition:all .5s}
.ab-e-cite em{font-style:normal;width:16px;height:16px;border-radius:50%;background:var(--ab-o);color:#fff;display:grid;place-items:center;font-size:9.5px}
.ab-era[data-era="4"] .ab-e-cite{opacity:1;transform:none}.ab-era[data-era="4"] .ab-e-cite:last-child{transition-delay:.35s}
/* era skins */
.ab-era[data-era="0"] .ab-e-hd{background:linear-gradient(#8E8A82,#6F6B64);color:#E8E3DA}
.ab-era[data-era="0"] .ab-e-side{background:#C9C3B8}
.ab-era[data-era="0"] .ab-e-hero{background:linear-gradient(#F1E2CF,#D9C1A2);border:2px inset #B8A68C}
.ab-era[data-era="0"] .ab-e-t1,.ab-era[data-era="0"] .ab-e-t2{background:#8A5A33}
.ab-era[data-era="0"] .ab-e-btn{background:linear-gradient(#D2692F,#9C4316);border:2px outset #E07A42}
.ab-era[data-era="0"] .ab-e-c1,.ab-era[data-era="0"] .ab-e-c2,.ab-era[data-era="0"] .ab-e-c3{background:#EDE8DF;border:1px solid #A9A398;color:#6F6B64}
.ab-era[data-era="0"] .ab-e-ft{background:#B9B3A8}
.ab-era[data-era="1"] .ab-era-dev{background:#fff;border:3px solid #2A2D3A}
.ab-era[data-era="1"] .ab-e-hd{background:#fff;color:#0B0C10;border-bottom:1px solid #E0E0E0}
.ab-era[data-era="1"] .ab-e-hero{background:var(--ab-tint,var(--ab-o))}
.ab-era[data-era="1"] .ab-e-t1,.ab-era[data-era="1"] .ab-e-t2{background:#fff}
.ab-era[data-era="1"] .ab-e-btn{background:#0B0C10}
.ab-era[data-era="1"] [class*="ab-e-c"]{background:#F4F4F4;color:#0B0C10}
.ab-era[data-era="2"] .ab-era-dev{background:#fff;border:7px solid #111318}
.ab-era[data-era="2"] .ab-e-hd{background:#fff;color:#0B0C10;border-bottom:1px solid #EEE}
.ab-era[data-era="2"] .ab-e-hero{background:#FFE6D9;border-radius:10px}
.ab-era[data-era="2"] .ab-e-t1,.ab-era[data-era="2"] .ab-e-t2{background:#0B0C10;border-radius:3px}
.ab-era[data-era="2"] .ab-e-btn{background:var(--ab-o);border-radius:20px}
.ab-era[data-era="2"] [class*="ab-e-c"]{background:#F5F2EE;border-left:3px solid var(--ab-o);border-radius:8px;color:#0B0C10}
.ab-era[data-era="3"] .ab-era-dev{background:#0E1018;border:2px solid #2E3344}
.ab-era[data-era="3"] .ab-e-hd{background:#0E1018;color:#C9CBD3;border-bottom:1px solid #22263A}
.ab-era[data-era="3"] .ab-e-hero{background:linear-gradient(135deg,#2A1509,#14161F);border:1px solid #2E3344;border-radius:6px}
.ab-era[data-era="3"] .ab-e-t1,.ab-era[data-era="3"] .ab-e-t2{background:#fff;border-radius:3px}
.ab-era[data-era="3"] .ab-e-btn{background:var(--ab-o);border-radius:4px}
.ab-era[data-era="3"] [class*="ab-e-c"]{background:#151823;border:1px solid #22263A;border-radius:6px;color:#fff}
.ab-era[data-era="3"] .ab-e-bdg{background:#151823;border:1px solid #2E3344;border-radius:6px}
.ab-era[data-era="4"] .ab-era-dev{background:#0B0C10;border:1px solid rgba(255,91,26,.55)}
.ab-era[data-era="4"] .ab-e-hd{background:transparent;color:#8E93A6}
.ab-era[data-era="4"] .ab-e-hero{background:#151823;border:1px solid #2E3344;border-radius:12px}
.ab-era[data-era="4"] .ab-e-t1,.ab-era[data-era="4"] .ab-e-t2{background:#C9CBD3;border-radius:3px}
.ab-era[data-era="4"] .ab-e-btn{background:var(--ab-o);border-radius:12px}
.ab-era[data-era="4"] [class*="ab-e-c"]{background:#151823;border:1px solid #22263A;border-radius:10px;color:#fff}
.ab-era[data-era="4"] .ab-e-ans{border-radius:12px}
/* year track */
.ab-era-track{position:relative;display:flex;justify-content:space-between;padding-top:20px;touch-action:none;cursor:pointer;user-select:none}
.ab-era-rail{position:absolute;left:24px;right:24px;top:6px;height:2px;background:#2A2F40}
.ab-era-fill{position:absolute;left:0;top:0;height:2px;width:0;background:var(--ab-o);transition:width .9s cubic-bezier(.7,0,.2,1)}
.ab-era-knob{position:absolute;top:-7px;left:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--ab-o);box-shadow:0 0 0 5px rgba(255,91,26,.22);transition:left .9s cubic-bezier(.7,0,.2,1);cursor:grab}
.ab-era-dot{background:none;border:0;padding:4px 2px;width:48px;font:500 13px var(--f-sans);color:#8E93A6;transition:color .3s}
.ab-era-dot[aria-selected="true"]{color:#fff}
.ab-era-dot b{font-weight:600}


/* ── answers: engraved nameplate ── */
.ab-np-sec{padding-block:clamp(40px,5vw,72px)}
.ab-np-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ab-np-head p{font-size:15px;color:var(--ink-2)}
.ab-np{position:relative;background:linear-gradient(135deg,#2A2D38,#14161E 40%,#262A35 60%,#101219);border:1px solid #0B0C10;padding:22px 34px 26px;box-shadow:0 30px 40px -28px rgba(11,12,16,.6),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.ab-np::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.ab-np-screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8E93A6,#3A3F52);box-shadow:inset 0 0 0 1px #0B0C10}
.ab-np-screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:#1A1D29;transform:rotate(35deg)}
.ab-np-screw:nth-child(1){left:10px;top:10px}.ab-np-screw:nth-child(2){right:10px;top:10px}.ab-np-screw:nth-child(3){left:10px;bottom:10px}.ab-np-screw:nth-child(4){right:10px;bottom:10px}
.ab-np-brand{font:600 11px var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:#6E7286;text-align:center;margin-bottom:16px}
.ab-np-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.ab-np-f{all:unset;box-sizing:border-box;cursor:pointer;padding:12px 18px;display:grid;gap:8px;align-content:start;border-left:1px solid rgba(255,255,255,.07)}
.ab-np-f:first-child{border-left:0;padding-left:0}
.ab-np-f:focus-visible{outline:2px solid var(--ab-o)}
.ab-np-f small{font:600 11px var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ab-pe)}
.ab-np-t{position:relative;display:block;font:600 clamp(17px,1.5vw,21px)/1.3 var(--f-sans);color:#D9DBE2;text-shadow:0 -1px 0 #000,0 1px 0 rgba(255,255,255,.12)}
.ab-np-laser{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--ab-o);box-shadow:0 0 10px 3px rgba(255,91,26,.8),0 0 2px #fff;opacity:0}
.ab-np-f.eng .ab-np-t{animation:abEng 1.3s steps(26) both}
.ab-np-f.eng .ab-np-laser{animation:abLaser 1.3s linear both}
@keyframes abEng{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes abLaser{0%{left:0;opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
.ab-np-f.eng small{color:#fff}
@media (max-width:900px){.ab-np-grid{grid-template-columns:1fr 1fr;row-gap:10px}.ab-np-f:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:480px){.ab-np{padding:18px 18px 22px}.ab-np-f{padding:10px 10px}.ab-np-t{font-size:15.5px}}

/* ── story: paper strata ── */
.ab-st{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:center}
.ab-st>*{min-width:0}
.ab-st-vis{position:relative;border:1px solid var(--ab-ln);background:#090A10;overflow:hidden}
.ab-st-svg{display:block;width:100%;height:auto}
.ab-st-b{filter:drop-shadow(0 -6px 10px rgba(0,0,0,.45));transition:fill .4s}
.ab-st-edge{fill:none;stroke:transparent;stroke-width:3;transition:stroke .4s}
.ab-st-l.on .ab-st-edge,.ab-st-l:focus-visible .ab-st-edge{stroke:var(--ab-o)}
.ab-st-l.on{--ly:-8}
.ab-st-w{font:700 22px var(--f-flex);fill:#0B0C10;letter-spacing:-.02em}
.ab-st-t{font:500 15px var(--f-sans);fill:#4B4E58}
.ab-st-f{fill:none;stroke:#0B0C10;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .4s,stroke .4s}
.ab-st-l.on .ab-st-f{stroke:var(--ab-oi);opacity:1}
.ab-st-arrow{position:absolute;right:12px;bottom:10px;font:500 12px var(--f-sans);color:#4B4E58;letter-spacing:.08em}
.ab-st-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ab-st-steps button{background:none;border:1px solid #2E3344;color:#C9CBD3;padding:9px 14px;font:500 14px var(--f-sans);transition:all .25s}
.ab-st-steps button[aria-pressed="true"]{background:var(--ab-o);border-color:var(--ab-o);color:#fff}
.ab-st-cards{display:grid}
.ab-st-card{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s,transform .45s,visibility .45s;border-left:2px solid var(--ab-o);padding-left:22px}
.ab-st-card.on{opacity:1;visibility:visible;transform:none}
.ab-st-card small{font:500 12px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ab-pe)}
.ab-st-card h3{font:600 clamp(22px,2vw,28px)/1.2 var(--f-sans);color:#fff;margin:10px 0 12px;letter-spacing:-.01em}
.ab-st-card p{color:var(--fg-2);font-size:16.5px}
@media (max-width:900px){.ab-st{grid-template-columns:1fr}.ab-st-t{display:none}.ab-st-w{font-size:28px}}

.ab-st-l{cursor:pointer;transform:translateY(calc(var(--ly,0) * 1px));transition:transform .5s cubic-bezier(.2,.8,.2,1);outline:none}
.ab-st-derrick{fill:none;stroke:#C9CBD3;stroke-width:2}
.ab-st-shaft{fill:#8E93A6;transition:height .9s cubic-bezier(.6,0,.3,1)}
.ab-st-bit{transition:transform .9s cubic-bezier(.6,0,.3,1)}
.ab-st-bit path{fill:var(--ab-o)}
.ab-st-spark{fill:var(--ab-pe);opacity:0}
.ab-st-rig.dig .ab-st-spark{animation:abSpark .25s steps(2) 4}
@keyframes abSpark{50%{opacity:1}}
/* ── venn: AI and people ── */
.ab-vn{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.ab-vn>*{min-width:0}
.ab-vn-vis svg{display:block;width:100%;height:auto;overflow:visible}
.ab-vn-route{fill:none;stroke:#D6D6D2;stroke-width:2;stroke-dasharray:3 6}
.ab-vn-run{fill:none;stroke:var(--ab-o);stroke-width:2.4;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1)}
.ab-vn-d{cursor:pointer}
.ab-vn-d circle{fill:#fff;stroke:#0B0C10;stroke-width:1.4;transition:all .35s}
.ab-vn-d text{font:600 14px var(--f-sans);text-anchor:middle;fill:#0B0C10;pointer-events:none}
.ab-vn-d.done circle{fill:#0B0C10}.ab-vn-d.done text{fill:#fff}
.ab-vn-d.on circle{fill:var(--ab-o);stroke:var(--ab-o);r:22}.ab-vn-d.on text{fill:#fff}
.ab-vn-cards{display:grid;margin-bottom:22px}
.ab-vn-card{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(16px);transition:all .45s;background:var(--night);color:#fff;padding:24px 26px;border-top:3px solid var(--ab-o)}
.ab-vn-card[data-who="people"]{border-top-color:#fff}
.ab-vn-card.on{opacity:1;visibility:visible;transform:none}
.ab-vn-card small{font:500 12.5px var(--f-sans);color:var(--ab-pe);letter-spacing:.06em}
.ab-vn-card h3{font:600 22px/1.25 var(--f-sans);margin:10px 0 8px}
.ab-vn-card p{color:var(--fg-2);font-size:16px}
.ab-vn-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ab-vn-list button{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid var(--paper-line);padding:9px 10px;font:500 13.5px/1.25 var(--f-sans);color:var(--ink-2);transition:all .25s}
.ab-vn-list button i{flex:none;font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--f-sans);border:1.4px solid #0B0C10;color:#0B0C10}
.ab-vn-list button[data-who="ai"] i{border-color:var(--ab-o);color:var(--ab-oi)}
.ab-vn-list button[data-who="both"] i{background:linear-gradient(90deg,#fff 50%,#FFE2D4 50%)}
.ab-vn-list button[aria-pressed="true"]{border-color:#0B0C10;color:#0B0C10}
.ab-vn-list button[aria-pressed="true"] i{background:var(--ab-o);border-color:var(--ab-o);color:#fff}
@media (max-width:900px){.ab-vn{grid-template-columns:1fr}}
@media (max-width:480px){.ab-vn-list{grid-template-columns:1fr}}

.ab-rl-lane{fill:rgba(11,12,16,.035);stroke:#E2DCD3}
.ab-rl-both{fill:rgba(255,91,26,.06);stroke:rgba(255,91,26,.25)}
.ab-rl-ai{fill:rgba(255,91,26,.12);stroke:rgba(255,91,26,.35)}
.ab-rl-lt{font:600 12px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;fill:#8F8A80}
.ab-rl-ft{font:500 12px var(--f-sans);fill:#8F8A80}
.ab-rl-baton rect{fill:var(--ab-o);stroke:#fff;stroke-width:2}
.ab-rl-baton{transition:transform .9s cubic-bezier(.6,0,.2,1)}
@media (max-width:600px){.ab-rl-lt{font-size:15px}}
/* ── what we build: tree ── */
.ab-tr{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,48px);align-items:center}
.ab-tr>*{min-width:0}
.ab-tr-vis svg{display:block;width:100%;height:auto;overflow:visible}
.ab-tr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;justify-content:center}
.ab-tr-chips button{background:none;border:1px solid #2E3344;color:#C9CBD3;padding:8px 12px;font:500 13.5px var(--f-sans);transition:all .25s}
.ab-tr-chips button[aria-pressed="true"]{border-color:var(--ab-o);color:#fff;background:rgba(255,91,26,.14)}
.ab-tr-cards{display:grid}
.ab-tr-card{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:all .45s;background:#0E1018;border:1px solid var(--ab-ln);padding:26px;display:grid;gap:10px;align-content:start;color:#fff}
.ab-tr-card.on{opacity:1;visibility:visible;transform:none}
.ab-tr-card:hover{border-color:var(--ab-o)}
.ab-tr-card small{font:500 12.5px var(--f-sans);color:var(--ab-pe)}
.ab-tr-card h3{font:600 26px/1.15 var(--f-sans);letter-spacing:-.01em}
.ab-tr-card p{color:var(--fg-2);font-size:16px}
.ab-tr-card ul{margin:4px 0 6px;padding:0;list-style:none;display:grid;gap:6px}
.ab-tr-card li{font-size:14.5px;color:#C9CBD3;padding-left:16px;position:relative}
.ab-tr-card li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--ab-o)}
.ab-tr-card span{font:500 15px var(--f-sans);color:#fff;display:inline-flex;gap:10px;align-items:center}
.ab-tr-card span i{font-style:normal;width:28px;height:28px;background:var(--ab-o);display:grid;place-items:center}

.ab-fw-wheel{transform:rotate(0deg);transition:transform 1.6s cubic-bezier(.5,0,.3,1)}
.ab-fw-hang{transition:transform 1.6s cubic-bezier(.5,0,.3,1)}
.ab-fw-rim{fill:none;stroke:#3A3F52;stroke-width:3}.ab-fw-rim2{fill:none;stroke:#22263A;stroke-width:1.5}
.ab-fw-wheel>path{stroke:#2E3344;stroke-width:1.5}.ab-fw-brace{stroke:#22263A!important}
.ab-fw-leg{fill:none;stroke:#3A3F52;stroke-width:4;stroke-linecap:round}
.ab-fw-plat{fill:#2E3344}.ab-fw-pl{font:500 12px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;fill:#6E7286}
.ab-fw-hub{fill:#0E1018;stroke:var(--ab-o);stroke-width:2}.ab-fw-ht{font:700 14px var(--f-flex);fill:var(--ab-o);text-anchor:middle}
.ab-fw-cab{cursor:pointer}
.ab-fw-hang path{stroke:#6E7286;stroke-width:2}
.ab-fw-hang rect{fill:#151823;stroke:#4A5068;stroke-width:1.5;transition:fill .4s,stroke .4s}
.ab-fw-win{stroke:#2E3344!important;stroke-width:1!important}
.ab-fw-hang text{font:600 17px var(--f-sans);fill:#C9CBD3;text-anchor:middle}
.ab-fw-cab.on .ab-fw-hang rect{fill:var(--ab-o);stroke:var(--ab-o)}.ab-fw-cab.on .ab-fw-hang text{fill:#fff}
.ab-fw-cab:hover .ab-fw-hang rect{stroke:var(--ab-pe)}
@media (max-width:900px){.ab-tr{grid-template-columns:1fr}}
/* ── principles: tabs + morphing drawing ── */
.ab-pr{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.ab-pr>*{min-width:0}
.ab-pr-stage{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--paper-line)}
.ab-pr-art{background:#FBFAF8;border-right:1px solid var(--paper-line);display:grid;place-items:center;padding:18px}
.ab-pr-art svg{width:100%;max-width:360px;height:auto}
.ab-pr-grid path{stroke:#ECE8E2;stroke-width:1;fill:none}
.ab-pr-a,.ab-pr-b,.ab-pr-c{transition:d .85s cubic-bezier(.7,0,.2,1)}
.ab-pr-a{fill:#fff;stroke:#0B0C10;stroke-width:2.2;stroke-linejoin:round}
.ab-pr-b{fill:rgba(255,91,26,.2);stroke:var(--ab-o);stroke-width:2.2}
.ab-pr-c{fill:#0B0C10}
.ab-pr-cap{font:500 15px var(--f-sans);fill:var(--ab-oi);opacity:0;transition:opacity .4s}.ab-pr-cap.on{opacity:1;transition-delay:.45s}
.ab-pr-texts{display:grid;padding:clamp(22px,2.6vw,36px)}
.ab-pr-tx{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .45s;align-self:center}
.ab-pr-tx.on{opacity:1;visibility:visible;transform:none}
.ab-pr-tx small{font:500 12px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ab-oi)}
.ab-pr-tx h3{font:600 clamp(22px,2vw,28px)/1.2 var(--f-sans);margin:10px 0 12px;letter-spacing:-.01em}
.ab-pr-tx p{color:var(--ink-2);font-size:16.5px}
@media (max-width:1000px){.ab-pr{grid-template-columns:1fr}.ab-pr-stage{order:-1}}
@media (max-width:600px){.ab-pr-stage{grid-template-columns:1fr}.ab-pr-art{border-right:0;border-bottom:1px solid var(--paper-line)}.ab-pr-art svg{max-width:260px}}

.ab-pj{display:grid;justify-items:center;gap:8px}
.ab-pj svg{width:100%;max-width:300px;height:auto}
.ab-pj-tray{fill:#fff;stroke:#0B0C10;stroke-width:1.5}.ab-pj-core{fill:#F5F2EE;stroke:#D6D6D2}.ab-pj-hub{fill:#0B0C10}
.ab-pj-rot{transition:transform 1s cubic-bezier(.5,0,.3,1)}
.ab-pj-slot{cursor:pointer;outline:none}
.ab-pj-slot rect{fill:#F5F2EE;stroke:#8F8A80;stroke-width:1.2;transition:all .3s}
.ab-pj-slot text{font:600 12px var(--f-sans);fill:#4B4E58;text-anchor:middle}
.ab-pj-slot.on rect{fill:var(--ab-o);stroke:var(--ab-o)}.ab-pj-slot.on text{fill:#fff}
.ab-pj-slot:hover rect,.ab-pj-slot:focus-visible rect{stroke:var(--ab-o);stroke-width:2}
.ab-pj-gate{fill:#0B0C10}.ab-pj-body{fill:#0B0C10}.ab-pj-lens{fill:#FFA77F;stroke:#0B0C10;stroke-width:3}
.ab-pj-lb{font:500 12px var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:#8F8A80}
.ab-pj-beam{fill:url(#none);fill:rgba(255,167,127,.12);transition:opacity .2s}
.ab-pr.flash .ab-pj-beam{opacity:0}
.ab-pr{grid-template-columns:.5fr 1.5fr!important;align-items:center!important}
@media (max-width:1000px){.ab-pr{grid-template-columns:1fr!important}.ab-pj svg{max-width:220px}}

/* ── not for: highway exits ── */
.ab-hx{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(24px,4vw,56px);align-items:center}
.ab-hx>*{min-width:0}
.ab-hx-vis svg{display:block;width:100%;height:auto;overflow:visible}
.ab-hx-road{fill:none;stroke:#1F2331;stroke-width:44}
.ab-hx-lane{fill:none;stroke:#4A5068;stroke-width:2;stroke-dasharray:14 12;animation:abRoad 1s linear infinite}
@keyframes abRoad{to{stroke-dashoffset:-26}}
.ab-hx-path{fill:none;stroke:none}
.ab-hx-ramp{fill:none;stroke:#1A1D29;stroke-width:26;stroke-linecap:round;transition:stroke .4s}
.ab-hx-ramp.on{stroke:#3A1A0A}
.ab-hx-vis{position:relative}
.ab-hx-sign{position:absolute;display:grid;gap:2px;text-align:left;background:#151823;border:1.5px solid #4A5068;border-radius:4px;padding:6px 10px;color:#fff;transition:all .3s;max-width:24%}
.ab-hx-sign small{font:700 10px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ab-pe)}
.ab-hx-sign b{font:600 13px/1.25 var(--f-sans)}
.ab-hx-sign:hover{border-color:var(--ab-pe)}
.ab-hx-sign.on{background:var(--ab-o);border-color:var(--ab-o)}.ab-hx-sign.on small{color:#fff}
.ab-hx-dest rect{fill:#0E1018;stroke:var(--ab-o);stroke-width:2}
.ab-hx-dest text{font:700 14px var(--f-flex);fill:#fff}.ab-hx-dest .ab-hx-d2{font:500 10px var(--f-sans);fill:var(--ab-pe)}
.ab-hx-car rect{fill:var(--ab-o)}.ab-hx-car .ab-hx-glass{fill:#FFD9C2}
.ab-hx-ps{display:grid}
.ab-hx-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .45s;border-left:2px solid var(--ab-o);padding-left:20px;display:grid;gap:10px;align-content:start}
.ab-hx-p.on{opacity:1;visibility:visible;transform:none}
.ab-hx-p small{font:500 12px var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ab-pe)}
.ab-hx-p h3{font:600 clamp(21px,1.9vw,26px)/1.25 var(--f-sans);color:#fff}
.ab-hx-p p{color:var(--fg-2);font-size:16.5px}
.ab-hx-p a{display:inline-flex;align-items:center;gap:12px;font:500 15px var(--f-sans);color:#fff;justify-self:start}
.ab-hx-p a i{font-style:normal;width:30px;height:30px;background:var(--ab-o);display:grid;place-items:center}
@media (max-width:900px){.ab-hx{grid-template-columns:1fr}}
@media (max-width:560px){.ab-hx-sign{padding:4px 6px;max-width:34%}.ab-hx-sign b{font-size:11px}.ab-hx-sign small{font-size:9px}.ab-hx-vis{padding:14px 0}}

@media (prefers-reduced-motion:reduce){
  .ab-era *,.ab-np *,.ab-st *,.ab-vn *,.ab-tr *,.ab-pr *,.ab-hx *{transition:none!important;animation:none!important}
}
@media (max-width:900px){.ab-era{margin:0 auto}}
@media (max-width:480px){.ab-era{padding:14px 12px 12px}.ab-era-yr{font-size:24px}.ab-era-cap{font-size:13px}.ab-era-dot{width:40px;font-size:12px}.ab-era-rail{left:20px;right:20px}.ab-e-btn{font-size:9px}.ab-e-ft{font-size:8px}.ab-e-ans b{font-size:11.5px}.ab-e-cite{font-size:9.5px}}

/* settle final state even if the first draw-in was throttled off-screen */

/* QA fixes (Q3) */
@media (max-width:600px){.ab-rl-lt{font-size:18px;letter-spacing:.06em}.ab-rl-ft{font-size:18px}.ab-vn-d text{font-size:18px}}
@media (max-width:480px){.ab-era-dot{padding:9px 2px}}
@media (max-width:560px){.ab-hx-sign small{font-size:10px;letter-spacing:.08em}}
/* laptop widths: the 2010 mock is smaller, keep its "Order" button label inside the button */
@media (min-width:901px) and (max-width:1300px){.ab-era[data-era="0"] .ab-e-btn{font-size:10px;line-height:1;border-width:1px}}
/* phone font pass (+3px small text): exit signs no longer fit on the road at the larger size, so they sit in a 2x2 grid under it */
@media (max-width:600px){
  .ab-hx-vis{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0}
  .ab-hx-vis svg{grid-column:1/-1;margin-bottom:4px}
  .ab-hx-sign{position:static;max-width:none;padding:8px 10px;cursor:pointer}
  .ab-hx-dest .ab-hx-d2{display:none}
  .ab-hx-dest text{font-size:16px}
  .ab-hx-dest text:first-of-type{transform:translateY(16px)}
  .ab-rl-lt,.ab-rl-ft{font-size:21px}
}