/* =========================================================================
   Frame Productions — Stylesheet
   Minimal. Light. Sans serif. Film-first.
   ========================================================================= */

/* ---------- TOKENS ---------- */
:root {
    --bg: #F5F3EE;
    --bg-elev: #FFFFFF;
    --bg-soft: #EDEAE3;
    --fg: #1A1815;
    --fg-muted: #6B6660;
    --fg-dim: #A8A198;
    --line: rgba(26, 24, 21, 0.08);
    --line-strong: rgba(26, 24, 21, 0.16);
    --accent: #B84E1F;
    --accent-soft: #C9592E;

    --font-sans: 'Host Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
    --text-sm: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
    --text-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
    --text-lg: clamp(1.1rem, 1.05rem + 0.2vw, 1.2rem);
    --text-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
    --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.4rem);
    --text-3xl: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
    --text-4xl: clamp(2.8rem, 2.2rem + 3vw, 4.5rem);
    --text-hero: clamp(3rem, 2rem + 5vw, 6.5rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 12rem;

    --container: 1440px;
    --container-narrow: 960px;
    --container-prose: 680px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 620ms;

    --radius-sm: 2px;
    --radius: 3px;
    --radius-lg: 6px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ---------- BASE ---------- */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-4);
    background: var(--fg);
    color: var(--bg);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 1000;
}
.skip-link:focus { left: var(--space-4); }

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

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
h1 { font-size: var(--text-4xl); letter-spacing: -0.03em; }
h2 { font-size: var(--text-3xl); letter-spacing: -0.025em; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); line-height: 1.25; }
h5 { font-size: var(--text-lg); line-height: 1.3; }
h6 { font-size: var(--text-base); line-height: 1.4; }

p { max-width: 68ch; }
p + p { margin-top: var(--space-5); }
strong { font-weight: 600; color: var(--fg); }
em { font-style: italic; }

::selection { background: var(--accent); color: #FFFFFF; }

a { color: var(--fg); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent); }

.label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-muted);
}
.label--accent { color: var(--accent); }

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-weight: 400;
}
.eyebrow::before {
    content: attr(data-n);
    color: var(--accent);
}
.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
    max-width: 80px;
}

.display {
    font-family: var(--font-sans);
    font-size: var(--text-hero);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}
.display em {
    font-style: normal;
    font-weight: 400;
    color: var(--accent);
}

.lede {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--fg);
    max-width: 42ch;
}

/* ---------- LAYOUT ---------- */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
}
.container--narrow { max-width: var(--container-narrow); }
.container--prose { max-width: var(--container-prose); }

.section {
    padding-block: var(--space-10);
}
.section--lg { padding-block: var(--space-11); }
.section--sm { padding-block: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 960px) {
    .split { grid-template-columns: 4fr 8fr; gap: var(--space-10); }
    .split--reverse { grid-template-columns: 8fr 4fr; }
    .split--wide { grid-template-columns: 3fr 9fr; }
}

/* ---------- HEADER / NAV ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--space-5) 0;
    transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
    padding: var(--space-3) 0;
    background: rgba(245, 243, 238, 0.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: var(--line);
}

.site-header.is-on-hero .wordmark,
.site-header.is-on-hero .nav-menu a:not(.btn),
.site-header.is-on-hero .nav-toggle { color: #FFFFFF; }
.site-header.is-on-hero .wordmark__punct { color: var(--accent-soft); }
.site-header.is-on-hero .nav-menu a:not(.btn):hover { color: var(--accent-soft); }
.site-header.is-on-hero .nav-toggle__icon span { background: #FFFFFF; }

.site-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
}
.wordmark {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    transition: color var(--dur-fast) var(--ease-out);
}
.wordmark:hover { color: var(--accent); }
.wordmark__punct { color: var(--accent); margin-left: -1px; }

.site-nav { display: flex; align-items: center; }
.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.nav-menu a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-muted);
    transition: color var(--dur-fast) var(--ease-out);
    position: relative;
    font-weight: 400;
}
.nav-menu a:not(.btn):hover { color: var(--fg); }
.nav-menu a.is-current:not(.btn) { color: var(--fg); }
.nav-menu a:not(.btn).is-current::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: var(--accent);
}
.site-header.is-on-hero .nav-menu a.is-current:not(.btn) { color: #FFFFFF; }

/* === Social icon cluster in nav ===
   Group containing the `|` divider + social icons, displayed inline as a
   single flex row aligned to text baseline-equivalent. Divider is a thin
   vertical rule; icons are 18px SVGs inheriting color from the surrounding
   nav link style. */
.nav-menu__socials {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}
.nav-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--line-strong);
    flex-shrink: 0;
}
.site-header.is-on-hero .nav-divider {
    background: rgba(255, 255, 255, 0.3);
}
.nav-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--fg-muted);
    border: 1px solid var(--line-strong);
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    line-height: 0;
}
.nav-social:hover {
    color: #FFFFFF;
    background: var(--accent);
    border-color: var(--accent);
}
.nav-social-icon {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}
.nav-social-label {
    display: none; /* icon-only on desktop */
}
/* Over the hero, match the lighter palette */
.site-header.is-on-hero .nav-social {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
}
.site-header.is-on-hero .nav-social:hover {
    color: #FFFFFF;
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg);
}
.nav-toggle__icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
}
.nav-toggle__icon span {
    display: block;
    height: 1px;
    background: var(--fg);
    width: 100%;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child {
    transform: translateY(2.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child {
    transform: translateY(-2.5px) rotate(-45deg);
}

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 101; /* above the overlay so the X is always tappable */
    }
    /* When the menu is open, swap the visible label "Menu" → "Close" for clarity */
    .nav-toggle[aria-expanded="true"] .nav-toggle__label { color: var(--fg); }
    .nav-menu {
        position: fixed;
        inset: 0;
        background: var(--bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-6);
        padding: var(--space-9) var(--gutter);
        transform: translateY(-100%);
        transition: transform var(--dur-base) var(--ease-in-out);
        z-index: 99;
    }
    .nav-menu.is-open { transform: translateY(0); }
    .nav-menu a {
        font-size: var(--text-lg);
        letter-spacing: 0.06em;
    }
    .nav-menu a:not(.btn).is-current::after { bottom: -10px; }
    .site-header.is-on-hero .nav-menu.is-open a { color: var(--fg); }

    /* Socials cluster on mobile: row of pill icons, no divider needed */
    .nav-menu__socials {
        flex-direction: row;
        gap: var(--space-4);
        justify-content: center;
    }
    .nav-divider { display: none; }
    /* Icons stay the same 32px pill as desktop — consistent, readable */
}

/* ---------- HERO — FULLSCREEN VIDEO ---------- */
.hero-full {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    background: #0A0908;
    color: #FFFFFF;
}
.hero-full__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    background: #0A0908; /* shown briefly while video loads */
}

/* =========================================================================
   Hero video — native <video> tags with object-fit: cover
   =========================================================================
   We use native <video> (not iframe) for hero context specifically so we
   can use object-fit: cover for true pixel-perfect fill. Iframe players
   always letterbox internally; this doesn't.
   ========================================================================= */

.hero-full__video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0;
    pointer-events: none;
}

/* Responsive switchable wrapper (when both landscape + portrait sources are set) */
.hero-full__video .media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Landscape video — default, shown on landscape/square viewports */
.hero-full__video .media__landscape {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Portrait video — hidden by default, shown on narrow viewports */
.hero-full__video .media__portrait {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Swap landscape -> portrait on narrow/portrait viewports.
   Applies to the switchable wrapper (when both are available). */
@media (max-aspect-ratio: 1/1) {
    .hero-full__video .media--switchable .media__landscape { display: none; }
    .hero-full__video .media--switchable .media__portrait { display: block; }
}

/* If only a portrait is provided (no landscape), always show it */
.hero-full__video .media:not(.media--switchable) .media__portrait { display: block; }

.hero-full::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0.2) 40%, rgba(10, 9, 8, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.hero-full__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
    max-width: var(--container);
    margin-inline: auto;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.hero-full__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.hero-full__meta::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--accent-soft);
    display: inline-block;
}
.hero-full__headline {
    font-family: var(--font-sans);
    font-size: var(--text-hero);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 500;
    color: #FFFFFF;
    max-width: 18ch;
    margin-bottom: var(--space-6);
}
.hero-full__headline em {
    font-style: normal;
    color: var(--accent-soft);
    font-weight: 400;
}
.hero-full__sub {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.85);
    max-width: 40ch;
    margin-bottom: var(--space-6);
    line-height: 1.4;
}
.hero-full__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.hero-full__scroll {
    position: absolute;
    bottom: var(--space-5);
    right: var(--gutter);
    z-index: 3;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.hero-full__scroll-line {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}
.hero-full__scroll-line::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: var(--accent-soft);
    animation: scroll-tick 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-tick {
    0% { top: -40px; }
    50% { top: 0; }
    100% { top: 40px; }
}

.hero-full__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(184, 78, 31, 0.25), transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(184, 78, 31, 0.12), transparent 60%),
        linear-gradient(135deg, #1A1815, #0A0908);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-full__placeholder-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 640px) {
    .hero-full { height: 92vh; min-height: 560px; }
    .hero-full__headline { font-size: clamp(2.6rem, 10vw, 4rem); max-width: 14ch; }
    .hero-full__scroll { display: none; }
}

/* ---------- HERO — STANDARD (for inner pages) ---------- */
.hero {
    padding-top: clamp(9rem, 14vw, 13rem);
    padding-bottom: var(--space-9);
    position: relative;
}
.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--fg-muted);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.hero__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.hero__headline {
    max-width: 18ch;
    margin-bottom: var(--space-6);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-7);
}

/* ---------- BUTTONS ---------- */
/* ---------- BUTTONS ---------- */
/*
   Refined pill button system.
   - Smaller footprint, softer voice: sentence case, sans-serif, tighter padding
   - Fully rounded pill shape (50px radius)
   - Primary (filled dark), ghost (bordered), link-arrow (inline text link)
   - Hover states emphasise motion, not just colour
*/
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.25rem;
    background: var(--fg);
    color: var(--bg) !important;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    border: 1px solid var(--fg);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.btn::after {
    content: "→";
    font-size: 0.95em;
    transition: transform var(--dur-fast) var(--ease-out);
    display: inline-block;
}
.btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF !important;
}
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* Variants */
.btn--ghost {
    background: transparent;
    color: var(--fg) !important;
    border-color: var(--line-strong);
}
.btn--ghost:hover {
    background: var(--fg);
    color: var(--bg) !important;
    border-color: var(--fg);
}
.btn--sm {
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    gap: 0.4rem;
}
.btn--inline {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}
.btn--plain::after { display: none; }

/* Legacy name (kept so older markup still renders correctly) */
.btn--plain { }

/* Hero variants — lighter on dark background */
.hero-full .btn {
    background: #FFFFFF;
    color: var(--fg) !important;
    border-color: #FFFFFF;
}
.hero-full .btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: #FFFFFF !important;
}
.hero-full .btn--ghost {
    background: transparent;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.5);
}
.hero-full .btn--ghost:hover {
    background: #FFFFFF;
    color: var(--fg) !important;
    border-color: #FFFFFF;
}

/* ---------- INLINE LINK-ARROW ---------- */
/*
   Refined inline arrow link.
   - Sentence case sans-serif (was uppercase mono)
   - Subtle underline that grows on hover
   - Arrow slides on hover for motion cue
*/
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--fg);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-size: 0% 1px;
    background-repeat: no-repeat;
    transition: color var(--dur-fast) var(--ease-out),
                background-size var(--dur-base) var(--ease-out);
}
.link-arrow::after {
    content: "→";
    transition: transform var(--dur-fast) var(--ease-out);
    display: inline-block;
}
.link-arrow:hover {
    color: var(--accent);
    background-size: 100% 1px;
}
.link-arrow:hover::after { transform: translateX(3px); }
.hero-full .link-arrow { color: #FFFFFF; }
.hero-full .link-arrow:hover { color: var(--accent-soft); }

/* ---------- SECTION HEADERS ---------- */
.section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    align-items: end;
}
@media (min-width: 860px) {
    .section-head {
        grid-template-columns: 1fr 2fr;
        gap: var(--space-10);
        align-items: end;
    }
}
.section-head__title { margin: 0; }

.meta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
    .meta-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}
.meta-row__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-muted);
    margin-bottom: var(--space-2);
}
.meta-row__value {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

/* ---------- RESPONSIVE MEDIA SYSTEM ---------- */
/* Global media wrapper. Used for work cards, case study heroes, inline video, etc.
   Switchable variant swaps landscape/portrait at 860px. */
.media {
    position: relative;
    width: 100%;
    background: var(--bg-soft);
    overflow: hidden;
    border-radius: var(--radius);
}
.media iframe,
.media video,
.media img {
    display: block;
    width: 100%;
    height: 100%;
}
.media iframe {
    position: absolute;
    inset: 0;
    border: 0;
}
.media--inline {
    aspect-ratio: 16 / 9;
}
.media--card {
    aspect-ratio: 16 / 10;
}

/* Switchable: default shows landscape; on narrow viewports show portrait */
.media--switchable .media__landscape {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.media--switchable .media__portrait {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}
@media (max-width: 860px) {
    .media--switchable { aspect-ratio: 3 / 4; }
    .media--switchable .media__landscape { display: none; }
    .media--switchable .media__portrait { display: block; }
}

/* Placeholder */
.media--placeholder {
    background: linear-gradient(135deg, #E8E4DC, #D8D2C6);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
}
.media__placeholder-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--fg-dim);
    padding: var(--space-4);
    text-align: center;
}

/* Legacy video-embed class (kept for backward compatibility with inner pages) */
.video-embed {
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-soft);
    border-radius: var(--radius);
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-placeholder {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #E8E4DC, #D8D2C6);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--fg-muted);
    border-radius: var(--radius);
}
.video-placeholder__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.video-placeholder__hint {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--fg-dim);
}

/* ---------- WORK CARDS ---------- */
.work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8) var(--space-6);
}
@media (min-width: 720px) {
    .work-grid { grid-template-columns: repeat(2, 1fr); }
}
.work-card { display: block; position: relative; }
.work-card__media { margin-bottom: var(--space-5); }
.work-card__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
.work-card__client {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-muted);
}
.work-card__sector {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
}
.work-card__title {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
}
.work-card__desc {
    color: var(--fg-muted);
    font-size: var(--text-sm);
    max-width: 42ch;
    line-height: 1.5;
}

/* ---------- TILES ---------- */
.tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-7) var(--space-6);
    border-top: 1px solid var(--line-strong);
    background: transparent;
    transition: background var(--dur-base) var(--ease-out);
    min-height: 220px;
}
.tile:hover { background: var(--bg-soft); }
.tile__number {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.2em;
    margin-bottom: var(--space-5);
    text-transform: uppercase;
}
.tile__title {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-3);
}
.tile__desc {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    max-width: 38ch;
    margin-bottom: var(--space-5);
    line-height: 1.55;
}
.tile__cta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.tile:hover .tile__cta { color: var(--accent); gap: var(--space-4); }
.tile-grid--bordered { border-bottom: 1px solid var(--line-strong); }

/* ---------- LOGO MARQUEE ---------- */
/*
   Horizontal scrolling strip of client logos.
   - Two duplicated groups inside a track; track slides -50% over N seconds,
     so the loop is seamless.
   - Edge fade masks on both sides so logos dissolve rather than cut off.
   - Pauses on hover.
   - Honours prefers-reduced-motion (falls back to static row).

   The container has `overflow: hidden` and full-width (bleeds beyond the
   usual .container because the effect reads better edge-to-edge).
*/
.logo-marquee {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-6);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    /* Edge fade using a mask so the strip dissolves into the page background
       at both ends — cleaner than a hard cut-off. */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0,
        #000 10%,
        #000 90%,
        transparent 100%);
            mask-image: linear-gradient(90deg,
        transparent 0,
        #000 10%,
        #000 90%,
        transparent 100%);
}

.logo-marquee__track {
    display: flex;
    width: max-content;
    animation: logo-marquee-scroll 40s linear infinite;
}
.logo-marquee:hover .logo-marquee__track {
    animation-play-state: paused;
}

.logo-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-8);
    padding-inline: var(--space-5);
}

.logo-marquee__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 48px;
    flex-shrink: 0;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
}
.logo-marquee__item:hover {
    filter: grayscale(0);
    opacity: 1;
}
.logo-marquee__item img {
    max-height: 100%;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.logo-marquee__name {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--fg-muted);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

@keyframes logo-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee__track {
        animation: none;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
    .logo-marquee__group:last-child { display: none; }
}

/* ---------- PROSE ---------- */
.prose {
    max-width: var(--container-prose);
    font-size: var(--text-lg);
    line-height: 1.65;
}
.prose h2 {
    font-size: var(--text-2xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    font-weight: 500;
}
.prose h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
    font-weight: 500;
}
.prose p { margin-bottom: var(--space-5); max-width: 66ch; }
.prose ul {
    margin-block: var(--space-5);
    padding-left: 0;
}
.prose ul li {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-3);
    max-width: 64ch;
}
.prose ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}
.prose a {
    color: var(--accent);
    border-bottom: 1px solid var(--line-strong);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.prose a:hover { border-color: var(--accent); }
.prose blockquote {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.4;
    color: var(--fg);
    padding: var(--space-4) var(--space-6);
    border-left: 2px solid var(--accent);
    margin-block: var(--space-7);
    max-width: 52ch;
    letter-spacing: -0.015em;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__q {
    width: 100%;
    text-align: left;
    padding: var(--space-5) 0;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.4;
    color: var(--fg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    letter-spacing: -0.015em;
}
.faq__q-icon {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    color: var(--accent);
    transition: transform var(--dur-base) var(--ease-out);
    flex-shrink: 0;
    line-height: 1;
    font-weight: 300;
}
.faq__item[aria-expanded="true"] .faq__q-icon { transform: rotate(45deg); }
.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-base) var(--ease-out);
    color: var(--fg-muted);
}
.faq__item[aria-expanded="true"] .faq__a { max-height: 800px; }
.faq__a-inner {
    padding-bottom: var(--space-6);
    padding-right: var(--space-6);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 66ch;
}

/* ---------- FORMS ---------- */
.form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: var(--container-narrow);
}
@media (min-width: 720px) {
    .form__row--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.field__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-muted);
    font-weight: 400;
}
.field__label .req { color: var(--accent); }
.field__input,
.field__select,
.field__textarea {
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    color: var(--fg);
    padding: var(--space-4) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease-out);
    appearance: none;
}
.field__textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.field__select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6660' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-7);
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.notice {
    padding: var(--space-5) var(--space-6);
    border-left: 3px solid var(--accent);
    background: var(--bg-elev);
    margin-bottom: var(--space-6);
    border-radius: var(--radius);
}
.notice--success { border-color: #4FB071; }
.notice--error { border-color: #D55C44; }

/* ---------- FOOTER ---------- */
/* ---------- FOOTER ---------- */
.site-footer {
    padding-block: var(--space-9) var(--space-6);
    border-top: 1px solid var(--line);
    margin-top: var(--space-10);
    position: relative;
}
.site-footer__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Top strip: brand on left, newsletter on right */
.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
    .site-footer__top {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--space-9);
        align-items: start;
    }
}

.site-footer__wordmark {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    margin-bottom: var(--space-3);
}
.site-footer__punct { color: var(--accent); }
.site-footer__tagline {
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--fg-muted);
    max-width: 28ch;
}

/* Newsletter */
.site-footer__newsletter-lede {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    line-height: 1.55;
    max-width: 42ch;
    margin-top: 0.6rem;
    margin-bottom: var(--space-4);
}
.nl-form { max-width: 480px; }
.nl-form__row {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
    flex-wrap: wrap;
}
.nl-form__input {
    flex: 1 1 200px;
    min-width: 0;
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    color: var(--fg);
    padding: 0.65rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    border-radius: 999px;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.nl-form__input:focus {
    outline: none;
    border-color: var(--accent);
}
.nl-form__msg {
    margin-top: var(--space-3);
    font-size: 0.85rem;
    line-height: 1.4;
}
.nl-form__msg--success { color: var(--accent); }
.nl-form__msg--info { color: var(--fg-muted); }
.nl-form__msg--error { color: #C24A3A; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Nav link columns */
.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-6);
}
@media (min-width: 640px) { .site-footer__nav { grid-template-columns: repeat(4, 1fr); } }
.footer-col__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--fg); }
.footer-col li { color: var(--fg-muted); font-size: var(--text-sm); }

/* Meta strip */
.site-footer__meta {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
}
.site-footer__meta-text { display: flex; flex-direction: column; gap: 0.2rem; }
.site-footer__copy,
.site-footer__legal {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--fg-dim);
    letter-spacing: 0.04em;
}

/* Footer social icons cluster */
.site-footer__socials {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--fg-muted);
    border: 1px solid var(--line-strong);
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    line-height: 0;
}
.footer-social svg {
    width: 16px;
    height: 16px;
    display: block;
}
.footer-social:hover {
    color: #FFFFFF;
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--1 { transition-delay: 60ms; }
.reveal--2 { transition-delay: 140ms; }
.reveal--3 { transition-delay: 220ms; }
.reveal--4 { transition-delay: 300ms; }

/* ---------- UTILITIES ---------- */
.text-center { text-align: center; }
.text-muted { color: var(--fg-muted); }
.text-accent { color: var(--accent); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ---------- PAGE-SPECIFIC ---------- */
.contact-block { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.contact-block a { color: var(--fg); }
.contact-block__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: var(--space-2);
    font-weight: 400;
}
.contact-block__value {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.contact-block + .contact-block { margin-top: var(--space-5); }

.about-bio { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 860px) { .about-bio { grid-template-columns: 1fr 1fr; gap: var(--space-10); } }

.pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-7);
    border: 1px solid var(--line-strong);
    background: var(--bg-elev);
    border-radius: var(--radius);
}
@media (min-width: 860px) { .pricing { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); padding: var(--space-8); } }
.pricing__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: var(--space-3);
}
.pricing__range {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-3);
}
.pricing__desc {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    line-height: 1.55;
}

.hero--with-video { padding-bottom: var(--space-9); }

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    counter-reset: step;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
    padding: var(--space-6) var(--space-5) var(--space-6) 0;
    counter-increment: step;
    border-top: 1px solid var(--line);
}
.step::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: var(--space-4);
}
.step__title {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: var(--space-3);
    letter-spacing: -0.02em;
}
.step__desc {
    color: var(--fg-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.journal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}
@media (min-width: 720px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .journal-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6); } }
.journal-card { display: block; }
.journal-card__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-muted);
    margin-bottom: var(--space-3);
}
.journal-card__meta span:not(:last-child)::after { content: "·"; margin: 0 var(--space-3); color: var(--fg-dim); }
.journal-card__title {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: var(--space-3);
    letter-spacing: -0.02em;
}
.journal-card__excerpt {
    color: var(--fg-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    max-width: 42ch;
}

.error-page {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--space-11);
}
.error-page__code {
    font-family: var(--font-sans);
    font-size: clamp(5rem, 16vw, 10rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--accent);
    margin-bottom: var(--space-6);
    font-weight: 500;
}