/* =========================================================
   Silbermann Media Group — Studio
   Design system: SMG house style (recap site unified)
   Typography: Cormorant Garamond (display) / Barlow (body)
   Palette: #0a0a0a background, #C9A86C gold, #f5f0e8 cream
   ========================================================= */

:root {
    --bg: #0a0a0a;
    --bg-raised: #141414;
    --bg-subtle: #1a1a1a;
    --bg-panel: #161616;
    --text-primary: #f5f0e8;
    --text-secondary: #a8a29a;
    --text-muted: #8a8378;
    --gold: #C9A86C;
    --gold-soft: rgba(201, 168, 108, 0.3);
    --gold-faint: rgba(201, 168, 108, 0.12);
    --border: rgba(201, 168, 108, 0.2);
    --border-soft: rgba(245, 240, 232, 0.08);
    --border-hard: #2a2a2a;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-condensed: 'Barlow Condensed', 'Barlow', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

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

/* ---------------- HEADER ---------------- */
.site-header {
    border-bottom: 1px solid var(--border-soft);
    padding: 1.25rem 2rem;
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.brand-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--gold);
    letter-spacing: 0.01em;
}

.primary-nav {
    display: flex;
    gap: 2.25rem;
    align-items: center;
}

.primary-nav a {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.primary-nav a:hover {
    color: var(--gold);
}

.primary-nav .nav-contact {
    color: var(--gold);
    padding: 0.5rem 1rem;
    border: 1px solid var(--gold-soft);
    border-radius: 2px;
}

.primary-nav .nav-contact:hover {
    background: var(--gold-faint);
}

/* ---------------- HERO ---------------- */
.hero {
    padding: 8rem 2rem 6rem;
    border-bottom: 1px solid var(--border-soft);
}

.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2rem;
    font-weight: 400;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.25rem, 6vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 2.5rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.hero-lede {
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 780px;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.hero-lede-secondary {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
}

.hero-meta-divider {
    color: var(--gold-soft);
}

/* ---------------- SECTION BASE ---------------- */
.section {
    padding: 7rem 2rem;
    border-bottom: 1px solid var(--border-soft);
}

.section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.75rem;
    font-weight: 500;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.65rem, 4.5vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    margin-bottom: 3rem;
    max-width: 950px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.section-lede {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 780px;
    margin-bottom: 3rem;
    font-weight: 300;
}

/* ---------------- PULL QUOTE ---------------- */
.pullquote-section {
    background: var(--bg);
    padding: 5rem 2rem;
    border-bottom: 1px solid var(--border-soft);
}

.pullquote-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.pullquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 3.2vw, 2.35rem);
    line-height: 1.35;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    border-left: 2px solid var(--gold);
    padding-left: 2rem;
    max-width: 900px;
    margin: 0;
    quotes: none;
}

.pullquote::before,
.pullquote::after {
    content: none;
}

/* ---------------- THESIS ---------------- */
.section-thesis {
    background: var(--bg);
}

.mechanism-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 1.25rem;
    align-items: stretch;
    margin-bottom: 4rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.mechanism-stage {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.5rem;
}

.mechanism-stage-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin: 0;
}

.mechanism-stage-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.005em;
}

.mechanism-stage-body {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 300;
}

.mechanism-arrow {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1.75rem;
}

.thesis-body {
    max-width: 820px;
}

.thesis-body p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
    font-weight: 300;
}

.thesis-body p.thesis-close {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--text-primary);
    border-left: 2px solid var(--gold);
    padding-left: 1.75rem;
    margin-top: 3rem;
}

/* ---------------- HOW WE WORK ---------------- */
.section-how {
    background: var(--bg-raised);
}

.how-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 4rem;
    margin-top: 2rem;
}

.how-block {
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.how-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.65rem;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: 0.005em;
}

.how-block p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 300;
}

/* ---------------- CAPABILITIES ---------------- */
.section-capabilities {
    background: var(--bg);
}

.capability-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.capability {
    padding: 2.5rem 0;
    border-top: 1px solid var(--border-soft);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: start;
}

.capability:last-child {
    border-bottom: 1px solid var(--border-soft);
}

.capability-head {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.capability-role {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin: 0;
}

.capability h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--text-primary);
    letter-spacing: 0.005em;
    line-height: 1.25;
    margin: 0;
}

.capability p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 300;
}

/* ---------------- WORK ---------------- */
.section-work {
    background: var(--bg-raised);
    padding-top: 9rem;
}

.work-group {
    margin-top: 3.5rem;
}

.work-group-label {
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    font-weight: 500;
}

.work-group-note {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
    font-style: italic;
    max-width: 780px;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 300;
}

.case-study {
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.case-study:last-child {
    border-bottom: none;
}

.case-study-featured {
    background: var(--bg-raised);
    padding: 3.5rem 2.5rem;
    margin: 0 -2.5rem 2rem;
    border-bottom: 1px solid var(--border);
    border-radius: 2px;
}

.case-study-meta {
    margin-bottom: 1rem;
}

.case-study-client {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

.case-study-scope {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
}

.case-study-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 1.75rem;
    letter-spacing: -0.005em;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.case-study-body {
    max-width: 820px;
    margin-bottom: 2rem;
}

.case-study-body p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 300;
}

.case-study-body em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-primary);
    font-size: 1.08em;
}

.case-study-body p.case-summary {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text-primary);
    border-left: 2px solid var(--gold);
    padding-left: 1.5rem;
    margin: 1.75rem 0;
    max-width: 760px;
    font-weight: 400;
}

.case-study-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    margin-bottom: 2rem;
    max-width: 820px;
}

/* 3-stat case studies render as 3 columns, not 4, to avoid orphan cell */
.case-study-stats:has(.stat:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}

.case-study-stats .stat {
    background: var(--bg-panel);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
}

.stat-label {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
}

/* ---------------- CASE STUDY VISUALS ---------------- */
.case-study-visual {
    margin-top: 2.5rem;
    max-width: 980px;
}

.case-visual-hero {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.case-visual-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* Portrait layout: poster sized reasonably, centered, not stretched */
.case-study-visual-portrait .case-visual-hero {
    max-width: 460px;
    margin: 0 0 1.25rem 0;
}

/* Landscape layout: hero fills the column width */
.case-study-visual-landscape .case-visual-hero {
    width: 100%;
}

/* Gallery: 2-column grid of landscape recap images */
.case-visual-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* When two galleries stack in a case study, add breathing room between them */
.case-visual-gallery + .case-visual-gallery {
    margin-top: 1.25rem;
}

/* Three-image variant: display as 3 columns at desktop width */
.case-visual-gallery-three {
    grid-template-columns: repeat(3, 1fr);
}

.case-visual-gallery img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Featured image within a visual section (e.g., Nasdaq Tower leading Premiere OOH) */
.case-visual-feature {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.case-visual-feature img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contain variant: for screenshots and document-style images where the WHOLE image is the message
   (social posts, newsletter ads, Spotify takeovers, FYC trade ads). Letterboxes within the cell
   so no content is cropped. */
.case-visual-gallery-contain img {
    object-fit: contain;
    background: var(--bg);
}

/* Natural variant: displays images at their true aspect ratio, no forced landscape frame,
   no cropping. For portrait creatives. */
.case-visual-gallery-natural img {
    aspect-ratio: auto;
    object-fit: fill;
    height: auto;
}

/* Featured case study (Monument) gets slightly more breathing room */
.case-study-featured .case-study-visual {
    margin-top: 3rem;
}

/* Secondary gallery section within a case study (for sub-sections like retail vs OOH) */
.case-visual-section {
    margin-top: 2.5rem;
    max-width: 980px;
}

.case-visual-section-label {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* ---------------- PODCAST GRID (square logo tiles) ---------------- */
.case-podcast-grid {
    margin-top: 2.5rem;
    max-width: 980px;
}

.podcast-grid-label {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.podcast-tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.podcast-tile {
    aspect-ratio: 1 / 1;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    overflow: hidden;
}

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

/* ---------------- AUDIO PLAYERS ---------------- */
.case-audio {
    margin-top: 2.5rem;
    max-width: 820px;
    padding-top: 2rem;
    border-top: 1px solid var(--border-soft);
}

.case-audio-label {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.audio-group {
    margin-bottom: 2rem;
}

.audio-group:last-child {
    margin-bottom: 0;
}

.audio-group-label {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.005em;
}

.audio-spots {
    display: flex;
    flex-direction: column;
    gap: 0;
}

audio {
    display: none;
}

.spot-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.spot-row:last-child {
    border-bottom: none;
}

.spot-info {
    flex: 1;
    min-width: 0;
}

.spot-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.spot-meta {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
}

.custom-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 300px;
    flex-shrink: 0;
}

.play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    font-size: 11px;
    padding-left: 2px;
    font-family: var(--font-body);
}

.play-btn:hover {
    background: var(--gold);
    color: var(--bg);
}

.play-btn.playing {
    background: var(--gold);
    color: var(--bg);
}

.player-track {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-progress {
    width: 100%;
    height: 2px;
    background: var(--border-soft);
    border-radius: 1px;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

.player-bar {
    height: 100%;
    background: var(--gold);
    border-radius: 1px;
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none;
}

.player-time {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    font-weight: 400;
}

.case-study-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gold-soft);
    margin-top: 0.5rem;
}

.case-study-link:hover {
    border-bottom-color: var(--gold);
}

.case-study-link[data-status="pending"],
.case-study-link[data-status="private"] {
    color: var(--text-muted);
    border-bottom-color: var(--border-soft);
    cursor: default;
    pointer-events: none;
}

/* ---------------- SELECTED EXPERIENCE ---------------- */
.section-experience {
    background: var(--bg);
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    margin-top: 1rem;
}

.logo-cell {
    background: var(--bg-panel);
    padding: 2rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
    min-height: 130px;
    position: relative;
}

.logo-cell:hover {
    background: var(--bg-raised);
    color: var(--gold);
}

.logo-cell img {
    max-width: 75%;
    max-height: 50px;
    height: auto;
    width: auto;
    display: block;
    opacity: 0.88;
    transition: opacity 0.25s ease;
}

.logo-cell:hover img {
    opacity: 1;
}

/* Per-logo height adjustments for optical balance */
.logo-cell img.logo-tall     { max-height: 78px; }   /* stacked lockups (NBC, Paramount, S&S, CC, NYC H+H) */
.logo-cell img.logo-medium   { max-height: 62px; }   /* square-ish marks (A24, Columbia, HBO, Angel Studios, Rose Room, Warner) */
.logo-cell img.logo-standard { max-height: 50px; }   /* default wordmarks */
.logo-cell img.logo-thin     { max-height: 32px; }   /* very thin wide sans (Delsey Paris, Sony Pictures, Desmond & Dempsey) */

@media (max-width: 900px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .logo-cell {
        min-height: 110px;
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 640px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .logo-cell {
        min-height: 100px;
    }
    .logo-cell img.logo-tall     { max-height: 62px; }
    .logo-cell img.logo-medium   { max-height: 50px; }
    .logo-cell img.logo-standard { max-height: 40px; }
    .logo-cell img.logo-thin     { max-height: 26px; }
}

/* ---------------- ABOUT ---------------- */
.section-about {
    background: var(--bg-raised);
}

.about-body {
    max-width: 820px;
    margin-bottom: 4rem;
}

.about-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.about-body p.about-family-lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--text-primary);
    border-top: 1px solid var(--border-soft);
    padding-top: 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.about-founder {
    border-top: 1px solid var(--border);
    padding-top: 2.5rem;
    max-width: 820px;
}

.founder-label {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.founder-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.founder-bio p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 300;
    margin-bottom: 1rem;
}

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

/* ---------------- CONTACT ---------------- */
.section-contact {
    background: var(--bg);
    padding: 8rem 2rem;
}

.section-title-contact {
    margin-bottom: 2rem;
}

.closing-body {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 780px;
    margin-bottom: 4rem;
    font-weight: 300;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.contact-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-label {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}

.contact-value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
}

a.contact-value:hover {
    color: var(--gold);
}

/* ---------------- FOOTER ---------------- */
.site-footer {
    background: var(--bg);
    border-top: 1px solid var(--border-soft);
    padding: 2.5rem 2rem;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-brand {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--gold);
    font-weight: 400;
}

.footer-meta {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
    .primary-nav {
        gap: 1.25rem;
    }

    .primary-nav a {
        font-size: 0.7rem;
    }

    .primary-nav .nav-contact {
        padding: 0.4rem 0.75rem;
    }

    .how-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

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

    .case-study-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3-stat case studies: render as 3 narrow columns on mobile to avoid orphan cell.
       Detected via :has() — last .stat is the 3rd child and has no siblings after it. */
    .case-study-stats:has(.stat:nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }

    .case-study-stats:has(.stat:nth-child(3):last-child) .stat {
        padding: 1.25rem 0.5rem;
    }

    .case-study-stats:has(.stat:nth-child(3):last-child) .stat-value {
        font-size: 1.35rem;
    }

    .case-study-stats:has(.stat:nth-child(3):last-child) .stat-label {
        font-size: 0.65rem;
        letter-spacing: 0.14em;
    }

    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mechanism-flow {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 2rem 0;
        margin-bottom: 3rem;
    }

    .mechanism-arrow {
        transform: rotate(90deg);
        padding-top: 0;
        padding: 0.25rem 0;
    }

    .mechanism-stage {
        gap: 0.5rem;
    }

    .mechanism-stage-body {
        line-height: 1.5;
    }

    .case-study-visual-portrait .case-visual-hero {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .site-header {
        padding: 1rem 1.25rem;
    }

    .header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    /* Single row on phones. The section links give way to Work and Contact —
       the Work section carries its own jump index for everything else. */
    .primary-nav {
        width: auto;
        flex-wrap: nowrap;
        gap: 1rem;
        align-items: center;
    }

    .primary-nav a:not([href="#work"]):not(.nav-contact) {
        display: none;
    }

    .primary-nav .nav-contact {
        padding: 0.45rem 0.85rem;
    }

    /* size the wordmark so brand + Work + Contact clear 360px on one line */
    .brand-mark {
        font-size: 1rem;
        white-space: nowrap;
    }

    .hero {
        padding: 5rem 1.25rem 4rem;
    }

    .section {
        padding: 5rem 1.25rem;
    }

    .section-work {
        padding-top: 6.5rem;
    }

    .pullquote-section {
        padding: 3rem 1.25rem;
    }

    .pullquote {
        padding-left: 1.25rem;
    }

    .hero-lede {
        font-size: 1.05rem;
    }

    .case-study-featured {
        padding: 2.5rem 1.5rem;
        margin: 0 -1.5rem 2rem;
    }

    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .logo-cell {
        padding: 1.5rem 0.75rem;
        font-size: 0.95rem;
        min-height: 75px;
    }

    .section-contact {
        padding: 5rem 1.25rem;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .case-visual-gallery {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .case-visual-gallery-three {
        grid-template-columns: 1fr;
    }

    .case-study-visual-portrait .case-visual-hero {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .spot-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .custom-player {
        width: 100%;
    }

    .podcast-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.96);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: zoom-out;
}

.lightbox.is-open {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

.lightbox-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 5rem 1rem;
    overflow: hidden;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.lightbox-caption {
    padding: 0 3rem 0.75rem;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
}

.lightbox-counter {
    padding: 0 3rem 1.5rem;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: transparent;
    border: 1px solid rgba(201, 168, 108, 0.3);
    color: var(--gold);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Cormorant Garamond', serif;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    border-color: var(--gold);
    background: rgba(201, 168, 108, 0.08);
}

.lightbox-close {
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 2rem;
    padding-bottom: 4px;
}

.lightbox-prev {
    left: 1.5rem;
}

.lightbox-next {
    right: 1.5rem;
}

.lightbox-prev[hidden],
.lightbox-next[hidden] {
    display: none;
}

/* Zoomable case study images — cursor hint */
.case-study-visual img {
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}

.case-study-visual img:hover {
    opacity: 0.92;
}

/* Mobile lightbox */
@media (max-width: 768px) {
    .lightbox-stage {
        padding: 4rem 0.5rem 0.5rem;
    }

    .lightbox-caption {
        padding: 0 1rem 0.5rem;
        font-size: 0.875rem;
    }

    .lightbox-counter {
        padding: 0 1rem 1rem;
        font-size: 0.7rem;
    }

    .lightbox-close {
        top: 0.75rem;
        right: 0.75rem;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .lightbox-prev {
        left: 0.5rem;
    }

    .lightbox-next {
        right: 0.5rem;
    }
}

/* ---------------- WORK INDEX (jump-to nav) ---------------- */
.work-index {
    margin: 0 0 3.5rem;
    padding: 1.5rem 0 1.75rem;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.work-index-label {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 1rem;
}

.work-index-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.5rem;
}

.work-index-links a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.work-index-links a:hover {
    color: var(--text-primary);
    border-bottom-color: var(--gold-soft);
}

.work-index-divider {
    width: 1px;
    height: 14px;
    background: var(--border);
}

/* ---------------- COLLAPSIBLE WORK GROUP ---------------- */
.work-fold-roster {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin: 1.5rem 0 1.5rem;
    max-width: 780px;
}

.work-fold {
    margin-bottom: 1rem;
}

.work-fold-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold);
    padding: 0.85rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--bg-raised);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.work-fold-toggle::-webkit-details-marker { display: none; }

.work-fold-toggle:hover {
    background: var(--bg-panel);
    border-color: var(--gold-soft);
}

.work-fold-toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
}

.work-fold[open] .work-fold-toggle::after {
    transform: rotate(-135deg) translateY(-2px);
}

.work-fold .work-fold-close { display: none; }
.work-fold[open] .work-fold-open { display: none; }
.work-fold[open] .work-fold-close { display: inline; }

.work-fold-body {
    padding-top: 3.5rem;
}

@media (max-width: 640px) {
    .work-index { margin-bottom: 2.5rem; }
    .work-index-links { gap: 0.5rem 1.1rem; }
    .work-index-links a { font-size: 0.88rem; }
    .work-index-divider { display: none; }
    .work-fold-toggle { font-size: 0.72rem; padding: 0.75rem 1.1rem; }
    .work-fold-body { padding-top: 2.5rem; }
}

/* ---------------- BACK TO TOP ---------------- */
.back-to-top {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.1rem;
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold);
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s,
                background 0.2s ease, border-color 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--bg-panel);
    border-color: var(--gold-soft);
}

.back-to-top-arrow {
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(45deg) translate(1px, 1px);
}

@media (max-width: 640px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        padding: 0.65rem 0.95rem;
        font-size: 0.66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity 0.2s ease, visibility 0.2s; }
}

/* ---------------- CASE STUDY VIDEO ---------------- */
.case-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.case-video {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    overflow: hidden;
}

.case-video video {
    width: 100%;
    height: auto;
    /* both cuts are 16x9; without this the box has no height until the
       poster loads, which shifts everything below it */
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
}

.case-video-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-soft);
    margin: 0;
}

@media (max-width: 640px) {
    .case-video-grid { grid-template-columns: 1fr; }
}

/* ---------------- STATION GRID ---------------- */
.station-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.25rem 1.5rem;
    margin-top: 0.25rem;
}

.station {
    text-align: center;
}

.station-tile {
    border-radius: 10px;
    overflow: hidden;
    /* dark marks (WBNS, WTOP, WXRT) need a defined edge against the page */
    border: 1px solid rgba(255, 255, 255, 0.10);
    line-height: 0;
    max-width: 150px;
    margin: 0 auto 0.8rem;
}

.station-tile img {
    width: 100%;
    height: auto;
    display: block;
}

.station-call {
    font-family: var(--font-condensed);
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    font-weight: 500;
    color: var(--text-primary);
}

.station-market {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.station-meta {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--gold);
    margin-top: 0.15rem;
}

@media (max-width: 900px) {
    .station-grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1.1rem; }
    .station-tile { max-width: 130px; }
}

@media (max-width: 640px) {
    .station-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
    .station-tile { max-width: 120px; }
    .station-call { font-size: 0.9rem; }
    .station-market, .station-meta { font-size: 0.75rem; }
}


/* ---------------- HERO CTA ---------------- */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 2.5rem;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-cta:hover {
    background: var(--bg-raised);
    border-color: var(--gold-soft);
}

.hero-cta-quiet {
    border-color: transparent;
    padding-left: 0.25rem;
}

.hero-cta-quiet:hover {
    border-color: transparent;
    background: transparent;
    color: var(--text-primary);
}

/* ---------------- METHODOLOGY NOTE ---------------- */
.case-stats-note {
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 820px;
    margin: -1rem 0 2rem;
}

@media (max-width: 640px) {
    .hero-actions { gap: 0.6rem; }
    .hero-cta { font-size: 0.72rem; padding: 0.75rem 1.2rem; }
}


/* ---------------- TAP TARGETS ---------------- */
/* Keep the 36px circle, extend the hit area to the 44px minimum. */
.play-btn {
    position: relative;
}

.play-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ---------------- MIXED-ORIENTATION VIDEO PAIR ---------------- */
/* A landscape cut beside a vertical one: give the landscape the wider
   column rather than forcing both into the same box. */
.case-video-grid-mixed {
    grid-template-columns: 1.9fr 1fr;
    align-items: start;
}

.case-video-vertical video {
    aspect-ratio: 9 / 16;
}

@media (max-width: 640px) {
    .case-video-grid-mixed { grid-template-columns: 1fr; }
    .case-video-vertical video { max-height: 70vh; width: auto; margin: 0 auto; }
}

/* ---------------- VERY NARROW PHONES ---------------- */
/* At 320px the wordmark plus Work plus Contact overruns the row. */
@media (max-width: 360px) {
    .site-header {
        padding: 0.85rem 1rem;
    }

    .brand-mark {
        font-size: 0.92rem;
    }

    .primary-nav {
        gap: 0.7rem;
    }

    .primary-nav a {
        font-size: 0.64rem;
    }

    .primary-nav .nav-contact {
        padding: 0.4rem 0.65rem;
    }
}

/* ---------------- SKIM SUMMARY (retired; kept for .summary-* safety) ---------------- */
.section-summary { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.summary-list { margin-top: 1.75rem; max-width: 920px; }
.summary-row {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--border-soft);
}
.summary-row:last-child { border-bottom: 1px solid var(--border-soft); }
.summary-campaign {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--gold);
    line-height: 1.4;
    margin: 0;
}
.summary-line {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 300;
    margin: 0;
}

/* ---------------- LOOKING AHEAD ---------------- */
.approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 2.75rem;
}
.approach-block p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 300;
}
.approach-label {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 0.9rem;
}

@media (max-width: 900px) {
    .approach-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
    .summary-row { grid-template-columns: 1fr; gap: 0.4rem; }
    .summary-campaign { font-size: 1.05rem; }
    .section-summary { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* ---------------- VERTICAL VIDEO ROW ---------------- */
.case-video-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}

@media (max-width: 900px) {
    .case-video-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@media (max-width: 560px) {
    .case-video-row { grid-template-columns: 1fr; }
    .case-video-row .case-video { max-width: 300px; margin: 0 auto; }
}

/* ---------------- REEL CARDS (cover still -> live post) ---------------- */
.reel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.reel-card {
    display: block;
    text-decoration: none;
    min-width: 0;
}

.reel-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    background: #0e0e0e;
}

.reel-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease, transform 0.6s ease;
}

.reel-card:hover .reel-thumb img { opacity: 0.82; transform: scale(1.02); }

.reel-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.35);
    backdrop-filter: blur(2px);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.reel-play::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 16px;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
}

.reel-card:hover .reel-play {
    background: rgba(201, 168, 108, 0.3);
    border-color: var(--gold);
}

.reel-creator {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-top: 0.85rem;
}

.reel-handle {
    display: block;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: none;
    margin-top: 0.15rem;
}

.reel-title {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.reel-cta {
    display: inline-block;
    font-family: var(--font-condensed);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.55rem;
    border-bottom: 1px solid rgba(201, 168, 108, 0.3);
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.reel-card:hover .reel-cta { color: var(--gold); border-color: var(--gold); }

.ig-note {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text-muted);
    font-weight: 300;
    margin-top: 1.5rem;
    max-width: 660px;
}

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

@media (max-width: 420px) {
    .reel-play { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
    .reel-play::after { left: 16px; top: 13px; border-width: 8px 0 8px 13px; }
}

/* ---------------- (retired: .principle-* no longer emitted) ---------------- */
.section-principles {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.principle-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 4rem;
    margin-top: 2rem;
}

.principle-column-label {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    padding-bottom: 0.9rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border-soft);
}

.principle { margin-bottom: 1.85rem; }
.principle:last-child { margin-bottom: 0; }

.principle-claim {
    font-family: var(--font-display);
    font-size: 1.14rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.principle-proof {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 300;
    margin: 0;
}

/* ---------------- PER-CASE THESIS ---------------- */
.case-thesis {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 300;
    padding: 0.9rem 0 1.1rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--border-soft);
}

.case-thesis-label {
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-right: 0.7rem;
}

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

@media (max-width: 640px) {
    .section-principles { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .principle-claim { font-size: 1.06rem; }
    .case-thesis-label { display: block; margin-bottom: 0.35rem; }
}

/* ---------------- WHAT THESE ARE ---------------- */
.section-explainer { padding-top: 3.5rem; padding-bottom: 3.5rem; }

.explainer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
    margin-top: 1.75rem;
}

.explainer-label {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    padding-bottom: 0.9rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--border-soft);
}

.explainer-block p:not(.explainer-label) {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 300;
    margin-bottom: 1rem;
}
.explainer-block p:last-child { margin-bottom: 0; }

.explainer-sub {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 3.25rem 0 1.5rem;
}

.build-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem;
    counter-reset: step;
}

.build-step { border-top: 1px solid var(--gold); padding-top: 0.9rem; }

.build-step-label {
    font-family: var(--font-condensed);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 0.55rem;
}

.build-step-text {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 300;
    margin: 0;
}

/* ---------------- CASE LAYER CHIPS + BLOCKS ---------------- */
.case-layers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.3rem;
}

.case-layer {
    font-family: var(--font-condensed);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(201, 168, 108, 0.35);
    border-radius: 2px;
    padding: 0.32rem 0.65rem;
    line-height: 1;
}

.case-layer-block {
    margin-top: 1.7rem;
    padding-left: 1.2rem;
    border-left: 1px solid var(--border-soft);
}

.case-layer-label {
    font-family: var(--font-condensed);
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.case-layer-block p:not(.case-layer-label) { margin-bottom: 0.85rem; }
.case-layer-block p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
    .build-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

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

@media (max-width: 640px) {
    .build-steps { grid-template-columns: 1fr; gap: 1.35rem; }
    .section-explainer { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .case-layer-block { padding-left: 0.9rem; }
}

/* ---------------- PROPOSAL (top of page) ---------------- */
.section-proposal { padding-top: 0.5rem; padding-bottom: 3.5rem; }

.lede-major {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--text-primary);
    font-weight: 300;
    max-width: 880px;
    margin-bottom: 3rem;
}

.proposal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
}

.proposal-label {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    padding-bottom: 0.9rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--border-soft);
}

.proposal-block p:not(.proposal-label) {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 300;
    margin-bottom: 1rem;
}
.proposal-block p:last-child { margin-bottom: 0; }

.section-work > .section-inner > .section-eyebrow { margin-bottom: 1.5rem; }

@media (max-width: 900px) {
    .proposal-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .lede-major { font-size: 1.25rem; margin-bottom: 2.25rem; }
}

/* ---------------- PITCH HERO: key art + client mark ---------------- */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 4rem;
    align-items: center;
}

.hero-copy { min-width: 0; }

.sphe-logo {
    display: block;
    height: 158px;
    width: auto;
    opacity: 0.92;
    margin: 0.75rem 0 2rem;
}

.hero-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    border: 1px solid var(--border-soft);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1000px) {
    .hero-split { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-art { max-width: 300px; }
    .sphe-logo { height: 126px; margin: 0.5rem 0 1.5rem; }
}

@media (max-width: 640px) {
    .hero-art { max-width: 230px; }
    .sphe-logo { height: 112px; }
}

/* ---------------- FOUR-UP GALLERY + CASE NOTES ---------------- */
.case-visual-gallery-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

.case-note {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text-muted);
    font-weight: 300;
    margin-top: 1.1rem;
    max-width: 760px;
}

.case-visual-section .case-note:first-of-type { margin-top: 0; margin-bottom: 1.4rem; }

.case-video-grid-single { grid-template-columns: 1fr; max-width: 780px; }

/* ---------------- CREATOR SCORECARD ---------------- */
.score-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.scorecard {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-weight: 300;
    min-width: 680px;
}

.scorecard th,
.scorecard td {
    text-align: right;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}

.scorecard thead th {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    border-bottom-color: var(--gold);
}

.scorecard tbody th[scope="row"] {
    text-align: left;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--text-primary);
    font-weight: 400;
}

.scorecard tbody td {
    font-size: 0.98rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.scorecard th:first-child,
.scorecard thead th:first-child { text-align: left; }

.scorecard .score-take {
    text-align: left;
    font-size: 0.88rem;
    color: var(--text-muted);
    white-space: normal;
    min-width: 200px;
}

.score-total th,
.score-total td {
    border-bottom: none;
    border-top: 1px solid var(--gold);
    color: var(--text-primary);
}
.score-total td { font-weight: 400; }

@media (max-width: 900px) {
    .case-visual-gallery-four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .case-visual-gallery-four { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .scorecard th, .scorecard td { padding: 0.7rem 0.7rem; }
}

/* The prose column is left-aligned because of what it holds, not where it sits.
   Keyed to the class so a numeric last column stays right-aligned with its values. */
.scorecard thead th.score-take { text-align: left; }

.case-study-stats-three {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
    max-width: 760px;
}

@media (max-width: 640px) {
    .case-study-stats-three { grid-template-columns: 1fr; }
}

/* ---------------- CTV DELIVERY FUNNEL ---------------- */
.ctv-funnel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    margin: 1.5rem 0;
    max-width: 760px;
}

.funnel-step {
    background: var(--bg-raised);
    padding: 1.35rem 1rem;
    text-align: center;
}

.funnel-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.funnel-label {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* ---------------- CTV CHART ---------------- */
.chart-title {
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 2rem 0 0.4rem;
}

.ctv-chart {
    display: block;
    width: 100%;
    height: auto;
    max-width: 960px;
    overflow: visible;
}

.ctv-chart .cb { fill: var(--gold); transition: fill 0.2s ease; }
.ctv-chart .cb:hover { fill: #e0c288; }
.ctv-chart .cg { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.ctv-chart .cax { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.ctv-chart .cmark { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 2 3; }

.ctv-chart .cgl,
.ctv-chart .cx {
    font-family: var(--font-condensed);
    font-size: 11px;
    fill: var(--text-muted);
    letter-spacing: 0.08em;
}

.ctv-chart .cann {
    font-family: var(--font-condensed);
    font-size: 10px;
    fill: var(--text-muted);
    letter-spacing: 0.18em;
}

.ctv-chart .cpk {
    font-family: var(--font-condensed);
    font-size: 12px;
    fill: var(--text-primary);
    letter-spacing: 0.06em;
}

.case-note-fine { font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 640px) {
    .ctv-funnel { grid-template-columns: 1fr; }
    .funnel-value { font-size: 1.5rem; }
    .ctv-chart .cx { font-size: 15px; }
    .ctv-chart .cgl { font-size: 14px; }
}

/* Reviewer flagged explanatory copy as dim twice. These are the paragraphs that
   carry the methodology, so lift them from muted to secondary ink (4.91:1 -> 8.3:1)
   and leave only the finest print at muted, slightly larger. */
.case-note,
.ig-note { color: var(--text-secondary); }

.case-note-fine {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.scorecard .score-take { color: var(--text-secondary); }
.ctv-chart .cgl,
.ctv-chart .cx { fill: var(--text-secondary); }

/* ---------------- MOBILE FIXES (measured at 390px and 320px) ---------------- */

/* The featured case container uses a negative inline margin to bleed its panel
   past the section gutter. Below the gutter width that pushes 4px off both
   screen edges, so neutralise it rather than let the page overhang. */
@media (max-width: 700px) {
    .case-study-featured {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Jump links were 26px tall — below a comfortable tap target. */
@media (max-width: 760px) {
    .work-index-links a {
        display: inline-block;
        padding: 0.7rem 0.1rem;
        min-height: 44px;
        line-height: 1.6;
    }
}

/* The scorecard scrolls horizontally on a phone with no affordance, hiding the
   two columns that carry the evidence. Cue it, and fade the cut edge. */
.scroll-cue { display: none; }

@media (max-width: 860px) {
    .scroll-cue {
        display: block;
        font-family: var(--font-condensed);
        font-size: 0.68rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold);
        margin: -0.4rem 0 0.75rem;
    }
    .score-wrap {
        position: relative;
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
        mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    }
}

/* SVG text scales with the viewBox, so a px size here is divided by roughly
   3 on a phone. These are user units chosen to land near 10px rendered. */
@media (max-width: 760px) {
    .ctv-chart .cx-alt { display: none; }
    .ctv-chart .cgl,
    .ctv-chart .cx { font-size: 30px; }
    .ctv-chart .cann { font-size: 26px; }
    .ctv-chart .cpk { font-size: 30px; }
}

/* At 320px the stat grid's second column overran the viewport by 3px, and the
   chart's labels were still under 8px rendered. */
@media (max-width: 420px) {
    .case-study-stats { grid-template-columns: 1fr; }
    .ctv-chart .cgl,
    .ctv-chart .cx { font-size: 40px; }
    .ctv-chart .cann { font-size: 34px; }
    .ctv-chart .cpk { font-size: 40px; }
}

/* The base sheet keeps a three-stat block 3-up on mobile via
   .case-study-stats:has(.stat:nth-child(3):last-child). That rule out-specifies a
   plain class override, and these labels are longer than the ones it was tuned
   for, so the third tile was clipped at 320px. Match its specificity and stack. */
@media (max-width: 420px) {
    .case-study-stats:has(.stat:nth-child(3):last-child) {
        grid-template-columns: 1fr;
    }
}

/* ---------------- CHART LABEL SIZING ----------------
   SVG text scales with the viewBox, so a fixed px size renders smaller as the
   chart narrows — measured at 4.4px on a 320px screen. These steps hold the
   rendered size near 11px from 320px up to desktop. One custom property drives
   every label so the ladder stays in one place. */
.ctv-chart { --tick: 11px; }
.ctv-chart .cgl,
.ctv-chart .cx,
.ctv-chart .cpk { font-size: var(--tick); }
.ctv-chart .cann { font-size: calc(var(--tick) * 0.85); }

@media (max-width: 340px)                          { .ctv-chart { --tick: 44px; } }
@media (min-width: 341px) and (max-width: 420px)   { .ctv-chart { --tick: 34px; } }
@media (min-width: 421px) and (max-width: 500px)   { .ctv-chart { --tick: 27px; } }
@media (min-width: 501px) and (max-width: 600px)   { .ctv-chart { --tick: 22px; } }
@media (min-width: 601px) and (max-width: 720px)   { .ctv-chart { --tick: 18px; } }
@media (min-width: 721px) and (max-width: 840px)   { .ctv-chart { --tick: 15px; } }
@media (min-width: 841px) and (max-width: 1000px)  { .ctv-chart { --tick: 13px; } }

/* At phone width the premiere marker collides with the peak label. The caption
   carries premiere night in words, so drop the annotation rather than crowd it. */
@media (max-width: 600px) {
    .ctv-chart .cann,
    .ctv-chart .cmark { display: none; }
}

/* ---------------- STAT SUB-LABELS + FORWARD LINES ---------------- */
.stat-sub {
    display: block;
    font-family: var(--font-body);
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-weight: 300;
    margin-top: 0.45rem;
}

.case-forward {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 300;
    border-left: 1px solid var(--gold);
    padding-left: 1.1rem;
    margin-top: 1.6rem;
}

.case-forward-label {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
}
.case-forward-label em { font-style: italic; }

/* A second label inside a visual section needs the same separation the section
   itself gets — otherwise it reads as a caption on the paragraph above it. */
.case-visual-section-label + .case-visual-section-label,
.case-note + .case-visual-section-label,
.ctv-funnel + .case-visual-section-label {
    margin-top: 2.75rem;
}

/* Reel cards: the longest handle (@homemaker.on.a.budget) outgrew a half-width
   column on a phone and got clipped. Let it break, and drop the tracking that
   was making it wider than it needed to be. */
.reel-handle { overflow-wrap: anywhere; }
@media (max-width: 620px) {
    .reel-handle { letter-spacing: 0.04em; font-size: 0.68rem; }
}
/* Cards in a row are independent tiles of different text heights, so their
   CTAs landed at different depths. Push the CTA to the bottom of each card. */
.reel-card { display: flex; flex-direction: column; }
.reel-card .reel-cta { margin-top: auto; align-self: flex-start; }
.reel-card .reel-title { margin-bottom: 0.55rem; }

/* Sony Pictures Classics lockup: a wide horizontal wordmark (about 9:1), so it
   is sized by width, unlike the portrait SPHE lockup which is sized by height. */
.spc-logo {
    display: block;
    width: 290px;
    height: auto;
    opacity: 0.92;
    margin: 0.75rem 0 2rem;
}
@media (max-width: 900px) {
    .spc-logo { width: 210px; margin: 0.5rem 0 1.5rem; }
}
@media (max-width: 640px) {
    .spc-logo { width: 180px; }
}

/* Closing note under the two proposal columns. */
.proposal-note {
    max-width: 980px;
    margin-top: 2.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* A long film title needs a smaller display size than a short one, or the hero
   runs to four lines and strands a word. Applied per page, not globally. */
.hero-title-long { font-size: clamp(2rem, 4.4vw, 3.5rem); }