/* =========================================================
   Studio Loci — landing stylesheet
   Achromatic editorial system. Photography carries all colour.
   ========================================================= */

:root {
    --paper:  #FFFFFF;
    --ink:    #000000;
    --muted:  #6B6B6B;
    --rule:   #DCDCDC;
    --wash:   #F4F4F4;
    --onDark: #FFFFFF;
    --onDarkMuted: rgba(255,255,255,.68);

    --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* type scale */
    --t-meta:  0.8125rem;
    --t-sm:    0.9375rem;
    --t-body:  1.0625rem;
    --t-lead:  clamp(1.125rem, 1.6vw, 1.4375rem);
    --t-head:  clamp(1.625rem, 3.2vw, 2.625rem);
    --t-title: clamp(2rem, 5.2vw, 4.25rem);
    --t-mega:  clamp(2.375rem, 7vw, 6rem);

    /* spacing */
    --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2.5rem;
    --s5: 4rem;    --s6: 6rem;   --s7: 9rem;

    --gutter: clamp(1.25rem, 5vw, 5rem);
    --maxw: 1560px;

    --header-h: 76px;
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

figure, blockquote, dl, dd { margin: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.on-dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
    outline-color: var(--onDark);
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: var(--onDark);
    padding: var(--s2) var(--s3);
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */

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

.section { padding-block: clamp(3.5rem, 8vw, var(--s7)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--s6)); }
.section--wash { background: var(--wash); }
.section--ink { background: var(--ink); color: var(--onDark); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Section headings sit left, with the eye-line established by a wide right margin. */
.section-head { margin-bottom: clamp(2rem, 4vw, var(--s5)); }
/* max-width lives on the heading so `ch` resolves against its own size */
.section-head h2 { font-size: var(--t-head); max-width: 18ch; }

/* ---------- header ---------- */

.site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    height: var(--header-h);
    display: flex; align-items: center;
    color: var(--ink);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

/* Over the hero the bar is transparent until the page scrolls. */
.site-header--over {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--onDark);
}
.site-header--over.is-scrolled,
.site-header--over.is-navopen {
    background: var(--paper);
    border-bottom-color: var(--rule);
    color: var(--ink);
}

.site-header .shell {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); width: 100%;
}

.wordmark { display: block; line-height: 0; }
.wordmark img { height: 28px; width: auto; }

/* the artwork is white-on-transparent, so a dark variant carries light grounds */
.wordmark .wordmark-light { display: none; }
.site-header--over:not(.is-scrolled):not(.is-navopen) .wordmark .wordmark-light { display: block; }
.site-header--over:not(.is-scrolled):not(.is-navopen) .wordmark .wordmark-ink { display: none; }

@media (max-width: 480px) { .wordmark img { height: 22px; } }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); }

.nav a.nav-link {
    font-size: var(--t-sm);
    font-weight: 500;
    padding-block: .35rem;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
}
.nav a.nav-link:hover,
.nav a.nav-link.is-active { border-bottom-color: currentColor; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: var(--t-sm); font-weight: 500;
    padding: .72rem 1.4rem;
    border: 1px solid var(--ink);
    background: var(--ink); color: var(--onDark);
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: transparent; color: var(--ink); }

.site-header--over:not(.is-scrolled):not(.is-navopen) .btn {
    border-color: var(--onDark); background: transparent; color: var(--onDark);
}
.site-header--over:not(.is-scrolled):not(.is-navopen) .btn:hover {
    background: var(--onDark); color: var(--ink);
}

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--onDark); }

.btn--onDark { border-color: var(--onDark); background: var(--onDark); color: var(--ink); }
.btn--onDark:hover { background: transparent; color: var(--onDark); }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: none; border: 0; color: inherit; cursor: pointer;
    margin-right: -10px;
}
.nav-toggle span {
    display: block; width: 22px; height: 1px; background: currentColor;
    position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 1px;
    background: currentColor;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }

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

.hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    background: var(--ink);
    overflow: hidden;
}
@supports (height: 100svh) { .hero { height: 100svh; } }

.hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .9s ease;
    pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

.hero-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Scrim only where type sits, so the photograph keeps its tonal range. */
.hero-slide::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,0) 42%),
        linear-gradient(to top,    rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 38%, rgba(0,0,0,0) 68%),
        linear-gradient(to right,  rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 46%, rgba(0,0,0,0) 64%);
}

.hero-body {
    position: absolute; inset: auto 0 0 0; z-index: 3;
    color: var(--onDark);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hero-caption { max-width: min(52rem, 64%); }

.hero-caption h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    font-weight: 600;
    font-variation-settings: "wdth" 108;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    max-width: 15ch;
}

.hero-caption p {
    margin: var(--s2) 0 0;
    max-width: 44ch;
    font-size: var(--t-lead);
    line-height: 1.45;
    color: var(--onDarkMuted);
}

.hero-caption .link-underline { margin-top: var(--s3); display: inline-flex; }

/* one caption per slide, cross-faded with the image */
.hero-body .hero-caption { display: none; }
.hero-body .hero-caption.is-active { display: block; animation: heroIn .7s ease both; }

@keyframes heroIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hero-controls {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s3);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-ticks { display: flex; gap: 6px; flex: 1 1 auto; max-width: 520px; }

.hero-tick {
    flex: 1 1 0; height: 22px;
    padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; align-items: flex-end;
}
.hero-tick::after {
    content: ""; display: block; width: 100%; height: 2px;
    background: rgba(255,255,255,.34);
}
.hero-tick.is-active::after { background: var(--onDark); }

.hero-count {
    flex: 0 0 auto;
    font-size: var(--t-meta);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--onDarkMuted);
    font-variant-numeric: tabular-nums;
}
.hero-count b { color: var(--onDark); font-weight: 600; }

.hero-arrows { display: flex; gap: .5rem; flex: 0 0 auto; }
.hero-arrow {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; color: var(--onDark);
    border: 1px solid rgba(255,255,255,.4);
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.hero-arrow:hover { background: var(--onDark); color: var(--ink); }
.hero-arrow svg { width: 16px; height: 16px; }

/* ---------- statement ---------- */

.statement { display: grid; gap: clamp(1.75rem, 4vw, var(--s5)); }
@media (min-width: 900px) {
    .statement { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.statement h2 {
    font-size: var(--t-mega);
    font-weight: 600;
    font-variation-settings: "wdth" 104;
    max-width: 14ch;
}
.statement-body { max-width: 62ch; }
.statement-body p { font-size: var(--t-lead); line-height: 1.55; }

/* ---------- project list ---------- */

.project-list { display: grid; gap: clamp(3rem, 7vw, 7rem); }

.project-entry { position: relative; }

.project-figure {
    margin: 0 0 var(--s3);
    background: var(--wash);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.project-figure img { width: 100%; height: 100%; object-fit: cover; }

.project-entry h3 {
    font-size: var(--t-title);
    font-weight: 600;
    font-variation-settings: "wdth" 106;
    text-transform: uppercase;
    max-width: 20ch;
}

.project-entry h3 a { display: inline; background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .4s ease; }
.project-entry:hover h3 a,
.project-entry h3 a:focus-visible { background-size: 100% 1px; }

/* Place first: this practice is named for it. */
.project-meta {
    display: flex; flex-wrap: wrap; gap: .35rem 1.75rem;
    margin-top: var(--s2);
    font-size: var(--t-sm);
    color: var(--muted);
}
.project-meta .place { color: var(--ink); font-weight: 500; }

.project-entry .link-underline { margin-top: var(--s3); }

.link-underline {
    display: inline-block;
    font-size: var(--t-sm); font-weight: 500;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
}

/* stretch the whole entry as a click target without nesting links */
.stretch::after { content: ""; position: absolute; inset: 0; }

/* ---------- filter bar ---------- */

.filter-bar {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--rule);
    margin-bottom: clamp(2.5rem, 5vw, var(--s5));
}
.filter-bar button {
    font: inherit; font-size: var(--t-sm); font-weight: 500;
    background: none; border: 0; padding: .25rem 0; cursor: pointer;
    color: var(--muted);
    border-bottom: 1px solid transparent;
}
.filter-bar button:hover { color: var(--ink); }
.filter-bar button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.is-filtered-out { display: none; }

/* ---------- practice list ---------- */

.practice { border-top: 1px solid var(--rule); }
.practice-row {
    display: grid; gap: .35rem var(--s4);
    padding-block: clamp(1.25rem, 2.6vw, 2rem);
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 800px) {
    .practice-row { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: baseline; }
}
.practice-row h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; }
.practice-row p { color: var(--muted); max-width: 58ch; }

/* ---------- figures ---------- */

.figures {
    display: grid; gap: var(--s4) var(--s3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 780px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.figure-value {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 500;
    font-variation-settings: "wdth" 100;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.figure-label { margin-top: .6rem; font-size: var(--t-sm); color: var(--muted); }

/* ---------- testimonials ---------- */

.quotes { display: grid; gap: clamp(2.5rem, 5vw, var(--s5)); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quote blockquote {
    margin: 0;
    font-size: clamp(1.1875rem, 2vw, 1.5rem);
    line-height: 1.45;
    font-weight: 400;
    max-width: 40ch;
}
.quote figcaption { margin-top: var(--s3); font-size: var(--t-sm); }
.quote .who { font-weight: 500; }
.quote .role { color: var(--muted); }

/* ---------- contact ---------- */

.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, var(--s5)); }
@media (min-width: 940px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.contact-direct { display: grid; gap: var(--s3); align-content: start; }
.contact-direct a { font-size: var(--t-lead); font-weight: 500; border-bottom: 1px solid var(--rule); padding-bottom: .35rem; display: inline-block; }
.contact-direct a:hover { border-bottom-color: currentColor; }
.contact-direct .label { display: block; font-size: var(--t-meta); color: var(--muted); margin-bottom: .3rem; }

.form-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }

.field label { display: block; font-size: var(--t-meta); color: var(--muted); margin-bottom: .4rem; }
.field input, .field select, .field textarea {
    width: 100%;
    font: inherit; font-size: var(--t-sm);
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule);
    padding: .8rem .9rem;
    border-radius: 0;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink);
}
.section--wash .field input,
.section--wash .field select,
.section--wash .field textarea { background: var(--paper); }

.form-note { font-size: var(--t-meta); color: var(--muted); }

/* ---------- interior page header ---------- */

.page-head { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); }
.page-head h1 {
    font-size: var(--t-mega);
    font-variation-settings: "wdth" 106;
    max-width: 16ch;
}
.page-head .page-intro { margin-top: var(--s3); max-width: 56ch; font-size: var(--t-lead); color: var(--muted); }

/* a project name is set the same way wherever it appears */
.page-head--project h1 { text-transform: uppercase; font-variation-settings: "wdth" 106; }

.crumbs { font-size: var(--t-meta); color: var(--muted); margin-bottom: var(--s3); }
.crumbs a:hover { color: var(--ink); border-bottom: 1px solid currentColor; }

/* ---------- project detail ---------- */

.lead-figure { margin: clamp(2rem, 5vw, var(--s5)) 0 0; aspect-ratio: 16 / 9; background: var(--wash); }
.lead-figure img { width: 100%; height: 100%; object-fit: cover; }

.detail-grid { display: grid; gap: clamp(2rem, 5vw, var(--s5)); }
@media (min-width: 900px) {
    .detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.detail-body p { font-size: var(--t-lead); line-height: 1.6; max-width: 62ch; }

.spec { border-top: 1px solid var(--ink); }
.spec div {
    display: flex; justify-content: space-between; gap: var(--s3);
    padding-block: .85rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
}
.spec dt { color: var(--muted); margin: 0; }
.spec dd { margin: 0; font-weight: 500; text-align: right; }

.gallery { column-count: 1; column-gap: var(--s3); }
@media (min-width: 760px) { .gallery { column-count: 2; } }
.gallery figure {
    margin: 0 0 var(--s3);
    background: var(--wash);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.gallery img { width: 100%; height: auto; }

/* ---------- studio ---------- */

.prose { max-width: 68ch; }
.prose p { font-size: var(--t-lead); line-height: 1.6; }

.founders { display: grid; gap: clamp(2rem, 4vw, var(--s5)); }
@media (min-width: 860px) { .founders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.founder h3 { font-size: 1.25rem; font-weight: 600; }
.founder .role { font-size: var(--t-meta); color: var(--muted); margin: .4rem 0 var(--s2); }
.founder p { font-size: var(--t-sm); color: var(--muted); }
.section--ink .founder p,
.section--ink .founder .role { color: var(--onDarkMuted); }

.wide-figure { margin: 0; background: var(--wash); }
.wide-figure img { width: 100%; }

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

.site-footer { background: var(--ink); color: var(--onDark); padding-block: clamp(3rem, 6vw, var(--s6)) var(--s4); }
.footer-grid { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.site-footer h2 { font-size: var(--t-meta); font-weight: 600; color: var(--onDarkMuted); margin-bottom: var(--s2); letter-spacing: 0; }
.site-footer a:hover { border-bottom: 1px solid currentColor; }
.site-footer .stack { display: grid; gap: .55rem; font-size: var(--t-sm); }
.site-footer .stack a, .site-footer .stack span { color: var(--onDarkMuted); }
.site-footer .stack a:hover { color: var(--onDark); }

.footer-mark { font-size: 1.0625rem; font-weight: 600; text-transform: uppercase; font-variation-settings: "wdth" 112; }
.footer-mark img { height: 28px; width: auto; margin-bottom: var(--s2); }

.social { display: flex; gap: .5rem; }
.social a {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.28);
    transition: background .25s ease, color .25s ease;
}
.social a:hover { background: var(--onDark); color: var(--ink); border-color: var(--onDark); }
.social svg { width: 17px; height: 17px; }

.colophon {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
    margin-top: clamp(2.5rem, 5vw, var(--s5));
    padding-top: var(--s3);
    border-top: 1px solid rgba(255,255,255,.16);
    font-size: var(--t-meta);
    color: var(--onDarkMuted);
}

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

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    .nav {
        position: fixed; inset: var(--header-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--paper); color: var(--ink);
        border-bottom: 1px solid var(--rule);
        padding: var(--s2) var(--gutter) var(--s4);
        display: none;
    }
    .nav.is-open { display: flex; }
    .nav a.nav-link { padding-block: .9rem; border-bottom: 1px solid var(--rule); font-size: 1.125rem; }
    .nav a.nav-link:hover, .nav a.nav-link.is-active { border-bottom-color: var(--rule); }
    .nav .btn { margin-top: var(--s3); }
    .hero-arrows { display: none; }
    .hero-caption { max-width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .spec dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .hero-slide { transition: none; }
}

/* =========================================================
   Projects index — asymmetric rhythm rather than a uniform stack
   ========================================================= */

.bleed { width: 100%; }
.bleed img { width: 100%; }

.project-lead { display: block; position: relative; }
.project-lead .bleed { aspect-ratio: 16 / 7; background: var(--wash); overflow: hidden; }
.project-lead .bleed img { height: 100%; object-fit: cover; }
.project-lead .project-lead-body {
    display: grid; gap: var(--s2) var(--s4);
    padding-top: var(--s3);
}
@media (min-width: 900px) {
    .project-lead .project-lead-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
}
.project-lead h3 {
    font-size: var(--t-title);
    font-weight: 600;
    font-variation-settings: "wdth" 106;
    text-transform: uppercase;
    max-width: 18ch;
}

/* Year leads each entry: the index is ordered by completion, so it is the key. */
.entry-year {
    font-size: var(--t-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    padding-bottom: .6rem;
    margin-bottom: var(--s2);
    border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between; gap: var(--s2);
}
.entry-year .cat { color: var(--muted); }

.project-index { display: grid; gap: clamp(3rem, 7vw, 6.5rem); }
@media (min-width: 900px) {
    .project-index { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
    .project-index > .project-entry { grid-column: 1 / span 7; }
    .project-index > .project-entry:nth-child(even) { grid-column: 6 / span 7; }
}

.count-note { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s2); }

/* =========================================================
   Studio — process and founders
   ========================================================= */

.process { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.process-step {
    display: grid; gap: .35rem var(--s4);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 820px) {
    .process-step { grid-template-columns: 4.5rem minmax(0, 14rem) minmax(0, 1fr); align-items: baseline; }
}
.process-step .step-no {
    font-size: var(--t-sm); font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.process-step h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; }
.process-step p { color: var(--muted); max-width: 56ch; }

.founders { display: grid; gap: clamp(2rem, 4vw, var(--s5)); }
@media (min-width: 860px) { .founders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.founder { border-top: 1px solid rgba(255,255,255,.24); padding-top: var(--s3); }
.founder h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; }
.founder .role { font-size: var(--t-meta); color: var(--onDarkMuted); margin: .5rem 0 var(--s2); }
.founder p { font-size: var(--t-sm); color: var(--onDarkMuted); }

.pullquote {
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.02em;
    max-width: 24ch;
}
.pullquote-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--muted); }

/* The newest project leads the index at full width; the rest stagger beneath. */
@media (min-width: 900px) {
    .project-index > .project-entry:first-child { grid-column: 1 / -1; }
    .project-index > .project-entry:first-child .project-figure { aspect-ratio: 16 / 7; }
    .project-index > .project-entry:first-child h3 { font-size: var(--t-mega); max-width: 22ch; }
    .project-index > .project-entry:nth-child(even) { grid-column: 1 / span 7; }
    .project-index > .project-entry:nth-child(odd):not(:first-child) { grid-column: 6 / span 7; }
}

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

.hero-actions {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-top: var(--s3);
}

.btn-icon { width: 18px; height: 18px; margin-right: .55rem; flex: 0 0 auto; }

.btn--onDarkGhost {
    background: transparent;
    color: var(--onDark);
    border-color: rgba(255,255,255,.55);
}
.btn--onDarkGhost:hover { background: var(--onDark); color: var(--ink); border-color: var(--onDark); }

@media (max-width: 480px) {
    .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- category groups ---------- */

.category-group + .category-group { margin-top: clamp(3.5rem, 8vw, 7rem); }

.category-heading {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 600;
    padding-bottom: var(--s2);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--ink);
}
.category-heading span { font-size: var(--t-sm); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

.category-group.is-filtered-out { display: none; }