.case-reel {
    position: relative;
    width: 100%;

    padding: 0 3.5rem;
    background: #262A34; /* Power Black — fallback while media loads / no media set */
    overflow: hidden;
}

/* Settings: Section Height */
.case-reel--height-standard {
    min-height: 50rem;
    max-height: 60rem;
}
.case-reel--height-expanded {
    min-height: 62.5rem;
    max-height: 72rem;
}

/* Same .sticky override pattern as hero-2 — the theme's shared .sticky
   utility sets min-height:100vh site-wide, which would force this section
   back to full-screen regardless of the shorter height above. */
.case-reel--height-standard.sticky {
    min-height: 50rem;
}
.case-reel--height-expanded.sticky {
    min-height: 62.5rem;
}

/* .tmd-container gets NO position or height rule here, on purpose. Every
   layer below (visuals, heading, panels, nav) is position:absolute and
   needs to reach through .tmd-container to .case-reel (position:relative)
   as its containing block — adding position:relative to .tmd-container
   would create a new positioning context that shrinks them to the padded
   container width instead of the full section. Same regression documented
   in hero-2's build notes; don't reintroduce it here. */

/* Radio inputs are the state machine for the whole block — never shown,
   never removed from the DOM. */
.case-reel__tab {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ===================================================================
   Visuals layer — full-bleed, behind everything else in the section.
   Active image is driven by :checked ~ sibling matching on STRUCTURAL
   POSITION (nth-of-type on the radio, nth-child on the image), not by
   ID. This is deliberate: IDs are unique per block instance, but these
   selectors are static rules shared by every instance of this block on
   the page, so matching by position (rather than a specific instance's
   ID) is what keeps two Case Reel blocks on the same page from
   interfering with each other.
   =================================================================== */
.case-reel__visuals {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.case-reel__img {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .7s ease;
}

.case-reel__video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

/* Fallback fill colours (Settings: Visual Colour) — paint under the
   background-image so a slow-loading image never flashes transparent. */
.case-reel__img--voltage-blue  { background-color: #A93F55; }
.case-reel__img--strike-orange { background-color: #F2545B; }
.case-reel__img--deep-navy     { background-color: #0B3FA6; }
.case-reel__img--burnt-rust    { background-color: #B23600; }

.case-reel__tab:nth-of-type(1):checked ~ .case-reel__visuals .case-reel__img:nth-child(1),
.case-reel__tab:nth-of-type(2):checked ~ .case-reel__visuals .case-reel__img:nth-child(2),
.case-reel__tab:nth-of-type(3):checked ~ .case-reel__visuals .case-reel__img:nth-child(3),
.case-reel__tab:nth-of-type(4):checked ~ .case-reel__visuals .case-reel__img:nth-child(4),
.case-reel__tab:nth-of-type(5):checked ~ .case-reel__visuals .case-reel__img:nth-child(5),
.case-reel__tab:nth-of-type(6):checked ~ .case-reel__visuals .case-reel__img:nth-child(6) {
    opacity: 1;
}

/* Dark scrim over the visuals so heading/panel/nav text stays legible
   regardless of which image or fallback colour is active underneath. */
.case-reel__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(38, 42, 52, .58) 0%,
        rgba(38, 42, 52, .20) 45%,
        rgba(38, 42, 52, .90) 100%
    );
}

/* Pinstripe overlay — the same horizontal 3px-repeat grain hero-2 uses,
   layered over the visuals and scrim but under the content. Each case study
   row has its own layer (Overlay: Off / White / Dark), matched to its visual
   by position exactly like the visuals, so the active tab's overlay fades in
   with its visual. White and Dark differ in colour and placement, not in
   amount of darkness. The explicit background-size matches the repeat unit so
   tall sections don't get unevenly-rounded tiles (same reason as hero-2). */
.case-reel__pinstripes {
    --case-reel-dark-stripe: rgba(25, 50, 60, .9); /* Power Black — EXAGGERATED for testing (was .5) */
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.case-reel__pinstripe {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: 100% 3px;
    transition: opacity .7s ease;
}

.case-reel__tab:nth-of-type(1):checked ~ .case-reel__pinstripes .case-reel__pinstripe:nth-child(1),
.case-reel__tab:nth-of-type(2):checked ~ .case-reel__pinstripes .case-reel__pinstripe:nth-child(2),
.case-reel__tab:nth-of-type(3):checked ~ .case-reel__pinstripes .case-reel__pinstripe:nth-child(3),
.case-reel__tab:nth-of-type(4):checked ~ .case-reel__pinstripes .case-reel__pinstripe:nth-child(4),
.case-reel__tab:nth-of-type(5):checked ~ .case-reel__pinstripes .case-reel__pinstripe:nth-child(5),
.case-reel__tab:nth-of-type(6):checked ~ .case-reel__pinstripes .case-reel__pinstripe:nth-child(6) {
    opacity: 1;
}

/* Off keeps its (empty) layer so the nth-child matching stays aligned with
   the visuals; it just paints nothing. */
.case-reel__pinstripe--off {
    background: none;
}

/* White: soft-edged light lines on the top 20% only, fading out by 40% and
   absent through the bottom half, where the work items and nav sit and the
   grain made the text hard to read. */
.case-reel__pinstripe--white {
    --case-reel-stripe: rgba(243, 247, 240, .6); /* Glass White — EXAGGERATED for testing (was .15) */
    background-image: repeating-linear-gradient(180deg, var(--case-reel-stripe) 0px, var(--case-reel-stripe) 1px, transparent 3px, transparent 3px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 40%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 40%, transparent 100%);
}

/* Dark: hard-edged 1px dark lines, full strength across the top 20% and
   bottom 20%, easing down to --case-reel-stripe-mid (a fraction of full
   strength) through the middle so the centre stays clear for the video. A
   mask only ever reduces the lines, so the opacity below is the strength at
   the top and bottom edges. */
.case-reel__pinstripe--dark {
    --case-reel-stripe: var(--case-reel-dark-stripe);
    --case-reel-stripe-mid: 0; /* EXAGGERATED for testing (was .2) — 0 = fully clear centre */
    background-image: repeating-linear-gradient(
        180deg,
        var(--case-reel-stripe) 0px,
        var(--case-reel-stripe) 1px,
        transparent 1px,
        transparent 3px
    );
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 20%, rgba(0, 0, 0, var(--case-reel-stripe-mid)) 40%, rgba(0, 0, 0, var(--case-reel-stripe-mid)) 60%, #000 80%, #000 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 20%, rgba(0, 0, 0, var(--case-reel-stripe-mid)) 40%, rgba(0, 0, 0, var(--case-reel-stripe-mid)) 60%, #000 80%, #000 100%);
}

/* Everything below lives inside .case-reel__content, which reaches
   .case-reel directly (same as the visuals layer, skipping the
   un-positioned .tmd-container) but insets left/right by the section's
   gutter. That gutter value is defined ONCE here — heading, panels,
   controls and nav all use left:0/right:0 against this box rather than
   each repeating the inset themselves, so there's a single place to
   change it (e.g. for the mobile override below) instead of four. */
.case-reel__content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3.5rem;
    right: 3.5rem;
    z-index: 2;
}

/* ===================================================================
   Heading — kicker + headline, pinned near the top.
   =================================================================== */
.case-reel__heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 3rem;
    padding-right: 7rem; /* keeps headline text clear of the control button
                            in the top-right corner above 768px; the mobile
                            override below removes this since the button
                            moves to sit above the kicker there instead. */
    pointer-events: none;
}

.case-reel__kicker {
    margin: 0 0 1.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.case-reel__headline h2 {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(3.75rem, 6.4vw, 6.875rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    color: #F3F7F0; /* Cream */
}

.case-reel__headline h2 .accent {
    font-style: italic;
    color: #F2545B; /* Strike Orange (red) — default */
    padding-right: 0.12em; /* buffer for italic glyph overhang */
    transition: color .7s ease; /* matches the visuals' cross-fade when the accent changes with the active tab */
}

/* Settings: Heading Accent Colour — red is the base rule above */
.case-reel--accent-blue  .case-reel__headline h2 .accent { color: #4D9ECE; } /* Voltage Blue */
.case-reel--accent-black .case-reel__headline h2 .accent { color: #19323C; } /* Power Black */

/* Black has no contrast over the Dark overlay's dark imagery, so while a row
   with Overlay = Dark is the active tab, a Black accent shows as red instead.
   The row's radio carries .case-reel__tab--overlay-dark (set in template.php),
   so this follows the active tab the same way everything else does. White-
   overlay and Off rows keep the black. */
.case-reel--accent-black .case-reel__tab--overlay-dark:checked ~ .case-reel__content .case-reel__headline h2 .accent {
    color: #F2545B; /* Strike Orange (red) */
}

/* ===================================================================
   Panels — one per case study, only the active one is shown. Same
   structural nth-of-type/nth-child matching as the visuals layer above.
   =================================================================== */
.case-reel__panels {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 11.875rem;
    max-width: 40rem;
}

.case-reel__panel {
    display: none;
}

.case-reel__category {
    margin: 0 0 0.625rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #F2545B; /* Lobster Pink (Strike Orange token) */
}

.case-reel__case-headline {
    margin: 0 0 1.125rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.375rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #F3F7F0; /* Cream */
}

.case-reel__link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #F3F7F0;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, .45);
    padding-bottom: 0.25rem;
    transition: color .2s ease, border-color .2s ease;
}

.case-reel__link:hover,
.case-reel__link:focus-visible {
    color: #F2545B; /* Lobster Pink */
    border-color: #F2545B; /* Lobster Pink */
    text-decoration: none; /* re-declared here, not just on the base rule —
                               a site-wide a:hover underline rule can win
                               against the base rule specifically on hover,
                               doubling up with the custom border-bottom
                               treatment above */
}

.case-reel__tab:nth-of-type(1):checked ~ .case-reel__content .case-reel__panels .case-reel__panel:nth-child(1),
.case-reel__tab:nth-of-type(2):checked ~ .case-reel__content .case-reel__panels .case-reel__panel:nth-child(2),
.case-reel__tab:nth-of-type(3):checked ~ .case-reel__content .case-reel__panels .case-reel__panel:nth-child(3),
.case-reel__tab:nth-of-type(4):checked ~ .case-reel__content .case-reel__panels .case-reel__panel:nth-child(4),
.case-reel__tab:nth-of-type(5):checked ~ .case-reel__content .case-reel__panels .case-reel__panel:nth-child(5),
.case-reel__tab:nth-of-type(6):checked ~ .case-reel__content .case-reel__panels .case-reel__panel:nth-child(6) {
    display: block;
}

/* ===================================================================
   Controls — Play/Pause always shown when autoplay is enabled;
   Mute/Unmute only renders (server-side) when at least one row has a
   video, so there's never a dead button with nothing to control.
   =================================================================== */
.case-reel__controls {
    position: absolute;
    top: 3rem;
    right: 0;
    display: flex;
    gap: 0.75rem;
}

.case-reel__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: #F3F7F0;
    background: rgba(249, 249, 249, .08);
    border: 1px solid rgba(249, 249, 249, .3);
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.case-reel__control:hover,
.case-reel__control:focus-visible {
    color: #F2545B; /* Lobster Pink */
    border-color: #F2545B; /* Lobster Pink */
    background: rgba(254, 69, 2, .1);
}

.case-reel__icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* Both icons live in the DOM at all times; script.js just toggles
   .is-paused on the button rather than swapping markup or text. */
.case-reel__icon--play {
    display: none;
}
.case-reel__control--play.is-paused .case-reel__icon--pause {
    display: none;
}
.case-reel__control--play.is-paused .case-reel__icon--play {
    display: block;
}

/* ===================================================================
   Nav strip — client names double as tab controls via <label for="">.
   =================================================================== */
.case-reel__nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1.75rem;

    /* Nav colour set — Cream. Everything in the nav reads these four
       values, so the active-state selectors further down never need their
       own copies, and any variant only has to redefine them here. */
    --case-reel-nav:             #F3F7F0;                  /* Cream — active text + fill */
    --case-reel-nav-dim:         rgba(249, 249, 249, .5);   /* inactive text */
    --case-reel-nav-line:        rgba(249, 249, 249, .28);  /* resting underline */
    --case-reel-nav-line-active: rgba(249, 249, 249, .4);   /* underline under the active item */
}

.case-reel__nav-link {
    display: block;
    cursor: pointer;
    color: var(--case-reel-nav-dim); /* dimmed — brightens to the solid nav colour when active */
    transition: color .3s ease;
}

.case-reel__nav-name {
    display: block;
    margin-bottom: 0.75rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.case-reel__nav-line {
    display: block;
    height: 2px;
    background: var(--case-reel-nav-line);
    transition: background-color .3s ease;
}

.case-reel__nav-fill {
    display: block;
    height: 2px;
    width: 0%;
    background: var(--case-reel-nav);
    transition: width .4s ease;
}

.case-reel__tab:nth-of-type(1):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(1),
.case-reel__tab:nth-of-type(2):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(2),
.case-reel__tab:nth-of-type(3):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(3),
.case-reel__tab:nth-of-type(4):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(4),
.case-reel__tab:nth-of-type(5):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(5),
.case-reel__tab:nth-of-type(6):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(6) {
    color: var(--case-reel-nav); /* active item, replacing the dim default */
}

.case-reel__tab:nth-of-type(1):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(1) .case-reel__nav-line,
.case-reel__tab:nth-of-type(2):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(2) .case-reel__nav-line,
.case-reel__tab:nth-of-type(3):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(3) .case-reel__nav-line,
.case-reel__tab:nth-of-type(4):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(4) .case-reel__nav-line,
.case-reel__tab:nth-of-type(5):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(5) .case-reel__nav-line,
.case-reel__tab:nth-of-type(6):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(6) .case-reel__nav-line {
    background: var(--case-reel-nav-line-active); /* brighten the resting line itself, not just the fill sweeping across it */
}

.case-reel__tab:nth-of-type(1):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(1) .case-reel__nav-fill,
.case-reel__tab:nth-of-type(2):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(2) .case-reel__nav-fill,
.case-reel__tab:nth-of-type(3):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(3) .case-reel__nav-fill,
.case-reel__tab:nth-of-type(4):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(4) .case-reel__nav-fill,
.case-reel__tab:nth-of-type(5):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(5) .case-reel__nav-fill,
.case-reel__tab:nth-of-type(6):checked ~ .case-reel__content .case-reel__nav .case-reel__nav-link:nth-child(6) .case-reel__nav-fill {
    width: 100%;
}

@media (max-width: 75rem) {
    .case-reel__case-headline {
        font-size: 1.875rem;
    }
}

@media (max-width: 48rem) {
    /* Visuals: the subject sits on the right of the frame, and on a narrow
       screen `cover` crops the sides equally, so shift toward the right —
       80% rather than 100%, i.e. about 20% in from the right edge — to keep
       that side in view (images via background-position, videos via
       object-position). */
    .case-reel__img {
        background-position: 80% center; /* 20% in from the right edge, not flush to it */
    }
    .case-reel__video {
        object-position: 80% center;
    }

    /* Contrast: with the image shifted, there's no guarantee the area behind
       the text is the calm part of the frame, so the scrim goes from a
       light-in-the-middle gradient to a deeper, more even one all the way
       down. The pinstripe masks are dropped too, so White and Dark both run
       the full height instead of only the top (White) or top and bottom
       (Dark). */
    .case-reel__scrim {
        background: linear-gradient(
            180deg,
            rgba(38, 42, 52, .72) 0%,
            rgba(38, 42, 52, .55) 50%,
            rgba(38, 42, 52, .90) 100%
        );
    }
    .case-reel__pinstripe--white,
    .case-reel__pinstripe--dark {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Cream text needs a dark overlay on a phone, so a White row renders
       exactly like Dark here (Off stays off). The Overlay setting is
       unchanged — this only affects how it displays at this width. */
    .case-reel__pinstripe--white {
        --case-reel-stripe: var(--case-reel-dark-stripe);
        background-image: repeating-linear-gradient(
            180deg,
            var(--case-reel-stripe) 0px,
            var(--case-reel-stripe) 1px,
            transparent 1px,
            transparent 3px
        );
    }

    /* With every visual now sitting under a dark scrim and overlay, a Black
       heading accent has no contrast on any row, so it shows red throughout
       (on desktop this only happens on Dark rows). */
    .case-reel--accent-black .case-reel__headline h2 .accent {
        color: #F2545B; /* Strike Orange (red) */
    }

    /* .case-reel becomes the flex container and .tmd-container becomes its
       single flex:1 child so that .case-reel__content's height:100% below
       has a real, resolvable height to fill — not just the min-height
       floor, which percentages don't resolve against on their own (a
       min-height parent computes child percentages as auto; a flex
       container's used main-size, informed by that same min-height, does
       resolve). This is what lets the "gap" between heading and the work
       group be genuinely flexible (filling whatever room is left above
       the floor) while still allowing the whole section to grow taller
       than that floor if the content needs more room than it provides —
       nothing here caps the height, only sets a minimum. */
    .case-reel {
        padding: 0 1rem;
        max-height: none;
        display: flex;
        flex-direction: column;
    }

    .case-reel > .tmd-container {
        flex: 1;
    }

    .case-reel--height-standard.sticky {
        min-height: 37.5rem;
    }
    .case-reel--height-expanded.sticky {
        min-height: 43.75rem;
    }

    /* Heading and the work group (panels + nav, grouped via
       .case-reel__work) become the two items in this column. Heading
       sits wherever its own content ends; margin-top:auto on the work
       group below absorbs all remaining vertical space, pushing it to
       the bottom without either piece needing a fixed offset. The 8.5rem
       `gap` here is a guaranteed minimum between the two — enough room to
       see the background video clearly — even when content is tall
       enough that auto-margin alone wouldn't leave much space. */
    .case-reel__content {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 8.5rem;
        padding: 3rem 0 2rem;
    }

    .case-reel__heading {
        position: static;
        max-width: none;
        padding-right: 0;
    }

    .case-reel__case-headline {
        font-size: 1.625rem;
    }

    /* Bottom-align the control button with the kicker's text line instead
       of top-aligning — the button (2.5rem) is taller than the kicker's
       single line (1rem, via line-height:1 above), so at 768px and below,
       where the headline can wrap across the full screen width, starting
       the button 1.5rem higher puts its BOTTOM edge level with the
       kicker's, keeping the button's extra height above the kicker rather
       than hanging down into where the headline text starts. Above this
       width the original top-aligned position (base rule) is used
       instead, with .case-reel__heading's padding-right keeping the
       headline clear of it there. */
    .case-reel__controls {
        top: 1.5rem;
    }

    /* Panels and nav move as a single group now, not independently. */
    .case-reel__work {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 5.5rem;
    }

    .case-reel__panels {
        position: static;
        max-width: none;
    }

    /* Full-width single column instead of the desktop grid — with the
       grid's fixed column count, an item count that doesn't divide evenly
       forces an orphaned item onto its own half-width row. */
    .case-reel__nav {
        position: static;
        max-width: none;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
}