/*
 * Lutz Computer Services.
 *
 * Two worlds, one structure. Light is bright and iridescent; dark is deep
 * space with a cyan beam. They are not inversions of each other — each was
 * drawn on its own terms, and the toggle in the nav is a real choice rather
 * than an accessibility afterthought.
 *
 * What both keep is the precision underneath: monospace uppercase field
 * labels, panels on a strict grid, tabular numbers. That structure is why
 * the content reads as a record rather than as marketing, and it is the one
 * thing carried over from the first design.
 *
 * Colour is two accents used as a pair — a blue and a teal in light, a cyan
 * and a periwinkle in dark. They appear together as a gradient only on the
 * brand mark, the accent word, and the numbered chips. The coral in the
 * light hero wash is atmosphere and never becomes a UI colour.
 */

/* ------------------------------------------------------- tokens: daylight */

:root {
    --paper: #f6f7fb;
    --paper-raised: #ffffff;
    --paper-sunk: #ffffff;

    --ink: #0c1020;
    --graphite: #5a6180;
    --graphite-light: #8a91ad;

    --rule: #e4e7f2;
    --rule-soft: #eef0f7;

    --signal: #0f6fff;
    --signal-hover: #0a58cc;
    --signal-ink: #ffffff;
    --signal-wash: rgba(15, 111, 255, 0.10);

    /* The second accent. Named --blueprint because the drawn plates already
       reference it. */
    --blueprint: #00a894;
    --blueprint-bright: #00d3b8;

    --warm: rgba(255, 90, 95, 0.10);

    --shadow-sm: 0 1px 2px rgba(12, 16, 32, 0.04), 0 4px 12px rgba(12, 16, 32, 0.05);
    --shadow: 0 1px 2px rgba(12, 16, 32, 0.04), 0 8px 24px rgba(12, 16, 32, 0.07);
    --shadow-lg: 0 2px 4px rgba(12, 16, 32, 0.04), 0 24px 64px rgba(12, 16, 32, 0.11);

    --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --measure: 66ch;
    --wrap: 1180px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --radius: 16px;
    --radius-lg: 20px;

    --step: 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ------------------------------------------------------ tokens: deep field */

/* Written once, applied from three selectors: the system preference, and
   the explicit choice in either direction so the toggle wins over the OS. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #070a12;
        --paper-raised: #0e1320;
        --paper-sunk: #0a0e19;

        --ink: #eef3fb;
        --graphite: #8e9bb3;
        --graphite-light: #5f6b81;

        --rule: #1e2740;
        --rule-soft: #151c2c;

        --signal: #5df2ea;
        --signal-hover: #8ef7f1;
        --signal-ink: #04121a;
        --signal-wash: rgba(93, 242, 234, 0.14);

        --blueprint: #7aa2ff;
        --blueprint-bright: #7aa2ff;

        --warm: rgba(122, 162, 255, 0.10);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
        --shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 28px 70px rgba(0, 0, 0, 0.6);
    }
}

:root[data-theme="dark"] {
    --paper: #070a12;
    --paper-raised: #0e1320;
    --paper-sunk: #0a0e19;
    --ink: #eef3fb;
    --graphite: #8e9bb3;
    --graphite-light: #5f6b81;
    --rule: #1e2740;
    --rule-soft: #151c2c;
    --signal: #5df2ea;
    --signal-hover: #8ef7f1;
    --signal-ink: #04121a;
    --signal-wash: rgba(93, 242, 234, 0.14);
    --blueprint: #7aa2ff;
    --blueprint-bright: #7aa2ff;
    --warm: rgba(122, 162, 255, 0.10);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 28px 70px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
    --paper: #f6f7fb;
    --paper-raised: #ffffff;
    --paper-sunk: #ffffff;
    --ink: #0c1020;
    --graphite: #5a6180;
    --graphite-light: #8a91ad;
    --rule: #e4e7f2;
    --rule-soft: #eef0f7;
    --signal: #0f6fff;
    --signal-hover: #0a58cc;
    --signal-ink: #ffffff;
    --signal-wash: rgba(15, 111, 255, 0.10);
    --blueprint: #00a894;
    --blueprint-bright: #00d3b8;
    --warm: rgba(255, 90, 95, 0.10);
    --shadow-sm: 0 1px 2px rgba(12, 16, 32, 0.04), 0 4px 12px rgba(12, 16, 32, 0.05);
    --shadow: 0 1px 2px rgba(12, 16, 32, 0.04), 0 8px 24px rgba(12, 16, 32, 0.07);
    --shadow-lg: 0 2px 4px rgba(12, 16, 32, 0.04), 0 24px 64px rgba(12, 16, 32, 0.11);
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.06;
    text-wrap: balance;
    margin: 0;
}

p {
    margin: 0 0 1.1em;
    max-width: var(--measure);
}

a {
    color: var(--signal);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--step);
}

a:hover {
    color: var(--signal-hover);
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 4px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.7rem 1.1rem;
    z-index: 100;
    font-family: var(--mono);
    font-size: 0.8rem;
    border-radius: 8px;
}

.skip:focus {
    left: 0.5rem;
    top: 0.5rem;
}

/* -------------------------------------------------------- the annotation */

/* Monospace field labels are the one thing carried over from the first
   design. They are why a panel of facts reads as a readout rather than a
   list, and that is the part worth keeping. */
.eyebrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--graphite-light);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.4rem;
}

.eyebrow--tick::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--signal), var(--blueprint-bright));
    flex: none;
}

/* ------------------------------------------------------------------- nav */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    backdrop-filter: blur(16px) saturate(1.6);
    border-bottom: 1px solid var(--rule);
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 72px;
}

/* Brand left, links pushed right, the theme switch last. */
.nav__links {
    margin-left: auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.brand__mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.56rem;
    color: var(--signal-ink);
    background: linear-gradient(135deg, var(--signal), var(--blueprint-bright));
    box-shadow: 0 4px 16px var(--signal-wash);
    flex: none;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__links a:not(.btn) {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--graphite);
    text-decoration: none;
    transition: color var(--step);
}

.nav__links a:not(.btn):hover {
    color: var(--ink);
}

.nav__links a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

/* The theme switch. Two states, both drawn — no icon font, no library. */
.theme {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--graphite);
    cursor: pointer;
    padding: 0;
    box-shadow: var(--shadow-sm);
    transition: color var(--step), border-color var(--step), transform var(--step);
}

.theme:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--signal) 40%, var(--rule));
    transform: translateY(-1px);
}

/* No `display` here. `.theme svg` is (0,1,1) and would out-rank the
   (0,1,0) `.theme__sun` rule below, showing both icons at once — which is
   exactly what it did. Sizing only; visibility is decided by the theme. */
.theme svg {
    width: 17px;
    height: 17px;
}

/* Exactly one of the two is ever shown, and which one is decided by the
   theme actually in force — not by a class the script has to remember to
   keep in sync. */
.theme__moon {
    display: block;
}

.theme__sun {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme__moon {
        display: none;
    }

    :root:not([data-theme="light"]) .theme__sun {
        display: block;
    }
}

:root[data-theme="dark"] .theme__moon {
    display: none;
}

:root[data-theme="dark"] .theme__sun {
    display: block;
}

:root[data-theme="light"] .theme__moon {
    display: block;
}

:root[data-theme="light"] .theme__sun {
    display: none;
}

.nav__toggle {
    display: none;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.nav__end {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

@media (max-width: 860px) {
    .nav__toggle {
        display: block;
    }

    .nav__links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper-raised);
        border-bottom: 1px solid var(--rule);
        padding: 0.5rem var(--gutter) 1.2rem;
        box-shadow: var(--shadow);
    }

    .nav__links.is-open {
        display: flex;
    }

    .nav__links a:not(.btn) {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--rule-soft);
    }

    .nav__links .btn {
        margin-top: 0.9rem;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ hero */

.hero {
    position: relative;
    padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
    overflow: hidden;
}

/* Three washes at different sizes, so no single one of them reads as
   "the gradient". In dark this is the aurora; in light it is iridescence. */
.hero::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 110vh;
    pointer-events: none;
    background:
        radial-gradient(42rem 30rem at 18% 12%, color-mix(in srgb, var(--blueprint-bright) 22%, transparent), transparent 60%),
        radial-gradient(38rem 28rem at 72% 4%, color-mix(in srgb, var(--signal) 20%, transparent), transparent 58%),
        radial-gradient(30rem 24rem at 48% 26%, var(--warm), transparent 62%);
    filter: blur(10px);
}

/* A faint grid, visible only in the dark theme where it reads as depth.
   In daylight it would be noise on an already-busy wash. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 40% 0%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 40% 0%, #000, transparent 78%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero::after {
        opacity: 1;
    }
}

:root[data-theme="dark"] .hero::after {
    opacity: 1;
}

.hero > .wrap {
    position: relative;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    position: relative;
}

@media (max-width: 900px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }
}

.hero .eyebrow {
    display: inline-flex;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    box-shadow: var(--shadow-sm);
    color: var(--graphite);
    margin-bottom: 1.7rem;
}

.hero h1 {
    font-size: clamp(2.5rem, 6.4vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.038em;
    margin-bottom: 1.3rem;
}

.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--signal), var(--blueprint) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__lede {
    font-size: clamp(1.05rem, 1.9vw, 1.22rem);
    color: var(--graphite);
    max-width: 47ch;
    margin-bottom: 2.1rem;
}

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

/* The readout: what makes a set of claims look like a record. */
.spec {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.spec__row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--rule-soft);
    align-items: baseline;
}

.spec__row:last-child {
    border-bottom: 0;
}

.spec__key {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--graphite-light);
}

.spec__val {
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.9rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--step), box-shadow var(--step), background var(--step), border-color var(--step);
}

.btn--primary {
    background: linear-gradient(135deg, var(--signal), color-mix(in srgb, var(--signal) 65%, var(--blueprint-bright)));
    color: var(--signal-ink);
    box-shadow: 0 6px 22px var(--signal-wash);
}

.btn--primary:hover {
    color: var(--signal-ink);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px var(--signal-wash);
}

.btn--ghost {
    background: var(--paper-raised);
    border-color: var(--rule);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.btn--ghost:hover {
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--signal) 35%, var(--rule));
}

.btn__arrow {
    transition: transform var(--step);
}

.btn:hover .btn__arrow {
    transform: translateX(3px);
}

/* -------------------------------------------------------------- sections */

.section {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
}

.section--sunk {
    background: var(--paper-sunk);
    border-block: 1px solid var(--rule);
}

.section__head {
    max-width: 60ch;
    margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.section__head h2 {
    font-size: clamp(1.85rem, 3.8vw, 2.6rem);
    margin-bottom: 0.9rem;
}

.section__head p {
    color: var(--graphite);
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* -------------------------------------------------------------- services */

.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1rem;
}

.service {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 1.8rem);
    transition: transform var(--step), box-shadow var(--step), border-color var(--step);
}

.service:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--signal) 30%, var(--rule));
}

.service__num {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding-inline: 0.55rem;
    border-radius: 9px;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    color: var(--signal-ink);
    background: linear-gradient(135deg, var(--signal), var(--blueprint-bright));
    margin-bottom: 1rem;
}

.service h3 {
    font-size: 1.12rem;
    margin-bottom: 0.6rem;
}

.service p {
    color: var(--graphite);
    font-size: 0.93rem;
    margin-bottom: 0;
    max-width: none;
}

/* ------------------------------------------------------------------ work */

.case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--rule);
}

.case:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.case:nth-child(even) .case__media {
    order: -1;
}

@media (max-width: 880px) {
    .case {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .case:nth-child(even) .case__media {
        order: 0;
    }
}

.case__label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite-light);
    margin-bottom: 0.9rem;
    display: block;
}

.case h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.85rem;
}

.case p {
    color: var(--graphite);
}

.case__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.3rem 0 1.6rem;
    padding: 0;
    list-style: none;
}

.case__stack li {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--graphite);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
}

.case__media {
    position: relative;
    min-width: 0;
}

.plate {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(0.9rem, 2vw, 1.4rem);
    box-shadow: var(--shadow-lg);
}

.plate img {
    width: 100%;
}

/* Screenshots need no frame — they carry their own. */
.plate--phones {
    display: flex;
    gap: clamp(0.6rem, 2vw, 1rem);
    align-items: flex-start;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.plate--phones img {
    flex: 1;
    min-width: 0;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

/* A gentle stagger, so three screens read as a set rather than a filmstrip. */
.plate--phones img:nth-child(2) {
    transform: translateY(-14px);
}

@media (max-width: 520px) {
    .plate--phones img:nth-child(3) {
        display: none;
    }

    .plate--phones img:nth-child(2) {
        transform: none;
    }
}

/* Tablet screens, same idea as the phones but squarer.
   A tablet is 0.69 wide to tall against a phone's 0.46, so three of them sit
   shorter and wider than three phones would. They are small at this width on
   purpose — they read as a set, and any one of them opens full size. */
.plate--tablet {
    display: flex;
    gap: clamp(0.6rem, 2vw, 1rem);
    align-items: flex-start;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* A button, because it does something. Stripped back to the image it wraps —
   the affordance is the cursor, the hover lift and the focus ring, not a
   chrome border around a screenshot. */
.shot {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 12px;
    transition: transform var(--step), box-shadow var(--step);
}

.shot img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: block;
}

.shot:hover {
    transform: translateY(-4px);
}

.plate--tablet .shot:nth-child(2) {
    transform: translateY(-14px);
}

.plate--tablet .shot:nth-child(2):hover {
    transform: translateY(-18px);
}

@media (max-width: 520px) {
    .plate--tablet .shot:nth-child(3) {
        display: none;
    }

    .plate--tablet .shot:nth-child(2),
    .plate--tablet .shot:nth-child(2):hover {
        transform: none;
    }
}

/* ------------------------------------------------------------- lightbox */

/* A native <dialog>, so Escape, the backdrop and focus containment are the
   browser's job rather than three more things to get wrong. */
.lightbox {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: min(96vw, 1100px);
    max-height: 94vh;
    overflow: visible;
}

.lightbox::backdrop {
    background: rgba(6, 9, 16, 0.82);
    backdrop-filter: blur(3px);
}

.lightbox img {
    width: auto;
    max-width: 100%;
    max-height: 94vh;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: block;
    margin-inline: auto;
}

.lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.lightbox__close:hover {
    background: var(--paper);
}

/* On a phone the close button would hang off the screen at those offsets. */
@media (max-width: 560px) {
    .lightbox__close {
        top: 8px;
        right: 8px;
    }
}

/* --------------------------------------------------------------- process */

.process {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}

/* Numbered because it genuinely is a sequence — you cannot build before you
   scope. Nothing else on this site is numbered for decoration. */
.step {
    counter-increment: step;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.step::before {
    content: counter(step, decimal-leading-zero);
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--signal-ink);
    background: linear-gradient(135deg, var(--signal), var(--blueprint-bright));
    margin-bottom: 1rem;
}

.step h3 {
    font-size: 1.08rem;
    margin-bottom: 0.55rem;
}

.step p {
    color: var(--graphite);
    font-size: 0.93rem;
    margin-bottom: 0;
    max-width: none;
}

/* ----------------------------------------------------------------- about */

.about {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (max-width: 880px) {
    .about {
        grid-template-columns: 1fr;
    }
}

.about__lede {
    font-size: 1.14rem;
    color: var(--ink);
}

.about__title {
    font-size: clamp(1.85rem, 3.8vw, 2.6rem);
    margin-bottom: 1.1rem;
}

/* ------------------------------------------------------------------- cta */

.cta {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--rule);
}

.cta::before {
    content: "";
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 80vh;
    pointer-events: none;
    background:
        radial-gradient(34rem 22rem at 50% 100%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 62%),
        radial-gradient(28rem 20rem at 24% 92%, color-mix(in srgb, var(--blueprint-bright) 16%, transparent), transparent 62%);
    filter: blur(10px);
}

.cta > .wrap {
    position: relative;
}

.cta h2 {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    margin-bottom: 1rem;
}

.cta p {
    color: var(--graphite);
    font-size: 1.08rem;
    margin-inline: auto;
    margin-bottom: 2rem;
    max-width: 52ch;
}

.cta .eyebrow {
    justify-content: center;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

/* ----------------------------------------------------------------- forms */

.form {
    display: grid;
    gap: 1.3rem;
    max-width: 40rem;
}

.field label {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 0.5rem;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--step), box-shadow var(--step);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--graphite-light);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 4px var(--signal-wash);
}

.field textarea {
    min-height: 9rem;
    resize: vertical;
}

.field__error {
    display: block;
    color: #e05260;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

.field--honey {
    position: absolute;
    left: -9999px;
}

.notice {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--blueprint);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.notice p {
    margin: 0;
}

.notice p + p {
    margin-top: 0.4rem;
    color: var(--graphite);
}

/* ------------------------------------------------------------- long copy */

.prose {
    max-width: var(--measure);
}

.prose h2 {
    font-size: 1.5rem;
    margin: 2.6rem 0 0.9rem;
}

.prose h3 {
    font-size: 1.14rem;
    margin: 1.9rem 0 0.6rem;
}

.prose ul,
.prose ol {
    color: var(--graphite);
    padding-left: 1.2rem;
    margin: 0 0 1.1em;
}

.prose li {
    margin-bottom: 0.45rem;
}

.prose p {
    color: var(--graphite);
}

.prose strong {
    color: var(--ink);
}

/* ---------------------------------------------------------------- footer */

.footer {
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    font-size: 0.9rem;
    background: var(--paper-sunk);
    border-top: 1px solid var(--rule);
}

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 700px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}

.footer h4 {
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite-light);
    margin-bottom: 1rem;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer li {
    margin-bottom: 0.55rem;
}

.footer a {
    color: var(--graphite);
    text-decoration: none;
}

.footer a:hover {
    color: var(--signal);
}

.footer__brand p {
    color: var(--graphite);
    font-size: 0.9rem;
    max-width: 34ch;
    margin-top: 0.9rem;
}

.footer__base {
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    color: var(--graphite-light);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------- error pages */

.fault {
    position: relative;
    min-height: 72vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: 4rem;
    overflow: hidden;
}

.fault::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 90vh;
    pointer-events: none;
    background: radial-gradient(34rem 24rem at 50% 10%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 62%);
    filter: blur(10px);
}

.fault > .wrap {
    position: relative;
}

.fault__code {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--graphite-light);
    margin-bottom: 1.4rem;
}

.fault h1 {
    font-size: clamp(2rem, 6vw, 3.4rem);
    margin-bottom: 1rem;
}

.fault p {
    color: var(--graphite);
    margin-inline: auto;
    max-width: 46ch;
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------- utility */

.stack > * + * {
    margin-top: 1.1rem;
}

.lede {
    font-size: 1.12rem;
    color: var(--graphite);
}

.tabular {
    font-variant-numeric: tabular-nums;
}

.label-optional {
    text-transform: none;
    letter-spacing: 0;
    color: var(--graphite-light);
}

.page-head {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
    overflow: hidden;
}

.page-head::before {
    content: "";
    position: absolute;
    inset: -50% -20% auto -20%;
    height: 100vh;
    pointer-events: none;
    background:
        radial-gradient(34rem 24rem at 20% 18%, color-mix(in srgb, var(--blueprint-bright) 16%, transparent), transparent 60%),
        radial-gradient(30rem 22rem at 70% 6%, color-mix(in srgb, var(--signal) 15%, transparent), transparent 58%);
    filter: blur(10px);
}

.page-head > .wrap {
    position: relative;
}

.page-head h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.3rem);
    margin-bottom: 1rem;
}

.page-head p {
    color: var(--graphite);
    font-size: 1.08rem;
    max-width: 54ch;
    margin-bottom: 0;
}

/* ------------------------------------------------- contextual variations */

.case--solo {
    border-bottom: 0;
    padding-top: 0;
}

.service--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.service--link:hover {
    color: inherit;
}

.service--link:hover h3 {
    color: var(--signal);
}

/* ------------------------------------------------- work still in build

   Kept visually apart from the shipped points above it. A dashed edge and
   a chip on every card, because a portfolio that lists what is coming
   beside what is done is how somebody ends up expecting it on day one. */

.section--coming .services { --card-gap: 1rem; }

.service--coming {
    border-style: dashed;
    background: transparent;
}

.service--coming .service__num { display: none; }

/* A section head whose standfirst runs to two paragraphs. Margins are
   zeroed across the site, so without this the second one begins on the
   line after the first and reads as one block. */
.section__head p + p { margin-top: 0.9rem; }

/* ---------------------------------------------- the PSA screenshots

   Two columns of screens, one of which starts with the sheet. The sheet
   gets a column rather than a slot in a row, because an invoice scaled to
   the width of a browser window is an invoice nobody can read, and the
   money screen goes under it so the two columns end up roughly the same
   height. Below 900px they stack, sheet first. */

.psa-shots {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    align-items: start;
    margin-top: 2rem;
}

.psa-shot__stack { display: grid; gap: 1.25rem; align-content: start; }

.psa-shot { margin: 0; }

.psa-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    background: var(--paper-raised, #fff);
}

.psa-shot figcaption {
    margin-top: 0.6rem;
    color: var(--graphite-light, var(--graphite));
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .psa-shots { grid-template-columns: minmax(0, 1fr); }
}

/* The line under a section, where a sentence is the right ending and a
   second call to action would only compete with the one in the nav. */
.section__note {
    margin: 1.6rem 0 0;
    max-width: 60ch;
    color: var(--graphite);
    font-size: 0.95rem;
    line-height: 1.65;
}

.chip-soon {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    color: var(--signal);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}