/* Studio Nord 2026 — public site
 * Extracted from the design handoff prototype. Critical tokens are
 * inlined in views/home/layout.pug; this file is loaded async.
 */

/* ─────── tokens ─────── */
:root {
    --bg: oklch(0.985 0.002 250);
    --bg-soft: oklch(0.96 0.003 250);
    --bg-deep: oklch(0.92 0.004 250);
    --ink: oklch(0.205 0.022 256);
    --ink-2: oklch(0.43 0.018 256);
    --ink-3: oklch(0.64 0.014 256);
    --rule: oklch(0.205 0.022 256 / 0.14);
    --rule-soft: oklch(0.205 0.022 256 / 0.07);
    --accent: oklch(0.56 0.205 25);
    --accent-ink: oklch(0.43 0.19 25);

    --font-display: 'PT Sans', sans-serif;
    --font-body: 'PT Sans', sans-serif;
    --font-serif: 'Newsreader', serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --gap-section: 96px;
    --pad-page: 32px;
    --display-scale: 1;
    --maxw: 1480px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body {
    font-size: 16px;
    line-height: 1.55;
    font-feature-settings: 'ss01' on, 'ss02' on, 'kern' on;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    max-width: 100%;
}
em {
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 700;
}
button {
    font: inherit;
    color: inherit;
}

.sn-app {
    min-height: 100vh;
}
.sn-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* ─────── nav ─────── */
.sn-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px var(--pad-page);
    background: color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 0.5px solid var(--rule);
}
.sn-wordmark {
    display: inline-flex;
    align-items: center;
}
.sn-wm-logo {
    height: 24px;
    width: auto;
    /* Out from under the reset's max-width cap on img. With the height
       fixed, a column narrower than the mark compressed it horizontally
       rather than letting it be — 89px wide where its proportions want 125. */
    max-width: none;
    display: block;
}
.sn-footer .sn-wm-logo {
    height: 39px;
}
/* The footer-mark used to wrap an SVG icon + 'Studio Nord' text with a
   10px gap. Now it only wraps a logo image, so the inline-flex padding
   and font styling are no longer needed and were creating a phantom
   offset that pushed the logo a few pixels right of the page rule. */
.sn-footer-mark {
    display: block;
    gap: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}
.sn-footer-mark a {
    display: block;
    text-decoration: none;
}
/* On wide screens the footer logo sits flush against the viewport edge
   (left padding 0). At intermediate and mobile widths it falls back to
   the standard page padding so the logo aligns with the rest of the
   page content. */
@media (min-width: 1281px) {
    .sn-footer-grid {
        padding-left: 0;
    }
}
.sn-nav-back {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s;
}
.sn-nav-back:hover {
    color: var(--accent);
}
.sn-nav-links {
    display: flex;
    gap: 28px;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
}
.sn-nav-links a {
    color: var(--ink-2);
    transition: color 0.15s;
}
.sn-nav-links a:hover {
    color: var(--accent);
}
.sn-nav-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.sn-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
}
/* Project page nav: .sn-lang is a direct nav child (no .sn-nav-end
   wrapper). Push it to the right edge of its grid column. */
.sn-nav > .sn-lang {
    justify-self: end;
}
.sn-lang a {
    padding: 2px 4px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    transition: color 0.15s;
}
/* Touch only. EN · ES · TR measured 23×21 each with three of them side by
   side, which is the arrangement that makes you tap the wrong language.
   Grows the hit area, not the type: a bigger font would redesign the nav to
   fix a target size. Pointer devices keep the tight original. */
@media (hover: none) and (pointer: coarse) {
    .sn-lang a {
        min-height: 44px;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 4px;
    }
    /* The bar keeps its height: the taller targets take the padding the bar
       was already spending, rather than adding 23px of sticky header to
       every page on a phone. */
    .sn-nav {
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

.sn-lang a[data-on='1'] {
    color: var(--ink);
}
.sn-lang a:hover {
    color: var(--accent);
}
.sn-nav-links a.sn-nav-client {
    color: #d2262f !important;
}
.sn-nav-links a.sn-nav-client:hover {
    color: #a01e25 !important;
}
.sn-nav-client-mobile {
    display: none;
    /* Two words, one line. Once the wordmark stopped being squashed it took
       its real width, and the label broke in half rather than staying put. */
    white-space: nowrap;
    margin-left: 4px;
    padding: 2px 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #d2262f;
}
.sn-nav-client-mobile:hover {
    color: #a01e25;
}
@media (max-width: 900px) {
    .sn-nav-client-mobile {
        display: inline-flex;
        align-items: center;
    }
}

/* ─────── client area: payment request cards ─────── */
.sn-pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.sn-pay-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    border-radius: 8px;
    color: var(--ink);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sn-pay-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--accent) 40%, var(--rule));
    box-shadow: 0 12px 32px -16px oklch(0.2 0.05 256 / 0.25);
}
.sn-pay-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.sn-pay-status {
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    color: var(--ink-2);
}
.sn-pay-card[data-status='paid'] .sn-pay-status {
    border-color: oklch(0.7 0.15 150);
    color: oklch(0.5 0.15 150);
}
.sn-pay-card[data-status='cancelled'] .sn-pay-status {
    opacity: 0.6;
    text-decoration: line-through;
}
.sn-pay-card[data-status='pending'] .sn-pay-status {
    border-color: var(--accent);
    color: var(--accent);
}
.sn-pay-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}
.sn-pay-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}
.sn-pay-num {
    font-size: 38px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
}
.sn-pay-cur {
    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--ink-2);
}
.sn-pay-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* ─────── payment detail page (capability URL) ─────── */
.sn-pay-page {
    min-height: calc(100vh - 200px);
    display: flex;
    justify-content: center;
    padding-top: 56px;
    padding-bottom: 96px;
}
.sn-pay-shell {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sn-pay-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    align-self: flex-start;
    transition: color 0.15s;
}
.sn-pay-back:hover {
    color: var(--ink);
}
.sn-pay-notice {
    padding: 14px 18px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}
.sn-pay-notice-ok {
    background: oklch(0.96 0.06 150);
    border: 1px solid oklch(0.75 0.13 150);
    color: oklch(0.32 0.13 150);
}
.sn-pay-notice-warn {
    background: oklch(0.97 0.04 80);
    border: 1px solid oklch(0.75 0.12 80);
    color: oklch(0.38 0.12 80);
}
.sn-pay-card-lg {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 24px 60px -32px oklch(0.2 0.05 256 / 0.18);
}
.sn-pay-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}
.sn-pay-badge {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.sn-pay-card-lg[data-status='pending'] .sn-pay-badge {
    border-color: #d2262f;
    color: #d2262f;
}
.sn-pay-card-lg[data-status='paid'] .sn-pay-badge {
    border-color: oklch(0.7 0.15 150);
    color: oklch(0.4 0.15 150);
    background: oklch(0.96 0.06 150);
}
.sn-pay-card-lg[data-status='cancelled'] .sn-pay-badge {
    text-decoration: line-through;
    opacity: 0.7;
}
.sn-pay-card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}
.sn-pay-card-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 16px 0;
    border-top: 1px dashed var(--rule);
    border-bottom: 1px dashed var(--rule);
    font-variant-numeric: tabular-nums;
}
.sn-pay-amount-num {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.sn-pay-amount-cur {
    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-2);
}
.sn-pay-card-desc {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    white-space: pre-wrap;
}
.sn-pay-card-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sn-pay-meta-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: baseline;
    font-size: 14px;
}
.sn-pay-meta-row dt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.sn-pay-meta-row dd {
    margin: 0;
    color: var(--ink);
}
.sn-pay-card-action {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.sn-pay-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 28px;
    background: #d2262f;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.sn-pay-cta:hover {
    background: #a01e25;
}
.sn-pay-cta:active {
    transform: translateY(1px);
}
.sn-pay-card-hint {
    margin: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}
.sn-pay-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 10px;
    background: var(--bg-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid var(--rule);
}
.sn-pay-state-ok {
    color: oklch(0.4 0.15 150);
    border-color: oklch(0.75 0.13 150);
    background: oklch(0.96 0.06 150);
}
/* Phone gutters. 32px each side is a tenth of a 360px screen twice over,
   and it was pushing the nav past the viewport — the browser answered by
   zooming the whole page out to 394px. The wordmark takes the mobile size
   the project nav already uses. */
@media (max-width: 480px) {
    :root {
        --pad-page: 20px;
    }
    .sn-wm-logo {
        height: 20px;
    }
}

@media (max-width: 600px) {
    .sn-pay-card-lg {
        padding: 24px;
        border-radius: 10px;
    }
    .sn-pay-meta-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ─────── shared section ─────── */
main {
    padding: 0 var(--pad-page);
}
.sn-section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-top: var(--gap-section);
    padding-bottom: var(--gap-section);
    border-top: 0.5px solid var(--rule);
}
.sn-section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    margin-bottom: 48px;
}
.sn-section-head .sn-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: -8px;
}
.sn-section-sub {
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.4;
    color: var(--ink-2);
    max-width: 64ch;
    margin: -32px 0 40px;
    letter-spacing: -0.01em;
}
.sn-section-sub em {
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-display);
}
@media (max-width: 600px) {
    .sn-section-sub {
        font-size: 18px;
    }
}
.sn-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 6vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
}
.sn-h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
}

/* ─────── HERO statement ─────── */
.sn-hero {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 48px 0 96px;
}
.sn-display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: calc(clamp(48px, 9.2vw, 156px) * var(--display-scale));
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 24px 0;
    text-wrap: balance;
}
.sn-display em {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.035em;
}
.sn-display-sub {
    display: block;
    font-size: 0.4em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-2);
    margin-top: 16px;
}
/* Coda line under the hero h1 — same display family but capped at 50px,
   ink-coloured, and pulled close to the heading above. */
.sn-display-coda {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 50px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-top: -8px;
}
@media (max-width: 600px) {
    .sn-display-coda {
        font-size: 28px;
    }
}
.sn-hero-logline {
    margin: 24px 0 0;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 56ch;
}
.sn-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 0.5px solid var(--rule);
    padding-bottom: 14px;
}
.sn-hero-foot {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    border-top: 0.5px solid var(--rule);
    padding-top: 24px;
    margin-top: 48px;
}
.sn-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 0.5px solid var(--rule);
    padding-top: 24px;
    margin-top: 48px;
}
.sn-hero-stats > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sn-hero-stats b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-feature-settings: 'lnum' on, 'tnum' on;
}
.sn-hero-stats span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
@media (max-width: 600px) {
    .sn-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
.sn-foot-text {
    font-size: 18px;
    color: var(--ink);
    max-width: 42ch;
}
.sn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-weight: 500;
    font-size: 15px;
    transition: background 0.15s, transform 0.15s;
}
.sn-cta:hover {
    background: var(--accent);
    transform: translateX(4px);
    color: #fff;
}

/* ─────── service hub: why-list ─────── */
.sn-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 0.5px solid var(--ink);
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sn-why-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 0.5px solid var(--rule);
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.sn-why-item::before {
    content: '→';
    color: var(--accent);
    flex-shrink: 0;
}

/* ─────── /about/team ─────── */
.sn-team-intro {
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 64ch;
    margin: 0 0 48px;
}
.sn-team-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 64px 48px;
    border-top: 0.5px solid var(--ink);
    padding-top: 48px;
}
.sn-team-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sn-team-photo {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-soft);
    object-fit: cover;
    display: block;
}
.sn-team-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(48px, 6vw, 96px);
    color: var(--ink-3);
    letter-spacing: -0.02em;
}
.sn-team-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sn-team-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: -0.015em;
    color: var(--ink);
}
.sn-team-bio {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
}
.sn-team-links {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
}
.sn-team-links a {
    color: var(--ink-2);
    transition: color 0.15s;
}
.sn-team-links a:hover {
    color: var(--accent);
}

/* ─────── contact map embed ─────── */
.sn-contact-map {
    margin-top: 24px;
    border: 0.5px solid var(--rule);
    overflow: hidden;
}

/* ─────── landing page: services grid ─────── */
.sn-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    border-top: 0.5px solid var(--ink);
    padding-top: 48px;
}
@media (max-width: 800px) {
    .sn-services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 32px;
    }
}
.sn-service-card {
    border-top: 0.5px solid var(--rule);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
a.sn-service-card--link {
    color: inherit;
    transition: transform 0.2s, color 0.15s;
    position: relative;
}
a.sn-service-card--link:hover {
    transform: translateY(-3px);
}
a.sn-service-card--link:hover .sn-service-title {
    color: var(--accent);
}
.sn-service-arrow {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-3);
    transition: transform 0.2s, color 0.15s;
}
a.sn-service-card--link:hover .sn-service-arrow {
    transform: translateX(8px);
    color: var(--accent);
}
.sn-service-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
}
.sn-service-copy {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
}

/* ─────── landing page: process list ─────── */
.sn-process-intro {
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 64ch;
    margin: 0 0 32px;
}
.sn-process-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 48px;
    border-top: 0.5px solid var(--ink);
    padding-top: 32px;
}
@media (max-width: 800px) {
    .sn-process-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
.sn-process-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 0.5px solid var(--rule);
    padding-top: 18px;
}
.sn-process-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sn-process-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 24px);
    letter-spacing: -0.012em;
    margin: 0;
}
.sn-process-copy {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* ─────── landing page: FAQ ─────── */
.sn-faq {
    margin: 0;
    border-top: 0.5px solid var(--ink);
}
.sn-faq-q {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 24px);
    letter-spacing: -0.012em;
    color: var(--ink);
    padding: 24px 0 8px;
    border-top: 0.5px solid var(--rule);
}
.sn-faq-q:first-of-type {
    border-top: 0;
}
.sn-faq-a {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 70ch;
}

/* ─────── selected work — strict grid ─────── */
.sn-grid-work {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 32px;
    border-top: 0.5px solid var(--ink);
    padding-top: 48px;
}
@media (max-width: 1100px) {
    .sn-grid-work {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 680px) {
    .sn-grid-work {
        grid-template-columns: 1fr;
        gap: 48px 0;
    }
}
.sn-grid-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: inherit;
    transition: transform 0.25s ease;
}
.sn-grid-card:hover {
    transform: translateY(-3px);
}
.sn-grid-img {
    overflow: hidden;
    background: var(--bg-soft);
    aspect-ratio: 4 / 3;
}
.sn-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sn-grid-card:hover .sn-grid-img img {
    transform: scale(1.03);
}
.sn-grid-meta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: start;
    padding-top: 12px;
    border-top: 0.5px solid var(--rule);
}
.sn-grid-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    padding-top: 2px;
    font-feature-settings: 'tnum' on;
}
.sn-grid-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sn-grid-client {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.sn-grid-title {
    font-size: 14px;
    color: var(--ink-2);
}
.sn-grid-desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sn-grid-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.sn-grid-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.sn-grid-year {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
}

/* ─────── archive ─────── */
.sn-archive-table {
    border-top: 0.5px solid var(--ink);
}
.sn-archive-head,
.sn-archive-row {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 3fr 0.5fr;
    gap: 24px;
    padding: 14px 8px;
    align-items: baseline;
    border-bottom: 0.5px solid var(--rule);
}
.sn-archive-head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.sn-archive-row {
    transition: background 0.15s, padding 0.2s;
}
.sn-archive-row:hover {
    background: var(--bg-soft);
    padding-left: 24px;
    padding-right: 0;
}
.sn-ar-client {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.sn-ar-title {
    color: var(--ink-2);
}
.sn-ar-desc {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sn-ar-year {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    text-align: right;
}

/* Archive "Load more" — initial 6 rows render, additional rows hidden
   via .is-hidden, JS reveals 4 more per click. */
.sn-archive-row.is-hidden {
    display: none;
}
.sn-archive-foot {
    display: flex;
    justify-content: center;
    padding-top: 32px;
}
.sn-archive-more {
    background: none;
    border: 0.5px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sn-archive-more:hover {
    background: var(--ink);
    color: var(--bg);
}
.sn-archive-more-count {
    color: var(--ink-3);
    font-feature-settings: 'tnum' on;
}
.sn-archive-more:hover .sn-archive-more-count {
    color: rgba(255, 255, 255, 0.5);
}

/* ─────── brands ─────── */
.sn-brand-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 0.5px solid var(--rule);
    border-left: 0.5px solid var(--rule);
}
@media (max-width: 900px) {
    .sn-brand-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.sn-brand-cell {
    aspect-ratio: 5 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0.5px solid var(--rule);
    border-bottom: 0.5px solid var(--rule);
    transition: background 0.15s;
    padding: 22px 28px;
    text-align: center;
    overflow: hidden;
}
.sn-brand-cell:hover {
    background: var(--bg-soft);
}
/* Logo treatment: greyscale + lower opacity by default, restored on
   hover. Caps prevent oversized rasters from filling the cell. */
.sn-brand-cell img {
    max-width: 100%;
    max-height: 56%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.2s, opacity 0.2s;
}
.sn-brand-cell:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
.sn-brand-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(14px, 1.6vw, 22px);
    letter-spacing: -0.012em;
    color: var(--ink-2);
    transition: color 0.15s;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
}
@media (max-width: 600px) {
    .sn-brand-cell {
        padding: 14px 14px;
    }
    .sn-brand-cell img {
        max-height: 60%;
    }
}
.sn-brand-cell:hover .sn-brand-name {
    color: var(--ink);
}

/* ─────── about ─────── */
.sn-about-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px 24px;
    align-items: start;
}
.sn-manifesto {
    grid-column: 1 / span 12;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 44px);
    line-height: 1.25;
    letter-spacing: -0.018em;
    margin: 0;
    text-wrap: balance;
    color: var(--ink);
}
.sn-manifesto em {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
}
.sn-manifesto p {
    margin: 0;
}
.sn-manifesto p + p {
    margin-top: 0.7em;
}
.sn-about-stats {
    grid-column: 9 / span 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    border-top: 0.5px solid var(--rule);
    padding-top: 24px;
}
.sn-about-stats > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sn-about-stats b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-feature-settings: 'lnum' on, 'tnum' on;
}
.sn-about-stats span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ─────── contact ─────── */
.sn-contact-logo {
    display: block;
    height: clamp(48px, 8vw, 96px);
    width: auto;
    max-width: 100%;
}
.sn-contact-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.sn-contact-l {
    grid-column: 1 / span 7;
}
.sn-contact-l em {
    color: var(--accent);
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
}
.sn-contact-r {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.sn-contact-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 0.5px solid var(--rule);
    padding-top: 18px;
}
.sn-link-lg {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.015em;
    border-bottom: 0.5px solid currentColor;
    display: inline-block;
    align-self: flex-start;
    padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
}
.sn-link-lg:hover {
    color: var(--accent);
}
.sn-link-sm {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sn-link-sm:hover {
    color: var(--accent);
}
.sn-contact-block p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
}
.sn-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}
.sn-social a {
    color: var(--ink-2);
    transition: color 0.15s;
}
.sn-social a:hover {
    color: var(--accent);
}

/* ─────── footer ─────── */
.sn-footer {
    margin-top: 48px;
    border-top: 0.5px solid var(--rule);
    background: var(--ink);
    color: var(--bg);
}
.sn-footer-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 32px var(--pad-page);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sn-footer-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    text-transform: none;
    letter-spacing: -0.005em;
    color: var(--bg);
}
.sn-footer-meta {
    display: flex;
    gap: 24px;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}
.sn-footer-cta a {
    color: var(--bg);
    transition: color 0.15s;
}
.sn-footer-cta a:hover {
    color: oklch(0.7 0.18 252);
}

/* ─────── project detail page ─────── */
.pp-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
}
.pp-hero {
    padding: 72px 0 56px;
}
.pp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 0.5px solid var(--rule);
    padding-bottom: 14px;
}
.pp-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    margin-top: 48px;
    align-items: end;
}
.pp-title {
    grid-column: 1 / span 8;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7.8vw, 132px);
    line-height: 1;
    letter-spacing: -0.035em;
    text-wrap: balance;
    margin: 0;
}
.pp-title em {
    color: var(--accent);
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
}
.pp-side {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 18px;
}
.pp-side p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.55;
    max-width: 38ch;
}
.pp-tag {
    display: inline-flex;
    width: fit-content;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    border: 0.5px solid var(--accent);
    padding: 6px 10px;
    border-radius: 999px;
}
.pp-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    border-block: 0.5px solid var(--ink);
    margin-top: 56px;
}
.pp-fact {
    padding: 20px 0;
    border-right: 0.5px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-fact:last-child {
    border-right: 0;
}
.pp-fact:not(:first-child) {
    padding-left: 20px;
}
.pp-fact b {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.pp-hero-img {
    margin-top: 48px;
    background: var(--bg-soft);
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
}
.pp-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-section {
    padding: 96px 0;
    border-top: 0.5px solid var(--rule);
}
.pp-s-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    margin-bottom: 48px;
    align-items: start;
}
.pp-s-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 12px;
}
.pp-s-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4.4vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
}
.pp-s-h2 em {
    color: var(--accent);
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 700;
}
.pp-s-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start;
}
.pp-s-body p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
}
.pp-s-body p:last-child {
    margin-bottom: 0;
}
.pp-s-body p strong {
    color: var(--ink);
    font-weight: 500;
}
.pp-s-html {
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.55;
}
.pp-s-html p {
    margin: 0 0 18px;
}
.pp-s-html img {
    max-width: 100%;
    height: auto;
    margin: 24px 0;
}

.pp-pull {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.15;
    letter-spacing: -0.022em;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
}
.pp-pull em {
    color: var(--accent);
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 700;
}

.pp-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px 24px;
}
.pp-g-tile {
    background: var(--bg-soft);
    overflow: hidden;
    position: relative;
    grid-column: span 6;
    aspect-ratio: 4 / 5;
}
.pp-g-tile.wide {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
}
.pp-g-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pp-g-cap {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bg);
    background: rgba(20, 20, 25, 0.7);
    padding: 4px 8px;
    border-radius: 4px;
}

.pp-credits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 0.5px solid var(--rule);
    padding-top: 24px;
}
.pp-credit {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 0.5px solid var(--rule-soft);
    padding-top: 10px;
}
.pp-credit-role {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pp-credit-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.005em;
}

.pp-impact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 0.5px solid var(--ink);
}
.pp-impact-cell {
    padding: 24px 0;
    border-right: 0.5px solid var(--rule);
    border-bottom: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
}
.pp-impact-cell:nth-child(3n) {
    border-right: 0;
}
.pp-impact-cell:not(:nth-child(3n + 1)) {
    padding-left: 24px;
}
.pp-impact-cell b {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    font-feature-settings: 'lnum' on, 'tnum' on;
}
.pp-impact-cell span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pp-next {
    padding: 120px 0;
    border-top: 0.5px solid var(--rule);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.pp-next a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 5.8vw, 92px);
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    transition: color 0.2s;
}
.pp-next a:hover {
    color: var(--accent);
}
.pp-next a span {
    font-size: 0.6em;
    color: var(--ink-3);
    transition: transform 0.2s, color 0.2s;
}
.pp-next a:hover span {
    transform: translateX(12px);
    color: var(--accent);
}

/* ─────── cookie consent banner ─────── */
.sn-consent {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 100;
    max-width: 720px;
    margin: 0 auto;
    background: var(--ink);
    color: var(--bg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}
.sn-consent[hidden] {
    display: none;
}
.sn-consent-msg {
    margin: 0;
    flex: 1 1 280px;
    min-width: 0;
}
.sn-consent-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.sn-consent-btn {
    background: none;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    color: var(--bg);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sn-consent-btn:hover {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bg);
}
.sn-consent-accept {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.sn-consent-accept:hover {
    background: #fff;
    color: var(--accent);
    border-color: #fff;
}
@media (max-width: 600px) {
    .sn-consent {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 14px 16px;
        gap: 12px;
    }
    .sn-consent-actions {
        width: 100%;
    }
    .sn-consent-btn {
        flex: 1;
    }
}

/* ─────── responsive ─────── */
@media (max-width: 900px) {
    .sn-nav {
        /* auto, not 1fr: the first column has to fit the wordmark, and 1fr
           happily gave it less than the mark is wide. */
        grid-template-columns: auto 1fr;
        gap: 12px;
    }
    /* Project page nav has 3 children (back · logo · lang) — keep them
       all on one row by switching to flex with space-between. */
    .sn-nav-project {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .sn-nav-project .sn-nav-back {
        font-size: 10px;
    }
    .sn-nav-project .sn-wm-logo {
        height: 20px;
    }
    .sn-nav-links {
        display: none;
    }
    .sn-archive-head,
    .sn-archive-row {
        grid-template-columns: 1.2fr 0.6fr;
        gap: 14px;
    }
    .sn-ar-title,
    .sn-ar-desc {
        display: none;
    }
    /* Header has no class names on its spans, so target by position:
       2 = Project, 3 = Description. Hide both on mobile to match the
       2-column body layout (client + year only). */
    .sn-archive-head span:nth-child(2),
    .sn-archive-head span:nth-child(3) {
        display: none;
    }
    .sn-manifesto,
    .sn-about-stats,
    .sn-contact-l,
    .sn-contact-r {
        grid-column: 1 / -1;
    }
    .sn-footer-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .sn-footer-meta {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .pp-title,
    .pp-side,
    .pp-s-head,
    .pp-s-body,
    .pp-credits,
    .pp-impact {
        grid-template-columns: 1fr;
        grid-column: 1 / -1;
    }
    .pp-credits,
    .pp-impact {
        grid-template-columns: 1fr 1fr;
    }
    .pp-g-tile,
    .pp-g-tile.wide {
        grid-column: 1 / -1;
    }
}

/* ─────── stagger-roll CTA (hero + footer "Let's talk") ─────── */
/* Rest state inherits the existing button look (.sn-cta pill in the
   hero, plain link in the footer); these rules only add the roll
   machinery. Letters are split into .stg-btn__char spans by jQuery
   (see _partials/_footer.pug), each with an incremental delay. */
.stg-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition:
        transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
        background 0.15s,
        color 0.15s;
    will-change: transform;
    backface-visibility: hidden;
}
.sn-footer-cta a.stg-btn {
    /* the plain link had a single mono space before the arrow */
    gap: 7px;
    transition:
        transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
        color 0.15s;
}
.stg-btn__mask {
    position: relative;
    display: inline-flex;
    overflow: hidden;
}
.stg-btn__char {
    position: relative;
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.stg-btn__char::after {
    /* duplicate letter waiting below the mask; rolls in on hover */
    content: attr(data-ch);
    position: absolute;
    left: 0;
    top: 100%;
}
.stg-btn__arrow {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
@media (hover: hover) {
    .stg-btn:hover {
        transform: scale(1.05);
    }
    .stg-btn:hover .stg-btn__char {
        transform: translateY(-100%);
    }
    .stg-btn:hover .stg-btn__arrow {
        transform: translateX(4px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .stg-btn,
    .stg-btn__char,
    .stg-btn__arrow {
        transition: none;
    }
}

/* ─────── contact form ─────── */
/* The honeypot is positioned off-screen rather than display:none — some
   bots skip anything the CSS hides outright. */
.sn-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.sn-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.sn-field input,
.sn-field textarea {
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 0.5px solid var(--rule);
    padding: 8px 0;
    border-radius: 0;
}
.sn-field input:focus,
.sn-field textarea:focus {
    outline: none;
    border-bottom-color: var(--ink);
}
.sn-field textarea {
    resize: vertical;
}
.sn-contact-note,
.sn-contact-error {
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.5;
    margin: 0 0 20px;
}
.sn-contact-error {
    color: var(--accent);
}
.sn-contact-privacy {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-3);
    max-width: 56ch;
}

/* ─────── footer newsletter ─────── */
/* The grid was `auto 1fr auto` for three children. A fourth without this
   drops to a second row and the CTA lands under the logo. Scoped to wide
   screens: this block sits after the max-width:900px rule that collapses the
   footer to one column, so an unscoped declaration would win there too. */
@media (min-width: 901px) {
    .sn-footer-grid {
        grid-template-columns: auto 1fr auto auto;
    }
}
.sn-footer-news {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 34ch;
}
.sn-news-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: baseline;
}
.sn-news-form label {
    flex: 1 0 100%;
    /* .sn-eyebrow's --ink-2 is a dark grey meant for the light page; on the
       footer's ink ground it nearly disappears. */
    color: rgba(255, 255, 255, 0.6);
}
.sn-news-form input {
    flex: 1 1 160px;
    min-width: 0;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    /* The footer ground is --ink, so the footer's own colours are inverted:
       anything reading on it takes --bg, not --ink. Using --ink here is what
       painted the button invisible the first time round. */
    color: var(--bg);
    background: transparent;
    border: 0;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
    padding: 6px 0;
    border-radius: 0;
}
.sn-news-form input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.sn-news-form input:focus {
    outline: none;
    border-bottom-color: var(--bg);
}
.sn-news-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--bg);
    color: var(--ink);
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sn-news-btn:hover {
    opacity: 0.8;
}
.sn-news-privacy {
    margin: 0;
    /* The footer grid sets uppercase mono at 0.1em tracking; three lines of
       small print in it is a wall. */
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.5);
}