/* ==========================================================================
   style.css — layout, typography, components, responsiveness.
   --------------------------------------------------------------------------
   Responsive strategy (three tiers, used consistently in this file):
     phone    @media (max-width: 480px)   single-column CTAs and form fields,
                                          full-width submit, compact timeline
     compact  @media (max-width: 860px)   overlay navigation, stacked hero,
                                          one-column case studies, vertical
                                          business process, lightbox toolbar
     wide     @media (max-width: 1024px)  only tightens section rhythm
   Everything in between is fluid (clamp / min / max) so 320px through 1024px
   never depends on a hard breakpoint to avoid clipping or overflow.

   The fixed header has ONE authoritative offset: --header-h. The .nav-spacer
   element, scroll-padding-top and the overlay menu all read it.
   ========================================================================== */

:root {
    --gold: #c9a962;
    --gold-bright: #dcc07f;
    --gold-soft: rgba(201, 169, 98, 0.6);
    --ink: #0a0a0a;
    --charcoal: #121212;
    --panel: #141414;
    --panel-2: #191919;
    --panel-border: rgba(201, 169, 98, 0.18);
    --hairline: rgba(255, 255, 255, 0.10);
    --text-soft: rgba(255, 255, 255, 0.72);
    /* 0.5 white on ink = 5.3:1 — the previous 0.45 measured 4.48:1 and missed AA. */
    --text-faint: rgba(255, 255, 255, 0.5);
    --cream: #f4efe4;

    /* Spacing scale */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 112px;

    /* Responsive tokens */
    --measure: 1200px;                       /* readable content width */
    --gutter: clamp(20px, 5vw, 56px);        /* page side padding */
    --header-h: 72px;                        /* fixed header height (unscrolled) */
    --section-y: clamp(56px, 9vw, 112px);    /* vertical rhythm between sections */
    --block-y: clamp(36px, 6vw, 64px);       /* inside-section spacing */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Easing and duration tokens (shared with motion.css) */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.25s;
    --dur-mid: 0.6s;
    --dur-slow: 1s;
}

/* Metric-matched local fallbacks. The Google Fonts stylesheet is loaded
   without blocking render, so text first paints in these faces; their
   size-adjust and vertical overrides were computed from the real font files
   against Arial/Georgia, so the swap to the web font barely moves a line. */
@font-face {
    font-family: 'Lato Fallback';
    src: local('Arial'), local('Roboto'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 95.2%;
    ascent-override: 103.67%;
    descent-override: 22.37%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Jost Fallback';
    src: local('Arial'), local('Roboto'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 90%;
    ascent-override: 118.94%;
    descent-override: 41.69%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Marcellus Fallback';
    src: local('Georgia'), local('Times New Roman'), local('Times');
    size-adjust: 97.5%;
    ascent-override: 99.92%;
    descent-override: 28.7%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Cormorant Fallback';
    font-style: italic;
    src: local('Georgia Italic'), local('Georgia-Italic'), local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT');
    size-adjust: 78.2%;
    ascent-override: 118.13%;
    descent-override: 36.69%;
    line-gap-override: 0%;
}

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

html {
    scroll-behavior: smooth;
    /* Anchor targets (#contact) land clear of the fixed header. */
    scroll-padding-top: calc(var(--header-h) + 16px);
    scroll-padding-top: calc(var(--header-h) + 16px + var(--safe-top));
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    /* Lato leads: it holds up better than Jost at small sizes and long measures. */
    font-family: 'Lato', 'Lato Fallback', 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    background-color: var(--ink);
    background-image: radial-gradient(circle at 15% 0%, rgba(201, 169, 98, 0.06), transparent 45%),
                      radial-gradient(circle at 85% 100%, rgba(201, 169, 98, 0.05), transparent 45%);
    color: #f2f2f2;
    line-height: 1.75;
    /* 16px on phones, 17px from ~800px up (previous desktop value). */
    font-size: clamp(16px, 15px + 0.25vw, 17px);
    overflow-wrap: break-word;
}

/* Scroll lock while an overlay (menu, lightbox, curtain) is open. On touch
   devices motion.js also fixes the body in place, because iOS ignores
   overflow: hidden on the root while a finger is scrolling. */
html.scroll-locked,
body.scroll-locked { overflow: hidden; overscroll-behavior: none; }
body.scroll-locked--fixed { position: fixed; width: 100%; }

img, svg { max-width: 100%; }
img { height: auto; }

.container {
    position: relative;
    z-index: 1;                                  /* above #motion-bg */
    width: 100%;
    padding-inline: var(--safe-left) var(--safe-right);
}
/* The page column: every section, including the hero, lives inside the
   1200px measure, centred. (Previously an accidental shrink-wrap from a flex
   container produced the same width; now it is explicit.) */
main {
    display: block;
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
}

/* --- Shared editorial primitives --------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.eyebrow::before {
    content: "";
    flex: none;
    width: 28px;
    height: 1px;
    background: var(--gold);
    display: inline-block;
}
.section-head { margin-bottom: var(--block-y); }
.section-head h1,
.section-head h2 {
    /* Top margins keep the UA defaults (0.67em / 0.83em) that set the
       eyebrow-to-heading rhythm in the original design. */
    margin: 0.67em 0 12px;
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: clamp(30px, 4.4vw, 46px);
    letter-spacing: 0.4px;
    line-height: 1.15;
    position: relative;
    padding-bottom: 18px;
}
.section-head h2 { margin-top: 0.83em; text-wrap: balance; }
.section-head h1.contact-closer { margin-top: 0; }   /* business.html headline sits flush under its eyebrow */
.section-head h1::after,
.section-head h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 1px;
    background: var(--gold);
}
.section-head .lede {
    max-width: 56ch;
    color: var(--text-soft);
    font-size: 17px;
    margin: 0;
}

.editorial-section { padding-block: var(--section-y); }
.editorial-section + .editorial-section { padding-top: 0; }

/* ======================================================================
   1. SITE NAVIGATION
   ====================================================================== */
.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--header-h);
    min-height: calc(var(--header-h) + var(--safe-top));
    padding: 14px var(--gutter);
    padding-top: calc(14px + var(--safe-top));
    padding-left: max(var(--gutter), var(--safe-left));
    padding-right: max(var(--gutter), var(--safe-right));
    background: rgba(10, 10, 10, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--panel-border);
    transition: min-height 0.35s var(--ease-soft),
                padding 0.35s var(--ease-soft),
                background-color 0.35s var(--ease-soft),
                box-shadow 0.35s var(--ease-soft);
}
.site-nav.is-scrolled {
    min-height: calc(var(--header-h) - 14px);
    min-height: calc(var(--header-h) - 14px + var(--safe-top));
    padding-top: calc(8px + var(--safe-top));
    padding-bottom: 8px;
    background: rgba(10, 10, 10, 0.9);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

.site-nav__mark {
    position: relative;
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-size: 16px;
    letter-spacing: 0.22em;
    color: #f4f4f4;
    text-decoration: none;
    white-space: nowrap;
    --tap-slop: 10px;
}
/* Invisible hit-slop: a 25px line of text answers to a 45px target without moving layout. */
.site-nav__mark::before { content: ""; position: absolute; inset: -10px -6px; }
.site-nav__mark:hover { color: var(--gold); }

.site-nav__links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 34px);
    margin: 0;
    padding: 0;
}
.site-nav__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;                 /* touch-sized even in the desktop bar (tablets) */
    padding: 0 2px;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.28s var(--ease-soft);
}
.site-nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.34s var(--ease-out);
}
.site-nav__links a:hover,
.site-nav__links a:focus-visible { color: #fff; }
.site-nav__links a:hover::after,
.site-nav__links a:focus-visible::after { transform: scaleX(1); }
.site-nav__links a[aria-current="page"] { color: var(--gold); }
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile toggle */
.site-nav__toggle {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    color: #f4f4f4;
}
.site-nav__toggle-bar,
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
    content: "";
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--ease-soft), opacity 0.2s ease;
}
.site-nav__toggle-bar { position: relative; }
.site-nav__toggle-bar::before { position: absolute; top: -6px; }
.site-nav__toggle-bar::after  { position: absolute; top:  6px; }
.site-nav.is-open .site-nav__toggle-bar { background: transparent; }
.site-nav.is-open .site-nav__toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle-bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* The one place the header offset is paid. Pages add <div class="nav-spacer">. */
.nav-spacer {
    height: var(--header-h);
    height: calc(var(--header-h) + var(--safe-top));
}

@media (max-width: 860px) {
    .site-nav__toggle { display: inline-flex; position: relative; z-index: 220; }
    .site-nav__links {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: calc(var(--header-h) + 16px) 24px 24px;
        padding-top: calc(var(--header-h) + var(--safe-top) + 16px);
        padding-right: max(24px, var(--safe-right));
        padding-bottom: calc(24px + var(--safe-bottom));
        padding-left: max(24px, var(--safe-left));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: rgba(9, 9, 9, 0.98);
        transform: translateY(-100%);
        visibility: hidden;                /* closed: not focusable, not exposed */
        transition: transform 0.42s var(--ease-out), visibility 0s linear 0.42s;
        z-index: 210;
    }
    /* Auto margins centre the list when it fits and fall back to a normal
       scroll (no clipped first link) on short landscape screens. */
    .site-nav__links > li:first-child { margin-top: auto; }
    .site-nav__links > li:last-child { margin-bottom: auto; }
    .site-nav.is-open .site-nav__links {
        transform: none;
        visibility: visible;
        transition: transform 0.42s var(--ease-out), visibility 0s;
    }
    .site-nav__links a {
        font-size: 18px;
        letter-spacing: 0.18em;
        padding: 10px 20px;
    }
    .site-nav__links a::after { bottom: 6px; left: 20px; right: 20px; }

    /* Without JavaScript the toggle cannot work: render the links inline
       under the wordmark and let the header scroll with the page. */
    html:not(.js-motion) .site-nav { position: static; flex-wrap: wrap; }
    html:not(.js-motion) .site-nav__toggle { display: none; }
    html:not(.js-motion) .site-nav__links {
        position: static;
        height: auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 8px;
        padding: 0;
        background: none;
        transform: none;
        visibility: visible;
    }
    html:not(.js-motion) .site-nav__links > li { margin: 0; }
    html:not(.js-motion) .site-nav__links a { font-size: 13px; padding: 10px 6px; }
    html:not(.js-motion) .nav-spacer { display: none; }
}

@media (max-width: 480px) {
    .site-nav { gap: 12px; }
    .site-nav__mark { font-size: 14px; letter-spacing: 0.18em; }
}

/* ======================================================================
   2. HERO  (index.html, about.html)
   ====================================================================== */
.main-content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 90vh;
    padding-top: 3%;
}
.left-section {
    width: 50%;
    padding: 5% 8%;
}
.right-section {
    width: 50%;
    padding-left: 40px;
}
.right-section img {
    width: 90%;
    height: auto;
    max-height: 78vh;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.right-section .portrait {
    position: relative;
    display: block;
    margin: 0;
    width: 90%;
}
.right-section .portrait img { width: 100%; }

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.intro .intro-heading {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-size: clamp(32px, 5vw, 46px);
    font-weight: normal;
    margin: 10px 0;
    letter-spacing: 0.5px;
    padding-bottom: 0;
    line-height: 1.2;
}

/* Rotating profession line. Every phrase is stacked in the same grid cell, so
   the block is always as tall as its longest phrase — no layout jump when a
   long phrase wraps on a narrow screen. */
.animated-text {
    display: grid;
    font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
    font-style: italic;
    font-size: clamp(24px, 15px + 2.4vw, 30px);
    font-weight: 400;
    color: var(--gold);
}
.animated-text > span { grid-area: 1 / 1; visibility: hidden; }
.animated-text > span.is-current { visibility: visible; }
.animated-text > .sr-only { visibility: visible; }

.description {
    margin: 24px 0;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.9;
    color: var(--text-soft);
    text-align: left;
    max-width: 62ch;
    text-wrap: pretty;
}
.intro-cta { margin: 32px 0 0; }

/* Two even columns so short labels match long ones. One column on phones. */
.intro .buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 380px;
    margin-top: 8px;
}
.btn-outline,
.btn-solid {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 18px;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--gold-soft);
    color: #f2f2f2;
    font-family: 'Lato', 'Lato Fallback', 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: 0.3s ease;
}
.btn-solid {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #101010;
}
/* Hover inversions only where hover exists; a tap on a phone must not leave
   the button stuck in its inverted state. */
@media (hover: hover) {
    .btn-outline:hover {
        background-color: var(--gold);
        border-color: var(--gold);
        color: #101010;
    }
    .btn-solid:hover {
        background-color: transparent;
        color: var(--gold);
    }
}

/* Cutout hero (index.html): sizes to its content and lets the figure run to
   the section's bottom edge. Class-based; no :has() dependency. */
.hero--cutout {
    min-height: 0;
    align-items: flex-end;
    padding-top: 84px;
}
.hero--cutout .left-section {
    align-self: center;
    padding-bottom: 6%;
}
.hero--cutout .right-section {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-left: 0;
}
.right-section .portrait-cutout {
    position: relative;
    display: block;
    margin: 0 auto -1px;   /* -1px hides any sub-pixel seam at the base */
    width: 100%;
    z-index: 1;
}
/* Warm halo behind the subject. The blur is added for rich-motion devices in
   motion.css; the gradient alone is soft enough elsewhere and far cheaper. */
.right-section .portrait-cutout::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 86%;
    height: 74%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
                rgba(201, 169, 98, 0.20) 0%,
                rgba(201, 169, 98, 0.09) 38%,
                rgba(201, 169, 98, 0.03) 58%,
                transparent 72%);
    z-index: -1;
    pointer-events: none;
}
.right-section .portrait-cutout picture { display: block; }
.right-section .portrait-cutout img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(84vh, 800px);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 26px 45px rgba(0, 0, 0, 0.55));
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 92%, rgba(0,0,0,0.6) 97%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 92%, rgba(0,0,0,0.6) 97%, transparent 100%);
}

@media (max-width: 860px) {
    .main-content {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-top: 0;
    }
    .left-section,
    .right-section {
        width: 100%;
        padding: clamp(20px, 5vw, 40px) var(--gutter) 0;
    }
    .right-section { padding-bottom: 0; }
    .right-section .portrait { width: 100%; max-width: 480px; }
    .right-section img { max-height: none; }
    .intro .intro-heading { margin-top: 0; }
    .hero--cutout { padding-top: 0; }
    .hero--cutout .left-section { padding-bottom: 0; }
    .hero--cutout .right-section { padding-top: 8px; justify-content: center; }
    .right-section .portrait-cutout img { max-height: min(70vh, 600px); }
}
@media (max-width: 480px) {
    .intro .buttons { grid-template-columns: 1fr; max-width: none; }
    .btn-outline, .btn-solid { font-size: 12px; }
}

/* ======================================================================
   3. PROJECTS — visual case-study previews
   ====================================================================== */
.case-list {
    display: flex;
    flex-direction: column;
    gap: clamp(64px, 10vw, 140px);
}
.case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.case:nth-child(even) .case__media { order: 2; }

.case__index {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-size: clamp(13px, 1.4vw, 15px);
    letter-spacing: 0.3em;
    color: var(--gold);
    display: block;
    margin-bottom: 18px;
}
.case__title {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: normal;
    margin: 0 0 16px;
    padding: 0;
    color: #f4f4f4;
}
.case__summary {
    color: var(--text-soft);
    margin: 0 0 24px;
    max-width: 46ch;
}
.case__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0 0 26px;
}
.case__row > dt {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
}
.case__row > dd {
    margin: 0;
    color: var(--text-soft);
    font-size: 15.5px;
    line-height: 1.7;
}
.case__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.case__stack li {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--gold);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 5px 11px;
}
.case__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 22px;
}
.link-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f4f4f4;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid var(--gold-soft);
    transition: color 0.25s ease, border-color 0.25s ease;
    --tap-slop: 9px;
}
/* Hit-slop: the 32px inline link answers to a 50px-tall touch area. */
.link-arrow::before { content: ""; position: absolute; inset: -9px -6px; }
.link-arrow svg { flex: none; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover { color: var(--gold); border-color: var(--gold); }
.link-arrow:hover svg { transform: translateX(4px); }

.case__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    aspect-ratio: 4 / 3;
}
.case__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.case__media--placeholder {
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 120% at 15% 15%, rgba(201,169,98,0.12), transparent 55%),
        linear-gradient(160deg, #17150f, #0c0c0c);
}
.case__media--placeholder span {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-size: clamp(20px, 3vw, 30px);
    letter-spacing: 0.16em;
    color: rgba(244,239,228,0.5);
    text-transform: uppercase;
    text-align: center;
    padding: 0 24px;
}
.case__media--placeholder small {
    display: block;
    margin-top: 10px;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--text-faint);
}

@media (max-width: 860px) {
    .case { grid-template-columns: 1fr; gap: 28px; }
    .case:nth-child(even) .case__media { order: 0; }   /* media always first */
    .case__media { aspect-ratio: 16 / 10; }
    .case__index { margin-bottom: 12px; }
}

/* ======================================================================
   4. EDITORIAL PHOTOGRAPHY PAGE  (portfolio.html)
   ----------------------------------------------------------------------
   Art-directed rather than a uniform grid: a full-bleed hero, a sticky
   selected-work column beside two tall frames, a full-bleed landscape
   moment, a statement, and an asymmetric archive row.

   Two rules hold the whole thing together:
     • Every image sits inside a .ph-figure__frame / .ph-bleed__frame with a
       fixed aspect-ratio and overflow:hidden. The frame owns the layout box;
       the image may scale and drift inside it without ever moving geometry.
       That is what keeps CLS at zero while the motion layer scrubs.
     • Captions are static text under (or over) the frame, never hover-gated,
       so a touch user or a keyboard user sees exactly what a mouse user sees.
   ====================================================================== */

/* --- Shared figure primitives ----------------------------------------- */
.ph-figure { margin: 0; position: relative; }
.ph-figure__frame,
.ph-bleed__frame {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--panel-border);
}
.ph-figure__frame img,
.ph-bleed__frame img,
.ph-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* JS marks openable figures; without JS they are plain, non-interactive
   figures and the Shutterstock link below is the way in. */
.ph-figure[role="button"] { cursor: pointer; }
.ph-figure:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.ph-cap {
    display: grid;
    gap: 2px;
    margin-top: 14px;
}
.ph-cap__index,
.ph-cap__meta {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.ph-cap__index { color: var(--gold); }
.ph-cap__meta { color: var(--text-faint); }
.ph-cap__text {
    font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.35;
    color: #f2f2f2;
}
.ph-figure__link { margin: 12px 0 0; }

.ph-h2 {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: 0.4px;
    margin: 0 0 18px;
    padding: 0;
    color: #f4f4f4;
    text-wrap: balance;
}
.ph-h2::after { display: none; }
.ph-body { color: var(--text-soft); max-width: 42ch; margin: 0 0 22px; }

/* Full-bleed sections. `main` is capped at --measure site-wide; on this page
   that cap is lifted (main.ph-page) and every non-bleed section already
   sizes itself through .wrap, so the hero and the bleed frame simply take
   100% of the container. No 100vw arithmetic: vw includes the scrollbar on
   platforms with a classic one, and would overflow by exactly that width. */
main.ph-page { max-width: none; }
.ph-page .contact-section { max-width: var(--measure); margin-inline: auto; }

/* --- 4a. Hero ---------------------------------------------------------
   Sits under the fixed header (no .nav-spacer on this page) so the frame
   reads as full-bleed. Height uses dvh so mobile browser chrome collapsing
   does not resize it mid-scroll. --------------------------------------- */
.ph-hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
}
.ph-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
/* Legibility scrim. A gradient, not a flat wash, so the photograph keeps its
   contrast at the top where there is no text. */
.ph-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
                rgba(10,10,10,0.55) 0%,
                rgba(10,10,10,0.25) 32%,
                rgba(10,10,10,0.82) 78%,
                var(--ink) 100%);
}
.ph-hero__inner {
    align-self: end;
    padding-bottom: clamp(24px, 5vh, 56px);
    padding-top: calc(var(--header-h) + var(--safe-top) + 32px);
}
.ph-hero__eyebrow { margin-bottom: 18px; }
.ph-hero__title {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    /* Oversized editorial display type, fluid down to 320px. The `min()`
       against vh matters on short landscape phones: at 844x390 a purely
       width-driven size rendered at 126px, and two lines of that plus the
       header offset, lede and footer pushed the hero to 518px in a 390px
       viewport. Bounding by height keeps the whole hero on one screen. */
    font-size: clamp(44px, min(15vw, 19vh), 168px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    color: #f6f4ef;
}
.ph-hero__title em {
    font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
    font-style: italic;
    color: var(--gold);
}
/* Mask rows for the reveal. Without JS these are plain blocks. */
.ph-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ph-line > span { display: block; }
.ph-hero__lede {
    max-width: 40ch;
    margin: 0;
    color: rgba(255,255,255,0.82);
    font-size: clamp(15px, 1.4vw, 18px);
}
.ph-hero__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: calc(20px + var(--safe-bottom));
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.ph-hero__scroll { display: inline-flex; align-items: center; gap: 10px; }
.ph-hero__scroll::after {
    content: "";
    width: 46px;
    height: 1px;
    background: currentColor;
    transform-origin: right;
}

/* --- 4b. Selected work ------------------------------------------------ */
.ph-selected { padding-block: var(--section-y); }
.ph-selected__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.ph-selected__aside {
    position: sticky;
    /* Clears the fixed header; CSS-only, so it needs no pinning library. */
    top: calc(var(--header-h) + var(--safe-top) + 40px);
}
.ph-count {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--text-faint);
    margin: 0;
}
.ph-count span:first-child { color: var(--gold); }
/* The stack is spaced between FIGURES, not between every child: the link
   under each caption is a sibling and must stay tight to it. */
.ph-selected__stack { display: grid; gap: 0; }
.ph-selected__stack > .ph-figure:not(:first-child) { margin-top: clamp(48px, 8vw, 104px); }
.ph-figure--tall .ph-figure__frame { aspect-ratio: 4 / 5; }
.ph-figure--wide .ph-figure__frame { aspect-ratio: 3 / 2; }
/* The second frame is inset and narrower — the asymmetry is the point. */
.ph-figure--inset { margin-left: clamp(0px, 12vw, 132px); }
.ph-figure__link--inset { margin-left: clamp(0px, 12vw, 132px); }

/* --- 4c. Full-bleed moment -------------------------------------------- */
.ph-bleed {
    position: relative;
    margin-block: var(--section-y);
}
.ph-bleed__fig { margin: 0; position: relative; }
.ph-bleed__frame {
    border-inline: 0;
    /* Cinematic crop on wide screens, taller on phones so the subject reads. */
    aspect-ratio: 16 / 9;
}
.ph-bleed__cap {
    display: grid;
    gap: 6px;
    justify-items: start;
    margin-top: 20px;
}

/* Display variant: the caption lifts off the frame and sits over the
   photograph, the way the hero does. The frame carries its own scrim so the
   type stays legible over the brightest part of the image. */
.ph-bleed--display .ph-bleed__fig { position: relative; }
.ph-bleed--display .ph-bleed__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(10,10,10,0.10) 0%,
                rgba(10,10,10,0.30) 45%,
                rgba(10,10,10,0.86) 100%);
    pointer-events: none;
}
.ph-bleed--display .ph-bleed__cap {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding-bottom: clamp(24px, 4vw, 56px);
    gap: 10px;
}
/* The display variant carries type, so it needs vertical room. */
.ph-bleed--display .ph-bleed__frame { aspect-ratio: 16 / 10; min-height: 62svh; }
.ph-bleed__title {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: clamp(24px, 3.4vw, 40px);
    line-height: 1.1;
    letter-spacing: 0.4px;
    margin: 0;
    padding: 0;
    color: #f4f4f4;
}
.ph-bleed__title::after { display: none; }

.ph-bleed__title--display {
    font-size: clamp(46px, 10vw, 128px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: #f6f4ef;
    margin: 4px 0 0;
}
.ph-bleed__title--display em {
    font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
    font-style: italic;
    color: var(--gold);
}
.ph-bleed__lede {
    max-width: 38ch;
    margin: 6px 0 0;
    color: rgba(255,255,255,0.82);
    font-size: clamp(15px, 1.3vw, 17px);
}

.ph-bleed__cap .link-arrow { margin-top: 10px; }

/* --- 4d. Statement ---------------------------------------------------- */
.ph-statement {
    padding-block: var(--section-y);
    border-block: 1px solid var(--panel-border);
}
.ph-statement__inner { max-width: 46rem; }
.ph-statement__text {
    font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(24px, 3.6vw, 46px);
    line-height: 1.28;
    letter-spacing: 0;
    margin: 8px 0 24px;
    padding: 0;
    color: #f1ede4;
    text-wrap: pretty;
}
.ph-statement__text::after { display: none; }
.ph-statement__sig {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0;
}

/* --- 4e. Archive ------------------------------------------------------ */
.ph-archive { padding-block: var(--section-y); }
.ph-archive__head { margin-bottom: var(--block-y); }
.ph-archive__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.ph-archive__item--wide .ph-figure__frame { aspect-ratio: 3 / 2; }
.ph-archive__item--narrow .ph-figure__frame { aspect-ratio: 3 / 2; }
.ph-archive__item--tall .ph-figure__frame { aspect-ratio: 4 / 5; }

/* Two-column placement is scoped to the wide layout. Declaring it unscoped
   and unwinding it in the mobile block does not work: `grid-column: 2` on
   .ph-archive__grid > .ph-upcoming outranks a later `grid-template-columns:
   1fr`, so the grid kept a second column on phones and every archive frame
   collapsed to ~130px wide. Placement belongs where it applies. */
@media (min-width: 861px) {
    .ph-archive__item--narrow { padding-top: clamp(32px, 8vw, 120px); }
    /* Second row: a portrait frame on the left, paired with the in-progress
       list on the right so the row reads as a deliberate spread, not a gap. */
    .ph-archive__item--tall { grid-column: 1; padding-top: 0; }
    .ph-archive__grid > .ph-upcoming { grid-column: 2; align-self: end; margin-top: 0; max-width: none; }
}

.ph-upcoming {
    list-style: none;
    margin: var(--block-y) 0 0;
    padding: 0;
    display: grid;
    gap: 0;
    max-width: 46rem;
}
.ph-upcoming li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--hairline);
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.ph-upcoming li:last-child { border-bottom: 1px solid var(--hairline); }
.ph-upcoming__n { color: var(--gold); font-size: 11px; letter-spacing: 0.24em; }

/* --- 4f. Hover treatment ---------------------------------------------
   Fine pointers only, and never the sole route to information: the caption
   and the Shutterstock link are already visible: this is polish, not a
   disclosure mechanism. ------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
    .ph-figure__frame img,
    .ph-bleed__frame img { transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease-soft); }
    .ph-figure[role="button"]:hover .ph-figure__frame img,
    .ph-figure[role="button"]:focus-visible .ph-figure__frame img { transform: scale(1.04); filter: brightness(0.86); }
    .ph-figure[role="button"]:hover .ph-figure__frame,
    .ph-bleed__fig[role="button"]:hover .ph-bleed__frame { border-color: rgba(201, 169, 98, 0.45); }
    .ph-figure__frame,
    .ph-bleed__frame { transition: border-color 0.4s var(--ease-soft); }
}

/* Cursor-follow "View" badge. Positioned by JS from the pointer, shown only
   over an openable figure on a fine pointer. Inert to hit-testing so it can
   never intercept the click it is advertising. */
.ph-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    background: var(--gold);
    color: #101010;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s var(--ease-soft), transform 0.4s var(--ease-out);
}
.ph-cursor.is-on { opacity: 1; transform: scale(1); }

/* --- 4g. Responsive --------------------------------------------------- */
@media (max-width: 860px) {
    .ph-selected__grid,
    .ph-archive__grid { grid-template-columns: 1fr; }
    .ph-selected__aside { position: static; }
    .ph-figure--inset,
    .ph-figure__link--inset { margin-left: 0; }
    .ph-bleed__frame { aspect-ratio: 4 / 3; }
    .ph-bleed--display .ph-bleed__frame { aspect-ratio: 3 / 4; min-height: 0; }
    .ph-hero { min-height: 92svh; }
}
/* Short viewports (landscape phones, split-screen). Height-driven, so it
   applies regardless of width. */
@media (max-height: 520px) {
    .ph-hero { min-height: 0; }
    .ph-hero__inner { padding-top: calc(var(--header-h) + var(--safe-top) + 12px); padding-bottom: 12px; }
    .ph-hero__lede { display: none; }          /* the title and eyebrow carry it */
    .ph-hero__foot { padding-bottom: calc(10px + var(--safe-bottom)); }
    .ph-bleed--display .ph-bleed__frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 480px) {
    .ph-bleed__frame { aspect-ratio: 1 / 1; }
    .ph-bleed--display .ph-bleed__frame { aspect-ratio: 3 / 4; }
    .ph-hero__title { font-size: clamp(46px, 17vw, 76px); }
    .ph-bleed__title--display { font-size: clamp(40px, 15vw, 68px); }
    .ph-hero__foot { font-size: 10px; letter-spacing: 0.18em; }
    .ph-cap__text { font-size: 16px; }
}

.tag-muted {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px dashed var(--hairline);
    padding: 4px 10px;
    border-radius: 2px;
}

/* --- Lightbox --------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    padding: clamp(16px, 4vw, 56px);
    padding-top: max(clamp(16px, 4vw, 56px), calc(12px + var(--safe-top)));
    padding-right: max(clamp(16px, 4vw, 56px), calc(12px + var(--safe-right)));
    padding-bottom: max(clamp(16px, 4vw, 56px), calc(12px + var(--safe-bottom)));
    padding-left: max(clamp(16px, 4vw, 56px), calc(12px + var(--safe-left)));
    background: rgba(6, 6, 6, 0.94);
}
.lightbox.is-open { display: flex; }
.lightbox__stage {
    position: relative;
    max-width: 1100px;
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.lightbox__img {
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--panel-border);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.35s var(--ease-soft), transform 0.4s var(--ease-out);
}
.lightbox.is-ready .lightbox__img { opacity: 1; transform: scale(1); }
.lightbox__caption {
    text-align: center;
    max-width: 60ch;
    margin: 0;
    color: var(--text-soft);
    font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
    font-style: italic;
    font-size: 17px;
}
.lightbox__caption .gallery__meta {
    display: block;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 6px;
}
.lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid var(--panel-border);
    color: #f4f4f4;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.lightbox__btn:hover { background: var(--gold); color: #101010; border-color: var(--gold); }
.lightbox__btn--prev { left: 4px; }
.lightbox__btn--next { right: 4px; }
.lightbox__btn--close { top: 0; right: 0; transform: none; }

/* Compact: a toolbar layout on a definite-height grid so the image, caption
   and every control always fit — portrait or landscape, short or tall. */
@media (max-width: 860px) {
    .lightbox { padding: 12px; padding-top: calc(12px + var(--safe-top)); padding-right: calc(12px + var(--safe-right)); padding-bottom: calc(12px + var(--safe-bottom)); padding-left: calc(12px + var(--safe-left)); }
    .lightbox__stage {
        display: grid;
        height: 100%;
        max-height: none;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        gap: 10px 12px;
        justify-items: center;
        align-items: center;
    }
    .lightbox__btn { position: static; transform: none; }
    .lightbox__btn--close { grid-area: 1 / 1 / 2 / 3; justify-self: end; }
    .lightbox__img {
        grid-area: 2 / 1 / 3 / 3;
        max-height: 100%;
        min-height: 0;
        align-self: center;
    }
    .lightbox__caption { grid-area: 3 / 1 / 4 / 3; font-size: 16px; line-height: 1.4; }
    .lightbox__btn--prev { grid-area: 4 / 1 / 5 / 2; justify-self: end; }
    .lightbox__btn--next { grid-area: 4 / 2 / 5 / 3; justify-self: start; }
}

/* ======================================================================
   5. EXPERIENCE TIMELINE  (about.html)
   ====================================================================== */
.timeline {
    position: relative;
    margin-top: var(--block-y);
    padding-left: 0;
}
.timeline__track {
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--hairline);
}
.timeline__progress {
    position: absolute;
    left: 7px;
    top: 6px;
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, var(--gold), var(--gold-soft));
    transition: height 0.15s linear;
}
.timeline__item {
    position: relative;
    padding: 0 0 var(--block-y) 44px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--gold-soft);
    background: var(--ink);
    transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.timeline__item.is-active .timeline__dot {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 6px rgba(201, 169, 98, 0.14);
}
.timeline__date {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 8px;
}
.timeline__role {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: clamp(19px, 2.2vw, 24px);
    color: #f4f4f4;
    margin: 0 0 4px;
    line-height: 1.3;
}
.timeline__org {
    color: var(--text-soft);
    font-size: 15px;
    margin: 0 0 14px;
}
.timeline__item ul {
    margin: 0;
    padding-left: 18px;
    list-style: none;
    color: var(--text-soft);
    font-size: 15.5px;
    line-height: 1.8;
}
.timeline__item ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
}
.timeline__item ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--gold);
}
.timeline__item ul li strong {
    font-weight: 400;      /* Lato 400 is the loaded medium weight */
    color: #f2f2f2;
}
.timeline__item .case__stack { margin-top: 14px; }

@media (max-width: 480px) {
    .timeline__item { padding-left: 30px; }
    .timeline__track, .timeline__progress { left: 5px; }
    .timeline__dot { width: 11px; height: 11px; top: 6px; }
    .timeline__item ul { padding-left: 0; }
}

/* Shared "info cards" for education / skills / certifications */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
    margin-top: var(--space-md);
}
.info-card {
    border: 1px solid var(--panel-border);
    border-left: 2px solid var(--gold);
    background: var(--panel);
    padding: clamp(18px, 3vw, 24px) clamp(18px, 3.2vw, 26px);
}
.info-card h3 {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: 18px;
    color: #f4f4f4;
    margin: 0 0 6px;
}
.info-card p, .info-card li { color: var(--text-soft); font-size: 15px; }
.info-card p { margin: 0 0 8px; }
.info-card p:last-child { margin-bottom: 0; }
.info-card ul { margin: 0; padding-left: 18px; list-style: none; }
.info-card ul li { position: relative; padding-left: 16px; margin-bottom: 8px; line-height: 1.7; }
.info-card ul li::before { content: "•"; position: absolute; left: 0; color: var(--gold); }
.info-card .meta {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ======================================================================
   6. BUSINESS PROCESS  (business.html)
   ====================================================================== */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 28px;
    margin-top: var(--space-md);
}
.mission-block h2 {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: 20px;
    letter-spacing: normal;
    color: #f4f4f4;
    margin: 0 0 12px;
    padding: 0;
}
.mission-block p { color: var(--text-soft); margin: 0; }
.value-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.value-list li {
    position: relative;
    padding-left: 22px;
    color: var(--text-soft);
}
.value-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 8px;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
}
.value-list strong { color: #f4f4f4; font-weight: 400; font-family: 'Marcellus', 'Marcellus Fallback', serif; }

.process {
    position: relative;
    margin-top: var(--block-y);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 5vw, 60px);
}
.process__line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 33px;
    height: 2px;
    background: var(--hairline);
    pointer-events: none;
}
.process__line-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-soft));
    transform: scaleX(0);
    transform-origin: left;
}
.process.is-drawn .process__line-fill {
    transition: transform 1.1s var(--ease-out);
    transform: scaleX(1);
}
.process__pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px 2px rgba(201, 169, 98, 0.5);
    opacity: 0;
}
.stage {
    position: relative;
    text-align: center;
    transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-out);
}
/* Stages start dimmed only when JS will light them up in sequence. */
html.js-motion .stage { opacity: 0.35; transform: translateY(12px); }
html.js-motion .process.is-drawn .stage.is-on { opacity: 1; transform: translateY(0); }
.stage__num {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gold-soft);
    border-radius: 50%;
    background: var(--ink);
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-size: 22px;
    color: var(--gold);
    position: relative;
    z-index: 1;
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.process.is-drawn .stage.is-on .stage__num {
    background: var(--gold);
    color: #101010;
    box-shadow: 0 0 0 6px rgba(201, 169, 98, 0.12);
}
.stage h3 {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: 19px;
    color: #f4f4f4;
    margin: 0 0 8px;
}
.stage p { color: var(--text-soft); font-size: 15px; margin: 0; }
.mt-lg { margin-top: 44px; }

@media (max-width: 860px) {
    .process { grid-template-columns: 1fr; gap: 0; }
    .process__line {
        left: 32px;               /* centre of the 66px number circle */
        right: auto;
        top: 8px;
        bottom: 8px;
        width: 2px;
        height: auto;
    }
    .process__line-fill { transform: scaleY(0); transform-origin: top; }
    .process.is-drawn .process__line-fill { transform: scaleY(1); }
    .stage {
        text-align: left;
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
        padding-bottom: clamp(28px, 6vw, 40px);
    }
    .stage:last-child { padding-bottom: 0; }
    .stage__num { margin: 0; grid-row: 1 / span 2; }
    .stage h3 { margin-top: 6px; }
    .stage h3, .stage p { grid-column: 2; }
}

/* ======================================================================
   7. CONTACT  (floating labels, states, copy-email, buttons)
   ====================================================================== */
.contact-section {
    color: #f2f2f2;
    border-top: 1px solid var(--panel-border);
}
.contact-closer {
    position: relative;
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-weight: normal;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.2;
    letter-spacing: 0.4px;
    color: #f4f4f4;
    margin: 0 0 20px;
    padding-bottom: 16px;
    max-width: 18ch;
    text-wrap: balance;
}
.contact-closer::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 1px;
    background: var(--gold);
}
.contact-closer--wide { max-width: 22ch; }
.contact-lede { color: var(--text-soft); max-width: 42ch; }

.contact-info { margin-bottom: 20px; }
.contact-info p { margin: 0 0 12px; color: var(--text-soft); }
.contact-info a {
    position: relative;
    color: var(--gold);
    text-decoration: none;
    --tap-slop: 13px;
}
.contact-info a::before { content: ""; position: absolute; inset: -13px -6px; }

.copy-email {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--gold);
    font: inherit;
    cursor: pointer;
    padding: 0;
    --tap-slop: 8px;
}
.copy-email::before { content: ""; position: absolute; inset: -8px -6px; }
.copy-email__hint {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.copy-email.is-copied .copy-email__hint { color: var(--gold-bright); }

/* Primary button: shared by the contact form submit and the booking confirm. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background-color: var(--gold);
    color: #101010;
    border: 1px solid var(--gold);
    padding: 10px 24px;
    border-radius: 2px;
    font-family: 'Lato', 'Lato Fallback', 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft),
                box-shadow var(--dur-fast) var(--ease-soft);
}
@media (hover: hover) {
    .btn-primary:hover { background-color: transparent; color: var(--gold); }
}
.btn-primary:disabled { cursor: default; opacity: 0.7; }

.field {
    position: relative;
    margin-bottom: 20px;
}
.field input,
.field textarea {
    width: 100%;
    background: var(--panel);
    color: #f2f2f2;
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 20px 14px 8px;
    font-family: 'Lato', 'Lato Fallback', 'Jost', sans-serif;
    font-size: 16px;                      /* ≥16px: no iOS focus zoom */
    line-height: 1.6;
    min-height: 56px;
    transition: border-color var(--dur-fast) ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field label {
    position: absolute;
    left: 14px;
    top: 15px;
    font-size: 15px;
    color: #8a8a8a;
    pointer-events: none;
    transition: transform 0.22s var(--ease-out), color 0.22s ease, font-size 0.22s ease;
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--gold-soft);
    background: var(--panel-2);
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.12);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-12px);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}
.field--invalid input,
.field--invalid textarea { border-color: #c96a6a; }
.field__error {
    display: none;
    margin-top: 6px;
    font-size: 13px;
    color: #d98a8a;
}
.field--invalid .field__error { display: block; }

.form-status {
    margin: 16px 0 0;
    font-size: 14px;
    min-height: 1.2em;
}
.form-status[data-state="success"] { color: var(--gold-bright); }
.form-status[data-state="error"]   { color: #d98a8a; }

.contact-form button[type="submit"] {
    position: relative;
    overflow: hidden;
}
.contact-form button[aria-busy="true"] {
    color: transparent;
    pointer-events: none;
}
.contact-form button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(16,16,16,0.4);
    border-top-color: #101010;
    border-radius: 50%;
    animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Contact grid: two equal columns (text, form) that stack on compact. The
   name/email fields keep two columns only while each can be ≥220px wide. */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.row > .col,
.row > [class*="col-"] {
    flex: 1 1 0;
    min-width: 0;
}
.contact-form .row { gap: 0 32px; }
.contact-form .row > .col { flex: 1 1 220px; }
.text-end { text-align: right; }

@media (max-width: 860px) {
    .row { gap: 20px; }
    .row > [class*="col-"] { flex-basis: 100%; }
    .contact-form .row { gap: 0 20px; }
}
@media (max-width: 480px) {
    .contact-form .text-end { text-align: left; }
    .contact-form .btn-primary { width: 100%; min-height: 48px; }
}

/* ======================================================================
   8. BOOKING FLOW  (injected by motion.js into the contact section)
   ====================================================================== */
.booking {
    margin-top: clamp(36px, 6vw, 56px);
    padding: clamp(28px, 5vw, 40px) clamp(12px, 3vw, 36px) 32px;
    border-top: 1px solid var(--panel-border);
    border-radius: 2px;
    transition: background-color 0.3s var(--ease-soft);
}
.booking.is-focused { background-color: rgba(0, 0, 0, 0.28); }

.booking__eyebrow {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 14px;
}
.booking__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 18px 0 0;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.booking__meta .dot-live {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    margin-right: 8px;
    vertical-align: middle;
}

.book-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.btn-book {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 52px;
    padding: 17px 34px;
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    background: var(--panel);
    color: #f4f4f4;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.4s var(--ease-soft);
}
.btn-book:hover { border-color: var(--gold); }
.btn-book__fill {
    position: absolute;
    top: var(--my, 50%);
    left: var(--mx, 50%);
    z-index: -1;
    width: 260%;
    aspect-ratio: 1;
    margin: -130% 0 0 -130%;
    border-radius: 50%;
    background: var(--gold);
    transform: scale(0);
    pointer-events: none;
}
.btn-book.is-filled { color: var(--ink); }
.btn-book__label { display: block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.btn-book__roll { display: block; }
.btn-book__roll span { display: block; height: 1.2em; line-height: 1.2em; white-space: nowrap; }
.btn-book__arrow { flex: none; display: block; }

.badge-spin {
    position: relative;
    width: 92px;
    height: 92px;
    flex: none;
    margin-left: -14px;
    margin-top: -18px;
    align-self: flex-start;
    pointer-events: none;
}
.badge-spin__ring { width: 100%; height: 100%; }
.badge-spin__ring text {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    fill: var(--gold-soft);
}
.badge-spin__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--gold);
}

.booker {
    display: none;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--panel-border);
}
.booker.is-open { display: block; }
.booker__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.booker__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background-color 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.booker__dot.is-active { background: var(--gold); transform: scale(1.35); }
.booker__dot.is-done   { background: var(--gold-soft); }
.booker__step-label {
    margin-left: 10px;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.booker__stage { position: relative; }
.booker__step { position: absolute; top: 0; left: 0; width: 100%; }
.booker__step[hidden] { display: none; }
.booker__step-title {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 18px;
}
.booker__step-title b { color: #f2f2f2; font-weight: 400; }

.day-list { display: flex; flex-wrap: wrap; gap: 10px; }
.day-pill {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 96px;
    min-height: 44px;
    padding: 12px 20px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: #f2f2f2;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background-color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}
.day-pill__dow {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color 0.4s var(--ease-soft);
}
.day-pill__date { font-family: 'Marcellus', 'Marcellus Fallback', serif; font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
    .day-pill:hover { border-color: var(--gold-soft); }
    .slot:not(:disabled):hover { border-color: var(--gold-soft); }
    .booker__back:hover { color: var(--gold); }
}
.day-pill.is-selected { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.day-pill.is-selected .day-pill__dow { color: rgba(10, 10, 10, 0.8); }

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    max-width: 560px;
}
.slot {
    min-height: 44px;
    padding: 12px 6px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    color: #f2f2f2;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}
.slot.is-selected { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.booker__field { position: relative; max-width: 420px; margin-bottom: 8px; }
.booker__field input {
    width: 100%;
    min-height: 48px;
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--panel-border);
    border-radius: 0;
    color: #f2f2f2;
    font-family: 'Lato', 'Lato Fallback', 'Jost', sans-serif;
    font-size: 16px;
}
.booker__field input:focus { outline: none; }
.booker__field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.booker__field-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.55s var(--ease-soft);
}
.booker__field input:focus ~ .booker__field-line { transform: scaleX(1); }
.booker__error {
    display: block;
    min-height: 1.2em;
    margin-bottom: 16px;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: #e0705f;
}
.booker__error a { color: var(--gold); }
.booker__summary {
    margin: 0 0 18px;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.booker__summary b { color: var(--gold); font-weight: 400; }
.booker__note {
    margin: 0 0 18px;
    max-width: 48ch;
    font-size: 14px;
    color: var(--text-soft);
}
.booker__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.booker__back {
    min-height: 44px;
    background: none;
    border: 0;
    padding: 10px 4px;
    color: var(--text-faint);
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.35s var(--ease-soft);
}

.booker__success { display: none; align-items: flex-start; flex-direction: column; gap: 18px; }
.booker__success.is-shown { display: flex; }
.check-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gold);
    display: grid;
    place-items: center;
}
.check-circle path { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.booker__success-text {
    font-family: 'Marcellus', 'Marcellus Fallback', serif;
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1.25;
    color: #f4f4f4;
    margin: 0;
}
.booker__success-meta {
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 480px) {
    .book-cta { gap: 14px; }
    .badge-spin { width: 76px; height: 76px; margin-left: -10px; margin-top: -12px; }
    .btn-book { padding: 16px 28px; width: 100%; }
    .day-list { flex-direction: column; }
    .day-pill { width: 100%; flex-direction: row; align-items: baseline; gap: 12px; }
    .slot-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .booker__actions { flex-direction: column-reverse; align-items: stretch; }
    .booker__actions .btn-primary { width: 100%; }
}

/* ======================================================================
   9. FOOTER, SKIP LINK, UTILITIES
   ====================================================================== */
.footer {
    text-align: center;
    padding: 24px;
    padding-bottom: calc(24px + var(--safe-bottom));
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-faint);
    border-top: 1px solid var(--panel-border);
    width: 100%;
}

.skip-link {
    position: absolute;
    left: max(12px, var(--safe-left));
    top: -100px;
    z-index: 400;
    background: var(--gold);
    color: #101010;
    padding: 12px 16px;
    border-radius: 2px;
    font-family: 'Jost', 'Jost Fallback', sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: top 0.25s ease;
}
.skip-link:focus { top: calc(12px + var(--safe-top)); }

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

/* Visible keyboard focus everywhere; offsets keep rings clear of clipping. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Editorial refinement — the existing page and section order is preserved. */
.hero--cutout .intro-heading {
    font-size: clamp(46px, 5.4vw, 82px);
    letter-spacing: -0.055em;
    line-height: 1.03;
    color: var(--cream);
}
.hero-period { color: var(--gold); }
.intro .hero-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--gold);
    margin: 0 0 24px;
}
.hero--cutout .description { max-width: 42ch; font-size: 16px; }
.hero--cutout .buttons { gap: 10px; }
.hero--cutout .btn-solid:last-child { background: transparent; color: var(--cream); border-color: var(--hairline); }
.hero--cutout .btn-outline { border-color: var(--hairline); }
.hero--cutout .buttons a:hover { border-color: var(--gold); background: rgba(201,169,98,.1); color: var(--cream); }
.section-head h1 em { font-family: 'Cormorant Garamond', serif; font-weight: 400; color: var(--gold); }
.case-list { padding-top: 22px; }
.case { border-top: 1px solid var(--hairline); padding-top: clamp(28px, 4vw, 56px); }
.case__index { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: .24em; }
.case__title { font-size: clamp(27px, 2.7vw, 39px); letter-spacing: -.025em; line-height: 1.16; }
.case__stack li { border-radius: 24px; color: var(--text-soft); font-size: 10px; padding: 6px 12px; }
.case__row > dt { color: var(--gold-soft); }
.case__media--designed { aspect-ratio: auto; border: 1px solid rgba(255,255,255,.13); }
.project-art {
    --art-accent: #dcc394;
    min-height: clamp(480px, 43vw, 600px); display: flex; flex-direction: column; justify-content: space-between;
    position: relative; padding: clamp(20px, 3vw, 38px); overflow: hidden;
    color: var(--art-accent); background: #201e19;
}
.art-top, .art-bottom > span, .art-kicker, .chart-key, .ride-tags, .map-label, .sentiment-spectrum {
    font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: .16em; font-weight: 400;
}
.art-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.art-top > span:last-child { font-size: 18px; }
.art-bottom { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid currentColor; }
.art-bottom strong { font-family: 'Marcellus', serif; font-size: clamp(24px, 2.8vw, 38px); font-weight: 400; letter-spacing: -.03em; }
.art-bottom > span { opacity: .75; }
.project-art--ocr { background: radial-gradient(ellipse at 80% 20%, #383226, #1b1916 75%); }
.ocr-sheet { position: relative; align-self: center; padding: 20px 26px; margin: 25px 0 12px; background: #e7ddc4; color: #39362c; width: 72%; transform: rotate(-5deg); box-shadow: 12px 16px 0 #ffffff06; }
.art-kicker { font-size: 8px; }
.ocr-script { font-family: serif; font-size: clamp(36px, 4vw, 58px); line-height: 1.28; padding: 16px 0 8px; }
.scan-line { position: absolute; top: 52%; left: -12px; right: -12px; height: 1px; background: #8d6430; box-shadow: 0 -12px 24px #8d64304d; }
.ocr-corner { position: absolute; inset: 12px; border: 1px solid #39362c30; pointer-events: none; }
.ocr-output { display: flex; align-items: center; gap: 10px; font: 11px 'Jost', sans-serif; padding: 8px 0 20px; }
.ocr-output > span:last-child { margin-left: auto; }
.art-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.project-art--forecast { --art-accent: #bdd5c6; background: radial-gradient(ellipse at 90% 30%, #263d35, #13241e 80%); }
.forecast-title { font: clamp(24px, 3.2vw, 44px)/1.18 'Marcellus', serif; letter-spacing: -.035em; margin-top: 28px; }
.forecast-title em { font-family: 'Cormorant Garamond', serif; }
.forecast-chart { width: 100%; overflow: visible; margin: 30px 0 12px; }
.chart-grid { stroke: #bdd5c615; stroke-width: 1; }
.chart-baseline { stroke: #bdd5c655; stroke-width: 2; stroke-dasharray: 4 7; }
.chart-signal { stroke: #b8df8c; stroke-width: 2; }
.chart-key { display: flex; justify-content: space-between; gap: 8px; font-size: 8px; letter-spacing: .05em; margin-bottom: 24px; }
.project-art--rides { --art-accent: #c1cedf; background: #182433; }
.ride-map { margin: 28px -38px 20px; position: relative; }
.ride-map svg { width: 100%; display: block; }
.map-streets { stroke: #c1cedf14; stroke-width: 1; }
.ride-route { stroke: #e5b878; stroke-width: 3; stroke-linejoin: round; }
.map-label { display: block; text-align: center; padding-top: 12px; font-size: 8px; }
.ride-tags { display: flex; gap: 8px; margin-bottom: 28px; letter-spacing: .07em; }
.ride-tags span { border: 1px solid #c1cedf30; border-radius: 30px; padding: 8px 13px; }
.project-art--sentiment { --art-accent: #dfc6ca; background: radial-gradient(ellipse at 0 30%, #493039, #291e27 80%); }
.sentiment-quote { position: relative; font: clamp(26px, 3.6vw, 48px)/1.16 'Marcellus', serif; letter-spacing: -.035em; padding: 28px 0 24px; }
.sentiment-quote em { font-family: 'Cormorant Garamond', serif; }
.quote-mark { display: block; font-size: 68px; line-height: .7; opacity: .45; }
.sentiment-spectrum { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; letter-spacing: .05em; }
.sentiment-spectrum > div { width: 100%; height: 5px; background: linear-gradient(90deg, #a66878, #d9c9b9, #a9bc97); border-radius: 3px; }
.project-art--v2c { --art-accent: #cfd8c9; background: radial-gradient(ellipse at 15% 15%, #2a3328, #161b16 78%); }
.v2c-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 30px 0 30px; }
.v2c-frame { position: relative; aspect-ratio: 16 / 10; border: 1px solid #cfd8c930; background: #cfd8c90a; opacity: .4; }
.v2c-frame::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 3px; background: currentColor; opacity: .5; }
.v2c-frame::after { content: ''; position: absolute; left: 6px; right: 30%; top: 14px; height: 2px; background: currentColor; opacity: .3; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; }
.v2c-frame span { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font: 8px 'Jost', sans-serif; letter-spacing: .1em; }
.v2c-frame--kept { opacity: 1; border-color: #e5b878; box-shadow: 0 0 0 1px #e5b87840, 0 10px 24px #0006; }
.v2c-timeline { width: 100%; overflow: visible; margin: 18px 0 8px; }
.v2c-track { stroke: #cfd8c925; stroke-width: 1; }
.v2c-scan { stroke: #e5b878; stroke-width: 2; }
.v2c-timeline circle { fill: #e5b878; }
.v2c-output { display: flex; align-items: center; gap: 10px; font: 11px 'Jost', sans-serif; padding: 8px 0 20px; }
.v2c-output > span:last-child { margin-left: auto; }
.info-card { transition: border-color .35s, background-color .35s; }
.info-card:hover { border-color: var(--gold-soft); background: #191813; }
.contact-section { position: relative; }
.contact-section::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }
@media (min-width: 1100px) {
    .case__media--designed { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
    .hero--cutout .left-section { padding-left: 8%; padding-right: 3%; }
}
@media (max-width: 860px) {
    .case__media--designed { aspect-ratio: auto; }
    .project-art { padding: 28px; }
    .ocr-sheet { width: 60%; margin: 18px 0 8px; }
    .ocr-script { font-size: clamp(36px, 8vw, 64px); }
    .forecast-title, .sentiment-quote { font-size: clamp(30px, 6vw, 48px); }
    .forecast-chart { max-height: 160px; margin-top: 16px; }
    .ride-map { margin-top: 16px; margin-bottom: 16px; }
    .ride-map svg { max-height: 220px; }
    .v2c-strip { gap: 6px; }
}
@media (max-width: 480px) {
    .hero--cutout .intro-heading { font-size: clamp(44px, 12vw, 58px); }
    .intro .hero-eyebrow { font-size: 9px; letter-spacing: .2em; margin-bottom: 18px; }
    .case__media--designed { aspect-ratio: auto; min-height: 390px; }
    .project-art { min-height: 390px; padding: 22px; }
    .art-top { font-size: 8px; }
    .art-bottom strong { font-size: 27px; }
    .art-bottom > span { font-size: 8px; }
    .ocr-sheet { padding: 16px 22px; }
    .ocr-script { font-size: 42px; }
    .forecast-title, .sentiment-quote { font-size: 34px; }
    .chart-key { font-size: 7px; }
}
.hero--cutout .animated-text { margin: 22px 0 0; }
@media (max-width: 480px) {
    .hero--cutout .description { margin: 20px 0; }
    .hero--cutout .intro .buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero--cutout .buttons a { font-size: 10px; letter-spacing: .08em; padding: 12px 8px; }
}

/* About — a personal introduction followed by four editorial chapters. */
.page-about .about-hero {
    max-width: 1200px; margin: 0 auto; min-height: 0;
    padding: clamp(48px, 7vw, 100px) var(--gutter) clamp(64px, 8vw, 120px);
    gap: clamp(32px, 6vw, 84px); align-items: center;
}
.page-about .about-hero .left-section { flex: 1.1; width: auto; padding: 0; min-width: 0; }
.page-about .about-hero .right-section { flex: .9; width: auto; padding: 0; min-width: 0; }
.page-about .intro-heading { font-size: clamp(48px, 5.8vw, 82px); line-height: 1.02; letter-spacing: -.045em; color: var(--cream); }
.page-about .animated-text { margin: 20px 0 0; font-size: clamp(22px, 2.3vw, 28px); }
.page-about .description { font-size: 15px; line-height: 1.85; margin: 22px 0; }
.page-about .right-section .portrait { width: 100%; }
.page-about .portrait picture { display: block; overflow: hidden; border: 1px solid var(--panel-border); }
.page-about .portrait img { display: block; width: 100%; max-height: none; aspect-ratio: 600 / 752; object-fit: cover; border-radius: 0; }
.about-caption { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--panel-border); font: 10px 'Jost', sans-serif; letter-spacing: .09em; color: var(--text-soft); }
.about-caption span:last-child { color: var(--gold); font-size: 9px; white-space: nowrap; }
.about-proof { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--panel-border); padding-top: 20px; gap: 12px; }
.about-proof strong { display: block; color: var(--cream); font: 30px 'Marcellus', serif; letter-spacing: -.04em; }
.about-proof span { display: block; margin-top: 6px; color: var(--text-faint); font: 10px/1.5 'Jost', sans-serif; }
.page-about .intro-cta { margin-top: 26px; }
.page-about main > .editorial-section:not(.contact-section) { border-top: 1px solid var(--hairline); }
.page-about .section-head h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.1; letter-spacing: -.03em; }
.page-about .section-head h2 em { font-family: 'Cormorant Garamond', serif; color: var(--gold); font-weight: 400; }
.page-about .section-head .lede { font-size: 15px; line-height: 1.8; max-width: 30ch; }
.page-about .timeline__item { padding-bottom: 52px; padding-left: 34px; }
.page-about .timeline__item:last-child { padding-bottom: 0; }
.page-about .timeline__role { font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.025em; }
.page-about .timeline__org { margin: 10px 0 22px; color: var(--gold); font-size: 13px; }
.page-about .timeline__item > ul:not(.case__stack) { padding: 0; font-size: 14px; line-height: 1.8; }
.page-about .timeline__item > ul:not(.case__stack) > li { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.page-about .timeline__item > ul:not(.case__stack) > li::before { display: none; }
.page-about .timeline__item li strong { display: block; margin-bottom: 4px; font-size: 13px; }
.page-about .timeline__item .case__stack { padding: 0; gap: 6px; }
.page-about .timeline__summary { margin: 0 0 22px; color: var(--text-soft); font-size: 14px; line-height: 1.8; }
.page-about .timeline__item li a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.page-about .timeline__item .case__stack li { padding: 5px 10px; margin: 0; font-size: 10px; line-height: 1.5; }
.page-about .timeline__item .case__stack li::before { display: none; }
.about-current { display: inline-block; margin-left: 10px; border: 1px solid var(--panel-border); padding: 4px 7px; font-size: 8px; letter-spacing: .08em; vertical-align: middle; }
.page-about .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 0; counter-reset: about-card; }
.page-about .info-card { position: relative; padding: 28px; border: 1px solid var(--panel-border); background: linear-gradient(135deg, #1c1a14, #111110 75%); }
.page-about .info-card::before { counter-increment: about-card; content: '0' counter(about-card); display: block; font: 10px 'Jost', sans-serif; letter-spacing: .15em; color: var(--gold); margin-bottom: 28px; }
.page-about .info-card h3 { font-size: 23px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 14px; }
.page-about .info-card p, .page-about .info-card li { font-size: 13px; }
.page-about .info-card ul { padding: 0; }
.page-about .info-card ul li { padding: 0; margin-bottom: 10px; }
.page-about .info-card ul li::before { display: none; }
.page-about .info-card .meta { font-size: 10px; letter-spacing: .08em; line-height: 1.7; }
.page-about #certifications .info-grid { grid-template-columns: 1fr; gap: 0; }
.page-about #certifications .info-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 18px; border-width: 0 0 1px; background: transparent; padding: 24px 0; }
.page-about #certifications .info-card::before { grid-row: 1 / 3; margin: 5px 0 0; }
.page-about #certifications .info-card h3 { font-size: 21px; margin-bottom: 7px; }
@media (min-width: 1000px) {
    .page-about main > .editorial-section:not(.contact-section) > .wrap { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(0, 1.8fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
    .page-about main > .editorial-section:not(.contact-section) .section-head { position: sticky; top: calc(var(--header-h) + 36px); margin: 0; }
}
@media (max-width: 860px) {
    .page-about .about-hero { flex-direction: column; gap: 44px; align-items: stretch; }
    .page-about .about-hero .right-section { width: min(100%, 460px); align-self: center; }
    .page-about .about-hero .description { max-width: 58ch; }
    .about-proof { max-width: 450px; }
}
@media (max-width: 540px) {
    .page-about .info-grid { grid-template-columns: 1fr; }
    .page-about .about-hero { padding-top: 38px; }
    .page-about .info-card { padding: 24px; }
    .page-about .timeline__item { padding-left: 26px; }
    .page-about .timeline__date { font-size: 10px; letter-spacing: .1em; }
    .about-current { margin-left: 5px; font-size: 7px; }
}
@media (min-width: 1000px) {
    .page-about .timeline { margin-top: 0; }
}

/* Unreleased work: a development brief, distinct from shipped case studies. */
.development-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); border:1px solid var(--panel-border); }
.development-card__intro { padding:clamp(24px,4vw,44px); background:linear-gradient(145deg,#222c27,#141b17); }
.development-status { display:inline-block; margin:0 0 32px; padding:8px 12px; border:1px solid #879b7e; color:#d6e1cd; font:11px/1.5 'Jost',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.development-card h3 { color:var(--cream); font:normal clamp(38px,5vw,62px)/1.1 'Marcellus','Marcellus Fallback',serif; letter-spacing:-.04em; margin:0 0 12px; }
.development-card__intro > p { color:var(--text-soft); }
.development-card__intro .development-subtitle { color:var(--cream); font-size:19px; }
.development-card__intro .development-caption { font-size:12px; margin:28px 0 0; }
.development-card__details { padding:clamp(24px,4vw,44px); background:var(--panel); }
.development-card .case__row { grid-template-columns:1fr; gap:8px; }
.development-card .case__row > dt { color:var(--gold); }
.development-next { border-top:1px solid var(--panel-border); padding-top:22px; margin:24px 0 0; color:var(--text-soft); font-size:14px; }
.development-next strong { display:block; color:var(--cream); margin-bottom:8px; font-weight:400; }
.development-card + .development-card { margin-top:32px; }
@media(max-width:860px) { .development-card { grid-template-columns:1fr; } }