/*
 * about.css — About page, 2026 rebuild.
 *
 * Scoped to body.apex-about. Same light system as Contact (cnt2.css) and the
 * blog (blg3.css / pst3.css) — same tokens, same type scale — but with its own
 * signature, because a page that only matches its neighbours has no reason to
 * be remembered.
 *
 * THE IDEA: the founder's actual skill is *noticing* — spotting the work a
 * business is still doing by hand. So the page marks things. A highlighter
 * sweep draws across the two lines that carry the pitch, and the opening
 * demonstration strikes real busywork off a list rather than describing it.
 * Everything else is kept deliberately quiet so those moments read.
 *
 * MOTION: one authored behaviour per section, not one entrance repeated nine
 * times. Hero lines rise from a mask · the ledger strikes itself through ·
 * proof rules draw · value rows come from the left · the quote blurs in under
 * its marker · the story stays still (it earns the quiet) · the method draws a
 * connector through 01–02–03 · the service icons draw their own strokes while
 * the panels stack · the close repeats the marker once.
 *
 * All of it gates on `.abt-js`, so with JS off or reduced-motion on, every
 * final state is simply present.
 *
 * Type scale: 50 title · 30 h2 · 19-21 lede · 19 h3 · 16-19 body · 17 faq
 * (matches web-design.md / pst3.css)
 */

body.apex-about {
    --abt-navy: #0a1730;
    --abt-accent: #22458a;
    --abt-body: #33415e;
    --abt-muted: #4d5b74;
    --abt-dim: #68758d;
    --abt-line: var(--a-line);
    --abt-line-strong: rgba(13, 35, 80, .24);
    --abt-paper: #f2f6fb;
    --abt-ice: #dbe7f5;
    --abt-ease: cubic-bezier(.22, 1, .36, 1);
    --abt-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #fff;
}

/* The shell and main are left entirely alone. About no longer carries
   `aa-adnia-copy-page` (see page-about.php), so neither the night background
   nor the `overflow: clip` that used to break the sticky service stack applies
   here any more — there is nothing left to override. */
body.apex-about .site-shell,
body.apex-about .site-main {
    background: #fff;
}

body.apex-about .abt-page,
body.apex-about .abt-page * {
    font-family: var(--abt-sans);
    -webkit-font-smoothing: antialiased;
}

.abt-page {
    position: relative;
    z-index: 1;
    color: var(--abt-body);
    background: #fff;
}

/* ---------- shell ---------- */

/* 1180 of box minus 58 of padding put About's content at x=188 while the rest
   of the site starts at 120. Same shell as everywhere else now; the gutter is
   the shell's, so the padding goes. */
.abt-shell {
    width: var(--a-shell);
    margin: 0 auto;
}

/* ---------- base type ---------- */

.abt-page h1,
.abt-page h2,
.abt-page h3 {
    margin: 0;
    color: var(--abt-navy);
    text-wrap: balance;
}

/* main.css ships h3 at 700. Every other page sets its h3 to 600; About was the
   only one still inheriting the heavier weight. */
.abt-page h3 { font-weight: 600 }

.abt-page p { text-wrap: pretty }
/* Only links carrying no class of their own inherit their colour. Written as
   the bare `.abt-page a` this is (0,1,1), which silently outranks every
   single-class component rule like `.abt-btn` (0,1,0) — the primary button was
   rendering body-navy text on its own navy fill at 1.75:1, and `.abt-link` had
   lost its accent entirely. `:not([class])` cannot match a classed link at
   all, so component colours win by construction rather than by specificity
   arithmetic. */
.abt-page a:not([class]) { color: inherit }

.abt-values__intro h2,
.abt-story h2,
.abt-jobs h2,
.abt-co h2,
.abt-doors h2,
.abt-method__head h2,
.abt-expertise__head h2,
.abt-faq__head h2,
.abt-cta h2,
.abt-ledger__head h2 {
    margin: 0 0 12px;
    /* the site's head rank. About set its section heads at 30px, half a rank
       below every other page's 46, which is the single loudest reason it read
       as a different site. */
    font: 600 var(--a-t-head)/1.14 var(--abt-sans);
    letter-spacing: -.026em;
}

/* ---------- focus ---------- */

.abt-page a:focus-visible,
.abt-page button:focus-visible,
.abt-page summary:focus-visible {
    outline: var(--a-focus);
    outline-offset: var(--a-focus-off);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE MARKER — the page's signature.
   A highlighter sweep, not a fill: it sits on the baseline and covers the
   lower third of the line, the way a real marker does. box-decoration-break
   makes it wrap correctly across lines, so each line gets its own stroke.
   Used exactly three times on the page; any more and it stops meaning
   anything. Contrast is safe by construction — a 16% accent tint over white
   keeps navy text above 12:1.
   ═══════════════════════════════════════════════════════════════════════ */

/* This was a highlighter stroke that drew itself in under the marked phrase:
   an animated background-size on an <em>, offset per context because a
   background-position percentage resolves against the line box rather than the
   baseline. The owner called exactly this treatment out on the homepage title
   in August, and it was the same device down to the property being animated.
   The emphasis is real and worth keeping; the stroke is not. It is a weight
   step now, which is how the homepage marks its own last line. */
.abt-mark {
    font-style: normal;
    font-weight: 700;
    color: var(--abt-navy);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION SYSTEM
   The variant is chosen per section by the value of data-abt-reveal, so a
   section declares how it enters rather than inheriting one global fade.
   ═══════════════════════════════════════════════════════════════════════ */

.abt-js [data-abt-reveal] {
    opacity: 0;
    transform: translateY(var(--a-rev-y));
    filter: blur(var(--a-rev-blur));
    transition: opacity var(--a-rev-fade) var(--a-ease), transform var(--a-rev-move) var(--a-ease),
                filter var(--a-rev-fade) var(--a-ease);
    transition-delay: calc(var(--i, 0) * var(--a-rev-step));
}

/* ★ This page used to run four entrance variants (up 26px, left -34px, blur
   12px + scale, rise 40px + scale) at 0.8s, on the theory that a section
   should declare how it enters. On its own that reads well. Next to the other
   thirteen pages it read as a different website, which is the actual problem:
   About was the only surface where content slid in from the left. The four
   variants are in _archive/align-pass3-2026-09-01/css/about.css. The
   attribute stays because about.js writes it and staggers off it. */

.abt-js [data-abt-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* the line mask used by the h1 — each line rises out of its own clip */
.abt-line {
    display: block;
    overflow: hidden;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.abt-line > span { display: block }

.abt-js .abt-line > span {
    transform: translateY(105%);
    transition: transform 1s var(--abt-ease);
    transition-delay: calc(var(--i, 0) * 110ms);
}

.abt-js .is-lit .abt-line > span { transform: none }

/* ---------- buttons + links ---------- */

.abt-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: var(--a-btn-pad);
    border: 1px solid var(--a-brand);
    border-radius: var(--a-btn-r);
    background: var(--a-brand);
    color: #fff;
    font: var(--a-btn-font);
    text-decoration: none;
    box-shadow: var(--a-btn-glow);
    transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}

.abt-btn svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--abt-ease) }
.abt-btn:hover,
.abt-btn:focus-visible {
    background: var(--a-brand-deep);
    border-color: var(--a-brand-deep);
    transform: translateY(-2px);
    box-shadow: var(--a-lift-2);
}
.abt-btn:hover svg,
.abt-btn:focus-visible svg { transform: translateX(4px) }
.abt-btn:active { transform: translateY(0) }

.abt-link {
    font-weight: 600;
    color: var(--abt-accent);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(34, 69, 138, .35);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}

.abt-link:hover,
.abt-link:focus-visible { color: var(--abt-navy); border-bottom-color: var(--abt-navy) }

.abt-link--arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0;
    padding-bottom: 0;
}

.abt-link--arrow svg { width: 13px; height: 13px; transition: transform .25s var(--abt-ease) }
.abt-link--arrow:hover svg,
.abt-link--arrow:focus-visible svg { transform: translateX(5px) }

/* ═══════════════════════════════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════════════════════════════ */

.abt-hero {
    position: relative;
    /* clips the snow field and the ridge. Safe here: the hero contains no
       sticky descendant — the service stack is far below and would break if an
       ancestor of ITS clipped. */
    overflow: hidden;
}

/* ── the alpine field ──────────────────────────────────────────────────────
   Apex Ascents is a mountain name, and the light system already has a snow
   vocabulary on Contact; About shares it rather than inventing a second one.
   Two drifting snow layers over a pale ridge, all of it behind the content
   and none of it load-bearing — with images off or motion reduced the hero
   is exactly as readable.

   The ridge is the shared `fx-peaks-soft.webp` strip (6KB) that apex-fx.css
   already ships, not a hand-drawn shape. Improvised triangle mountains have
   been rejected on this project before; this is the sanctioned asset. */

.abt-hero__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.abt-hero__grid { z-index: 1 }

/* The ridge is the shared component now. This page's own copy was the old
   geometry: 104% wide (so the theme's `img { max-width: 100% }` capped it and
   it never reached the right edge), half strength, and drifting DOWN into the
   clip rather than up out of it. */

.abt-snow {
    position: absolute;
    left: 0;
    right: 0;
    top: -320px;
    height: calc(100% + 320px);
    background-image:
        radial-gradient(1.7px 1.7px at 62px 88px, rgba(104, 146, 203, .48), transparent),
        radial-gradient(1.3px 1.3px at 248px 218px, rgba(104, 146, 203, .40), transparent),
        radial-gradient(1.9px 1.9px at 152px 312px, rgba(104, 146, 203, .30), transparent);
    background-size: 320px 320px;
    animation: abtSnowNear 19s linear infinite;
    transform: translate3d(var(--abt-snow-x, 0px), var(--abt-snow-y, 0px), 0);
}

.abt-snow--far {
    top: -240px;
    height: calc(100% + 240px);
    background-image:
        radial-gradient(1.1px 1.1px at 128px 44px, rgba(104, 146, 203, .34), transparent),
        radial-gradient(1px 1px at 34px 172px, rgba(104, 146, 203, .28), transparent);
    background-size: 236px 236px;
    animation: abtSnowFar 31s linear infinite;
    transform: translate3d(var(--abt-snow-x-far, 0px), var(--abt-snow-y-far, 0px), 0);
}

/* The drift is on the background-position so it never fights the transform
   the scroll/pointer parallax writes. */
@keyframes abtSnowNear {
    from { background-position: 0 0, 0 0, 0 0 }
    to   { background-position: 0 320px, 0 320px, 0 320px }
}

@keyframes abtSnowFar {
    from { background-position: 0 0, 0 0 }
    to   { background-position: 0 236px, 0 236px }
}

/* the hero carried its own padding and its own 1180 box, which landed its
   content at x=130 while the sections below it landed at 188. Neither was the
   site's edge. Both are the shell now. */
.abt-hero__grid {
    position: relative;
    width: var(--a-shell);
    margin: 0 auto;
    display: grid;
    /* the title column has to hold its first authored line, which needs 660px
       at the site's h1. At 1.08fr it got 578 and the line broke in the middle
       of "I'm Lachlan, and I build". */
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(40px, 4.5vw, 72px);
    align-items: start;
    padding-block: var(--a-hero-pt) var(--a-hero-pb);
}

.abt-hero h1 {
    margin: 0 0 24px;
    font: 600 var(--a-t-h1)/1.1 var(--abt-sans);
    letter-spacing: -.028em;
}

.abt-hero__lede {
    margin: 0 0 36px;
    max-width: 34rem;
    font: 400 var(--a-t-lede)/1.6 var(--abt-sans);
    color: var(--abt-body);
}

.abt-hero__lede a {
    font-weight: 600;
    color: var(--abt-accent);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(34, 69, 138, .3);
    transition: color .2s, border-color .2s;
}

.abt-hero__lede a:hover,
.abt-hero__lede a:focus-visible { color: var(--abt-navy); border-bottom-color: var(--abt-navy) }

.abt-hero__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.abt-hero__aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.abt-hero__photo {
    order: 1;
    margin: 0;
    border-radius: var(--a-r);
    overflow: hidden;
    background: var(--a-card);
    border: 1px solid var(--abt-line);
    box-shadow: var(--a-card-shadow);
}

.abt-hero__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 848 / 1016;
    object-fit: cover;
}

/* The portrait settles rather than fading — it is the one photographic thing
   in the first screen and a plain fade makes it look like a placeholder. The
   scroll parallax rides on the same transform via a custom property, so the
   two compose instead of overwriting each other; the residual scale keeps a
   little headroom so the drift never exposes an edge inside the frame. */
.abt-js .abt-hero__photo img {
    transform: scale(1.08) translate3d(0, var(--abt-photo-y, 0px), 0);
    transition: transform 1.6s var(--abt-ease);
}

.abt-js .is-lit .abt-hero__photo img {
    transform: scale(1.04) translate3d(0, var(--abt-photo-y, 0px), 0);
    /* once settled, parallax must track the scroll instantly — keeping the
       1.6s settle here would make every scroll frame lag a second behind */
    transition: none;
}

.abt-values__photo img { transform: scale(1.05) translate3d(0, var(--abt-vphoto-y, 0px), 0) }

.abt-hero__note {
    order: 2;
    margin: 0;
    padding-left: 16px;
    border-left: 1px solid var(--abt-line-strong);
    font-size: var(--a-t-mark);
    line-height: 1.6;
    color: var(--abt-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. THE LEDGER — the demonstration.
   The pitch is "I take the busywork off your plate", so the page does it
   instead of saying it: real tasks, struck through one at a time. Every
   line here is drawn from work described elsewhere on the site — nothing
   invented, no client named, no number claimed.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the rhythm ──────────────────────────────────────────────────────────
   Every other page sets its gap as `main > * { margin-block }`, where the
   two margins collapse to one. About sets padding on each section instead,
   because several of them carry a hairline that has to sit ON the boundary.
   Half the shared gap on each side of the boundary adds up to the same
   distance, so the page keeps its borders and still breathes exactly like
   the other twelve. It used to run a ladder of its own: 86, 101, 115, 144.
   ──────────────────────────────────────────────────────────────────────── */
/* a full gap on top, a half underneath: the hero above contributes no bottom
   half of its own, so without this the first boundary on the page is half the
   distance of every other one. */
.abt-ledger {
    padding-block: var(--a-gap-move) calc(var(--a-gap-move) / 2);
    border-top: 1px solid var(--abt-line);
}

.abt-ledger__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.abt-ledger__head p {
    margin: 0;
    max-width: 30rem;
    font-size: var(--a-t-spoken);
    line-height: 1.6;
    color: var(--abt-muted);
}

.abt-ledger__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--abt-line);
}

.abt-ledger__list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 2px;
    border-bottom: 1px solid var(--abt-line);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.4;
    color: var(--abt-navy);
    transition: color .6s var(--abt-ease);
}

/* The stroke belongs to the words, not the row — struck across the full row it
   crosses empty space to the right of short tasks and stops reading as a
   strikethrough at all. The span is inline-block so it hugs its text. */
.abt-ledger__task {
    position: relative;
    display: inline-block;
}

.abt-ledger__task::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 52%;
    height: 2px;
    background: var(--abt-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .55s var(--abt-ease);
}

.abt-ledger__list li.is-done { color: var(--abt-muted) }
.abt-ledger__list li.is-done .abt-ledger__task::after { transform: scaleX(1) }

/* the tick lands just after the stroke finishes */
.abt-ledger__tick {
    margin-left: auto;
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--abt-accent);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .3s ease .38s, transform .45s var(--abt-ease) .38s;
}

.abt-ledger__tick svg { width: 100%; height: 100% }
.abt-ledger__list li.is-done .abt-ledger__tick { opacity: 1; transform: none }

.abt-ledger__tally {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--abt-line);
    font-size: 15px;
    color: var(--abt-muted);
}

.abt-ledger__tally b {
    font-size: 17px;
    font-weight: 700;
    color: var(--abt-navy);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. PROOF — a typographic band, not three cards
   ═══════════════════════════════════════════════════════════════════════ */

.abt-proof {
    padding-block: calc(var(--a-gap-move) / 2);
    border-top: 1px solid var(--abt-line);
}

.abt-proof__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px);
}

.abt-proof__item { padding-top: 24px; position: relative }

/* the rule draws rather than simply appearing */
.abt-proof__item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--abt-line-strong);
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.abt-js .abt-proof__item::before {
    transform: scaleX(0);
    transition: transform .9s var(--abt-ease);
    transition-delay: calc(var(--i, 0) * 110ms);
}

.abt-js .abt-proof__item.is-in::before { transform: scaleX(1) }

.abt-proof__value {
    margin: 0 0 12px;
    font: 600 var(--a-t-sub)/1.15 var(--abt-sans);
    letter-spacing: -.02em;
    color: var(--abt-navy);
}

/* :where() so this floor cannot outrank the component rule above it. As a plain
   descendant selector it was (0,2,1) against .abt-proof__value at (0,1,0), which
   silently rendered the stat title at 16px muted - identical to the sentence
   underneath it, so the card had no hierarchy at all. */
:where(.abt-proof__item) > :where(p) { margin: 0; max-width: 32ch; font-size: var(--a-t-body); line-height: 1.6; color: var(--abt-muted) }

.abt-proof__apps {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    border-top: 1px solid var(--abt-line);
}

.abt-proof__apps a {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--abt-line);
    text-decoration: none;
    transition: border-color .25s;
}

/* The nudge moves the words, not the row. Transitioning the anchor's own
   padding would run layout on every hover frame, and translating the anchor
   would drag its separator rule out of line with the rows above and below —
   so the two text children carry the motion instead, on the compositor. */
.abt-proof__apps a strong,
.abt-proof__apps a span { transition: transform .25s var(--abt-ease), color .25s }

.abt-proof__apps a:hover,
.abt-proof__apps a:focus-visible { border-bottom-color: var(--abt-accent) }

.abt-proof__apps a:hover strong,
.abt-proof__apps a:focus-visible strong,
.abt-proof__apps a:hover span,
.abt-proof__apps a:focus-visible span { transform: translateX(8px) }

.abt-proof__apps a:hover strong,
.abt-proof__apps a:focus-visible strong { color: var(--abt-accent) }

.abt-proof__apps strong { display: block; font-size: 15px; font-weight: 600; color: var(--abt-navy); transition: color .25s }
.abt-proof__apps span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--abt-muted) }

/* ═══════════════════════════════════════════════════════════════════════
   4. VALUES — list + photo
   ═══════════════════════════════════════════════════════════════════════ */

.abt-values { padding-block: calc(var(--a-gap-move) / 2) }

.abt-values__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 88px);
    align-items: start;
}

.abt-values__intro > p {
    margin: 0 0 24px;
    max-width: 30rem;
    font-size: var(--a-t-spoken);
    line-height: 1.6;
    color: var(--abt-muted);
}

.abt-values__list { margin-top: 8px }
.abt-values__row { padding: 22px 0; border-top: 1px solid var(--abt-line) }
.abt-values__row:last-child { border-bottom: 1px solid var(--abt-line) }
.abt-values__row h3 { margin: 0 0 8px; font-size: var(--a-t-sub) }
.abt-values__row p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--abt-muted) }

.abt-values__photo {
    margin: 0;
    border-radius: var(--a-r);
    overflow: hidden;
    background: var(--a-card);
    border: 1px solid var(--abt-line);
    box-shadow: var(--a-card-shadow);
}

.abt-values__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 788;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. QUOTE — the second marker, and the page's one blur
   ═══════════════════════════════════════════════════════════════════════ */

.abt-quote {
    padding-block: calc(var(--a-gap-move) / 2);
    border-block: 1px solid var(--abt-line);
}

.abt-quote__inner {
    max-width: 820px;
    margin: 0 auto;
    padding-inline: clamp(22px, 4vw, 64px);
}

/* the close rank, matching the pull quote on Custom Software. It ran at
   34px here, below even this page's section heads, so the page's one quoted
   line was its quietest. */
.abt-quote h2 {
    margin: 0;
    font: 600 var(--a-t-close)/1.14 var(--abt-sans);
    letter-spacing: -.018em;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. STORY — long-form prose, pst3's measure. Deliberately still.
   ═══════════════════════════════════════════════════════════════════════ */

.abt-story { padding-block: calc(var(--a-gap-move) / 2) }
.abt-story__inner { max-width: 690px; margin: 0 auto }
.abt-story h2 { margin-bottom: 28px }

.abt-story p {
    margin: 0 0 24px;
    font-size: 19px;
    line-height: 1.78;
    color: var(--abt-body);
}

.abt-story p em { color: var(--abt-navy); font-style: italic }

.abt-story__sign {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--abt-line);
    font-weight: 600;
    font-style: normal;
    color: var(--abt-navy);
}

/* ═══════════════════════════════════════════════════════════════════════
   7. METHOD — a real sequence, so it draws a real connector.
   The numbers carry information here (it is an ordered process), which is
   the only thing that earns 01/02/03 on a page.
   ═══════════════════════════════════════════════════════════════════════ */

.abt-method {
    padding-block: calc(var(--a-gap-move) / 2);
    border-top: 1px solid var(--abt-line);
}

.abt-method__head { max-width: 640px; margin: 0 0 clamp(40px, 4.5vw, 56px) }

.abt-method__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 48px);
    padding-top: 22px;
}

/* the line the sequence is threaded on */
.abt-method__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--abt-line-strong);
    transform-origin: 0 50%;
}

.abt-js .abt-method__list::before {
    transform: scaleX(0);
    transition: transform 1.5s var(--abt-ease);
}

.abt-js .abt-method__list.is-in::before { transform: scaleX(1) }

.abt-method__item { position: relative }

/* the node sits on the line and lights as the line reaches it */
.abt-method__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: -26px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--abt-accent);
}

.abt-js .abt-method__item::before {
    transform: scale(0);
    transition: transform .5s var(--abt-ease);
    transition-delay: calc(.25s + var(--i, 0) * .42s);
}

.abt-js .abt-method__list.is-in .abt-method__item::before { transform: none }

.abt-method__count {
    display: block;
    margin-bottom: 16px;
    font: 600 var(--a-t-mark)/1 var(--abt-sans);
    letter-spacing: .1em;
    color: var(--abt-accent);
    font-variant-numeric: tabular-nums;
}

.abt-method__item h3 { margin: 0 0 10px; font-size: var(--a-t-sub) }
.abt-method__item p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--abt-muted) }

/* ═══════════════════════════════════════════════════════════════════════
   8. EXPERTISE — the stack.
   Six services that physically stack as you scroll, each pinning under the
   one before it. This is the page's structural signature and the reason the
   section is worth scrolling rather than skimming. Cards are right *here*
   and nowhere else on the page — a stack needs an edge to stack.
   ═══════════════════════════════════════════════════════════════════════ */

.abt-expertise {
    padding-block: calc(var(--a-gap-move) / 2);
}

.abt-expertise__head { max-width: 640px; margin: 0 0 clamp(40px, 4.5vw, 64px) }

.abt-expertise__item {
    position: sticky;
    /* clears the fixed nx-header (74px) and fans each card 14px below the one
       it lands on, so the stack keeps a visible edge per service */
    top: calc(96px + var(--i, 0) * 14px);
    display: grid;
    /* the second column held a three-tag row per card until 2026-09-05 (critique
       item 12); it now carries one concrete scene per service */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    margin-bottom: 28px;
    padding: clamp(30px, 3.2vw, 44px) clamp(28px, 3vw, 46px);
    border: 1px solid var(--abt-line);
    border-radius: var(--a-r);
    background: #fff;
    /* the white line is a seam, not a highlight: these cards are sticky and
       fan 14px apart, so it separates each one from the card behind it. The
       drop is the shared raised card shadow. */
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .9), var(--a-card-shadow-2);
}

.abt-expertise__item:last-child { margin-bottom: 0 }

.abt-expertise__icon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 16px;
    color: var(--abt-accent);
}

.abt-expertise__icon svg { width: 100%; height: 100% }

/* line icons drawing their own strokes — native to the form, and the one
   place a stroke animation is honest rather than decorative. pathLength is
   normalised to 1 by about.js so every shape draws at the same rate. */
.abt-js .abt-expertise__icon svg [pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s var(--abt-ease) .15s;
}

.abt-js .abt-expertise__item.is-in .abt-expertise__icon svg [pathLength] { stroke-dashoffset: 0 }

.abt-expertise__item h3 {
    margin: 0 0 10px;
    font-size: var(--a-t-sub);   /* the site's sub rank; this was 23px at 700 */
    font-weight: 600;
    letter-spacing: -.015em;
}

.abt-expertise__body p { margin: 0 0 18px; max-width: 62ch; font-size: 16px; line-height: 1.62; color: var(--abt-muted) }
.abt-expertise__aside {
    align-self: start;
    margin: 0;
    padding-left: clamp(20px, 2vw, 28px);
    border-left: 1px solid var(--abt-line);
    font-size: 16px; line-height: 1.62; color: var(--abt-muted);
}




/* the site bullet, not a round dot. A dot was the fourth marker shape on a
   site that has two. */

/* ═══════════════════════════════════════════════════════════════════════
   TESTIMONIALS — gated empty until real quotes exist; kept in the same
   material language so it is not a visual regression the day it fills.
   ═══════════════════════════════════════════════════════════════════════ */

.abt-testimonials { padding-block: calc(var(--a-gap-move) / 2); border-top: 1px solid var(--abt-line) }

.abt-testimonials__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.abt-testimonials__card { margin: 0; padding-top: 20px; border-top: 2px solid var(--abt-line-strong) }
.abt-testimonials__card blockquote { margin: 0 0 16px; font-size: 18px; line-height: 1.6; color: var(--abt-navy) }
.abt-testimonials__card figcaption { font-size: 14px; color: var(--abt-muted) }

/* ═══════════════════════════════════════════════════════════════════════
   9. FAQ — pst3-faq's row language
   ═══════════════════════════════════════════════════════════════════════ */

/* No ground of its own. This page was the only one on the site that tinted
   whole sections, and it ran four of them: the quote, the expertise stack,
   this, and the close. On a system whose contrast comes from cards and
   elevation, a tinted band is a fifth kind of section, and About having four
   of them is most of why it read as a different site. The rows keep their
   hairlines, the stack keeps its cards, and the sections stay separate
   because their FORMS differ. */
.abt-faq {
    padding-block: calc(var(--a-gap-move) / 2);
    border-top: 1px solid var(--abt-line);
}
.abt-faq__head { margin: 0 0 clamp(28px, 3vw, 40px) }
/* ── One FAQ, site-wide (critique item 1a). The rows, the summary type, the
   marker and the open/close motion all live in apex-faq.css now; what stayed
   here is this page's palette and the layout around the list. Its marker was a rotating + character; the abtAnswer keyframes went with it ── */
body.apex-about .apex-faq {
    --faq-line:   var(--abt-line);
    --faq-ink:    var(--abt-navy);
    --faq-body:   var(--abt-body);
    --faq-accent: var(--abt-accent);
}
.abt-faq__list { border-top: 0 }  /* the component draws its own top rule */

/* ═══════════════════════════════════════════════════════════════════════
   10. CLOSING — the marker's third and final appearance
   ═══════════════════════════════════════════════════════════════════════ */

/* The close, in the shape every other page ends in: plain white, centred,
   the close rank, the lede rank, the two buttons, one quiet line under. It
   used to sit BEFORE the FAQ, so About was the only page that did not end on
   its own ask. The two swapped in page-about.php. */
/* Site review R6 (27 Oct): no longer centred. The close sits on the page's
   left edge under a hairline: one heading, one line, one button, the email. */
.abt-cta {
    padding-block: calc(var(--a-gap-move) / 2);
}

.abt-cta__inner {
    max-width: 44rem;
    border-top: 1px solid var(--abt-line);
    padding-top: clamp(2.4rem, 5vh, 3.4rem);
}

.abt-cta h2 { font-size: var(--a-t-close); line-height: 1.06 }

.abt-cta__lede {
    margin: 0 0 32px;
    max-width: 40rem;
    font-size: var(--a-t-lede);
    line-height: 1.6;
    color: var(--abt-muted);
}

.abt-cta__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* the site's ghost button. This was the one page besides AI Consulting whose
   second action was a bare underlined text link, which reads as a footnote
   next to a filled button rather than the other half of a choice. */
.abt-btn--ghost {
    background: #fff;
    border-color: var(--abt-line-strong, rgba(34, 69, 138, .35));
    color: var(--abt-navy);
    box-shadow: none;
}
.abt-btn--ghost:hover,
.abt-btn--ghost:focus-visible {
    background: #fff;
    border-color: var(--abt-accent);
    color: var(--abt-accent);
}

.abt-cta__email { margin: 0; font-size: 15px; color: var(--abt-muted) }
.abt-cta__email a { font-weight: 600; color: var(--abt-accent); text-decoration: none }
.abt-cta__email a:hover,
.abt-cta__email a:focus-visible { text-decoration: underline }

/* ═══════════════════════════════════════════════════════════════════════
   THE SHARED FOOTER, RE-SKINNED FOR THIS PAGE ONLY
   Same treatment the blog (blg3/pst3) and Contact use: the nx-footer's own
   thin ridge line is swapped for a full-width ice-shelf plate, with the page's
   paper tone fading down into it so the light page dissolves into the night
   footer instead of meeting it at a hard edge.

   The artwork is the same shelf the blog uses, but served from the shared
   `fx-ice-shelf.webp` (98KB) rather than the blog's `blg3-ice-shelf.png`,
   which is a 1.5MB unoptimised PNG. Identical image, ~15x lighter.

   The fade starts at white because the close directly above it is white now;
   matching the section above is what makes the seam disappear.
   ═══════════════════════════════════════════════════════════════════════ */

body.apex-about .nx-footer {
    position: relative;
    background: linear-gradient(to bottom, var(--footer-fade, #fff) 0, var(--footer-fade, #fff) 4px, #02122f 4px); /* the top 4px match the page, so a fractional footer edge never shows a grey seam */
    padding-top: 0;
    overflow: hidden;
}

body.apex-about .nx-footer__ridge { display: none }

body.apex-about .nx-footer::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2172 / 374;
    /* the top of the shelf dissolves into the page above (Lachlan, 29 Oct:
       the hard top edge read as cut off); the ledge and icicles stay crisp */
    background:
        linear-gradient(to bottom, var(--footer-fade, #fff) 0%, var(--footer-fade, #fff) 4%, rgba(255, 255, 255, 0) 55%) top center / 100% 100% no-repeat,
        url("../media/fx/fx-ice-shelf.webp") top center / 100% auto no-repeat;
}

/* the footer's own shell rule owns position, z-index, padding and font now */

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .abt-hero__grid { grid-template-columns: 1fr; gap: 48px; padding-block: clamp(112px, 20vw, 148px) 56px }
    .abt-ledger__grid { grid-template-columns: 1fr; gap: 32px }
    .abt-proof__grid { grid-template-columns: 1fr; gap: 40px }
    .abt-values__grid { grid-template-columns: 1fr; gap: 40px }
    .abt-values__photo { order: -1 }
    .abt-method__list { grid-template-columns: 1fr; gap: 34px }

    /* the connector is horizontal by construction; stacked, each step keeps
       its own node and rule instead */
    .abt-method__list::before { display: none }
    .abt-method__item { padding-top: 22px; border-top: 2px solid var(--abt-line-strong) }
    .abt-method__item::before { top: -6px }

    .abt-expertise__item { grid-template-columns: 1fr; gap: 20px }
    .abt-expertise__aside { border-left: 0; border-top: 1px solid var(--abt-line); padding: 16px 0 0; margin-top: 0 }

    /* stacking six panels needs vertical room the phone does not have — the
       cards return to flow rather than pinning on top of each other */
    .abt-expertise__item { position: static; margin-bottom: 20px }
}

@media (max-width: 600px) {
    .abt-hero__actions { gap: 20px }
    .abt-cta__actions { flex-direction: column; align-items: center; gap: 16px }
    .abt-ledger__list li { font-size: 16px }
}

/* ---------- reduced motion: every final state, simply present ---------- */

@media (prefers-reduced-motion: reduce) {
    /* the scenery holds its final position: snow stops falling, the ridge and
       both photographs stop drifting, everything stays visible */
    .abt-snow, .abt-snow--far { animation: none }
    .abt-js .abt-hero__photo img,
    .abt-js .is-lit .abt-hero__photo img,
    .abt-values__photo img { transform: none; transition: none }

    .abt-js [data-abt-reveal],
    .abt-js [data-abt-reveal].is-in {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
    .abt-js .abt-line > span { transform: none; transition: none }
    .abt-js .abt-hero__photo img { transform: none; transition: none }
    .abt-js .abt-proof__item::before,
    .abt-js .abt-method__list::before,
    .abt-js .abt-method__item::before { transform: none; transition: none }
    .abt-js .abt-expertise__icon svg [pathLength] { stroke-dashoffset: 0; transition: none }
    .abt-ledger__list li::after { transition: none }
    .abt-ledger__tick { transition: none }
    .abt-btn, .abt-btn svg, .abt-link--arrow svg,
    .abt-proof__apps a,
    .abt-proof__apps a strong,
    .abt-proof__apps a span { transition: none }
    .abt-proof__apps a:hover strong,
    .abt-proof__apps a:hover span { transform: none }
}

/* Site review R21 (27 Oct): the six-offer grid is three services, then one
   line for the apps. */
.abt-expertise__apps {
    margin-top: clamp(1.8rem, 3.6vh, 2.6rem);
    max-width: 44rem;
    font-size: var(--a-t-lede); line-height: 1.6;
    color: var(--abt-muted);
}
.abt-expertise__apps .abt-link { white-space: nowrap }
.abt-how { padding-top: 0 }
/* Three cards with copy only: as a sticky full-width stack each one left its
   right half empty, so they sit side by side and return to one column on
   narrower screens. */
.abt-expertise__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}
.abt-expertise__list .abt-expertise__item {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
}
@media (max-width: 960px) {
    .abt-expertise__list { grid-template-columns: minmax(0, 1fr) }
}

/* ════════ 4 NOV: THE WORK AS THINGS, THE ORG CHART, PLAIN DOORS ═══════════ */
body.apex-about .abt-page .abt-pen { display: block; margin: 0; font: 400 2rem/1.1 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
.abt-textlink { color: var(--abt-navy); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px }
.abt-textlink:hover { color: var(--abt-accent) }

/* the story */
.abt-story--split .abt-story__inner { display: grid; gap: clamp(1.5rem, 5vw, 4.5rem); max-width: none; align-items: start }
.abt-story--split .abt-story__text p:last-child { margin-bottom: 0 }
body.apex-about .abt-page .abt-pen--magic { margin-top: 1rem; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; transform: rotate(-2deg); transform-origin: left }

/* the wall */
.abt-jobs { padding-block: var(--a-gap-move) calc(var(--a-gap-move) / 2) }
.abt-jobs__head { display: grid; gap: 1rem clamp(2rem, 5vw, 4.5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: start }
.abt-jobs__head h2 { margin: 0 }
.abt-jobs__head p { margin: 0; max-width: 38rem; font-size: var(--a-t-lede, 1.19rem); line-height: 1.55; color: var(--abt-body) }
.abt-jobs__wall { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start }
.abt-job { margin: 0; min-width: 0 }
body.apex-about .abt-page .abt-job figcaption { margin-top: .9rem }

.abt-court { padding: 1.4rem 1.6rem 1.8rem; background: #fff; border: 1px solid #dfe4ec; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)); transform: rotate(-1.4deg) }
body.apex-about .abt-page .abt-court, body.apex-about .abt-page .abt-court * { font-family: "Courier New", Courier, monospace } /* impeccable-disable-line overused-font -- a transcript is typewritten */
.abt-court__top { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.1rem; padding-bottom: .7rem; font-size: .95rem; font-weight: 700; color: var(--abt-navy); border-bottom: 1px solid #c9d0db }
.abt-court__row { display: grid; grid-template-columns: 2rem 1fr; padding: .28rem .35rem; margin: 0 -.35rem }
.abt-court__row b { font-size: .95rem; font-weight: 700; color: var(--abt-navy); line-height: 1.1 }
.abt-court__row i { display: block; height: .62rem; margin: .22rem 0 .4rem; background: #9aa5b6 }
.abt-court__row.is-key { background: #fdf1a8 }
.abt-court__row.is-key i { background: #33415e }

.abt-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem }
.abt-clip { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: linear-gradient(170deg, #1d3f91, #0a1730 72%); border-radius: 10px; box-shadow: var(--a-card-shadow); container-type: inline-size }
.abt-clip strong { position: absolute; left: 8cqw; right: 8cqw; top: 9cqw; color: #fff; font-size: 13.5cqw; font-weight: 700; line-height: 1.08; letter-spacing: -.02em }
.abt-clip:nth-child(2) { transform: translateY(1rem) rotate(1deg) }
.abt-clip i { position: absolute; inset: 58% auto auto 50%; width: 2.3rem; height: 2.3rem; margin: -1.15rem 0 0 -1.15rem; border-radius: 50%; background: rgba(255, 255, 255, .9) }
.abt-clip i::after { content: ""; position: absolute; left: .85rem; top: .62rem; border-left: .75rem solid #0a1730; border-block: .53rem solid transparent }
.abt-clip b { position: absolute; left: 8cqw; right: 8cqw; bottom: 10cqw; color: rgba(255, 255, 255, .86); font-size: 9.6cqw; font-weight: 500; line-height: 1.2 }
.abt-clip u { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #fff 40%, rgba(255, 255, 255, .35) 40%) }

.abt-post { display: block; max-height: 30rem; overflow: hidden; background: #fff; border: 1px solid var(--a-card-line); border-radius: 12px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)); transform: rotate(1deg) }
.abt-post img { display: block; width: 100%; height: auto; max-width: none }

/* the org chart */
.abt-co { display: grid; gap: clamp(2rem, 5vw, 4.5rem); padding-block: calc(var(--a-gap-move) / 2); align-items: center }
.abt-org { margin: 0; min-width: 0 }
.abt-org svg { display: block; width: 100%; height: auto; overflow: visible }
.abt-org__line, .abt-org__box { fill: none; stroke: #1f5fd6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.abt-org__box { fill: #fff }
.abt-org__box.is-red { stroke: #cf2a27 }
body.apex-about .abt-page .abt-org text { font-family: "Apex Hand", cursive; text-anchor: middle }
.abt-org__job { font-size: 30px; fill: #1f5fd6 }
.abt-org__name { font-size: 38px; fill: #0a1730; stroke: #0a1730; stroke-width: .5 }
.abt-org__job.is-red, .abt-org__name.is-red { fill: #cf2a27; stroke: #cf2a27 }
.abt-org__job.is-red { stroke: none }
body.apex-about .abt-page .abt-org figcaption { margin-top: 1rem; text-align: center; transform: rotate(-1deg) }
.abt-co__text h2 { margin: 0 0 1.2rem }
.abt-co__text p { margin: 0 0 1rem; font-size: 17px; line-height: 1.62; color: var(--abt-body) }
.abt-co__text p:last-child { margin: 0 }

/* the doors */
.abt-doors { padding-block: calc(var(--a-gap-move) / 2) }
.abt-doors h2 { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem) }
.abt-door { display: grid; gap: .5rem 3rem; padding: clamp(1.2rem, 2.4vw, 1.7rem) 0; color: var(--abt-navy); text-decoration: none; border-top: 1px solid var(--abt-line); transition: color .2s }
.abt-door:last-child { border-bottom: 1px solid var(--abt-line) }
.abt-door__line { font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; text-wrap: pretty }
.abt-door__name { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; color: var(--abt-accent); white-space: nowrap }
.abt-door__name svg { width: 13px; height: 13px; transition: transform .25s var(--abt-ease) }
.abt-door:hover .abt-door__name svg, .abt-door:focus-visible .abt-door__name svg { transform: translateX(5px) }
.abt-door:hover { color: var(--abt-accent) }
.abt-door:focus-visible { outline: var(--a-focus); outline-offset: 4px }

@media (min-width: 700px) {
    .abt-story--split .abt-story__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) }
    .abt-story__side { position: sticky; top: 7rem }
    .abt-jobs__head { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) }
    .abt-jobs__wall { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) }
    .abt-job--court { grid-row: span 2 }
    .abt-post { max-height: 15rem }
    .abt-door { grid-template-columns: minmax(0, 1fr) 15rem; align-items: center }
    .abt-door__name { justify-content: flex-end }
}
@media (min-width: 1000px) {
    .abt-jobs__wall { grid-template-columns: minmax(0, 4.5fr) minmax(0, 5fr) minmax(0, 3.3fr) }
    .abt-job--court { grid-row: auto }
    .abt-post { max-height: 30rem }
    .abt-co { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
}

/* 4 Nov: the transcript has words now */
.abt-court__said { font-size: .88rem; line-height: 1.32; color: #33415e }
.abt-court__row.is-key .abt-court__said { color: var(--abt-navy); font-weight: 700 }

/* ══ 6 NOV: THE TRANSCRIPT PUZZLE, THE SIX LACHLANS, WHAT YOU DO BY HAND ══ */
.abt-court__row { width: 100%; font: inherit; text-align: left; color: inherit; background: none; border: 0; border-radius: 3px; transition: background .25s }
.abt-court.is-play .abt-court__row { cursor: pointer }
.abt-court.is-play .abt-court__row:hover { background: #f1f4f9 }
.abt-court.is-play .abt-court__row.is-key, .abt-court.is-play .abt-court__row.is-key:hover { background: #fdf1a8; cursor: default }
.abt-court__row:focus-visible { outline: var(--a-focus); outline-offset: 1px }
.abt-court__row.is-miss { animation: abt-miss .4s }
@keyframes abt-miss { 25% { transform: translateX(-5px) } 50% { transform: translateX(4px) } 75% { transform: translateX(-2px) } }
.abt-job__go { display: inline-block; margin-top: .7rem }
.abt-job__go[hidden] { display: none }

.abt-org__unit { cursor: pointer; outline: none }
.abt-org__unit .abt-org__box { transition: fill .2s }
.abt-org__unit:hover .abt-org__box, .abt-org__unit:focus-visible .abt-org__box { fill: #eef3fb }
.abt-org__unit.is-on .abt-org__box { fill: #dfe9fb }
.abt-org__unit.is-on .abt-org__box.is-red { fill: #fbe4e3 }
.abt-org__unit:focus-visible .abt-org__box { stroke-width: 3.6 }
.abt-org__go { margin: .8rem 0 0; text-align: center }
.abt-org__go a[hidden] { display: none }

.abt-hand { margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem) }
.abt-hand__chips { display: flex; flex-wrap: wrap; gap: .55rem }
.abt-hand__chip {
    padding: .65rem 1rem; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.3; text-align: left; color: var(--abt-navy);
    background: #fff; border: 1px solid #c9d3e3; border-radius: 12px; transition: border-color .2s, background .2s, color .2s
}
.abt-hand__chip:hover { border-color: #1f5fd6 }
.abt-hand__chip:focus-visible { outline: var(--a-focus); outline-offset: 2px }
.abt-hand__chip[aria-pressed="true"] { color: #fff; background: var(--abt-navy); border-color: var(--abt-navy) }
.abt-hand__own { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; max-width: 38rem }
.abt-hand__own input { flex: 1 1 16rem; min-width: 0; padding: .65rem .9rem; font: inherit; font-size: 1rem; color: var(--abt-navy); background: #fff; border: 1px solid #c9d3e3; border-radius: 12px }
.abt-hand__own input:focus { outline: var(--a-focus); outline-offset: 1px; border-color: #1f5fd6 }
.abt-hand__said { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; margin-top: 1.4rem }
.abt-hand__said[hidden], .abt-hand__said a[hidden] { display: none }
body.apex-about .abt-page .abt-hand__said .abt-pen { flex: 1 1 24rem; max-width: 40rem; transform: rotate(-1deg); transform-origin: left }
.abt-door { transition: color .2s, opacity .3s, background .3s }
.abt-door.is-dim { opacity: .45 }
.abt-door.is-match { color: #1f5fd6; background: linear-gradient(90deg, rgba(31, 95, 214, .07), transparent 80%) }
@media (prefers-reduced-motion: reduce) { .abt-court__row.is-miss { animation: none } }
.abt-pen__door { color: inherit; text-decoration: underline; text-underline-offset: .18em; white-space: nowrap }