/* =============================================================================
   Case Study Sections — the eleven bands used by
   theme-templates/template-case-study.php

   One stylesheet for all of them, enqueued only on templates that render the
   partials (see functions.php). Script side lives in
   assets/js/case-study-sections.js.

   Sections, in template order:
     .ldv-chl  The Challenge                       Figma 1770:1764
     .ldv-bgv  Background Video                    Figma 1762:509
     .ldv-dcn  Design Concepts                     Figma 1765:515
     .ldv-sys  The System (palette + typography)    Figma 1767:626
     .ldv-out  The Outcome (centred)               Figma 1767:628
     .ldv-osp  Outcome (split, mirrorable)         Figma 1767:1746 + 1773:2208
     .ldv-dst  Design Strategy (mirrorable)        Figma 1767:1756
     .ldv-mls  Digital Milestones                  Figma 1772:2190
     .ldv-scd  System Cards (staircase)            Figma 1773:2224
     .ldv-hlt  Highlights                          Figma 1773:2223
     .ldv-quo  Client Quote                        Figma 1767:1749

   Layout of this file:
     1. Components     — one block per section, in the order above
     2. Media queries  — exactly one block per breakpoint, widest first, each
                         holding every section's overrides for that width
     3. Reduced motion

   Rules were moved here verbatim from style.css and assets/css/responsive.css,
   so the rendering is unchanged; only the media queries were merged.
   ========================================================================== */

/* ==========================================================================
   1. Components
   ====================================================================== */


/* --- The Challenge — .ldv-chl  (Figma 1770:1764) --- */

/* =============================================================================
   The Challenge band — .ldv-chl
   Markup:  template-parts/challenge.php
   Figma:   node 1770:1764
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Centred title, then copy left and rounded image cards right. Each card carries
   a 2px red outline offset down-right behind it, and every second card is dropped
   lower, as the design staggers the pair. No script.
   ========================================================================== */
.ldv-chl {
    --ldv-chl-ink: #333333;
    --ldv-chl-accent: #be1e2d;
    --ldv-chl-underline: #e3725d;
    --ldv-chl-title: 46px;
    --ldv-chl-title-lh: 60px;
    --ldv-chl-title-accent: 58px;
    --ldv-chl-copy: 20px;
    --ldv-chl-copy-lh: 46px;
    /* 30px radius and a 10px outline offset in the design. */
    --ldv-chl-radius: 30px;
    --ldv-chl-offset: 10px;
    /* The right card sits 68px lower than the left one. */
    --ldv-chl-stagger: 68px;

    padding: 80px 0;
    color: var(--ldv-chl-ink);
}
.ldv-chl__title {
    /* 771 of 1729 in the design — the cap is what puts the accent on its own line. */
    max-width: 45%;
    margin: 0 auto 60px;
    color: var(--ldv-chl-ink);
    font-size: var(--ldv-chl-title);
    font-weight: 500;
    line-height: var(--ldv-chl-title-lh);
    text-align: center;
}
.ldv-chl__title span {
    position: relative;
    z-index: 1;
    color: var(--ldv-chl-ink);
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-chl-title-accent);
    font-style: italic;
}
.ldv-chl__title span::before {
    content: "";
    position: absolute;
    bottom: 10px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-chl-underline);
}
.ldv-chl__grid {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: 60px;
    align-items: start;
}
.ldv-chl__copy {
    color: var(--ldv-chl-ink);
    font-size: var(--ldv-chl-copy);
    font-weight: 500;
    line-height: var(--ldv-chl-copy-lh);
}
.ldv-chl__copy p {
    margin: 0;
}
.ldv-chl__copy p + p {
    margin-top: var(--ldv-chl-copy-lh);
}
.ldv-chl__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ldv-chl__card {
    position: relative;
    /* 398 x 546 in the design. */
    aspect-ratio: 398 / 546;
}
.ldv-chl__card:nth-child(even) {
    margin-top: var(--ldv-chl-stagger);
}
/* One card: nothing to pair it with, so it takes the full column and keeps the upload's
   own proportions instead of being cropped to the design's two-up box. Two classes deep,
   so it also wins over the 4/3 crop the phone breakpoint puts on cards. */
.ldv-chl__cards--single {
    grid-template-columns: minmax(0, 1fr);
}
.ldv-chl__cards--single .ldv-chl__card {
    aspect-ratio: auto;
}
.ldv-chl__cards--single .ldv-chl__img {
    height: auto;
}
.ldv-chl__frame {
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translate(var(--ldv-chl-offset), var(--ldv-chl-offset));
    border: 2px solid var(--ldv-chl-accent);
    border-radius: var(--ldv-chl-radius);
    pointer-events: none;
}
.ldv-chl__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ldv-chl-radius);
}


/* --- Background Video — .ldv-bgv  (Figma 1762:509) --- */

/* =============================================================================
   Background Video band — .ldv-bgv
   Markup:  template-parts/bg-video.php
   Script:  assets/js/deferred-video.js (shared)
   Figma:   node 1762:509
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Full-bleed video with the heading and copy over its lower third. Type is the
   theme's standard section pairing: Guminert Medium heading/copy, "Scotch Text
   Comp Sm It" for the accent words in <span>, 7px #e3725d underline.
   ========================================================================== */
.ldv-bgv {
    /* Accent underline, shared with every other section title in the theme. */
    --ldv-bgv-underline: #e3725d;
    --ldv-bgv-title: 50px;
    --ldv-bgv-title-lh: 69.3px;
    --ldv-bgv-accent: 70px;
    --ldv-bgv-accent-lh: 60px;
    --ldv-bgv-copy: 25px;
    --ldv-bgv-copy-lh: 34px;
    /* 74px clear of the bottom edge in the design (828 of 902). */
    --ldv-bgv-pad-b: 74px;
    --ldv-bgv-gap: 30px;

    position: relative;
    isolation: isolate;
    /* 1921 x 902 in the design. The copy is bottom-anchored, so a taller block
       of text grows the section rather than overflowing it. */
    aspect-ratio: 1921 / 902;
    min-height: 560px;
    overflow: hidden;
    /* Holds the frame while the video loads, and shows through if it fails. */
    background: #111111;
}
.ldv-bgv__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ldv-bgv__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.15) 100%
    );
}
.ldv-bgv__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: var(--ldv-bgv-pad-b);
}
.ldv-bgv__title {
    margin: 0 0 var(--ldv-bgv-gap);
    /* 1011 of 1729 (the .max-con container) in the design. */
    max-width: 60%;
    color: #ffffff;
    font-size: var(--ldv-bgv-title);
    font-weight: 500;
    line-height: var(--ldv-bgv-title-lh);
}
.ldv-bgv__title span {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-bgv-accent);
    font-style: italic;
    line-height: var(--ldv-bgv-accent-lh);
}
.ldv-bgv__title span::before {
    content: "";
    position: absolute;
    bottom: 2px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-bgv-underline);
}
.ldv-bgv__copy {
    /* 1663 of 1729 in the design — a hair inside the container. */
    max-width: 96%;
    color: #ffffff;
    font-size: var(--ldv-bgv-copy);
    font-weight: 500;
    line-height: var(--ldv-bgv-copy-lh);
}
.ldv-bgv__copy p {
    margin: 0;
}
.ldv-bgv__copy p + p {
    margin-top: var(--ldv-bgv-copy-lh);
}


/* --- Design Concepts — .ldv-dcn  (Figma 1765:515) --- */

/* =============================================================================
   Design Concepts band — .ldv-dcn
   Markup:  template-parts/design-concepts.php
   Figma:   node 1765:515
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Centred heading + copy over a wide rounded image band, contained in .max-con
   (90%, which is what the design's 1741 of 1921 works out to). Type is the same
   pairing .ldv-pfs uses: Guminert Medium heading, "Scotch Text Comp Sm It"
   accent in <span>, 7px #e3725d underline. No script.
   ========================================================================== */
.ldv-dcn {
    --ldv-dcn-ink: #333333;
    --ldv-dcn-underline: #e3725d;
    --ldv-dcn-title: 46px;
    --ldv-dcn-title-lh: 60px;
    --ldv-dcn-accent: 58px;
    --ldv-dcn-copy: 25px;
    --ldv-dcn-copy-lh: 34px;
    --ldv-dcn-gap: 50px;
    --ldv-dcn-radius: 20px;

    padding: 80px 0;
}
.ldv-dcn__head {
    margin-bottom: var(--ldv-dcn-gap);
    text-align: center;
}
.ldv-dcn__title {
    /* 771 of 1741 in the design — the cap is what breaks the title onto three
       lines, with the accent sitting on its own. */
    max-width: 45%;
    margin: 0 auto 20px;
    color: var(--ldv-dcn-ink);
    font-size: var(--ldv-dcn-title);
    font-weight: 500;
    line-height: var(--ldv-dcn-title-lh);
}
.ldv-dcn__title span {
    position: relative;
    z-index: 1;
    color: var(--ldv-dcn-ink);
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-dcn-accent);
    font-style: italic;
}
.ldv-dcn__title span::before {
    content: "";
    position: absolute;
    bottom: 10px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-dcn-underline);
}
.ldv-dcn__copy {
    /* 1702 of 1741 in the design — a hair inside the container. */
    max-width: 98%;
    margin: 0 auto;
    color: var(--ldv-dcn-ink);
    font-size: var(--ldv-dcn-copy);
    font-weight: 500;
    line-height: var(--ldv-dcn-copy-lh);
}
.ldv-dcn__copy p {
    margin: 0;
}
.ldv-dcn__copy p + p {
    margin-top: var(--ldv-dcn-copy-lh);
}
.ldv-dcn__media {
    margin: 0;
    aspect-ratio: unset;
    overflow: hidden;
    border-radius: var(--ldv-dcn-radius);
}
.ldv-dcn__asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-template-template-case-study-brain-waves .ldv-dcn__asset {
      object-fit: contain;
    outline : none;
    border :0px ;
    box-shadow :none
}

.page-template-template-case-study-brain-waves .ldv-dcn__media{
    aspect-ratio : 21/ 9
}

.page-template-template-case-study-brain-waves .ldv-sys__texture , .page-template-template-case-study-sportsrides  .ldv-sys__texture{ 
    opacity: unset;
}
 
 .page-template-template-case-study-brain-waves .ldv-sys--dark ,  .page-template-template-case-study-sportsrides .ldv-sys--dark , .page-template-template-case-study-jovicard  .ldv-sys--dark{
    background: transparent !important;
 }
.page-template-template-case-study-brain-waves 
 .ldv-out__media
{
    background: unset;
}
.page-template-template-case-study-brain-waves  .ldv-quo__texture,
.page-template-template-case-study-mo-collective .ldv-quo__texture,
.page-template-template-case-study-mo-collective .ldv-quo__texture,
.page-template-template-case-study-sportsrides .ldv-quo__texture
{
    opacity: 1;
}

.page-template-template-case-study-mo-collective  section.ldv-out.ldv-out--light {
    background-image: url(/wp-content/uploads/2026/08/sec2-2048x1155.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 110vh;
}
/* Pages whose specimen sits under a taller heading block trade the band's default
   50px top margin for 90px of padding, so the glyphs clear the copy above. Two
   classes beat the single-class base rule, so no !important is needed. */
.page-template-template-case-study-sportsrides .ldv-sys__specimen,
.page-template-template-case-study-capilli .ldv-sys__specimen {
    margin: 0;
    padding: 90px 0 0;
}
/* Capilli enlarges two photos past their boxes: the Challenge shot and the split Outcome
   product. Both scale factors are custom properties set here and stepped down at each
   breakpoint below, because the same factor that works beside a narrow column is far too
   big once the layout stacks and the image is already full width. */
.page-template-template-case-study-capilli {
    --ldv-cap-chl-scale: 1.3;
    --ldv-cap-osp-scale: 2;
}
/* Challenge photo. Scaling rather than widening keeps the grid columns — and so the copy
   beside it — exactly where they are, and growing from the left edge sends all the extra
   size rightwards instead of half of it landing on top of the copy. The section clips
   horizontally so the bleed stops at the viewport edge instead of adding a page
   scrollbar. */
.page-template-template-case-study-capilli .brandingServices {
    overflow-x: clip;
}
.page-template-template-case-study-capilli .brandingServices .grid .right img {
    transform: scale(var(--ldv-cap-chl-scale));
    transform-origin: left center;
}
/* Split Outcome product shot, enlarged so it breaks out of its strip and sits over the
   band. Three things have to change together: the section stops clipping vertically so the
   shot can overhang, the media wrapper comes up out of the z-index: -1 it sits at by
   default — a child cannot escape that on its own, the section is an isolated stacking
   context — and only then does the asset scale. Horizontal overflow is still clipped, so
   the overhang never produces a page scrollbar. */
.page-template-template-case-study-capilli section.ldv-osp.ldv-osp--media-left {
    overflow: visible;
    overflow-x: clip;
}
.page-template-template-case-study-capilli section.ldv-osp.ldv-osp--media-left .ldv-osp__media {
    z-index: 3;
}
.page-template-template-case-study-capilli section.ldv-osp.ldv-osp--media-left .ldv-osp__asset {
    object-position: 50% 50%;
    transform: scale(var(--ldv-cap-osp-scale));
}
/* The blend is a wash that fades the media strip's inner edge into the black band. With
   the shot scaled up and lifted over the band it reads as a smear across the product, so
   this page drops it — at every width, including the vertical variant the phone
   breakpoint swaps in. */
.page-template-template-case-study-capilli .ldv-osp__blend {
    display: none;
}
/* Capilli's light Outcome image starts flush against the white band above it, so a white
   wash covers the top half of the media and fades to nothing at the halfway line, letting
   the photo emerge out of the background rather than butting into it. The overlay is a
   pseudo-element so the <img> keeps its own object-fit and nothing is baked into the
   asset. Swap the two colour stops to fade the bottom edge instead. */
.page-template-template-case-study-capilli section.ldv-out.ldv-out--light .ldv-out__media {
    position: relative;
}
.page-template-template-case-study-capilli section.ldv-out.ldv-out--light .ldv-out__media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 50%;
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
/* --- The System (palette + typography) — .ldv-sys  (Figma 1767:626) --- */

/* =============================================================================
   The System band — .ldv-sys
   Markup:  template-parts/brand-system.php
   Figma:   node 1767:626
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Dark full-bleed band: section title, a colour palette printed as labelled
   swatch circles, and a typography specimen (image, or text in a named family).
   Contained copy via .max-con; the ink, texture and fade are the section's own.
   Type is the theme's standard pairing — Guminert Medium with the "Scotch Text
   Comp Sm It" accent in <span>. No script.
   ========================================================================== */
.ldv-sys {
    /* Dark is the design and the default, so a page saved before the Version field
       existed keeps rendering exactly as it did. */
    --ldv-sys-ink: #181a1d;
    --ldv-sys-fade: #131c25;
    --ldv-sys-fg: #ffffff;
    /* Accent underline, shared with every other section title in the theme. */
    --ldv-sys-underline: #e3725d;
    /* Keeps a pale swatch visible against the band. */
    --ldv-sys-ring: rgba(255, 255, 255, 0.12);
    --ldv-sys-texture: 0.2;
    --ldv-sys-title: 50px;
    --ldv-sys-title-lh: 69.3px;
    --ldv-sys-accent: 70px;
    --ldv-sys-accent-lh: 60px;
    --ldv-sys-heading: 46px;
    --ldv-sys-heading-lh: 60px;
    --ldv-sys-copy: 25px;
    --ldv-sys-copy-lh: 40px;
    --ldv-sys-chip: 159px;
    /* 189px column per swatch in the design, 54px apart. */
    --ldv-sys-swatch-w: 189px;
    --ldv-sys-swatch-gap: 54px;
    --ldv-sys-label: 16px;
    --ldv-sys-glyphs: 349px;
    --ldv-sys-face: "Guminert", sans-serif;
    --ldv-sys-face-name: 100px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 120px 0 100px;
    background: var(--ldv-sys-ink);
    color: var(--ldv-sys-fg);
}
.ldv-sys__texture {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
}
.ldv-sys__fade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(184.227deg,
        rgba(19, 28, 37, 0) 42.93%,
        var(--ldv-sys-fade) 72.06%);
}
.ldv-sys__title {
    /* 1019 of 1729 in the design — the cap is what breaks it onto two lines. */
    max-width: 60%;
    margin: 0 0 70px;
    color: var(--ldv-sys-fg);
    font-size: var(--ldv-sys-title);
    font-weight: 500;
    line-height: var(--ldv-sys-title-lh);
}
.ldv-sys__title span {
    position: relative;
    z-index: 1;
    color: var(--ldv-sys-fg);
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-sys-accent);
    font-style: italic;
    line-height: var(--ldv-sys-accent-lh);
}

.ldv-sys__title span::before {
    content: "";
    position: absolute;
    bottom: 2px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-sys-underline);
}
.ldv-sys__block + .ldv-sys__block {
    margin-top: 90px;
}
/* Colour block, two-column option (Colour Block — Layout in ACF): copy left, swatches
   right. Desktop and laptop only — the 991px block below stacks it again, where a split
   would leave the copy too narrow to read and the swatches too cramped to line up. The
   copy column's width is an editor field, printed as the custom property below; the
   swatch column takes whatever is left. Without the modifier the block is a plain flow
   container and the design's stacked layout is unchanged. */
.ldv-sys__block--split {
    display: grid;
    grid-template-columns: var(--ldv-sys-pal-copy, 60%) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--ldv-sys-swatch-gap);
}
.ldv-sys__block--split .ldv-sys__copy {
    max-width: 100%;
}
/* Swatches wrap into as many rows as the narrower column needs, right-aligned against
   the container edge as in the design. */
.ldv-sys__block--split .ldv-sys__swatches {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(0, var(--ldv-sys-swatch-w)));
    justify-content: end;
    margin: 0;
}
.ldv-sys__heading {
    margin: 0 0 14px;
    color: var(--ldv-sys-fg);
    font-size: var(--ldv-sys-heading);
    font-weight: 500;
    line-height: var(--ldv-sys-heading-lh);
}
.ldv-sys__copy {
    /* 1558 of 1729 in the design. */
    max-width: 90%;
    color: var(--ldv-sys-fg);
    font-size: var(--ldv-sys-copy);
    font-weight: 500;
    line-height: var(--ldv-sys-copy-lh);
}
.ldv-sys__copy p {
    margin: 0;
}
.ldv-sys__copy p + p {
    margin-top: var(--ldv-sys-copy-lh);
}
/* One row at desktop whatever the palette length, aligned to the left of the container
   rather than stretched across it — a two-colour palette then sits beside the copy
   instead of drifting apart. Tracks are a fixed width with a 0 minimum, so a long label
   like "FOREST GREEN" wraps inside its column instead of widening the row. */
.ldv-sys__swatches {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, var(--ldv-sys-swatch-w));
    justify-content: start;
    gap: 40px var(--ldv-sys-swatch-gap);
    margin: 45px 0 0;
    padding: 0;
    list-style: none;
}
.ldv-sys__swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    /* min-width:0 lets a long name wrap instead of stretching its column. */
    min-width: 0;
}
.ldv-sys__chip {
    width: var(--ldv-sys-chip);
    height: var(--ldv-sys-chip);
    border-radius: 50%;
    /* Keeps a pale swatch visible against the dark band. */
    box-shadow: inset 0 0 0 1px var(--ldv-sys-ring);
}
.ldv-sys__swatch-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.ldv-sys__swatch-name,
.ldv-sys__swatch-hex {
    color: var(--ldv-sys-fg);
    font-family: "Guminert", sans-serif;
    font-size: var(--ldv-sys-label);
    font-weight: 400;
    letter-spacing: 4.48px;
    line-height: normal;
    text-transform: uppercase;
    /* The tracking makes these long; wrapping beats overflowing the column. */
    overflow-wrap: break-word;
}
/* Text specimen: oversized glyphs beside the typeface name and dummy copy. The
   family comes from the block's inline --ldv-sys-face when an editor names one. */
.ldv-sys__specimen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 60px;
    margin: 50px 0 0;
    font-family: var(--ldv-sys-face);
}
.ldv-sys__specimen--image {
    display: block;
}
.ldv-sys__specimen--image img {
    display: block;
    width: 100%;
    height: auto;
}
.ldv-sys__glyphs {
    margin: 0;
    font-size: var(--ldv-sys-glyphs);
    font-weight: 400;
    line-height: 0.8;
}
.ldv-sys__sample {
    flex: 1 1 420px;
    padding-top: 10px;
}
.ldv-sys__face-name {
    margin: 0 0 24px;
    font-size: var(--ldv-sys-face-name);
    font-weight: 400;
    line-height: 1;
}
.ldv-sys__sample-heading {
    margin: 0 0 14px;
    font-size: 31px;
    font-weight: 400;
    line-height: 1;
}
.ldv-sys__sample-copy {
    max-width: 803px;
    margin: 0;
    font-size: 21px;
    font-weight: 400;
    line-height: 39px;
}


/* --- The Outcome (centred) — .ldv-out  (Figma 1767:628) --- */

/* =============================================================================
   The Outcome band — .ldv-out
   Markup:  template-parts/outcome.php
   Script:  assets/js/deferred-video.js (shared, only when a video is set)
   Figma:   node 1767:628
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Centred heading and copy on the page background, then an edge-to-edge media
   band cropped from its top edge — the design's asset is 2400 wide against a
   1921 canvas and shows its upper 41%. Only the copy re-establishes the site
   gutter, via .max-con. Type is the theme's standard pairing.
   ========================================================================== */
.ldv-out {
    /* Light is the design and the default, so a page saved before the Version field
       existed keeps rendering exactly as it did. */
    --ldv-out-bg: transparent;
    --ldv-out-ink: #333333;
    --ldv-out-underline: #e3725d;
    --ldv-out-media-bg: #f4f4f4;
    --ldv-out-title: 46px;
    --ldv-out-title-lh: 60px;
    --ldv-out-accent: 58px;
    --ldv-out-copy: 25px;
    --ldv-out-copy-lh: 44px;

    position: relative;
    background: var(--ldv-out-bg);
}
.ldv-out__head {
    padding: 80px 0 30px;
    text-align: center;
}
.ldv-out__title {
    /* 763 of 1729 in the design — the cap is what wraps the title under the
       accent line instead of running it wide. */
    max-width: 45%;
    margin: 0 auto 20px;
    color: var(--ldv-out-ink);
    font-size: var(--ldv-out-title);
    font-weight: 500;
    line-height: var(--ldv-out-title-lh);
}
.ldv-out__title span {
    position: relative;
    z-index: 1;
    color: var(--ldv-out-ink);
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-out-accent);
    font-style: italic;
}
.ldv-out__title span::before {
    content: "";
    position: absolute;
    bottom: 10px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-out-underline);
}
.ldv-out__copy {
    /* 1502 of 1729 in the design. */
    max-width: 87%;
    margin: 0 auto;
    color: var(--ldv-out-ink);
    font-size: var(--ldv-out-copy);
    font-weight: 500;
    line-height: var(--ldv-out-copy-lh);
}
.ldv-out__copy p {
    margin: 0;
}
.ldv-out__copy p + p {
    margin-top: var(--ldv-out-copy-lh);
}
/* Optional: left-align the heading and copy instead of centring them, for a band that
   sits beside a left-aligned layout. Added per page through the section's Extra Classes
   field (`ldv-out--start`). */
.ldv-out--start .ldv-out__head {
    text-align: left;
}

.ldv-out--start .ldv-out__title,
.ldv-out--start .ldv-out__copy {
    margin-left: 0;
    margin-right: 0;
}

/* Optional: hold the media to 80% of the band and centre it instead of running it edge
   to edge. Added per page through the section's Extra Classes field (`ldv-out--inset`),
   so one band can be full-bleed and another inset. */
.ldv-out--inset .ldv-out__media {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.ldv-out__media {
    aspect-ratio: 1921 / 655;
    overflow: hidden;
    /* Shows through on a transparent-background mockup while it loads. */
    /* background: var(--ldv-out-media-bg); */
}
.ldv-out__asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The design crops from the top edge, not the centre. */
    object-position: 50% 0;
}

/* Optional: show the whole frame instead of cropping it, with nothing painted behind —
   the band colour then fills the letterbox. For assets that must not be cut, such as a
   logo animation. Added per page through the section's Extra Classes field
   (`ldv-out--contain`). */
.ldv-out--contain .ldv-out__media {
    background: transparent;
}

.ldv-out--contain .ldv-out__asset {
    object-fit: contain;
    object-position: 50% 50%;
    background: transparent;
}


/* --- Outcome (split, mirrorable) — .ldv-osp  (Figma 1767:1746 + 1773:2208) --- */

/* =============================================================================
   Outcome, split layout — .ldv-osp
   Markup:  template-parts/outcome-split.php
   Script:  assets/js/deferred-video.js (shared, only when a video is set)
   Figma:   node 1767:1746
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Dark band: copy left inside .max-con, product shot bleeding off the right edge
   under a diagonal wash that carries it into the black. Sibling of .ldv-out,
   which is the light centred treatment of the same beat.
   ========================================================================== */
.ldv-osp {
    --ldv-osp-title: 50px;
    --ldv-osp-title-lh: 69.3px;
    --ldv-osp-accent: 70px;
    --ldv-osp-accent-lh: 60px;
    --ldv-osp-copy: 25px;
    --ldv-osp-copy-lh: 39px;
    --ldv-osp-underline: #e3725d;
    /* The design's shot is a 935px box starting at x 1277 of 1920, so it bleeds
       ~15% off the right edge and only ~34% of the canvas is visible. Anchored to
       the right here, so the width is the visible strip, not the box. */
    --ldv-osp-media: 44%;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 0;
    background: #000000;
    color: #ffffff;
}
.ldv-osp__texture {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
}
.ldv-osp__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: var(--ldv-osp-media);
    pointer-events: none;
}

section.ldv-osp.ldv-osp--media-right .ldv-osp__media {
    width: unset;
}



.ldv-osp__asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit:contain;
    /* Centred, so the product stays in frame whatever the upload's aspect — the
       wash below is what blends the strip's left edge into the black. */
    object-position: 50% 50%;
}
.ldv-osp__blend {
    position: absolute;
    inset: 0;
    
}
.ldv-osp__body {
    /* 1148 of 1920 in the design — the copy stops before the shot begins. */
    max-width: 60%;
}
.ldv-osp__title {
    margin: 0 0 24px;
    color: #ffffff;
    font-size: var(--ldv-osp-title);
    font-weight: 500;
    line-height: var(--ldv-osp-title-lh);
}
.ldv-osp__title span {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-osp-accent);
    font-style: italic;
    line-height: var(--ldv-osp-accent-lh);
}
.ldv-osp__title span::before {
    content: "";
    position: absolute;
    bottom: 2px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-osp-underline);
}
.ldv-osp__copy {
    color: #ffffff;
    font-size: var(--ldv-osp-copy);
    font-weight: 500;
    line-height: var(--ldv-osp-copy-lh);
}
.ldv-osp__copy p {
    margin: 0;
}
.ldv-osp__copy p + p {
    margin-top: var(--ldv-osp-copy-lh);
}
/* -----------------------------------------------------------------------------
   .ldv-osp mirrored — shot on the left, copy on the right (Figma 1773:2208).
   Same band as above; only the sides swap. Appended here rather than built as a
   second section so the two designs share one component.
   -------------------------------------------------------------------------- */
.ldv-osp--media-left .ldv-osp__media {
    right: auto;
    left: 0;
}
.ldv-osp--media-left .ldv-osp__asset {
    object-position: 50% 50%;
}
.ldv-osp--media-left .ldv-osp__blend {
    background-image:
        linear-gradient(to left,
            rgb(0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 22%),
        linear-gradient(116.9113deg,
            rgb(26, 0, 0) 34.385%,
            rgba(24, 26, 30, 0) 48.913%);
}
.ldv-osp--media-left .ldv-osp__body {
    margin-left: auto;
}


/* --- Design Strategy (mirrorable) — .ldv-dst  (Figma 1767:1756) --- */

/* =============================================================================
   Design Strategy band — .ldv-dst
   Markup:  template-parts/design-strategy.php
   Script:  assets/js/deferred-video.js (shared, only when a video is set)
   Figma:   node 1767:1756
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Light band: copy on one side inside .max-con, a full-height photo bleeding off
   the other edge under a white wash. Light sibling of .ldv-osp. The
   .ldv-dst--media-left modifier mirrors the whole band.
   ========================================================================== */
.ldv-dst {
    --ldv-dst-ink: #333333;
    --ldv-dst-underline: #e3725d;
    --ldv-dst-title: 50px;
    --ldv-dst-title-lh: 69.3px;
    --ldv-dst-accent: 70px;
    --ldv-dst-accent-lh: 60px;
    --ldv-dst-copy: 25px;
    --ldv-dst-copy-lh: 34px;
    /* The design photo runs from x 444 to 1891 of 1921 — a little over half the
       band, bleeding off the outer edge. */
    --ldv-dst-media: 58%;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* The photo sets the band height in the design (964 of 1921, about 2:1); the
       copy is what holds it up here, so a shorter photo cannot crop the text. */
    padding: 90px 0;
    color: var(--ldv-dst-ink);
}
.ldv-dst__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: var(--ldv-dst-media);
    pointer-events: none;
}
.ldv-dst--media-left .ldv-dst__media {
    right: auto;
    left: 0;
}
.ldv-dst__asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Holds the outer edge of the shot, which is where the subject sits. */
    object-position: 100% 50%;
}
.ldv-dst--media-left .ldv-dst__asset {
    object-position: 0 50%;
}
.ldv-dst__blend {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right,
            rgb(255, 255, 255) 0%,
            rgba(255, 255, 255, 0) 26%),
        linear-gradient(133.531deg,
            rgba(255, 255, 255, 0) 92.248%,
            rgb(255, 255, 255) 95.468%);
}
.ldv-dst--media-left .ldv-dst__blend {
    background-image:
        linear-gradient(to left,
            rgb(255, 255, 255) 0%,
            rgba(255, 255, 255, 0) 26%),
        linear-gradient(226.469deg,
            rgba(255, 255, 255, 0) 92.248%,
            rgb(255, 255, 255) 95.468%);
}
.ldv-dst__body {
    /* 848 of 1921 for the heading, 718 for the copy — the text stops well before
       the readable area of the photo begins. */
    max-width: 44%;
}
.ldv-dst--media-left .ldv-dst__body {
    margin-left: auto;
}
.ldv-dst__title {
    margin: 0 0 26px;
    color: var(--ldv-dst-ink);
    font-size: var(--ldv-dst-title);
    font-weight: 500;
    line-height: var(--ldv-dst-title-lh);
}
.ldv-dst__title span {
    position: relative;
    z-index: 1;
    color: var(--ldv-dst-ink);
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-dst-accent);
    font-style: italic;
    line-height: var(--ldv-dst-accent-lh);
}
.ldv-dst__title span::before {
    content: "";
    position: absolute;
    bottom: 2px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-dst-underline);
}
.ldv-dst__copy {
    color: var(--ldv-dst-ink);
    font-size: var(--ldv-dst-copy);
    font-weight: 500;
    line-height: var(--ldv-dst-copy-lh);
}
.ldv-dst__copy p {
    margin: 0;
}
.ldv-dst__copy p + p {
    margin-top: var(--ldv-dst-copy-lh);
}


/* --- Digital Milestones — .ldv-mls  (Figma 1772:2190) --- */

/* =============================================================================
   Digital Milestones band — .ldv-mls
   Markup:  template-parts/milestones.php
   Figma:   node 1772:2190
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Centred title, then numbered cards three-up. Each card stacks an oversized
   numeral that fades top-to-bottom, a white icon disc sitting over its lower
   half, a bold heading and centred copy. No script.
   ========================================================================== */
.ldv-mls {
    --ldv-mls-ink: #333333;
    --ldv-mls-underline: #e3725d;
    --ldv-mls-title: 46px;
    --ldv-mls-title-lh: 60px;
    --ldv-mls-title-accent: 58px;
    --ldv-mls-heading: 24px;
    --ldv-mls-copy: 18px;
    --ldv-mls-copy-lh: 30px;
    /* 263px numeral, 180px disc and a 72px icon in the design. */
    --ldv-mls-number: 263px;
    --ldv-mls-disc: 180px;
    --ldv-mls-icon: 72px;
    --ldv-mls-gap: 133px;

    padding: 80px 0;
    color: var(--ldv-mls-ink);
}
.ldv-mls__title {
    /* 771 of 1729 in the design — the cap keeps the accent on its own line. */
    max-width: 45%;
    margin: 0 auto 40px;
    color: var(--ldv-mls-ink);
    font-size: var(--ldv-mls-title);
    font-weight: 500;
    line-height: var(--ldv-mls-title-lh);
    text-align: center;
}
.ldv-mls__title span {
    position: relative;
    z-index: 1;
    color: var(--ldv-mls-ink);
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-mls-title-accent);
    font-style: italic;
}
.ldv-mls__title span::before {
    content: "";
    position: absolute;
    bottom: 10px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-mls-underline);
}
.ldv-mls__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px var(--ldv-mls-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.ldv-mls__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ldv-mls__badge {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    /* Enough room for the numeral plus the part of the disc that hangs below it. */
    padding-bottom: calc(var(--ldv-mls-disc) / 2);
    margin-bottom: 18px;
}
.ldv-mls__number {
    display: block;
    color: #d2d2d2;
    font-family: "Montserrat", "Guminert", sans-serif;
    font-size: var(--ldv-mls-number);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    background-image: linear-gradient(to bottom, var(--ldv-mls-num, #d2d2d2) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
    transition: --ldv-mls-num 0.35s ease;
}

/* Gradient-filled figure: solid grey at the top, gone by the baseline. Falls back
   to the flat grey where background-clip: text is unsupported. */


@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .ldv-mls__number {
        background-image: none;
        -webkit-text-fill-color: currentColor;
        opacity: 0.5;
    }
}
.ldv-mls__disc {
    position: absolute;
    /* Centred on the numeral's lower third, as in the design. */
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ldv-mls-disc);
    height: var(--ldv-mls-disc);
    transform: translateX(-50%);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.ldv-mls__icon {
    width: var(--ldv-mls-icon);
    height: var(--ldv-mls-icon);
    object-fit: contain;
    transition: filter 0.35s ease;
}

/* Hover: the numeral's grey gradient and the icon disc both take the theme red, the icon
   itself flips to white against it. A gradient cannot be transitioned, so the numeral's
   top colour is a registered custom property — that makes it a real colour the browser
   can interpolate. Where @property is unsupported the swap is instant instead of faded,
   which is the same end state. */
@property --ldv-mls-num {
    syntax: "<color>";
    inherits: true;
    initial-value: #d2d2d2;
}
/* The property changes here and inherits down to the numeral, so the transition has to be
   declared on this element as well as on the numeral itself. */
.ldv-mls__item {
    --ldv-mls-num: #d2d2d2;
    transition: --ldv-mls-num 0.35s ease;
}
.ldv-mls__item:hover,
.ldv-mls__item:focus-within {
    --ldv-mls-num: var(--ldv-mls-underline);
}
.ldv-mls__item:hover .ldv-mls__disc,
.ldv-mls__item:focus-within .ldv-mls__disc {
    background: var(--ldv-mls-underline);
    box-shadow: 0 18px 40px rgba(227, 114, 93, 0.35);
}
.ldv-mls__item:hover .ldv-mls__icon,
.ldv-mls__item:focus-within .ldv-mls__icon {
    /* Works whatever the SVG's own fill: crush to black, then invert to white. */
    filter: brightness(0) invert(1);
}
.ldv-mls__heading {
    margin: 0 0 12px;
    color: var(--ldv-mls-ink);
    font-size: var(--ldv-mls-heading);
    font-weight: 700;
    letter-spacing: -0.72px;
    line-height: normal;
}
.ldv-mls__copy {
    /* 368 of the 415px card in the design. */
    max-width: 90%;
    color: var(--ldv-mls-ink);
    font-size: var(--ldv-mls-copy);
    font-weight: 400;
    letter-spacing: -0.18px;
    line-height: var(--ldv-mls-copy-lh);
}
.ldv-mls__copy p {
    margin: 0;
}
.ldv-mls__copy p + p {
    margin-top: var(--ldv-mls-copy-lh);
}


/* --- System Cards (staircase) — .ldv-scd  (Figma 1773:2224) --- */

/* =============================================================================
   System Cards band — .ldv-scd
   Markup:  template-parts/system-cards.php
   Figma:   node 1773:2224
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Dark full-bleed band: centred title, then hairline-bordered panels that tile
   edge to edge with each one stepping lower than the last. No script.
   ========================================================================== */
.ldv-scd {
    --ldv-scd-line: #202020;
    --ldv-scd-title: 50px;
    --ldv-scd-title-lh: 69.3px;
    --ldv-scd-accent: 70px;
    --ldv-scd-accent-lh: 60px;
    --ldv-scd-heading: 24px;
    --ldv-scd-copy: 18px;
    --ldv-scd-copy-lh: 30px;
    --ldv-scd-icon: 55px;
    /* Panel tops in the design run 388, 503, 611, 720 — a step of about 110px. */
    --ldv-scd-step: 110px;
    --ldv-scd-pad-y: 81px;
    --ldv-scd-pad-l: 40px;
    --ldv-scd-pad-r: 70px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 0 0;
    background-color: rgba(0, 0, 0, 0.93);
    /* The design wash: clear at the top, solid black by 72%. */
    background-image: linear-gradient(188.158deg,
        rgba(0, 0, 0, 0) 30.893%,
        rgb(0, 0, 0) 72.2%);
    color: #ffffff;
}
.ldv-scd__title {
    /* 778 of 1729 in the design — the cap keeps the accent on its own line. */
    max-width: 46%;
    margin: 0 auto 70px;
    color: #ffffff;
    font-size: var(--ldv-scd-title);
    font-weight: 500;
    line-height: var(--ldv-scd-title-lh);
    text-align: center;
}
.ldv-scd__title span {
    color: #ffffff;
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-scd-accent);
    font-style: italic;
    line-height: var(--ldv-scd-accent-lh);
}
.ldv-scd__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Panels share their hairlines, as in the design. */
    gap: 0;
    /* Room for the deepest panel to drop without clipping. */
    padding: 0 0 calc(var(--ldv-scd-step) * 3);
    margin: 0;
    list-style: none;
}
.ldv-scd__card {
    min-height: 533px;
    padding: var(--ldv-scd-pad-y) var(--ldv-scd-pad-r) var(--ldv-scd-pad-y) var(--ldv-scd-pad-l);
    border: 1px solid var(--ldv-scd-line);
}
.ldv-scd__card + .ldv-scd__card {
    margin-left: -1px;
}
.ldv-scd__card:nth-child(2) {
    margin-top: var(--ldv-scd-step);
}
.ldv-scd__card:nth-child(3) {
    margin-top: calc(var(--ldv-scd-step) * 2);
}
.ldv-scd__card:nth-child(4) {
    margin-top: calc(var(--ldv-scd-step) * 3);
}
.ldv-scd__icon {
    display: block;
    width: var(--ldv-scd-icon);
    height: var(--ldv-scd-icon);
    margin-bottom: 28px;
    object-fit: contain;
}
.ldv-scd__heading {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: var(--ldv-scd-heading);
    font-weight: 700;
    letter-spacing: -0.72px;
    line-height: normal;
}
.ldv-scd__copy {
    color: #ffffff;
    font-size: var(--ldv-scd-copy);
    font-weight: 400;
    letter-spacing: -0.18px;
    line-height: var(--ldv-scd-copy-lh);
}
.ldv-scd__copy p {
    margin: 0;
}
.ldv-scd__copy p + p {
    margin-top: var(--ldv-scd-copy-lh);
}


/* --- Highlights — .ldv-hlt  (Figma 1773:2223) --- */

/* =============================================================================
   Highlights band — .ldv-hlt
   Markup:  template-parts/highlights.php
   Figma:   node 1773:2223
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Light three-up icon cards under a centred title. The 2px red rule sits at zero
   width in the design; it grows on hover and on keyboard focus. No script.
   ========================================================================== */
.ldv-hlt {
    --ldv-hlt-ink: #333333;
    --ldv-hlt-accent: #d01f30;
    --ldv-hlt-underline: #e3725d;
    --ldv-hlt-title: 46px;
    --ldv-hlt-title-lh: 60px;
    --ldv-hlt-title-accent: 58px;
    --ldv-hlt-heading: 24px;
    --ldv-hlt-copy: 18px;
    --ldv-hlt-copy-lh: 30px;
    --ldv-hlt-icon: 55px;

    padding: 80px 0;
    color: var(--ldv-hlt-ink);
}
.ldv-hlt__title {
    /* 771 of 1729 in the design. */
    max-width: 45%;
    margin: 0 auto 70px;
    color: var(--ldv-hlt-ink);
    font-size: var(--ldv-hlt-title);
    font-weight: 500;
    line-height: var(--ldv-hlt-title-lh);
    text-align: center;
}
.ldv-hlt__title span {
    position: relative;
    z-index: 1;
    color: var(--ldv-hlt-ink);
    font-family: "Scotch Text Comp Sm It", serif;
    font-size: var(--ldv-hlt-title-accent);
    font-style: italic;
}
.ldv-hlt__title span::before {
    content: "";
    position: absolute;
    bottom: 10px;
    z-index: -1;
    width: 100%;
    height: 7px;
    border-bottom: 7px solid var(--ldv-hlt-underline);
}
.ldv-hlt__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px 90px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ldv-hlt__card {
    max-width: 371px;
}
.ldv-hlt__icon {
    display: block;
    width: var(--ldv-hlt-icon);
    height: var(--ldv-hlt-icon);
    margin-bottom: 20px;
    object-fit: contain;
}
.ldv-hlt__heading {
    margin: 0 0 10px;
    color: var(--ldv-hlt-ink);
    font-size: var(--ldv-hlt-heading);
    font-weight: 700;
    letter-spacing: -0.72px;
    line-height: normal;
}
.ldv-hlt__rule {
    display: block;
    width: 0;
    height: 2px;
    margin-bottom: 10px;
    background: var(--ldv-hlt-accent);
    transition: width 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ldv-hlt__card:hover .ldv-hlt__rule,
.ldv-hlt__card:focus-within .ldv-hlt__rule {
    width: 100%;
}
.ldv-hlt__copy {
    color: var(--ldv-hlt-ink);
    font-size: var(--ldv-hlt-copy);
    font-weight: 400;
    letter-spacing: -0.18px;
    line-height: var(--ldv-hlt-copy-lh);
}
.ldv-hlt__copy p {
    margin: 0;
}
.ldv-hlt__copy p + p {
    margin-top: var(--ldv-hlt-copy-lh);
}


/* --- Client Quote — .ldv-quo  (Figma 1767:1749) --- */

/* =============================================================================
   Client Quote band — .ldv-quo
   Markup:  template-parts/client-quote.php
   Figma:   node 1767:1749
   Breakpoints for this section live at the end of assets/css/responsive.css.

   Centred pull quote over a faint texture, with the speaker's role in the theme red
   and the company under it. Ships in two versions — light (the design) and dark —
   chosen per page by the Version field; the modifier only swaps colours, never the
   type sizes or the layout. No script.
   ========================================================================== */
.ldv-quo {
    /* Light is the design and the default, so a page saved before the Version field
       existed keeps rendering exactly as it did. */
    --ldv-quo-bg: transparent;
    --ldv-quo-ink: #333333;
    --ldv-quo-accent: #be1e2d;
    --ldv-quo-texture: 0.05;
    --ldv-quo-quote: 30px;
    --ldv-quo-quote-lh: 50px;
    --ldv-quo-mark: 96px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 60px 0 80px;
    background: var(--ldv-quo-bg);
}

/* Explicit light version — same values as the base, so the modifier is safe to add
   to markup that already renders correctly. */
.ldv-quo--light {
    --ldv-quo-bg: transparent;
    --ldv-quo-ink: #333333;
    --ldv-quo-accent: #be1e2d;
    --ldv-quo-texture: 0.05;
}

/* Dark version: the ink of the other dark bands (.ldv-sys, .ldv-scd), white copy and
   the warmer brand red, which clears WCAG AA on this background where #be1e2d would
   not. The texture needs more opacity to stay visible against it. */
.ldv-quo--dark {
    --ldv-quo-bg: #131c25;
    --ldv-quo-ink: #ffffff;
    --ldv-quo-accent: #e3725d;
    --ldv-quo-texture: 0.12;
}

.ldv-quo__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
}
.ldv-quo__figure {
    margin: 0;
}
.ldv-quo__mark {
    display: block;
    width: var(--ldv-quo-mark);
    height: auto;
    margin: 0 0 30px 6%;
}
.ldv-quo__text {
    /* 1265 of 1921 in the design. */
    max-width: 73%;
    margin: 0 auto;
    color: var(--ldv-quo-ink);
    font-size: var(--ldv-quo-quote);
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: var(--ldv-quo-quote-lh);
    text-align: center;
}
.ldv-quo__text p {
    margin: 0;
}
.ldv-quo__text p + p {
    margin-top: var(--ldv-quo-quote-lh);
}
.ldv-quo__by {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
    text-align: center;
}
.ldv-quo__role {
    color: var(--ldv-quo-accent);
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
}
.ldv-quo__company {
    color: var(--ldv-quo-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
}


/* --- Case Study Banner — .bannerTwo.caseStudyBanner  (ref: Brain Waves banner) --- */

/* Modifier on the theme's .bannerTwo, so the section keeps that banner's height,
   padding, grid, H1/paragraph type and its whole responsive ladder. Only the three
   pieces this variant adds are styled here: the client logo, the meta row and the
   video layer. */

/* The video sits under the .bannerTwo::before gradient, which the theme paints with
   no z-index of its own — giving the gradient a layer keeps it above the footage. */
.bannerTwo.caseStudyBanner::before {
    z-index: 1;
}

.bannerTwo.caseStudyBanner .mainGrid {
    position: relative;
    z-index: 2;
}

.caseStudyBanner__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* The same artwork as the section's CSS background, as a real element. Hidden until
   the width where the theme drops banner background images — a phone then shows the
   artwork instead of the flat black that rule leaves behind. */
.caseStudyBanner__poster {
    display: none;
}

.caseStudyBanner__logo {
    width: auto;
    max-width: 280px;
    max-height: 60px;
    margin-bottom: 5px;
    object-fit: contain;
    object-position: left center;
}

/* Sits between the copy and the CTA. Gap matches the .left column's own rhythm. */
.caseStudyBanner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 40px;
    margin: 10px 0 5px;
    padding: 0;
    list-style: none;
}

.caseStudyBanner__meta li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.caseStudyBanner__metaIcon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.caseStudyBanner__metaText {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.caseStudyBanner__metaLabel {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Matches the banner paragraph's size, so the row reads as part of the same block. */
.caseStudyBanner__metaValue {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}


/* --- Light / dark versions for .ldv-out and .ldv-sys --- */

/* Both bands ship in two versions, chosen per page by their Version field. The
   modifiers swap colours through the custom properties above and nothing else — type
   sizes, spacing and layout are identical in either version, so a page can switch
   without reflowing. */

/* .ldv-out — light is the design. */
.ldv-out--light {
    --ldv-out-bg: transparent;
    --ldv-out-ink: #333333;
    --ldv-out-media-bg: #f4f4f4;
}

/* .ldv-out — dark uses the ink of the other dark bands (.ldv-sys, .ldv-scd, .ldv-quo
   dark). The #e3725d underline is kept: it clears AA on this background, where the
   deeper brand red would not. */
.ldv-out--dark {
    --ldv-out-bg: #181a1e;
    --ldv-out-ink: #ffffff;
    /* Sits just under the band colour, so a transparent-background mockup or a video
       still reads as part of it while loading. */
    --ldv-out-media-bg: #101114;
}

/* .ldv-sys — dark is the design. */
.ldv-sys--dark {
    --ldv-sys-ink: #181a1d;
    --ldv-sys-fade: #131c25;
    --ldv-sys-fg: #ffffff;
    --ldv-sys-ring: rgba(255, 255, 255, 0.12);
    --ldv-sys-texture: 0.2;
}

/* .ldv-sys — light puts the band on the page background with the theme's body ink. The
   ring flips to a dark hairline so a pale swatch still reads, and the texture drops to
   a whisper. */
.ldv-sys--light {
    --ldv-sys-ink: #ffffff;
    --ldv-sys-fade: #ffffff;
    --ldv-sys-fg: #333333;
    --ldv-sys-ring: rgba(0, 0, 0, 0.12);
    --ldv-sys-texture: 0.05;
}

/* The fade is a bottom-weighted wash built for a dark band; on the light version it
   would only grey the lower half. */
.ldv-sys--light .ldv-sys__fade {
    display: none;
}


/* ==========================================================================
   2. Media queries — one block per breakpoint, widest first
   ====================================================================== */


@media (max-width: 1600px) {
    /* Case Study Banner — .bannerTwo.caseStudyBanner
       Laptop widths give the copy the wide column and squeeze the right-hand one, the
       reverse of the theme's 0.6fr 1fr. Set here rather than in its own banded query so
       the file keeps one block per breakpoint; the 1200px block puts the theme ratio back,
       which is what makes this a 1600–1200 band. Case-study banners only — inner-banner.php
       shares .bannerTwo across the industry and location pages and is untouched. */
    .bannerTwo.caseStudyBanner .mainGrid {
        grid-template-columns: 1.5fr 0.5fr;
    }

    /* Capilli's split Outcome shot pulls left inside its box across the laptop band, where
       the enlarged product would otherwise sit too far into the copy. The 1200px block
       restores the centred position below the band. */
    .page-template-template-case-study-capilli section.ldv-osp.ldv-osp--media-left .ldv-osp__asset {
        object-position: 0% 50%;
    }

    /* The Challenge — .ldv-chl */
    .ldv-chl {
        --ldv-chl-title: 42px;
        --ldv-chl-title-lh: 55px;
        --ldv-chl-title-accent: 48px;
        --ldv-chl-copy: 18px;
        --ldv-chl-copy-lh: 38px;
        --ldv-chl-stagger: 56px;
    }

    /* Background Video — .ldv-bgv */
    .ldv-bgv {
        --ldv-bgv-title: 44px;
        --ldv-bgv-title-lh: 60px;
        --ldv-bgv-accent: 60px;
        --ldv-bgv-accent-lh: 52px;
        --ldv-bgv-copy: 22px;
        --ldv-bgv-copy-lh: 32px;
        --ldv-bgv-pad-b: 60px;
    }

    /* Design Concepts — .ldv-dcn */
    .ldv-dcn {
        --ldv-dcn-title: 42px;
        --ldv-dcn-title-lh: 55px;
        --ldv-dcn-accent: 48px;
        --ldv-dcn-copy: 22px;
        --ldv-dcn-copy-lh: 32px;
    }

    /* The System (palette + typography) — .ldv-sys */
    .ldv-sys {
        --ldv-sys-title: 44px;
        --ldv-sys-title-lh: 60px;
        --ldv-sys-accent: 60px;
        --ldv-sys-accent-lh: 52px;
        --ldv-sys-heading: 42px;
        --ldv-sys-heading-lh: 55px;
        --ldv-sys-copy: 22px;
        --ldv-sys-copy-lh: 36px;
        --ldv-sys-chip: 140px;
        --ldv-sys-swatch-w: 165px;
        --ldv-sys-swatch-gap: 40px;
        --ldv-sys-glyphs: 280px;
        --ldv-sys-face-name: 80px;
    }

    /* The Outcome (centred) — .ldv-out */
    .ldv-out {
        --ldv-out-title: 42px;
        --ldv-out-title-lh: 55px;
        --ldv-out-accent: 48px;
        --ldv-out-copy: 22px;
        --ldv-out-copy-lh: 38px;
    }

    /* Outcome (split, mirrorable) — .ldv-osp */
    .ldv-osp {
        --ldv-osp-title: 44px;
        --ldv-osp-title-lh: 60px;
        --ldv-osp-accent: 60px;
        --ldv-osp-accent-lh: 52px;
        --ldv-osp-copy: 22px;
        --ldv-osp-copy-lh: 36px;

        padding: 90px 0;
    }

    /* Design Strategy (mirrorable) — .ldv-dst */
    .ldv-dst {
        --ldv-dst-title: 44px;
        --ldv-dst-title-lh: 60px;
        --ldv-dst-accent: 60px;
        --ldv-dst-accent-lh: 52px;
        --ldv-dst-copy: 22px;
        --ldv-dst-copy-lh: 32px;
        --ldv-dst-media: 56%;
    }

    .ldv-dst__body {
        max-width: 46%;
    }

    /* Digital Milestones — .ldv-mls */
    .ldv-mls {
        --ldv-mls-title: 42px;
        --ldv-mls-title-lh: 55px;
        --ldv-mls-title-accent: 48px;
        --ldv-mls-number: 220px;
        --ldv-mls-disc: 160px;
        --ldv-mls-icon: 64px;
        --ldv-mls-gap: 90px;
    }

    /* System Cards (staircase) — .ldv-scd */
    .ldv-scd {
        --ldv-scd-title: 44px;
        --ldv-scd-title-lh: 60px;
        --ldv-scd-accent: 60px;
        --ldv-scd-accent-lh: 52px;
        --ldv-scd-copy: 17px;
        --ldv-scd-copy-lh: 28px;
        --ldv-scd-step: 90px;
        --ldv-scd-pad-y: 64px;
        --ldv-scd-pad-r: 48px;
        --ldv-scd-pad-l: 32px;
    }

    .ldv-scd__card {
        min-height: 480px;
    }

    /* Highlights — .ldv-hlt */
    .ldv-hlt {
        --ldv-hlt-title: 42px;
        --ldv-hlt-title-lh: 55px;
        --ldv-hlt-title-accent: 48px;
        --ldv-hlt-copy: 17px;
        --ldv-hlt-copy-lh: 28px;
    }

    .ldv-hlt__list {
        gap: 50px 70px;
    }

    /* Client Quote — .ldv-quo */
    .ldv-quo {
        --ldv-quo-quote: 27px;
        --ldv-quo-quote-lh: 44px;
        --ldv-quo-mark: 84px;
    }
}


@media (max-width: 1440px) {
    /* The Challenge — .ldv-chl */
    .ldv-chl {
        --ldv-chl-title: 40px;
        --ldv-chl-title-lh: 50px;
    }

    .ldv-chl__title {
        max-width: 60%;
    }

    /* Background Video — .ldv-bgv */
    .ldv-bgv {
        --ldv-bgv-title: 40px;
        --ldv-bgv-title-lh: 55px;
        --ldv-bgv-accent: 54px;
        --ldv-bgv-accent-lh: 48px;
    }

    .ldv-bgv__title {
        max-width: 70%;
    }

    /* Design Concepts — .ldv-dcn */
    .ldv-dcn {
        --ldv-dcn-title: 40px;
        --ldv-dcn-title-lh: 50px;
    }

    /* The System (palette + typography) — .ldv-sys */
    .ldv-sys {
        --ldv-sys-title: 40px;
        --ldv-sys-title-lh: 55px;
        --ldv-sys-accent: 54px;
        --ldv-sys-accent-lh: 48px;
        --ldv-sys-heading: 40px;
        --ldv-sys-heading-lh: 50px;
        --ldv-sys-chip: 125px;
        --ldv-sys-swatch-w: 150px;
        --ldv-sys-swatch-gap: 34px;
    }

    .ldv-sys__title {
        max-width: 75%;
    }

    /* The Outcome (centred) — .ldv-out */
    .ldv-out {
        --ldv-out-title: 40px;
        --ldv-out-title-lh: 50px;
    }

    .ldv-out__title {
        max-width: 55%;
    }

    /* Outcome (split, mirrorable) — .ldv-osp */
    .ldv-osp {
        --ldv-osp-title: 40px;
        --ldv-osp-title-lh: 55px;
        --ldv-osp-accent: 54px;
        --ldv-osp-accent-lh: 48px;
        --ldv-osp-media: 42%;
    }

    .ldv-osp__body {
        max-width: 64%;
    }

    /* Design Strategy (mirrorable) — .ldv-dst */
    .ldv-dst {
        --ldv-dst-title: 40px;
        --ldv-dst-title-lh: 55px;
        --ldv-dst-accent: 54px;
        --ldv-dst-accent-lh: 48px;
        --ldv-dst-media: 52%;
    }

    .ldv-dst__body {
        max-width: 48%;
    }

    /* Digital Milestones — .ldv-mls */
    .ldv-mls {
        --ldv-mls-title: 40px;
        --ldv-mls-title-lh: 50px;
        --ldv-mls-number: 190px;
        --ldv-mls-gap: 70px;
    }

    .ldv-mls__title {
        max-width: 60%;
    }

    /* System Cards (staircase) — .ldv-scd */
    .ldv-scd {
        --ldv-scd-title: 40px;
        --ldv-scd-title-lh: 55px;
        --ldv-scd-accent: 54px;
        --ldv-scd-accent-lh: 48px;
        --ldv-scd-step: 75px;
    }

    .ldv-scd__title {
        max-width: 66%;
    }

    /* Highlights — .ldv-hlt */
    .ldv-hlt {
        --ldv-hlt-title: 40px;
        --ldv-hlt-title-lh: 50px;
    }

    .ldv-hlt__title {
        max-width: 60%;
    }
}


@media (max-width: 1200px) {
    /* Below the laptop band the banner returns to the theme's own column ratio, and
       Capilli's Outcome shot to its centred position. */
    .bannerTwo.caseStudyBanner .mainGrid {
        grid-template-columns:  1fr;
    }

    .page-template-template-case-study-capilli section.ldv-osp.ldv-osp--media-left .ldv-osp__asset {
        object-position: 50% 50%;
    }

    /* The Challenge — .ldv-chl */
    .ldv-chl {
        --ldv-chl-title: 35px;
        --ldv-chl-title-lh: 1.2;
        --ldv-chl-title-accent: 40px;
        --ldv-chl-copy: 17px;
        --ldv-chl-copy-lh: 32px;
        --ldv-chl-radius: 24px;
        --ldv-chl-stagger: 40px;

        padding: 70px 0;
    }

    .ldv-chl__title {
        max-width: 75%;
        margin-bottom: 45px;
    }

    .ldv-chl__grid {
        gap: 40px;
    }

    .ldv-chl__cards {
        gap: 28px;
    }

    /* Background Video — .ldv-bgv */
    .ldv-bgv {
        --ldv-bgv-title: 35px;
        --ldv-bgv-title-lh: 48px;
        --ldv-bgv-accent: 44px;
        --ldv-bgv-accent-lh: 42px;
        --ldv-bgv-copy: 20px;
        --ldv-bgv-copy-lh: 30px;
        --ldv-bgv-pad-b: 50px;
        --ldv-bgv-gap: 24px;
    }

    .ldv-bgv__title {
        max-width: 80%;
    }

    /* Design Concepts — .ldv-dcn */
    .ldv-dcn {
        --ldv-dcn-title: 35px;
        --ldv-dcn-title-lh: 1.2;
        --ldv-dcn-accent: 40px;
        --ldv-dcn-copy: 20px;
        --ldv-dcn-copy-lh: 30px;
        --ldv-dcn-gap: 40px;
    }

    /* The 45% cap strands too few words per line once the type steps down. */
    .ldv-dcn__title {
        max-width: 70%;
    }

    /* The System (palette + typography) — .ldv-sys */
    .ldv-sys {
        --ldv-sys-title: 35px;
        --ldv-sys-title-lh: 1.2;
        --ldv-sys-accent: 44px;
        --ldv-sys-accent-lh: 42px;
        --ldv-sys-heading: 35px;
        --ldv-sys-heading-lh: 1.2;
        --ldv-sys-copy: 20px;
        --ldv-sys-copy-lh: 32px;
        --ldv-sys-chip: 110px;
        --ldv-sys-swatch-w: 132px;
        --ldv-sys-swatch-gap: 28px;
        --ldv-sys-label: 14px;
        --ldv-sys-glyphs: 220px;
        --ldv-sys-face-name: 64px;

        padding: 90px 0 80px;
    }

    .ldv-sys__title {
        max-width: 100%;
        margin-bottom: 55px;
    }

    .ldv-sys__copy {
        max-width: 100%;
    }

    .ldv-sys__block + .ldv-sys__block {
        margin-top: 70px;
    }

    /* Below this the palette needs more than one row to stay legible. */
    /* Fixed columns from here down, filling the container again rather than hugging
       the left. */
    .ldv-sys__swatches {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        justify-content: stretch;
    }

    .ldv-sys__swatch-name,
    .ldv-sys__swatch-hex {
        letter-spacing: 3px;
    }

    /* The Outcome (centred) — .ldv-out */
    .ldv-out {
        --ldv-out-title: 35px;
        --ldv-out-title-lh: 1.2;
        --ldv-out-accent: 40px;
        --ldv-out-copy: 20px;
        --ldv-out-copy-lh: 32px;
    }

    .ldv-out__title {
        max-width: 70%;
    }

    .ldv-out__copy {
        max-width: 95%;
    }

    /* Outcome (split, mirrorable) — .ldv-osp */
    .ldv-osp {
        --ldv-osp-title: 35px;
        --ldv-osp-title-lh: 1.2;
        --ldv-osp-accent: 44px;
        --ldv-osp-accent-lh: 42px;
        --ldv-osp-copy: 20px;
        --ldv-osp-copy-lh: 32px;
        --ldv-osp-media: 40%;

        padding: 70px 0;
    }

    /* Capilli's two enlarged photos: laptop widths have less room either side of the
       copy, so both come down a step. */
    .page-template-template-case-study-capilli {
        --ldv-cap-chl-scale: 1.15;
        --ldv-cap-osp-scale: 1.6;
    }

    .ldv-osp__body {
        max-width: 68%;
    }

    /* Design Strategy (mirrorable) — .ldv-dst */
    .ldv-dst {
        --ldv-dst-title: 35px;
        --ldv-dst-title-lh: 1.2;
        --ldv-dst-accent: 44px;
        --ldv-dst-accent-lh: 42px;
        --ldv-dst-copy: 20px;
        --ldv-dst-copy-lh: 30px;
        --ldv-dst-media: 46%;

        padding: 70px 0;
    }

    .ldv-dst__body {
        max-width: 52%;
    }

    /* Digital Milestones — .ldv-mls */
    .ldv-mls {
        --ldv-mls-title: 35px;
        --ldv-mls-title-lh: 1.2;
        --ldv-mls-title-accent: 40px;
        --ldv-mls-heading: 22px;
        --ldv-mls-copy: 17px;
        --ldv-mls-copy-lh: 28px;
        --ldv-mls-number: 160px;
        --ldv-mls-disc: 140px;
        --ldv-mls-icon: 56px;
        --ldv-mls-gap: 45px;

        padding: 70px 0;
    }

    .ldv-mls__title {
        max-width: 75%;
    }

    .ldv-mls__copy {
        max-width: 100%;
    }

    /* System Cards (staircase) — .ldv-scd */
    .ldv-scd {
        --ldv-scd-title: 35px;
        --ldv-scd-title-lh: 1.2;
        --ldv-scd-accent: 44px;
        --ldv-scd-accent-lh: 42px;
        --ldv-scd-heading: 22px;
        --ldv-scd-copy: 16px;
        --ldv-scd-copy-lh: 27px;
        --ldv-scd-icon: 48px;
        --ldv-scd-step: 60px;

        padding-top: 90px;
    }

    .ldv-scd__title {
        max-width: 85%;
        margin-bottom: 55px;
    }

    .ldv-scd__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-bottom: var(--ldv-scd-step);
    }

    .ldv-scd__card:nth-child(3) {
        margin-top: 0;
    }

    .ldv-scd__card:nth-child(4) {
        margin-top: var(--ldv-scd-step);
    }

    /* Rows overlap their hairline vertically too, now that they wrap. */
    .ldv-scd__card:nth-child(n + 3) {
        margin-top: calc(var(--ldv-scd-step) - 1px);
    }

    .ldv-scd__card:nth-child(odd) {
        margin-left: 0;
    }

    /* Highlights — .ldv-hlt */
    .ldv-hlt {
        --ldv-hlt-title: 35px;
        --ldv-hlt-title-lh: 1.2;
        --ldv-hlt-title-accent: 40px;
        --ldv-hlt-heading: 22px;
        --ldv-hlt-copy: 16px;
        --ldv-hlt-copy-lh: 27px;
        --ldv-hlt-icon: 48px;

        padding: 70px 0;
    }

    .ldv-hlt__title {
        max-width: 75%;
        margin-bottom: 50px;
    }

    .ldv-hlt__list {
        gap: 40px 45px;
    }

    .ldv-hlt__card {
        max-width: 100%;
    }

    /* Client Quote — .ldv-quo */
    .ldv-quo {
        --ldv-quo-quote: 24px;
        --ldv-quo-quote-lh: 40px;
        --ldv-quo-mark: 72px;
    }

    .ldv-quo__text {
        max-width: 85%;
    }

    /* Case Study Banner — .bannerTwo.caseStudyBanner */
    .caseStudyBanner__logo {
        max-height: 52px;
    }

    .caseStudyBanner__meta {
        gap: 14px 30px;
    }

    .caseStudyBanner__metaValue {
        font-size: 16px;
    }
}


@media (max-width: 991px) {
    /* The Challenge — .ldv-chl */
    .ldv-chl {
        --ldv-chl-title: 30px;
        --ldv-chl-title-accent: 35px;
        --ldv-chl-copy: 16px;
        --ldv-chl-copy-lh: 30px;
        --ldv-chl-stagger: 32px;

        padding: 60px 0;
    }

    .ldv-chl__title {
        max-width: 100%;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-chl__title span::before {
        display: none;
    }

    .ldv-chl__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    /* Background Video — .ldv-bgv */
    .ldv-bgv {
        --ldv-bgv-title: 30px;
        --ldv-bgv-title-lh: 42px;
        --ldv-bgv-accent: 38px;
        --ldv-bgv-accent-lh: 36px;
        --ldv-bgv-copy: 18px;
        --ldv-bgv-copy-lh: 28px;
        --ldv-bgv-pad-b: 0;

        aspect-ratio: auto;
        min-height: 520px;
    }

    .ldv-bgv__body {
        position: static;
        padding: 260px 0 50px;
    }

    .ldv-bgv__title,
    .ldv-bgv__copy {
        max-width: 100%;
    }

    /* Design Concepts — .ldv-dcn */
    .ldv-dcn {
        --ldv-dcn-title: 30px;
        --ldv-dcn-accent: 35px;
        --ldv-dcn-copy: 18px;
        --ldv-dcn-copy-lh: 28px;
        --ldv-dcn-gap: 35px;

        padding: 60px 0;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-dcn__title span::before {
        display: none;
    }

    .ldv-dcn__title,
    .ldv-dcn__copy {
        max-width: 100%;
    }

    /* The System (palette + typography) — .ldv-sys */
    .ldv-sys {
        --ldv-sys-title: 30px;
        --ldv-sys-accent: 38px;
        --ldv-sys-accent-lh: 36px;
        --ldv-sys-heading: 30px;
        --ldv-sys-copy: 18px;
        --ldv-sys-copy-lh: 30px;
        --ldv-sys-chip: 100px;
        --ldv-sys-swatch-w: 118px;
        --ldv-sys-swatch-gap: 24px;
        --ldv-sys-glyphs: 170px;
        --ldv-sys-face-name: 52px;

        padding: 70px 0 60px;
    }

    /* Tablet and below: the two-column palette option stacks, whatever the page is set
       to. One column is the only layout from here down, so the swatches get their normal
       top margin back and the copy its normal measure. */
    .ldv-sys__block--split {
        display: block;
    }

    .ldv-sys__block--split .ldv-sys__swatches {
        grid-auto-flow: column;
        grid-template-columns: none;
        justify-content: start;
        margin: 45px 0 0;
    }

    .ldv-sys__specimen {
        gap: 40px;
    }

    .ldv-sys__sample-heading {
        font-size: 26px;
    }

    .ldv-sys__sample-copy {
        font-size: 18px;
        line-height: 32px;
    }

    /* The Outcome (centred) — .ldv-out */
    .ldv-out {
        --ldv-out-title: 30px;
        --ldv-out-accent: 35px;
        --ldv-out-copy: 18px;
        --ldv-out-copy-lh: 30px;
    }

    .ldv-out__head {
        padding: 60px 0 25px;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-out__title span::before {
        display: none;
    }

    .ldv-out__title,
    .ldv-out__copy {
        max-width: 100%;
    }

    /* Outcome (split, mirrorable) — .ldv-osp */
    .ldv-osp {
        --ldv-osp-title: 30px;
        --ldv-osp-accent: 38px;
        --ldv-osp-accent-lh: 36px;
        --ldv-osp-copy: 18px;
        --ldv-osp-copy-lh: 30px;

        display: flex;
        flex-direction: column;
        padding: 60px 0 0;
    }

    /* Tablet: the Challenge photo is nearly full width here and the split media is about
       to stack, so the enlargement is almost spent. */
    .page-template-template-case-study-capilli {
        --ldv-cap-chl-scale: 1.05;
        --ldv-cap-osp-scale: 1.25;
    }

    .ldv-osp__body {
        max-width: 100%;
        padding-bottom: 40px;
    }

    .ldv-osp__media,
    .ldv-osp--media-left .ldv-osp__media {
        position: relative;
        right: auto;
        left: auto;
        order: 2;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .ldv-osp--media-left .ldv-osp__body {
        margin-left: 0;
    }

    .ldv-osp__asset {
        object-position: 50% 50%;
    }

    /* Vertical fade now, so the shot meets the copy above it rather than beside. */
    .ldv-osp__blend,
    .ldv-osp--media-left .ldv-osp__blend {
        background-image: linear-gradient(to top,
            rgba(24, 26, 30, 0) 55%,
            rgb(26, 0, 0) 100%);
    }

    /* Design Strategy (mirrorable) — .ldv-dst */
    .ldv-dst {
        --ldv-dst-title: 30px;
        --ldv-dst-accent: 38px;
        --ldv-dst-accent-lh: 36px;
        --ldv-dst-copy: 18px;
        --ldv-dst-copy-lh: 28px;

        display: flex;
        flex-direction: column;
        padding: 60px 0 0;
    }

    .ldv-dst__body,
    .ldv-dst--media-left .ldv-dst__body {
        max-width: 100%;
        margin: 0;
        padding-bottom: 40px;
    }

    .ldv-dst__media,
    .ldv-dst--media-left .ldv-dst__media {
        position: relative;
        right: auto;
        left: auto;
        order: 2;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .ldv-dst__asset,
    .ldv-dst--media-left .ldv-dst__asset {
        object-position: 50% 50%;
    }

    .ldv-dst__blend,
    .ldv-dst--media-left .ldv-dst__blend {
        background-image: linear-gradient(to bottom,
            rgb(255, 255, 255) 0%,
            rgba(255, 255, 255, 0) 22%);
    }

    /* Digital Milestones — .ldv-mls */
    .ldv-mls {
        --ldv-mls-title: 30px;
        --ldv-mls-title-accent: 35px;
        --ldv-mls-heading: 20px;
        --ldv-mls-copy: 16px;
        --ldv-mls-copy-lh: 26px;
        --ldv-mls-number: 130px;
        --ldv-mls-disc: 118px;
        --ldv-mls-icon: 48px;
        --ldv-mls-gap: 30px;

        padding: 60px 0;
    }

    .ldv-mls__title {
        max-width: 100%;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-mls__title span::before {
        display: none;
    }

    /* System Cards (staircase) — .ldv-scd */
    .ldv-scd {
        --ldv-scd-title: 30px;
        --ldv-scd-accent: 38px;
        --ldv-scd-accent-lh: 36px;
        --ldv-scd-heading: 20px;
        --ldv-scd-pad-y: 48px;
        --ldv-scd-pad-r: 32px;
        --ldv-scd-pad-l: 24px;
        --ldv-scd-step: 40px;

        padding-top: 70px;
    }

    .ldv-scd__card {
        min-height: 0;
    }

    /* Highlights — .ldv-hlt */
    .ldv-hlt {
        --ldv-hlt-title: 30px;
        --ldv-hlt-title-accent: 35px;
        --ldv-hlt-heading: 20px;

        padding: 60px 0;
    }

    .ldv-hlt__title {
        max-width: 100%;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-hlt__title span::before {
        display: none;
    }

    .ldv-hlt__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Client Quote — .ldv-quo */
    .ldv-quo {
        --ldv-quo-quote: 21px;
        --ldv-quo-quote-lh: 34px;
        --ldv-quo-mark: 60px;

        padding: 50px 0 60px;
    }

    .ldv-quo__text {
        max-width: 100%;
    }

    .ldv-quo__mark {
        margin-left: 0;
    }

    /* Case Study Banner — .bannerTwo.caseStudyBanner */
    .caseStudyBanner__logo {
        max-height: 46px;
        max-width: 220px;
    }

    /* Meta row stays left-aligned on every phone, even though the theme centres the
       banner's .left column at these widths — the label/value pairs read as a list and a
       centred one is hard to scan. text-align is reset too, since the items would
       otherwise inherit the centring from .left. */
    .caseStudyBanner__meta {
        justify-content: flex-start;
        gap: 12px 24px;
        text-align: left;
    }

    .caseStudyBanner__meta li {
        justify-content: flex-start;
    }

    .caseStudyBanner__metaText {
        align-items: flex-start;
    }

    .caseStudyBanner__metaLabel {
        font-size: 12px;
        letter-spacing: 0.8px;
    }
}


@media (max-width: 767px) {
    /* The Challenge — .ldv-chl */
    .ldv-chl {
        --ldv-chl-title: 28px;
        --ldv-chl-title-accent: 30px;
        --ldv-chl-copy: 15px;
        --ldv-chl-copy-lh: 28px;
        --ldv-chl-radius: 20px;
        --ldv-chl-offset: 8px;

        padding: 50px 0;
    }

    /* One card per row on a phone, so the stagger would only strand whitespace. */
    .ldv-chl__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ldv-chl__card:nth-child(even) {
        margin-top: 0;
    }

    .ldv-chl__card {
        aspect-ratio: 4 / 3;
    }

    /* Background Video — .ldv-bgv */
    .ldv-bgv {
        --ldv-bgv-title: 26px;
        --ldv-bgv-title-lh: 36px;
        --ldv-bgv-accent: 30px;
        --ldv-bgv-accent-lh: 30px;
        --ldv-bgv-copy: 16px;
        --ldv-bgv-copy-lh: 26px;
        --ldv-bgv-gap: 20px;

        min-height: 460px;
    }

    .ldv-bgv__body {
        padding: 200px 0 40px;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-bgv__title span::before {
        display: none;
    }

    /* Design Concepts — .ldv-dcn */
    .ldv-dcn {
        --ldv-dcn-title: 28px;
        --ldv-dcn-accent: 30px;
        --ldv-dcn-copy: 16px;
        --ldv-dcn-copy-lh: 26px;
        --ldv-dcn-radius: 16px;

        padding: 50px 0;
    }

    /* 1.9:1 is a letterbox on a phone — give the board more height. */
    .ldv-dcn__media {
        aspect-ratio: 4 / 3;
    }

    /* The System (palette + typography) — .ldv-sys */
    .ldv-sys {
        --ldv-sys-title: 26px;
        --ldv-sys-accent: 30px;
        --ldv-sys-accent-lh: 30px;
        --ldv-sys-heading: 26px;
        --ldv-sys-copy: 16px;
        --ldv-sys-copy-lh: 26px;
        --ldv-sys-chip: 88px;
        --ldv-sys-swatch-gap: 20px;
        --ldv-sys-label: 13px;
        --ldv-sys-glyphs: 140px;
        --ldv-sys-face-name: 40px;

        padding: 55px 0 50px;
    }

    /* Fixed swatch widths strand a lonely circle on the last row; a grid keeps
       the palette even at any count. */
    .ldv-sys__swatches {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 16px;
    }

    /* Already stacked by the 991px block; the palette here just follows the three even
       tracks the one-column layout uses at this width. */
    .ldv-sys__block--split .ldv-sys__swatches {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 16px;
    }

    .ldv-sys__swatch-name,
    .ldv-sys__swatch-hex {
        letter-spacing: 2px;
        word-break: break-word;
    }

    .ldv-sys__specimen {
        gap: 24px;
    }

    .ldv-sys__sample {
        flex-basis: 100%;
        padding-top: 0;
    }

    .ldv-sys__sample-heading {
        font-size: 22px;
    }

    .ldv-sys__sample-copy {
        font-size: 16px;
        line-height: 28px;
    }

    /* The Outcome (centred) — .ldv-out */
    .ldv-out {
        --ldv-out-title: 28px;
        --ldv-out-accent: 30px;
        --ldv-out-copy: 16px;
        --ldv-out-copy-lh: 26px;
    }

    .ldv-out__head {
        padding: 50px 0 20px;
    }

    /* A 2.9:1 strip is a sliver on a phone — give the mockup more height. */
    .ldv-out__media {
        aspect-ratio: 16 / 10;
    }

    /* Outcome (split, mirrorable) — .ldv-osp */
    .ldv-osp {
        --ldv-osp-title: 26px;
        --ldv-osp-accent: 30px;
        --ldv-osp-accent-lh: 30px;
        --ldv-osp-copy: 16px;
        --ldv-osp-copy-lh: 26px;

        padding-top: 50px;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-osp__title span::before {
        display: none;
    }

    .ldv-osp__media {
        aspect-ratio: 4 / 3;
    }

    /* Phones: both layouts have stacked and the photos already run the full width, so
       enlarging them would only crop them. Off from here down, every phone size. */
    .page-template-template-case-study-capilli {
        --ldv-cap-chl-scale: 1;
        --ldv-cap-osp-scale: 1;
    }

    /* Design Strategy (mirrorable) — .ldv-dst */
    .ldv-dst {
        --ldv-dst-title: 26px;
        --ldv-dst-accent: 30px;
        --ldv-dst-accent-lh: 30px;
        --ldv-dst-copy: 16px;
        --ldv-dst-copy-lh: 26px;

        padding-top: 50px;
    }

    /* Theme drops the underline once the heading wraps tightly. */
    .ldv-dst__title span::before {
        display: none;
    }

    .ldv-dst__media,
    .ldv-dst--media-left .ldv-dst__media {
        aspect-ratio: 4 / 3;
    }

    /* Digital Milestones — .ldv-mls */
    .ldv-mls {
        --ldv-mls-title: 28px;
        --ldv-mls-title-accent: 30px;
        --ldv-mls-copy: 15px;
        --ldv-mls-copy-lh: 25px;
        --ldv-mls-number: 150px;
        --ldv-mls-disc: 130px;
        --ldv-mls-icon: 52px;

        padding: 50px 0;
    }

    .ldv-mls__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
    }

    .ldv-mls__copy {
        max-width: 32em;
    }

    /* System Cards (staircase) — .ldv-scd */
    .ldv-scd {
        --ldv-scd-title: 26px;
        --ldv-scd-accent: 30px;
        --ldv-scd-accent-lh: 30px;
        --ldv-scd-copy: 15px;
        --ldv-scd-copy-lh: 26px;

        padding-top: 55px;
    }

    .ldv-scd__title {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .ldv-scd__list {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 0;
    }

    .ldv-scd__card,
    .ldv-scd__card:nth-child(2),
    .ldv-scd__card:nth-child(3),
    .ldv-scd__card:nth-child(4),
    .ldv-scd__card:nth-child(n + 3) {
        margin-top: 0;
        margin-left: 0;
    }

    .ldv-scd__card + .ldv-scd__card {
        margin-top: -1px;
    }

    /* Highlights — .ldv-hlt */
    .ldv-hlt {
        --ldv-hlt-title: 28px;
        --ldv-hlt-title-accent: 30px;
        --ldv-hlt-copy: 15px;
        --ldv-hlt-copy-lh: 26px;

        padding: 50px 0;
    }

    .ldv-hlt__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    /* No hover on touch, so the rule shows by default there. */
    .ldv-hlt__rule {
        width: 100%;
    }

    /* Client Quote — .ldv-quo */
    .ldv-quo {
        --ldv-quo-quote: 18px;
        --ldv-quo-quote-lh: 30px;
        --ldv-quo-mark: 52px;

        padding: 40px 0 50px;
    }

    .ldv-quo__mark {
        margin-bottom: 20px;
    }

    .ldv-quo__role {
        font-size: 18px;
    }

    /* Case Study Banner — .bannerTwo.caseStudyBanner. Left-aligned like the wider phone
       sizes above; only the gap tightens here. */
    .caseStudyBanner__meta {
        gap: 12px 20px;
    }

    .caseStudyBanner__metaValue {
        font-size: 15px;
    }

    /* The System — matches .ldv-bgv / .ldv-osp / .ldv-dst, which drop the underline
       once their heading wraps tightly. */
    .ldv-sys__title span::before {
        display: none;
    }

    /* The inset would only shrink an already-narrow asset here. */
    .ldv-out--inset .ldv-out__media {
        width: 100%;
    }
}


@media (max-width: 480px) {
    /* The Challenge — .ldv-chl */
    .ldv-chl {
        --ldv-chl-title: 26px;
        --ldv-chl-title-accent: 26px;
        --ldv-chl-copy: 14px;
        --ldv-chl-copy-lh: 26px;
        --ldv-chl-radius: 16px;
    }

    /* Background Video — .ldv-bgv */
    .ldv-bgv {
        --ldv-bgv-title: 24px;
        --ldv-bgv-title-lh: 32px;
        --ldv-bgv-accent: 26px;
        --ldv-bgv-accent-lh: 26px;
        --ldv-bgv-copy: 14px;
        --ldv-bgv-copy-lh: 24px;

        min-height: 420px;
    }

    .ldv-bgv__body {
        padding: 160px 0 32px;
    }

    /* Design Concepts — .ldv-dcn */
    .ldv-dcn {
        --ldv-dcn-title: 26px;
        --ldv-dcn-copy: 14px;
        --ldv-dcn-copy-lh: 24px;
        --ldv-dcn-gap: 28px;
        --ldv-dcn-radius: 12px;
    }

    /* The System (palette + typography) — .ldv-sys */
    .ldv-sys {
        --ldv-sys-title: 24px;
        --ldv-sys-accent: 26px;
        --ldv-sys-accent-lh: 26px;
        --ldv-sys-heading: 24px;
        --ldv-sys-copy: 14px;
        --ldv-sys-copy-lh: 24px;
        --ldv-sys-chip: 76px;
        --ldv-sys-label: 12px;
        --ldv-sys-glyphs: 110px;
        --ldv-sys-face-name: 34px;
    }

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

    /* The Outcome (centred) — .ldv-out */
    .ldv-out {
        --ldv-out-title: 26px;
        --ldv-out-copy: 14px;
        --ldv-out-copy-lh: 24px;
    }

    .ldv-out__media {
        aspect-ratio: 4 / 3;
    }

    /* Outcome (split, mirrorable) — .ldv-osp */
    .ldv-osp {
        --ldv-osp-title: 24px;
        --ldv-osp-accent: 26px;
        --ldv-osp-accent-lh: 26px;
        --ldv-osp-copy: 14px;
        --ldv-osp-copy-lh: 24px;
    }

    /* Design Strategy (mirrorable) — .ldv-dst */
    .ldv-dst {
        --ldv-dst-title: 24px;
        --ldv-dst-accent: 26px;
        --ldv-dst-accent-lh: 26px;
        --ldv-dst-copy: 14px;
        --ldv-dst-copy-lh: 24px;
    }

    /* Digital Milestones — .ldv-mls */
    .ldv-mls {
        --ldv-mls-title: 26px;
        --ldv-mls-title-accent: 26px;
        --ldv-mls-copy: 14px;
        --ldv-mls-copy-lh: 24px;
        --ldv-mls-number: 120px;
        --ldv-mls-disc: 110px;
        --ldv-mls-icon: 44px;
    }

    /* System Cards (staircase) — .ldv-scd */
    .ldv-scd {
        --ldv-scd-title: 24px;
        --ldv-scd-accent: 26px;
        --ldv-scd-accent-lh: 26px;
        --ldv-scd-copy: 14px;
        --ldv-scd-copy-lh: 24px;
        --ldv-scd-icon: 44px;
        --ldv-scd-pad-y: 36px;
    }

    /* Highlights — .ldv-hlt */
    .ldv-hlt {
        --ldv-hlt-title: 26px;
        --ldv-hlt-title-accent: 26px;
        --ldv-hlt-copy: 14px;
        --ldv-hlt-copy-lh: 24px;
        --ldv-hlt-icon: 44px;
    }

    /* Client Quote — .ldv-quo */
    .ldv-quo {
        --ldv-quo-quote: 16px;
        --ldv-quo-quote-lh: 27px;
        --ldv-quo-mark: 44px;
    }

    /* Case Study Banner — .bannerTwo.caseStudyBanner. No video on phones: the CSS
       background still carries the artwork, and a phone never spends data on the
       file. */
    .caseStudyBanner__video {
        display: none;
    }

    .caseStudyBanner__logo {
        max-height: 40px;
        max-width: 180px;
    }

    .caseStudyBanner__meta {
        gap: 10px 16px;
    }

    .caseStudyBanner__metaIcon {
        width: 20px;
        height: 20px;
    }

    .caseStudyBanner__metaLabel {
        font-size: 11px;
    }

    .caseStudyBanner__metaValue {
        font-size: 14px;
    }
}


/* --------------------------------------------------------------------------
   Case Study Banner — .bannerTwo.caseStudyBanner

   style.css carries `.bannerTwo { background-image: none !important; background-color:
   #000 }` inside this exact range, so a banner shows flat black between 400px and
   420px only. The poster element — the same artwork as the CSS background — is shown
   here to fill that gap, rather than overriding the theme's !important.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) and (min-width: 400px) {
    .caseStudyBanner__poster {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }
}


/* ==========================================================================
   3. Reduced motion
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ldv-hlt__rule {
        transition: none;
    }

    /* Milestone hover still recolours, it just arrives instantly. */
    .ldv-mls__item,
    .ldv-mls__number,
    .ldv-mls__disc,
    .ldv-mls__icon {
        transition: none;
    }
}