/* ============================================================
   CODIA TECH — components
   One block per section. Single-class selectors throughout so
   nothing cancels anything else out.
   ============================================================ */

/* ============================================================
   NAV
   ============================================================ */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    border-bottom: 1px solid transparent;
    transition: background-color var(--t-mid), border-color var(--t-mid), backdrop-filter var(--t-mid);
}

.nav.is-scrolled {
    background: rgba(6, 6, 10, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--hair);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 78px;
}

.nav__brand { display: block; flex-shrink: 0; }
.nav__brand img, .nav__brand svg { width: 168px; height: auto; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.nav__links a {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mute);
    position: relative;
    padding-block: 4px;
}

.nav__links a:hover { color: var(--ice); }

/* Current page gets a gradient tick, not a full underline. */
.nav__links a.is-current { color: var(--ice); }
.nav__links a.is-current::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 14px; height: 1px;
    background: var(--grad-tight);
}

.nav__cta { margin-left: 6px; }

.nav__toggle {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
    position: relative;
}
.nav__toggle span {
    display: block;
    position: absolute;
    left: 13px;
    width: 18px; height: 1px;
    background: var(--ice);
    transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 21.5px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
    padding-top: clamp(140px, 17vw, 200px);
    padding-bottom: clamp(48px, 6vw, 76px);
    position: relative;
    overflow: hidden;
}

/* A single, very restrained field of light behind the headline.
   Not a glow, not a blob. Just enough to lift the void off pure black. */
.hero::before {
    content: "";
    position: absolute;
    top: -220px; left: 50%;
    width: 1100px; height: 620px;
    transform: translateX(-62%);
    background: radial-gradient(ellipse at center, rgba(122, 125, 255, 0.10), transparent 66%);
    pointer-events: none;
    z-index: 0;
}

.hero__inner { position: relative; z-index: 1; }

/* The logo's own subline, promoted to the site's eyebrow.
   The two coloured dots are the dividers, exactly as in the mark. */
.pillars-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 34px;
}

.pillars-line__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pillars-line__dot--violet { background: var(--dot-violet); }
.pillars-line__dot--cyan   { background: var(--dot-cyan); }

.hero__headline {
    max-width: 17ch;
    margin-bottom: 30px;
}

.hero__sub {
    max-width: 56ch;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.58;
    color: var(--ice-dim);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

/* ============================================================
   THE MANIFEST — the signature element.
   Every system currently under management, as a live register.
   Role tags encode the truth: did we build it, do we run it, or both.
   ============================================================ */

.manifest {
    padding-bottom: clamp(80px, 10vw, 130px);
}

.manifest__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hair-strong);
}

.manifest__status {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ice);
    white-space: nowrap;
}

.manifest__pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 0 0 rgba(51, 230, 160, 0.5);
    animation: pulse 2.6s var(--ease-io) infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(51, 230, 160, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(51, 230, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(51, 230, 160, 0); }
}

.manifest__list { list-style: none; }

/* Fixed tracks, not fractions. Every row must line up with every other row or
   the register stops reading as a register: a RUN-only row would otherwise
   shunt its description sideways, because its role tag is narrower. */
.manifest__row {
    position: relative;
    display: grid;
    grid-template-columns: 16px 300px minmax(0, 1fr) 118px 14px;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--hair);
    transition: background-color var(--t-fast);
}

/* The SINCE column only exists once a year has been confirmed on at least one
   system, so the table never shows an empty track waiting to be filled. */
.manifest__list--years .manifest__row {
    grid-template-columns: 16px 300px minmax(0, 1fr) 56px 118px 14px;
}

/* The gradient sweep. Lives on the row's own bottom hairline, so the
   accent only ever appears on the line you are pointing at. */
.manifest__row::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    height: 1px; width: 100%;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 520ms var(--ease);
}

.manifest__row:hover { background: rgba(255, 255, 255, 0.018); }
.manifest__row:hover::after,
.manifest__row:focus-within::after { transform: scaleX(1); }

/* The mark encodes who keeps it running, not hover state and not uptime.
   Filled  = we host, manage and support it. This is the service we sell.
   Hollow  = we built it, but it runs on infrastructure its company owns.
   That is the one distinction a buyer of managed hosting scans this table for,
   so it gets a mark you can read down the left edge without reading a word. */
.manifest__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    justify-self: center;
    box-sizing: border-box;
    transition: background-color var(--t-mid), border-color var(--t-mid);
}

.manifest__dot--hosted {
    background: var(--mute);
}
.manifest__row:hover .manifest__dot--hosted,
.manifest__row:focus-within .manifest__dot--hosted {
    background: var(--ice);
}

.manifest__dot--offsite {
    background: transparent;
    border: 1px solid var(--ghost);
}
.manifest__row:hover .manifest__dot--offsite,
.manifest__row:focus-within .manifest__dot--offsite {
    border-color: var(--ice-dim);
}

/* SINCE: only rendered once at least one year is confirmed. Tabular figures so
   the years line up as a column of numbers rather than as text. */
.manifest__since {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--mute-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sized so the longest entry (premiercardgrading.co.nz, plus its two other
   TLDs) still fits on one line. Every row is one line: that is the rhythm. */
.manifest__domain {
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ice);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.manifest__domain a { color: var(--ice); }

/* The anchor's pseudo-element covers the whole row, so the entire line is the
   click target while the accessible name stays on the link itself. */
.manifest__domain a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.manifest__tld {
    color: var(--mute-deep);
    font-size: 0.625rem;
    margin-left: 7px;
    letter-spacing: 0.02em;
}

.manifest__what {
    font-size: 0.9375rem;
    color: var(--mute);
    transition: color var(--t-fast);
}
.manifest__row:hover .manifest__what { color: var(--ice-dim); }

/* Role tag. BUILT · RUN, or just RUN. This is the whole point of the table. */
.manifest__role {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mute-deep);
    white-space: nowrap;
    justify-self: end;
}
.manifest__role em {
    font-style: normal;
    color: var(--ice-dim);
}
.manifest__role span { color: var(--ghost); padding: 0 3px; }

.manifest__go {
    justify-self: end;
    color: var(--ghost);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.manifest__row:hover .manifest__go,
.manifest__row:focus-within .manifest__go {
    opacity: 1;
    transform: translateX(0);
    color: var(--ice);
}

/* Boot sequence. Rows come online one after another on first paint. */
.manifest__row {
    opacity: 0;
    transform: translateY(9px);
    animation: bootRow 620ms var(--ease) forwards;
}
@keyframes bootRow {
    to { opacity: 1; transform: translateY(0); }
}

.manifest__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--mute-deep);
}

/* ============================================================
   PILLARS — the three things the studio sells, straight off the mark.
   ============================================================ */

.pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hair);
    border-block: 1px solid var(--hair);
}

.pillar {
    background: var(--void);
    padding: clamp(30px, 3.4vw, 46px) clamp(24px, 2.4vw, 36px) clamp(36px, 4vw, 52px);
    position: relative;
    transition: background-color var(--t-mid);
}
.pillar:hover { background: var(--void-lift); }

/* Each pillar carries the colour it has in the wordmark: the first is white
   (CODIA), the other two take the violet and cyan dots from the subline. */
.pillar::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 46px; height: 2px;
    background: var(--ice);
    transition: width var(--t-mid);
}
.pillar--violet::before { background: linear-gradient(90deg, var(--violet), var(--azure)); }
.pillar--cyan::before   { background: linear-gradient(90deg, var(--azure), var(--cyan-hot)); }
.pillar:hover::before { width: 84px; }

.pillar__name {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 22px;
}

.pillar__title {
    margin-bottom: 16px;
}

.pillar__body {
    font-size: 0.9375rem;
    color: var(--mute);
    line-height: 1.66;
}

.pillar__list {
    list-style: none;
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pillar__list li {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--mute);
    padding-left: 15px;
    position: relative;
    line-height: 1.5;
}
.pillar__list li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 1px;
    background: var(--ghost);
}

/* ============================================================
   WORK — the deep case studies.
   ============================================================ */

.work__list { display: flex; flex-direction: column; }

.work-item {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 80px);
    padding-block: clamp(44px, 5vw, 68px);
    border-top: 1px solid var(--hair);
    align-items: start;
}
.work-item:last-child { border-bottom: 1px solid var(--hair); }

.work-item__meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 110px;
}

.work-item__index {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--mute-deep);
}

.work-item__name {
    font-family: var(--display);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ice);
}

.work-item__domain {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--mute);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    transition: color var(--t-fast);
}
.work-item__domain:hover { color: var(--cyan); }

.work-item__sector {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute-deep);
}

/* A built-but-unlaunched system sits in the same list as the live ones. It has
   no link and no domain, so it states its own status rather than leaving the
   reader to assume it is running. */
.work-item__unlaunched {
    display: inline-block;
    margin-top: 6px;
    color: var(--mute);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    padding: 3px 8px;
    letter-spacing: 0.12em;
}

/* Direct children only. The facts block below also contains <p> elements, and
   an unscoped `.work-item__body p` (0,1,1) outranks `.fact__value` (0,1,0),
   which silently forces the big numbers down to body-copy size. */
.work-item__body > p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ice-dim);
    max-width: 58ch;
}

/* Hard numbers. The proof that a two-person studio is running real scale. */
.work-item__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 30px;
    border-top: 1px solid var(--hair);
}

.fact {
    padding: 18px 30px 18px 0;
    margin-right: 30px;
    border-right: 1px solid var(--hair);
}
.fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.fact__value {
    font-family: var(--display);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--ice);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* These labels are the smallest real text on the site, so they get the
   brighter grey rather than the dimmer one. */
.fact__label {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 8px;
}

.work-item__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 26px;
}

.chip {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--mute);
    padding: 5px 11px;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    white-space: nowrap;
}

/* ============================================================
   PROOF PLATES — screenshots of the running systems.

   Ten products with ten different brand palettes would turn this page into a
   patchwork, so at rest they are held back to near-monochrome and let sit in
   the dark. Colour arrives on hover: it makes the picture the reward for
   paying attention, and it keeps the page one thing rather than eleven.
   ============================================================ */

.plate {
    display: block;
    position: relative;
    margin-top: 30px;
    border: 1px solid var(--hair);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    line-height: 0;
}

.plate__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    filter: saturate(0.18) contrast(0.94) brightness(0.76);
    transform: scale(1.005);
    transition: filter 520ms var(--ease), transform 700ms var(--ease);
}

.plate:hover .plate__img,
.plate:focus-visible .plate__img {
    filter: saturate(1) contrast(1) brightness(1);
    transform: scale(1.02);
}

/* Caption sits on the image, so the plate reads as evidence with a source. */
/* The scrim has to hold up over a white screenshot as well as a dark one, so
   it is opaque at the base rather than a gentle fade. */
.plate__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 16px 13px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    line-height: 1.3;
    color: var(--ice);
    background: linear-gradient(to top,
        rgba(6, 6, 10, 0.97) 0%,
        rgba(6, 6, 10, 0.88) 55%,
        rgba(6, 6, 10, 0) 100%);
}

.plate__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mute);
    white-space: nowrap;
}
.plate__live::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--live);
    flex-shrink: 0;
}

/* ============================================================
   HOSTED — the small sites, as a grid. Same monochrome-at-rest
   treatment as the plates, so the whole page stays one thing.
   ============================================================ */

/* Work and Hosted are adjacent .section blocks, so their vertical padding
   stacks into a canyon. Two-class selectors so these beat plain .section
   regardless of source order. */
.section.work   { padding-bottom: clamp(44px, 4.5vw, 68px); }
.section.hosted { padding-top: clamp(44px, 4.5vw, 68px); }

.hosted__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}

.hosted__link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: inherit;
}

.hosted__shot {
    display: block;
    position: relative;
    border: 1px solid var(--hair);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    line-height: 0;
}

/* A brightness filter is multiplicative, so a white page still lands on light
   grey while a dark one goes black. This scrim pulls every thumbnail toward
   the page's own ground instead, which is what actually evens them out. */
.hosted__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 10, 0.42);
    transition: opacity 520ms var(--ease);
    pointer-events: none;
}

.hosted__link:hover .hosted__shot::after,
.hosted__link:focus-visible .hosted__shot::after {
    opacity: 0;
}

/* Several of these sites are light. Without pulling the brightness down hard
   they read as bright rectangles among dark ones and the grid loses its rhythm. */
.hosted__shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    filter: saturate(0.14) contrast(0.9) brightness(0.62);
    transition: filter 520ms var(--ease), transform 700ms var(--ease);
}

.hosted__link:hover .hosted__shot img,
.hosted__link:focus-visible .hosted__shot img {
    filter: saturate(1) contrast(1) brightness(1);
    transform: scale(1.025);
}

.hosted__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hosted__domain {
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ice);
    transition: color var(--t-fast);
}
.hosted__link:hover .hosted__domain { color: var(--cyan); }

.hosted__what {
    font-size: 0.875rem;
    color: var(--mute);
}

.hosted__since {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mute-deep);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   DIAGRAM — a real system drawing, in the site's own language.
   ============================================================ */

/* No top border: the last case study already closes with one, and two hairlines
   a few pixels apart read as a mistake. */
.diagram {
    margin-top: clamp(40px, 4vw, 60px);
}

.diagram__cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    margin-bottom: 26px;
}

.diagram__note {
    font-size: 0.875rem;
    color: var(--mute);
    max-width: 54ch;
}

/* Wide content scrolls inside its own box. The page body never moves. */
.diagram__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
}

.diagram__svg {
    display: block;
    width: 100%;
    min-width: 900px;
    height: auto;
}

.d-box rect,
.d-svc rect {
    fill: var(--surface);
    stroke: var(--hair-strong);
    stroke-width: 1;
}
.d-box--key rect { fill: var(--surface-2); }

.d-label {
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    fill: var(--ice);
}
.d-sub {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--mute);
    letter-spacing: 0.04em;
}
.d-svc-label {
    font-family: var(--mono);
    font-size: 11.5px;
    fill: var(--ice-dim);
}
.d-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    fill: var(--mute-deep);
}
.d-bus {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    fill: var(--ice-dim);
}
.d-bus--right { fill: var(--mute); }
.d-out {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    fill: var(--mute);
}

.d-line, .d-tick {
    fill: none;
    stroke: var(--hair-strong);
    stroke-width: 1;
}
.d-tick { stroke: var(--hair); }
.d-line--out { stroke-dasharray: 3 4; stroke: var(--hair); }

/* ============================================================
   CONFIDENTIAL — work we can name the shape of, but not the client.
   ============================================================ */

/* The one section that is off the record gets its own plate. Subtle, but it
   has to be perceptible or it just reads as a rendering artefact. */
.confidential {
    background: var(--surface);
    border-block: 1px solid var(--hair);
}

.confidential__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--hair);
    margin-top: 4px;
}

.redacted {
    background: var(--surface);
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
}

.redacted__tag {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute-deep);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A drawn redaction bar, not a fake screenshot. Honest about what it is. */
.redacted__bar {
    width: 46px; height: 9px;
    background: var(--surface-2);
    border: 1px solid var(--hair-strong);
    border-radius: 1px;
    flex-shrink: 0;
}

.redacted__title {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--ice);
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.redacted__body {
    font-size: 0.9375rem;
    color: var(--mute);
    line-height: 1.62;
}

/* ============================================================
   PROCESS — genuinely a sequence, so it genuinely gets numbers.
   ============================================================ */

.process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3.4vw, 52px);
    counter-reset: step;
}

.step {
    border-top: 1px solid var(--hair-strong);
    padding-top: 24px;
    position: relative;
}

.step__num {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--mute-deep);
    margin-bottom: 20px;
}

.step__title {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--ice);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.step__body {
    font-size: 0.9375rem;
    color: var(--mute);
    line-height: 1.66;
}

/* ============================================================
   CTA
   ============================================================ */

.cta {
    border-top: 1px solid var(--hair);
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--grad);
    opacity: 0.85;
}

.cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
}

.cta__body { max-width: 46ch; margin-top: 20px; }

.cta__actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.cta__direct {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--mute);
}
.cta__direct a { color: var(--ice); border-bottom: 1px solid var(--hair-strong); padding-bottom: 1px; }
.cta__direct a:hover { border-bottom-color: var(--cyan); color: var(--cyan); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(36px, 6vw, 90px);
    align-items: start;
}

.contact__rows { list-style: none; border-top: 1px solid var(--hair); }

.contact__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--hair);
    align-items: baseline;
}

.contact__key {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute-deep);
}

.contact__val { color: var(--ice); font-size: 0.9375rem; }
.contact__val a { color: var(--ice); }
.contact__val a:hover { color: var(--cyan); }

.contact__form { border-top: 1px solid var(--hair); padding-top: 30px; }

.contact__note {
    font-size: 0.9375rem;
    color: var(--mute);
    margin-top: 26px;
    max-width: 46ch;
}

/* Baseline styling for whatever form plugin gets dropped in. */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form textarea,
.contact__form select {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    color: var(--ice);
    font-family: var(--body);
    font-size: 0.9375rem;
    padding: 13px 15px;
    transition: border-color var(--t-fast);
}
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus {
    border-color: var(--azure);
    outline: none;
}
.contact__form label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    display: block;
    margin-bottom: 8px;
}
.contact__form button[type="submit"] {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 15px 26px;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
    background: var(--ice);
    color: var(--void);
    cursor: pointer;
    transition: opacity var(--t-fast);
}
.contact__form button[type="submit"]:hover { opacity: 0.86; }

/* ============================================================
   FAQS — native <details>, no JavaScript.
   ============================================================ */

.faqs__list { border-top: 1px solid var(--hair); }

.faq { border-bottom: 1px solid var(--hair); }

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: 400;
    color: var(--ice);
    letter-spacing: -0.005em;
    transition: color var(--t-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: #fff; }

/* A plus that becomes a minus. Drawn in CSS so it inherits colour. */
.faq__mark {
    position: relative;
    width: 12px; height: 12px;
    flex-shrink: 0;
}
.faq__mark::before,
.faq__mark::after {
    content: "";
    position: absolute;
    background: var(--mute);
    transition: transform var(--t-mid), background-color var(--t-fast);
}
.faq__mark::before { left: 0; top: 5.5px; width: 12px; height: 1px; }
.faq__mark::after  { left: 5.5px; top: 0; width: 1px; height: 12px; }
.faq[open] .faq__mark::after { transform: rotate(90deg); opacity: 0; }
.faq[open] .faq__mark::before { background: var(--cyan); }

.faq__a {
    padding-bottom: 26px;
    max-width: 66ch;
}
.faq__a p { color: var(--mute); font-size: 0.9375rem; line-height: 1.7; }

/* ============================================================
   REVEAL — applied by main.js, so content is visible without it.
   ============================================================ */

.will-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .will-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    border-top: 1px solid var(--hair);
    padding-block: clamp(48px, 5vw, 68px) 34px;
}

.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
    gap: clamp(28px, 4vw, 60px);
    padding-bottom: 44px;
}

.footer__brand img, .footer__brand svg { width: 176px; margin-bottom: 20px; }

.footer__blurb {
    font-size: 0.875rem;
    color: var(--mute);
    max-width: 40ch;
    line-height: 1.62;
}

.footer__colhead {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute-deep);
    margin-bottom: 18px;
}

.footer__list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer__list a, .footer__list span {
    font-size: 0.875rem;
    color: var(--mute);
}
.footer__list a:hover { color: var(--ice); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    padding-top: 26px;
    border-top: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--mute-deep);
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */

.pagehead {
    padding-top: clamp(140px, 15vw, 178px);
    padding-bottom: clamp(40px, 5vw, 60px);
    border-bottom: 1px solid var(--hair);
}

.pagehead__title { max-width: 20ch; margin-top: 22px; }
.pagehead__lede { margin-top: 24px; }

/* ============================================================
   PROSE (WP editor content)
   ============================================================ */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2em; margin-bottom: 0.6em; }
.prose h3 { margin-top: 1.7em; margin-bottom: 0.5em; }
.prose p, .prose li { color: var(--ice-dim); }
.prose ul, .prose ol { margin: 1.1em 0 1.1em 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose a { color: var(--cyan); border-bottom: 1px solid rgba(0, 210, 255, 0.3); }
.prose a:hover { border-bottom-color: var(--cyan); }
.prose img { margin: 2em 0; border-radius: var(--radius-lg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
    .work-item { grid-template-columns: 1fr; }
    .work-item__meta { position: static; }
    .cta__inner { grid-template-columns: 1fr; align-items: start; }
    .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .pillars__grid { grid-template-columns: 1fr; }
    .process__grid { grid-template-columns: 1fr; gap: 32px; }
    .footer__top { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }

    /* Manifest reflows to two lines per row, keeping the register legible.
       The year drops off: on a phone, the role is the column that earns its
       place, and two columns of metadata would crush the domain. */
    .manifest__row,
    .manifest__list--years .manifest__row {
        grid-template-columns: 16px 1fr auto;
        grid-template-areas:
            "dot domain role"
            ".   what   what";
        gap: 6px 14px;
        padding: 16px 0;
    }
    .manifest__since { display: none; }
    .manifest__dot  { grid-area: dot; }
    .manifest__what { grid-area: what; font-size: 0.875rem; }
    .manifest__role { grid-area: role; }
    .manifest__go   { display: none; }

    /* The longest domain plus its extra TLDs will not fit on one phone line,
       so let it wrap rather than push the row off the side of the screen. */
    .manifest__domain {
        grid-area: domain;
        white-space: normal;
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

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

    .nav__links {
        position: fixed;
        top: 78px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(6, 6, 10, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--hair);
        padding: 10px 28px 24px;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
    }
    .nav__links.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .nav__links li { border-bottom: 1px solid var(--hair-faint); }
    .nav__links li:last-child { border-bottom: 0; padding-top: 16px; }
    .nav__links a { display: block; padding: 16px 0; font-size: 0.8125rem; }
    .nav__cta { margin-left: 0; width: 100%; justify-content: center; }

    .footer__top { grid-template-columns: 1fr; gap: 34px; }

    .work-item__facts { gap: 0; }
    .fact { padding-right: 22px; margin-right: 22px; }
}

@media (max-width: 560px) {
    .container { padding: 0 20px; }
    .pillars-line { gap: 10px; font-size: 0.625rem; letter-spacing: 0.14em; }
    .manifest__head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .manifest__role { font-size: 0.5625rem; letter-spacing: 0.1em; }
    .fact { width: 50%; border-right: 0; padding-right: 0; margin-right: 0; }
    .hero__actions .btn { width: 100%; justify-content: center; }
}