/*
 * svc.css: /services/, light system. Scope: body.apex-svc.
 * Nothing else on the site loads this sheet.
 *
 * Rebuild, 2026-10-29. The pass-2 sheet (the sort widget, the hairline index
 * of three lines, the brings card) is at _archive/services-rebuild-2026-10-29/.
 *
 * The page is a funnel in buying order: what I build, the three services
 * with a price each, real work, what happens after you book, the apps,
 * questions, the close. No widget: the structure, the prices, his face and
 * real work do the selling.
 *
 * Ground rules, all user-set and shared with the sibling service pages:
 *   · white top to bottom. NO tinted or grey bands.
 *   · NO PILLS. NO TRACKED UPPERCASE, anywhere.
 *   · text is ink, soft or the one blue. No verdict colours.
 *   · no scenery near the close: the footer is a close-up ice shelf.
 *
 * ⚠ main.css puts Source Serif 4 on every h1/h2/h3 site-wide. Inheriting a
 * family from the page wrapper is NOT enough against a direct heading rule,
 * so the heading rule below names Instrument Sans itself.
 */

body.apex-svc {
    --svc-ink: var(--a-ink);
    --svc-body: var(--a-body);
    --svc-soft: var(--a-soft);
    --svc-brand: var(--a-brand);
    --svc-brand-deep: var(--a-brand-deep);
    --svc-line: var(--a-line);
    --svc-hair: var(--a-hair);
    --svc-card: var(--a-card);
    --svc-card-line: var(--a-card-line);
    --svc-lift: var(--a-lift);
    --svc-lift-2: var(--a-lift-2);
        --svc-r: var(--a-r);
    --svc-hold: var(--a-hold);
    --svc-sans: var(--a-sans);
    --svc-ease: var(--a-ease);
    background: #fff;
}

body.apex-svc .site-shell,
body.apex-svc .site-main { background: #fff }

body.apex-svc .svc-main {
    display: block;
    background: #fff;
    color: var(--svc-body);
    font-family: var(--svc-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body.apex-svc .svc-main a:not([class]) { color: var(--svc-brand) }

body.apex-svc .svc-shell { width: var(--a-shell); margin-inline: auto }
body.apex-svc .svc-shell--narrow { width: var(--a-shell-narrow) }

body.apex-svc .svc-main > * { margin-block: var(--a-gap-move) }
body.apex-svc .svc-main > .svc-hero { margin-top: 0 }

/* A hash landing, or the no-Lenis fallback, must not drop a heading under
   the floating header pill. */
body.apex-svc .svc-main > [id] { scroll-margin-top: var(--a-anchor) }

/* ⚠ Both resets are wrapped in :where() so they score (0,1,1) and any
   component that wants a margin wins. Written plainly they score (0,2,2) —
   two classes AND an element — and silently zero every component rule, which
   is exactly what made an earlier pass of these pages read as crammed. */
body.apex-svc :where(.svc-main :is(h1, h2, h3)) { margin: 0 }
body.apex-svc :where(.svc-main p) { margin: 0 }
body.apex-svc :where(.svc-main :is(ul, ol)) { margin: 0; padding: 0; list-style: none }
/* ⚠ the UA sheet puts `margin: 1em 40px` on <figure>, which quietly took
   80px off every capture, and 40px of padding-inline-start on <ol>, which
   indented the whole sort. Neither is visible until something is measured. */
body.apex-svc :where(.svc-main :is(figure, figcaption)) { margin: 0 }

body.apex-svc .svc-main :is(h1, h2, h3) {
    font-family: var(--svc-sans);
    color: var(--svc-ink);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
}

/* ════ Shared vocabulary ════ */

/* Section heads are a heading and, when it earns one, a plain line under
   it. Until 29 Oct each head drew a hairline across the shell as it landed,
   which is a template flourish; the space does that job now. */
body.apex-svc .svc-title { font-size: var(--a-t-head); max-width: 24ch }
body.apex-svc .svc-intro {
    margin-top: 1.1rem; max-width: 46rem;
    font-size: var(--a-t-spoken); line-height: 1.6; color: var(--svc-body);
    text-wrap: pretty;
}
body.apex-svc :is(.svc-hire, .svc-case, .svc-steps),
body.apex-svc .svc-title + .apex-faq { margin-top: clamp(2.8rem, 6vh, 4.2rem) }

body.apex-svc .svc-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: var(--a-btn-pad);
    border: 1px solid transparent; border-radius: var(--a-btn-r);
    font: var(--a-btn-font);
    text-decoration: none;
    transition: background .3s var(--svc-ease), color .3s var(--svc-ease),
                border-color .3s var(--svc-ease), box-shadow .3s var(--svc-ease),
                transform .3s var(--svc-ease);
}
body.apex-svc .svc-btn--solid {
    background: var(--svc-brand); border-color: var(--svc-brand); color: #fff;
    box-shadow: var(--a-btn-glow);
}
body.apex-svc .svc-btn--solid:hover {
    background: var(--svc-brand-deep); border-color: var(--svc-brand-deep);
    transform: translateY(-2px);
    box-shadow: var(--svc-lift-2);
}
body.apex-svc .svc-btn--quiet { background: #fff; border-color: var(--svc-line); color: var(--svc-ink) }
body.apex-svc .svc-btn--quiet:hover { border-color: var(--svc-brand); color: var(--svc-brand) }
body.apex-svc .svc-btn__arw {
    width: 15px; height: 9px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s var(--svc-ease);
}
body.apex-svc a:hover .svc-btn__arw { transform: translateX(3px) }

/* ════ Motion primitives (gated on html.svc-anim) ════ */

html.svc-anim body.apex-svc [data-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));
}
html.svc-anim body.apex-svc [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }

/* Drift: initDrift() writes --dy from scroll position. Depth, not a ride. */
html.svc-anim body.apex-svc [data-drift] { will-change: transform }
html.svc-anim body.apex-svc [data-drift].is-drifting { transform: translate3d(0, var(--dy, 0px), 0) }

body.apex-svc .svc-word {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding-bottom: .09em; margin-bottom: -.09em;
}
body.apex-svc .svc-word > span { display: inline-block }
html.svc-anim body.apex-svc [data-split].is-split .svc-word > span {
    transform: translateY(115%);
    transition: transform .82s var(--svc-ease);
    transition-delay: calc(var(--w, 0) * 42ms);
}
html.svc-anim body.apex-svc [data-split].is-split.is-revealed .svc-word > span { transform: none }

/* ════ 1 · HERO ════
   Two columns, ends aligned, so the lede and its actions sit level with the
   foot of the title. Pass 1 stacked a narrow column against a tall one and
   opened ~250px of white under the h1. */

body.apex-svc .svc-hero { padding-top: var(--a-hero-pt) }
body.apex-svc .svc-hero__head {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(1.4rem, 3.2vw, 3.4rem);
    /* start, not end/centre: the h1 has to begin at the site's opening line.
       Aligned to the other column it was pushed down by whatever that column
       happened to contain, which is what put the same headline at 226 here,
       267 on SEO Article Authoring and 135 on About. */
    align-items: start;
}
body.apex-svc .svc-hero__title {
    font-size: var(--a-t-h1);
    line-height: 1.02; letter-spacing: -.034em;
}
body.apex-svc .svc-hero__lede {
    max-width: 36rem;
    font-size: var(--a-t-lede); line-height: 1.6;
    text-wrap: pretty;
}
body.apex-svc .svc-hero__acts {
    margin-top: clamp(1.4rem, 2.6vh, 2rem);
    display: flex; flex-wrap: wrap; gap: .85rem 1rem;
}
body.apex-svc .svc-hero__note {
    margin-top: 1rem;
    font-size: var(--a-t-body); font-weight: 600; line-height: 1.5;
    color: var(--svc-ink);
}
/* No fact row under the hero buttons. "Brisbane, working anywhere / Founder-led,
   start to finish / First call free" is the row the owner named in critique
   item 2; every one of those facts is said in a sentence elsewhere. */

/* ════ 2 · THE THREE SERVICES ════
   Name and price on the left, promise and paragraph on the right, and only
   whitespace between the three. They were stepped, shadowed cards with
   "You bring me" and "You get" labels until 29 Oct (Lachlan: generic AI
   design). The price is a sentence under the name, never a big number. */

body.apex-svc .svc-hire { display: grid; gap: clamp(3.4rem, 8vh, 5.6rem) }
body.apex-svc .svc-job {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 2rem clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
body.apex-svc .svc-job__name { font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.14; letter-spacing: -.022em }
body.apex-svc .svc-job__promise { margin-top: .6rem }
body.apex-svc .svc-job__price {
    margin-top: 1rem;
    font-size: var(--a-t-body); font-weight: 600; line-height: 1.5;
    color: var(--svc-ink);
}
body.apex-svc .svc-job__promise {
    font-size: var(--a-t-spoken); line-height: 1.4; font-weight: 500;
    color: var(--svc-ink);
    text-wrap: pretty;
}
body.apex-svc .svc-job__what {
    margin-top: .9rem; max-width: 62ch;
    font-size: var(--a-t-body); line-height: 1.66; color: var(--svc-body);
    text-wrap: pretty;
}
/* 44px tall: the text alone was a 15px target */
body.apex-svc .svc-job__go,
body.apex-svc .svc-case__go {
    margin-top: .5rem; min-height: 44px;
    display: inline-flex; align-items: center; gap: .5rem;
    font: 600 var(--a-t-btn)/1 var(--svc-sans);
    color: var(--svc-brand); text-decoration: none;
    transition: color .25s var(--svc-ease);
}
body.apex-svc .svc-job__go:hover,
body.apex-svc .svc-case__go:hover { color: var(--svc-ink) }

/* ════ 3 · REAL WORK ════
   Two stories, then the rest as plain sentences. The rest were a two by
   three grid of blue titles over grey lines until 29 Oct, the feature-grid
   template; a person listing what they've made just says it. */

body.apex-svc .svc-case {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 2rem clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
body.apex-svc .svc-case__said {
    font-size: clamp(1.45rem, 2.5vw, 2.15rem); font-weight: 400; line-height: 1.28;
    letter-spacing: -.02em; color: var(--svc-ink);
    text-wrap: pretty;
}
body.apex-svc .svc-main .svc-case__more { margin-top: 1.1rem; max-width: 56ch; font-size: var(--a-t-body); line-height: 1.66; color: var(--svc-body); text-wrap: pretty }
body.apex-svc .svc-case__go { margin-top: 1.2rem }

body.apex-svc .svc-more { margin-top: clamp(3.4rem, 7vh, 5rem) }
body.apex-svc .svc-courtrow {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 2.4rem clamp(2.4rem, 5vw, 5rem);
    align-items: center;
}
body.apex-svc .svc-also { margin-top: clamp(3rem, 7vh, 4.6rem) }
body.apex-svc .svc-court {
    max-width: 60ch;
    font-size: var(--a-t-spoken); line-height: 1.62; color: var(--svc-body);
    text-wrap: pretty;
}
body.apex-svc .svc-court b,
body.apex-svc .svc-steps b { font-weight: 600; color: var(--svc-ink) }
body.apex-svc .svc-also__lead { font-size: var(--a-t-body); font-weight: 600; line-height: 1.5; color: var(--svc-ink) }
body.apex-svc .svc-also ul { margin-top: .9rem; columns: 2; column-gap: clamp(2.4rem, 5vw, 5rem) }
body.apex-svc .svc-also li { break-inside: avoid; margin-bottom: .9rem }
body.apex-svc .svc-also li {
    max-width: 52ch;
    font-size: var(--a-t-body); line-height: 1.6; color: var(--svc-body);
    text-wrap: pretty;
}
body.apex-svc .svc-also__more { display: block; margin-top: .6rem }
body.apex-svc .svc-also a { color: var(--svc-brand); text-underline-offset: .18em }
body.apex-svc .svc-also a:hover { color: var(--svc-ink) }

/* ════ 4 · HOW IT GOES ════
   His portrait held in view while the steps pass beside it. The steps are
   run-in sentences; they sat beside numbered circles until 29 Oct. */

body.apex-svc .svc-how {
    display: grid;
    grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
    gap: clamp(2.4rem, 6vw, 6rem);
    align-items: start;
}
body.apex-svc .svc-how__face { position: sticky; top: calc(var(--a-anchor, 6rem) + 1rem) }
body.apex-svc .svc-how__face img {
    display: block; width: 100%; height: auto;
    border-radius: var(--a-r);
}
body.apex-svc .svc-steps { display: grid; gap: 1.35rem }
body.apex-svc .svc-steps p {
    max-width: 56ch;
    font-size: var(--a-t-spoken); line-height: 1.6; color: var(--svc-body);
    text-wrap: pretty;
}

/* ════ 5 · THE APPS ════
   A heading and one sentence. It was a paper panel of hairline rows with an
   arrow on each until 30 Oct (Lachlan: generic AI design). */

body.apex-svc .svc-diy__title { font-size: var(--a-t-sub); line-height: 1.24 }
body.apex-svc .svc-diy__line {
    margin-top: .8rem; max-width: 58ch;
    font-size: var(--a-t-spoken); line-height: 1.6; color: var(--svc-body);
    text-wrap: pretty;
}
body.apex-svc .svc-diy__line a { color: var(--svc-brand); text-underline-offset: .18em }
body.apex-svc .svc-diy__line a:hover { color: var(--svc-ink) }
body.apex-svc .svc-diy__all { display: block; width: fit-content; margin-top: .7rem; font-weight: 600 }

body.apex-svc .svc-diy__row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 2.4rem clamp(2.4rem, 5vw, 5rem);
    align-items: center;
}
body.apex-svc .svc-diy__title { font-size: clamp(1.5rem, 2.5vw, 2.15rem); letter-spacing: -.022em }
body.apex-svc .svc-pile { position: relative; height: clamp(19rem, 30vw, 25rem) }
body.apex-svc .svc-pile img {
    position: absolute; display: block; max-width: none;
    background: #fff;
    border: 1px solid var(--svc-card-line);
    border-radius: 10px;
    box-shadow: 0 26px 44px -22px rgba(16, 40, 92, .45);
}
body.apex-svc .svc-pile__post { top: 0; right: 0; width: 56%; height: 100%; object-fit: cover; object-position: top; transform: rotate(2.2deg) }
body.apex-svc .svc-pile__audit { left: 0; bottom: 4%; width: 76%; height: auto; transform: rotate(-1.4deg) }

/* ════ 6 · QUESTIONS ════ */
@media (min-width: 981px) {
    body.apex-svc .svc-qrow {
        display: grid;
        grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
        gap: clamp(2.4rem, 5vw, 5rem);
        align-items: start;
    }
    body.apex-svc .svc-qrow .svc-title { position: sticky; top: 6.5rem }
    body.apex-svc .svc-qrow .svc-title + .apex-faq { margin-top: 0 }
}

/* ── 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. It was a hairline row with a plus/minus mark drawn from two pseudo-elements ── */
body.apex-svc .apex-faq {
    --faq-line:   var(--svc-hair);
    --faq-ink:    var(--svc-ink);
    --faq-body:   var(--svc-body);
    --faq-accent: var(--svc-brand);
}
/* ════ 7 · GET IN TOUCH ════
   The shared form (inc/parts/lead-form.php) styles itself in
   apex-lead-form.css. The old close (heading, line, button, email) it
   replaced is in _archive/services-rebuild-2026-10-29/. */

/* ════ Footer landing ════ */

body.apex-svc .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-svc .nx-footer__ridge { display: none }
body.apex-svc .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;
}

/* ════ THINGS TO LOOK AT ════ 3 Nov critique pass. Real objects beside the words.
   Sizes inside an object are its own. Resolved is the default; the keyframes only
   describe how they get there, so no script or reduced motion shows them finished. */
body.apex-svc .svc-thing { --hand: "Apex Hand", "Bradley Hand", "Segoe Print", cursive; --pen: #1f5fd6; font-size: 15px; line-height: 1.4; color: #16233f }
body.apex-svc :where(.svc-thing, .svc-folder, .svc-trials) p { margin: 0 }
body.apex-svc :where(.svc-thing, .svc-folder, .svc-trials) i { font-style: normal }

/* a page of a writing pad: questions in type, his answers in blue pen */
body.apex-svc .svc-pad {
    padding: 1.5em 1.7em 1.8em 3em;
    background:
        linear-gradient(90deg, transparent 2.1em, rgba(31, 95, 214, .22) 2.1em, rgba(31, 95, 214, .22) calc(2.1em + 1px), transparent calc(2.1em + 1px)),
        repeating-linear-gradient(#fff 0 2.05em, #e3ebf7 2.05em calc(2.05em + 1px));
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(10, 23, 48, .08), 0 26px 44px -22px rgba(16, 40, 92, .45);
    transform: rotate(1.2deg);
}
body.apex-svc .svc-pad__head { font-size: 1.2em; font-weight: 600; letter-spacing: -.01em }
body.apex-svc .svc-main .svc-pad__q { margin-top: 1em; font-size: 1.04em; font-weight: 500 }
body.apex-svc .svc-main .svc-pad__a { margin-top: .1em; font: 400 1.62em/1.1 var(--hand); color: var(--pen); transform: rotate(-.6deg); transform-origin: 0 50% }

/* one automation, drawn as what it is: this happens, then this, then this.
   Each step sits a step to the right of the last so it reads as a flow, not a list. */
body.apex-svc .svc-flow { margin: 0; --step: clamp(1.6rem, 5vw, 2.6rem); --gap: 1.15rem }
body.apex-svc .svc-flow__steps { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none }
body.apex-svc .svc-flow__steps li {
    position: relative;
    display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: .75em; align-items: center;
    margin: 0; margin-left: calc(var(--n) * var(--step));
    width: calc(100% - 3 * var(--step));
    padding: .85em 1em;
    background: #fff;
    border: 1px solid var(--svc-card-line);
    border-radius: 12px;
    box-shadow: 0 16px 28px -20px rgba(16, 40, 92, .4);
    font-size: 1.04em; font-weight: 500; line-height: 1.28;
    animation: svc-flow-on 9s var(--svc-ease) infinite;
    animation-delay: calc(var(--n) * 1.1s);
}
body.apex-svc .svc-flow__steps svg { width: 1.5em; height: 1.5em; fill: none; stroke: var(--pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
/* the elbow from under the step above into the side of this one */
body.apex-svc .svc-flow__steps li + li::before {
    content: "";
    position: absolute;
    left: calc(.8rem - var(--step)); top: calc(-1 * var(--gap) - 1px); bottom: 50%;
    width: calc(var(--step) - .8rem - 5px);
    border-left: 2px solid #9db8e8; border-bottom: 2px solid #9db8e8;
    border-bottom-left-radius: 8px;
}
body.apex-svc .svc-flow__steps li + li::after {
    content: "";
    position: absolute;
    left: -7px; top: 50%;
    width: 7px; height: 10px; margin-top: -4px;
    background: #9db8e8;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@keyframes svc-flow-on {
    0%, 14%, 100% { background: #fff; border-color: var(--svc-card-line) }
    3%, 11% { background: #e4edfd; border-color: var(--pen) }
}
body.apex-svc .svc-flow__pen { margin-top: 1em; font: 400 1.62em/1.12 var(--hand); color: var(--pen); text-wrap: balance }

/* custom software: the spreadsheet you have, and the system in front of it */
body.apex-svc .svc-build { position: relative; display: grid; padding-bottom: .4em }
body.apex-svc .svc-mess__sheet {
    width: 74%;
    background: #fff;
    border: 1px solid var(--svc-card-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 28px -20px rgba(16, 40, 92, .35);
    transform: rotate(-1.6deg);
    transform-origin: 0 0;
    font-size: .84em;
}
body.apex-svc .svc-mess__name { padding: .6em .9em; font-size: .92em; font-weight: 600; background: #eef3fb }
body.apex-svc .svc-mess__grid { display: grid; grid-template-columns: repeat(4, 1fr); font-size: .95em }
body.apex-svc .svc-mess__grid i { padding: .42em .7em; border-top: 1px solid #e6edf6; border-left: 1px solid #e6edf6 }
body.apex-svc .svc-mess__grid i.is-head { font-weight: 600; background: #f7f9fd }
body.apex-svc .svc-mess__grid i.is-bad { color: #55637c; background: #f4f6fa }
body.apex-svc .svc-build__pen { font: 400 1.5em/1.08 var(--hand); color: var(--pen) }
body.apex-svc .svc-main .svc-build__pen--was { position: absolute; top: .5em; right: 0; width: 24%; text-align: left; transform: rotate(2deg) }
body.apex-svc .svc-main .svc-build__pen--now { margin-top: .6em; text-wrap: balance }
body.apex-svc .svc-app {
    position: relative;
    width: 92%; margin: -.9em 0 0 auto;
    background: #fff;
    border: 1px solid #c9d8f2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 50px -24px rgba(16, 40, 92, .55), 0 2px 6px rgba(10, 23, 48, .08);
    font-size: .86em;
}
body.apex-svc .svc-app__bar { display: flex; justify-content: space-between; align-items: center; padding: .6em .9em; background: var(--a-brand, #22458a); color: #fff }
body.apex-svc .svc-app__bar b { font-weight: 600 }
body.apex-svc .svc-app__bar i { font-size: .92em; opacity: .85 }
body.apex-svc .svc-app__body { display: grid; grid-template-columns: 6em minmax(0, 1fr) }
body.apex-svc .svc-app__nav { display: grid; align-content: start; gap: .15em; padding: .7em .4em; background: #f4f7fc; color: #4d5c77 }
body.apex-svc .svc-app__nav :is(b, span) { padding: .32em .5em; border-radius: 6px }
body.apex-svc .svc-app__nav b { font-weight: 600; color: var(--pen); background: #e4edfd }
body.apex-svc .svc-app__main { padding: .7em .8em .9em; min-width: 0 }
body.apex-svc .svc-app__top { display: flex; justify-content: space-between; align-items: center }
body.apex-svc .svc-app__top b { font-size: 1.12em; font-weight: 600 }
body.apex-svc .svc-app__top i { padding: .22em .6em; border-radius: 6px; background: var(--pen); color: #fff; font-size: .9em; font-weight: 500 }
body.apex-svc .svc-app__board { --bgap: .45em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bgap); margin-top: .7em }
body.apex-svc .svc-app__col { display: grid; align-content: start; gap: .35em; min-height: 7.4em; padding: .4em; background: #f4f7fc; border-radius: 8px }
body.apex-svc .svc-app__col p { font-size: .9em; font-weight: 600; color: #4d5c77 }
body.apex-svc .svc-app__card { display: block; padding: .38em .5em; background: #fff; border: 1px solid #dfe8f5; border-radius: 6px; font-size: .92em; line-height: 1.25; color: #4d5c77 }
body.apex-svc .svc-app__card b { display: block; font-weight: 600; color: #16233f; white-space: nowrap }

/* the folder and the spreadsheet that comes out of it */
body.apex-svc .svc-clips { --hand: "Apex Hand", "Bradley Hand", "Segoe Print", cursive; --pen: #1f5fd6; font-size: 14px; line-height: 1.3; color: #16233f; min-width: 0 }
body.apex-svc :where(.svc-clips) :is(p, i) { margin: 0; font-style: normal }
body.apex-svc .svc-clips__drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1em; padding-top: .6em }
body.apex-svc .svc-clips__drop svg { flex: none; width: 5.2em; height: auto; fill: #5b8be0; stroke: #2f62c0; stroke-width: 1.5 }
body.apex-svc .svc-main .svc-clips__pen { font: 400 1.75em/1.1 var(--hand); color: var(--pen) }
body.apex-svc .svc-main .svc-clips__drop .svc-clips__pen { flex: 1 1 12em; min-width: 0; margin-left: .4em; text-wrap: balance }
body.apex-svc .svc-main .svc-clips__pen--then { margin: .25em 0 .4em 2.9em }
/* 8 Nov: the clips are real buttons you drag into the folder, or press */
body.apex-svc .svc-clips__pile { display: grid; gap: .4em; justify-items: start }
body.apex-svc .svc-clips__pile[hidden] { display: none }
body.apex-svc .svc-clips__file {
    position: relative;
    padding: .38em .65em;
    font: inherit; font-size: .9em; font-weight: 500; color: #16233f; white-space: nowrap;
    background: #fff; border: 1px solid #c9d8f2; border-radius: 6px;
    box-shadow: 0 8px 14px -8px rgba(16, 40, 92, .5);
    cursor: grab; touch-action: none; user-select: none;
    transition: box-shadow .2s, border-color .2s;
}
body.apex-svc .svc-clips__file[hidden] { display: none }
body.apex-svc .svc-clips__file:hover { border-color: var(--pen) }
body.apex-svc .svc-clips__file:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px }
body.apex-svc .svc-clips__file.is-drag { z-index: 3; cursor: grabbing; box-shadow: 0 16px 24px -10px rgba(16, 40, 92, .55) }
body.apex-svc .svc-clips__folder { display: block; flex: none; line-height: 0; transition: scale .2s var(--svc-ease) }
body.apex-svc .svc-clips__folder.is-over { scale: 1.12 }
body.apex-svc .svc-clips__folder.is-busy { animation: svc-busy .65s var(--svc-ease) infinite alternate }
@keyframes svc-busy { from { scale: 1 } to { scale: 1.08 } }
body.apex-svc .svc-sheet {
    position: relative;
    background: #fff;
    border: 1px solid var(--svc-card-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 26px 44px -24px rgba(16, 40, 92, .4);
}
/* it runs on past the edge, the way a real one does */
body.apex-svc .svc-sheet::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.4em; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); pointer-events: none }
body.apex-svc .svc-sheet__name { padding: .55em .85em; background: #eef3fb; font-size: .95em; font-weight: 600 }
body.apex-svc .svc-sheet__wide { font-size: .9em; width: max-content }
body.apex-svc .svc-sheet__row { display: grid; grid-template-columns: 8.6em 5.4em 7.5em 12em 13em 10em }
body.apex-svc .svc-sheet__row.is-head { font-weight: 600; background: #f7f9fd }
body.apex-svc .svc-sheet__row[hidden] { display: none }
body.apex-svc .svc-sheet__row.is-new i { animation: svc-cell 1.6s var(--svc-ease) }
body.apex-svc .svc-sheet__row i { display: flex; align-items: center; gap: .4em; min-width: 0; padding: .55em .6em; border-top: 1px solid #e6edf6; border-left: 1px solid #e6edf6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
body.apex-svc .svc-sheet__row b { flex: none; width: 1.2em; height: .85em; background: #16305f; border-radius: 2px }

/* five transcripts in a row with one witness's lines picked out across them */
body.apex-svc .svc-trials { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; align-items: start }
body.apex-svc .svc-trial {
    position: relative;
    padding: .7rem .6rem .9rem;
    aspect-ratio: 4 / 6.4;
    background: #fff;
    border: 1px solid var(--svc-card-line);
    border-radius: 4px;
    box-shadow: 0 16px 24px -16px rgba(16, 40, 92, .4);
    transform: translateY(calc(var(--t) * .28rem - .5rem)) rotate(calc((var(--t) - 2) * .6deg));
}
body.apex-svc .svc-trial b { display: block; font-size: .78rem; font-weight: 600; color: var(--svc-ink) }
body.apex-svc .svc-trial__lines {
    position: absolute; left: .6rem; right: .6rem; top: 2.1rem; bottom: .9rem;
    background: repeating-linear-gradient(#1c2740 0 .3rem, transparent .3rem .72rem);
    opacity: .82;
}
body.apex-svc .svc-trial__mark {
    position: absolute; left: .35rem; right: .35rem; top: calc(2.1rem + (100% - 3rem) * var(--p, 0));
    height: 1.05rem;
    background: rgba(31, 95, 214, .92);
    border-radius: 2px;
}
body.apex-svc .svc-trial:nth-child(1) .svc-trial__mark { --p: .18 }
body.apex-svc .svc-trial:nth-child(2) .svc-trial__mark { --p: .46 }
body.apex-svc .svc-trial:nth-child(3) .svc-trial__mark { --p: .3 }
body.apex-svc .svc-trial:nth-child(4) .svc-trial__mark { --p: .58 }
body.apex-svc .svc-trial:nth-child(5) .svc-trial__mark { --p: .38 }
@media (prefers-reduced-motion: reduce) {
    body.apex-svc :is(.svc-flow__steps li, .svc-app__card, .svc-sheet__row) { animation: none !important }
    body.apex-svc .svc-clips__folder.is-busy { animation: none }
}

/* ════ Responsive ════ */

@media (max-width: 980px) {
    body.apex-svc .svc-hero__head { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 4vh, 2.6rem) }
    body.apex-svc .svc-hero__lede { max-width: 44rem }
    body.apex-svc :is(.svc-courtrow, .svc-case) { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 820px) {
    body.apex-svc .svc-job { grid-template-columns: minmax(0, 1fr) }
    body.apex-svc .svc-app { font-size: .78em }
    body.apex-svc .svc-app__body { grid-template-columns: 5.6em minmax(0, 1fr) }
    /* on a phone it keeps the title and a caption, which are the point */
    body.apex-svc .svc-sheet__row { grid-template-columns: 8.2em 10.5em 12em 10em }
    body.apex-svc .svc-sheet__row i:nth-child(2), body.apex-svc .svc-sheet__row i:nth-child(3) { display: none }
    body.apex-svc .svc-also ul { columns: 1 }
    body.apex-svc .svc-diy__row { grid-template-columns: minmax(0, 1fr) }
    body.apex-svc .svc-pile { height: clamp(18rem, 62vw, 27rem) }
    body.apex-svc .svc-how { grid-template-columns: minmax(0, 1fr) }
    body.apex-svc .svc-how__face { position: static; width: 9rem }
}

@media (prefers-reduced-motion: reduce) {
    body.apex-svc .svc-main *,
    body.apex-svc .svc-main *::before,
    body.apex-svc .svc-main *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ── The shared hero ridge (apex-ridge.css + inc/parts/hero-ridge.php).
   The scene sits on a negative layer, so the hero has to be its own stacking
   context or that layer falls behind the page instead of behind the copy. This
   line is the whole integration, and nothing in the hero needs a z-index of its
   own: every child, positioned or static, keeps the order it already had. ── */
body.apex-svc .svc-hero { position: relative; isolation: isolate }



/* 4 Nov: five trials, one witness, in words */
body.apex-svc .svc-wit { padding: 1.2rem 1.35rem 1.1rem; font-size: .95rem; line-height: 1.38; color: var(--svc-ink); background: #fff; border: 1px solid var(--svc-card-line); border-radius: 12px; box-shadow: 0 22px 36px -22px rgba(16, 40, 92, .45) }
body.apex-svc .svc-wit p { margin: 0 }
body.apex-svc .svc-wit__head { padding-bottom: .7rem }
body.apex-svc .svc-wit__head b { font-weight: 600 }
body.apex-svc .svc-wit__row { display: grid; grid-template-columns: 3.8rem minmax(0, 1fr); gap: .7rem; padding: .55rem 0; border-top: 1px solid #eaf0f8 }
body.apex-svc .svc-wit__row i { font-style: normal; color: #55637c }
body.apex-svc .svc-wit__row em { display: block; font-style: normal; font-weight: 600; color: #1f5fd6 }
body.apex-svc .svc-wit__row.is-hit span { font-weight: 500 }

/* ════ 7 Nov · the page answers back ════
   The dare under the h1, a line on the pad for your question, the automation
   run on what you type, the app board you can drag jobs across, and a fortune.
   Each one ends in a pen link to the form. */
body.apex-svc :is(.svc-dare, .svc-also) { --hand: "Apex Hand", "Bradley Hand", "Segoe Print", cursive; --pen: #1f5fd6 }
body.apex-svc .svc-dare { margin-top: clamp(1.4rem, 3vh, 2.2rem); max-width: 34rem }
body.apex-svc .svc-dare__ask { display: block; font-size: var(--a-t-body); font-weight: 600; color: var(--svc-ink) }
body.apex-svc .svc-dare__in {
    display: block; width: 100%; margin-top: .4rem;
    padding: .2em 0 .25em;
    font: 400 clamp(2rem, 2.8vw, 2.6rem)/1.15 var(--hand); color: var(--pen);
    background: none; border: 0; border-bottom: 2px solid #9db8e8; border-radius: 0;
}
body.apex-svc .svc-dare__in::placeholder { color: #9fb0cc }
body.apex-svc .svc-dare__in:focus { outline: none; border-bottom-color: var(--pen) }
body.apex-svc .svc-dare__in:focus-visible { outline: none; border-bottom-width: 3px }
body.apex-svc .svc-main .svc-dare__say { margin-top: .6rem; min-height: 1.2em; font: 400 clamp(1.7rem, 2.2vw, 2rem)/1.15 var(--hand); color: var(--red, #cf2a27); text-wrap: balance }
body.apex-svc :is(.svc-dare, .svc-try, .svc-pad__mine, .svc-dare__to)[hidden] { display: none }
body.apex-svc .svc-dare__to { display: inline-flex; align-items: center; gap: .5em; margin-top: .5rem; font-weight: 600; color: var(--svc-brand); text-underline-offset: .18em }

body.apex-svc .svc-pad__mine { margin-top: .4em }
body.apex-svc .svc-main .svc-pad__mine .svc-pad__q { display: block }
body.apex-svc .svc-pad__in {
    display: block; width: 100%;
    padding: .1em 0; font: 400 1.62em/1.1 var(--hand); color: var(--pen);
    background: none; border: 0; border-bottom: 1px dashed #9db8e8; border-radius: 0;
}
body.apex-svc .svc-pad__in::placeholder { color: #9fb0cc; font-size: .8em }
body.apex-svc .svc-pad__in:focus { outline: none; border-bottom-color: var(--pen) }

body.apex-svc .svc-penlink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em }
body.apex-svc .svc-penlink:hover { color: var(--svc-ink) }

body.apex-svc .svc-try {
    display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) auto; gap: .6em .8em; align-items: end;
    margin-top: 1.4em; padding: 1em;
    background: #f4f7fc; border: 1px dashed #b9cbe9; border-radius: 12px;
}
body.apex-svc .svc-main .svc-try__head { grid-column: 1 / -1; font-weight: 600 }
body.apex-svc .svc-try label { display: grid; gap: .25em; min-width: 0; font-size: .9em; color: #4d5c77 }
body.apex-svc .svc-try input { width: 100%; min-width: 0; padding: .55em .7em; font: inherit; font-size: 1.05em; color: #16233f; background: #fff; border: 1px solid #cfdcf0; border-radius: 8px }
body.apex-svc .svc-try input:focus-visible { outline: 2px solid var(--pen); outline-offset: 1px }
body.apex-svc .svc-try__go { padding: .65em 1.1em; font: inherit; font-weight: 600; color: #fff; background: var(--pen); border: 0; border-radius: 8px; cursor: pointer }
body.apex-svc .svc-try__go:hover { background: #164bb0 }
body.apex-svc .svc-flow.is-run .svc-flow__steps li { animation: none; transition: background-color .3s, border-color .3s }
body.apex-svc .svc-flow.is-run .svc-flow__steps li.is-on { background: #e4edfd; border-color: var(--pen) }

body.apex-svc .svc-build.is-live .svc-app__card,
body.apex-svc .svc-build.is-live .svc-sheet__row { animation: none; opacity: 1; transform: none }
body.apex-svc .svc-app__card[role="button"] { cursor: pointer; transition: border-color .2s, box-shadow .2s }
body.apex-svc .svc-app__card[role="button"]:hover { border-color: var(--pen); box-shadow: 0 6px 14px -8px rgba(16, 40, 92, .45) }
body.apex-svc .svc-app__card[role="button"]:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px }
body.apex-svc .svc-build [data-cell] { cursor: help }
body.apex-svc .svc-build [data-stage].is-flash { animation: svc-cell 1.4s var(--svc-ease) }
@keyframes svc-cell { 0%, 40% { background: #fff1b8 } 100% { background: transparent } }

body.apex-svc .svc-fortune { padding: 0; font: inherit; color: var(--svc-brand); background: none; border: 0; text-decoration: underline dotted; text-underline-offset: .2em; cursor: pointer }
body.apex-svc .svc-fortune:hover { color: var(--svc-ink) }
body.apex-svc .svc-fortune__say { display: block; font: 400 1.5em/1.1 var(--hand); color: var(--pen) }
body.apex-svc .svc-fortune__say:empty { display: none }

@media (max-width: 700px) {
    body.apex-svc .svc-try { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-svc .svc-build [data-stage].is-flash { animation: none; background: #fff1b8 }
}
body.apex-svc .svc-pad__in:focus-visible { border-bottom-style: solid; border-bottom-width: 2px }

/* 9 Nov · the custom software card and the video case carry Custom Software's own
   working widgets (inc/parts/csd-widgets.php, styled in csd.css). They need the
   full column, so the card puts its explanation beside the text and the board
   underneath, and the case stacks its words above the clips. */
body.apex-svc .svc-job--wide { align-items: start; row-gap: clamp(2.2rem, 5vh, 3.4rem) }
body.apex-svc .svc-job__explain { display: grid; gap: 1rem; padding-top: .3rem }
body.apex-svc .svc-main .svc-job__explain p { max-width: 52ch; font-size: var(--a-t-spoken); line-height: 1.5; color: var(--svc-ink); text-wrap: pretty }
body.apex-svc .svc-job__board { grid-column: 1 / -1; min-width: 0 }
body.apex-svc .svc-case--wide { grid-template-columns: minmax(0, 1fr); align-items: start }
body.apex-svc .svc-case--wide > div:first-child { max-width: 62rem }

/* 9 Nov · the article and the audit as a pair you flick between. The front
   card is whole; the other peeks out behind it, so both are always seen. */
body.apex-svc .svc-flick { display: grid; gap: 1rem; min-width: 0 }
body.apex-svc .svc-flick__tabs { display: flex; gap: .4rem }
body.apex-svc .svc-flick__tabs button {
    min-height: 40px; padding: .45rem .9rem;
    font: 600 .92rem/1 var(--svc-sans); color: var(--svc-soft);
    background: #fff; border: 1px solid var(--svc-card-line); border-radius: 9px; cursor: pointer;
    transition: color .2s var(--svc-ease), border-color .2s var(--svc-ease), background-color .2s var(--svc-ease);
}
body.apex-svc .svc-flick__tabs button:hover { color: var(--svc-ink); border-color: var(--svc-brand) }
body.apex-svc .svc-flick__tabs button[aria-pressed="true"] { color: #fff; background: var(--svc-brand); border-color: var(--svc-brand) }
body.apex-svc .svc-flick__stage { position: relative; height: clamp(24rem, 36vw, 31rem); touch-action: pan-y }
body.apex-svc .svc-flick__card {
    position: absolute; top: 0; left: 0; width: 62%; height: 100%; margin: 0;
    overflow: hidden; background: #fff;
    border: 1px solid var(--svc-card-line); border-radius: 12px;
    box-shadow: 0 26px 44px -22px rgba(16, 40, 92, .45);
    transition: transform .55s var(--svc-ease), opacity .55s var(--svc-ease), box-shadow .55s var(--svc-ease);
    cursor: pointer; user-select: none; -webkit-user-select: none;
}
body.apex-svc .svc-flick__card img { display: block; width: 100%; max-width: none; height: auto; pointer-events: none }
/* the front card, and the one behind it, set by data-front */
body.apex-svc .svc-flick[data-front="audit"] [data-flick-card="audit"],
body.apex-svc .svc-flick[data-front="post"] [data-flick-card="post"] { z-index: 2; transform: rotate(-1.2deg); cursor: default }
body.apex-svc .svc-flick[data-front="audit"] [data-flick-card="post"],
body.apex-svc .svc-flick[data-front="post"] [data-flick-card="audit"] { z-index: 1; transform: translateX(58%) translateY(1.4rem) rotate(3deg) scale(.9); opacity: .92 }
body.apex-svc .svc-flick__card:hover { box-shadow: 0 30px 50px -22px rgba(16, 40, 92, .55) }
body.apex-svc .svc-flick__card:focus-visible { outline: 2px solid var(--svc-brand); outline-offset: 3px }
@media (prefers-reduced-motion: reduce) { body.apex-svc .svc-flick__card { transition: none } }
@media (max-width: 980px) {
    body.apex-svc .svc-flick__stage { height: clamp(22rem, 95vw, 34rem) }
    body.apex-svc .svc-flick__card { width: 64% }
}
/* the pair needs room to be read: the words get the narrow side */
@media (min-width: 981px) {
    body.apex-svc .svc-diy__row:has(.svc-flick) { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) }
    body.apex-svc .svc-flick__stage { height: clamp(30rem, 44vw, 40rem) }
    body.apex-svc .svc-flick__card { width: 64% }
}