/* ==========================================================================
   home.css — TNAADO home page (v3 black & red billionaire-luxe)
   Sections: Hero · Services · Location · Our Home (Offices)
   See DESIGN.md §5–§8 for the spec this file implements.
   Tokens are imported via main.css (variables.css + animations.css).
   ========================================================================== */

/* ==================== Page-level scope ==================== */
/* Cinematic-dark canvas — pure ink body with a slow drifting red ember mist.
   Star Wars / Anakin / Apple TV+ launch vibes. Sections alternate between
   #0a0a0a and a 1-stop-lifted #0e0e0e for breath, never bone/cream.            */
.home-page--cinematic {
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse 90% 60% at 50% 18%,  rgba(200, 16, 46, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 70% 80% at 50% 100%, rgba(200, 16, 46, 0.045) 0%, transparent 65%);
    color: var(--on-black);
    font-family: var(--font-body);
}

@media (min-width: 1024px) {
    /* fixed-attach the ember on desktop only — better perf on mobile */
    .home-page--cinematic { background-attachment: fixed; }
}

.home-page--cinematic main {
    display: block;
    position: relative;
    background: var(--ink);
}

/* Drifting red mist layer — extremely subtle slow pan; gives the page life
   without ever reading as decorative. Disabled for reduced-motion. */
.home-page--cinematic main::before {
    content: "";
    position: fixed;
    inset: -10vh -10vw;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 45% at 22% 30%, rgba(200, 16, 46, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 45% 50% at 78% 70%, rgba(200, 16, 46, 0.05) 0%, transparent 65%);
    animation: cinematic-drift 32s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes cinematic-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
    100% { transform: translate3d( 2%,  1%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .home-page--cinematic main::before { animation: none; }
}

/* Keep all section content above the drifting mist */
.home-page--cinematic main > section { position: relative; z-index: 1; }

/* ==========================================================================
   SECTION BRIDGES — soft transitions that dissolve seams (DESIGN/r5).
   - `.section-bridge` — 240px tall vertical mist that overlaps adjacent sections
   - `.section-bloom` — low-opacity red radial bloom that sits across a seam
   v4 refinement: 4-stop gradients on bridges (smoother handoff), atmospheric
   blur on bloom (subtle depth), and a bone-to-bone variant for hero→B which
   is just a gentle warmth shift (no contrast).
   ========================================================================== */
.section-bridge {
    position: relative;
    height: 240px;
    margin-top: -120px;
    margin-bottom: -120px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        var(--bg-a, transparent) 0%,
        var(--bg-mid-a, transparent) 35%,
        var(--bg-mid-b, transparent) 65%,
        var(--bg-b, transparent) 100%
    );
}

.section-bridge--bone-to-ink,
.section-bridge--ink-to-bone {
    /* Cinematic mode: every section is ink — these legacy variants collapse
       to the ember seam so any stray usage stays consistent. */
    --bg-a: transparent;
    --bg-mid-a: transparent;
    --bg-mid-b: transparent;
    --bg-b: transparent;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(200, 16, 46, 0.08) 50%,
            transparent 100%
        );
}

/* Cinematic-dark seam: red mist bleeds across the boundary between two
   ink sections. Replaces the old bone bridge variants.
   Polish: tightened rgb to a single tonal red (no orange/green shifts) and
   slightly softened the peak so the seam reads as a glow, not a band. */
.section-bridge--ember {
    height: 240px;
    margin-top: -120px;
    margin-bottom: -120px;
    --bg-a: transparent;
    --bg-mid-a: transparent;
    --bg-mid-b: transparent;
    --bg-b: transparent;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(200, 16, 46, 0.03) 28%,
            rgba(200, 16, 46, 0.085) 50%,
            rgba(200, 16, 46, 0.03) 72%,
            transparent 100%
        );
    filter: blur(10px);
    mix-blend-mode: screen;
}

.section-bloom {
    position: relative;
    height: 120px;
    margin-top: -40px;
    margin-bottom: -40px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 60% 100% at 50% 50%,
        rgba(200, 16, 46, 0.10) 0%,
        rgba(200, 16, 46, 0.04) 30%,
        transparent 70%
    );
    /* No backdrop-filter — was blurring labs CTA content (tnaado.com link)
       at the seam. Keep the red mist as a pure radial overlay. */
    filter: blur(12px);
}

.section-bloom--inverted {
    background: radial-gradient(
        ellipse 60% 100% at 50% 50%,
        rgba(200, 16, 46, 0.08) 0%,
        rgba(60, 8, 18, 0.12) 28%,
        rgba(10, 10, 10, 0.08) 55%,
        transparent 78%
    );
}


/* ==========================================================================
   TYPE LADDER — single canonical H2 baseline shared across every section.
   Per F500 brief §M7: every consecutive section's H2 visually interlocks.
   Same baseline rhythm; italic accent stays per-section via :is() em rule.
   ========================================================================== */
.practice__headline,
.our-home__headline,
.home-testimonials__headline,
.home-news__headline,
.home-highlight__headline,
.intake-cta__headline {
    /* Readability pass: down ~30% from prior cinematic 40-64px.
       Canonical H2 baseline: clamp(1.75rem, 3vw, 2.5rem) → 28-40px. */
    font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0 0 24px;
    max-width: 22ch;
}

.practice__headline em,
.our-home__headline em,
.home-testimonials__headline em,
.home-news__headline em,
.home-highlight__headline em,
.intake-cta__headline em {
    font-style: italic;
    font-weight: 400;
}


/* ==========================================================================
   CHAPTER-ANCHOR POSITIONING (per brief §3 + motion.css contract)
   Sections with a `<header class="chapter-anchor">` child become positioning
   contexts. Two layouts:
     - 5fr/7fr grid sections: anchor sits in the FIRST grid cell at top
     - full-bleed sections (hero, labs-cta, intake-cta): anchor is absolutely
       positioned to top-left of the inner container, 24px from the edge
   The `.chapter-anchor` class itself is owned by motion.css.
   ========================================================================== */
.hero,
.labs-cta,
.practice,
.our-home,
.home-testimonials,
.home-news,
.home-highlight,
.practice-positioning,
.intake-cta {
    position: relative;
}

/* Full-bleed sections — absolute top-left of inner container */
.hero > .chapter-anchor,
.labs-cta > .chapter-anchor,
.intake-cta > .chapter-anchor,
.practice-positioning > .chapter-anchor,
.home-testimonials > .chapter-anchor,
.home-news > .chapter-anchor {
    position: absolute;
    top: 24px;
    left: max(32px, calc((100vw - 1280px) / 2 + 32px));
    z-index: 4;
}

/* For sections whose anchor is inside an inner wrapper, offset is relative */
.practice .chapter-anchor,
.home-highlight .chapter-anchor {
    margin: 0 0 24px;
}

/* Grid sections (5fr/7fr) — anchor lives inside the first grid cell, top */
.our-home__header > .chapter-anchor,
.practice-row > .chapter-anchor {
    margin: 0 0 16px;
}

@media (max-width: 1024px) {
    .hero > .chapter-anchor,
    .labs-cta > .chapter-anchor,
    .intake-cta > .chapter-anchor,
    .practice-positioning > .chapter-anchor,
    .home-testimonials > .chapter-anchor,
    .home-news > .chapter-anchor {
        left: 24px;
    }
}


/* ==========================================================================
   §A HERO — cinematic-dark, full-bleed Sora video, bottom-left text overlay
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Full viewport per cinematic-dark direction */
    min-height: 100vh;
    background: var(--ink);
    display: flex;
    align-items: flex-end;       /* text overlay anchored bottom */
}

@media (max-height: 800px) and (min-width: 1024px) {
    .hero { min-height: 92vh; }
}

/* Bottom-edge red mist seam — hero fades into next ink section through a
   thin transparent → 0.10 red gradient. Signals section transition. */
.hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 200px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(10, 10, 10, 0.50) 40%,
        rgba(10, 10, 10, 0.85) 75%,
        rgba(200, 16, 46, 0.10) 100%
    );
}

.hero__video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: var(--ink);
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    /* Slight desaturate + contrast for the cinematic Vader / NVIDIA look */
    filter: saturate(0.92) contrast(1.08);
}

/* Atmospheric overlay: subtle ink vignette + low ember glow at the figure
   side; no bone wash anywhere. Lets the Sora red glow read clean. */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 60% at 70% 50%, rgba(200, 16, 46, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at center, transparent 30%, rgba(10, 10, 10, 0.55) 100%),
        linear-gradient(to top, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.20) 40%, transparent 70%);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Top edge ink wash so the header bookend blends into the hero */
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.65) 0%, transparent 28%);
}

/* Bottom-left text overlay panel */
.hero__panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 880px;
    padding: 0 32px 96px;
    margin-left: max(32px, calc((100vw - 1280px) / 2));
}

/* Eyebrow — red mono caps with subtle glow */
.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red);
    text-shadow: 0 0 12px rgba(200, 16, 46, 0.40);
    margin: 0 0 32px 0;
}

/* Headline — refined Fraunces italic, white-cream on black.
   Readability pass: down ~30% from prior 56-104px. */
.hero__headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--on-black);
    margin: 0 0 28px 0;
    text-shadow:
        0 2px 24px rgba(10, 10, 10, 0.55),
        0 0 64px rgba(200, 16, 46, 0.10);
}

.hero__headline em {
    font-style: italic;
    font-weight: 400;
    color: var(--on-black);
}

/* Subhead — italic Fraunces, cream-muted. Readability: 17-20px. */
.hero__subhead {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.45;
    color: var(--on-black-mute);
    max-width: 44ch;
    margin: 0 0 40px 0;
    text-shadow: 0 1px 18px rgba(10, 10, 10, 0.55);
}

/* CTA — refined red breathing glow on dark; fills red on hover */
.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    border: 1px solid var(--red);
    background: rgba(10, 10, 10, 0.40);
    color: var(--red);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    animation: hero-breathe 4s ease-in-out infinite;
    transition: color 600ms ease-out,
                background 600ms ease-out,
                box-shadow 800ms ease-out,
                border-color 600ms ease-out;
    will-change: box-shadow;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}

.hero__cta:hover,
.hero__cta:focus-visible {
    background: var(--red);
    color: var(--on-black);
    animation: none;
    box-shadow:
        inset 0 0 12px rgba(200, 16, 46, 0.30),
        0 0 36px rgba(200, 16, 46, 0.40),
        0 0 80px rgba(200, 16, 46, 0.20);
    outline: none;
}

.hero__cta-arrow {
    transition: transform 600ms ease-out;
}

.hero__cta:hover .hero__cta-arrow {
    transform: translateX(6px);
}

@keyframes hero-breathe {
    0%, 100% {
        box-shadow:
            0 0 18px rgba(200, 16, 46, 0.20),
            0 0 48px rgba(200, 16, 46, 0.10);
    }
    50% {
        box-shadow:
            0 0 28px rgba(200, 16, 46, 0.40),
            0 0 72px rgba(200, 16, 46, 0.20);
    }
}


/* ==========================================================================
   §B PRACTICE-POSITIONING — quiet declaration of who TNAADO is.
   Sits between hero (A) and practice (C). Tight, cinematic, restrained.
   Sora positioning video plays underneath via .has-video + .section-bg-overlay.
   ========================================================================== */
.practice-positioning {
    background: var(--ink);
    padding: 80px 0;
    color: var(--on-black);
    text-align: left;
    position: relative;
    overflow: hidden;
}
.practice-positioning__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

/* LEFT — video sunk INTO the section. No visible border, no halo, no
   chrome. Edges feathered into ink so the clip reads as part of the
   canvas, not a card on top of it. */
.practice-positioning__media {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    overflow: hidden;
    background: var(--ink);
    /* Feather every edge into ink so there's no visible boundary */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-composite: intersect;
}
.practice-positioning__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(0.88) contrast(1.04) brightness(0.85);
}
/* Quiet ink wash so the video sinks further; no red, no chrome */
.practice-positioning__media-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 70% at 50% 50%, transparent 0%, rgba(10, 10, 10, 0.25) 75%, rgba(10, 10, 10, 0.55) 100%);
}

.practice-positioning__body {
    max-width: 38ch;
}

/* ===== TNAADO emblem overlay — same spinning SVG as the Terence chat
   launcher, layered on the positioning video and centred so the
   visual centre of the clip (the "eye" / ball) sits inside the emblem. ===== */
.firm-emblem {
    position: absolute;
    /* Centred dead-on in the media frame so the video's focal point
       aligns with the centre of the emblem. */
    top: 50%;
    left: 50%;
    width: 64%;
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.92;
    filter: drop-shadow(0 0 18px rgba(200, 16, 46, 0.45))
            drop-shadow(0 0 42px rgba(200, 16, 46, 0.22));
    animation: firm-emblem-spin 32s linear infinite;
}

@keyframes firm-emblem-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .firm-emblem { animation: none; }
}

@media (max-width: 900px) {
    .firm-emblem { width: 72%; }
}

/* ==========================================================================
   §C.6 RESEARCH — TNAADO Lab section on home (between process and labs CTA).
   Two-column editorial: text left, 4-row concentration list right.
   Atmospheric Sora video bg (page-lab.mp4 once gen lands; section-process
   fallback in source).
   ========================================================================== */
.home-research {
    background: var(--ink);
    padding: 112px 0;
    color: var(--on-black);
    position: relative;
    overflow: hidden;
}
.home-research__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 80px;
    align-items: start;
}

.home-research__col-text { max-width: 38ch; }

.home-research__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font: 500 11px/1 var(--font-mono);
    color: var(--red);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin: 0 0 24px;
}
.home-research__eyebrow-rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}
.home-research__headline {
    font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0 0 24px;
}
.home-research__headline em {
    font-style: italic;
    color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}
.home-research__lede {
    font: 400 16px/1.6 var(--font-body);
    color: var(--on-black);
    margin: 0 0 18px;
    max-width: 38ch;
}
.home-research__body {
    font: 400 14.5px/1.65 var(--font-body);
    color: var(--on-black-mute);
    margin: 0 0 32px;
    max-width: 42ch;
}
.home-research__body em {
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
    font-style: italic;
}
.home-research__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border: 1px solid var(--red);
    color: var(--red);
    background: transparent;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 600ms ease, color 600ms ease, gap 400ms ease, box-shadow 600ms ease;
}
.home-research__cta:hover,
.home-research__cta:focus-visible {
    background: var(--red);
    color: var(--on-black);
    gap: 18px;
    box-shadow:
        0 0 0 1px var(--red),
        0 0 24px rgba(200, 16, 46, 0.45),
        0 0 56px rgba(200, 16, 46, 0.20);
    outline: none;
}
.home-research__arrow { transition: transform 400ms ease; }
.home-research__cta:hover .home-research__arrow { transform: translateX(4px); }

/* Concentrations — 4 hairline rows, Roman numeral + name + desc */
.home-research__concentrations {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(245, 241, 232, 0.10);
}
.home-research__concentration {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(245, 241, 232, 0.10);
    align-items: start;
}
.home-research__num {
    font: 400 italic clamp(1.25rem, 1.6vw, 1.625rem)/1 var(--font-display);
    color: var(--red);
    margin: 0;
}
.home-research__name {
    font: 400 clamp(1rem, 1.4vw, 1.125rem)/1.2 var(--font-display);
    font-style: italic;
    color: var(--on-black);
    margin: 0 0 6px;
}
.home-research__desc {
    font: 400 13.5px/1.55 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 48ch;
}

@media (max-width: 900px) {
    .home-research { padding: 80px 0; }
    .home-research__inner { grid-template-columns: 1fr; gap: 48px; }
    .home-research__col-text { max-width: 100%; }
}

.practice-positioning__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font: 500 11px/1 var(--font-mono);
    color: var(--red);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.practice-positioning__eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--red);
    opacity: 0.7;
}

.practice-positioning__statement {
    font: 400 clamp(1.625rem, 2.8vw, 2.25rem)/1.2 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0 0 24px;
}
.practice-positioning__statement em {
    font-style: italic;
    color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}

.practice-positioning__lede {
    font: 400 16px/1.65 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
}

/* Video object-position: focal point centred on the LEFT third
   (where the visible video lives). Right side of section is masked
   solid black behind the text column. */
.practice-positioning .section-bg-video {
    object-position: 30% center;
}

@media (max-width: 900px) {
    .practice-positioning { padding: 72px 0; }
    .practice-positioning__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .practice-positioning__media { aspect-ratio: 4 / 3; max-width: 560px; margin: 0 auto; }
    .practice-positioning__body { max-width: 100%; }
}


/* ==========================================================================
   §6 SERVICES — three cards, asymmetric heights, hairline borders, red hover
   ========================================================================== */
.services {
    /* shares the warm canvas — no hard edge to neighbours */
    background: transparent;
    padding: 128px 0 96px;
    color: var(--ink);
    position: relative;
}

.services__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.services__header {
    max-width: 760px;
    margin-bottom: 96px;
}

.services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--red);
    margin: 0 0 28px 0;
}

.services__eyebrow-rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

.services__headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.625rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 20px 0;
    max-width: 22ch;
}

.services__headline em {
    font-style: italic;
    font-weight: 400;
}

.services__lede {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink);
    opacity: 0.78;
    max-width: 56ch;
    margin: 0;
}

/* Grid — 3 cards, asymmetric vertical offsets for editorial rhythm */
.services__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Cards: image at top, body below. Cards alternate vertical offset for cascade. */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

/* All three cards aligned at the same baseline — no cascade. The middle
   card was offset before; user wants it matched to the others. */
.service-card--01,
.service-card--02,
.service-card--03 { transform: translateY(0); }

.service-card:hover,
.service-card--02:hover,
.service-card--03:hover { transform: translateY(-4px); }

/* Image — full-bleed, no container border, feathered bottom edge so the
   image dissolves into the body block (per r5 §3 — no hard rectangle). */
.service-card__media {
    position: relative;
    margin: 0 0 20px 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
    /* feathered bottom — image fades into the section */
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* All three media tiles flush — no overlap so card sizing stays consistent. */
.service-card--01 .service-card__media,
.service-card--02 .service-card__media,
.service-card--03 .service-card__media {
    margin-left: 0;
    margin-right: 0;
    z-index: 1;
}

.service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.001);
    transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 600ms ease-out;
    filter: contrast(1.05) saturate(0.95);
}

.service-card:hover .service-card__media img,
.service-card:focus-within .service-card__media img {
    transform: scale(1.03);
    filter: contrast(1.08) saturate(1);
}

/* Body — 16px gap between elements per H. */
.service-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
}

.service-card__num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0;
}

.service-card__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 4px 0;
    transition: color 600ms ease-out;
}

.service-card__title em {
    font-style: italic;
    font-weight: 400;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    margin-top: 4px;
    align-self: flex-start;
    transition: color 600ms ease-out, gap 400ms ease-out;
}

.service-card__arrow {
    display: inline-block;
    transition: transform 600ms ease-out;
    margin-left: 0;
}

.service-card:hover .service-card__title,
.service-card:focus-within .service-card__title {
    color: var(--red);
}

.service-card__link:hover,
.service-card__link:focus-visible {
    color: var(--red);
    outline: none;
    gap: 14px;
}

.service-card__link:hover .service-card__arrow,
.service-card:hover .service-card__arrow,
.service-card:focus-within .service-card__arrow {
    transform: translateX(6px);
}

/* CTA at end of services — single refined link */
.services__cta {
    margin-top: 128px;  /* card 03 is offset 64px down — leave room */
    display: flex;
    justify-content: center;
}

.services__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    background: transparent;
    border: 1px solid var(--red);
    text-decoration: none;
    transition: background 600ms ease-out, color 600ms ease-out, box-shadow 800ms ease-out;
}

.services__cta-link:hover,
.services__cta-link:focus-visible {
    background: var(--red);
    color: var(--bone);
    box-shadow:
        inset 0 0 8px rgba(200, 16, 46, 0.20),
        0 0 24px rgba(200, 16, 46, 0.18),
        0 0 48px rgba(200, 16, 46, 0.10);
    outline: none;
}

.services__cta-arrow {
    display: inline-block;
    transition: transform 400ms ease-out;
}

.services__cta-link:hover .services__cta-arrow {
    transform: translateX(6px);
}

@media (max-width: 1024px) {
    .services__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .service-card--01,
    .service-card--02,
    .service-card--03 {
        transform: none;
    }
    .service-card--01 .service-card__media,
    .service-card--03 .service-card__media {
        margin-left: 0;
        margin-right: 0;
    }
    .services__cta {
        margin-top: 80px;
    }
}




/* ==========================================================================
   §7 TNAADO LABS CTA — sister-firm CTA, black section, video left + brand right
   v4 polish: deepened atmospheric vertical wash (#080808 → #0a0a0a), 6-stop
   video fades on every edge, slightly looser brand-col gap (16 → 18px).
   Composition + concept locked per user — "the visual is really cool."
   ========================================================================== */
.labs-cta {
    background:
        linear-gradient(
            to bottom,
            #080808 0%,
            #090909 35%,
            #0a0a0a 70%,
            #0a0a0a 100%
        ),
        var(--ink);
    color: var(--on-black);
    padding: 0;
    overflow: hidden;
}

.labs-cta__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 32px;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: stretch;
}

.labs-cta__video-col {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    /* video bleeds to top/bottom of the inner container — no visible frame */
    margin: -64px 0;
    align-self: stretch;
}

/* subtle red haze near right edge — brand panel feels lit by video */
.labs-cta__video-col::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 100% 50%,
        rgba(200, 16, 46, 0.10) 0%,
        transparent 50%
    );
}

/* Crop wrapper for Brickell video: only show LOWER HALF (top 50% clipped) */
.labs-cta__video-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.labs-cta__video {
    position: absolute;
    left: 0;
    top: -100%;       /* shift video up by full container height */
    width: 100%;
    height: 200%;     /* video is 2× container so bottom half fills it */
    object-fit: cover;
    object-position: bottom center;
    filter: saturate(0.85) contrast(1.06);
}

/* Two-sided fade — video eases in from BOTH edges into the section bg.
   v4 polish: 6-stop horizontal gradient, smoother handoff at every transition,
   no hard edges remain. Left dissolves quickly so tornado reveals; right
   bleeds further into the brand panel for a lit-from-video feel. */
.labs-cta__video-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to right,
            var(--ink) 0%,
            rgba(10, 10, 10, 0.78) 4%,
            rgba(10, 10, 10, 0.42) 10%,
            rgba(10, 10, 10, 0.16) 16%,
            rgba(10, 10, 10, 0.04) 22%,
            transparent 30%,
            transparent 42%,
            rgba(10, 10, 10, 0.18) 56%,
            rgba(10, 10, 10, 0.46) 70%,
            rgba(10, 10, 10, 0.78) 84%,
            rgba(10, 10, 10, 0.94) 92%,
            var(--ink) 100%
        );
}

/* Top + bottom soft fades so the cropped-half video meets the section
   bg without a hard horizontal seam. v4: 6-stop top + bottom dissolves. */
.labs-cta__video-col::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            var(--ink) 0%,
            rgba(10, 10, 10, 0.78) 3%,
            rgba(10, 10, 10, 0.34) 8%,
            rgba(10, 10, 10, 0.10) 13%,
            transparent 18%,
            transparent 82%,
            rgba(10, 10, 10, 0.10) 87%,
            rgba(10, 10, 10, 0.34) 92%,
            rgba(10, 10, 10, 0.78) 97%,
            var(--ink) 100%
        );
}

.labs-cta__brand-col {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;        /* v4 polish: 16→18 reads more refined / less crammed */
    height: 100%;
    justify-content: center;
}

.labs-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0;
}

.labs-cta__eyebrow-rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

/* TNAADO LABS — real wordmark from tnaado.com, refined red underglow halo. */
.labs-cta__logo-link {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
    margin: 0;
}

.labs-cta__logo-img {
    height: 44px;
    width: auto;
    max-width: 100%;
    display: block;
    /* invert dark wordmark to white on the black panel */
    filter: brightness(0) invert(1)
            drop-shadow(0 0 14px rgba(200, 16, 46, 0.30))
            drop-shadow(0 0 32px rgba(200, 16, 46, 0.18));
    animation: labs-glow-img 4.5s ease-in-out infinite;
    transition: filter 600ms ease-out;
}

.labs-cta__logo-link:hover .labs-cta__logo-img,
.labs-cta__logo-link:focus-visible .labs-cta__logo-img {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 20px rgba(200, 16, 46, 0.45))
            drop-shadow(0 0 44px rgba(200, 16, 46, 0.28));
    outline: none;
}

@keyframes labs-glow-img {
    0%, 100% {
        filter: brightness(0) invert(1)
                drop-shadow(0 0 14px rgba(200, 16, 46, 0.25))
                drop-shadow(0 0 32px rgba(200, 16, 46, 0.15));
    }
    50% {
        filter: brightness(0) invert(1)
                drop-shadow(0 0 20px rgba(200, 16, 46, 0.40))
                drop-shadow(0 0 44px rgba(200, 16, 46, 0.25));
    }
}

@media (prefers-reduced-motion: reduce) {
    .labs-cta__logo-img {
        animation: none;
    }
}

@keyframes labs-glow {
    0%, 100% {
        color: #444;
        text-shadow:
            0 0 12px rgba(200, 16, 46, 0.25),
            0 0 24px rgba(200, 16, 46, 0.15),
            0 0 48px rgba(200, 16, 46, 0.08);
    }
    50% {
        color: #6a6a6a;
        text-shadow:
            0 0 18px rgba(200, 16, 46, 0.40),
            0 0 36px rgba(200, 16, 46, 0.25),
            0 0 72px rgba(200, 16, 46, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .labs-cta__logo-labs {
        animation: none;
    }
}

.labs-cta__headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0;
    max-width: 22ch;
}

.labs-cta__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 75%, var(--on-black));
}

.labs-cta__sub {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--on-black-mute);
    margin: 0;
    max-width: 44ch;
}

/* Verbatim tagline — italic Fraunces, 19px, lighter on black */
.labs-cta__tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.1875rem;     /* 19px (was 22+) */
    line-height: 1.4;
    color: var(--on-black-mute);
    margin: 0;
    max-width: 44ch;
}

.labs-cta__tagline em {
    font-style: italic;
    color: color-mix(in oklab, var(--on-black) 78%, var(--red));
}

/* mono caps stat strip — 11px, single line at desktop */
.labs-cta__stats {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 12px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);     /* 11px */
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--on-black);
    border-top: 1px solid rgba(245, 241, 232, 0.10);
    border-bottom: 1px solid rgba(245, 241, 232, 0.10);
    white-space: nowrap;
    overflow: hidden;
}

@media (max-width: 1023.98px) {
    .labs-cta__stats { flex-wrap: wrap; }
}

.labs-cta__stats li {
    margin: 0;
}

.labs-cta__stats-sep {
    color: var(--red);
    opacity: 0.7;
}

/* Liftable quote — 17px, hairline red left border */
.labs-cta__quote {
    margin: 0;
    padding: 4px 0 4px 16px;
    border-left: 2px solid var(--red);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.0625rem;        /* 17px (was 16/22) */
    line-height: 1.45;
    color: var(--on-black);
    max-width: 40ch;
    box-shadow: -8px 0 24px -16px rgba(200, 16, 46, 0.50);
}

.labs-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    background: transparent;
    border: 1px solid var(--red);
    padding: 14px 24px;
    text-decoration: none;
    transition: background 600ms ease-out,
                color 600ms ease-out,
                box-shadow 800ms ease-out;
}

.labs-cta__link:hover,
.labs-cta__link:focus-visible {
    background: var(--red);
    color: var(--on-black);
    box-shadow:
        inset 0 0 8px rgba(200, 16, 46, 0.20),
        0 0 24px var(--red-soft),
        0 0 48px var(--red-mist);
    outline: none;
}

.labs-cta__arrow {
    transition: transform 400ms ease-out;
}

.labs-cta__link:hover .labs-cta__arrow {
    transform: translateX(4px);
}


/* ==========================================================================
   §8 OUR HOME — Toronto HQ, 4 photos asymmetric, address + more-on-the-firm
   ========================================================================== */
.our-home {
    background: #0e0e0e;        /* slightly lifted ink for breath between sections */
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    color: var(--on-black);
}

.our-home::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 50% 60% at 80% 50%,
        rgba(200, 16, 46, 0.06) 0%,
        transparent 60%
    );
}

.our-home__inner { position: relative; z-index: 1; }

.our-home__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
}

.our-home__header {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    position: sticky;
    top: 96px;
}

.our-home__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 24px 0;
}

.our-home__eyebrow-rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

/* §B type-ladder: .our-home__headline inherits the canonical H2 baseline
   defined at the top of the file. Section-specific overrides only. */
.our-home__headline {
    margin: 0 0 24px 0;
    transition: text-shadow 700ms ease-out;
}

.our-home__headline em {
    transition: color 700ms ease-out, text-shadow 700ms ease-out;
}

.our-home__headline:hover em {
    color: color-mix(in oklab, var(--red) 50%, var(--on-black));
    text-shadow: 0 0 32px rgba(200, 16, 46, 0.28);
}

.our-home__copy {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--on-black-mute);
    margin: 0;
    max-width: 40ch;
}

.our-home__copy strong {
    color: var(--on-black);
    font-weight: 500;
}

/* Toronto slideshow — single viewport, 5s crossfade, red glow halo on dark */
.our-home__slideshow {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    position: relative;
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
    box-shadow:
        inset 0 0 0 1px rgba(245, 241, 232, 0.06),
        0 0 80px rgba(200, 16, 46, 0.18),
        0 0 160px rgba(200, 16, 46, 0.08);
}

.our-home__slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    filter: saturate(0.85) contrast(1.06) brightness(0.92);
    transition: opacity 700ms ease-out;
    pointer-events: none;
}

.our-home__slideshow .slide.is-active {
    opacity: 1;
}

/* corner vignette — softens edges instead of a hard 1px border */
.our-home__slideshow-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(10, 10, 10, 0.18) 100%),
        linear-gradient(to bottom, transparent 70%, rgba(10, 10, 10, 0.30) 100%);
}

/* progress bar — fills over 5s */
.our-home__slideshow-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    z-index: 3;
    background: rgba(245, 241, 232, 0.10);
    pointer-events: none;
}

.our-home__slideshow-progress .bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--red);
    transform-origin: left center;
    transform: scaleX(0);
}

.our-home__meta {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: end;
    padding-top: 48px;
    border-top: 1px solid rgba(245, 241, 232, 0.10);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.our-home__addr-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
}

.our-home__addr {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--on-black-mute);
    margin: 0;
}

.our-home__more {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    margin: 96px 0 0;
    text-align: right;
}

.our-home__more-link {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: text-shadow 600ms ease-out;
}

.our-home__more-link:hover,
.our-home__more-link:focus-visible {
    text-shadow:
        0 0 12px var(--red-soft),
        0 0 24px var(--red-mist);
    outline: none;
}




/* ==========================================================================
   Responsive — 1024px and 640px breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
    /* Hero — text panel narrower, bottom-left */
    .hero__panel {
        margin-left: 32px;
        max-width: 640px;
        padding: 0 24px 72px;
    }

    /* Services — stack to single column, drop offset */
    .services {
        padding: 96px 0;
    }

    .services__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .service-card {
        border-left: 1px solid var(--rule);
        border-right: 1px solid var(--rule);
        min-height: auto;
    }

    .service-card--03 {
        align-self: stretch;
        transform: none;
    }

    /* Location — stack: caption on top, video below */
    /* Labs CTA — stack to single column, video first */
    .labs-cta__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 24px;
    }

    .labs-cta__video-col {
        aspect-ratio: 16 / 9;
    }

    .labs-cta__video-fade {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 55%,
            rgba(10, 10, 10, 0.4) 75%,
            rgba(10, 10, 10, 0.85) 92%,
            var(--ink) 100%
        );
    }

    /* Our Home — stack header + photos + meta in single column */
    .our-home__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .our-home__header {
        position: static;
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .our-home__slideshow {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }

    .our-home__meta {
        grid-column: 1 / -1;
        grid-row: auto;
        align-self: auto;
    }
}

@media (max-width: 768px) {
    /* Hero — heavier ink wash on mobile so text reads on top of video */
    .hero {
        min-height: 95vh;
    }

    .hero__overlay {
        background:
            radial-gradient(ellipse 60% 50% at 70% 40%, rgba(200, 16, 46, 0.10) 0%, transparent 65%),
            linear-gradient(to top,
                rgba(10, 10, 10, 0.92) 0%,
                rgba(10, 10, 10, 0.55) 40%,
                rgba(10, 10, 10, 0.30) 70%,
                rgba(10, 10, 10, 0.45) 100%);
    }

    .hero__panel {
        margin-left: 0;
        max-width: 100%;
        padding: 0 24px 56px;
    }

    .hero__headline {
        font-size: clamp(2.75rem, 11vw, 4rem);
    }

    .hero__subhead {
        font-size: 1.125rem;
    }

    .hero__cta {
        padding: 14px 22px;
        width: auto;
    }
}

@media (max-width: 640px) {
    .services,
    .our-home {
        padding: 80px 0;
    }

    .services__inner,
    .our-home__inner {
        padding: 0 20px;
    }

    .labs-cta__inner {
        padding: 64px 20px;
    }

    .services__header {
        margin-bottom: 56px;
    }

    .service-card {
        padding: 36px 28px;
    }

    .our-home__slideshow {
        aspect-ratio: 4 / 3;
    }

    .our-home__more {
        text-align: left;
    }
}

/* Reduced motion — kill the breathing animation, keep functional transitions */
@media (prefers-reduced-motion: reduce) {
    .hero__cta {
        animation: none;
    }
    .our-home__slideshow .slide {
        transition: none;
    }
    .home-news__item {
        transition: none;
    }
}


/* ==========================================================================
   GLOBAL SOFT-EDGE PHOTO TREATMENT — superseded for cinematic-dark mode.
   The .home-highlight__photo glow halo is now defined in §I block above.
   This block intentionally left without competing box-shadow rules.
   ========================================================================== */

.service-card__media img,
.home-news__media img,
.home-highlight__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* corner vignette — radial transparent center → ink darken at edges */
.home-news__media-vignette,
.home-highlight__photo-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(10, 10, 10, 0.55) 100%);
}

.home-news__media-placeholder,
.home-highlight__photo-placeholder {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(245, 241, 232, 0.04),
            rgba(245, 241, 232, 0.04) 2px,
            transparent 2px,
            transparent 8px
        ),
        #1a1a1a;
}


/* ==========================================================================
   §F HOME-TESTIMONIALS — cinematic pull-quote moment (Apple TV+ stillness)
   - 32-40px Fraunces italic quote, centered, max-width 30ch
   - 56px outcome metric ABOVE the quote (was beside)
   - 192px top/bottom section padding — very breathy
   - Crossfade only, 8s cycle, dots hidden (no carousel chrome)
   - Pure ink + slow 6s red ambient pulse ::before
   ========================================================================== */
.home-testimonials {
    background: var(--ink);
    padding: 128px 0;
    color: var(--on-black);
    position: relative;
    overflow: hidden;
}

/* Subtle red glow pulses around the quote container — 6s cycle (slower, calmer). */
.home-testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        rgba(200, 16, 46, 0.06) 0%,
        transparent 65%
    );
    animation: voices-pulse 6s ease-in-out infinite;
}

@keyframes voices-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .home-testimonials::before { animation: none; opacity: 0.7; }
}

.home-testimonials__inner { position: relative; z-index: 1; }

.home-testimonials__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

.home-testimonials__header {
    margin: 0 auto 40px;
    max-width: 760px;
    text-align: center;
}

.home-testimonials__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red);
    margin: 0;
}

.home-testimonials__eyebrow .rule {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--red);
}

.home-testimonials__viewport {
    position: relative;
    padding: 0;
    outline: none;
}

.home-testimonials__track {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 240px;
}

/* Crossfade only — no slide */
.home-testimonials__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 500ms ease-out;
    pointer-events: none;
}

.home-testimonials__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

/* Single-column, centered cinematic layout. Metric ABOVE quote.
   Ordered via flex `order` so the markup stays unchanged but the metric
   visually leads the quote (Apple TV+ pull-quote pattern). */
.home-testimonials__pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.home-testimonials__quote {
    margin: 0;
    padding: 0;
    border-left: 0;
    box-shadow: none;
    order: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-testimonials__quote p {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);   /* 22-28px — readable pull-quote */
    line-height: 1.4;
    color: var(--on-black);
    margin: 0 0 28px 0;
    max-width: 32ch;
    text-align: center;
    text-shadow: 0 0 60px rgba(200, 16, 46, 0.06);
}

.home-testimonials__cite {
    /* NAME · ROLE · COMPANY — mono caps cream-muted, hairline above, centered */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--text-xs);          /* 11px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--on-black-mute);
    padding-top: 16px;
    border-top: 1px solid rgba(245, 241, 232, 0.12);
    max-width: 38ch;
    text-align: center;
}

.home-testimonials__name {
    color: var(--red);
    font-style: normal;
    margin-right: 10px;
}

.home-testimonials__cite-sep {
    color: var(--on-black);
    opacity: 0.30;
    margin: 0 10px;
}

.home-testimonials__meta {
    color: var(--on-black-mute);
}

/* Outcome metric — leads the quote (above), centered. 56px display number,
   short red hairline below acts as the "ledger line" for the metric. */
.home-testimonials__metric {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    position: relative;
    padding-bottom: 24px;
    order: 1;
    text-align: center;
}

/* 64px red hairline below the metric — divider before the quote */
.home-testimonials__metric::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 1px;
    background: var(--red);
    opacity: 0.55;
}

.home-testimonials__metric-num {
    /* outcome metric — 32-44px display in red, with subtle red glow */
    font: 400 clamp(2rem, 3.5vw, 2.75rem)/1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 0;
    text-shadow: 0 0 32px rgba(200, 16, 46, 0.30);
}

.home-testimonials__metric-cap {
    font: 500 var(--text-xs)/1.5 var(--font-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    margin: 10px 0 0 0;
    max-width: 30ch;
    text-align: center;
}

/* Dots are kept in the DOM for accessibility/keyboard nav, but visually
   hidden — the cinematic-pull-quote pattern has no carousel chrome. */
.home-testimonials__dots {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    margin: -1px;
    padding: 0;
    border: 0;
}

.home-testimonials__dot {
    width: 1px;
    height: 1px;
    border: 0;
    padding: 0;
    background: transparent;
}

.home-testimonials__empty {
    list-style: none;
    font-family: var(--font-body);
    color: var(--on-black-mute);
    padding: 48px 0;
    text-align: center;
}

@media (max-width: 768px) {
    .home-testimonials__pair {
        gap: 32px;
    }
    .home-testimonials__metric-num {
        font-size: 2.25rem;
    }
}


/* ==========================================================================
   §G HOME-NEWS / DISPATCH — newspaper-style index / archive
   - Tight TWO-COLUMN newspaper grid on desktop (3 items split into 2 cols)
   - Each item: LEFT mono-caps date+category column + RIGHT headline+excerpt
   - Smaller thumbnails (160px wide, was 240px)
   - 16px Fraunces headline (was 20px) — archival, tight
   - Lifted #0e0e0e background, hairlines between rows
   ========================================================================== */
.home-news {
    background: #0e0e0e;
    padding: 96px 0;
    color: var(--on-black);
    position: relative;
    overflow: hidden;
}

.home-news::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 40% 60% at 0% 100%,
        rgba(200, 16, 46, 0.05) 0%,
        transparent 65%
    );
}

.home-news__inner { position: relative; z-index: 1; }

.home-news__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

.home-news__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    margin-bottom: 40px;
    border-bottom: 0;
}

.home-news__eyebrow {
    grid-column: 1 / 2;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red);
    margin: 0;
}

.home-news__eyebrow .rule {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--red);
}

/* Headline retained but very small — eyebrow does the work */
.home-news__headline {
    display: none;
}

.home-news__more {
    grid-column: 2 / 3;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    transition: text-shadow 600ms ease-out;
    align-self: center;
}

.home-news__more:hover,
.home-news__more:focus-visible {
    text-shadow: 0 0 12px var(--red-soft), 0 0 24px var(--red-mist);
    outline: none;
}

/* Two-column newspaper grid on desktop. 3 items distribute into 2 cols
   so each headline gets less width — feels archival, not blog-y. */
.home-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 0;
}

.home-news__item {
    /* entrance: fade up, staggered via --i */
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 700ms cubic-bezier(.2,.7,.2,1),
        transform 700ms cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i, 0) * 100ms);
}

/* Hairline between rows (top of each item; first row of each column has none) */
.home-news__item {
    border-top: 1px solid rgba(245, 241, 232, 0.10);
}
.home-news__item:nth-child(1),
.home-news__item:nth-child(2) {
    border-top: 0;
}

.home-news__item.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.home-news__item.is-leaving {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
    transition-delay: 0ms;
}

/* Card = LEFT meta column (date+cat stacked) | RIGHT body (title + thumb).
   Tight, archival, less blog-y. Uses grid so the left column is consistent
   width regardless of headline length. */
.home-news__card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    align-items: start;
    padding: 22px 24px;
    margin: 0 -24px;
    background: transparent;
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    position: relative;
    transition: background 500ms ease-out, transform 500ms cubic-bezier(.2,.7,.2,1);
}
.home-news__card::before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(to right, var(--red), transparent);
    transition: width 600ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}

.home-news__card:hover,
.home-news__card:focus-visible {
    background: linear-gradient(to right, rgba(200, 16, 46, 0.04), transparent 70%);
    transform: translateX(6px);
    outline: none;
}
.home-news__card:hover::before,
.home-news__card:focus-visible::before {
    width: calc(100% - 48px);
}

/* Thumbnail — smaller (160px wide) and lives BELOW the headline in the
   right column. Title leads, thumb supports — archival pattern. */
.home-news__media {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 160px;
    overflow: hidden;
    margin: 12px 0 0 0;
    background: #1a1a1a;
    border: 1px solid rgba(245, 241, 232, 0.06);
    box-shadow: 0 0 24px rgba(200, 16, 46, 0.08);
    order: 2;
    transition: box-shadow 600ms ease-out;
}

.home-news__card:hover .home-news__media,
.home-news__card:focus-visible .home-news__media {
    box-shadow: 0 0 56px rgba(200, 16, 46, 0.22);
}

.home-news__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease-out, filter 600ms ease-out;
    filter: saturate(0.85) contrast(1.06) brightness(0.92);
}

.home-news__card:hover .home-news__media img,
.home-news__card:focus-visible .home-news__media img {
    transform: scale(1.04);
    filter: saturate(0.95) contrast(1.08) brightness(1);
}

/* Right column — title leads, then thumb. Body is a flex column. */
.home-news__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Meta column: vertical stack on the LEFT (date over category) — direct
   child of the card grid (column 1). */
.home-news__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding-top: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.home-news__cat {
    /* category — flat mono caps red, no pill (archival index pattern) */
    font: 500 0.6875rem/1.4 var(--font-mono);  /* 11px mono caps */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    border: 0;
    padding: 0;
    background: transparent;
}

.home-news__sep {
    display: none;
}

.home-news__date {
    font: 500 0.6875rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-black-mute);
}

.home-news__title {
    /* archival — 16px Fraunces (was 20px), tight, cream on dark */
    font: 400 1rem/1.35 var(--font-display);
    letter-spacing: -0.005em;
    color: var(--on-black);
    margin: 0;
    max-width: 32ch;
    transition: color 600ms ease-out, text-shadow 600ms ease-out;
}

.home-news__card:hover .home-news__title,
.home-news__card:focus-visible .home-news__title {
    color: var(--red);
    text-shadow: 0 0 18px rgba(200, 16, 46, 0.30);
}

/* Short excerpt — archival pattern, 13px body, max 2 lines */
.home-news__excerpt {
    font: 400 0.8125rem/1.55 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 38ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news__readmore {
    display: none;
}

.home-news__empty {
    list-style: none;
    font-family: var(--font-body);
    color: var(--on-black-mute);
    padding: 32px 0;
}


/* ==========================================================================
   §I HOME-HIGHLIGHT — weekly team praise card (5fr / 7fr)
   ========================================================================== */
.home-highlight {
    background: var(--ink);
    padding: 96px 0;
    color: var(--on-black);
    position: relative;
    overflow: hidden;
}

.home-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 50% 60% at 25% 50%,
        rgba(200, 16, 46, 0.06) 0%,
        transparent 65%
    );
}

.home-highlight__inner { position: relative; z-index: 1; }

.home-highlight__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.home-highlight__header {
    margin-bottom: 40px;
    max-width: 760px;
}

.home-highlight__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--red);
    margin: 0 0 24px 0;
}

.home-highlight__eyebrow .rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

/* §B type-ladder: inherits canonical H2 baseline (top of file). */
.home-highlight__headline {
    margin: 0;
}

.home-highlight__card {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: center;
}

.home-highlight__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1a1a1a;
    /* radial soft-edge feathering — photo dissolves into canvas */
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 96%);
            mask-image: radial-gradient(ellipse at center, black 60%, transparent 96%);
    box-shadow:
        0 0 60px rgba(200, 16, 46, 0.12),
        0 0 140px rgba(200, 16, 46, 0.06);
    transition: box-shadow 700ms ease-out;
}

.home-highlight__card:hover .home-highlight__photo {
    box-shadow:
        0 0 90px rgba(200, 16, 46, 0.28),
        0 0 200px rgba(200, 16, 46, 0.14);
}

.home-highlight__photo img {
    transition: transform 1000ms cubic-bezier(.2,.7,.2,1), filter 600ms ease-out;
    filter: saturate(0.86) contrast(1.06) brightness(0.94);
}

.home-highlight__card:hover .home-highlight__photo img {
    transform: scale(1.03);
    filter: saturate(0.96) contrast(1.08) brightness(1);
}

.home-highlight__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home-highlight__praise-eyebrow {
    /* PRAISE — THIS WEEK eyebrow, 11px mono caps red */
    font: 500 var(--text-xs)/1.5 var(--font-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0;
}

.home-highlight__praise-title {
    /* praise title — Fraunces italic, white on dark */
    font: 400 1.25rem/1.25 var(--font-display);
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--on-black);
    margin: 0;
    max-width: 26ch;
}

.home-highlight__praise-title em {
    font-style: italic;
    font-weight: 400;
}

.home-highlight__praise-body {
    /* praise body — 16px body sans, cream-muted on dark */
    font: 400 var(--text-base)/1.65 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 52ch;
}

.home-highlight__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(245, 241, 232, 0.12);
    margin-top: 6px;
}

.home-highlight__name {
    font: 400 1.25rem/1.25 var(--font-display);
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--on-black);
    margin: 0;
}

.home-highlight__role {
    /* role — 11px mono caps red, hairline letter-spacing (overrides parent name styling) */
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);              /* 11px */
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    vertical-align: middle;
    margin-left: 2px;
    opacity: 1;
}

.home-highlight__foot {
    font: 500 var(--text-xs)/1.5 var(--font-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    margin: 0;
}

.home-highlight__empty {
    font-family: var(--font-body);
    color: var(--on-black-mute);
    padding: 32px 0;
    margin: 0;
}


/* ==========================================================================
   Responsive — new sections stack on narrow screens
   ========================================================================== */
@media (max-width: 1024px) {
    .home-testimonials,
    .home-news,
    .home-highlight {
        padding: 72px 0;
    }
    .home-news__list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .home-news__item {
        border-top: 1px solid rgba(245, 241, 232, 0.10);
    }
    .home-news__item:nth-child(1) {
        border-top: 0;
    }
    .home-news__item:nth-child(2) {
        border-top: 1px solid rgba(245, 241, 232, 0.10);
    }
    .home-news__card {
        grid-template-columns: 90px 1fr;
        gap: 18px;
    }
    .home-news__media {
        width: 100%;
        max-width: 240px;
    }
    .home-highlight__card {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .home-highlight__photo {
        aspect-ratio: 5 / 4;
        max-width: 480px;
    }
    .labs-cta__video-col {
        margin: 0;
    }
}

@media (max-width: 640px) {
    .home-testimonials,
    .home-news,
    .home-highlight {
        padding: 80px 0;
    }
    .home-testimonials__inner,
    .home-news__inner,
    .home-highlight__inner {
        padding: 0 20px;
    }
    .home-testimonials__quote {
        padding-left: 0;
    }
    .home-testimonials__dots {
        padding-left: 0;
    }
    .home-news__card {
        padding: 20px 0;
    }
}


/* ==========================================================================
   §6b PRACTICE — full-rebuild — stacked alternating-side blocks
   Editorial-luxe pattern (Linear / Stripe / Anthropic). Each service is its
   own full-width row with image on alternating sides + body copy.
   Replaces .services / .service-card system.
   ========================================================================== */

/* ============================================================================
   §C PRACTICE — text-only editorial cards (no media). Single-column stack.
   ============================================================================ */
.practice {
    background: var(--ink);
    padding: 48px 0 48px;
    position: relative;
    color: var(--on-black);
}

.practice__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

.practice__header {
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: left;
}

.practice__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
}

.practice__eyebrow-rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

.practice__headline {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    margin: 0 0 12px;
}

.practice__headline em {
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
}

.practice__lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--on-black-mute);
    max-width: 56ch;
}

/* ---- Rows wrapper ---- */
.practice__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(245, 241, 232, 0.10);
}

/* ---- Practice block — text-only editorial card ---- */
.practice-block {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 28px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(245, 241, 232, 0.10);
    align-items: start;
}

.practice-block__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1;
    grid-row: 1 / span 4;
    position: sticky;
    top: 96px;
    align-self: start;
}

.practice-block__numeral {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 0;
    display: block;
}

.practice-block__name {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-black-mute);
}

.practice-block__tagline {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--on-black);
    max-width: 36ch;
}

.practice-block__tagline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 65%, var(--on-black));
}

.practice-block__copy {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}
.practice-block__copy p {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--on-black-mute);
    max-width: 60ch;
}
.practice-block__copy p:last-child { margin-bottom: 0; }

.practice-block__own {
    grid-column: 2;
    grid-row: 3;
    margin-top: 16px;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--red);
    background: linear-gradient(to right, rgba(200,16,46,0.04), transparent 30%);
}

.practice-block__own-label {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--red);
}

.practice-block__own-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; list-style: none; margin: 0; padding: 0;
}

.practice-block__own-list li {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--on-black-mute);
}

.practice-block__link {
    grid-column: 2;
    grid-row: 4;
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    align-self: start;
    justify-self: start;
    transition: gap 300ms ease-out;
}

.practice-block__arrow {
    display: inline-block;
    transition: transform 300ms ease-out;
}

.practice-block__link:hover,
.practice-block__link:focus-visible {
    gap: 14px;
    outline: none;
}

.practice-block__link:hover .practice-block__arrow {
    transform: translateX(4px);
}

/* ---- Closing CTA ---- */
.practice__cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.practice__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    background: transparent;
    border: 1px solid var(--red);
    text-decoration: none;
    transition: background 600ms ease-out, color 600ms ease-out, box-shadow 800ms ease-out;
}

.practice__cta-link:hover,
.practice__cta-link:focus-visible {
    background: var(--red);
    color: var(--on-black);
    box-shadow:
        inset 0 0 12px rgba(200, 16, 46, 0.30),
        0 0 36px rgba(200, 16, 46, 0.36),
        0 0 72px rgba(200, 16, 46, 0.18);
    outline: none;
}

.practice__cta-arrow {
    display: inline-block;
    transition: transform 400ms ease-out;
}

.practice__cta-link:hover .practice__cta-arrow {
    transform: translateX(6px);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .practice { padding: 72px 0 56px; }
    .practice__inner { padding: 0 20px; }
    .practice__header { margin-bottom: 48px; }
    .practice-block {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 40px 0;
    }
    .practice-block__head {
        position: static;
        flex-direction: row;
        align-items: baseline;
        gap: 16px;
        grid-column: 1;
        grid-row: auto;
    }
    .practice-block__tagline,
    .practice-block__copy,
    .practice-block__own,
    .practice-block__link {
        grid-column: 1;
        grid-row: auto;
    }
    .practice-block__own-list { grid-template-columns: 1fr; }
    .practice__cta { margin-top: 48px; }
}

/* ==========================================================================
   Hide legacy .services markup if any pages still use it (transitional)
   ========================================================================== */
.services { display: none; }


/* ==========================================================================
   §I INTAKE CTA — closing full-bleed dark panel.
   "Engagements begin with a consultation." Centered editorial title in
   italic Fraunces (--text-4xl), single-sentence subhead in --on-black-mute,
   refined-glow CTA "Schedule consultation". Pattern from DESIGN §4.
   ========================================================================== */
.intake-cta {
    position: relative;
    background:
        linear-gradient(
            to bottom,
            #0a0a0a 0%,
            #080808 50%,
            #050505 100%
        ),
        var(--ink);
    color: var(--on-black);
    padding: 96px 0;
    overflow: hidden;
    text-align: center;
}

/* Subtle red atmospheric bloom anchored center-bottom — implies warmth
   beneath the panel without ever becoming a visible glow. */
.intake-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 80% at 50% 110%,
        rgba(200, 16, 46, 0.10) 0%,
        rgba(200, 16, 46, 0.04) 30%,
        transparent 60%
    );
}

.intake-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.intake-cta__eyebrow {
    font: 500 var(--text-xs)/1 var(--font-mono);
    color: var(--red);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

/* Refined italic Fraunces — readability pass: 32-44px. NOTE: this rule is
   second-cascade and overrides the shared canonical H2 baseline above. */
.intake-cta__headline {
    font: 400 clamp(2rem, 3.5vw, 2.75rem)/1.1 var(--font-display);
    font-style: italic;
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0;
    max-width: 22ch;
    text-align: center;
    text-shadow: 0 0 60px rgba(200, 16, 46, 0.10);
}

.intake-cta__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
}

.intake-cta__sub {
    font: 400 var(--text-base)/1.65 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 52ch;
    text-align: center;
}

/* Refined-glow CTA — stronger glow than hero per F500 brief §M9 */
.intake-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    margin-top: 12px;
    border: 1px solid var(--red);
    background: transparent;
    color: var(--red);
    font: 500 var(--text-xs)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    box-shadow:
        0 0 24px rgba(200, 16, 46, 0.16),
        0 0 56px rgba(200, 16, 46, 0.08);
    animation: intake-breathe 6s ease-in-out infinite;
    transition: color 600ms ease-out,
                background 600ms ease-out,
                box-shadow 800ms ease-out;
    will-change: box-shadow;
}

.intake-cta__link:hover,
.intake-cta__link:focus-visible {
    background: var(--red);
    color: var(--on-black);
    animation: none;
    box-shadow:
        inset 0 0 12px rgba(200, 16, 46, 0.24),
        0 0 32px rgba(200, 16, 46, 0.30),
        0 0 64px rgba(200, 16, 46, 0.18);
    outline: none;
}

.intake-cta__arrow {
    display: inline-block;
    transition: transform 600ms ease-out;
}

.intake-cta__link:hover .intake-cta__arrow {
    transform: translateX(6px);
}

/* Stronger glow cycle than hero (0.15 → 0.30 per brief §M9) */
@keyframes intake-breathe {
    0%, 100% {
        box-shadow:
            0 0 24px rgba(200, 16, 46, 0.15),
            0 0 56px rgba(200, 16, 46, 0.08);
    }
    50% {
        box-shadow:
            0 0 36px rgba(200, 16, 46, 0.30),
            0 0 80px rgba(200, 16, 46, 0.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .intake-cta__link {
        animation: none;
    }
}

@media (max-width: 1024px) {
    .intake-cta {
        padding: 72px 0;
    }
}

@media (max-width: 640px) {
    .intake-cta {
        padding: 56px 0;
    }
    .intake-cta__inner {
        padding: 0 20px;
        gap: 22px;
    }
}


/* ==========================================================================
   §B.5 HOME-NUMBERS — full-bleed horizontal stat strip (~120px tall)
   - 4 cells in a flex row, hairline divider above + below at 8% opacity
   - Numbers in red Fraunces (56px) with subtle text-shadow glow
   - Mono caps labels muted on black
   - Pure ink background — sits between B Positioning and C Practice
   ========================================================================== */
.home-numbers {
    background: var(--ink);
    color: var(--on-black);
    border-top: 1px solid rgba(245, 241, 232, 0.08);
    border-bottom: 1px solid rgba(245, 241, 232, 0.08);
    padding: 32px 0;
    min-height: 96px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.home-numbers__row {
    list-style: none;
    margin: 0;
    padding: 0 32px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.home-numbers__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

.home-numbers__num {
    font: 400 clamp(2rem, 3.5vw, 2.75rem)/1 var(--font-display);  /* 32-44px */
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 0;
    text-shadow: 0 0 28px rgba(200, 16, 46, 0.28);
    white-space: nowrap;
}

.home-numbers__cap {
    font: 500 var(--text-xs)/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    margin: 0;
}

@media (max-width: 768px) {
    .home-numbers__row {
        flex-wrap: wrap;
        gap: 24px 32px;
        justify-content: flex-start;
    }
    .home-numbers__cell {
        flex: 0 0 calc(50% - 16px);
    }
    .home-numbers__num {
        font-size: 2rem;
    }
}


/* ==========================================================================
   §C.5 HOME-PROCESS — "How an engagement runs." 4-step process.
   - Single horizontal row of 4 cells on desktop, with hairline separators
   - Indicator track above the row (4 ticks + connecting hairline rule)
   - Stacks to single column ≤900px; indicator track hidden on mobile
   - Italic Fraunces title + oversized italic Fraunces numeral + body paragraph
   ========================================================================== */
.home-process {
    background: var(--ink);
    color: var(--on-black);
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}

.home-process::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 30% 50% at 100% 0%, rgba(200, 16, 46, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 30% 50% at 0% 100%, rgba(200, 16, 46, 0.04) 0%, transparent 60%);
}

.home-process__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Two-column split: steps left (60%), header+CTA right (40%) */
.home-process__inner--split {
    max-width: 1280px;
    padding: 0 32px;
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.home-process__steps-col {
    flex: 0 0 58%;
    min-width: 0;
}

.home-process__sidebar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
    position: sticky;
    top: 120px;
}

.home-process__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding: 14px 28px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-black);
    border: 1px solid rgba(200, 16, 46, 0.50);
    text-decoration: none;
    transition: background 400ms ease-out, border-color 400ms ease-out, color 400ms ease-out;
}

.home-process__cta:hover,
.home-process__cta:focus-visible {
    background: var(--red);
    border-color: var(--red);
    color: var(--on-black);
    outline: none;
}

.home-process__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
}

.home-process__eyebrow .rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

.home-process__headline {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--on-black);
}

.home-process__headline em {
    font-style: italic;
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
}

.home-process__lede {
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--on-black-mute);
    max-width: 52ch;
}

/* §C.5 process video pan — the bg video slides horizontally as steps tick
   through, tying the four cells together as one continuous frame.
   JS in home-scroll.js drives --video-pan (0%→75%) via IntersectionObserver
   thresholds. We oversize the video by 25% so a 25% leftward translate at
   the final step still fills the frame edge-to-edge with no gap.
   prefers-reduced-motion: fall back to static (handled below). */
.home-process .section-bg-video {
    /* Oversize so we have room to pan without revealing background.
       Override `right: 0` from inset:0 — without this, width:125% has no
       effect because right:0 still pins the right edge to the viewport. */
    right: auto;
    width: 125%;
    /* Raise the video frame so the visual focal point aligns with the indicator dots */
    object-position: 50% 20%;
    /* Drive horizontal pan from a CSS custom property — defaults to 0 */
    transform: translateX(calc(var(--video-pan, 0%) * -1));
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .home-process .section-bg-video {
        width: 100%;
        transform: none;
        transition: none;
    }
}

/* Indicator track — runs above the steps, anchored to each column center
   The parallel agent will use [data-step] on these ticks to drive animation. */
.home-process__indicator-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    height: 28px;
    margin: 0 0 24px;
    padding: 0;
    pointer-events: none;
}

.home-process__indicator-rule {
    position: absolute;
    /* span between first and last tick centers (12.5% to 87.5%) */
    left: 12.5%;
    right: 12.5%;
    top: 50%;
    height: 1px;
    background: rgba(245, 241, 232, 0.10);
    transform: translateY(-0.5px);
}

.home-process__indicator-tick {
    position: relative;
    justify-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(245, 241, 232, 0.30);
    transition: background-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.home-process__indicator-tick.is-active {
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.18), 0 0 14px rgba(200, 16, 46, 0.55);
    transform: scale(1.05);
}

/* Single horizontal row — 4 equal columns separated by vertical hairlines */
.home-process__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(245, 241, 232, 0.10);
}

.home-process__step {
    position: relative;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid rgba(245, 241, 232, 0.10);
}

.home-process__step:last-child {
    border-right: 0;
}

.home-process__num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    /* Oversized italic Fraunces numeral, red, half opacity */
    font-size: clamp(2.75rem, 4.25vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--red);
    opacity: 0.5;
    text-shadow: 0 0 24px rgba(200, 16, 46, 0.20);
    margin: 0 0 8px;
}

.home-process__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.125rem, 1.6vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--on-black);
}

.home-process__title em {
    font-style: italic;
    color: color-mix(in oklab, var(--red) 60%, var(--on-black));
}

.home-process__copy {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--on-black-mute);
}

@media (max-width: 1200px) {
    .home-process__step { padding: 28px 22px; }
}

@media (max-width: 1024px) {
    .home-process { padding: 72px 0; }
    .home-process__inner--split { gap: 40px; }
    .home-process__step { padding: 24px 18px; }
    .home-process__num { font-size: clamp(2.5rem, 5vw, 3.25rem); }
    .home-process__sidebar { position: static; padding-top: 0; }
}

/* ≤900px: collapse to single column stack, hide horizontal indicator track */
@media (max-width: 900px) {
    .home-process__inner--split {
        flex-direction: column-reverse;
        gap: 48px;
        padding: 0 20px;
    }
    .home-process__steps-col { flex: none; width: 100%; }
    .home-process__sidebar { width: 100%; }
    .home-process__indicator-track { display: none; }
    .home-process__grid {
        grid-template-columns: 1fr;
        border-top: 0;
    }
    .home-process__step {
        padding: 28px 4px;
        border-right: 0;
        border-bottom: 1px solid rgba(245, 241, 232, 0.10);
    }
    .home-process__step:last-child {
        border-bottom: 0;
    }
}


/* ==========================================================================
   §E.5 HOME-SECTORS — full-bleed text-only marquee, 64px tall
   - Mono caps muted on black, 11px, tracking +0.20em
   - Auto-scroll horizontally at very slow speed (60s loop)
   - Pauses on hover; reduced-motion stops it
   - No header — credits crawl style
   ========================================================================== */
.home-sectors {
    background: var(--ink);
    color: var(--on-black-mute);
    border-top: 1px solid rgba(245, 241, 232, 0.06);
    border-bottom: 1px solid rgba(245, 241, 232, 0.06);
    height: 48px;
    overflow: hidden;
    position: relative;
}

.home-sectors__viewport {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

/* Soft fade at left/right edges so items don't pop in/out hard */
.home-sectors::before,
.home-sectors::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.home-sectors::before {
    left: 0;
    background: linear-gradient(to right, var(--ink), transparent);
}
.home-sectors::after {
    right: 0;
    background: linear-gradient(to left, var(--ink), transparent);
}

.home-sectors__track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: sectors-marquee 60s linear infinite;
    will-change: transform;
}

.home-sectors:hover .home-sectors__track {
    animation-play-state: paused;
}

.home-sectors__item {
    font: 500 var(--text-xs)/1 var(--font-mono);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    padding: 0 28px;
}

.home-sectors__sep {
    color: var(--red);
    opacity: 0.55;
    padding: 0;
    font-family: var(--font-mono);
}

@keyframes sectors-marquee {
    0%   { transform: translateX(0); }
    /* track contains the list duplicated, so -50% is one full cycle */
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .home-sectors__track {
        animation: none;
    }
}


/* ==========================================================================
   data-reveal safety note — motion.css owns the [data-reveal] visibility
   and animation contract. Headings, ledes and body paragraphs in this
   stylesheet have NO competing opacity/transform transitions, so the
   defaults defined in motion.css apply cleanly. The empty rule below is
   a marker for future authors that motion.css is canonical.
   ========================================================================== */
[data-reveal] { /* owned by motion.css — no rules here */ }

/* ==========================================================================
   §A.5 PRESS — small slow marquee strip below hero
   ========================================================================== */
.home-press {
    background: var(--ink);
    padding: 80px 0;
    border-top: 1px solid rgba(245, 241, 232, 0.06);
    border-bottom: 1px solid rgba(245, 241, 232, 0.06);
    position: relative;
    overflow: hidden;
}
.home-press::before {
    /* Red underglow band — subtle wash sitting under the rotating logos */
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 200px;
    transform: translateY(-50%);
    background: radial-gradient(60% 100% at 50% 50%, rgba(200, 16, 46, 0.18), rgba(200, 16, 46, 0.06) 45%, transparent 75%);
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
}
.home-press__inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.home-press__viewport {
    width: 100%;
    overflow: hidden;
    /* fade edges into ink */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.home-press__track {
    display: inline-flex;
    gap: 120px;
    align-items: center;
    animation: home-press-scroll 50s linear infinite;
    white-space: nowrap;
    padding-right: 120px;
}
.home-press__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    text-decoration: none;
    transition: transform 400ms ease-out, filter 400ms ease-out;
}
.home-press__item img {
    height: 110px;
    width: auto;
    max-width: 520px;
    object-fit: contain;
    /* Force every logo to white silhouette, then add red underglow halo */
    filter: brightness(0) invert(1) opacity(0.88)
            drop-shadow(0 0 24px rgba(200, 16, 46, 0.40))
            drop-shadow(0 0 56px rgba(200, 16, 46, 0.22));
    transition: filter 400ms ease-out, transform 400ms ease-out;
}
.home-press__item:hover img {
    filter: brightness(0) invert(1) opacity(1)
            drop-shadow(0 0 26px rgba(200, 16, 46, 0.55))
            drop-shadow(0 0 60px rgba(200, 16, 46, 0.32));
    transform: translateY(-2px);
}
/* Fallback when no logo_url — render the publication name in mono caps */
.home-press__name {
    font: 500 22px/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-black);
    opacity: 0.85;
    text-shadow:
        0 0 18px rgba(200, 16, 46, 0.35),
        0 0 42px rgba(200, 16, 46, 0.18);
}
@keyframes home-press-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.home-press:hover .home-press__track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .home-press__track {
        animation: none;
        transform: translateX(0);
    }
    .home-press__viewport { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 640px) {
    .home-press { padding: 56px 0; }
    .home-press__track { gap: 72px; }
    .home-press__item { height: 64px; }
    .home-press__item img { height: 44px; max-width: 220px; }
    .home-press__name { font-size: 16px; }
}


/* ==========================================================================
   §J HOME-PORTFOLIO — 3-up asymmetric grid, ink canvas
   Top 6 published items by display_order. Card hover lifts image scale,
   classification color shifts to red.
   ========================================================================== */
.home-portfolio {
    background: var(--ink);
    padding: 80px 0;
    color: var(--on-black);
    position: relative;
}
.home-portfolio__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}
.home-portfolio__header {
    max-width: 720px;
    margin: 0 auto 56px;
}
.home-portfolio__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font: 500 11px/1 var(--font-mono);
    color: var(--red);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.home-portfolio__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--red);
}
.home-portfolio__headline {
    font: 400 clamp(1.625rem, 2.8vw, 2.25rem)/1.1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0 0 16px;
    max-width: 22ch;
}
.home-portfolio__headline em {
    font-style: italic;
    color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}
.home-portfolio__lede {
    font: 400 14px/1.6 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 56ch;
}
.home-portfolio__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(245, 241, 232, 0.10);
}
.home-portfolio__item {
    display: grid;
    grid-template-columns: 60px 1fr 24px;
    gap: 20px;
    padding: 24px 24px;
    border-bottom: 1px solid rgba(245, 241, 232, 0.10);
    text-decoration: none;
    color: var(--on-black);
    align-items: center;
    transition: background 400ms, padding-left 400ms;
}
.home-portfolio__item:hover {
    background: linear-gradient(to right, rgba(200,16,46,0.06) 0%, transparent 80%);
    padding-left: 32px;
}
.home-portfolio__item:nth-child(odd) { border-right: 1px solid rgba(245, 241, 232, 0.10); }
.home-portfolio__num {
    font: 500 13px/1 var(--font-mono);
    color: var(--red);
    letter-spacing: 0.10em;
}
.home-portfolio__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-portfolio__classification {
    font: 500 10px/1 var(--font-mono);
    color: var(--on-black-mute);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
}
.home-portfolio__name {
    font: 400 16px/1.3 var(--font-display);
    color: var(--on-black);
    margin: 0;
    transition: color 400ms;
}
.home-portfolio__name em { font-style: italic; }
.home-portfolio__item:hover .home-portfolio__name { color: var(--red); }
.home-portfolio__desc {
    font: 400 12px/1.5 var(--font-body);
    color: var(--on-black-mute);
    margin: 4px 0 0;
    max-width: 50ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-portfolio__arrow {
    font: 500 16px/1 var(--font-mono);
    color: var(--on-black-mute);
    transition: transform 400ms, color 400ms;
}
.home-portfolio__item:hover .home-portfolio__arrow {
    color: var(--red);
    transform: translateX(4px);
}
.home-portfolio__more {
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1px solid var(--red);
    color: var(--red);
    background: transparent;
    text-decoration: none;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 600ms, color 600ms, gap 400ms;
}
.home-portfolio__more:hover { background: var(--red); color: var(--on-black); gap: 16px; }
.home-portfolio__empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    color: var(--on-black-mute);
    font: 400 14px/1.6 var(--font-body);
    text-align: center;
}
@media (max-width: 768px) {
    .home-portfolio__grid { grid-template-columns: 1fr; }
    .home-portfolio__item { padding: 18px 16px; grid-template-columns: 44px 1fr 20px; gap: 14px; }
    .home-portfolio__item:nth-child(odd) { border-right: none; }
}


/* ==========================================================================
   §K HOME-TEAM — horizontal scroll strip, 220px cards, photo + meta
   All active team members rendered as cards with snap-scroll. Cards have
   a soft red rim glow halo on hover.
   ========================================================================== */
.home-team {
    background: var(--ink);
    padding: 144px 0 120px;
    color: var(--on-black);
    position: relative;
    overflow: hidden;
}

.home-team::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 50% 60% at 75% 50%,
        rgba(200, 16, 46, 0.05) 0%,
        transparent 65%
    );
}

.home-team__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.home-team__header {
    max-width: 760px;
    margin: 0 0 56px;
}

.home-team__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
}

.home-team__eyebrow .rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

.home-team__headline {
    font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0 0 24px;
    max-width: 22ch;
}

.home-team__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 65%, var(--on-black));
}

.home-team__lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.65;
    color: var(--on-black-mute);
    max-width: 60ch;
}

.home-team__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 16, 46, 0.4) transparent;
    padding: 8px 0 24px;
}

.home-team__viewport:focus-visible {
    outline: 1px solid var(--red);
    outline-offset: 4px;
}

.home-team__viewport::-webkit-scrollbar { height: 4px; }
.home-team__viewport::-webkit-scrollbar-track { background: rgba(245, 241, 232, 0.04); }
.home-team__viewport::-webkit-scrollbar-thumb { background: rgba(200, 16, 46, 0.4); border-radius: 2px; }

.home-team__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.home-team__card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.home-team__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid rgba(245, 241, 232, 0.06);
    box-shadow: 0 0 24px rgba(200, 16, 46, 0.08);
    transition: box-shadow 600ms ease-out, border-color 600ms ease-out;
}

.home-team__card:hover .home-team__photo,
.home-team__card:focus-within .home-team__photo {
    border-color: rgba(200, 16, 46, 0.32);
    box-shadow:
        0 0 40px rgba(200, 16, 46, 0.28),
        0 0 96px rgba(200, 16, 46, 0.14);
}

.home-team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 600ms ease-out;
    filter: saturate(0.92) contrast(1.05) brightness(0.95);
}

.home-team__card:hover .home-team__photo img,
.home-team__card:focus-within .home-team__photo img {
    transform: scale(1.03);
    filter: saturate(1) contrast(1.08) brightness(1);
}

.home-team__photo-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #0e0e0e 100%);
}

.home-team__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-team__name {
    margin: 0;
    font: 400 1.125rem/1.25 var(--font-display);
    letter-spacing: -0.005em;
    color: var(--on-black);
}

.home-team__role {
    margin: 0;
    font: 500 0.6875rem/1.5 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
}

.home-team__tenure {
    margin: 0;
    font: 400 0.8125rem/1.5 var(--font-body);
    color: var(--on-black-mute);
}

.home-team__empty {
    list-style: none;
    flex: 1;
    font-family: var(--font-body);
    color: var(--on-black-mute);
    padding: 32px 0;
}

@media (max-width: 1024px) {
    .home-team { padding: 96px 0 80px; }
    .home-team__header { margin-bottom: 40px; }
    .home-team__card { flex-basis: 200px; }
}

@media (max-width: 640px) {
    .home-team { padding: 80px 0 64px; }
    .home-team__inner { padding: 0 20px; }
    .home-team__card { flex-basis: 180px; }
}


/* ==========================================================================
   §G HOME-NEWS expansion — 5 items + footer "View all" link
   ========================================================================== */
.home-news__footer {
    margin-top: 48px;
    text-align: center;
    border-top: 1px solid rgba(245, 241, 232, 0.08);
    padding-top: 32px;
}

.home-news__footer-link {
    display: inline-block;
    font: 500 var(--text-xs)/1.5 var(--font-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    transition: text-shadow 600ms ease-out;
}

.home-news__footer-link:hover,
.home-news__footer-link:focus-visible {
    text-shadow: 0 0 12px rgba(200, 16, 46, 0.4), 0 0 24px rgba(200, 16, 46, 0.2);
    outline: none;
}

@media (max-width: 640px) {
    .home-news__footer { margin-top: 32px; padding-top: 24px; }
}

/* ==========================================================================
   DISPATCH (home-news) — video-aligned layout fix.
   section-blog.mp4 is LEFT-compositional (writing desk, brass pen, wax seal
   sit in the left ~45% of the frame). Content is pushed RIGHT so the desk
   is visible behind the lighter left atmosphere.
   ========================================================================== */

/* Override the global section-bg-overlay for this section:
   heavier dark on the RIGHT (behind cards), lighter on the LEFT (desk shows) */
.home-news .section-bg-overlay {
    background:
        /* strong ink shadow on right where cards sit */
        linear-gradient(
            to right,
            rgba(10, 10, 10, 0.30) 0%,    /* left edge — desk breathes through */
            rgba(10, 10, 10, 0.52) 38%,
            rgba(10, 10, 10, 0.80) 58%,
            rgba(10, 10, 10, 0.92) 100%
        ),
        /* vertical: top edge clean, bottom edge sealed */
        linear-gradient(
            to bottom,
            rgba(10, 10, 10, 0.40) 0%,
            rgba(10, 10, 10, 0.60) 60%,
            rgba(10, 10, 10, 0.88) 100%
        );
    /* blend both gradients via mix-blend */
    mix-blend-mode: normal;
}

/* Push the inner content block to the RIGHT ~50% of the section width.
   Left ~40% stays clear — the desk video is visible through the lighter overlay.
   On desktop this creates a split: atmospheric desk LEFT | news cards RIGHT. */
@media (min-width: 900px) {
    .home-news__inner {
        max-width: 780px;
        margin-left: clamp(38%, calc((100vw - 1280px) / 2 + 480px), 52%);
        margin-right: max(32px, calc((100vw - 1280px) / 2 + 32px));
        padding: 0 32px;
    }

    /* Restore the headline in the right-side panel — desk left, header right */
    .home-news .home-news__headline {
        display: block;
        font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display);
        letter-spacing: -0.02em;
        color: var(--on-black);
        margin: 0 0 12px;
    }
    .home-news .home-news__headline em {
        font-style: italic;
        color: color-mix(in oklab, var(--red) 75%, var(--on-black));
    }

    /* Lede paragraph under headline */
    .home-news .home-news__lede {
        display: block;
        font: 400 14px/1.6 var(--font-body);
        color: var(--on-black-mute);
        margin: 0 0 32px;
        max-width: 42ch;
    }

    /* Header: single-column stacked (eyebrow → headline → lede) */
    .home-news__header {
        grid-template-columns: 1fr;
        margin-bottom: 32px;
    }
    /* Hide the inline "view all" link from the header — footer has it */
    .home-news .home-news__more { display: none; }

    /* News list: restore 2-col in the wider right panel */
    .home-news .home-news__list {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }
    /* First two items are top-of-column — no top border */
    .home-news .home-news__item:nth-child(1),
    .home-news .home-news__item:nth-child(2) {
        border-top: 0;
    }
}

/* Mobile: revert to full-width centered layout (video is hidden on mobile anyway) */
@media (max-width: 899px) {
    .home-news__inner {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 24px;
    }
}

/* ==========================================================================
   SECTION BACKGROUND VIDEO — atmospheric loop behind section content
   Used by .has-video sections (positioning, process, toronto, voices,
   dispatch, highlight, intake). Mobile / reduced-data drops the video.
   ========================================================================== */
.has-video {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Ink fallback so the loading state isn't a white box before the first
   frame paints. Combined here so all three video classes share the same
   ground colour while the poster + first frame load. */
.hero__video,
.section-bg-video,
.labs-cta__video {
    background: var(--ink);
}

.section-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    filter: contrast(1.05) saturate(0.92);
}

.section-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(10, 10, 10, 0.55) 0%,
            rgba(10, 10, 10, 0.72) 50%,
            rgba(10, 10, 10, 0.88) 100%
        );
}

/* Lift section content above the bg layers */
.has-video > *:not(.section-bg-video):not(.section-bg-overlay) {
    position: relative;
    z-index: 2;
}

/* Mobile: drop background videos for performance + clarity */
@media (max-width: 768px) {
    .section-bg-video {
        display: none;
    }
    .section-bg-overlay {
        background: var(--ink);
    }
}

/* Save data preference */
@media (prefers-reduced-data: reduce) {
    .section-bg-video {
        display: none;
    }
}


/* ==========================================================================
   §POLISH — section-by-section visual rhythm pass.
   Tasteful overrides applied as the final cascade layer. Adjusts spacing,
   halos, hairline weights, and hover states. No new colors, no copy changes,
   no structural changes. Mobile-safe via guarded breakpoints at the bottom.
   ========================================================================== */

/* ---- Hero CTA — refine the "text + arrow" button so hover is composed,
   not jumpy. Matches transition curves across hover so the breathe-glow,
   fill, and arrow translate all settle on the same timing. -------------- */
.hero__cta {
    /* Slightly tighter padding + improved kerning balance */
    padding: 17px 30px;
    gap: 12px;
    transition:
        color 500ms cubic-bezier(.2,.7,.2,1),
        background 500ms cubic-bezier(.2,.7,.2,1),
        box-shadow 700ms cubic-bezier(.2,.7,.2,1),
        border-color 500ms cubic-bezier(.2,.7,.2,1),
        transform 500ms cubic-bezier(.2,.7,.2,1);
}

.hero__cta:hover,
.hero__cta:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 14px rgba(200, 16, 46, 0.34),
        0 0 26px rgba(200, 16, 46, 0.55),
        0 0 60px rgba(200, 16, 46, 0.32);
}

.hero__cta-arrow {
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.hero__cta:hover .hero__cta-arrow,
.hero__cta:focus-visible .hero__cta-arrow {
    transform: translateX(8px);
}

/* Hero subhead: subtle breathing room above CTA. (Subhead copy is LOCKED;
   only the gap to the CTA below is adjusted.) */
.hero__subhead {
    margin-bottom: 44px;
}


/* ---- Practice block-list — typography ladder, hover ink-shift, red rule
   extension. Numeral and copy now align on a tighter baseline. ---------- */
.practice-block {
    transition:
        background 600ms cubic-bezier(.2,.7,.2,1),
        padding-left 500ms cubic-bezier(.2,.7,.2,1);
}

.practice-block:hover,
.practice-block:focus-within {
    background: linear-gradient(
        to right,
        rgba(200, 16, 46, 0.045) 0%,
        rgba(200, 16, 46, 0.015) 28%,
        transparent 60%
    );
    padding-left: 8px;
}

.practice-block__numeral {
    transition: color 500ms cubic-bezier(.2,.7,.2,1),
                text-shadow 600ms cubic-bezier(.2,.7,.2,1);
}

.practice-block:hover .practice-block__numeral,
.practice-block:focus-within .practice-block__numeral {
    text-shadow:
        0 0 18px rgba(200, 16, 46, 0.30),
        0 0 42px rgba(200, 16, 46, 0.18);
}

.practice-block__name {
    transition: color 500ms cubic-bezier(.2,.7,.2,1),
                letter-spacing 500ms cubic-bezier(.2,.7,.2,1);
}

.practice-block:hover .practice-block__name,
.practice-block:focus-within .practice-block__name {
    color: var(--on-black);
    letter-spacing: 0.20em;
}

.practice-block__tagline {
    transition: color 500ms cubic-bezier(.2,.7,.2,1);
}

/* Red rule "extends" — the left-border accent on the own-list quietly
   gains weight + a soft halo when the parent block is hovered. */
.practice-block__own {
    transition: border-left-color 500ms cubic-bezier(.2,.7,.2,1),
                box-shadow 600ms cubic-bezier(.2,.7,.2,1);
}

.practice-block:hover .practice-block__own,
.practice-block:focus-within .practice-block__own {
    box-shadow: -1px 0 18px -2px rgba(200, 16, 46, 0.45);
}

/* Practice CTA — subtle lift on hover for visual continuity with hero CTA */
.practice__cta-link {
    transition:
        background 500ms cubic-bezier(.2,.7,.2,1),
        color 500ms cubic-bezier(.2,.7,.2,1),
        box-shadow 700ms cubic-bezier(.2,.7,.2,1),
        transform 500ms cubic-bezier(.2,.7,.2,1);
}

.practice__cta-link:hover,
.practice__cta-link:focus-visible {
    transform: translateY(-1px);
}


/* ---- Numbers strip — refine cell typography, add red eyebrow rule above
   each cap, smooth hover wash on individual cells. -------------------- */
.home-numbers {
    /* Tighten hairline opacity for a more refined seam */
    border-top-color: rgba(245, 241, 232, 0.07);
    border-bottom-color: rgba(245, 241, 232, 0.07);
}

.home-numbers__cell {
    position: relative;
    padding: 4px 12px 4px 0;
    transition: background 600ms cubic-bezier(.2,.7,.2,1);
}

/* Tiny red eyebrow rule above every cell — visual rhythm tie-in to
   the eyebrow rules used elsewhere on the page. */
.home-numbers__cell::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 24px;
    height: 1px;
    background: var(--red);
    opacity: 0.55;
    transition: width 500ms cubic-bezier(.2,.7,.2,1),
                opacity 500ms cubic-bezier(.2,.7,.2,1);
}

.home-numbers__cell:hover::before,
.home-numbers__cell:focus-within::before {
    width: 40px;
    opacity: 1;
}

.home-numbers__num {
    transition: text-shadow 600ms cubic-bezier(.2,.7,.2,1);
}

.home-numbers__cell:hover .home-numbers__num,
.home-numbers__cell:focus-within .home-numbers__num {
    text-shadow:
        0 0 24px rgba(200, 16, 46, 0.42),
        0 0 56px rgba(200, 16, 46, 0.20);
}

.home-numbers__cap {
    transition: color 500ms cubic-bezier(.2,.7,.2,1);
}

.home-numbers__cell:hover .home-numbers__cap,
.home-numbers__cell:focus-within .home-numbers__cap {
    color: var(--on-black);
}


/* ---- Portfolio list — refine hover lift, tighten classification mono caps,
   crisper red arrow translate. ---------------------------------------- */
.home-portfolio__item {
    transition:
        background 500ms cubic-bezier(.2,.7,.2,1),
        padding-left 500ms cubic-bezier(.2,.7,.2,1),
        transform 500ms cubic-bezier(.2,.7,.2,1);
}

.home-portfolio__item:hover,
.home-portfolio__item:focus-visible {
    transform: translateX(2px);
    outline: none;
}

.home-portfolio__classification {
    /* Slightly tighter letter-spacing for refinement */
    letter-spacing: 0.16em;
    transition: color 400ms cubic-bezier(.2,.7,.2,1),
                letter-spacing 400ms cubic-bezier(.2,.7,.2,1);
}

.home-portfolio__item:hover .home-portfolio__classification,
.home-portfolio__item:focus-visible .home-portfolio__classification {
    color: var(--red);
    letter-spacing: 0.20em;
}

.home-portfolio__num {
    transition: color 400ms cubic-bezier(.2,.7,.2,1),
                text-shadow 500ms cubic-bezier(.2,.7,.2,1);
}

.home-portfolio__item:hover .home-portfolio__num,
.home-portfolio__item:focus-visible .home-portfolio__num {
    text-shadow: 0 0 14px rgba(200, 16, 46, 0.50);
}

.home-portfolio__arrow {
    transition: transform 500ms cubic-bezier(.2,.7,.2,1),
                color 400ms cubic-bezier(.2,.7,.2,1);
}

.home-portfolio__item:hover .home-portfolio__arrow,
.home-portfolio__item:focus-visible .home-portfolio__arrow {
    transform: translateX(6px);
}


/* ---- Voices/testimonials — tighten quote scale + cite legibility ---- */
.home-testimonials__quote p {
    /* subtle red halo for a consistent halo language across the page */
    text-shadow: 0 0 50px rgba(200, 16, 46, 0.10);
}

.home-testimonials__cite {
    /* hairline rule above is already present — refine its tone to match
       the global rule-on-black opacity used elsewhere */
    border-top-color: rgba(245, 241, 232, 0.10);
    padding-top: 18px;
}

.home-testimonials__metric-num {
    /* slightly stronger glow — pulls the eye to the metric first */
    text-shadow:
        0 0 32px rgba(200, 16, 46, 0.34),
        0 0 72px rgba(200, 16, 46, 0.16);
}


/* ---- News list — verify the card hover is composed (lift + red gradient
   bg fade + bottom hairline grow). The base rules already wire most of
   this; this layer fine-tunes timings + adds a subtle media halo. ---- */
.home-news__card {
    transition:
        background 600ms cubic-bezier(.2,.7,.2,1),
        transform 600ms cubic-bezier(.2,.7,.2,1);
}

.home-news__card:hover,
.home-news__card:focus-visible {
    transform: translateX(4px);
}

.home-news__card::before {
    transition: width 700ms cubic-bezier(.2,.7,.2,1),
                opacity 500ms cubic-bezier(.2,.7,.2,1);
    opacity: 0.85;
}

.home-news__title {
    transition:
        color 500ms cubic-bezier(.2,.7,.2,1),
        text-shadow 600ms cubic-bezier(.2,.7,.2,1);
}

.home-news__card:hover .home-news__title,
.home-news__card:focus-visible .home-news__title {
    text-shadow: 0 0 26px rgba(200, 16, 46, 0.18);
}

.home-news__cat {
    transition: letter-spacing 400ms cubic-bezier(.2,.7,.2,1);
}

.home-news__card:hover .home-news__cat,
.home-news__card:focus-visible .home-news__cat {
    letter-spacing: 0.16em;
}


/* ---- Labs CTA — refine wordmark glow timing + link arrow translate.
   Wordmark already animates; this layer aligns its rhythm with the
   intake CTA breathe so the two anchors of the page feel coordinated. */
.labs-cta__link {
    transition:
        background 500ms cubic-bezier(.2,.7,.2,1),
        color 500ms cubic-bezier(.2,.7,.2,1),
        box-shadow 700ms cubic-bezier(.2,.7,.2,1),
        transform 500ms cubic-bezier(.2,.7,.2,1);
}

.labs-cta__link:hover,
.labs-cta__link:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 10px rgba(200, 16, 46, 0.24),
        0 0 28px rgba(200, 16, 46, 0.32),
        0 0 56px rgba(200, 16, 46, 0.18);
}

.labs-cta__arrow {
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.labs-cta__link:hover .labs-cta__arrow,
.labs-cta__link:focus-visible .labs-cta__arrow {
    transform: translateX(6px);
}

.labs-cta__eyebrow-rule {
    /* gentle pulse so the eyebrow rule reads as alive, not static */
    animation: labs-rule-pulse 6s ease-in-out infinite;
}

@keyframes labs-rule-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .labs-cta__eyebrow-rule { animation: none; opacity: 0.9; }
}


/* ---- Intake CTA — outlined-red button glow + breathing animation refine.
   Existing rules already wire the breathe; this layer adds a subtle
   transform on hover so the button reads as composed, not jumpy. ----- */
.intake-cta__link {
    transition:
        color 500ms cubic-bezier(.2,.7,.2,1),
        background 500ms cubic-bezier(.2,.7,.2,1),
        box-shadow 700ms cubic-bezier(.2,.7,.2,1),
        transform 500ms cubic-bezier(.2,.7,.2,1);
}

.intake-cta__link:hover,
.intake-cta__link:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 14px rgba(200, 16, 46, 0.28),
        0 0 36px rgba(200, 16, 46, 0.36),
        0 0 72px rgba(200, 16, 46, 0.20);
}

.intake-cta__arrow {
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.intake-cta__link:hover .intake-cta__arrow,
.intake-cta__link:focus-visible .intake-cta__arrow {
    transform: translateX(8px);
}


/* ---- Cross-section eyebrow rule polish — every red mono-caps eyebrow
   rule on the page now shares a single subtle pulse so the visual rhythm
   ties together. Subtle: 0.85 → 1.0 opacity over 6s. ----------------- */
.practice__eyebrow-rule,
.our-home__eyebrow-rule,
.home-portfolio__eyebrow::before,
.home-testimonials__eyebrow .rule,
.home-news__eyebrow .rule,
.home-highlight__eyebrow .rule,
.practice-positioning__eyebrow::before {
    animation: eyebrow-rule-pulse 6s ease-in-out infinite;
}

@keyframes eyebrow-rule-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .practice__eyebrow-rule,
    .our-home__eyebrow-rule,
    .home-portfolio__eyebrow::before,
    .home-testimonials__eyebrow .rule,
    .home-news__eyebrow .rule,
    .home-highlight__eyebrow .rule,
    .practice-positioning__eyebrow::before {
        animation: none;
        opacity: 0.9;
    }
}


/* ---- Mobile-safe guards — the polish layer should not regress mobile.
   Disable the most ornamental hover transforms below 768px so touch
   doesn't trigger sticky-hover artifacts. -------------------------- */
@media (max-width: 768px) {
    .hero__cta:hover,
    .hero__cta:focus-visible,
    .practice__cta-link:hover,
    .practice__cta-link:focus-visible,
    .labs-cta__link:hover,
    .labs-cta__link:focus-visible,
    .intake-cta__link:hover,
    .intake-cta__link:focus-visible,
    .home-news__card:hover,
    .home-news__card:focus-visible,
    .home-portfolio__item:hover,
    .home-portfolio__item:focus-visible,
    .practice-block:hover,
    .practice-block:focus-within {
        transform: none;
    }

    .home-numbers__cell::before {
        /* keep the rule but shorten on mobile so the strip stays tidy */
        width: 18px;
    }
}

/* Reduced-motion: kill all hover transforms + pulses introduced in this
   polish layer. Existing animations in earlier blocks already respect
   prefers-reduced-motion individually. ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero__cta,
    .hero__cta-arrow,
    .practice__cta-link,
    .practice-block,
    .home-portfolio__item,
    .home-portfolio__arrow,
    .home-news__card,
    .home-news__card::before,
    .labs-cta__link,
    .labs-cta__arrow,
    .intake-cta__link,
    .intake-cta__arrow,
    .home-numbers__cell,
    .home-numbers__cell::before {
        transition: none !important;
    }
}