/* ============================================================
AUDIT HERO · B3 — marked-up Letter of Authority 2026-08-01
------------------------------------------------------------
Scoped entirely to section.sp-hero.hero-b3 on audit.html.
Nothing here leaks to the other service pages: every rule is
prefixed, and the only shared classes it touches (.eyebrow, h1,
.lead, .sp-actions, .sp-proof) are overridden inside that scope.
Layout: artwork LEFT · headline RIGHT · eyebrow centred above.
The three margin notes are positioned by js/audit-hero-b3.js —
each note's headline is measured and centred on the circle it
belongs to, and the elbow connector is drawn between those two
measured points. Do not hardcode note offsets here.
Requires Caveat + Roboto Mono in the page's font link.
============================================================ */
.sp-hero.hero-b3 {
--b3-hand: 'Caveat', cursive;
--b3-mono: 'Roboto Mono', ui-monospace, monospace;
/* caption card: lime wash. The brand's resolved/positive colour, so the
card reads as the outcome after the crimson marks rather than more
alarm. Kept very pale — the annotations must stay the loudest thing
in the panel. */
--b3-wash: #F4FAE6;
--b3-wash-line: rgba(132, 204, 2, .28);
--b3-wash-rule: rgba(132, 204, 2, .45);
--b3-ease: cubic-bezier(.22, 1, .36, 1);
/* the artwork is ~600px tall; the stock hero padding would push the
caption off a 900px-high panel */
padding: clamp(96px, 11vw, 132px) 0 clamp(44px, 5vw, 68px);
}
/* ---------- eyebrow promoted to a centred banner ---------- */
.sp-hero.hero-b3 .hero-top {
display: flex; justify-content: center; text-align: center;
margin-bottom: clamp(24px, 3vw, 40px);
}
.sp-hero.hero-b3 .hero-top .eyebrow { margin-bottom: 0; max-width: 100%; }
/* ---------- wider container, this hero only ----------
The site grid is min(1180px, 92%). The artwork needs ~605px (376px
document + 196px note column + gutter), which left the headline
~530px — too narrow to set the three-line break at any size worth
having. 1340px buys the copy column ~680px, which is what carries
the 3.42rem headline. Deliberate: this hero is wider than the nav
and the sections below it. */
.sp-hero.hero-b3 .container { width: min(1340px, 95%); }
/* ---------- two columns that trade sides ----------
Phase A: artwork LEFT · headline RIGHT.
Phase B: headline LEFT · case dossier RIGHT.
Placement is by explicit grid-column (not `order`) so the copy can stay
FIRST in the DOM — reading order and the stacked layout must always put
the headline before the artwork, whichever side it is painted on. */
.sp-hero.hero-b3 .hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.13fr);
gap: clamp(32px, 3.2vw, 52px); align-items: center;
transition: grid-template-columns .5s var(--b3-ease);
}
.sp-hero.hero-b3 .hero-copy { grid-column: 2; grid-row: 1; }
.sp-hero.hero-b3 .hero-viz { grid-column: 1; grid-row: 1; display: grid; }
.sp-hero.hero-b3.phase-b .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
.sp-hero.hero-b3.phase-b .hero-copy { grid-column: 1; }
.sp-hero.hero-b3.phase-b .hero-viz { grid-column: 2; }
/* Both artworks share one grid cell, so the panel's height is the taller of
the two and never jumps mid-swap. The idle one keeps its layout box
(visibility, not display) — the note measurements depend on it. */
.sp-hero.hero-b3 .hero-viz > * { grid-area: 1 / 1; align-self: center; }
.sp-hero.hero-b3 .viz-pane { transition: opacity .3s ease; }
.sp-hero.hero-b3 .viz-pane.off { opacity: 0; visibility: hidden; pointer-events: none; }
.sp-hero.hero-b3 .b3-stage { position: relative; padding-top: 44px; }
/* ---------- the mirror ----------
Both blocks fade out toward where they are going, swap columns while
invisible, then enter from the far side, so the movement reads as one
continuous slide rather than a bounce. JS seeds the entry offset. */
.sp-hero.hero-b3 .hero-copy,
.sp-hero.hero-b3 .hero-viz { transition: opacity .34s ease, transform .44s var(--b3-ease); }
.sp-hero.hero-b3.swapping .hero-copy,
.sp-hero.hero-b3.swapping .hero-viz { opacity: 0; }
.sp-hero.hero-b3.phase-a.swapping .hero-copy { transform: translateX(-32px); }
.sp-hero.hero-b3.phase-a.swapping .hero-viz { transform: translateX(32px); }
.sp-hero.hero-b3.phase-b.swapping .hero-copy { transform: translateX(32px); }
.sp-hero.hero-b3.phase-b.swapping .hero-viz { transform: translateX(-32px); }
.sp-hero.hero-b3.no-anim,
.sp-hero.hero-b3.no-anim * { transition: none !important; }
/* ---------- headline: exactly three lines ----------
The breaks are explicit (
), so the shape is fixed
rather than at the mercy of the measure. The size then tracks the
viewport at 3.9vw, which is the rate that keeps the longest line
("process — and we run it.", 24ch) just inside the column at every
width down to the stacked breakpoint. Change the copy and the
3.9vw needs recomputing, or the third line will wrap to a fourth. */
.sp-hero.hero-b3 h1 {
font-size: clamp(2.05rem, 3.9vw, 3.42rem);
line-height: 1.04; letter-spacing: -.028em;
max-width: none; margin-bottom: 22px;
text-wrap: pretty;
}
.sp-hero.hero-b3 .lead { max-width: 48ch; margin-bottom: 26px; }
/* ---------- the document ---------- */
.sp-hero.hero-b3 .b3-plot { position: relative; }
.sp-hero.hero-b3 .loa {
position: relative; z-index: 2; width: min(376px, 66%); margin-left: auto;
background: #fff; border: 1px solid rgba(31, 43, 61, .14); border-radius: 4px;
box-shadow: 0 30px 74px -26px rgba(31, 43, 61, .5);
padding: 26px 28px 34px;
transform: rotate(-2deg) translateY(28px); opacity: 0;
transition: transform .9s var(--b3-ease), opacity .7s ease;
}
.sp-hero.hero-b3 .play .loa,
.sp-hero.hero-b3.play .loa { transform: rotate(-2deg) translateY(0); opacity: 1; }
.sp-hero.hero-b3 .loa .seal {
display: flex; align-items: center; gap: 11px;
padding-bottom: 12px; border-bottom: 2.5px solid var(--gunmetal); margin-bottom: 15px;
}
.sp-hero.hero-b3 .loa .seal .ring {
width: 33px; height: 33px; flex: 0 0 auto; border-radius: 50%;
border: 2px solid var(--gunmetal); display: grid; place-items: center;
font-size: .6rem; font-weight: 800;
}
.sp-hero.hero-b3 .loa .seal .who {
font-family: var(--b3-mono); font-size: .63rem; letter-spacing: .09em;
line-height: 1.6; text-transform: uppercase;
}
.sp-hero.hero-b3 .loa h5 {
font-family: var(--b3-mono); font-size: .82rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; text-align: center; margin-bottom: 5px;
}
.sp-hero.hero-b3 .loa .no {
font-family: var(--b3-mono); font-size: .66rem; letter-spacing: .09em;
text-align: center; color: var(--gray); margin-bottom: 20px;
}
.sp-hero.hero-b3 .loa .ln {
height: 7.5px; border-radius: 4px; background: rgba(31, 43, 61, .12); margin-bottom: 10px;
}
.sp-hero.hero-b3 .loa .ln.s { width: 60%; }
.sp-hero.hero-b3 .loa .ln.m { width: 86%; }
.sp-hero.hero-b3 .loa .ln.x { width: 44%; }
.sp-hero.hero-b3 .loa .ln.q { width: 72%; }
.sp-hero.hero-b3 .loa .redact {
height: 7.5px; border-radius: 4px; background: rgba(31, 43, 61, .55);
margin-bottom: 10px; width: 38%;
}
/* paper grain */
.sp-hero.hero-b3 .grain { position: relative; }
.sp-hero.hero-b3 .grain::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit; opacity: .5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
/* ---------- EXAMINE stamp ---------- */
.sp-hero.hero-b3 .stamp {
position: absolute; bottom: 20px; right: 18px;
border: 3px solid var(--crimson); color: var(--crimson); border-radius: 7px;
padding: 6px 13px; font-family: var(--b3-mono); font-size: .7rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; text-align: center; line-height: 1.3;
transform: rotate(-10deg) scale(1.9); opacity: 0;
transition: transform .42s cubic-bezier(.2, 1.5, .4, 1), opacity .2s ease;
}
.sp-hero.hero-b3 .stamp small { display: block; font-size: .55rem; letter-spacing: .1em; opacity: .85; }
.sp-hero.hero-b3.play .stamp { transform: rotate(-10deg) scale(1); opacity: .86; transition-delay: .55s; }
/* ---------- "first read" tag, taped to the paper ----------
It lives INSIDE .loa so it inherits the -2deg tilt: the promise
reads as something already applied to the client's document
rather than a badge floating in the panel. */
.sp-hero.hero-b3 .b3-tag {
position: absolute; top: -15px; left: 18px;
display: inline-flex; align-items: center; gap: 8px;
background: var(--gunmetal); color: #fff; border-radius: 6px;
padding: 8px 15px; font-size: .58rem; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; z-index: 6;
box-shadow: 0 12px 24px -12px rgba(31, 43, 61, .75);
opacity: 0; transform: translateY(-8px);
transition: opacity .5s ease, transform .6s var(--b3-ease);
}
.sp-hero.hero-b3.play .b3-tag { opacity: 1; transform: translateY(0); transition-delay: .25s; }
.sp-hero.hero-b3 .b3-tag i {
width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
animation: b3-pulse 2.4s infinite;
}
@keyframes b3-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
/* ---------- hand-drawn circles ---------- */
.sp-hero.hero-b3 .hl { position: relative; }
.sp-hero.hero-b3 .hl > svg {
position: absolute; left: -9px; right: -9px; top: -9px; bottom: -9px;
width: calc(100% + 18px); height: calc(100% + 18px);
overflow: visible; pointer-events: none; z-index: 3;
}
.sp-hero.hero-b3 .hl > svg path {
fill: none; stroke: var(--crimson); stroke-width: 2.2; stroke-linecap: round;
vector-effect: non-scaling-stroke; opacity: .8;
stroke-dasharray: 1; stroke-dashoffset: 1;
transition: stroke-dashoffset .62s cubic-bezier(.55, .1, .35, 1), stroke-width .2s ease, opacity .2s ease;
}
.sp-hero.hero-b3.play .hl > svg path { stroke-dashoffset: 0; }
.sp-hero.hero-b3.play .hl.d1 > svg path { transition-delay: .95s; }
.sp-hero.hero-b3.play .hl.d2 > svg path { transition-delay: 1.85s; }
.sp-hero.hero-b3.play .hl.d3 > svg path { transition-delay: 2.75s; }
.sp-hero.hero-b3 .hl.hot > svg path { opacity: 1; stroke-width: 3; transition-delay: 0s !important; }
/* ---------- connectors (drawn by JS) ---------- */
.sp-hero.hero-b3 .conn {
position: absolute; inset: 0; width: 100%; height: 100%;
overflow: visible; pointer-events: none; z-index: 4;
}
.sp-hero.hero-b3 .conn path {
fill: none; stroke: var(--crimson); stroke-width: 1.6; stroke-linecap: round; opacity: .5;
stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .38s ease-out;
}
.sp-hero.hero-b3.play .conn path { stroke-dashoffset: 0; }
.sp-hero.hero-b3.play .conn path.c1 { transition-delay: 1.02s; }
.sp-hero.hero-b3.play .conn path.c2 { transition-delay: 1.92s; }
.sp-hero.hero-b3.play .conn path.c3 { transition-delay: 2.82s; }
/* ---------- margin notes (left of the document) ---------- */
.sp-hero.hero-b3 .note {
position: absolute; left: 0; width: 196px; text-align: right; z-index: 5;
transition: opacity .25s ease;
}
.sp-hero.hero-b3 .note b {
display: block; font-family: var(--b3-hand); font-size: 1.28rem; font-weight: 700;
line-height: 1.05; color: var(--crimson);
clip-path: inset(0 100% 0 0); transition: clip-path .58s cubic-bezier(.5, .05, .3, 1);
}
.sp-hero.hero-b3 .note span {
display: block; font-size: .7rem; line-height: 1.5; color: var(--gray-dark);
font-weight: 500; margin-top: 5px;
opacity: 0; transform: translateY(5px);
transition: opacity .4s ease, transform .4s var(--b3-ease);
}
.sp-hero.hero-b3.play .note b { clip-path: inset(0 0 0 0); }
.sp-hero.hero-b3.play .note span { opacity: 1; transform: translateY(0); }
.sp-hero.hero-b3.play .n1 b { transition-delay: 1.18s; }
.sp-hero.hero-b3.play .n1 span { transition-delay: 1.5s; }
.sp-hero.hero-b3.play .n2 b { transition-delay: 2.08s; }
.sp-hero.hero-b3.play .n2 span { transition-delay: 2.4s; }
.sp-hero.hero-b3.play .n3 b { transition-delay: 2.98s; }
.sp-hero.hero-b3.play .n3 span { transition-delay: 3.3s; }
.sp-hero.hero-b3 .note.dim { opacity: .38; }
/* ---------- caption D · case-file stub (lime wash) ---------- */
.sp-hero.hero-b3 .b3-cap {
display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: start;
margin-top: 28px; padding: 19px 24px;
background: var(--b3-wash); border: 1px solid var(--b3-wash-line); border-radius: 10px;
opacity: 0; transform: translateY(6px);
transition: opacity .5s ease, transform .5s var(--b3-ease);
}
.sp-hero.hero-b3.play .b3-cap { opacity: 1; transform: translateY(0); transition-delay: 3.55s; }
.sp-hero.hero-b3 .b3-cap .stub {
grid-row: 1 / 3; align-self: stretch;
display: flex; flex-direction: column; justify-content: center; gap: 4px;
padding-right: 18px; border-right: 1px dashed var(--b3-wash-rule); text-align: center;
}
.sp-hero.hero-b3 .b3-cap .stub em {
font-style: normal; font-family: var(--b3-mono); font-size: .5rem;
letter-spacing: .16em; text-transform: uppercase; color: var(--lime-dark);
}
.sp-hero.hero-b3 .b3-cap .stub strong {
font-family: var(--b3-mono); font-size: 1.02rem; letter-spacing: .06em; color: var(--gunmetal);
}
.sp-hero.hero-b3 .b3-cap .say {
font-family: var(--font-serif); font-style: italic; font-size: .92rem;
line-height: 1.5; color: var(--gunmetal);
}
.sp-hero.hero-b3 .b3-cap .sub { font-size: .76rem; color: var(--gray-dark); margin-top: 5px; }
/* ---------- stacked: headline first, notes under the document ---------- */
@media (max-width: 900px) {
.sp-hero.hero-b3 .container { width: min(1180px, 92%); } /* back on the site grid */
/* one column: headline always first, artwork under it, no side-swapping */
.sp-hero.hero-b3 .hero-grid,
.sp-hero.hero-b3.phase-b .hero-grid { grid-template-columns: 1fr; gap: 40px; }
.sp-hero.hero-b3 .hero-copy,
.sp-hero.hero-b3.phase-b .hero-copy { grid-column: 1; grid-row: 1; }
.sp-hero.hero-b3 .hero-viz,
.sp-hero.hero-b3.phase-b .hero-viz { grid-column: 1; grid-row: 2; }
.sp-hero.hero-b3.phase-a.swapping .hero-copy,
.sp-hero.hero-b3.phase-b.swapping .hero-copy { transform: none; }
.sp-hero.hero-b3 .hero-top { justify-content: flex-start; text-align: left; }
.sp-hero.hero-b3 h1 { max-width: 22ch; font-size: clamp(1.95rem, 5.4vw, 2.8rem); }
/* the three-line break is tuned to the desktop column; on a phone it
would produce short orphaned lines, so let the measure do the work.
The space before each
survives the collapse, so the words
don't run together. */
.sp-hero.hero-b3 h1 .lb { display: none; }
.sp-hero.hero-b3 .b3-plot { display: flex; flex-direction: column; align-items: center; }
.sp-hero.hero-b3 .conn { display: none; }
.sp-hero.hero-b3 .loa { width: min(360px, 90%); margin-left: 0; margin-bottom: 26px; }
.sp-hero.hero-b3 .note {
position: static !important; width: 100%; max-width: 360px; text-align: left;
margin-bottom: 16px; padding-left: 16px; border-left: 2px solid rgba(255, 0, 43, .35);
}
.sp-hero.hero-b3 .note b { font-size: 1.16rem; }
}
/* ---------- reduced motion: show the finished state ---------- */
@media (prefers-reduced-motion: reduce) {
.sp-hero.hero-b3 .loa,
.sp-hero.hero-b3 .stamp,
.sp-hero.hero-b3 .b3-tag,
.sp-hero.hero-b3 .b3-cap,
.sp-hero.hero-b3 .note b,
.sp-hero.hero-b3 .note span,
.sp-hero.hero-b3 .hl > svg path,
.sp-hero.hero-b3 .conn path { transition: none !important; }
.sp-hero.hero-b3 .loa,
.sp-hero.hero-b3 .b3-tag,
.sp-hero.hero-b3 .b3-cap,
.sp-hero.hero-b3 .note span { opacity: 1 !important; transform: none !important; }
.sp-hero.hero-b3 .loa { transform: rotate(-2deg) !important; }
.sp-hero.hero-b3 .stamp { opacity: .86 !important; transform: rotate(-10deg) scale(1) !important; }
.sp-hero.hero-b3 .note b { clip-path: none !important; }
.sp-hero.hero-b3 .hl > svg path,
.sp-hero.hero-b3 .conn path { stroke-dashoffset: 0 !important; }
.sp-hero.hero-b3 .b3-tag i { animation: none; }
}
/* ============================================================
AUDIT HERO · PHASE B — case dossier 2026-08-01
------------------------------------------------------------
The second half of the hero cycle: the file we build for the
client, with three tabs that advance themselves. Scoped to
section.sp-hero.hero-b3 like everything above it.
Timing contract with js/audit-hero-b3.js:
phase A hold 10.0s (markup sequence runs in the first 4.1s)
mirror 0.46s
tab dwell 3.4s × 3 tabs = 10.2s
--b3-tab-dur below MUST match TL.TAB in the script — it drives
the fill bar inside the active tab, and a mismatch shows up as
a bar that finishes early or gets cut off.
============================================================ */
.sp-hero.hero-b3 { --b3-tab-dur: 3.4s; --b3-manila: #EFE4CE; --b3-manila-tab: #E7DAC1; }
.sp-hero.hero-b3 .dos-stage { display: grid; place-items: center; padding: 10px 0; }
.sp-hero.hero-b3 .dos {
position: relative; width: min(430px, 94%);
transform: rotate(-1.4deg) translateY(22px); opacity: 0;
transition: transform .8s var(--b3-ease), opacity .55s ease;
}
.sp-hero.hero-b3.bplay .dos { transform: rotate(-1.4deg) translateY(0); opacity: 1; }
/* ---------- tabs ---------- */
.sp-hero.hero-b3 .dos-tabs { display: flex; gap: 6px; padding-left: 26px; position: relative; z-index: 1; }
.sp-hero.hero-b3 .dos-tabs button {
position: relative; background: var(--b3-manila-tab);
border: 1px solid rgba(31, 43, 61, .14); border-bottom: none; border-radius: 9px 9px 0 0;
padding: 8px 14px 10px; font-family: var(--b3-mono); font-size: .58rem; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; color: var(--gunmetal);
opacity: .72; cursor: pointer; overflow: hidden;
transform: translateY(9px);
transition: transform .5s var(--b3-ease), opacity .3s ease, background .3s ease;
}
.sp-hero.hero-b3.bplay .dos-tabs button { transform: translateY(0); }
.sp-hero.hero-b3.bplay .dos-tabs button:nth-child(1) { transition-delay: .24s; }
.sp-hero.hero-b3.bplay .dos-tabs button:nth-child(2) { transition-delay: .34s; }
.sp-hero.hero-b3.bplay .dos-tabs button:nth-child(3) { transition-delay: .44s; }
.sp-hero.hero-b3 .dos-tabs button.on { background: var(--b3-manila); opacity: 1; font-weight: 700; }
.sp-hero.hero-b3 .dos-tabs button .prog {
position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
background: var(--crimson); transform: scaleX(0); transform-origin: left center;
}
.sp-hero.hero-b3 .dos-tabs button.on .prog { animation: b3-tabfill var(--b3-tab-dur) linear forwards; }
.sp-hero.hero-b3.paused .dos-tabs button.on .prog { animation-play-state: paused; }
@keyframes b3-tabfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ---------- loose sheets behind the folder ---------- */
.sp-hero.hero-b3 .dos-sheets { position: absolute; left: 16px; right: 16px; top: 46px; height: 250px; z-index: 0; }
.sp-hero.hero-b3 .dos-sheets i {
position: absolute; left: 0; right: 0; height: 230px; background: #fff;
border: 1px solid rgba(31, 43, 61, .12); border-radius: 4px;
box-shadow: 0 12px 30px -18px rgba(31, 43, 61, .4);
}
.sp-hero.hero-b3 .dos-sheets i:nth-child(1) { transform: rotate(-2.4deg) translateY(-6px); }
.sp-hero.hero-b3 .dos-sheets i:nth-child(2) { transform: rotate(1.6deg) translateY(-3px); }
/* ---------- the folder ---------- */
.sp-hero.hero-b3 .dos-folder {
position: relative; z-index: 2; background: var(--b3-manila);
border: 1px solid rgba(31, 43, 61, .16); border-radius: 4px 12px 12px 12px;
box-shadow: 0 30px 70px -28px rgba(31, 43, 61, .5); padding: 22px 24px 20px;
}
.sp-hero.hero-b3 .dos-folder::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
border-radius: 4px 12px 0 0;
background: linear-gradient(90deg, var(--crimson) 0 34%, rgba(31, 43, 61, .18) 34% 100%);
}
/* panes share a cell so the folder never resizes between tabs */
.sp-hero.hero-b3 .dos-panes { display: grid; }
.sp-hero.hero-b3 .pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .34s ease; }
.sp-hero.hero-b3 .pane.on { opacity: 1; visibility: visible; }
.sp-hero.hero-b3 .dos-lbl {
position: relative; background: #fff; border: 1px solid rgba(31, 43, 61, .14);
border-radius: 6px; padding: 12px 14px; margin-bottom: 16px;
}
.sp-hero.hero-b3 .dos-lbl .k {
font-family: var(--b3-mono); font-size: .56rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--gray); margin-bottom: 3px;
}
.sp-hero.hero-b3 .dos-lbl .v { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.sp-hero.hero-b3 .dos-lbl .r {
position: absolute; top: 11px; right: 12px; font-family: var(--b3-mono); font-size: .54rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--crimson);
border: 1px solid rgba(255, 0, 43, .35); background: rgba(255, 0, 43, .06);
border-radius: 4px; padding: 3px 7px;
}
.sp-hero.hero-b3 .dos-list div {
display: flex; align-items: center; gap: 11px; padding: 9px 2px;
border-bottom: 1px dashed rgba(31, 43, 61, .18); font-size: .79rem; font-weight: 600;
}
.sp-hero.hero-b3 .dos-list div:last-child { border-bottom: none; }
.sp-hero.hero-b3 .pane.on .dos-list div { animation: b3-rowin .42s var(--b3-ease) backwards; }
.sp-hero.hero-b3 .pane.on .dos-list div:nth-child(1) { animation-delay: .06s; }
.sp-hero.hero-b3 .pane.on .dos-list div:nth-child(2) { animation-delay: .12s; }
.sp-hero.hero-b3 .pane.on .dos-list div:nth-child(3) { animation-delay: .18s; }
.sp-hero.hero-b3 .pane.on .dos-list div:nth-child(4) { animation-delay: .24s; }
.sp-hero.hero-b3 .pane.on .dos-list div:nth-child(5) { animation-delay: .30s; }
@keyframes b3-rowin { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.sp-hero.hero-b3 .dos-list .n { font-family: var(--b3-mono); font-size: .6rem; color: var(--gray); width: 20px; flex: 0 0 auto; }
.sp-hero.hero-b3 .dos-list .st {
margin-left: auto; font-family: var(--b3-mono); font-size: .55rem; letter-spacing: .09em;
text-transform: uppercase; padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}
.sp-hero.hero-b3 .dos-list .st.ok { color: var(--lime-dark); background: rgba(132, 204, 2, .12); border: 1px solid rgba(132, 204, 2, .32); }
.sp-hero.hero-b3 .dos-list .st.wip { color: var(--crimson); background: rgba(255, 0, 43, .07); border: 1px solid rgba(255, 0, 43, .28); }
.sp-hero.hero-b3 .dos-list .st.q { color: var(--gray); background: rgba(31, 43, 61, .05); border: 1px solid rgba(31, 43, 61, .12); }
.sp-hero.hero-b3 .dos-foot {
margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(31, 43, 61, .14);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sp-hero.hero-b3 .dos-foot b { font-size: .76rem; font-weight: 700; }
.sp-hero.hero-b3 .dos-foot small { display: block; font-size: .64rem; color: var(--gray-dark); font-weight: 500; }
.sp-hero.hero-b3 .dos-foot .cs { font-family: var(--b3-mono); font-size: .6rem; letter-spacing: .1em; color: var(--gray); }
/* string tie — unwinds when the folder is hovered */
.sp-hero.hero-b3 .dos-tie {
position: absolute; right: -14px; top: 52%; width: 50px; height: 50px; z-index: 3;
transition: transform .6s var(--b3-ease);
}
.sp-hero.hero-b3 .dos:hover .dos-tie { transform: rotate(-28deg); }
/* ---------- stacked ---------- */
@media (max-width: 900px) {
.sp-hero.hero-b3 .dos { width: min(390px, 100%); }
.sp-hero.hero-b3 .dos-stage { padding: 0; }
}
/* ---------- reduced motion: no cycling, phase A only ----------
The script skips the phase machine outright when this matches, so the
dossier is never shown; these rules just neutralise its entry state in
case it is toggled by hand. */
@media (prefers-reduced-motion: reduce) {
.sp-hero.hero-b3 .hero-copy,
.sp-hero.hero-b3 .hero-viz,
.sp-hero.hero-b3 .dos { transition: none !important; }
.sp-hero.hero-b3 .dos { opacity: 1 !important; transform: rotate(-1.4deg) !important; }
.sp-hero.hero-b3 .dos-tabs button { transform: none !important; }
.sp-hero.hero-b3 .dos-tabs button.on .prog { animation: none; transform: scaleX(1); }
.sp-hero.hero-b3 .pane.on .dos-list div { animation: none; }
}