/* ═══════════════════════════════════════════════════════════════════
   CASTILLO ARQUITECTOS — main stylesheet
   Restrained. Quiet. Confident in a small voice.
   ═══════════════════════════════════════════════════════════════════ */

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

:root {
    --c-navy: #0C2735;
    --c-gold: #A47F54;
    --c-gold-light: #c9a075;
    --c-light-blue: #D3E0EA;
    --c-warm-white: #F5F0EB;
    --c-warm-white-alt: #EFE8DF;
    --c-cool-gray: #D9D9D6;

    --c-text: #0C2735;
    --c-text-muted: #5e6b73;
    --c-text-soft: #7a8189;
    --c-line-light: #e6dfd5;
    /* Tag beige: the brand gold deepened enough that white type on it clears
       WCAG AA (4.7:1). The gold itself, #A47F54, only reaches 3.7:1. */
    --c-tag-bg: #8F6E47;
    --c-line-cool: rgba(12, 39, 53, 0.1);

    --c-subsection-cream: rgba(250, 247, 243, 0.9);

    /* Community & Residential listing pages — flat shell (no gradient) */
    --c-page-category-bg: #fffcfc;

    /*
     * Footer shell: diagonal multipoint navy (seed #0C2735) + whisper of cool teal light.
     */
    --footer-bg-shine: radial-gradient(
        ellipse 130% 90% at 88% -6%,
        rgba(52, 98, 112, 0.22) 0%,
        rgba(26, 64, 80, 0.08) 42%,
        transparent 62%
    );
    --footer-bg-gradient: linear-gradient(45deg, #06141b 0%, #1b3a50 100%);

    --f-display: 'Merriweather', 'Georgia', serif;
    --f-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    --nav-h: 68px;
    --max-w: 1280px;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-text);
    background: var(--c-warm-white);
    overflow-x: hidden;
}

body.page-category {
    background: var(--c-page-category-bg);
}

img { display: block; max-width: 100%; height: auto; }
video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--c-gold); color: #fff; }

/* ─────────── Type helpers ─────────── */
.display {
    font-family: var(--f-display);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.005em;
}

.display em { font-style: italic; font-weight: 300; color: var(--c-gold); }

.eyebrow {
    font-family: var(--f-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-gold);
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.eyebrow--light { color: var(--c-gold-light); }

/* ─────────── Layout ─────────── */
.wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 2.5rem;
}

.wrap--narrow { max-width: 960px; }

.section { padding: 5rem 0; }
.section--tight { padding: 3.5rem 0; }
.section--large { padding: 7rem 0; }

/* Extra air after full-viewport hero (home) */
.section.section--xlarge {
    padding-top: clamp(6.5rem, 12vw, 10rem);
    padding-bottom: clamp(5rem, 8vw, 7.5rem);
}

.section--white  { background: #f7f4f0; }
.section--warm   { background: var(--c-warm-white); }
.section--alt    { background: var(--c-warm-white-alt); }
.section--blue   { background: var(--c-navy); }
.section--navy   { background: var(--c-navy); color: var(--c-warm-white); }

/* ─────────── Buttons (small, restrained) ─────────── */
@keyframes btn-sheen {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(130%);  }
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--f-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0.7rem 1.5rem;
    border: 1px solid currentColor;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 20%,
        rgba(255, 255, 255, 0.0) 35%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.0) 65%,
        transparent 80%,
        transparent 100%
    );
    transform: translateX(-130%);
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

.btn:hover::before {
    animation: btn-sheen 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.btn::after {
    content: '→';
    font-size: 11px;
    transition: transform 0.4s ease;
    letter-spacing: 0;
    line-height: 1;
    position: relative;
    z-index: 4;
}

.btn:hover::after { transform: translateX(3px); }
.btn--no-arrow::after { display: none; }

.btn--light  {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    transition: background 1.2s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.8s ease;
}
.btn--light:hover { background: var(--c-gold); color: #fff; border-color: var(--c-gold); text-shadow: none; box-shadow: 0 0 20px 6px rgba(164, 127, 84, 0.25); }

.btn--gold   { color: #fff; background: var(--c-gold); border-color: var(--c-gold); transition: box-shadow 0.8s ease; }
.btn--gold:hover { background: var(--c-gold); color: #fff; border-color: var(--c-gold); box-shadow: 0 0 20px 6px rgba(164, 127, 84, 0.25); }

.btn--ghost  { color: var(--c-navy); border-color: var(--c-cool-gray); background: transparent; }
.btn--ghost:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }

.arrow-link {
    font-family: var(--f-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-gold);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}
.arrow-link:hover { gap: 0.85rem; }

/* Scope tags on the Community & Master Planning listing */
.tag-row {
    list-style: none;
    margin: 0.75rem 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag {
    background: var(--c-tag-bg);
    color: #fff;
    font-family: var(--f-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.42rem 0.6rem 0.38rem;
    border-radius: 2px;
    white-space: nowrap;
}
.arrow-link::after { content: '→'; font-size: 11px; }

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 2.5rem;
    transition: background 0.45s ease, padding 0.45s ease, box-shadow 0.45s ease,
                opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    background: transparent;
}

/* Home page: nav rides on top of the hero, then scrolls away with the page */
.nav.nav--hero { position: absolute; }

.nav--scrolled {
    background: rgba(245, 240, 235, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.75rem 2.5rem;
}

/* Homepage: keep hero nav transparent at all times */
.nav--hero.nav--scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* For solid pages — soft warm bg */
.nav--solid {
    background: rgba(245, 240, 235, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Contact: bar in document flow (not fixed / pinned to viewport) */
.nav.nav--static {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

.nav--static ~ .page-header {
    padding-top: 3.5rem;
}

/* Who We Are: transparent top header */
.nav--who {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.nav__logo img {
    height: 22px;
    width: auto;
    transition: opacity 0.3s ease, filter 0.45s ease;
}

/* On hero (image bg), keep logo white. Otherwise navy. */
.nav--hero:not(.nav--scrolled) .nav__logo img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.nav--hero.nav--scrolled .nav__logo img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Light bar: white logo asset must read as dark (white-on-warm-white is illegible) */
.nav--scrolled .nav__logo img,
.nav--solid .nav__logo img {
    filter: brightness(0);
    opacity: 0.92;
}

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

.nav__links a {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-text);
    position: relative;
    padding: 0.4rem 0;
    transition: color 0.3s ease;
}

/* On hero photo/video, links are light */
.nav--hero:not(.nav--scrolled) .nav__links a {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.nav--hero.nav--scrolled .nav__links a {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.nav__links a:hover, .nav__links a.is-active { color: var(--c-gold); }
.nav--hero:not(.nav--scrolled) .nav__links a:hover,
.nav--hero:not(.nav--scrolled) .nav__links a.is-active { color: var(--c-gold-light); }

.nav__lang {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text);
}

.nav--hero:not(.nav--scrolled) .nav__lang {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav--hero.nav--scrolled .nav__lang {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav__lang-btn {
    background: none;
    border: none;
    padding: 0.3rem 0;
    color: inherit;
    transition: color 0.3s ease;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.nav__lang-btn:hover { color: var(--c-gold); }
.nav__lang-btn--active { color: var(--c-gold); }
.nav__lang-divider { opacity: 0.4; }

.nav__mobile-toggle { display: none; background: none; border: none; padding: 0.5rem; }
.nav__mobile-toggle span { display: block; width: 20px; height: 1px; background: var(--c-text); margin: 5px 0; transition: all 0.3s ease; }
.nav--hero:not(.nav--scrolled) .nav__mobile-toggle span { background: #fff; }
.nav--hero.nav--scrolled .nav__mobile-toggle span { background: #fff; }

.mobile-nav { display: none; position: fixed; inset: 0; z-index: 1100; background: var(--c-navy); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.mobile-nav.is-open { display: flex; }
.mobile-nav a { font-family: var(--f-display); font-size: 1.4rem; font-weight: 300; color: #fff; }
.mobile-nav a:hover { color: var(--c-gold); }
.mobile-nav__close { position: absolute; top: 1.4rem; right: 1.6rem; background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; }

/* ═══════════════════════════════════════════
   HERO — image only, text-shadow for contrast
   ═══════════════════════════════════════════ */
.hero {
    position: relative;
    z-index: 1;
    height: 76vh;
    min-height: 560px;
    max-height: 780px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--c-warm-white);
}

/* Home: full viewport — headline block top-left with CTA under sub */
.hero--home {
    background: #fff;
    height: auto;
    min-height: max(100vh, 640px);
    min-height: max(100svh, 640px);
    max-height: none;
    align-items: stretch;
    justify-content: stretch;
    overflow: visible;
}

.hero__home-shell {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    isolation: isolate;
    overflow: visible;
}

/* Allow headline block / CTA to receive clicks */
.hero__home-top,
.hero--home .hero__actions {
    pointer-events: auto;
}

.hero__home-top {
    position: absolute;
    top: auto;
    bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
    left: 1.5rem;
    right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: min(28.8rem, 86vw);
    overflow: visible;
}

.hero__home-top .hero__title {
    position: static;
    margin: 0;
}

.hero__home-top .hero__actions {
    position: static;
}

.hero--home .hero__bg {
    z-index: 0;
}

.hero--home .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 145% 100% at 8% 100%, rgba(3, 16, 24, 0.12) 0%, transparent 58%),
        linear-gradient(
            162deg,
            rgba(12, 39, 53, 0.10) 0%,
            rgba(12, 39, 53, 0.02) 50%,
            rgba(12, 39, 53, 0.10) 100%
        );
}

.hero--home .hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center calc(40% - 25px);
    z-index: 0;
}

/* Paper ground under the hero footage. All three hero clips open on blank
   paper, so this matches frame one and there is nothing to see through while
   the video decodes. Cheaper than a poster image — no extra request. */
.hero__bg:has(.hero__video) {
    background-color: #f1ede8;
}

.hero__video,
.hero__still {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 0;
    /* Never let the clip take a tap. Anything the visitor aims at the hero is
       meant for the copy or the CTA, not the footage. */
    pointer-events: none;
}

.hero__video {
    transition: opacity 1.2s ease;
}

/* The still holds the clip's own last frame, so handing over to it at the end
   is invisible. It is also the resting state when playback is refused
   outright, which keeps the hero looking deliberate rather than blank. */
.hero__still {
    transition: opacity 0.4s ease;
}

/* Handing over from a clip that ran to the end: the still is that clip's final
   frame, so it goes up instantly. Fading here would only show the ground
   between the two layers. The fade is kept for a refused clip, which has no
   frame to match. */
.hero__still.is-instant {
    transition: none;
}

.hero__video.is-ready,
.hero__still.is-shown {
    opacity: 1;
}

/* Once the still is up the video must go: an ended, paused <video> is exactly
   what iOS paints its play button onto, and opacity alone would leave that
   button hanging over the hero. */
.hero__video.is-retired {
    display: none;
}

/* Ken burns — only when multiple slides are used */
.hero--home .hero__slide {
    object-position: center calc(40% - 25px);
    transition: opacity 1.6s ease-in-out;
}

.hero--home .hero__slide:not(.is-active) {
    animation: none !important;
    transform: scale(1);
}

.hero--home .hero__slide.is-active {
    animation: heroKenBurns 28s ease-out forwards;
}

@keyframes heroKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }

.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}

.hero__slide.is-active { opacity: 1; z-index: 1; }

.hero__content {
    position: relative;
    z-index: 4;
    color: #fff;
    width: 100%;
    padding: 0 2.5rem 3.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.hero--home .hero__title {
    font-size: clamp(2.75rem, 7.2vw, 5.25rem);
    line-height: 1.04;
    max-width: min(16ch, 94vw);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: -0.012em;
    font-style: italic;
    color: #fff;
    text-shadow:
        0 1px 32px rgba(0, 0, 0, 0.45),
        0 2px 3px rgba(0, 0, 0, 0.2);
}

.hero--home .hero__sub--home {
    align-self: flex-start;
    margin: 1.1rem 0 0;
    padding-top: 0;
    text-align: left;
    /* Sized and weighted between the old home treatment and the category
       heroes (.hero__sub, 13.5px/400/#fff) — closer to those, which read
       far better over light footage. */
    font-size: clamp(12px, 1.28vw, 12.75px);
    max-width: min(24rem, 100%);
    line-height: 1.7;
    color: var(--c-warm-white);
    font-weight: 400;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.20);
}

.hero--home .hero__actions {
    margin: 1.32rem 0 0;
    align-self: flex-start;
}

.hero--home .hero__actions .btn {
    font-size: 7.6px;
    letter-spacing: 0.224em;
    padding: 1.15rem 1.4rem;
    gap: 0.44rem;
}

.hero--home .hero__actions .btn::after {
    font-size: 8.8px;
}

.hero--home .btn--light {
    border-color: rgba(255, 255, 255, 0.72);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
}

.hero--home .btn--light:hover {
    background: var(--c-gold);
    border-color: var(--c-gold);
    box-shadow: 0 0 20px 6px rgba(164, 127, 84, 0.25);
}

.hero__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.8rem, 2.9vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin-bottom: 0.85rem;
    max-width: 540px;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.35),
        0 2px 18px rgba(0, 0, 0, 0.22);
}

.hero__title em {
    font-style: italic;
    color: var(--c-gold-light);
}

.hero__sub {
    font-size: 13.5px;
    line-height: 1.7;
    max-width: 420px;
    color: #fff;
    margin-bottom: 1.4rem;
    font-weight: 400;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Variants */
.hero--page    { height: 56vh; min-height: 420px; max-height: 600px; }
.hero--project { height: 72vh; min-height: 520px; max-height: 760px; }

}


.hero--project .hero__title { font-size: clamp(1.8rem, 2.7vw, 2.4rem); margin-bottom: 0.4rem; }

.hero__meta {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-gold-light);
    margin-bottom: 0.85rem;
    display: block;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════
   Section heads
   ═══════════════════════════════════════════ */
.section-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
    margin-bottom: 3.5rem;
}

.section-head__lead { max-width: 460px; }

.section-head__heading {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.22;
    color: var(--c-navy);
    letter-spacing: -0.005em;
    margin-top: 0.85rem;
}

.section-head__heading em { font-style: italic; color: var(--c-gold); }

.section-head__copy {
    font-size: 13px;
    line-height: 1.85;
    color: var(--c-text-muted);
    max-width: 420px;
    font-weight: 300;
}

@media (max-width: 1024px) {
    .section-head { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
}

/* ═══════════════════════════════════════════
   CTA strip
   ═══════════════════════════════════════════ */
.cta-strip {
    background: var(--c-navy);
    color: #fff;
    padding: 5rem 2.5rem;
    text-align: center;
}

.cta-strip__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.4;
    margin-bottom: 1.6rem;
    max-width: 580px;
    margin-left: auto; margin-right: auto;
    letter-spacing: 0.005em;
    color: rgba(255, 255, 255, 0.96);
}

/* ═══════════════════════════════════════════
   Statement / Who We Are
   ═══════════════════════════════════════════ */
.statement-layout {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.3fr);
    gap: clamp(1.4rem, 4vw, 3.2rem);
    align-items: start;
}

.statement-layout__drawing {
    margin: 0;
    align-self: start;
    background: var(--c-warm-white-alt);
    border: 1px solid rgba(12, 39, 53, 0.08);
    box-shadow: 0 12px 34px rgba(12, 39, 53, 0.08);
    overflow: hidden;
}

.statement-layout__drawing img {
    display: block;
    width: 100%;
    height: auto;
}

/* Firm statement: opening copy left, drawing right, closing statement centred
   on the page below both — deliberately aligned to neither column. Named areas
   keep the DOM order (copy, drawing, closing) so the mobile stack below is a
   straight single column with no reordering. */
.statement-layout--split {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.9fr);
    grid-template-areas:
        "copy drawing"
        "closing closing";
    column-gap: clamp(1.4rem, 4vw, 3.2rem);
    row-gap: clamp(2.6rem, 5vw, 4.2rem);
}

.statement-layout--split .statement--top { grid-area: copy; }
.statement-layout--split .statement-layout__drawing { grid-area: drawing; }

.statement-layout--split .statement--bottom {
    grid-area: closing;
    max-width: 720px;
    margin-inline: auto;
}

.statement { max-width: 680px; margin: 0 auto; }

.statement p {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--c-text-muted);
    margin-bottom: 1.3rem;
    font-weight: 300;
}

.statement p:last-child { margin-bottom: 0; }

/* Scoped to the About statement so the project pages' .statement blocks, which
   also open on a <p>, don't pick up a drop cap. */
.statement-layout .statement p:first-child::first-letter {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 3rem;
    line-height: 0.95;
    float: left;
    margin: 0.4rem 0.55rem 0 0;
    color: var(--c-gold);
}

@media (max-width: 900px) {
    .statement-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Single column: opening copy, then the drawing, then the closing
       statement — the drawing sits between the two blocks of text. */
    .statement-layout--split {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "drawing"
            "closing";
        row-gap: 1.75rem;
    }

    .statement-layout--split .statement--bottom {
        max-width: 100%;
    }

    .statement-layout__drawing {
        max-width: 640px;
    }

    .statement {
        max-width: 100%;
    }
}

.founder {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3.5rem;
    align-items: center;
    max-width: var(--max-w);
    margin: 0 auto;
}

.founder__photo {
    aspect-ratio: 4 / 5;
    background: var(--c-navy);
    overflow: hidden;
}

.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.placeholder {
    background: #fff;
}

.placeholder__symbol,
.placeholder span {
    display: none;
}

.founder__name {
    font-family: var(--f-display);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 300;
    margin-bottom: 0.35rem;
    color: var(--c-navy);
    letter-spacing: -0.003em;
}

.founder__text p {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--c-text-muted);
    font-weight: 300;
}

/* Pull quote */
.pullquote {
    max-width: 760px;
    margin: 2.5rem auto;
    padding: 0;
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: var(--c-navy);
}


.pullquote--light {
    color: rgba(245, 240, 235, 0.94);
}

/* ═══════════════════════════════════════════
   Page header (replaces section--navy hero strip)
   ═══════════════════════════════════════════ */
.page-header {
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 3.5rem;
    background: var(--c-warm-white);
}

.page-header__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2.5rem; }

.page-header__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.18;
    color: var(--c-navy);
    margin-top: 0.85rem;
    max-width: 720px;
    letter-spacing: -0.005em;
}

.page-header__title em { font-style: italic; color: var(--c-gold); }

.page-header__sub {
    margin-top: 1.2rem;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text-muted);
    font-weight: 300;
}

/* Who We Are — plan drawing bleeds up behind nav + past viewport right (no clipping box) */
.page-header--who {
    position: relative;
    overflow: visible;
    /* The awards block grew from 2 entries to 5 with larger logos; the section
       needs the extra height or the plan drawing collides with the copy. */
    padding-bottom: clamp(8rem, 16vw, 13rem);
}

.page-header__who-art {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    inset: auto;
    left: clamp(50%, 38vw, 62%);
    right: calc(-55vw + 120px);
    top: clamp(-180px, -14vh, -72px);
    bottom: clamp(-320px, -28vw, -120px);
    width: auto;
    min-height: clamp(340px, 52vw, 560px);
    overflow: visible;
    /* Held clear of the copy column: right past the 38rem text measure, and
       down past the taller awards block. */
    transform: translate(200px, 240px);
}

.page-header__who-plan {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    height: clamp(145px, 19vmin, 220px);
    width: auto;
    max-width: none;
    transform: scale(4);
    transform-origin: left top;
    opacity: 0.92;
}

.page-header__who-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 2.5rem;
    position: relative;
    z-index: 2;
}

.page-header__who-copy {
    min-width: 0;
}

.page-header__who-inner .page-header__title,
.page-header__who-inner .page-header__sub {
    max-width: 38rem;
}


.who-awards {
    margin-top: 1.4rem;
    max-width: 38rem;
    position: relative;
    z-index: 2;
}

.who-awards__logos {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
}

.who-awards__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.82;
    transition: opacity 0.25s ease;
}

.who-awards__logo:hover {
    opacity: 1;
}

.who-awards__logo img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* CNU and The Urban Guild are solid tiles rather than transparent wordmarks,
   so at matched box size they read far heavier than Forbes and Prix
   Versailles. Held 25% smaller to even out their optical weight. */
.who-awards__logos .who-awards__logo--sm img,
.home-who__awards .home-who__logo--sm img {
    width: 75px;
    height: 75px;
}

.who-awards__list {
    margin-top: 1rem;
    display: grid;
    gap: 0.45rem;
}

.who-awards__item {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.who-awards__year {
    margin: 0;
    font-family: var(--f-display);
    font-size: 1rem;
    color: var(--c-gold);
    min-width: 2.55rem;
}

.who-awards__title {
    margin: 0;
    font-family: var(--f-sans);
    font-size: 11.5px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--c-text-muted);
    letter-spacing: 0.01em;
}

@media (max-width: 900px) {
    .who-awards {
        margin-top: 1.15rem;
    }

    .who-awards__logos {
        gap: 0.75rem;
    }

    .who-awards__logo img {
        width: 80px;
        height: 80px;
    }

    .who-awards__logos .who-awards__logo--sm img,
    .home-who__awards .home-who__logo--sm img {
        width: 60px;
        height: 60px;
    }

    .who-awards__title {
        font-size: 11px;
    }
}

/* Phones keep all four logos on a single row. The sizes are viewport-relative
   with a px ceiling so the row fits from 320px up without wrapping: at 320px
   the four marks plus gaps come to ~232px inside a ~272px column. */
@media (max-width: 640px) {
    .who-awards .who-awards__logos,
    .home-who .home-who__awards {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: clamp(6px, 2vw, 10px);
    }

    .who-awards__logos .who-awards__logo img,
    .home-who__awards .home-who__logo img {
        width: min(72px, 19vw);
        height: min(72px, 19vw);
    }

    .who-awards__logos .who-awards__logo--sm img,
    .home-who__awards .home-who__logo--sm img {
        width: min(54px, 14.25vw);
        height: min(54px, 14.25vw);
    }
}

@media (max-width: 900px) {
    .page-header__who-art {
        left: clamp(28%, 8vw, 44%);
        right: calc(-48vw + 72px);
        top: clamp(-140px, -10vh, -48px);
        bottom: clamp(-240px, -36vw, -80px);
        min-height: clamp(260px, 58vw, 400px);
    }

    .page-header__who-plan {
        height: clamp(118px, 22vmin, 160px);
        left: 50%;
        top: -4%;
        transform-origin: center top;
        transform: translateX(-52%) scale(2.85);
    }
}

@media (max-width: 1024px) {
    .page-header__who-inner {
        padding: 0 1.5rem;
    }
}

/* Same fix as .home-who below 640px: stop bleeding the plan drawing behind
   the copy (it has nowhere to go on a narrow column but on top of the text)
   and place it as a contained strip after the copy instead. */
@media (max-width: 640px) {
    .page-header--who { padding-bottom: 3rem; }

    .page-header__who-stage {
        display: flex;
        flex-direction: column;
    }

    .page-header__who-art {
        position: static;
        order: 2;
        inset: auto;
        left: auto; right: auto; top: auto; bottom: auto;
        width: 100%;
        min-height: 0;
        height: 220px;
        overflow: hidden;
        transform: none;
        margin-top: 2.5rem;
    }

    .page-header__who-plan {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: 30% 70%;
        transform: none;
        opacity: 1;
    }

    .page-header__who-inner { order: 1; }
}

/* ═══════════════════════════════════════════
   Category page
   ═══════════════════════════════════════════ */
/* Anchor scroll offset beneath fixed nav (subnav is no longer sticky).
   #inquiry is the contact block at the foot of the category pages — the
   home page's per-section "Contact us" buttons deep-link straight to it,
   so it needs the same offset or it lands tucked under the fixed nav. */
#urban-design,
#architecture,
#inquiry,
#careers {
    scroll-margin-top: calc(var(--nav-h) + 14px);
}

/* Static subnav — avoids sticky overlap / spacing glitches with the hero */
.subnav {
    position: relative;
    z-index: 1;
    background: #fff;
}

.subnav__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0.65rem 2.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 46px;
}

.subnav a {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-text-soft);
    padding: 0.3rem 0;
    transition: color 0.3s ease;
}

.subnav a:hover, .subnav a.is-active {
    color: var(--c-navy);
}

.service-intro { max-width: 820px; margin: 0 auto; }

.service-intro__head { margin-bottom: 1.8rem; }

.service-intro__heading {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.25;
    color: var(--c-navy);
    margin: 0.8rem 0 0;
    letter-spacing: -0.005em;
}

.service-intro__heading em { font-style: italic; color: var(--c-gold); }

.service-intro__body {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--c-text-muted);
    margin-bottom: 1.4rem;
    font-weight: 300;
}

.service-intro__scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    padding-top: 0.75rem;
    list-style: none;
}

.service-intro__scope-item {
    font-size: 10px;
    color: var(--c-navy);
    padding: 0.42rem 1rem 0.45rem;
    line-height: 1.35;
    letter-spacing: 0.06em;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--c-line-light);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(12, 39, 53, 0.04);
}

.section--white .service-intro__scope-item {
    background: var(--c-warm-white);
}

/* Community & Master Planning — shell uses body.page-category flat bg */
.section--community-light {
    background: transparent;
}

.section--community-light .service-intro__scope-item {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #d9cfc4;
}

.section--community-light .projects-stack {
    background: #fff;
}

.section--community-cream {
    background: transparent;
}

.section--community-cream .service-intro__scope-item {
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--c-line-light);
}

.section--community-cream .projects-stack {
    background: #fff;
}

body.page-category .section--white {
    background: transparent;
}

body.page-category .section--white .projects-stack {
    background: #fff;
}

/* Project rows */
.projects { display: flex; flex-direction: column; }

/* Category pages: subsection “folio” — full width of .wrap, rounded like a opened spread */
.projects-stack {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(12, 39, 53, 0.05);
}

.section--white .projects-stack {
    background: #f7f4f0;
}

.section--warm .projects-stack {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.576) 0%, rgba(250, 247, 243, 0.72) 100%);
}

.project-row {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 3rem 3.75rem;
    align-items: start;
    padding: 3.5rem 2.75rem;
}

.project-row:nth-child(even) {
    grid-template-columns: 0.92fr 1.08fr;
    direction: rtl;
}

.project-row:nth-child(even) > * { direction: ltr; }

.project-row__image {
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--c-navy);
    position: relative;
    display: block;
    border-radius: 3px;
    box-shadow: 0 20px 50px rgba(12, 39, 53, 0.12);
}

.projects-stack .project-row__image {
    margin-top: 0.15rem;
}

.project-row:nth-child(3n + 1) .project-row__image img {
    object-position: 48% 42%;
}

.project-row:nth-child(3n + 2) .project-row__image img {
    object-position: 55% 38%;
}

.project-row__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-row:hover .project-row__image img { transform: scale(1.035); }

.project-row > div {
    padding-top: 0.15rem;
}

.project-row__location {
    font-family: var(--f-sans);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 1rem;
    display: block;
    line-height: 1.45;
}

.project-row__location::before { display: none; }

.project-row__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    line-height: 1.22;
    color: var(--c-navy);
    margin-bottom: 0.65rem;
    letter-spacing: -0.018em;
    max-width: 26ch;
}

.project-row__title em { font-style: italic; color: var(--c-gold); }

.project-row__scope {
    font-family: var(--f-display);
    font-size: 11px;
    font-weight: 300;
    color: var(--c-text-soft);
    letter-spacing: 0.02em;
    margin-bottom: 1.35rem;
    font-style: italic;
    line-height: 1.55;
    padding-bottom: 0;
    max-width: 42ch;
}

.project-row__text {
    font-size: 13.5px;
    line-height: 1.88;
    color: var(--c-text-muted);
    margin-bottom: 1.45rem;
    font-weight: 300;
    max-width: 48ch;
}

.projects-stack .project-row__text:first-of-type::first-letter {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 2.35rem;
    line-height: 0.92;
    float: left;
    margin: 0.15rem 0.45rem 0 0;
    color: var(--c-gold);
}

.projects-stack .project-row .placeholder {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 11px;
    line-height: 1.45;
    color: var(--c-text-soft);
    border: none;
    padding: 1.75rem 1.25rem;
    background:
        linear-gradient(135deg, rgba(245, 240, 235, 0.95) 0%, rgba(232, 226, 218, 0.65) 100%);
}

.projects-stack .project-row .placeholder__symbol,
.projects-stack .project-row .placeholder span {
    display: none;
}

/* ═══════════════════════════════════════════
   Project page
   ═══════════════════════════════════════════ */
.project-intro {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3.5rem;
}

.project-intro__meta { padding-top: 0.25rem; }

.project-intro__meta-item {
    margin-bottom: 1.05rem;
    padding-bottom: 0.85rem;
}

.project-intro__meta-item:last-child { margin-bottom: 0; }

.project-intro__meta-item h4 {
    font-family: var(--f-sans);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 0.4rem;
}

.project-intro__meta-item p {
    font-size: 12.5px;
    color: var(--c-navy);
    line-height: 1.55;
    font-weight: 300;
}

.project-intro__body p {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--c-text-muted);
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.project-intro__body p:first-child::first-letter {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 2.8rem;
    line-height: 0.95;
    float: left;
    margin: 0.3rem 0.55rem 0 0;
    color: var(--c-gold);
}

@media (max-width: 1024px) {
    .project-intro { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* Project page — meta strip (single row) */
.project-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.65rem 1.15rem;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0.85rem 0 1rem;
}

.project-meta-row__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 11.5px;
    font-weight: 300;
    color: var(--c-text-muted);
    line-height: 1.65;
}

.project-meta-row__label {
    font-family: var(--f-sans);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-gold);
    flex-shrink: 0;
    line-height: 1.85;
}

.project-meta-row__value {
    color: var(--c-navy);
}

.project-meta-row__sep {
    color: var(--c-line-cool);
    font-size: 9px;
    user-select: none;
    margin: 0 0.1rem;
    flex-shrink: 0;
    align-self: center;
}

/* Award note — sits under the opening paragraph on award-winning projects,
   inside the text half of the 50/50 split. Deliberately not a box: a hairline
   and a logo, so it reads as a footnote to the paragraph rather than a plaque
   pinned over it. The awarding body's logo is a wordmark, so the copy never
   repeats its name. */
.award-note {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-top: 1.6rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--c-line-light);
    text-decoration: none;
    max-width: 30rem;
}

.award-note:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 4px;
}

/* Optical, not mechanical, sizing: the Prix Versailles file is a square with
   roughly a third of its height as internal padding, so it needs a much larger
   box than the Urban Guild mark, which is a dense rectangle that bleeds to its
   own edges. Matching their pixel heights would make Prix Versailles read half
   the size. Both files are shared with the home and Who We Are pages, so the
   correction lives here rather than in the assets. */
.award-note__logo {
    flex-shrink: 0;
    width: auto;
    height: 76px;
    object-fit: contain;
    transition: opacity 0.4s ease;
}

.award-note__logo--sm { height: 40px; }

.award-note:hover .award-note__logo,
.award-note:focus-visible .award-note__logo { opacity: 0.78; }

.award-note__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.award-note__label {
    font-family: var(--f-sans);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-gold);
    line-height: 1.85;
}

.award-note__title {
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 300;   /* matches every other display heading on the site */
    color: var(--c-navy);
    line-height: 1.4;
    text-wrap: balance;
}

.award-note__meta {
    font-family: var(--f-sans);
    font-size: 11.5px;
    font-weight: 300;
    color: var(--c-text-muted);
    line-height: 1.6;
}

@media (max-width: 600px) {
    .award-note { gap: 0.9rem; }
    .award-note__logo { height: 62px; }
    .award-note__logo--sm { height: 34px; }
    .award-note__title { font-size: 14px; }
}

/* Almost full-width feature image */
.project-showcase {
    max-width: min(1320px, 96vw);
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: var(--c-navy);
}

.project-showcase img {
    width: 100%;
    display: block;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.project-showcase--drawing img {
    aspect-ratio: 16 / 9;
}

/* Plans and drawings that must be read in full: no 16/9 crop. The image keeps
   its own proportions, capped so a tall drawing can't take over the viewport,
   on a paper-coloured shell rather than navy. */
.project-showcase--full {
    background: var(--c-warm-white);
}

.project-showcase--full img,
.project-showcase--drawing.project-showcase--full img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
}

/* Ciudad del Este (etc.): drawing / aerial — warm shell; rotator sized to rotated bounds (see ciudad page script) */
.project-showcase.project-showcase--natural {
    max-width: none;
    width: 100%;
    padding: 0;
    overflow: visible;
    background: var(--c-warm-white);
    line-height: 0;
}

.project-showcase--drawing.project-showcase--natural .project-showcase__natural-body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 50px;
    padding: 0;
}

.project-showcase__natural-rot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}

.project-showcase--drawing.project-showcase--natural img {
    aspect-ratio: unset;
    display: block;
    object-fit: contain;
    transform: rotate(90deg);
    transform-origin: center center;
    max-width: none;
    max-height: none;
}

@media (max-width: 768px) {
    .project-showcase img {
        aspect-ratio: 4 / 3;
    }
    .project-showcase--drawing img {
        aspect-ratio: 4 / 3;
    }
    .project-showcase--drawing.project-showcase--natural img {
        aspect-ratio: unset;
    }

    .project-showcase--drawing.project-showcase--natural .project-showcase__natural-body {
        margin: 0 50px;
    }
}

/* Text + image rows */
.project-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: var(--max-w);
    margin: 0 auto;
}

.project-split__text p {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--c-text-muted);
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.project-split__text p:last-child {
    margin-bottom: 0;
}

.project-split__text p:first-child::first-letter {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 2.8rem;
    line-height: 0.95;
    float: left;
    margin: 0.3rem 0.55rem 0 0;
    color: var(--c-gold);
}

.project-split__figure {
    overflow: hidden;
    background: var(--c-navy);
}

.project-split__figure img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.project-split--reverse .project-split__figure {
    order: -1;
}

@media (max-width: 900px) {
    .project-meta-row {
        justify-content: flex-start;
        gap: 0.85rem 0.75rem;
        padding: 0.75rem 0 1rem;
    }

    .project-meta-row__sep {
        display: none;
    }

    .project-meta-row__item {
        flex: 1 1 auto;
        min-width: calc(50% - 0.5rem);
    }

    .project-split,
    .project-split--reverse {
        grid-template-columns: 1fr;
    }

    .project-split--reverse .project-split__figure {
        order: 0;
    }
}

/* Gallery — justified rows, edge to edge. Each row is a flex line whose
   items grow in proportion to their aspect ratio, so every image in a row
   shares one height and none is cropped. Row composition (1, 2 or 3 up) is
   decided at build time from the real dimensions. */
.gallery {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.55vw, 10px);
    width: 100%;
}

.gallery__row {
    display: flex;
    gap: clamp(4px, 0.55vw, 10px);
}

.gallery__item {
    flex-basis: 0;
    min-width: 0;
    overflow: hidden;
    background: rgba(12, 39, 53, 0.05);
}

.gallery__item img {
    width: 100%;
    height: auto;          /* intrinsic ratio — never cropped */
    display: block;
    transition: transform 1.6s ease;
}

.gallery__item:hover img { transform: scale(1.02); }

/* A row holding a single portrait frame. flex-grow is the image's width/height
   ratio, so a lone portrait (below 1) would claim only that fraction of the row
   and leave the rest empty — while stretching it to fill would stand it roughly
   one and a half screens tall. Centre it at a readable width instead. */
.gallery__row--single {
    justify-content: center;
}

.gallery__row--single .gallery__item {
    flex-grow: 0;
    flex-basis: min(620px, 72vw);
}

/* Below phone width a three-up row leaves each image too small to read, so
   those (and single-image rows) go full width. Rows the build already
   paired as two images, though, stay side by side at their original
   aspect-driven proportions — otherwise every image becomes its own full
   screen-width slide and the gallery turns into an endless single column. */
@media (max-width: 560px) {
    .gallery__row { flex-wrap: wrap; gap: clamp(4px, 1.8vw, 8px); }
    .gallery__item { flex-basis: 100%; }

    .gallery__row:has(.gallery__item:nth-child(2)):not(:has(.gallery__item:nth-child(3))) {
        flex-wrap: nowrap;
    }
    .gallery__row:has(.gallery__item:nth-child(2)):not(:has(.gallery__item:nth-child(3))) .gallery__item {
        flex-basis: 0;
        min-width: 0;
    }
}

/* Community service lead — one statement, then the two phases side by side */
.service-lead {
    max-width: 980px;
}

.service-lead__heading {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    line-height: 1.28;
    color: var(--c-navy);
    margin: 0.9rem 0 1.6rem;
    letter-spacing: -0.01em;
}

.service-lead__heading em {
    font-style: italic;
    color: var(--c-gold);
}

.service-lead__body {
    columns: 2;
    column-gap: 3rem;
    max-width: 900px;
}

.service-lead__body p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--c-text-muted);
    margin: 0 0 1rem;
    break-inside: avoid;
}

.phases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    margin-top: calc(3.5rem + 20px);
}

.phase__num {
    display: block;
    font-family: var(--f-display);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    color: var(--c-gold);
    margin-bottom: 0.7rem;
}

.phase__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    color: var(--c-navy);
    margin: 0 0 0.9rem;
}

.phase__body {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--c-text-muted);
    margin: 0 0 1.5rem;
}

.phase__scope {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phase__scope li {
    font-family: var(--f-sans);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    color: var(--c-navy);
    padding-left: 1rem;
    position: relative;
    opacity: 0.82;
}

.phase__scope li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 1px;
    background: var(--c-gold);
}

@media (max-width: 860px) {
    .service-lead__body { columns: 1; }
    .phases { grid-template-columns: 1fr; gap: 2.75rem; margin-top: 3rem; padding-top: 2.25rem; }
}

/* Motif — three plates set on a quarter-circle rather than an L. Positions
   are points at 12deg / 50deg / 88deg on a circle centred at the top-left of
   the box, so the run curves instead of turning a hard corner. */
.motif {
    position: relative;
    width: clamp(230px, 26vw, 340px);
    aspect-ratio: 1;
    z-index: 2;
    /* Pulled up and right, with the trailing space reclaimed, so this reads as
       a corner ornament rather than a band of its own. */
    margin: -150px -120px -130px auto;
}

.motif__item {
    position: absolute;
    width: 35%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--c-navy);
    box-shadow: 0 10px 24px rgba(12, 39, 53, 0.16);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.motif__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.motif__item--above  { left: 60.5%; top: 12.5%; transform: rotate(7deg); }
.motif__item--corner { left: 40%;   top: 47.5%; transform: rotate(0deg); }
.motif__item--left   { left: 2%;    top: 62%;   transform: rotate(-7deg); }

.motif:hover .motif__item--above  { transform: rotate(9deg)  translate(3px, -3px); }
.motif:hover .motif__item--corner { transform: rotate(0deg)  translate(2px, 2px); }
.motif:hover .motif__item--left   { transform: rotate(-9deg) translate(-3px, 3px); }

/* Community sits 20px higher than residential */
.motif--lifted { margin-top: -170px; }

/* Mirrored twin, anchored bottom-left instead of top-right. The flip is done by
   mirroring each plate's position and tilt rather than scaleX-ing the box: the
   container's transform belongs to .fade, which would override it (and would
   flip the photographs themselves besides). Unlike the top-right arc, this one
   has the phase columns' copy directly above it, so it clears them rather than
   pulling up over the text. */
.motif--mirror {
    margin: 30px auto -140px 0;
    /* Reaches the full 70px pull only when the viewport is wide enough that the
       centred wrap leaves room beside it; otherwise it can claim no more than
       the wrap's own padding, or the leading plate is cut off by the window. */
    margin-left: max(-70px, calc(-2rem - max(0px, (100vw - 1280px) / 2)));
}

.motif--mirror .motif__item--above  { left: 4.5%; transform: rotate(-7deg); }
.motif--mirror .motif__item--corner { left: 25%;  transform: rotate(0deg); }
.motif--mirror .motif__item--left   { left: 63%;  transform: rotate(7deg); }

.motif--mirror:hover .motif__item--above  { transform: rotate(-9deg) translate(-3px, -3px); }
.motif--mirror:hover .motif__item--corner { transform: rotate(0deg)  translate(-2px, 2px); }
.motif--mirror:hover .motif__item--left   { transform: rotate(9deg)  translate(3px, 3px); }

/* In a form column there is no body of copy to tuck the arc into, so it drops
   the corner pull and sits in normal flow under the contact details. */
.motif--form {
    width: min(300px, 100%);
    margin: clamp(1.9rem, 3.5vw, 2.9rem) auto clamp(0.5rem, 1.5vw, 1rem) 0;
}

/* Only while the form is genuinely two-column (>1024px) does the arc have room
   to ride up into the gap beside the panel. Offset via margins, not transform —
   .fade owns the transform on this element. The px values are what the design
   asks for at full width; the percentage caps only bite on narrower desktops,
   where they keep the arc from riding over the form panel itself. */
@media (min-width: 1025px) {
    .motif.motif--form {
        width: min(430px, 80%);
        margin-top: calc(clamp(1.9rem, 3.5vw, 2.9rem) - 100px);
        margin-left: min(98px, 24%);
    }

    /* Residential's form arc sits 20px further right than the other forms. */
    .motif.motif--form.motif--nudged { margin-left: min(118px, 28%); }
}

@media (max-width: 1100px) {
    /* The corner pull reclaims the wrap's padding, so it has to track it —
       any more and the arc pushes the page into a horizontal scroll. */
    .motif { margin: -90px -2.5rem -90px auto; }
    .motif--mirror { margin: 20px auto -80px -2.5rem; }
    .motif--lifted { margin-top: -110px; }
}

@media (max-width: 1024px) {
    .motif { margin-right: -1.5rem; }
    .motif--mirror { margin-right: auto; margin-left: -1.5rem; }
    /* Form has stacked to one column — the arc returns to normal flow. */
    .motif.motif--form { margin: 2rem auto 0.75rem 0; }
}

/* Mobile: no corner to tuck into, so the arcs centre — and run half again as
   large, since at this width they otherwise read as thumbnails. */
@media (max-width: 760px) {
    .motif { margin: 0 auto; width: min(300px, 100%); }
    .motif--mirror { margin: 0 auto; }
    .motif.motif--form { margin: 1.75rem auto 0.5rem; width: min(345px, 100%); }
}

/* The category-page arcs sit 50px further out. Held to wide desktop: below
   ~1200px the corner pull is already flush to the viewport, so the extra 50px
   would spill off-screen rather than read as a deeper tuck. */
@media (min-width: 1200px) {
    .motif { margin-right: -170px; }
}

/* Numbered project list (community) */
.project-row__num {
    display: block;
    font-family: var(--f-display);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--c-gold);
    margin-bottom: 0.55rem;
}

/* Sub-entry — a building that belongs to the project above it.
   Marked by a kicker line, not a rule: the border read as a stray line. */
.project-row--sub {
    margin-top: -1.25rem;
}
.project-row__kicker {
    font-family: var(--f-sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 0.45rem;
}

/* Project movement label — marks the Master Plan / Architecture phases
   of a single project (narrativa: "two phases of the same practice") */
.project-movement__label {
    display: block;
    margin-bottom: 0.9rem;
}

/* Per-house section (Barrio El Prado) — each house carries its own colour,
   sampled from its facade and softened. Title left, elevation right, gallery
   beneath. Sections are separated by a shadow rather than a rule. */
.house {
    background: var(--house-tint, var(--c-warm-white));
    padding: clamp(2.75rem, 5vw, 4.5rem) 0;
    position: relative;
    /* Each section casts a soft shadow onto the one below it. Stacking order
       is set per section in the markup so the earlier one paints on top. */
    box-shadow: 0 10px 18px -12px rgba(12, 39, 53, 0.13);
}

.house__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.house__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.35rem, 2.4vw, 1.95rem);
    line-height: 1.18;
    color: var(--c-navy);
    letter-spacing: -0.01em;
    margin: 0;
}

.house__drawing {
    margin: 0;
    width: clamp(150px, 20vw, 250px);
    background: #fff;
    padding: clamp(0.6rem, 1.2vw, 0.95rem);
    box-shadow: 0 10px 26px rgba(12, 39, 53, 0.10);
}

.house__drawing img { width: 100%; display: block; object-fit: contain; }

.house .gallery__item { background: rgba(12, 39, 53, 0.06); }

/* Four-up index of the houses, above the sections */
.house-index {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.6rem, 1.4vw, 1.1rem);
}

.house-index__item {
    display: block;
    position: relative;
    overflow: hidden;
}

.house-index__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 1.2s ease;
}

.house-index__item:hover img { transform: scale(1.04); }

.house-index__label {
    display: block;
    font-family: var(--f-sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--house-accent, var(--c-navy));
    padding-top: 0.7rem;
}

@media (max-width: 820px) {
    .house__head { grid-template-columns: 1fr; gap: 1.35rem; }
    .house__drawing { width: min(210px, 55%); }
    .house-index { grid-template-columns: repeat(2, 1fr); }
}

/* Inline text link inside body copy */
.inline-link {
    color: var(--c-gold);
    border-bottom: 1px solid rgba(164, 127, 84, 0.35);
    transition: border-color 0.25s ease;
}

.inline-link:hover { border-bottom-color: var(--c-gold); }

.form__status--error {
    color: #8c3a2e;
}

/* Team grid (Who We Are) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.6rem;
    margin-top: 4rem;
}

.team-member { margin: 0; }

.team-member img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background: var(--c-warm-white-alt);
    filter: grayscale(1);
    transition: filter 0.6s ease;
}

.team-member:hover img { filter: grayscale(0); }

.team-member figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.9rem;
}

.team-member__name {
    font-family: var(--f-display);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--c-text);
    line-height: 1.35;
}

.team-member__role {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-soft);
}

@media (max-width: 900px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.25rem; }
}

@media (max-width: 600px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; margin-top: 2.75rem; }
    .team-member__name { font-size: 0.88rem; }
    .team-member__role { font-size: 0.66rem; }
}

/* Titled gallery run — used where several houses share one project page */
.gallery__group-title {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin: 3.25rem 0 1.1rem;
}

.gallery__group-title:first-child { margin-top: 0; }

.photo-credit {
    font-family: var(--f-display);
    font-size: 10.5px;
    font-style: italic;
    color: var(--c-text-soft);
    text-align: right;
    margin-top: 1rem;
    letter-spacing: 0.04em;
    font-weight: 300;
}

.related {
    padding: clamp(5rem, 8vw, 8rem) 0 clamp(4.5rem, 7vw, 7rem);
    background: var(--c-warm-white);
}

.related__label {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.35rem, 2.4vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--c-navy);
    margin-bottom: 2.6rem;
}

/* Bento: one large project on the left, two small side by side on the right,
   CTA beneath them. Card hover behaviour is the home page's, shared verbatim
   via the .h-panel__half rule groups above. */
.related-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: clamp(0.7rem, 1.4vw, 1.15rem);
}

.related-card { overflow: hidden; background: var(--c-navy); min-height: 220px; }

.related-card:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; min-height: 460px; }
.related-card:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.related-card:nth-of-type(3) { grid-column: 3; grid-row: 1; }

/* Fixed caption width so the text wraps identically in both positions —
   otherwise re-centring re-wraps the title and it appears to jump. */
.related-card .h-panel__content {
    width: min(84%, 290px);
    padding: clamp(1.3rem, 2.2vw, 1.9rem);
}

.related-card .h-panel__feature-title {
    font-size: 0.9rem;
    line-height: 1.25;
    margin-bottom: 0.55rem;
}

.related-card:nth-of-type(1) .h-panel__feature-title { font-size: 1.05rem; }

.related-card .h-panel__location {
    font-size: 8.5px;
    letter-spacing: 0.26em;
    margin-bottom: 0.5rem;
}

/* CTA sits under the two small cards */
.related-cta {
    grid-column: 2 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.7rem);
    background: transparent;
    border: 1.5px solid var(--c-navy);
    color: var(--c-navy);
    transition: background-color 0.4s ease;
}

.related-cta:hover { background-color: rgba(12, 39, 53, 0.05); }

.related-cta__eyebrow {
    font-family: var(--f-sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold-light);
    white-space: nowrap;
}

.related-cta__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    line-height: 1.3;
    margin-right: auto;
}

.related-cta__arrow {
    font-size: 1.25rem;
    color: var(--c-gold-light);
    transition: transform 0.35s ease;
}

.related-cta:hover .related-cta__arrow { transform: translateX(6px); }

@media (max-width: 900px) {
    .related-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
    .related-card:nth-of-type(1) { grid-column: 1 / -1; grid-row: 1; min-height: 290px; }
    .related-card:nth-of-type(2) { grid-column: 1; grid-row: 2; }
    .related-card:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .related-cta { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 620px) {
    .related-grid { grid-template-columns: 1fr; }
    .related-card:nth-of-type(1),
    .related-card:nth-of-type(2),
    .related-card:nth-of-type(3) { grid-column: 1; grid-row: auto; }
    .related-cta { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .related-cta__title { margin-right: 0; }
}

/* ═══════════════════════════════════════════
   Contact
   ═══════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.contact-grid__heading {
    font-family: var(--f-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.4rem, 2.1vw, 1.8rem);
    line-height: 1.32;
    margin: 0.65rem 0 1.1rem;
    color: var(--c-navy);
    letter-spacing: -0.003em;
}

.contact-grid__heading em { color: var(--c-gold); }

.contact-grid__text {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--c-text-muted);
    margin-bottom: 1.8rem;
    max-width: 400px;
    font-weight: 300;
}

.contact-detail {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    align-items: flex-start;
}

.contact-detail__label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-navy);
    min-width: 72px;
    padding-top: 3px;
    opacity: 0.92;
}

.contact-detail__value { font-size: 13px; color: var(--c-navy); line-height: 1.55; font-weight: 400; }
.contact-detail__value a { transition: color 0.25s ease; }
.contact-detail__value a:hover { color: var(--c-gold); }

/* Contact — form panel (high contrast, labeled fields) */
.contact-form-panel {
    background: #fff;
    border: 1px solid rgba(12, 39, 53, 0.14);
    box-shadow:
        0 1px 0 rgba(12, 39, 53, 0.06),
        0 18px 44px rgba(12, 39, 53, 0.08);
    padding: 2rem 2.15rem 2.25rem;
    max-width: 100%;
}

.contact-form-panel__title {
    color: var(--c-navy);
}

.contact-form-panel__hint {
    font-size: 12px;
    line-height: 1.55;
    color: var(--c-text-muted);
    font-weight: 400;
    margin: -0.35rem 0 1.5rem;
    max-width: 36rem;
}

/* Careers cross-link sitting under each enquiry form: separated by a rule so
   it reads as a footnote to the form rather than part of it. */
.form__aside {
    margin-top: 1.75rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(12, 39, 53, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    font-family: var(--f-display);
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--c-navy);
    font-weight: 300;
}

/* Overrides .arrow-link's 9.5px caption size — this one is a real call to
   action sitting beside display-sized text, not a caption. */
.form__aside .form__aside-link {
    font-size: 12.5px;
    letter-spacing: 0.22em;
}

.form__aside .form__aside-link::after { font-size: 14px; }

@media (max-width: 640px) {
    .form__aside { font-size: 1.05rem; }
    .form__aside .form__aside-link { font-size: 11.5px; }
}

.contact-form-panel__hint abbr {
    text-decoration: none;
    font-weight: 700;
    color: var(--c-navy);
}

.form.form--contact {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form--contact .form__group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.15rem;
}

.form--contact .form__group:last-of-type {
    margin-bottom: 0;
}

.form__label {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-navy);
    line-height: 1.35;
}

.form__required {
    color: var(--c-gold);
    font-weight: 700;
}

.form__hint {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    color: var(--c-text-muted);
    font-weight: 400;
    margin-top: 0.35rem;
}

.form--contact .form__input,
.form--contact .form__textarea {
    width: 100%;
    background: #fff;
    border: 2px solid rgba(12, 39, 53, 0.22);
    border-radius: 2px;
    font-family: var(--f-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--c-navy);
    padding: 0.85rem 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form--contact .form__input::placeholder,
.form--contact .form__textarea::placeholder {
    color: var(--c-text-soft);
    opacity: 1;
}

.form--contact .form__input:hover,
.form--contact .form__textarea:hover {
    border-color: rgba(12, 39, 53, 0.38);
}

.form--contact .form__input:focus-visible,
.form--contact .form__textarea:focus-visible {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(164, 127, 84, 0.28);
}

.form__select-wrap {
    position: relative;
}

.form--contact .form__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 2px solid rgba(12, 39, 53, 0.22);
    border-radius: 2px;
    font-family: var(--f-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--c-navy);
    padding: 0.85rem 2.5rem 0.85rem 1rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form--contact .form__select:invalid {
    color: var(--c-text-muted);
}

.form--contact .form__select option {
    color: var(--c-navy);
    font-weight: 400;
}

.form--contact .form__select:hover {
    border-color: rgba(12, 39, 53, 0.38);
}

.form--contact .form__select:focus-visible {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(164, 127, 84, 0.28);
}

.form__select-arrow {
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-navy);
    pointer-events: none;
    font-size: 11px;
    opacity: 0.65;
}

.form--contact .form__textarea {
    resize: vertical;
    min-height: 132px;
    line-height: 1.55;
}

.form__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__submit {
    width: 100%;
    margin-top: 1.65rem;
    padding: 1.05rem 1.5rem;
    min-height: 52px;
    background: var(--c-navy);
    color: #fff;
    border: 2px solid var(--c-navy);
    border-radius: 2px;
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(12, 39, 53, 0.22);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.form__submit:hover {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: #fff;
    box-shadow: 0 6px 22px rgba(164, 127, 84, 0.4);
}

.form__submit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(12, 39, 53, 0.2);
}

.form__submit:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(164, 127, 84, 0.45),
        0 6px 22px rgba(12, 39, 53, 0.2);
}

.form__submit-text {
    display: inline-block;
}

.form__status {
    margin-top: 1.15rem;
    padding: 0.85rem 1rem;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--c-navy);
    background: rgba(164, 127, 84, 0.12);
    border: 1px solid rgba(164, 127, 84, 0.45);
    border-radius: 2px;
}

.form__status[hidden] {
    display: none !important;
}

/* Mailto fallback, offered only when a submission has actually failed. A
   visitor who took the time to write should never hit a dead end. */
.form__status-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.form__status-link:hover,
.form__status-link:focus-visible {
    opacity: 0.75;
}

@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: 2.2rem; }

    .contact-form-panel {
        padding: 1.65rem 1.4rem 1.85rem;
    }
}

/* ═══════════════════════════════════════════
   Footer — multipoint navy gradient + soft corner light
   ═══════════════════════════════════════════ */
.footer {
    background-color: var(--c-navy);
    background-image: var(--footer-bg-shine), var(--footer-bg-gradient);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
    color: var(--c-warm-white);
    padding: 5rem 2.5rem 2.5rem;
    min-height: 45vh;
    display: flex;
    align-items: flex-end;
}

.footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    width: 100%;
}

.footer__left, .footer__right {
    display: flex;
    align-items: center;
}

.footer__left {
    gap: 1.4rem;
    flex-wrap: wrap;
}

.footer__right {
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* width:auto so the intrinsic width/height attributes on the <img> only supply
   an aspect ratio, and never force the asset's full pixel width. */
.footer__logo img { height: 22px; width: auto; }

.footer__copy {
    font-size: 10px;
    color: rgba(245, 240, 235, 0.5);
    letter-spacing: 0.06em;
    font-weight: 300;
}

.footer__right a {
    font-size: 11px;
    color: rgba(245, 240, 235, 0.78);
    transition: color 0.3s ease;
    letter-spacing: 0.04em;
    font-weight: 300;
}

.footer__right a:hover { color: var(--c-gold-light); }

@media (max-width: 768px) {
    .footer__left, .footer__right { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* Continuous gradient: closing CTA + site footer as one band */
.site-bottom {
    background-color: var(--c-navy);
    background-image: var(--footer-bg-shine), var(--footer-bg-gradient);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.site-bottom .cta-strip {
    background: transparent;
}

.site-bottom .footer {
    background-color: transparent;
    background-image: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════ */
.fade {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade.is-in { opacity: 1; transform: translateY(0); }

.fade-d1 { transition-delay: 0.08s; }
.fade-d2 { transition-delay: 0.16s; }
.fade-d3 { transition-delay: 0.24s; }

/* Nav hidden on home hero until video is ready — transition lives on .nav so it fires on class removal */
.nav--intro-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

/* Hero home text — slides in from left after video starts */
@keyframes heroIntroIn {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

.hero-intro {
    opacity: 0;
    transform: translateX(-28px);
}
.hero-intro.is-in {
    animation: heroIntroIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0s;
}
.hero-intro-d1.is-in { animation-delay: 0.105s; }
.hero-intro-d2.is-in { animation-delay: 0.21s; }

/* Section scrolling over the hero — casts a 3D shadow back onto the video */
.hero + section,
.hero + div {
    position: relative;
    z-index: 2;
    box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.055), 0 -6px 18px rgba(0, 0, 0, 0.025);
}

/* Parallax — hero__bg is oversized so it can travel on scroll */
.hero--home .hero__bg,
.hero--page .hero__bg {
    top: -12%;
    height: 124%;
    will-change: transform;
}

/* Home hero sits flush — no parallax oversize, so the cover video is scaled up
   as little as geometry allows and the most of the frame shows. Parallax is
   turned off for this hero in main.js to match (a translate would expose the
   paper ground above a flush bg). */
.hero--home .hero__bg {
    top: 0;
    height: 100%;
}

/* Phones get a home hero master already cropped to roughly this box's aspect
   (see the swap in main.js). Keeping the 124% parallax oversize here would
   scale that master up and crop the flanking buildings straight back off, so
   the bg sits flush instead. The matching JS skips the parallax translate
   whenever that master is used. */
@media (max-width: 640px) {
    /* How much of a 16:9 hero clip a phone can show is fixed by geometry: with
       `cover`, the visible slice is the box's aspect ratio times the source
       height. At full viewport height that caps out around a quarter of the
       frame, which crops this two-building composition down to the stair
       between them. Running the hero shorter widens the box aspect, and the
       slice widens with it — roughly a quarter of the frame at 100svh becomes
       roughly a third at 72svh. Trade-off: the hero no longer fills the screen
       on load and the section below shows through at the bottom. */
    .hero--home {
        min-height: 72vh;
        min-height: 72svh;
    }

    /* Flush, not oversized — the 124% parallax slack would scale the clip back
       up and undo the width this shorter hero just bought. Paired with the
       parallax skip in main.js. */
    .hero--home .hero__bg {
        top: 0;
        height: 100%;
    }
}

/* Category page heroes — scrim at half prior strength (halfway to fully transparent) */
.hero--page .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom, rgba(12, 39, 53, 0.028) 0%, transparent 48%),
        radial-gradient(ellipse 190% 190% at 5% 95%, rgba(12, 39, 53, 0.07) 0%, transparent 72%);
    pointer-events: none;
    z-index: 1;
}

/* Bottom-left corner vignette — lifts the white hero copy off the video
   only where the copy actually sits, leaving the rest of the frame clean.
   Anchored to the section, not .hero__bg, so it stays put while the
   oversized bg parallaxes. Sits above the video (z 0/1), below the
   copy (.hero__content z 4, .hero__home-shell z 10). */
.hero--home::after,
.hero--page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(
        ellipse 88% 92% at 0% 100%,
        rgba(12, 39, 53, 0.46) 0%,
        rgba(12, 39, 53, 0.34) 22%,
        rgba(12, 39, 53, 0.20) 44%,
        rgba(12, 39, 53, 0.08) 66%,
        rgba(12, 39, 53, 0) 84%
    );
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .wrap { padding: 0 1.5rem; }
    .nav, .nav--scrolled { padding: 0.9rem 1.5rem; }
    .section { padding: 3.5rem 0; }
    .section--large { padding: 5rem 0; }
    .section.section--xlarge {
        padding-top: clamp(5rem, 10vw, 7.5rem);
        padding-bottom: clamp(4rem, 7vw, 6rem);
    }
    .hero__content { padding: 0 1.5rem 2.4rem; }
    .hero__home-top {
        left: 1.25rem;
        right: auto;
        max-width: min(26rem, 88vw);
    }

    .founder { grid-template-columns: 1fr; gap: 2.2rem; }

    .project-row,
    .project-row:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 1.35rem;
        direction: ltr;
        padding: 2.4rem 0;
    }

    .projects-stack .project-row,
    .projects-stack .project-row:nth-child(even) {
        padding-left: 1.35rem;
        padding-right: 1.35rem;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .projects-stack {
        border-radius: 16px;
    }

    .cta-strip { padding: 4rem 1.5rem; }
    .footer { padding: 3rem 1.5rem 1.6rem; }

    .subnav__inner { padding: 0 1.5rem; gap: 1.1rem; overflow-x: auto; }

    .entries--editorial .entry--editorial,
    .entries--editorial .entry--editorial-reverse {
        padding: 2.25rem 0;
    }
}

@media (max-width: 768px) {
    .nav__links { display: none; }
    .nav__mobile-toggle { display: block; }
    .nav__lang { margin-right: 1rem; }

    .service-intro__scope {
        gap: 0.45rem;
    }

    .service-intro__scope-item {
        font-size: 9.5px;
        padding: 0.38rem 0.85rem 0.42rem;
    }
}

@media (max-width: 768px) {
    .hero__home-top {
        top: auto;
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        left: max(1rem, env(safe-area-inset-left, 0px));
    }

    /* Copy wraps taller and fills the width on narrow screens — widen the
       corner so it still covers the block, same strength. */
    .hero--home::after,
    .hero--page::after {
        background-image: radial-gradient(
            ellipse 150% 88% at 0% 100%,
            rgba(12, 39, 53, 0.46) 0%,
            rgba(12, 39, 53, 0.34) 24%,
            rgba(12, 39, 53, 0.20) 46%,
            rgba(12, 39, 53, 0.08) 68%,
            rgba(12, 39, 53, 0) 86%
        );
    }
}

/* ═══════════════════════════════════════════
   HOME — Values / Benefits (under hero)
   ═══════════════════════════════════════════ */
.values {
    background: var(--c-warm-white);
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    border-bottom: 1px solid var(--c-line-light);
}

.values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.values__item {
    padding: 0.5rem clamp(1.25rem, 2.5vw, 2.5rem);
    text-align: center;
    border-right: 1px solid var(--c-line-light);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.values__item:last-child {
    border-right: none;
}

.values__icon {
    color: var(--c-gold);
    width: 44px;
    height: 44px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.values__icon svg {
    width: 100%;
    height: 100%;
}

.values__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--c-navy);
    letter-spacing: 0.02em;
    margin: 0 0 0.85rem;
}

.values__copy {
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.7;
    color: var(--c-text-muted);
    max-width: 28ch;
    margin: 0;
}

@media (max-width: 880px) {
    .values__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .values__item {
        border-right: none;
        border-bottom: 1px solid var(--c-line-light);
        padding-bottom: 2.5rem;
    }
    .values__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* ═══════════════════════════════════════════
   HOME — Practice: editorial folio (minimal)
   ═══════════════════════════════════════════ */
.section.section--entries-editorial {
    background: #fff;
    padding-top: clamp(5rem, 10vw, 8rem);
    padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

section#entries.section--entries-editorial {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Second entries-editorial (residential) — sits flush against the footer/cta-strip below */
section.section--entries-editorial:not(#entries) {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

/* When the residential section is followed by site-bottom on home, tighten the cta-strip */
section.section--entries-editorial:not(#entries) + .site-bottom .cta-strip--split {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.wrap--editorial {
    max-width: 1120px;
}

.entries-intro {
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
    padding-bottom: 0.5rem;
}

.entries-intro__label {
    font-family: var(--f-sans);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--c-text-soft);
    margin-bottom: 1rem;
}

.entries-intro__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    line-height: 1.18;
    color: var(--c-navy);
    max-width: 22ch;
    letter-spacing: -0.02em;
}

.entries-intro__title em {
    font-style: italic;
    color: var(--c-gold);
}

.entries-intro__lede {
    margin-top: 1.1rem;
    font-size: 12px;
    line-height: 1.7;
    color: var(--c-text-muted);
    font-weight: 300;
    max-width: 32rem;
}

.entries--editorial {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.entry--editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(240px, 340px);
    gap: clamp(2rem, 4.5vw, 3.75rem);
    align-items: start;
    padding: clamp(2.25rem, 3.5vw, 3.25rem) 0;
    text-decoration: none;
    color: inherit;
}

.entry--editorial:first-of-type {
    padding-top: 0;
}

.entry--editorial .entry__visual {
    grid-column: 1;
    grid-row: 1;
}

.entry--editorial .entry__copy {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0.2rem;
}

.entry--editorial-reverse {
    grid-template-columns: minmax(240px, 340px) minmax(0, 1.12fr);
}

.entry--editorial-reverse .entry__visual {
    grid-column: 2;
}

.entry--editorial-reverse .entry__copy {
    grid-column: 1;
}

.entry--editorial .entry__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-cool-gray);
}

.entry--editorial .entry__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.entry--editorial:hover .entry__img {
    transform: scale(1.02);
}

.entry--editorial .entry__category {
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--c-text-soft);
    margin-bottom: 1.1rem;
    display: block;
}

.entries--editorial > .entry-stage:last-child .entry__category {
    margin-bottom: 0;
}

.entry--editorial .entry__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.15rem, 1.65vw, 1.45rem);
    line-height: 1.26;
    color: var(--c-navy);
    margin-bottom: 0.85rem;
    letter-spacing: -0.015em;
}

.entry--editorial .entry__title em {
    font-style: italic;
    color: var(--c-gold);
}

.entry--editorial .entry__text {
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--c-text-muted);
    margin-bottom: 1.1rem;
    font-weight: 300;
    max-width: none;
}

.entry__link {
    font-family: var(--f-sans);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-navy);
    display: inline-block;
    margin-top: 0.15rem;
    position: relative;
    overflow: hidden;
    /* Colour/fill quartered (0.6s -> 0.15s, 1.2s -> 0.3s): the white fill is
       driven by --pw over the last stretch of the expand, and these long
       durations smeared that change out in time so the button read as
       lagging behind the scroll. box-shadow is left alone — that's the gold
       hover glow, not the white turn. */
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.3s ease, box-shadow 0.8s ease;
    box-shadow: none;
}

.entry__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 20%,
        rgba(255, 255, 255, 0.0) 35%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.0) 65%,
        transparent 80%,
        transparent 100%
    );
    transform: translateX(-130%);
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    border-radius: inherit;
}

.entry--editorial .entry__link {
    padding: 0.72rem 1.35rem;
    border: 1px solid var(--c-navy);
    border-radius: 0;
    margin-top: 0.3rem;
    overflow: hidden;
}

.entry__link:hover {
    color: #fff;
    background-color: var(--c-gold);
    border-color: var(--c-gold);
    box-shadow: 0 0 20px 6px rgba(164, 127, 84, 0.25);
}

.entry__link:hover::before {
    animation: btn-sheen 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (max-width: 1024px) {
    /* No horizontal padding here — .entry-stage/.entry-stage__pin/.entry-
       stage__track below are sized in vw units and need the full viewport
       width to pin, expand and translate correctly at every breakpoint. */
    .entry-stage + .entry-stage { padding-top: 1rem; }

    .entry--editorial,
    .entry--editorial-reverse {
        grid-template-columns: 1fr;
        gap: 1.15rem;
        padding: 2rem 0;
    }

    .entries--editorial > .entry-stage:last-child .entry--editorial,
    .entries--editorial > .entry-stage:last-child .entry--editorial-reverse {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* Text above the image, image below — per feedback, the image-first
       order read oddly once the copy also glides to screen-center during
       the expand (see the JS/CSS further down): it looked like the text
       was rising up "from the bottom." Swapped so the resting card already
       reads top-to-bottom the way the animation ends up. */
    .entry--editorial .entry__visual,
    .entry--editorial-reverse .entry__visual {
        grid-column: 1;
        grid-row: 2;
    }

    .entry--editorial .entry__copy,
    .entry--editorial-reverse .entry__copy {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0;
    }

    /* The teaser card's copy used to just sit wherever it fell in the
       stacked image/text grid — fine at rest, but once the image expands
       full-screen behind it (see the scroll-pin JS), that static position
       reads as low and small against a now-huge photo. Center it instead;
       main.js glides it from its resting spot to true screen-center in
       sync with the same expand progress driving the image. */
    .entry-stage .entry__copy {
        text-align: center;
        /* Promoted alongside .entry__media — main.js transforms both every
           scroll frame during the expand. */
        will-change: transform;
    }

    .entry-stage .entry__link {
        margin-left: auto;
        margin-right: auto;
    }

    /* The scroll-pin's expand phase covers the media box up to full-screen.
       At the default 16/10 (landscape) aspect ratio, a portrait phone box is
       so much shorter than the viewport that the cover-scale needed is
       enormous (~4x) — the image visibly "pops"/snaps instead of easing in.
       Starting from a portrait-ish box on narrow screens keeps that scale
       modest so the same animation reads as a smooth zoom, not a glitch.
       Pulled back from 3/5 to 3/4 per feedback that the resting card image
       was too tall/large before any scrolling — the extra scale this adds
       is offset by the longer phase1 window below (already mobile-only). */
    .entry-stage .entry__media {
        aspect-ratio: 3 / 4;
    }

}

/* Scroll-pinned reveal — same mechanic at every width: vertical scroll
   pins the section, expands the teaser image, then pans horizontally
   through the intro/split/cta panels. Sized in vw/vh so it fits a
   portrait phone exactly the way it fits a desktop viewport. */
    .section--entries-editorial { padding-bottom: 0; }

    .entries--editorial { gap: 0; }

    .entry-stage {
        --p: 0;
        position: relative;
        height: 220vh;
    }

    .entry-stage__pin {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #fff;
    }

    .entry-stage__inner {
        width: 100%;
        position: relative;
    }

    .entry-stage .entry--editorial {
        padding: 0;
    }

    .entry-stage .entry__visual { position: relative; z-index: 1; }
    .entry-stage .entry__copy   { position: relative; z-index: 2; }

    .entry-stage .entry__media {
        position: relative;
        will-change: transform;
        transform-origin: center center;
        backface-visibility: hidden;
    }

    /* Subtle dark scrim that fades in with --p for image legibility */
    .entry-stage .entry__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: #000;
        opacity: calc(var(--p) * 0.22);
        pointer-events: none;
    }

    /* Disable hover scale during the scroll-driven animation */
    .entry-stage .entry--editorial:hover .entry__img { transform: none; }

    /* Text colors interpolate to white as --p approaches 1 */
    .entry-stage .entry__category {
        color: color-mix(in srgb, var(--c-text-soft) calc((1 - var(--p)) * 100%), #fff calc(var(--p) * 100%));
    }
    .entry-stage .entry__title {
        color: color-mix(in srgb, var(--c-navy) calc((1 - var(--p)) * 100%), #fff calc(var(--p) * 100%));
    }
    .entry-stage .entry__title em {
        color: color-mix(in srgb, var(--c-gold) calc((1 - var(--p)) * 100%), #fff calc(var(--p) * 100%));
    }
    .entry-stage .entry__text {
        color: color-mix(in srgb, var(--c-text-muted) calc((1 - var(--p)) * 100%), #fff calc(var(--p) * 100%));
    }

    /* Expands with --pe; white fill ramps in over the final ~6% of --p */
    .entry-stage .entry__link {
        --pe: clamp(0, calc(var(--p) / 0.8), 1);
        --pw: clamp(0, calc((var(--p) - 0.94) / 0.06), 1);
        display: inline-block;
        padding-block: calc(0.52rem + var(--pe) * 0.35rem);
        padding-inline: calc(0.72rem + var(--pe) * 0.63rem);
        border-radius: 0;
        border: 1px solid color-mix(
            in srgb,
            var(--c-navy) calc((1 - var(--pw)) * 100%),
            rgba(255, 255, 255, 0.5) calc(var(--pw) * 100%)
        );
        color: color-mix(
            in srgb,
            var(--c-navy) calc((1 - var(--pw)) * 100%),
            #0a0a0a calc(var(--pw) * 100%)
        );
        background-color: color-mix(in srgb, #fff calc(var(--pw) * 100%), transparent);
        transform: scale(calc(0.96 + var(--pe) * 0.06));
        transform-origin: center center;
        /* Quartered to match the base .entry__link rule — see the note there.
           This is the one that actually governs during the scroll expand. */
        transition: color 0.15s ease, border-color 0.15s ease, background-color 0.3s ease, box-shadow 0.8s ease;
        will-change: transform;
    }

    .entry-stage .entry__link:hover {
        color: #fff;
        background-color: var(--c-gold);
        border-color: var(--c-gold);
        box-shadow: 0 0 20px 6px rgba(164, 127, 84, 0.25);
    }

    .entry-stage .entry__link:hover::before {
        animation: btn-sheen 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Lighter readability shadow on copy (skips the link, which has its own bg) */
    .entry-stage .entry__category,
    .entry-stage .entry__title,
    .entry-stage .entry__text {
        text-shadow: 0 1px 10px rgba(0, 0, 0, calc(var(--p) * 0.18));
    }

    /* Combined entry-stage + horizontal scroll: image expands during phase 1,
       then the track translates left through additional panels in phase 2. */
    .entry-stage--with-h {
        height: 460vh;
    }

    .entry-stage--with-h .entry-stage__pin {
        display: block;
        align-items: stretch;
    }

    .entry-stage--with-h .entry-stage__track {
        display: flex;
        height: 100%;
        width: 300vw; /* 100vw entry + 50vw intro + 100vw split + 50vw cta */
        will-change: transform;
    }

    .entry-stage--with-h .entry-stage__inner {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100%;
        display: flex;
        align-items: center;
        /* NOTE: .wrap's `margin: 0 auto` is deliberately left intact here.
           This element is .wrap.wrap--editorial, so its width is clamped to
           1120px even though its flex-basis is 100vw — the auto margins
           absorb that leftover (100vw - 1120px) and are what centre the
           teaser card horizontally in the viewport on desktop. Zeroing them
           (an earlier attempt at a mobile gap fix) slammed the card flush
           against the left edge with a dead gutter on the right. */
    }

    .entry-stage--with-h .h-panel {
        flex-shrink: 0;
    }

    /* Wrapper around the entry teaser + intro/split/cta panels — sizes to
       their combined vw widths so the pin/translate math above (300vw
       total) still holds. */
    .h-panel-rail {
        display: flex;
        flex: 0 0 300vw; /* 100vw entry + 50vw intro + 100vw split + 50vw cta */
        width: 300vw;
        height: 100%;
    }

/* ═══════════════════════════════════════════
   HOME CTA — split layout, right-aligned action
   ═══════════════════════════════════════════ */
.cta-strip--split {
    text-align: left;
    padding: 5.5rem 2.5rem;
}

.cta-strip--split .cta-strip__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: end;
}

.cta-strip--split .cta-strip__signature {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-self: end;
}

.cta-strip__signature-mark {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    color: var(--c-gold-light);
    letter-spacing: 0.02em;
    display: inline-block;
}

.cta-strip__signature-meta {
    font-family: var(--f-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.cta-strip--split .cta-strip__action {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.cta-strip--split .cta-strip__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.4;
    margin: 0 0 1.6rem;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.005em;
}

.cta-strip--split .cta-strip__title em {
    color: var(--c-gold-light);
    font-style: italic;
}

.cta-strip--split .cta-strip__copy {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: -0.9rem 0 1.7rem;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 768px) {
    .cta-strip--split { padding: 4rem 1.5rem; text-align: center; }
    .cta-strip--split .cta-strip__copy { margin: -0.4rem auto 1.7rem; }
    .cta-strip--split .cta-strip__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    .cta-strip--split .cta-strip__action { align-items: center; text-align: center; }
    .cta-strip--split .cta-strip__title { margin: 0 auto 1.6rem; }
    .cta-strip--split .cta-strip__signature { align-items: center; }
    .cta-strip__signature-meta { padding-left: 0; }
}

/* ═══════════════════════════════════════════
   HORIZONTAL SCROLL (home page) — begins after each entry-stage expansion
   Pattern matches .entry-stage / .entry-stage__pin for Safari compatibility.
   ═══════════════════════════════════════════ */
.h-scroll {
    position: relative;
    height: 280vh; /* 100vh sticky + 180vh scroll → 150vw horizontal travel */
    background: #fff;
}

.h-scroll__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

.h-scroll__track {
    display: flex;
    height: 100%;
    width: 250vw;
}

.h-panel {
    flex: 0 0 50vw;
    width: 50vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    transition: z-index 0.3s ease;
}

.h-panel:hover {
    z-index: 100;
}

.h-panel--full {
    flex: 0 0 100vw;
    width: 100vw;
}

/* Split panel — 100vw wide: left side has 2 stacked tiles, right side has 1 full-height tile */
.h-panel--split {
    flex: 0 0 100vw;
    width: 100vw;
    display: flex;
    flex-direction: row;
}

.h-panel__split-stack {
    flex: 0 0 50vw;
    width: 50vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.h-panel__half--full {
    flex: 0 0 50vw;
    width: 50vw;
    height: 100vh;
}

/* .h-panel (the intro/cta text panels) is 50vw above — two of them fit side
   by side on a wide desktop window, but on a phone that's half the screen
   and everything inside reads cramped/clipped. Every panel in the pan
   sequence goes full viewport width below 1024px instead (the featured-
   projects panel goes even wider, see below), and the rail/track totals
   are bumped from 300vw to 425vw to match (100vw teaser + 100vw intro +
   125vw split + 100vw cta). Placed after the base width rules above so it
   wins the cascade at equal specificity. */
@media (max-width: 1024px) {
    .h-panel {
        flex: 0 0 100vw;
        width: 100vw;
    }

    .entry-stage--with-h .entry-stage__track {
        width: 425vw;
    }

    .h-panel-rail {
        flex: 0 0 425vw;
        width: 425vw;
    }

    /* Featured-projects panel: on a wide desktop window, two columns (one
       big project left, two smaller ones stacked right) reads fine. On a
       narrow phone that column-split leaves everything cramped. Per
       feedback, flip to two ROWS instead — top row: the two smaller
       projects side by side; bottom row: the one bigger/featured project,
       full width. Every project image goes edge-to-edge width either way,
       it's just organized to fit a portrait screen instead of a wide one.
       Also given more room than the other panels (125vw vs 100vw) per
       feedback that it felt cramped even at full viewport width — the
       pan simply carries a little further to clear it, same as any other
       panel width change already baked into this mechanic. */
    .h-panel--split {
        flex: 0 0 125vw;
        width: 125vw;
        flex-direction: column;
    }

    /* Both children have an explicit `flex: 0 0 50vw` above — flex-basis
       wins over `width` for flex sizing when both are set, so the flex
       shorthand has to be overridden here too, not just width/height. */
    .h-panel__split-stack {
        order: 1;
        flex: 0 0 38vh;
        flex-direction: row;
        width: 100%;
        height: 38vh;
    }

    .h-panel__half--full {
        order: 2;
        flex: 0 0 62vh;
        width: 100%;
        height: 62vh;
    }

    /* Mobile-only: contain paint work to each slide (perf, keeps the pan
       animation's per-frame paint local instead of rechecking the whole
       rail) and isolate the teaser's z-index (1/2, image-behind-text
       layering) so it can't leak out and outrank the next panel in the
       rail. Both scoped here rather than left global, so desktop's
       rendering is untouched from its pre-mobile-work state. */
    .h-panel {
        contain: paint;
    }

    .entry-stage__inner {
        isolation: isolate;
    }
}

/* Intro panels: flat warm-white. CTA panels: white→beige gradient (beige left, white right) */
.h-panel--intro,
.h-panel--cta {
    background: var(--c-warm-white);
    display: flex;
    align-items: center;
}

.h-panel--intro {
    background: linear-gradient(225deg, #06141b 0%, #1b3a50 100%);
}

.h-panel--cta {
    background: linear-gradient(225deg, #06141b 0%, #1b3a50 100%);
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.h-panel--cta .h-panel__inner {
    text-align: right;
}

.h-panel--cta .h-panel__title,
.h-panel--cta .h-panel__copy {
    margin-left: auto;
}

.h-panel--cta .h-panel__actions {
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1.1rem;
    margin-top: 1.4rem;
}

/* See more — link with arrow, no border */
.h-panel--cta .h-panel__btn--outline {
    border: none;
    background: transparent;
    padding: 0.35rem 0;
    color: #fff;
    letter-spacing: 0.28em;
    transition: color 0.3s ease;
    font-weight: 600;
}

.h-panel--cta .h-panel__btn--outline::after {
    content: '\2192';
    display: inline-block;
    margin-left: 0.55rem;
    font-size: 11px;
    letter-spacing: 0;
    transition: transform 0.3s ease;
}

.h-panel--cta .h-panel__btn--outline:hover {
    background: transparent;
    color: var(--c-gold);
    border: none;
}

.h-panel--cta .h-panel__btn--outline:hover::after {
    transform: translateX(4px);
}

/* Color adjustments for light beige bg on intro + cta panels */
.h-panel--intro .h-panel__eyebrow,
.h-panel--cta .h-panel__eyebrow {
    color: var(--c-gold);
}

.h-panel--intro .h-panel__title,
.h-panel--cta .h-panel__title {
    color: #fff;
}

.h-panel--intro .h-panel__title em,
.h-panel--cta .h-panel__title em {
    color: var(--c-gold);
}

.h-panel--intro .h-panel__copy,
.h-panel--cta .h-panel__copy {
    color: #fff;
    opacity: 0.85;
}

/* CTA filled (Contact us) */
.h-panel--cta .h-panel__btn--filled {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: #fff;
}
.h-panel--cta .h-panel__btn--filled:hover {
    background: transparent;
    color: var(--c-gold);
}

/* Correction per feedback: the CTA (end) panel keeps its original
   right edge-alignment on mobile too, matching desktop. It's the
   *middle* panel (intro, "From plan to place." / "Of place, of craft.")
   that should be centered, not this one. See .h-panel--intro below. */

/* Intro panel ("From plan to place." / "Of place, of craft.") — centered
   on mobile. Placed after the base .h-panel--intro rules above so it wins
   the cascade at equal specificity. */
@media (max-width: 1024px) {
    .h-panel--intro .h-panel__inner {
        text-align: center;
    }

    /* CTA panel keeps its horizontal edge-alignment (justify-content), but
       vertically it was bottom-pinned (align-items: flex-end + a bottom
       pad) which on a tall phone panel dumped it right at the floor.
       Centre it on the Y axis instead. */
    .h-panel--cta {
        align-items: center;
        padding-bottom: 0;
    }
}

.h-panel__inner {
    display: flex;
    flex-direction: column;
    padding: 0 clamp(2rem, 5vw, 5rem);
    max-width: 32rem;
    margin: 0 auto;
}

/* Panels are full viewport width now (see the mobile pan-panel rules
   above), but the copy inside was still boxed down with desktop-scale
   side padding, reading narrower than the panel itself. Open it up on
   mobile — intro (the panel right after the teaser image expands) gets
   the most room since it's mostly a single short statement; the rest
   get a smaller, ~30% reduction in padding. */
@media (max-width: 1024px) {
    .h-panel__inner {
        max-width: 100%;
        padding: 0 clamp(1.4rem, 4vw, 2.5rem);
    }

    .h-panel--intro .h-panel__inner {
        padding: 0 0.85rem;
    }
}

.h-panel__drawing {
    color: var(--c-gold);
    width: clamp(180px, 32vw, 280px);
    height: auto;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.85;
    text-align: center;
    order: 10;
    padding: 16px 16px 32px 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 -2px 4px rgba(0, 0, 0, 0.04);
}

.h-panel__drawing svg {
    width: 100%;
    height: auto;
    display: block;
}

.h-panel__eyebrow {
    display: block;
    font-family: var(--f-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 1.4rem;
}

.h-panel__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.2vw, 2.8rem);
    line-height: 1.15;
    color: var(--c-navy);
    letter-spacing: -0.012em;
    margin-bottom: 1.4rem;
}

.h-panel__title em { font-style: italic; color: var(--c-gold); }

.h-panel__copy {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-text-muted);
    margin-bottom: 1.6rem;
    max-width: 36ch;
}

.h-panel__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

/* Feature panel (full-bleed image with text overlay) */
.h-panel--feature .h-panel__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h-panel__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.h-panel--split .h-panel__overlay,
.h-panel__split-stack .h-panel__overlay,
.related-card .h-panel__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, transparent 65%),
                linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 100%);
}

/* Related-card images rest at a soft navy tint so they read as distinct
   from the main gallery; hovering fades it out into the usual gold hover. */
.related-card .h-panel__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 35%, rgba(74, 112, 145, 0.4) 100%);
    transition: opacity 0.5s ease;
}

.related-card:hover .h-panel__overlay::after {
    opacity: 0;
}

.h-panel__content {
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    padding: clamp(2rem, 4vw, 3.2rem);
    color: #fff;
    z-index: 6;
    text-align: right;
}

.h-panel__content--small { padding: clamp(1.25rem, 2.5vw, 2rem); }

.h-panel__location {
    display: block;
    font-family: var(--f-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.7rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.h-panel__feature-title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.82vw, 1.54rem);
    line-height: 1.18;
    margin-bottom: 0.8rem;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.h-panel__content--small .h-panel__feature-title {
    font-size: clamp(0.77rem, 1.26vw, 1.05rem);
    margin-bottom: 0.6rem;
}

.h-panel__feature-text {
    font-size: 13px;
    line-height: 1.65;
    max-width: 38ch;
    margin-bottom: 1.3rem;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* Tiles inside the split panel */
.h-panel__half {
    flex: 0 1 auto;
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px 16px 32px 16px;
    background: #F5F3F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 -2px 4px rgba(0, 0, 0, 0.04);
}

.h-panel__half .h-panel__img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.h-panel__half:hover .h-panel__img { transform: scale(1.04); }

/* Featured projects in h-scroll (no borders, full height) */
.h-panel--split .h-panel__half,
.h-panel__split-stack .h-panel__half,
.related-card {
    flex: 1 1 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    display: block;
}

.h-panel--split .h-panel__half .h-panel__img,
.h-panel__split-stack .h-panel__half .h-panel__img,
.related-card .h-panel__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gold sheen sweep — repeats while hovering */
@keyframes h-panel-sheen {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(130%);  }
}

.h-panel--split .h-panel__half::before,
.h-panel__split-stack .h-panel__half::before,
.related-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 20%,
        rgba(164, 127, 84, 0.0) 35%,
        rgba(212, 175, 120, 0.55) 50%,
        rgba(164, 127, 84, 0.0) 65%,
        transparent 80%,
        transparent 100%
    );
    transform: translateX(-130%);
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

.h-panel--split .h-panel__half:hover::before,
.h-panel__split-stack .h-panel__half:hover::before,
.related-card:hover::before {
    animation: h-panel-sheen 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Gold tint (intensifies over 2s) + visible gold border on hover */
.h-panel--split .h-panel__half::after,
.h-panel__split-stack .h-panel__half::after,
.related-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(164, 127, 84, 0);
    border: 6px solid transparent;
    pointer-events: none;
    z-index: 4;
    transition: background-color 2s ease, border-color 0.4s ease, box-shadow 2s ease;
    box-shadow: 0 0 0 0 rgba(164, 127, 84, 0);
}

.h-panel--split .h-panel__half:hover::after,
.h-panel__split-stack .h-panel__half:hover::after,
.related-card:hover::after {
    background-color: rgba(120, 90, 55, 0.45);
    border-color: var(--c-gold);
    box-shadow: 0 0 40px 12px rgba(164, 127, 84, 0.35);
}

/* Title + button glide to center on hover */
.h-panel--split .h-panel__half .h-panel__content,
.h-panel__split-stack .h-panel__half .h-panel__content,
.related-card .h-panel__content {
    z-index: 5;
    color: #fff;
    transition: right 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                bottom 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                text-align 0s;
}

.h-panel--split .h-panel__half:hover .h-panel__content,
.h-panel__split-stack .h-panel__half:hover .h-panel__content,
.related-card:hover .h-panel__content {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    text-align: center;
}

.h-panel--split .h-panel__half:hover .h-panel__img,
.h-panel__split-stack .h-panel__half:hover .h-panel__img,
.related-card:hover .h-panel__img {
    transform: none;
}

/* Placeholder tiles (no photography yet) */
.h-panel__half--placeholder .h-panel__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245, 240, 235, 0.95) 0%, rgba(232, 226, 218, 0.65) 100%);
    z-index: 0;
}

/* Featured project panels (full-bleed images) */
.h-panel--feature {
    flex: 1 1 50%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
}

.h-panel--feature .h-panel__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.h-panel--feature:hover .h-panel__img { transform: none; }

/* Buttons */
.h-panel__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0.85rem 1.6rem;
    border: 1px solid currentColor;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}

.h-panel__btn--small { padding: 0.65rem 1.2rem; font-size: 8.5px; letter-spacing: 0.26em; }

.h-panel__btn--light {
    color: #fff;
    background: transparent;
    border: none;
    padding: 0;
    gap: 0.5rem;
    font-weight: 600;
}

.h-panel__btn--light::after {
    content: '→';
    font-size: 11px;
    transition: transform 0.3s ease;
}

.h-panel__btn--light:hover::after {
    transform: translateX(3px);
}

.h-panel__btn--outline { color: var(--c-navy); background: transparent; border-color: var(--c-navy); }
.h-panel__btn--outline:hover { background: var(--c-navy); color: #fff; }

.h-panel__btn--filled { color: #fff; background: var(--c-gold); border-color: var(--c-gold); }
.h-panel__btn--filled:hover { background: var(--c-navy); border-color: var(--c-navy); }

/* .h-scroll/.h-scroll__track/.h-panel etc. are unconditional (not gated
   to desktop) now — see the scroll-pinned reveal rules above, which apply
   at every width so mobile gets the exact same pin/expand/pan mechanic,
   just scaled to a portrait viewport via the same vw/vh units. */
@media (max-width: 1024px) {
    .h-scroll { height: auto; }
    .h-scroll__sticky {
        position: static;
        height: auto;
        overflow: visible;
    }
    .h-scroll__track {
        flex-direction: column;
        width: 100%;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════
   HOME — Who We Are highlight (between residential and footer)
   ═══════════════════════════════════════════ */
.home-who {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: calc(clamp(3rem, 5vw, 5rem) + 100px) 0 calc(clamp(3rem, 6vw, 5.5rem) + 150px);
}

/* Plan drawing bleeds from the BOTTOM-right (flipped from the original top-right) */
.home-who__art {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    inset: auto;
    left: clamp(50%, 38vw, 62%);
    right: calc(-55vw + 120px);
    top: clamp(80px, 10vh, 180px);
    bottom: clamp(-280px, -22vw, -100px);
    width: auto;
    /* Matches the Who We Are page header: pushed right of the copy measure
       and further down, so the five-entry awards list can never reach it. */
    transform: translate(100px, 880px);
}

.home-who__plan {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: clamp(145px, 19vmin, 220px);
    width: auto;
    max-width: none;
    transform: scaleY(-1) scale(4);
    transform-origin: left top;
    opacity: 0.92;
    margin-top: 50px;
}

.home-who__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 2.5rem;
    position: relative;
    z-index: 2;
}

.home-who__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 0.85rem;
}

.home-who__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.18;
    color: var(--c-navy);
    max-width: 38rem;
    letter-spacing: -0.005em;
    flex: 1;
}

.home-who__title em { font-style: italic; color: var(--c-gold); }

.home-who__sub {
    margin-top: 1.5rem;
    max-width: 38rem;
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text-muted);
    font-weight: 300;
}

.home-who__awards {
    margin-top: 2.2rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    max-width: 38rem;
    position: relative;
    z-index: 2;
}

.home-who__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.82;
    transition: opacity 0.25s ease;
}

.home-who__logo:hover { opacity: 1; }

.home-who__logo img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.home-who__list {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    max-width: 38rem;
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.5rem;
}

.home-who__list-item {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    font-size: 12.5px;
    line-height: 1.55;
}

.home-who__list-item::before {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    background: var(--c-gold);
    border-radius: 50%;
    transform: translateY(-2px);
}

.home-who__list-year {
    font-family: var(--f-display);
    font-size: 1rem;
    color: var(--c-gold);
    min-width: 2.6rem;
}

.home-who__list-title {
    font-family: var(--f-sans);
    font-weight: 400;
    color: var(--c-text-muted);
    letter-spacing: 0.01em;
}

.home-who__cta {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

.home-who__cta .btn--light {
    color: var(--c-navy);
    border-color: var(--c-navy);
    background: transparent;
    text-shadow: none;
    box-shadow: none;
    transition: none;
}

.home-who__cta .btn--light:hover {
    color: var(--c-navy);
    border-color: var(--c-navy);
    background: transparent;
    box-shadow: none;
}

@media (max-width: 900px) {
    .home-who__awards { gap: 0.75rem; }
    .home-who__logo img { width: 80px; height: 80px; }
}

/* Below ~640px the bleeding plan drawing has no room to breathe without
   overlapping the copy — drop the absolute bleed and place it as a normal,
   cropped strip after the text instead. No overlap, still feels like the
   same studio drawing, just tamed for a narrow column. */
@media (max-width: 640px) {
    .home-who {
        display: flex;
        flex-direction: column;
        padding: calc(clamp(3rem, 5vw, 5rem) + 88px) 0 3.5rem;
    }

    .home-who__art {
        position: static;
        order: 2;
        inset: auto;
        left: auto; right: auto; top: auto; bottom: auto;
        width: 100%;
        height: 200px;
        overflow: hidden;
        transform: none;
        margin-top: 2.75rem;
    }

    .home-who__plan {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: 30% 70%;
        transform: scaleY(-1);
        transform-origin: center;
        margin-top: 0;
        opacity: 1;
    }

    /* Learn More drops below the paragraph. Sitting beside the title it took
       its own column width and left the headline almost none. display:contents
       lifts the header's two children into this column so the button can be
       ordered after the sub without touching the markup (and so the desktop
       side-by-side header stays exactly as it is). */
    .home-who__inner {
        order: 1;
        display: flex;
        flex-direction: column;
    }

    .home-who__header { display: contents; }

    .home-who__inner > .eyebrow {
        order: 1;
        align-self: flex-start;
    }

    .home-who__title {
        order: 2;
        flex: none;
        margin-top: 0.85rem;
    }

    .home-who__sub { order: 3; }

    .home-who__cta {
        order: 4;
        margin-top: 1.75rem;
        align-self: flex-start;
    }

    .home-who__awards { order: 5; }
    .home-who__list { order: 6; }
}

/* ═══════════════════════════════════════════
   HOME — mobile type/button polish
   Placed last so these single-class overrides reliably win the cascade
   over their base (often much-earlier-in-file) declarations, without
   having to hunt down every prior occurrence. Scoped to max-width:1024px
   only — desktop keeps its original sizing untouched.
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Teaser card headline reads as a centered hero caption now (see the
       JS that glides it to screen-center during the expand) — the old
       ~18px floor was sized for a small card next to its photo, not a
       caption over a full-bleed image. */
    .entry--editorial .entry__category {
        font-size: 9.5px;
    }
    .entry--editorial .entry__title {
        font-size: clamp(1.6rem, 6vw, 2.15rem);
        line-height: 1.2;
    }
    .entry--editorial .entry__text {
        font-size: 14px;
    }

    /* Buttons — "a bit fatter" per feedback, across every button style
       that appears on the homepage. */
    .btn {
        padding: 0.9rem 1.9rem;
        font-size: 10.5px;
    }
    .entry--editorial .entry__link {
        padding: 0.85rem 1.6rem;
        font-size: 9.5px;
    }
    /* Fixed padding, deliberately NOT the calc(var(--pe)) form the desktop
       rule uses: --pe changes on every scroll frame during the expand, and
       animating padding forces a layout pass each time. The box just stays
       at its (already fatter) resting size on mobile; only its colours ramp,
       which is paint-only. See the perf note at the end of this file. */
    .entry-stage .entry__link {
        padding-block: 0.8rem;
        padding-inline: 1.15rem;
        font-size: 10px;
        transform: none;
        will-change: auto;
    }
    .h-panel__btn {
        padding: 1.05rem 2rem;
        font-size: 10.5px;
    }
    .h-panel__btn--small {
        padding: 0.85rem 1.6rem;
        font-size: 9.5px;
    }

    /* Panel copy — a touch more presence at phone width. */
    .h-panel__eyebrow {
        font-size: 10px;
    }
    .h-panel__title {
        font-size: clamp(2rem, 7vw, 2.6rem);
    }
    .h-panel__copy {
        font-size: 14.5px;
    }
}

/* Featured-projects images (home page, mobile only, testing) — a navy
   vignette fading in from the edges toward a clear center, purely to lift
   contrast for the white location/title/button text sitting on top.
   Layered alongside (not replacing) the existing bottom-darkening gradient.
   (First two passes at this used a radial-gradient sized in %, which reads
   as ellipse-radius-relative-to-itself rather than box-edge-relative on a
   rectangular box — barely visible in practice. An inset box-shadow hugs
   the actual edges of the box directly and is far more predictable.) */
@media (max-width: 1024px) {
    .h-panel--split .h-panel__overlay,
    .h-panel__split-stack .h-panel__overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, transparent 65%);
        box-shadow: inset 0 0 3.5rem 0.5rem rgba(12, 39, 53, 0.55);
    }
}