/* =============================================================================
   KREO — creative studio / portfolio theme
   Vanilla CSS. Mobile-first. min-width breakpoints only. No build step.
   Dark-first editorial. Sections swap the token VALUES; components are
   token-driven so a light section "just works". Self-hosted Fraunces + Inter.
   ========================================================================== */

/* 1. Fonts -------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-weight: 100 900; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-ext.woff2") format("woff2");
    font-weight: 100 900; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-latin.woff2") format("woff2");
    font-weight: 300 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
    font-weight: 300 700; font-style: normal; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
    font-weight: 300 700; font-style: italic; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2");
    font-weight: 300 700; font-style: italic; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ----------------------------------------------------------- */
:root {
    /* --c-* palette injected by head.php from config/theme.php */
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;

    --t--2: 0.6875rem;
    --t--1: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
    --t-0:  clamp(0.9rem, 0.86rem + 0.16vw, 1rem);
    --t-1:  clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
    --t-2:  clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
    --t-3:  clamp(1.8rem, 1.35rem + 2vw, 3rem);
    --t-4:  clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);
    --t-5:  clamp(2.5rem, 1.2rem + 5.6vw, 6.4rem);

    --gutter: clamp(1.15rem, 0.5rem + 3vw, 3rem);
    --maxw: 1360px;
    --nav-h: 64px;

    --s-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
    --s-4: clamp(2.75rem, 2rem + 3vw, 4.5rem);
    --s-5: clamp(4rem, 2.8rem + 4.4vw, 6.5rem);
    --s-6: clamp(5rem, 3.2rem + 6vw, 8.5rem);

    --hair: 1px solid var(--c-line);
    --ease: cubic-bezier(.22,.61,.36,1);
    --dur: .5s;
    --z-header: 60;
    --z-drawer: 90;
    --z-scrim: 85;
    --z-lightbox: 120;

    color-scheme: dark;
}

/* 3. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
body {
    font-family: var(--sans);
    font-size: var(--t-0);
    line-height: 1.65;
    color: var(--c-ink-soft);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; color: var(--c-ink); letter-spacing: -0.02em; font-family: var(--serif); text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
::selection { background: var(--c-ink); color: var(--c-bg); }
[hidden] { display: none !important; }
.sr-only, .hp {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; }
body.is-locked { overflow: hidden; }
.page-shell { overflow-x: clip; }
h1, h2, h3, .hero__title, .pagehead__title, .case__title, .post__title { overflow-wrap: break-word; }

.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 200;
    padding: .6rem 1rem; background: var(--c-ink); color: var(--c-bg);
    transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }
.preview-bar { background: var(--c-accent); color: #14110a; text-align: center; padding: .5rem; font-size: var(--t--1); font-weight: 600; }

/* 4. Layout + light/dark section token swap ---------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
main { display: block; }

.section { padding-block: var(--s-6); }
.section--flush { padding-block: 0 var(--s-6); }

/* the swap: a light section redefines the tokens its subtree reads */
.section--light,
.clients.section--light,
.endcta.section--light,
.metrics.section--light {
    --c-bg: var(--c-surface);
    --c-ink: var(--c-ink-2);
    --c-ink-soft: var(--c-ink-soft-2);
    --c-muted: var(--c-muted-2);
    --c-line: var(--c-line-2);
    --c-primary: var(--c-ink-2);
    --c-on-primary: var(--c-surface);
    background: var(--c-bg);
    color: var(--c-ink-soft);
}

.eyebrow {
    font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted);
}

.section-head { display: grid; gap: 1.1rem; margin-bottom: var(--s-3); }
.section-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.section-head__title { font-size: var(--t-3); max-width: 20ch; }

.arrowlink {
    display: inline-flex; align-items: center; gap: .55rem; align-self: flex-end;
    font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); white-space: nowrap;
    min-height: 40px;
}
.arrowlink svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.arrowlink:hover svg { transform: translateX(5px); }
.arrowlink--back svg { transform: none; }
.arrowlink--back:hover svg { transform: translateX(-5px); }
@media (min-width: 700px) { .arrowlink { min-height: 0; } }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); margin-bottom: 1.75rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--c-ink); }
.crumbs [aria-current] { color: var(--c-ink); }
@media (min-width: 700px) { .crumbs a { min-height: 0; } }

/* 5. Buttons ---------------------------------------------------- */
.btn {
    --bg: var(--c-primary); --fg: var(--c-on-primary); --bd: var(--c-primary);
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 48px; padding: .8rem 1.5rem;
    background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
    font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; border-radius: 999px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .12s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { --bg: transparent; --fg: var(--c-ink); --bd: var(--c-ink); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: 1rem 1.9rem; }
.btn--block { display: flex; width: 100%; }
.btn--ghost { --bg: transparent; --fg: var(--c-ink); --bd: color-mix(in srgb, var(--c-ink) 40%, transparent); }
.btn--ghost:hover { --bg: var(--c-ink); --fg: var(--c-bg); --bd: var(--c-ink); }
.btn--dark { --bg: var(--c-ink-2); --fg: var(--c-surface); --bd: var(--c-ink-2); }
.btn--dark:hover { --bg: transparent; --fg: var(--c-ink-2); --bd: var(--c-ink-2); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn__plus { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 999px; }
.btn__plus svg { width: 13px; height: 13px; }

.linkbtn { color: var(--c-accent); font-size: var(--t--1); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }

/* 6. Header + mobile nav --------------------------------------- */
.nav {
    position: sticky; top: 0; z-index: var(--z-header);
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
    transition: border-color .3s, background .3s;
}
.nav.is-pinned { border-color: var(--c-line); background: color-mix(in srgb, var(--c-bg) 96%, transparent); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--nav-h); }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); letter-spacing: .16em; color: var(--c-ink); }
.nav__center { display: none; }
.nav__end { display: flex; align-items: center; gap: .75rem; }
.nav__cta { display: none; }
.nav__toggle {
    width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--c-ink); transition: transform .3s var(--ease); }

@media (min-width: 1000px) {
    :root { --nav-h: 84px; }
    .nav__toggle { display: none; }
    .nav__center {
        display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.6vw, 2.4rem);
        position: absolute; left: 50%; transform: translateX(-50%);
    }
    .nav__inner { position: relative; }
    .nav__link {
        font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
        letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft);
        padding-block: .4rem; position: relative;
    }
    .nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--c-ink); transition: right .3s var(--ease); }
    .nav__link:hover, .nav__link[aria-current] { color: var(--c-ink); }
    .nav__link:hover::after, .nav__link[aria-current]::after { right: 0; }
    .nav__cta {
        display: inline-flex; align-items: center; gap: .6rem;
        font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
        letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink);
        padding: .55rem .55rem .55rem 1.1rem; border: 1px solid var(--c-line); border-radius: 999px;
    }
    .nav__cta svg { width: 15px; height: 15px; padding: 7px; box-sizing: content-box; border: 1px solid var(--c-line); border-radius: 999px; transition: background .3s, color .3s; }
    .nav__cta:hover svg { background: var(--c-ink); color: var(--c-bg); }
}

.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(6,6,5,.55); opacity: 0; transition: opacity var(--dur) var(--ease); }
.scrim.is-open { opacity: 1; }

.mobilenav {
    position: fixed; inset: 0; z-index: var(--z-drawer);
    background: var(--c-bg); display: flex; flex-direction: column;
    transform: translateY(-100%); visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
    overflow-y: auto;
}
.mobilenav.is-open { transform: none; visibility: visible; }
.mobilenav__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); border-bottom: var(--hair); }
.mobilenav__close { width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--c-ink); }
.mobilenav__close svg { width: 24px; height: 24px; }
.mobilenav__links { flex: 1; display: grid; align-content: center; gap: .25rem; padding-block: 1.5rem; }
.mobilenav__links a {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .9rem;
    padding: .7rem 0; min-height: 56px;
    font-family: var(--serif); font-size: clamp(1.7rem, 1.1rem + 3vw, 2.6rem); color: var(--c-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--c-line) 70%, transparent);
}
.mobilenav__links a[aria-current] { color: var(--c-accent); }
.mobilenav__num { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .1em; }
.mobilenav__links svg { width: 20px; height: 20px; color: var(--c-muted); align-self: center; }
.mobilenav__foot { padding-block: 1.5rem 2rem; display: grid; gap: 1.25rem; border-top: var(--hair); }
.mobilenav__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); flex-wrap: wrap; }
.mobilenav__social { display: flex; gap: .3rem; }
.mobilenav__social a { width: 40px; height: 40px; display: inline-grid; place-items: center; border: var(--hair); border-radius: 999px; }
.mobilenav__social svg { width: 18px; height: 18px; }

/* 7. Hero -------------------------------------------------- */
.hero { padding-block: var(--s-4) var(--s-5); }
.hero__inner { display: grid; gap: var(--s-3); }
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title { font-size: var(--t-5); line-height: .98; letter-spacing: -0.03em; }
.hero__line { display: block; }
.hero__sub { margin-top: 1.75rem; font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); max-width: 34ch; }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.reel { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--sans); font-size: var(--t--1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); }
.reel__btn { width: 48px; height: 48px; display: inline-grid; place-items: center; border: 1px solid var(--c-line); border-radius: 999px; transition: background .3s, color .3s, border-color .3s; }
.reel__btn svg { width: 16px; height: 16px; margin-left: 2px; }
.reel:hover .reel__btn { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.hero__media { position: relative; overflow: hidden; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 900px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, .5rem + 4vw, 5rem); align-items: center; }
    .hero__media img { aspect-ratio: 3 / 3.6; }
    .hero { padding-block: var(--s-5) var(--s-6); }
}
@media (min-width: 1200px) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }

/* 8. Metrics --------------------------------------------- */
.metrics { padding-block: var(--s-4); border-block: var(--hair); }
.metrics__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
@media (min-width: 860px) { .metrics__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.metric { display: grid; gap: .35rem; }
.metric__icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--c-line); border-radius: 999px; margin-bottom: .5rem; }
.metric__icon svg { width: 17px; height: 17px; color: var(--c-muted); }
.metric__value { font-family: var(--serif); font-size: var(--t-3); color: var(--c-ink); line-height: 1; }
.metric__label { font-family: var(--sans); font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }

/* 9. Featured projects grid ----------------------------- */
.section--projects .section-head { max-width: none; }
.pj-grid { display: grid; gap: clamp(1rem, .4rem + 2vw, 2rem); }
@media (min-width: 760px) {
    .pj-grid { grid-template-columns: repeat(2, 1fr); }
    .pj--large { grid-column: 1 / -1; }
    .pj--wide { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
    .pj-grid { grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; }
    .pj--large { grid-column: span 7; grid-row: span 2; }
    .pj--default { grid-column: span 5; }
    .pj--wide { grid-column: 1 / -1; }
    .pj-grid--even .pj--default { grid-column: span 4; }
}

.pj { position: relative; }
.pj__link { display: grid; gap: 1rem; }
.pj__media { display: block; overflow: hidden; background: var(--c-surface-2); }
.pj__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .8s var(--ease), filter .8s var(--ease); }
.pj--large .pj__media img { aspect-ratio: 4 / 4.2; }
.pj--wide .pj__media img { aspect-ratio: 16 / 8; }
@media (min-width: 1040px) { .pj--large .pj__media img { aspect-ratio: auto; height: 100%; } }
.pj:hover .pj__media img { transform: scale(1.04); }
.pj__body { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .5rem 1rem; }
.pj__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-family: var(--sans); font-size: var(--t--1); }
.pj__client { color: var(--c-ink); font-weight: 600; letter-spacing: .04em; }
.pj__cat { color: var(--c-muted); }
.pj__title { grid-column: 1; font-family: var(--serif); font-size: var(--t-2); color: var(--c-ink); }
.pj--large .pj__title { font-size: var(--t-3); }
.pj__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--c-line); border-radius: 999px; transition: background .3s, color .3s, border-color .3s; }
.pj__go svg { width: 17px; height: 17px; }
.pj:hover .pj__go { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.pj__link::after { content: ""; position: absolute; inset: 0; }

/* 10. Services ------------------------------------------ */
.section--services .container { display: grid; gap: var(--s-3); }
.services-head { display: grid; gap: 1.1rem; }
.services-head__title { font-size: var(--t-4); }
.svc-list { border-top: var(--hair); }
.svc { border-bottom: var(--hair); }
.svc__link {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .5rem 1.5rem;
    padding-block: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
    transition: padding-left .3s var(--ease);
}
.svc:hover .svc__link { padding-left: .75rem; }
.svc__num { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .1em; }
.svc__title { font-family: var(--serif); font-size: var(--t-3); color: var(--c-ink); }
.svc__text { grid-column: 2; font-family: var(--sans); font-size: var(--t-0); color: var(--c-muted); max-width: 44ch; }
.svc__go { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--c-line); border-radius: 999px; opacity: 0; transition: opacity .3s, background .3s, color .3s; }
.svc__go svg { width: 16px; height: 16px; }
.svc:hover .svc__go { opacity: 1; background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
@media (max-width: 719px) {
    .svc__link { grid-template-columns: auto 1fr; }
    .svc__text { grid-column: 1 / -1; }
    .svc__go { display: none; }
}
@media (min-width: 900px) {
    .section--services .container { grid-template-columns: minmax(0, 24rem) 1fr; gap: clamp(2rem, .5rem + 4vw, 5rem); align-items: start; }
    .services-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* 11. Feature case ------------------------------------- */
.feature { position: relative; padding-block: var(--s-6); }
.feature__media { display: block; overflow: hidden; margin-bottom: var(--s-4); }
.feature__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1s var(--ease); }
.feature__media:hover img { transform: scale(1.03); }
.feature__text { max-width: 44rem; display: grid; gap: 1.1rem; }
.feature__title { font-size: var(--t-4); }
.feature__sub { font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); }
.feature__metrics { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; padding-block: 1rem; border-block: var(--hair); margin-block: .5rem; }
.feature__metrics li { display: grid; gap: .15rem; min-width: 0; max-width: 100%; }
.feature__metrics strong { font-family: var(--serif); font-size: var(--t-2); color: var(--c-ink); overflow-wrap: anywhere; }
.feature__metrics span { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .06em; }
.feature .btn { justify-self: start; margin-top: .5rem; }
@media (min-width: 1040px) {
    .feature__media img { aspect-ratio: 21 / 9; }
}

/* 12. Studio ------------------------------------------- */
.section--studio .studio-head { display: grid; gap: 1.25rem; margin-bottom: var(--s-3); }
.studio-head__row { display: grid; gap: 1.75rem; }
.studio-head__title { font-size: var(--t-4); }
.studio-head__aside { font-family: var(--sans); font-size: var(--t-0); color: var(--c-ink-soft); display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 900px) {
    .studio-head__row { grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, .5rem + 4vw, 5rem); align-items: end; }
}
.studio-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.studio-strip::-webkit-scrollbar { display: none; }
.studio-strip figure { scroll-snap-align: start; overflow: hidden; }
.studio-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 760px) { .studio-strip { grid-auto-columns: 34%; } }
@media (min-width: 1100px) { .studio-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } }

.studio-values { display: grid; gap: var(--s-3); }
@media (min-width: 800px) { .studio-values { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, .5rem + 3vw, 3.5rem); } }
.studio-value { display: grid; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-ink); }
.studio-value h2 { font-size: var(--t-2); }
.studio-value p { font-family: var(--sans); font-size: var(--t-0); color: var(--c-ink-soft); }
.studio-hero { overflow: hidden; }
.studio-hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, .3rem + 2vw, 2rem) 1rem; }
@media (min-width: 800px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.teamcard__photo { display: block; overflow: hidden; background: var(--c-surface-2); }
.teamcard__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .5s; }
.teamcard:hover .teamcard__photo img { filter: none; }
.teamcard figcaption { display: grid; gap: .2rem; padding-top: .9rem; }
.teamcard__name { font-family: var(--serif); font-size: var(--t-1); color: var(--c-ink); }
.teamcard__role { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .04em; }
.teamcard__bio { font-family: var(--sans); font-size: var(--t--1); color: var(--c-ink-soft); margin-top: .35rem; }

.quote-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }
.quotecard { display: grid; gap: 1rem; padding: 1.75rem; border: var(--hair); }
.quotecard svg { width: 26px; height: 26px; color: var(--c-accent); }
.quotecard p { font-family: var(--serif); font-size: var(--t-1); font-style: italic; color: var(--c-ink); }
.quotecard cite { font-style: normal; font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); display: grid; gap: .15rem; }
.quotecard cite span { color: var(--c-muted); }

/* 13. Process ------------------------------------------ */
.process { display: grid; gap: 0; counter-reset: step; }
.process__step { display: grid; gap: .6rem; padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: var(--hair); }
.process__num { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .12em; }
.process__title { font-size: var(--t-2); }
.process__text { font-family: var(--sans); font-size: var(--t-0); color: var(--c-ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
    .process { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
    .process__step { border-top: 1px solid var(--c-ink); }
    .process__text { max-width: none; }
}

.process-timeline { display: grid; gap: 0; }
.pt-step { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding-block: var(--s-3); border-bottom: var(--hair); }
.pt-step:first-child { border-top: var(--hair); }
.pt-step__marker span { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--c-ink); border-radius: 999px; font-family: var(--serif); font-size: var(--t-1); color: var(--c-ink); }
.pt-step__body { display: grid; gap: .6rem; align-content: start; }
.pt-step__body h2 { font-size: var(--t-3); }
.pt-step__body p { font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); max-width: 50ch; }

/* 14. Clients marquee ---------------------------------- */
.clients { padding-block: var(--s-4); overflow-x: clip; }
.clients__head { margin-bottom: 1.5rem; }
.clients__marquee { overflow: clip; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients__marquee ul { display: flex; gap: clamp(2rem, 1rem + 4vw, 5rem); width: max-content; min-width: 100%; animation: marquee 32s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .clients__marquee ul { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .clients__marquee li[aria-hidden] { display: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.clients__marquee li { font-family: var(--serif); font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); color: var(--c-muted); white-space: nowrap; letter-spacing: -.01em; }

/* 15. Journal ------------------------------------------ */
.journal-grid { display: grid; gap: clamp(1.5rem, .6rem + 3vw, 3rem); }
@media (min-width: 900px) { .journal-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.jr { display: grid; gap: 1rem; }
.jr__media { display: block; overflow: hidden; background: var(--c-surface-2); }
.jr__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease); }
.jr:hover .jr__media img { transform: scale(1.04); }
.jr__meta { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .04em; }
.jr__title { font-family: var(--serif); font-size: var(--t-2); color: var(--c-ink); }
.jr--feat .jr__title { font-size: var(--t-3); }
.jr__excerpt { font-family: var(--sans); font-size: var(--t-0); color: var(--c-ink-soft); max-width: 52ch; }
.journal-side { display: grid; gap: 1.75rem; align-content: start; }
.journal-side .jr { padding-bottom: 1.75rem; border-bottom: var(--hair); position: relative; }
.journal-side .jr:last-child { border-bottom: 0; padding-bottom: 0; }
.jr__go { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--c-line); border-radius: 999px; }
.jr__go svg { width: 15px; height: 15px; }
.journal-side .jr::after { content: ""; position: absolute; inset: 0; }

/* 16. End CTA + footer --------------------------------- */
.endcta { padding-block: var(--s-6); text-align: center; }
.endcta__inner { display: grid; gap: 1.5rem; justify-items: center; }
.endcta__title { font-size: var(--t-5); line-height: 1; }
.footer { background: var(--c-bg); color: var(--c-ink-soft); padding-block: var(--s-4) var(--s-3); border-top: var(--hair); }
.footer__inner { display: grid; gap: var(--s-3); }
.footer__brand { display: grid; gap: .9rem; }
.footer__brand .wordmark { color: var(--c-ink); }
.footer__brand p { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); max-width: 40ch; }
.footer__col { display: grid; gap: .5rem; align-content: start; }
.footer__col h3 { font-family: var(--sans); font-size: var(--t--1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .3rem; }
.footer__col a, .footer__col span { font-family: var(--sans); font-size: var(--t-0); color: var(--c-ink-soft); min-height: 34px; display: flex; align-items: center; }
.footer__col a:hover { color: var(--c-ink); }
@media (min-width: 800px) {
    .footer__inner { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
    .footer__col a, .footer__col span { min-height: 28px; }
}
.footer__bar { margin-top: var(--s-3); padding-top: 1.5rem; border-top: var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; font-family: var(--sans); font-size: var(--t--2); color: var(--c-muted); }
.footer__bar nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer__bar nav a { min-height: 34px; display: inline-flex; align-items: center; }
.footer__bar nav a:hover { color: var(--c-ink); }
.footer__social { display: flex; gap: .35rem; }
.footer__social a { width: 38px; height: 38px; display: inline-grid; place-items: center; border: var(--hair); border-radius: 999px; }
.footer__social svg { width: 17px; height: 17px; }

/* 17. Page heads -------------------------------------- */
.pagehead { padding-block: var(--s-5) var(--s-3); }
.pagehead--tight, .pagehead--service { padding-block: var(--s-4) var(--s-3); }
.pagehead__num { font-family: var(--sans); font-size: var(--t-1); color: var(--c-muted); letter-spacing: .1em; margin-bottom: .5rem; }
.pagehead__title { font-size: var(--t-5); line-height: 1; }
.pagehead__title--sm { font-size: var(--t-4); }
.pagehead__lead { margin-top: 1.5rem; font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); max-width: 52ch; }

/* 18. Projects index --------------------------------- */
.pj-filter { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: var(--s-3); }
.pj-filter__chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem;
    border: 1px solid var(--c-line); border-radius: 999px;
    font-family: var(--sans); font-size: var(--t--1); font-weight: 600; letter-spacing: .06em; color: var(--c-ink-soft);
    transition: background .25s, color .25s, border-color .25s;
}
.pj-filter__chip span { font-weight: 400; color: var(--c-muted); }
.pj-filter__chip.is-active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.pj-filter__chip.is-active span { color: color-mix(in srgb, var(--c-bg) 65%, transparent); }

.pj-index { display: grid; gap: 0; }
.pjrow { border-top: var(--hair); }
.pjrow:last-of-type { border-bottom: var(--hair); }
.pjrow__link { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.25rem; align-items: center; padding-block: 1.1rem; transition: padding-left .3s var(--ease); }
.pjrow:hover .pjrow__link { padding-left: .6rem; }
.pjrow__media { overflow: hidden; background: var(--c-surface-2); }
.pjrow__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.pjrow:hover .pjrow__media img { transform: scale(1.06); }
.pjrow__info { display: grid; gap: .3rem; min-width: 0; }
.pjrow__client { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .08em; text-transform: uppercase; }
.pjrow__title { font-family: var(--serif); font-size: var(--t-2); color: var(--c-ink); }
.pjrow__tags { display: flex; gap: .3rem 1rem; font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); flex-wrap: wrap; }
.pjrow__go { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--c-line); border-radius: 999px; }
.pjrow__go svg { width: 17px; height: 17px; }
.pjrow:hover .pjrow__go { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
@media (min-width: 720px) {
    .pjrow__link { grid-template-columns: 220px 1fr auto; gap: 2rem; padding-block: 1.5rem; }
    .pjrow__title { font-size: var(--t-3); }
}
.pj-empty { padding-block: var(--s-4); font-family: var(--sans); color: var(--c-muted); text-align: center; }

/* 19. Case study ------------------------------------- */
.case__hero { padding-top: var(--s-4); }
.case__title { font-size: var(--t-5); line-height: .98; margin-top: .75rem; }
.case__summary { margin-top: 1.5rem; font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); max-width: 52ch; }
.case__cover { margin-top: var(--s-3); overflow: hidden; }
.case__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding-block: var(--s-3); border-bottom: var(--hair); }
.case__meta > div { display: grid; gap: .2rem; }
.case__meta span { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .08em; text-transform: uppercase; }
.case__meta strong { font-family: var(--serif); font-weight: 400; font-size: var(--t-1); color: var(--c-ink); }
.case__meta-wide { grid-column: 1 / -1; }
@media (min-width: 760px) { .case__meta { grid-template-columns: repeat(4, 1fr); } .case__meta-wide { grid-column: auto; } }
.case__intro { padding-block: var(--s-3); font-family: var(--serif); font-size: var(--t-2); line-height: 1.4; color: var(--c-ink); max-width: 30ch; margin-inline: auto; text-align: center; }
.case__wide { margin-block: var(--s-3); }
.case__wide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; cursor: zoom-in; }
.case__chapter { padding-block: var(--s-4); display: grid; gap: 1.5rem; }
.case__chapter-label { font-family: var(--sans); font-size: var(--t--1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); display: flex; align-items: baseline; gap: .75rem; }
.case__chapter-label span { font-family: var(--serif); font-size: var(--t-1); color: var(--c-accent); }
.case__chapter-body { font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); max-width: 56ch; }
.case__chapter-body em { color: var(--c-ink); font-style: italic; }
@media (min-width: 900px) {
    .case__chapter { grid-template-columns: 12rem 1fr; gap: clamp(2rem, .5rem + 4vw, 5rem); align-items: start; }
    .case__chapter-label { flex-direction: column; gap: .5rem; position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.case__figure { margin-block: var(--s-3); }
.case__figure img { width: 100%; object-fit: cover; cursor: zoom-in; }
.case__thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-block: var(--s-3); }
@media (min-width: 760px) { .case__thumbs { grid-template-columns: repeat(3, 1fr); } }
.case__thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.case__results { padding-block: var(--s-5); margin-top: var(--s-4); }
.case__outcome { font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); max-width: 56ch; margin-block: 1rem var(--s-3); }
.case__result-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem 1rem; }
@media (min-width: 460px) { .case__result-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .case__result-grid { grid-template-columns: repeat(4, 1fr); } }
.case__result-grid strong { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem); color: var(--c-ink); line-height: 1.05; overflow-wrap: anywhere; }
.case__result-grid span { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .04em; margin-top: .4rem; display: block; }
.case__quote { padding-block: var(--s-5); text-align: center; display: grid; gap: 1.25rem; justify-items: center; }
.case__quote svg { width: 30px; height: 30px; color: var(--c-accent); }
.case__quote blockquote { font-family: var(--serif); font-size: var(--t-3); font-style: italic; line-height: 1.35; color: var(--c-ink); max-width: 22ch; }
.case__quote-by { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .04em; }
.case__next { position: relative; display: block; overflow: hidden; border-top: var(--hair); }
.case__next-inner { display: grid; gap: .5rem; padding-block: var(--s-5); position: relative; z-index: 1; }
.case__next-label { font-family: var(--sans); font-size: var(--t--1); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.case__next-title { font-family: var(--serif); font-size: var(--t-4); color: var(--c-ink); display: inline-flex; align-items: center; gap: .75rem; }
.case__next-title svg { width: 26px; height: 26px; transition: transform .3s var(--ease); }
.case__next:hover .case__next-title svg { transform: translateX(8px); }
.case__next-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s; filter: grayscale(1) brightness(.4); }
.case__next:hover .case__next-bg { opacity: .5; }

/* 20. Service detail / contact / prose / misc ---------- */
.svc-detail-list { display: grid; gap: 0; }
.svc-detail { display: grid; gap: 1.5rem; padding-block: var(--s-4); border-top: var(--hair); }
.svc-detail:last-child { border-bottom: var(--hair); }
.svc-detail__head { display: flex; align-items: center; gap: 1rem; }
.svc-detail__num { font-family: var(--serif); font-size: var(--t-3); color: var(--c-accent); }
.svc-detail__icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--c-line); border-radius: 999px; }
.svc-detail__icon svg { width: 21px; height: 21px; }
.svc-detail__body { display: grid; gap: 1rem; }
.svc-detail__title { font-size: var(--t-3); }
.svc-detail__summary { font-family: var(--sans); font-size: var(--t-1); color: var(--c-ink-soft); max-width: 52ch; }
.svc-detail__deliverables { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.svc-detail__deliverables li, .service-body__aside li { display: flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: var(--t--1); color: var(--c-ink-soft); }
.svc-detail__deliverables svg, .service-body__aside svg { width: 15px; height: 15px; color: var(--c-accent); flex: none; }
@media (min-width: 800px) { .svc-detail { grid-template-columns: 8rem 1fr; gap: clamp(2rem, .5rem + 4vw, 5rem); } .svc-detail__head { flex-direction: column; align-items: flex-start; } }

.service-body { display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .service-body { grid-template-columns: 1fr 18rem; gap: clamp(2rem, .5rem + 4vw, 4rem); align-items: start; } }
.service-body__aside { border: var(--hair); padding: 1.5rem; display: grid; gap: 1rem; align-content: start; }
.service-body__aside h2 { font-family: var(--sans); font-size: var(--t--1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.service-body__aside ul { display: grid; gap: .6rem; }

.prose { color: var(--c-ink-soft); font-family: var(--sans); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-family: var(--serif); font-size: var(--t-2); color: var(--c-ink); margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.15rem; display: grid; gap: .4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: color-mix(in srgb, var(--c-ink) 8%, transparent); padding: .1em .35em; border-radius: 3px; }
.prose blockquote { border-left: 2px solid var(--c-accent); padding-left: 1rem; font-family: var(--serif); font-style: italic; color: var(--c-ink); }

.contact-layout { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 300px; gap: clamp(2rem, .5rem + 4vw, 4.5rem); align-items: start; } }
.form { display: grid; gap: 1.25rem; max-width: 42rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field > span { font-family: var(--sans); font-size: var(--t--1); font-weight: 600; letter-spacing: .04em; color: var(--c-ink); }
.field > span small { font-weight: 400; color: var(--c-muted); }
.field input, .field textarea, .field .select select {
    width: 100%; min-height: 50px; padding: .8rem 1rem; background: transparent;
    border: 1px solid var(--c-line); color: var(--c-ink); font-family: var(--sans); font-size: var(--t-0); border-radius: 4px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-ink); }
.field--error input, .field--error textarea { border-color: var(--c-error); }
.field em { color: var(--c-error-ink); font-style: normal; font-family: var(--sans); font-size: var(--t--1); }
.select { position: relative; display: block; }
.select select { -webkit-appearance: none; appearance: none; padding-right: 2.6rem; }
.select svg { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--c-muted); }
.checkline { display: flex; align-items: flex-start; gap: .7rem; font-family: var(--sans); font-size: var(--t--1); color: var(--c-ink-soft); }
.checkline input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--c-accent); flex: none; }
.checkline a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.form-alert { padding: .85rem 1.1rem; border: 1px solid var(--c-error); color: var(--c-error-ink); font-family: var(--sans); font-size: var(--t--1); border-radius: 4px; }
.formcard { padding: clamp(1.5rem, .8rem + 3vw, 2.5rem); border: var(--hair); display: grid; gap: .7rem; max-width: 42rem; }
.formcard--ok svg { width: 32px; height: 32px; color: var(--c-success); }
.formcard h2 { font-size: var(--t-2); }
.formcard a { color: var(--c-accent); text-decoration: underline; }
.contact-aside { display: grid; gap: 1.5rem; align-content: start; }
.contact-aside__item { display: flex; gap: .85rem; font-family: var(--sans); font-size: var(--t--1); }
.contact-aside__item svg { width: 20px; height: 20px; flex: none; color: var(--c-muted); margin-top: .1rem; }
.contact-aside__item b { display: block; color: var(--c-ink); font-weight: 600; margin-bottom: .15rem; }
.contact-aside__item a { display: block; min-height: 30px; color: var(--c-ink-soft); }
.contact-aside__item a:hover { color: var(--c-ink); }
.contact-aside__item span { display: block; color: var(--c-muted); }

.blog-feat { display: grid; gap: 1.5rem; margin-bottom: var(--s-4); }
@media (min-width: 860px) { .blog-feat { grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(1.5rem, .5rem + 3vw, 3.5rem); } }
.blog-feat__media { overflow: hidden; background: var(--c-surface-2); }
.blog-feat__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease); }
.blog-feat:hover .blog-feat__media img { transform: scale(1.03); }
.blog-feat__body { display: grid; gap: 1rem; }
.blog-feat__meta, .blogcard__meta { font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); letter-spacing: .04em; }
.blog-feat__title { font-family: var(--serif); font-size: var(--t-3); color: var(--c-ink); }
.blog-feat__excerpt { font-family: var(--sans); font-size: var(--t-0); color: var(--c-ink-soft); max-width: 50ch; }
.blog-grid { display: grid; gap: clamp(1.5rem, .6rem + 3vw, 2.75rem) 1.5rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blogcard { display: grid; gap: .75rem; }
.blogcard__media { overflow: hidden; background: var(--c-surface-2); }
.blogcard__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.blogcard:hover .blogcard__media img { transform: scale(1.04); }
.blogcard__title { font-family: var(--serif); font-size: var(--t-1); color: var(--c-ink); }
.blogcard__excerpt { font-family: var(--sans); font-size: var(--t--1); color: var(--c-ink-soft); }

.post__head { padding-block: var(--s-4) var(--s-3); }
.post__title { font-size: var(--t-4); line-height: 1.02; margin-top: .5rem; max-width: 22ch; }
.post__meta { margin-top: 1rem; font-family: var(--sans); font-size: var(--t--1); color: var(--c-muted); }
.post__cover { margin-bottom: var(--s-3); overflow: hidden; }
.post__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post__body { max-width: 40rem; margin-inline: auto; font-size: var(--t-1); }
.post__foot { max-width: 40rem; margin: var(--s-3) auto 0; padding-top: 1.5rem; border-top: var(--hair); }

.legalpage { max-width: 44rem; }
.legalpage h2 { font-size: var(--t-2); margin-top: 2rem; }

.errorpage { padding-block: var(--s-6); text-align: center; }
.errorpage__code { font-family: var(--serif); font-size: clamp(4rem, 2rem + 12vw, 9rem); line-height: 1; color: var(--c-line); }
.errorpage__title { font-size: var(--t-3); margin-top: .5rem; }
.errorpage__msg { color: var(--c-muted); margin: .75rem auto 0; max-width: 34rem; font-family: var(--sans); }
.errorpage__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.errorpage__debug { margin-top: 2rem; text-align: left; font-size: 12px; background: var(--c-bg-2); padding: 1rem; overflow-x: auto; }

.cmspage__body { padding-bottom: var(--s-6); }
.block { padding-block: var(--s-3); }
.block__headline { font-family: var(--serif); font-size: var(--t-4); color: var(--c-ink); }
.block__lead { color: var(--c-muted); margin-top: .75rem; max-width: 46ch; }
.block__media { margin-top: 1.5rem; }
.block__actions { margin-top: 1.5rem; }

/* 21. Reveal + to-top + lightbox ---------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

.to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 55; width: 46px; height: 46px; display: grid; place-items: center; background: var(--c-ink); color: var(--c-bg); border-radius: 999px; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.to-top.is-in { opacity: 1; transform: none; }
.to-top svg { width: 16px; height: 16px; }

.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(6,6,5,.95); display: none; place-items: center; padding: clamp(1rem, 5vw, 4rem); }
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; }
.lightbox__close svg { width: 24px; height: 24px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; color: #fff; }
.lightbox__nav--prev { left: .5rem; } .lightbox__nav--next { right: .5rem; }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__count { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-family: var(--sans); font-size: var(--t--1); }

/* 22. Print --------------------------------------- */
@media print {
    .nav, .mobilenav, .scrim, .to-top, .lightbox, .endcta, .footer, .clients { display: none !important; }
    body { color: #000; background: #fff; }
}