/* =========================================================================
   CVM Productions - site.css
   Plain hand-written stylesheet (no Tailwind, no preprocessor).
   Mirrors the look-and-feel of the Next.js site in @CVM5/cvm-2.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
@media (max-width: 767px) {
    /* Smooth scroll feels laggy / "stuck" on touch browsers. */
    html { scroll-behavior: auto; }
}
body {
    background: var(--background);
    color: var(--foreground);
    font-family: "Kumbh Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea { font: inherit; color: inherit; }
mark { background: var(--brand); color: #fff; padding: 0 4px; }

/* ---------- Brand variables ---------- */
:root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --brand: #215c83;
    --brand-accent: #2f8cc5;
    --brand-dark: #0f3b54;
    --copper: #c28a67;
    --copper-light: #d8b09a;
    --copper-dark: #6f4d39;
    --nav-h: 48px;
    /* Stable small viewport height — does not jump as browser chrome shows/hides */
    --vvh: 100svh;

    /* Semantic grayscale derived from background/foreground so the whole site
       follows the active theme (incl. light themes). "ink" = text family,
       "surf" = surface/background family. Themes may override --heading,
       --text-color, --surface, --surface-deep directly; otherwise they fall
       back to the background/foreground derivation. */
    --text-color:  var(--foreground);
    --heading:     var(--foreground);
    --surface:     var(--background);
    --surface-deep: color-mix(in oklab, var(--background) 96%, #000);

    --ink-strong:  color-mix(in oklab, var(--text-color) 92%, var(--background));
    --ink:         color-mix(in oklab, var(--text-color) 80%, var(--background));
    --ink-muted:   color-mix(in oklab, var(--text-color) 58%, var(--background));
    --ink-faint:   color-mix(in oklab, var(--text-color) 42%, var(--background));
    --ink-dim:     color-mix(in oklab, var(--text-color) 30%, var(--background));
    --surf-0:      var(--surface);
    --surf-1:      color-mix(in oklab, var(--surface) 92%, var(--foreground));
    --surf-2:      color-mix(in oklab, var(--surface) 86%, var(--foreground));
    --surf-3:      color-mix(in oklab, var(--surface) 80%, var(--foreground));
    --surf-deep:   var(--surface-deep);
    --surf-alt:    color-mix(in oklab, var(--surface) 88%, var(--foreground));

    /* Intentionally INVERTED surfaces: sections the original CVM design renders
       light on the dark theme (e.g. the "Trusted" logo wall, light card grids).
       These mix toward --foreground so they stay light on dark themes and flip
       to dark on light themes, preserving the design's light/dark rhythm.
       --on-invert is the matching readable text color. */
    --surf-invert:    color-mix(in oklab, var(--foreground) 96%, var(--surface));
    --surf-invert-2:  color-mix(in oklab, var(--foreground) 90%, var(--surface));
    --on-invert:      oklch(from var(--surf-invert) clamp(0, (0.62 - l) * 1000, 1) 0 0);
    --ink-on-invert:  color-mix(in oklab, var(--on-invert) 78%, var(--surf-invert));

    /* --on-brand / --on-surface: readable text on the PAGE SURFACE in any
       theme. Auto-contrast: picks black or white depending on whether the
       surface is light or dark, so nav links, dropdowns, headings and any
       text mapped to these tokens stay legible across every theme.
       Yields near-white text on dark surfaces, near-black on light. */
    --on-surface: oklch(from var(--surface) clamp(0, (0.62 - l) * 1000, 1) 0 0);
    --on-brand: var(--on-surface);
    /* Text on a SOLID brand/accent gradient fill (buttons). The brand
       gradient is always saturated/dark enough that white reads. */
    --on-fill: #fff;
    --border-soft: color-mix(in oklab, var(--foreground) 14%, transparent);

    /* Marquee logo colorization + fade. Default: black silhouette. */
    --logo-filter: brightness(0);
    --logo-shadow-filter: brightness(0) blur(10px);
    --marquee-fade: var(--surf-invert);
}

/* ---------- Fonts (Google CDN) ---------- */
/* Loaded via header <link> to keep this file CDN-free; using local fallbacks */

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: "Syne", Arial, Helvetica, sans-serif;
    color: var(--heading);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
h1 {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-weight: 600;
}
h2 { font-size: 2.25rem; line-height: 1.2; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
@media (min-width: 768px) { h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) {
    h1 { font-size: 4.5rem; }
    h2 { font-size: 3.75rem; }
}

p { line-height: 1.6; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.15em; }
.tracking-wide { letter-spacing: 0.05em; }

/* ---------- Layout primitives ---------- */
.container, .row {
    max-width: 80rem;
    margin: 0 auto;
    width: 91.6667%;
}

section {
    position: relative;
    width: 100%;
    padding: 4rem 0;
    overflow-x: hidden;
}
@media (min-width: 768px) { section { padding: 6rem 0; } }
@media (min-width: 1024px) { section { padding: 8rem 0; } }
section.pad-0, section.pt-0 { padding-top: 0; }
section.pb-0 { padding-bottom: 0; }
section.no-pad { padding: 0 !important; }

[data-row] {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 0;
    width: 91.6667%;
}
[data-row] + [data-row] { padding-top: 0; }
[data-row].pb-0 { padding-bottom: 0; }
[data-row].mt-8 { margin-top: 2rem; }

main { overflow-x: hidden; }

/* ---------- Helpers ---------- */
.hidden { display: none !important; }
.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.relative { position: relative; }
.absolute { position: absolute; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.text-white { color: var(--on-brand); }
.text-gray-300 { color: var(--ink); }
.text-gray-400 { color: var(--ink-muted); }
.text-gray-500 { color: var(--ink-faint); }
.text-gray-600 { color: var(--ink-dim); }
.text-gray-900 { color: var(--surf-1); }
.text-brand { color: var(--brand); }
.text-brand-accent { color: var(--brand-accent); }
.bg-black { background: var(--surf-deep); }
.bg-gray-50 { background: var(--surf-invert); color: var(--ink-on-invert); }
.bg-gray-100 { background: var(--surf-invert-2); color: var(--ink-on-invert); }
.bg-gray-900 { background: var(--surf-1); }
.bg-white { background: var(--surf-invert); color: var(--ink-on-invert); }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.font-heading { font-family: "Syne", Arial, sans-serif; }
.font-body { font-family: "Kumbh Sans", Arial, sans-serif; }
.font-nav { font-family: "Syne", Arial, sans-serif; font-weight: 700; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }

/* ---------- Brand utilities (carry-over from globals.css) ---------- */
.h-full-nav { height: calc(100vh - var(--nav-h)); }
.min-h-full-nav { min-height: calc(100vh - var(--nav-h)); }

.cvm-gradient {
    background-image: linear-gradient(135deg, var(--brand) 0%,
        color-mix(in oklab, var(--brand) 70%, white) 50%,
        color-mix(in oklab, var(--brand) 60%, black) 100%);
}
.cvm-gradient-copper {
    background-image: linear-gradient(135deg, var(--copper) 0%,
        color-mix(in oklab, var(--copper) 70%, white) 50%,
        color-mix(in oklab, var(--copper) 55%, black) 100%);
}
.cvm-glass {
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    background: color-mix(in oklab, var(--background) 80%, transparent);
}
.cvm-border {
    border: 1px solid color-mix(in oklab, var(--on-brand) 12%, transparent);
}

/* ---------- Parallelogram clips ---------- */
.clip       { clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%); }
.clip-large { clip-path: polygon(36px 0%, 100% 0%, calc(100% - 36px) 100%, 0% 100%); }
.cvm-clip-para     { clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%); }
.cvm-clip-para-sm  { clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); }
.cvm-clip-para-nav { clip-path: polygon(18px 0%, 100% 0%, calc(100% - 18px) 100%, 0% 100%); }

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2.5rem;
    font-family: "Syne", sans-serif;
    font-weight: 600;
    color: var(--on-fill);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    -webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22),
                0 10px 30px color-mix(in oklab, var(--brand) 50%, transparent);
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 1024px) { .btn { font-size: 1.125rem; } }
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, var(--brand) 0%,
        color-mix(in oklab, var(--brand) 70%, white) 50%,
        color-mix(in oklab, var(--brand) 60%, black) 100%);
    z-index: 0;
}
/* sweep overlay */
.btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 0%;
    background: var(--on-fill);
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 2;
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover::after, .btn.is-hover::after { width: 100%; }
.btn > * { position: relative; z-index: 3; }
.btn .btn-text { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn .btn-arrow {
    display: inline-flex;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover .btn-arrow { transform: translateX(6px); }

.btn--copper::before {
    background-image: linear-gradient(135deg, var(--copper) 0%,
        color-mix(in oklab, var(--copper) 70%, white) 50%,
        color-mix(in oklab, var(--copper) 55%, black) 100%);
}
.btn--ghost::before { background: transparent; }
.btn--ghost { box-shadow: inset 0 0 0 2px currentColor; }

.btn--full { width: 100%; padding: 1rem 2.5rem; }

/* ---- Button style variants (managed in the Site Builder) ---- */
.btn--primary::before {
    background-image: linear-gradient(135deg, var(--brand) 0%,
        color-mix(in oklab, var(--brand) 70%, white) 50%,
        color-mix(in oklab, var(--brand) 60%, black) 100%);
}
.btn--secondary::before {
    background-image: linear-gradient(135deg,
        color-mix(in oklab, var(--brand-accent, var(--brand)) 90%, black) 0%,
        color-mix(in oklab, var(--brand-accent, var(--brand)) 70%, white) 50%,
        color-mix(in oklab, var(--brand-accent, var(--brand)) 60%, black) 100%);
}
.btn--outline {
    color: var(--on-brand);
    box-shadow: inset 0 0 0 2px currentColor;
}
.btn--outline::before { background: transparent; }
.btn--outline::after { background: var(--brand); mix-blend-mode: normal; }
.btn--outline:hover { color: var(--on-fill); }
.btn--text {
    box-shadow: none;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    -webkit-clip-path: none;
    clip-path: none;
}
.btn--text::before { background: transparent; }
.btn--text::after { display: none; }
.btn--text:hover { box-shadow: none; opacity: 0.78; }
.btn--light {
    color: var(--surf-0);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 10px 30px rgba(0,0,0,0.18);
}
.btn--light::before { background: var(--ink-strong); }
.btn--light::after { background: var(--surf-0); mix-blend-mode: normal; }
.btn--light:hover { color: var(--on-fill); }
.btn--dark {
    color: var(--on-fill);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 10px 30px rgba(0,0,0,0.4);
}
.btn--dark::before { background: var(--surf-1); }
.btn--dark::after { background: var(--brand); mix-blend-mode: normal; }

/* ---- Directional arrow hover motion ---- */
.btn:hover .btn-arrow--simple-left,
.btn:hover .btn-arrow--left { transform: translateX(-6px); }
.btn:hover .btn-arrow--up { transform: translateY(-6px); }
.btn:hover .btn-arrow--down { transform: translateY(6px); }
.btn:hover .btn-arrow--up-right { transform: translate(5px, -5px); }
.btn:hover .btn-arrow--up-left { transform: translate(-5px, -5px); }
.btn:hover .btn-arrow--down-right { transform: translate(5px, 5px); }
.btn:hover .btn-arrow--down-left { transform: translate(-5px, 5px); }

/* dancing arrows */
.dancing-arrows { display: inline-flex; align-items: center; gap: 2px; }
.dancing-arrows svg {
    width: 14px;
    height: 14px;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dancing-arrows svg + svg { margin-left: -4px; opacity: 0.5; }
.dancing-arrows svg + svg + svg { opacity: 0.25; }
.btn:hover .dancing-arrows svg:nth-child(1) { transform: translateX(8px); }
.btn:hover .dancing-arrows svg:nth-child(2) { transform: translateX(4px); opacity: 0.8; }
.btn:hover .dancing-arrows svg:nth-child(3) { opacity: 0.5; }

/* ---------- Top Nav (desktop) ---------- */
.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surf-deep);
    border-top: 4px solid var(--surf-deep);
    border-bottom: 4px solid var(--surf-deep);
    height: var(--nav-h);
    display: none;
}
@media (min-width: 768px) { .topnav { display: block; } }
.topnav__inner {
    width: 90%;
    max-width: 80rem;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.topnav__logo img { height: 32px; width: auto; }
.topnav__links { display: flex; align-items: center; gap: 1rem; height: 100%; }

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 140px;
    padding: 0.75rem 1.5rem;
    overflow: hidden;
    font-family: "Syne", Arial, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--surf-deep);
    background: var(--on-brand);
    isolation: isolate;
    -webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
}
/* Copper sheen wipes left-to-right; mix-blend-multiply tints the black
   label to a copper tone underneath. Matches original NavButton.tsx. */
.nav-link__fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background-image: linear-gradient(135deg, var(--copper) 0%,
        color-mix(in oklab, var(--copper) 70%, white) 50%,
        color-mix(in oklab, var(--copper) 55%, black) 100%);
    mix-blend-mode: multiply;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}
.nav-link:hover .nav-link__fill,
.nav-link.is-active .nav-link__fill { width: 100%; }
.nav-link__text {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.nav-link__caret {
    width: 12px; height: 12px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nav-item.has-sub:hover .nav-link__caret { transform: rotate(180deg); }

/* dropdown */
.nav-item { position: relative; }
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--surf-deep);
    border: 2px solid var(--surf-2);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    min-width: 200px;
    padding: 0.5rem 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 60;
}
.nav-item:hover .nav-dropdown,
.nav-item.is-open .nav-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.nav-dropdown a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--on-brand);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s ease;
}
.nav-dropdown a:hover { background: var(--surf-2); }

/* ---------- Mobile Nav (bottom dock) ---------- */
.mobnav {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    background: rgba(8, 12, 18, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    display: block;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* JS sets --mob-vv-shift so the dock stays above Android Chrome's
       bottom address bar. Transform-only = no layout thrash / flicker. */
    transform: translate3d(0, var(--mob-vv-shift, 0px), 0);
    will-change: transform;
}
@media (min-width: 768px) { .mobnav { display: none; } }
.mobnav__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
}
.mobnav__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.35rem;
    background: var(--on-brand);
    color: var(--surf-deep);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    -webkit-clip-path: none;
    clip-path: none;
}
.mobnav__btn .label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.2rem; }
.mobnav__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, var(--copper) 0%,
        color-mix(in oklab, var(--copper) 70%, white) 50%,
        color-mix(in oklab, var(--copper) 55%, black) 100%);
    mix-blend-mode: multiply;
    -webkit-mask: linear-gradient(to right, var(--surf-deep) var(--wipe, 0%), transparent var(--wipe, 0%));
    mask: linear-gradient(to right, var(--surf-deep) var(--wipe, 0%), transparent var(--wipe, 0%));
    transition: --wipe 0.25s ease;
}
.mobnav__btn:hover { --wipe: 100%; }

/* mobile sheet menu */
.mobile-menu-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mobile-sheet {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    z-index: 50;
    transform: translateY(calc(100% + 1rem));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.36s ease,
        visibility 0.36s;
}
.mobile-sheet.is-open {
    transform: translate3d(0, var(--mob-vv-shift, 0px), 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (min-width: 768px) { .mobile-sheet, .mobile-menu-backdrop { display: none; } }
.mobile-sheet__panel {
    background: var(--surf-deep);
    border: 2px solid var(--surf-2);
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    padding: 0.5rem 0;
}
.mobile-sheet__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--surf-2);
}
.mobile-sheet__head .label { font-size: 0.875rem; font-weight: 500; color: var(--on-brand); }
.mobile-sheet__close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--on-brand); border-radius: 4px;
    transition: background 0.2s ease;
}
.mobile-sheet__close:hover { background: var(--surf-2); }

.mobile-sheet__nav { padding: 0.5rem 0; }
.mobile-sheet__nav > div > a,
.mobile-sheet__nav > div > button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0.75rem 1rem;
    color: var(--on-brand); font-size: 0.875rem; font-weight: 500;
    text-align: left;
    transition: background 0.2s ease;
}
.mobile-sheet__nav > div > a:hover,
.mobile-sheet__nav > div > button:hover { background: var(--surf-2); }
.mobile-sheet__sub { display: none; }
.mobile-sheet__sub.is-open { display: block; }
.mobile-sheet__sub a {
    display: block; padding: 0.75rem 1rem 0.75rem 2rem;
    color: var(--on-brand); font-size: 0.875rem;
    transition: background 0.2s ease;
}
.mobile-sheet__sub a:hover { background: var(--surf-2); }
.mobile-sheet__caret { transition: transform 0.2s ease; }
.mobile-sheet__nav > div.is-open .mobile-sheet__caret { transform: rotate(180deg); }

/* ---------- Hero with video ---------- */
.hero-video {
    position: relative;
    background-color: var(--surf-1);
    height: min(72vh, calc(100vh - var(--nav-h)));
    overflow: hidden;
    z-index: 1;
    --hero-blur: 22px;
    --hero-scale: 1.06;
    --hero-shade-opacity: 0;
    --hero-black-opacity: 0.28;
    --hero-buttons-opacity: 0;
    --hero-logo-opacity: 0;
    --hero-text-opacity: 0;
    --hero-text-y: 6px;
    --hero-logo-size: clamp(104px, 12vw, 136px);
    --hero-copy-left: clamp(2.25rem, 4.5vw, 4.5rem);
    --hero-copy-top: clamp(5rem, 18vh, 9rem);
    --hero-logo-bottom: clamp(6rem, 14vh, 10rem);
    transition: height 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero-video.is-expanded {
    height: calc(100vh - var(--nav-h));
    --hero-blur: 0px;
    --hero-scale: 1;
    --hero-shade-opacity: 1;
    --hero-black-opacity: 0;
    --hero-buttons-opacity: 1;
    --hero-logo-opacity: 1;
    --hero-text-opacity: 1;
    --hero-text-y: 0px;
}
/* No-JS fallback: without scripts the .is-ready class never appears, so we
   reveal the hero at full height with no transition so the page is usable. */
.no-js .hero-video {
    height: calc(100vh - var(--nav-h));
    --hero-blur: 0px;
    --hero-scale: 1;
    --hero-shade-opacity: 1;
    --hero-black-opacity: 0;
    --hero-buttons-opacity: 1;
    --hero-logo-opacity: 1;
    --hero-text-opacity: 1;
    --hero-text-y: 0px;
    --hero-logo-transform: translate(-50%, -50%) translate(0px, 0px) scale(1);
}
.hero-video__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(var(--hero-blur));
    transform: scale(var(--hero-scale));
    transition:
        filter 1.8s cubic-bezier(0.65, 0, 0.35, 1),
        transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: filter, transform;
}
.hero-video__shade,
.hero-video__black {
    position: absolute; inset: 0;
    transition: opacity 1.2s ease;
}
/* Bottom darkening stays only while expanded - it's there so the CTAs are
   readable over bright video frames. During the compact phase we don't need
   it because the buttons are hidden. */
.hero-video__shade {
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.5), transparent);
    opacity: var(--hero-shade-opacity);
}
.hero-video__black {
    background: var(--surf-deep);
    opacity: var(--hero-black-opacity);
}

/* Buttons centered at the bottom of the hero, matching live cvmproductions.com.
   On mobile they stack vertically; from tablet up they sit in a row. */
.hero-video__buttons {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    filter: drop-shadow(0 8px 25px rgba(0,0,0,0.7));
    opacity: var(--hero-buttons-opacity);
}
@media (min-width: 640px) {
    .hero-video__buttons { flex-direction: row; gap: 1rem; bottom: 2.5rem; }
}

/* ---------- Cinematic hero intro ----------
   JS maps scroll progress to the logo scale/position and text opacity. */
.hero-intro {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: var(--hero-logo-opacity);
    transition: opacity 0.7s ease;
    will-change: opacity;
}

/* Logo is anchored at top:50%/left:50% of .hero-intro (which fills the
   hero). Static percentages let the browser auto-track the hero's vertical
   center every frame as the hero height transitions during expansion.

   The CENTERED transform here is the default. The PARKED transform is set
   inline by JS in pixel values when .is-glided is added (see site.js).
   Using JS-computed pixels guarantees a clean two-pixel-value interpolation
   that every browser handles smoothly - no calc/clamp/vw mix to choke on. */
.hero-intro__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--hero-logo-size);
    height: auto;
    transform: var(--hero-logo-transform, translate(-50%, -50%) translate(0px, 0px) scale(2.4));
    transform-origin: center center;
    opacity: var(--hero-logo-opacity);
    will-change: transform, opacity;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.55));
    transition:
        opacity 1s ease,
        top 2.6s cubic-bezier(0.65, 0, 0.35, 1),
        bottom 2.6s cubic-bezier(0.65, 0, 0.35, 1),
        left 2.6s cubic-bezier(0.65, 0, 0.35, 1),
        transform 2.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero-video.is-glided .hero-intro__logo {
    top: auto;
    bottom: var(--hero-logo-bottom);
    left: var(--hero-copy-left);
    transform: translate(0, 0) scale(1);
}

/* Text sits to the right of the parked logo, vertically centered with it,
   forming a single bottom-left lockup that mirrors the live CVM site. */
.hero-intro__text {
    position: absolute;
    bottom: var(--hero-logo-bottom);
    left: calc(var(--hero-copy-left) + var(--hero-logo-size) + clamp(1rem, 2vw, 2rem));
    color: var(--on-brand);
    text-shadow: 0 2px 16px rgba(0,0,0,0.55);
    opacity: var(--hero-text-opacity);
    transform: translateY(var(--hero-text-y));
    will-change: transform, opacity;
    max-width: min(70vw, 720px);
    text-align: left;
    text-transform: uppercase;
    transition:
        opacity 1.2s ease 1.75s,
        transform 1.2s ease 1.75s;
}
.hero-intro__title {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading, 'Saira Condensed', system-ui, sans-serif);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.01em;
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    text-transform: uppercase;
    /* Always over a hero image -> force readable light text + shadow. */
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.hero-intro__sub {
    margin: 0;
    font-size: clamp(0.85rem, 1.05vw, 1rem);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.3;
}

/* Phone hero: absolute lockup is replaced in the mobile redo block below. */
@media (max-width: 767px) {
    .hero-intro__title {
        font-size: clamp(1.55rem, 7vw, 2.1rem);
    }
}

/* ---------- Reveal animations (IntersectionObserver-driven) ----------
   Easing curve `--reveal-ease` is intentionally pronounced so the on-scroll
   entry is clearly visible. Each reveal variant uses a slightly different
   axis or distance so cascading elements don't all move identically. */
:root {
    --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --reveal-dur: 0.85s;
}

.reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity var(--reveal-dur) var(--reveal-ease),
                transform var(--reveal-dur) var(--reveal-ease);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-up {
    opacity: 0; transform: translateY(70px);
    transition: opacity var(--reveal-dur) var(--reveal-ease),
                transform var(--reveal-dur) var(--reveal-ease);
    will-change: opacity, transform;
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0; transform: translateX(-50px);
    transition: opacity var(--reveal-dur) var(--reveal-ease),
                transform var(--reveal-dur) var(--reveal-ease);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0; transform: translateX(50px);
    transition: opacity var(--reveal-dur) var(--reveal-ease),
                transform var(--reveal-dur) var(--reveal-ease);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Zoom-in reveal: subtle scale + fade (good for images / cards). */
.reveal-zoom {
    opacity: 0; transform: scale(0.92);
    transition: opacity var(--reveal-dur) var(--reveal-ease),
                transform var(--reveal-dur) var(--reveal-ease);
}
.reveal-zoom.is-visible { opacity: 1; transform: scale(1); }

/* slide-up reveal: text rises from inside a clipping mask. The wrapping
   element stays in the document flow with overflow:hidden so the inner
   span can translate from below the visible box up to its rest position. */
.slide-up {
    display: block;
    overflow: visible;
}
.slide-up > * {
    display: block;
    opacity: 0;
    transform: translateY(40%);
    transition: transform 1s var(--reveal-ease), opacity 1s var(--reveal-ease);
    will-change: transform, opacity;
}
.slide-up.is-visible > * { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-8 { transition-delay: 0.8s; }
.delay-10 { transition-delay: 1s; }

/* ---------- Cards (icon style) ---------- */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Extra horizontal gap so the parallelogram clip-path (20px skew) doesn't
       make neighbouring cards look smooshed / overlapping. */
    gap: 2.25rem 2.75rem;
}
@media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Legacy: keep flush available but never collapse the skew into a collision. */
.card-grid.flush { gap: 1.5rem 2.25rem; }

.card {
    position: relative;
    border: 1px solid var(--surf-2);
    -webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    background: var(--surf-deep);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    text-align: left;
    transition: transform 0.3s ease;
}
.card.center { text-align: center; }

.card__body { padding: 3rem; }
.card__icon {
    margin: 0 auto 2rem;
    max-height: 40px; width: auto;
    /* Force every icon (regardless of source fill colour) to pure white
       so dark+light SVGs both render legibly on the dark card. */
    filter: brightness(0) invert(1);
}
/* Cards always sit on a dark surface, so title/body stay light even when the
   surrounding section uses invert (light) appearance. */
.card__title { font-size: 1.25rem; margin-bottom: 1rem; padding-right: 1rem; color: #fff; }
.card__desc { color: rgba(255, 255, 255, 0.78); line-height: 1.6; font-size: 0.95rem; }
.card__desc ul { padding-left: 1.25rem; list-style: disc; }
.card__desc li { margin-bottom: 0.35rem; }
.card__desc li:last-child { margin-bottom: 0; }
.section-card-grid.text-dark .card__title,
.section-card-grid.bg-gray-50 .card__title,
.section-card-grid.bg-white .card__title { color: #fff; }
.section-card-grid.text-dark .card__desc,
.section-card-grid.bg-gray-50 .card__desc,
.section-card-grid.bg-white .card__desc { color: rgba(255, 255, 255, 0.78); }

.card__cta {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 2rem;
    color: var(--on-brand);
    font-weight: 600;
    overflow: hidden;
}
.card__cta::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background-image: linear-gradient(135deg, var(--brand) 0%,
        color-mix(in oklab, var(--brand) 70%, white) 50%,
        color-mix(in oklab, var(--brand) 60%, black) 100%);
    opacity: 0.95;
    transition: opacity 0.3s ease;
}
.card:hover .card__cta::before { opacity: 1; }
.card__cta::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
    background: var(--on-brand); mix-blend-mode: difference; pointer-events: none;
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}
.card:hover .card__cta::after { width: 100%; }
.card__cta > * { position: relative; z-index: 2; }

a.card-link, button.card-link { display: block; height: 100%; color: inherit; }

/* ---------- About section ---------- */
.about {
    position: relative;
}
.about__bg {
    position: absolute; inset: 0;
    object-fit: cover;
    opacity: 0.2;
    z-index: -1;
}
.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .about__grid { grid-template-columns: 1fr 1fr; }
}
.about__panel {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-clip-path: polygon(36px 0%, 100% 0%, calc(100% - 36px) 100%, 0% 100%);
    clip-path: polygon(36px 0%, 100% 0%, calc(100% - 36px) 100%, 0% 100%);
}
.about__panel-body {
    background: rgba(0,0,0,0.5);
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.about__eyebrow {
    font-family: "Syne", Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--ink-muted);
    margin-bottom: 1.25rem;
    line-height: 1;
}
.about__heading {
    font-size: 2.25rem;
    color: var(--on-brand);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.01em;
    max-width: 14ch;
}
@media (min-width: 1024px) { .about__heading { font-size: 3rem; } }
@media (min-width: 1280px) { .about__heading { font-size: 3.75rem; } }
.about__copy { color: var(--ink-muted); font-size: 1.125rem; line-height: 1.6; }
.about__copy p + p { margin-top: 1rem; }

.about__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
.about__stat {
    background: rgba(0,0,0,0.5);
    padding: 2rem 4rem;
}
.about__stat-value { font-size: 1.875rem; font-weight: 700; color: var(--ink); margin-bottom: 0.25rem; }
@media (min-width: 1024px) { .about__stat-value { font-size: 2.25rem; } }
.about__stat-label { font-size: 0.75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.1em; }

.about__image {
    -webkit-clip-path: polygon(36px 0%, 100% 0%, calc(100% - 36px) 100%, 0% 100%);
    clip-path: polygon(36px 0%, 100% 0%, calc(100% - 36px) 100%, 0% 100%);
    overflow: hidden;
    position: relative;
}
.about__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.about__image:hover img { transform: scale(1.05); }

/* ---------- Services section ---------- */
.services-headline {
    display: inline-block;
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--on-brand);
    font-weight: 600;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .services-headline { font-size: 3rem; } }
@media (min-width: 1280px) { .services-headline { font-size: 3.75rem; } }

/* ---------- Reels grid ---------- */
.reels {
    background: var(--surf-1);
}
.reels__head {
    display: flex; flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .reels__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 3rem; }
}
.reels__title {
    font-size: 2.25rem; line-height: 1; color: var(--on-brand); font-weight: 600;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .reels__title { font-size: 3rem; } }
.reels__intro { max-width: 60ch; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.55; }
@media (min-width: 768px) {
    .reels__head .reels__intro { flex: 0 1 42rem; align-self: flex-end; padding-bottom: 0.5rem; }
}
.reels__view-all {
    display: flex; justify-content: flex-end;
    margin: 0 0 1rem;
}
.reels__view-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--brand-accent);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease, gap 0.2s ease;
}
.reels__view-link:hover { color: var(--on-brand); gap: 0.6rem; }

/* Toggle button for hiding the hero overlay (logo/text/CTAs/shade).
   Uses the same sheared "parallelogram" clip as the rest of the site's
   buttons. Eye icon is shown at rest; the label slides in on hover/focus. */
.hero-video__toggle {
    position: absolute;
    bottom: clamp(1rem, 3vh, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 36px;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-heading, "Syne", Arial, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease;
}
.hero-video.is-ready .hero-video__toggle {
    opacity: 1;
    transform: translateY(0);
}
.hero-video__toggle:hover,
.hero-video__toggle:focus-visible {
    color: var(--on-brand);
}
.hero-video__toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
    border-radius: 4px;
}
.hero-video__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hero-video__toggle-icon[hidden] { display: none; }
.hero-video__toggle-label {
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.hero-video__toggle:hover .hero-video__toggle-label,
.hero-video__toggle:focus-visible .hero-video__toggle-label {
    opacity: 1;
}

/* Clean mode: hide every overlay so the video shows on its own. */
.hero-video.is-clean .hero-intro,
.hero-video.is-clean .hero-intro__logo,
.hero-video.is-clean .hero-intro__text,
.hero-video.is-clean .hero-video__buttons,
.hero-video.is-clean .hero-video__shade,
.hero-video.is-clean .hero-video__black {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s !important;
}

/* Wrapper allows the prev/next nav buttons to overlay the rail edges. */
.reels__rail-wrap {
    position: relative;
    --reel-nav-top: clamp(3.8rem, 8.2vw, 6.2rem);
}
.reels__nav {
    position: absolute;
    top: var(--reel-nav-top);
    transform: translateY(-50%);
    z-index: 5;
    width: clamp(34px, 3.7vw, 54px);
    height: clamp(56px, 6vw, 84px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    filter:
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45))
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
.reels__nav svg {
    width: 100%;
    height: 100%;
    stroke-width: 4.5;
    transition: stroke-width 0.2s ease;
}
.reels__nav:hover {
    color: var(--on-brand);
    transform: translateY(-50%) scale(1.08);
}
.reels__nav:hover svg {
    stroke-width: 5.4;
}
.reels__nav:disabled { opacity: 0.25; cursor: default; transform: translateY(-50%); }
.reels__nav--prev { left: -3.25rem; }
.reels__nav--next { right: -3.25rem; }
@media (min-width: 1024px) {
    .reels__nav--prev { left: -5.75rem; }
    .reels__nav--next { right: -5.75rem; }
}

/* Horizontal rail of thumbnails (matches live cvmproductions.com).
   Scrolls horizontally, snaps to cards, scrollbar hidden. */
.reels__rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0 1.5rem;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.reels__rail::-webkit-scrollbar { display: none; }
.reels__rail { scrollbar-width: none; }

.reel {
    position: relative;
    flex: 0 0 calc(100% - 2rem);
    max-width: 320px;
    cursor: pointer;
    background: transparent;
    text-align: left;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
@media (min-width: 640px) { .reel { flex-basis: calc(50% - 0.625rem); max-width: 360px; } }
@media (min-width: 1024px) { .reel { flex-basis: calc(25% - 1rem); max-width: none; } }

.reel__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surf-deep);
    border-radius: 4px;
}
.reel__thumb img, .reel__thumb iframe {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}
.reel:hover .reel__thumb img { transform: scale(1.05); }

.reel__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.3s ease, opacity 0.2s ease;
    opacity: 0;
}
.reel:hover .reel__play {
    background: var(--brand);
    border-color: var(--on-brand);
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
}
.reel__caption {
    color: var(--on-brand);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0 0.1rem;
}

/* reels modal */
.reel-modal {
    position: fixed; inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.92);
    display: none;
    align-items: center; justify-content: center;
    padding: 2rem;
}
.reel-modal.is-open { display: flex; }
.reel-modal__inner {
    width: 100%; max-width: 1100px;
    aspect-ratio: 16 / 9;
    position: relative;
}
.reel-modal__inner iframe {
    width: 100%; height: 100%;
    border: 0;
}
.reel-modal__close {
    position: absolute;
    top: -3rem; right: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--on-brand);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.reel-modal__close:hover { background: rgba(255,255,255,0.25); }

/* ---------- Marquee (logos / text) ----------
   Faithfully replicates the original Marquee component from
   cvm-2/src/components/Marquee.tsx + Testimonials.tsx:

     <div class="cvm-marquee">                          <- overflow:hidden wrapper
       <div class="cvm-marquee__track">                  <- flex flex-nowrap, animated
         <span class="cvm-marquee__group">               <- block, marginRight: 240
           <div class="cvm-marquee__row">                <- flex gap-60 (240px)
             <div class="client-logo-wrap">              <- h-20 w-20 + drop-shadow
               <img class="client-logo" />               <- block w-20 h-20 (80x80)
             </div>
             ... more logos ...
           </div>
         </span>
         ... 4 total duplicate groups ...
       </div>
       <div class="cvm-marquee__fade cvm-marquee__fade--left"></div>
       <div class="cvm-marquee__fade cvm-marquee__fade--right"></div>
     </div>

   With 4 identical duplicate groups, animating translateX from 0 to -25%
   = one group's width = one full stride. The seam lands on a duplicate
   so the loop is visually seamless. */
.cvm-marquee {
    --duration: 16s;
    --gap: 240px;       /* gap-60 + marginRight: 240 from the original */
    --fade-w: 96px;     /* w-24 from the original gradient overlays */
    --fade-color: var(--surf-1); /* matches the trusted section bg (gray-50) */
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    margin: 4rem 0;     /* my-16 from the original */
    padding: 42px 0 120px;
}
@supports not (overflow: clip) {
    .cvm-marquee { overflow-x: hidden; }
}
.cvm-marquee__track {
    display: inline-flex;
    flex-wrap: nowrap;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.cvm-marquee__group {
    display: block;
    flex-shrink: 0;
    margin-right: var(--gap);   /* marginRight: 240 from the original */
}
.cvm-marquee__row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);            /* gap-60 from the original */
}
.client-logo-wrap {
    height: 80px;
    width: 80px;
    flex-shrink: 0;
    --logo-scale: 0.82;
    position: relative;
}
.client-logo-shadow {
    position: absolute;
    left: 0;
    top: 18px;
    z-index: 0;
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: var(--logo-shadow-filter);
    opacity: 0.14;
    transform: scale(var(--logo-scale));
    transform-origin: center;
    pointer-events: none;
}
.client-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    transform: scale(var(--logo-scale));
    transform-origin: center center;
    opacity: var(--logo-opacity, 0.72);
    filter: var(--logo-filter-visible, none);
    will-change: transform, opacity;
}
/* Edge fade gradients mimic the original's two absolute w-24 divs that
   bleed gray-50 into transparent at each edge. */
.cvm-marquee__fade {
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--fade-w);
    pointer-events: none;
    z-index: 2;
}
.cvm-marquee__fade--left {
    left: 0;
    background: linear-gradient(to right,
        var(--marquee-fade) 0%,
        var(--marquee-fade) 30%,
        transparent 100%);
}
.cvm-marquee__fade--right {
    right: 0;
    background: linear-gradient(to left,
        var(--marquee-fade) 0%,
        var(--marquee-fade) 30%,
        transparent 100%);
}
@media (max-width: 639px) {
    .cvm-marquee {
        --duration: 12s;
        --gap: 120px;
        --fade-w: 48px;
        padding: 32px 0 92px;
    }
}

/* Trusted-By section uses a light background with copper-tinted logos and
   blue stat numbers, matching the live cvmproductions.com layout. */
/* gray-50 from the original Tailwind config so .cvm-marquee__fade gradients
   blend perfectly into the section. */
.trusted,
.testimonials { background: var(--surf-invert); color: var(--ink-on-invert); }
.testimonials { padding: 4rem 0 2.5rem; }
.testimonials + .trusted { padding-top: 1.5rem; }
.testimonial-voices__empty {
    text-align: center;
    color: color-mix(in oklab, var(--on-invert) 55%, transparent);
}
.trusted__heading {
    font-family: "Syne", Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--on-invert);
    line-height: 1.1;
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .trusted__heading { font-size: 2rem; } }
.trusted__intro {
    color: var(--ink-on-invert);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 42rem;
    margin: 0 auto;
}
.trusted__logos { margin-top: 3.5rem; }
/* Trusted-section marquee uses the default 80x80 logo sizing and 4rem
   vertical margin from the original - no overrides needed. */
.trusted__stats-row {
    border-top: 1px solid color-mix(in oklab, var(--on-invert) 12%, transparent);
    padding-top: 2.5rem;
    margin-top: 1.5rem;
}
.trusted__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding-bottom: 1rem;
}
.trusted__cta-text {
    color: var(--ink-on-invert);
    font-size: 0.95rem;
}

/* ---------- Customer Voices quote slider ---------- */
.testimonial-voices { padding-top: 1rem; }
.testimonial-voices__heading {
    font-family: "Syne", Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--on-invert);
    line-height: 1.15;
    margin: 0 auto 0.5rem;
    max-width: 18ch;
}
.testimonial-voices__line { display: block; }
.testimonial-voices__icon {
    display: flex;
    justify-content: center;
    margin: 0 0 1.5rem;
    color: color-mix(in oklab, var(--on-invert) 22%, transparent);
}
.testimonial-slider { position: relative; }
.testimonial-slider__viewport {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 3.25rem 1rem;
}
.testimonial-slider__track { position: relative; overflow: hidden; }
.testimonial-slide {
    margin: 0;
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    padding: 0 0.5rem;
}
.testimonial-slide[hidden] { display: none !important; }
.testimonial-slide.is-active {
    display: block;
    animation: testimonial-in 420ms ease both;
}
@keyframes testimonial-in {
    from { opacity: 0; transform: translateX(1.25rem); }
    to { opacity: 1; transform: translateX(0); }
}
.testimonial-slide.is-active.is-reverse {
    animation-name: testimonial-in-reverse;
}
@keyframes testimonial-in-reverse {
    from { opacity: 0; transform: translateX(-1.25rem); }
    to { opacity: 1; transform: translateX(0); }
}
.testimonial-slide__author {
    font-family: "Syne", Arial, sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--on-invert);
    line-height: 1.2;
}
.testimonial-slide__role {
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0.45rem 0 1.25rem;
}
.testimonial-slide__quote {
    margin: 0;
    color: color-mix(in oklab, var(--on-invert) 78%, transparent);
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.55;
    font-weight: 400;
}
.testimonial-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #4b5563;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, color 0.25s ease;
}
.testimonial-slider__nav:hover {
    color: #111827;
    transform: translateY(-50%) scale(1.06);
}
.testimonial-slider__nav--prev { left: 0; }
.testimonial-slider__nav--next { right: 0; }
.testimonial-slider__progress {
    max-width: 18rem;
    margin: 1.25rem auto 0;
}
.testimonial-slider__bar {
    height: 3px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--on-invert) 12%, transparent);
    overflow: hidden;
}
.testimonial-slider__fill {
    height: 100%;
    background: var(--brand);
    border-radius: inherit;
    transition: width 0.45s ease;
}
.testimonial-slider__count {
    display: flex;
    justify-content: space-between;
    margin-top: 0.45rem;
    font-size: 0.82rem;
    color: color-mix(in oklab, var(--on-invert) 45%, transparent);
}
@media (max-width: 639px) {
    .testimonial-slider__viewport { padding: 0 2.6rem 1rem; }
    .testimonial-slider__nav { width: 40px; height: 40px; }
}

/* ---------- Stats row ---------- */
.stats-row {
    display: grid; gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat {
    text-align: center;
    color: var(--surf-2);
}
.stat__value {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--brand);
    line-height: 1;
}
.stat__suffix {
    display: inline-block;
    animation: stat-suffix-drop 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity, filter;
}
@keyframes stat-suffix-drop {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(-0.55em) scale(1.12);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}
@media (min-width: 1024px) { .stat__value { font-size: 3.5rem; } }
.stat__title {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-dim);
    margin-top: 0.5rem;
}
/* Trusted section is intentionally inverted (light) — use on-invert ink. */
.trusted .stat { color: var(--ink-on-invert); }
.trusted .stat__title {
    color: color-mix(in oklab, var(--on-invert) 55%, transparent);
}

/* ---------- Forms (parallelogram input) ---------- */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }

.form-field { display: block; }
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.cvm-para-field {
    transform: skewX(-21deg);
    border: 1.25px solid color-mix(in oklab, var(--brand) 65%, var(--ink));
    background: var(--surf-1);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cvm-para-field:focus-within {
    border-color: color-mix(in oklab, var(--brand) 80%, white);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 20%, transparent);
}
.cvm-para-field-inner {
    transform: skewX(21deg);
    display: flex;
    align-items: center;
}
.cvm-input {
    width: 100%;
    background: transparent;
    color: var(--on-brand);
    border: 0;
    padding: 0.75rem 1rem;
    outline: none;
}
.cvm-input::placeholder { color: var(--ink-muted); }

.form-message {
    width: 100%;
    background: var(--surf-1);
    color: var(--on-brand);
    border: 1.25px solid color-mix(in oklab, var(--brand) 65%, var(--ink));
    padding: 0.75rem 1rem;
    min-height: 160px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-message:focus {
    border-color: color-mix(in oklab, var(--brand) 80%, white);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 20%, transparent);
}

.form-status { text-align: center; font-weight: 500; margin-top: 0.5rem; }
.form-status.is-success { color: #22c55e; }
.form-status.is-error { color: #ef4444; }

/* ---------- CMS section ports ---------- */
.section-intro {
    max-width: 48rem;
    margin: 1rem auto 0;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.7;
}
.text-dark .section-intro { color: var(--ink-dim); }
.section-card-grid.bg-gray-900 { background: var(--surf-1); }
.section-card-grid.bg-gray-50,
.section-card-grid.bg-white { background: var(--surf-invert); color: var(--ink-on-invert); }
.section-card-grid.bg-black,
.section-card-grid.bg-dark-gray { background: var(--surf-deep); }

.dropdowns-section {
    background: var(--surf-deep);
    color: var(--on-brand);
}
.dropdowns-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .dropdowns-layout.has-side { grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); }
}
.dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dropdown-item {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}
.dropdown-item__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--on-brand);
    background: transparent;
    border: 0;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-family: "Syne", Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: left;
}
.dropdown-item__toggle svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.dropdown-item.is-open .dropdown-item__toggle svg { transform: rotate(180deg); }
.dropdown-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
}
.dropdown-item.is-open .dropdown-item__panel { grid-template-rows: 1fr; }
.dropdown-item__body {
    overflow: hidden;
    color: var(--ink);
    line-height: 1.65;
}
.dropdown-item__body > * {
    padding: 0 1.5rem 1.25rem;
}
.interactive-image {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.interactive-image img {
    display: block;
    width: 100%;
    height: auto;
}
.interactive-image__hotspot {
    position: absolute;
    border: 1px solid rgba(47,140,197,0.65);
    background: rgba(47,140,197,0.18);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.interactive-image__hotspot:hover {
    border-color: rgba(194,138,103,0.9);
    background: rgba(194,138,103,0.28);
}
.dropdown-side-text {
    color: var(--ink);
    line-height: 1.7;
}

.general-content {
    position: relative;
    overflow: hidden;
    background: var(--surf-deep);
    color: var(--ink);
}
.general-content.bg-white,
.general-content.bg-light-gray { background: var(--surf-invert); color: var(--ink-on-invert); }
.general-content.bg-brand-gradient { background: linear-gradient(135deg, var(--brand-dark), var(--surf-deep)); }
.general-content__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}
.general-content__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 900px) {
    .general-content__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .general-content.gc-image-right .general-content__copy { order: 1; }
    .general-content.gc-image-right .general-content__media { order: 2; }
}
.general-content__subtitle {
    color: var(--brand-accent);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.general-content__text {
    line-height: 1.7;
    margin-top: 1rem;
}
.general-content__media img,
.general-content__gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -20px rgba(0,0,0,0.7);
}
.general-content__grid--diagram {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: stretch;
}
@media (min-width: 900px) {
    .general-content__grid--diagram {
        grid-template-columns: 1fr;
    }
    .general-content__grid--diagram .general-content__media {
        order: 2;
    }
}
.general-content__media--diagram {
    margin: 0;
    width: 100%;
    max-width: none;
}
.general-content__media--diagram img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border-radius: 0.5rem;
    background: #fff;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.65);
}
.general-content.gc-media-diagram .general-content__bg {
    opacity: 0.18;
}
.general-content__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.general-content__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* Equipment / Odyssey floor plan — full-width readable schematic */
.equipment-floorplan {
    margin-top: 3rem;
    padding: 2.5rem 0 3.5rem;
    background: var(--surf-deep);
}
.equipment-floorplan__head {
    text-align: center;
    margin-bottom: 1.25rem;
}
.equipment-floorplan__head h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.equipment-floorplan__frame {
    margin: 0 auto;
    max-width: 1120px;
    background: #fff;
    border-radius: 0.5rem;
    padding: clamp(0.85rem, 2.2vw, 1.75rem);
    box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.75);
}
.equipment-floorplan__frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--surf-deep); color: var(--ink); padding-top: 2rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .site-footer { padding-bottom: 3rem; } }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-grid h4 { font-size: 1.25rem; margin-bottom: 1rem; }
.footer-grid h5 {
    color: var(--ink-muted); font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.1em; margin-bottom: 0.75rem;
    font-family: "Syne", sans-serif;
}
.footer-grid ul li { margin-bottom: 0.5rem; }
.footer-grid a { color: var(--ink); transition: color 0.4s ease; }
.footer-grid a:hover { color: var(--on-brand); }
.footer-grid p { font-size: 0.875rem; line-height: 1.6; }
.footer-bottom {
    border-top: 1px solid var(--surf-2);
    padding-top: 2rem;
    margin-top: 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--ink-muted);
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; } }

.footer-subscribe {
    display: flex;
    cursor: not-allowed;
}
.footer-subscribe .cvm-para-field { flex: 1; opacity: 0.5; }
.footer-subscribe .btn { opacity: 0.5; pointer-events: none; }

/* ---------- Page title section ---------- */
.page-title {
    position: relative;
    overflow: hidden;
    background: var(--surf-deep);
}
.page-title.is-bg {
    min-height: 60vh;
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .page-title.is-bg { min-height: 70vh; } }
.page-title__bg {
    position: absolute; inset: 0;
    object-fit: cover;
    z-index: 0;
}
.page-title__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}
.page-title__content {
    position: relative; z-index: 2;
    width: 100%;
}
.page-title__inner {
    max-width: 56rem;
    margin: 0 auto;
    text-align: left;
}
.page-title__inner.center { text-align: center; align-items: center; }
.page-title__sub {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 1rem;
}
.page-title__title { color: var(--on-brand); margin-bottom: 1.5rem; }
.page-title__desc {
    color: var(--on-brand);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 42rem;
}

/* ---------- Equipment page ---------- */
.equipment-controls {
    background: var(--surf-2);
    position: sticky;
    top: var(--nav-h);
    z-index: 40;
    border-top: 1px solid var(--surf-3);
    border-bottom: 1px solid var(--surf-3);
}
.equipment-controls__inner {
    max-width: 80rem;
    margin: 0 auto;
    width: 91.6667%;
    padding: 1rem 0;
}
.equipment-controls__row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}
@media (min-width: 768px) {
    .equipment-controls__row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.equipment-search {
    background: rgba(0,0,0,0.4);
    color: var(--on-brand);
    border: 1px solid var(--surf-2);
    padding: 0 1rem;
    height: 42px;
    flex: 1;
    -webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    outline: none;
    min-width: 200px;
}
.equipment-search::placeholder { color: var(--ink-muted); }
.equipment-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.equipment-chip {
    height: 42px;
    width: auto;
    min-width: 96px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: 1px solid var(--surf-2);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
    background: rgba(0,0,0,0.4);
    -webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    transition: background 0.2s ease, color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.equipment-chip:hover { background: rgba(0,0,0,0.6); }
.equipment-chip.is-active {
    background-image: linear-gradient(135deg, var(--copper) 0%,
        color-mix(in oklab, var(--copper) 70%, white) 50%,
        color-mix(in oklab, var(--copper) 55%, black) 100%);
    color: var(--surf-1);
}
.equipment-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.equipment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: var(--on-brand);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.equipment-action:hover {
    background: rgba(47,140,197,0.25);
    border-color: rgba(47,140,197,0.7);
}
.equipment-action--icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
}
.equipment-action--icon svg {
    width: 20px;
    height: 20px;
    display: block;
}
.equipment-action[disabled],
.equipment-action.is-busy {
    opacity: 0.55;
    cursor: progress;
}
.view-toggle {
    position: relative;
    width: 90px;
    height: 42px;
    border: 1px solid var(--surf-2);
    background: rgba(0,0,0,0.4);
    -webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    display: flex;
    cursor: pointer;
}
.view-toggle__pill {
    position: absolute;
    height: 100%;
    width: 55px;
    background-image: linear-gradient(135deg, var(--brand) 0%,
        color-mix(in oklab, var(--brand) 70%, white) 50%,
        color-mix(in oklab, var(--brand) 60%, black) 100%);
    -webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
    transition: transform 0.3s ease;
    transform: translateX(0);
}
.view-toggle.is-list .view-toggle__pill { transform: translateX(35px); }
.view-toggle__icon {
    position: relative;
    width: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--on-brand);
    z-index: 1;
}
/* The clip-path skews the box, so the geometric center of each half sits left
   of the visible center. Nudge each icon inward to line up with the slanted
   shape (and the sliding pill). */
.view-toggle__pill + .view-toggle__icon { padding-left: 12px; }
.view-toggle__icon:last-child { padding-right: 12px; }
.icon-btn {
    color: var(--on-brand);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.2s ease;
}
.icon-btn:hover { color: var(--ink); }

.equipment-section + .equipment-section { margin-top: 1rem; }

.eq-card {
    background: var(--surf-1);
    border: 1px solid var(--surf-2);
    padding: 1.5rem;
}
.eq-card h3 { color: var(--on-brand); font-size: 1.125rem; margin-bottom: 0.75rem; font-weight: 700; }
.eq-card ul { font-size: 0.875rem; color: var(--ink); }
.eq-card li {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.125rem 0;
}
.eq-card li::before { content: "•"; color: var(--ink-faint); }
.eq-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .eq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eq-grid { grid-template-columns: repeat(3, 1fr); } }

.eq-table {
    width: 100%;
    color: var(--ink);
    font-size: 0.875rem;
    border-collapse: collapse;
}
.eq-table th, .eq-table td { padding: 0.5rem 0.75rem; text-align: left; }
.eq-table thead { border-bottom: 1px solid var(--surf-3); }
.eq-table tbody tr { border-bottom: 1px solid var(--surf-2); }
.eq-table tbody tr:last-child { border-bottom: 0; }
.eq-table th { color: var(--on-brand); font-weight: 600; }
.eq-table td:first-child { color: var(--brand-accent); font-weight: 500; }

.eq-list { columns: 2; column-gap: 2.5rem; padding-top: 2.5rem; }
.eq-list > [data-eq-section] { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 2.5rem; }
.eq-list h3 { color: var(--ink); font-size: 1.5rem; font-weight: 600; }
.eq-list ul.disc { list-style: disc; padding-left: 1.5rem; color: var(--ink); font-size: 0.875rem; }
.eq-list ul.disc li { padding: 0.125rem 0; }
@media (max-width: 768px) { .eq-list { columns: 1; } }

/* ---------- Equipment PDF page ---------- */
.page-equipment-pdf {
    background: var(--surf-0);
    color: var(--ink-strong);
    padding: 1rem;
}
.pdf-manifest {
    max-width: 1400px;
    margin: 0 auto;
}
.pdf-manifest__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}
.pdf-manifest__header img {
    width: 90px;
    height: auto;
}
.pdf-manifest__header h1 {
    color: var(--copper);
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}
.pdf-manifest__header p {
    color: var(--brand-accent);
    font-family: "Syne", Arial, sans-serif;
    font-weight: 700;
    white-space: nowrap;
}
.pdf-manifest__intro { margin-bottom: 2rem; }
.pdf-manifest__intro h2,
.pdf-section h2 {
    color: var(--brand-accent);
    border-bottom: 2px solid var(--brand-dark);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.pdf-manifest__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}
@media (min-width: 1000px) {
    .pdf-manifest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pdf-section,
.pdf-card { break-inside: avoid; }
.pdf-section {
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.pdf-section__desc {
    color: var(--ink);
    margin-bottom: 1rem;
}
.pdf-card { margin-top: 1.25rem; }
.pdf-card h3 {
    color: var(--on-brand);
    margin-bottom: 0.5rem;
}
.pdf-card ul {
    margin: 0;
    padding-left: 1.2rem;
}
.pdf-card li { margin-bottom: 0.25rem; }
.pdf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.pdf-table th,
.pdf-table td {
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0.5rem;
    text-align: left;
}
.pdf-table th { color: var(--brand-accent); }
@media print {
    .page-equipment-pdf {
        background: var(--surf-0) !important;
        color: var(--ink-strong) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---------- Reels page ---------- */
.reels-page {
    position: relative;
    background: var(--surf-0);
    padding-top: 0;
}
.reels-hero-row {
    position: relative;
    z-index: 1;
    padding-top: 0;
    padding-bottom: 0;
    height: 264px;
    /* Full-bleed: the hero video spans the entire page width, responsively. */
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
.reels-hero {
    position: relative;
    min-height: 264px;
    height: 264px;
    overflow: hidden;
}
.reels-hero__video,
.reels-hero__tint,
.reels-hero__shade {
    position: absolute;
    top: 0;
    height: 100%;
    /* Contained to the hero element so reelsGrid renders correctly whether it's
       the dedicated Reels page or dropped in as a section on any page. */
    left: 0;
    right: 0;
    width: 100%;
}
.reels-hero__video { object-fit: cover; }
.reels-hero__tint { background: rgba(33,92,131,0.4); }
.reels-hero__shade { background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.4), transparent); }
.reels-hero__panel {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Align the title with the site content gutter (matches [data-row]). */
    padding-left: max(4.1667vw, calc((100vw - 80rem) / 2));
    padding-right: 2rem;
    background: none;
}
/* Soft left-to-right scrim, bounded so it never stretches across ultra-wide
   viewports (which previously crushed the copy column to a sliver). */
.reels-hero__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    width: min(100%, calc(max(4.1667vw, (100vw - 80rem) / 2) + 720px));
    background: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.reels-hero__panel h1,
.reels-hero__panel p {
    position: relative;
    z-index: 1;
}
.reels-hero__panel h1 {
    color: var(--on-fill);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 1rem;
}
.reels-hero__panel p {
    color: var(--on-fill);
    opacity: 0.9;
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 42rem;
}

.reels-controls {
    background: var(--surf-2);
    position: sticky;
    top: var(--nav-h);
    z-index: 40;
    border-top: 1px solid var(--surf-3);
    border-bottom: 1px solid var(--surf-3);
}
.reels-controls__inner {
    max-width: 80rem;
    margin: 0 auto;
    width: 91.6667%;
    padding: 0.75rem 0;
}
.reels-controls__row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .reels-controls__row { flex-direction: row; align-items: center; }
}
.reels-search {
    flex: 1;
    min-height: 42px;
    background: rgba(0,0,0,0.4);
    color: var(--on-brand);
    border: 1px solid var(--surf-3);
    padding: 0.65rem 1rem;
    outline: none;
}
.reels-scale {
    display: none;
    align-items: center;
    gap: 0.75rem;
    min-width: 170px;
    color: var(--ink);
}
@media (min-width: 768px) { .reels-scale { display: flex; } }
.reels-scale svg {
    width: 70px;
    height: 42px;
    max-width: 80px;
    transition: width 0.35s ease, height 0.35s ease;
}
.reels-scale input {
    width: 118px;
    height: 8px;
    border-radius: 999px;
    appearance: none;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
}
.reels-scale input::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--on-brand);
    border: 2px solid var(--brand);
}
.reels-scale input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--on-brand);
    border: 2px solid var(--brand);
}
.reels-sort {
    --sort-index: 0;
    position: relative;
    display: flex;
    height: 42px;
    min-width: 280px;
    border: 1px solid var(--surf-3);
    background: rgba(0,0,0,0.4);
    overflow: hidden;
    clip-path: polygon(18px 0%, 100% 0%, calc(100% - 18px) 100%, 0% 100%);
}
.reels-sort__pill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    background-image: linear-gradient(135deg,
        color-mix(in oklab, var(--copper) 85%, white) 0%,
        color-mix(in oklab, var(--copper) 70%, white) 50%,
        color-mix(in oklab, var(--copper) 55%, black) 100%);
    transform: translateX(calc(var(--sort-index) * 100%));
    transition: transform 0.3s ease;
    clip-path: polygon(18px 0%, 100% 0%, calc(100% - 18px) 100%, 0% 100%);
}
.reels-sort button {
    position: relative;
    z-index: 1;
    width: 25%;
    border: 0;
    background: transparent;
    color: var(--on-brand);
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}
.reels-sort button.is-active { color: var(--surf-1); }
.reels-view-toggle { flex-shrink: 0; }
.reels-results-row { padding-top: 3rem; }
.reels__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
    transition: grid-template-columns 0.35s ease, gap 0.35s ease;
}
@media (max-width: 767px) {
    .reels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem; }
}
.reel-card {
    width: 100%;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.reel-card[hidden] { display: none; }
.reel-card__body {
    margin-top: 0.75rem;
}
.reel-card__body h3 {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.reel-card__watch {
    display: none;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255,255,255,0.18);
    background: var(--brand);
    color: var(--on-brand);
    border-radius: 0.375rem;
    cursor: pointer;
}
.page-reels .reel {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.page-reels.is-list .reels__grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.page-reels.is-list .reel-card {
    display: grid;
    grid-template-columns: minmax(280px, calc(var(--reel-list-h, 260px) * 1.777)) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.page-reels.is-list .reel {
    height: var(--reel-list-h, 260px);
}
.page-reels.is-list .reel-card__body h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.page-reels.is-list .reel-card__watch { display: inline-flex; }
@media (max-width: 767px) {
    .page-reels.is-list .reel-card { display: block; }
    .page-reels.is-list .reel { height: auto; }
}
.reels-empty {
    color: var(--ink-muted);
    text-align: center;
    padding: 3rem 0;
}

/* ---------- Misc / utility / fixes ---------- */
.section-eyebrow {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-muted);
    margin-bottom: 1rem;
}

.prose p { margin-bottom: 1rem; line-height: 1.7; }
.prose ul { padding-left: 1.25rem; list-style: disc; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.25rem; }
.prose-invert { color: var(--ink); }
.prose-invert strong { color: var(--on-brand); }

/* ---------- Reduced-motion ----------
   On-scroll entry reveals are short, one-shot, and key to the design, so we
   keep them even when the OS reports reduced-motion -- just make them snappy
   (instant fade with a tiny travel) instead of being suppressed. Continuous
   motion (marquee) stays running. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --reveal-dur: 0.25s;
        --reveal-ease: ease-out;
    }
    .reveal, .reveal-up { transform: translateY(12px); }
    .reveal-left { transform: translateX(-12px); }
    .reveal-right { transform: translateX(12px); }
    .reveal-zoom { transform: scale(0.97); }
    .slide-up > * { transition-duration: 0.35s; }
    .hero-video__shade,
    .hero-video__black {
        transition-duration: 0.4s !important;
        transition-delay: 0s !important;
    }
    html { scroll-behavior: auto; }
}

/* Anchor offset for sticky nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* Image fill helper (used like `position:absolute; inset:0; object-fit: cover;`) */
.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Visual polish pass ----------
   Keeps the dark cinematic look, but raises contrast and normalizes controls. */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading);
}

.page-title__desc,
.section-intro,
.general-content__text,
.about__copy,
.card__desc,
.reels__intro,
.prose-invert {
    color: var(--ink);
}

.hero-video__buttons {
    bottom: clamp(2rem, 4.5vh, 4rem);
}

.hero-video__shade {
    background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.34) 45%, rgba(0,0,0,0.12));
}

.card,
.eq-card {
    background: var(--surf-1);
    border-color: rgba(148, 163, 184, 0.22);
}

.eq-card h3 {
    color: var(--ink-strong);
}
.card__title {
    color: #fff;
}

.card__body {
    padding: clamp(2rem, 4vw, 3rem);
}

.card:hover {
    transform: translateY(-3px);
}

.cvm-input,
.form-message,
.equipment-search,
.equipment-chip,
.view-toggle,
.reels-search,
.reels-sort,
.equipment-action,
.reel-card__watch {
    border-color: rgba(148, 163, 184, 0.28);
}

.cvm-input,
.form-message,
.equipment-search,
.reels-search {
    background: rgba(15, 23, 42, 0.86);
    color: var(--ink-strong);
}

.cvm-input::placeholder,
.form-message::placeholder,
.equipment-search::placeholder,
.reels-search::placeholder {
    color: var(--ink-muted);
}

.cvm-input:focus,
.form-message:focus,
.equipment-search:focus,
.reels-search:focus,
.equipment-chip:focus-visible,
.equipment-action:focus-visible,
.reels-sort button:focus-visible,
.reel-card__watch:focus-visible,
.btn:focus-visible,
.card-link:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

.equipment-controls,
.reels-controls {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.24);
}

.equipment-action,
.reel-card__watch {
    background: rgba(33, 92, 131, 0.78);
}

.reels-hero-row,
.reels-hero {
    height: clamp(340px, 38vw, 460px);
    min-height: 340px;
}

.reels-hero__panel {
    top: 0;
    bottom: 0;
    padding-left: max(4.1667vw, calc((100vw - 80rem) / 2));
    padding-right: clamp(2rem, 5vw, 4rem);
}

.reels-hero__panel h1 {
    font-size: clamp(2.4rem, 4.6vw, 4.1rem);
    line-height: 1.1;
}

.reels-controls__row {
    gap: 1rem;
}

.reels-sort {
    min-width: 320px;
}

.reels-results-row {
    padding-top: 3.75rem;
}

.page-title:not(.is-bg) {
    background:
        radial-gradient(circle at 18% 20%, rgba(33, 92, 131, 0.26), transparent 32rem),
        var(--surf-deep);
}

.page-title:not(.is-bg) [data-row] {
    padding-top: clamp(4rem, 9vw, 7rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.page-title__title.slide-up > *,
.page-title__sub.reveal-up,
.page-title__desc.reveal-up {
    opacity: 1;
    transform: none;
}

.reel-card__body h3 {
    color: var(--ink-strong);
}

/* Phone type/spacing overrides live in the Mobile layout redo block below. */

/* ================= Theme preset flourishes ================= */
/* CVM Rainbow: light the whole thing up. */
[data-theme-preset="cvm-rainbow"] {
    --logo-filter-visible: saturate(1.6) hue-rotate(0deg);
}
@keyframes cvmRainbowHue { to { filter: hue-rotate(360deg); } }
@keyframes cvmRainbowText { to { background-position: 200% center; } }
[data-theme-preset="cvm-rainbow"] h1,
[data-theme-preset="cvm-rainbow"] h2,
[data-theme-preset="cvm-rainbow"] h3 {
    background-image: linear-gradient(90deg,
        #ff3b3b, #ff9e2c, #ffe92c, #46e36b, #2cc9ff, #7c3aed, #ec4899, #ff3b3b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: cvmRainbowText 6s linear infinite;
}
[data-theme-preset="cvm-rainbow"] .client-logo {
    filter: saturate(1.7) hue-rotate(0deg);
    animation: cvmRainbowHue 8s linear infinite;
    opacity: 1;
}
[data-theme-preset="cvm-rainbow"] .text-brand,
[data-theme-preset="cvm-rainbow"] .text-brand-accent,
[data-theme-preset="cvm-rainbow"] .stat__value,
[data-theme-preset="cvm-rainbow"] .eyebrow {
    background-image: linear-gradient(90deg, #ff3b3b, #ffe92c, #46e36b, #2cc9ff, #ec4899);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: cvmRainbowText 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    [data-theme-preset="cvm-rainbow"] h1,
    [data-theme-preset="cvm-rainbow"] h2,
    [data-theme-preset="cvm-rainbow"] h3,
    [data-theme-preset="cvm-rainbow"] .client-logo,
    [data-theme-preset="cvm-rainbow"] .text-brand,
    [data-theme-preset="cvm-rainbow"] .text-brand-accent,
    [data-theme-preset="cvm-rainbow"] .stat__value,
    [data-theme-preset="cvm-rainbow"] .eyebrow { animation: none; }
}

/* ===== Modular section appearance (cvm_section _appearance wrapper) ===== */
.cvm-block { display: block; }
/* Background tones replace the inner section's own background. */
.cvm-block[class*="cvm-bg-"] > section { background: transparent !important; }
.cvm-bg-surface { background: var(--surf-1); }
.cvm-bg-deep    { background: var(--surf-deep); }
.cvm-bg-invert  { background: var(--surf-invert); color: var(--ink-on-invert); }
.cvm-bg-brand   { background: var(--brand); color: var(--on-fill); }
.cvm-bg-invert > section, .cvm-bg-invert h1, .cvm-bg-invert h2, .cvm-bg-invert h3 { color: var(--ink-on-invert); }
.cvm-bg-brand > section, .cvm-bg-brand h1, .cvm-bg-brand h2, .cvm-bg-brand h3 { color: var(--on-fill); }
/* Spacing overrides; neutralize the inner section padding so the wrapper controls it. */
.cvm-pt-none > section { padding-top: 0 !important; }
.cvm-pt-sm   > section { padding-top: 0 !important; }
.cvm-pt-md   > section { padding-top: 0 !important; }
.cvm-pt-lg   > section { padding-top: 0 !important; }
.cvm-pb-none > section { padding-bottom: 0 !important; }
.cvm-pb-sm   > section { padding-bottom: 0 !important; }
.cvm-pb-md   > section { padding-bottom: 0 !important; }
.cvm-pb-lg   > section { padding-bottom: 0 !important; }
.cvm-pt-none { padding-top: 0; }
.cvm-pt-sm   { padding-top: 2rem; }
.cvm-pt-md   { padding-top: 4rem; }
.cvm-pt-lg   { padding-top: 7rem; }
.cvm-pb-none { padding-bottom: 0; }
.cvm-pb-sm   { padding-bottom: 2rem; }
.cvm-pb-md   { padding-bottom: 4rem; }
.cvm-pb-lg   { padding-bottom: 7rem; }

/* ===== Card grid header image + transparent bg + equipment hero spacing ===== */
.card-grid__header-image {
    display: block;
    max-width: 220px;
    max-height: 120px;
    width: auto;
    margin: 0 auto 1.25rem;
    object-fit: contain;
}
.section-card-grid.bg-transparent { background: transparent; }
/* Tighten the equipment page so groups sit close together (each group is a
   separate <section>, so the global [data-row]+[data-row] collapse can't apply). */
/* The generic `section { padding: 4rem/6rem/8rem 0 }` rule is what creates the
   huge gaps between equipment groups (each group is a <section>). Override it. */
.page-equipment .equipment-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.page-equipment .equipment-section [data-row] {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.page-equipment .equipment-section .mb-12 {
    margin-bottom: 1.25rem;
}
.page-equipment .equipment-section + .equipment-section {
    margin-top: 0;
}
.page-equipment .page-title:not(.is-bg) [data-row] {
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-bottom: clamp(0.4rem, 1vw, 0.75rem);
}
/* ===== Media Gallery section ===== */
.section-media-gallery {
    padding: 4rem 0;
}
.section-media-gallery.bg-black,
.section-media-gallery.bg-dark-gray { background: var(--surf-deep); }
.section-media-gallery.bg-gray-900 { background: var(--surf-1); }
.section-media-gallery.bg-gray-50,
.section-media-gallery.bg-white { background: var(--surf-invert); color: var(--ink-on-invert); }
.section-media-gallery.bg-transparent { background: transparent; }
.section-media-gallery.text-light .media-gallery__item-title,
.section-media-gallery.text-light .media-gallery__album-title,
.section-media-gallery.text-light .media-gallery__album-view-title,
.section-media-gallery.text-light .media-gallery__back { color: var(--on-brand); }
.section-media-gallery.text-light .media-gallery__item-caption,
.section-media-gallery.text-light .media-gallery__album-desc,
.section-media-gallery.text-light .media-gallery__album-count,
.section-media-gallery.text-light .media-gallery__empty { color: rgba(255,255,255,0.72); }
.section-media-gallery.text-dark .media-gallery__item-title,
.section-media-gallery.text-dark .media-gallery__album-title,
.section-media-gallery.text-dark .media-gallery__album-view-title,
.section-media-gallery.text-dark .media-gallery__back { color: var(--ink); }
.section-media-gallery.text-dark .media-gallery__item-caption,
.section-media-gallery.text-dark .media-gallery__album-desc,
.section-media-gallery.text-dark .media-gallery__album-count,
.section-media-gallery.text-dark .media-gallery__empty { color: var(--ink-dim); }

.media-gallery__header { margin-bottom: 2.5rem; }
.media-gallery__empty { text-align: center; opacity: 0.7; }

/* Albums */
.media-gallery__albums {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.media-gallery__albums.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-gallery__albums.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-gallery__albums.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .media-gallery__albums.cols-3,
    .media-gallery__albums.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .media-gallery__albums.cols-2,
    .media-gallery__albums.cols-3,
    .media-gallery__albums.cols-4 { grid-template-columns: 1fr; }
}
.media-gallery__album {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.media-gallery__album-cover {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    aspect-ratio: 4 / 3;
}
.media-gallery__albums--tiles .media-gallery__album-cover { aspect-ratio: 16 / 10; }
.media-gallery__album-cover img,
.media-gallery__album-cover-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.media-gallery__album-cover-fallback {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}
.media-gallery__album:hover .media-gallery__album-cover img {
    transform: scale(1.04);
}
.media-gallery__album-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.25rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.media-gallery__album-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}
.media-gallery__album-count {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.75);
}
.media-gallery__album-desc {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Album drill-in */
.media-gallery__album-view[hidden],
.media-gallery__main[hidden],
[data-gallery-album-items][hidden] { display: none !important; }
.media-gallery__album-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.media-gallery__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.section-media-gallery.text-dark .media-gallery__back {
    border-color: rgba(0,0,0,0.2);
}
.media-gallery__back:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.4);
}
.section-media-gallery.text-dark .media-gallery__back:hover {
    background: rgba(0,0,0,0.05);
}
.media-gallery__album-view-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

/* Items */
.media-gallery__items {
    display: grid;
    gap: 1rem;
}
.media-gallery__items.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-gallery__items.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-gallery__items.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .media-gallery__items.cols-3,
    .media-gallery__items.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .media-gallery--grid.cols-2,
    .media-gallery--grid.cols-3,
    .media-gallery--grid.cols-4,
    .media-gallery--tiles.cols-2,
    .media-gallery--tiles.cols-3,
    .media-gallery--tiles.cols-4 { grid-template-columns: 1fr; }
}
.media-gallery--list {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
}
.media-gallery__item {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
}
.media-gallery__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}
.media-gallery__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    aspect-ratio: 4 / 3;
}
.media-gallery--tiles .media-gallery__thumb { aspect-ratio: 16 / 10; }
.media-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.media-gallery__item:hover .media-gallery__thumb img { transform: scale(1.03); }
.media-gallery__thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}
.section-media-gallery.text-dark .media-gallery__thumb-fallback { color: rgba(0,0,0,0.45); }
.media-gallery__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}
.media-gallery__item:hover .media-gallery__play {
    background: var(--brand);
    transform: translate(-50%, -50%) scale(1.05);
}
.media-gallery__kind-badge {
    position: absolute;
    left: 0.65rem;
    bottom: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.media-gallery__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.media-gallery__item-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}
.media-gallery__item-caption {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* List mode */
.media-gallery--list .media-gallery__item {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.section-media-gallery.text-dark .media-gallery--list .media-gallery__item {
    border-bottom-color: rgba(0,0,0,0.08);
}
.media-gallery--list .media-gallery__thumb {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 4 / 3;
}
.media-gallery--list .media-gallery__meta { flex: 1; }
.media-gallery--list .media-gallery__play {
    width: 32px;
    height: 32px;
}

/* Lightbox */
.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.media-lightbox.is-open { display: flex; }
.media-lightbox__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.92);
    cursor: pointer;
}
.media-lightbox__inner {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.media-lightbox__stage {
    width: 100%;
    max-height: calc(100vh - 7rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-lightbox__stage img,
.media-lightbox__stage video {
    max-width: 100%;
    max-height: calc(100vh - 7rem);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 2px;
}
.media-lightbox__stage audio {
    width: min(520px, 100%);
}
.media-lightbox__stage iframe {
    width: min(1100px, 100%);
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 7rem);
    border: 0;
    background: #000;
}
.media-lightbox__caption {
    color: rgba(255,255,255,0.85);
    text-align: center;
    font-size: 0.95rem;
    max-width: 40rem;
    line-height: 1.4;
}
.media-lightbox__caption[hidden] { display: none; }
.media-lightbox__close {
    position: absolute;
    top: -0.25rem;
    right: 0;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.media-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.media-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.media-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.media-lightbox__nav--prev { left: -0.25rem; }
.media-lightbox__nav--next { right: -0.25rem; }
.media-lightbox__nav[hidden] { display: none; }
@media (max-width: 700px) {
    .media-lightbox__nav--prev { left: 0.25rem; }
    .media-lightbox__nav--next { right: 0.25rem; }
    .media-lightbox__close { top: 0.25rem; right: 0.25rem; }
}

.media-lightbox__audio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: min(520px, 100%);
}
.media-lightbox__audio img {
    max-width: 280px;
    max-height: 280px;
    object-fit: cover;
    border-radius: 4px;
}

/* ==========================================================================
   Mobile layout redo (<=767px)
   Phone layout drops heavy parallelogram clip-paths, stacks the hero, and
   uses a consistent content gutter so nothing sits on the screen edge.
   ========================================================================== */
@media (max-width: 767px) {
    :root {
        --mobile-gutter: 1.5rem;
        --mobnav-h: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* ----- Shared gutters ----- */
    .container,
    .row,
    [data-row] {
        width: auto;
        max-width: none;
        margin-left: var(--mobile-gutter);
        margin-right: var(--mobile-gutter);
        padding-left: 0;
        padding-right: 0;
    }
    section { padding: 2.25rem 0; }
    [data-row] { padding-top: 1rem; padding-bottom: 1rem; }
    .mb-16 { margin-bottom: 1.75rem; }
    .mb-12 { margin-bottom: 1.25rem; }

    h1 { font-size: clamp(1.7rem, 7.2vw, 2.35rem); }
    h2 { font-size: clamp(1.45rem, 6vw, 2rem); }
    h3 { font-size: clamp(1.15rem, 5vw, 1.35rem); }

    /* Soften button shear so labels stay centered in the shape */
    .btn {
        padding: 0.85rem 1.5rem;
        -webkit-clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
        clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    }

    /* ----- Hero: fit the VISIBLE viewport (svh / --vvh), not 100vh -----
       On Android Chrome the bottom address bar makes 100vh too tall, so a
       flex-end lockup and absolute CTAs get cropped behind the browser UI. */
    .hero-video,
    .hero-video.is-expanded {
        height: var(--vvh, 100svh);
        max-height: var(--vvh, 100svh);
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .hero-video.is-glided .hero-intro,
    .hero-video.is-ready .hero-intro {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 0.45rem;
        flex: 0 0 auto;
        width: 100%;
        padding: 0.85rem var(--mobile-gutter) 0.55rem;
        pointer-events: none;
        z-index: 9;
    }
    .hero-video.is-glided .hero-intro__logo,
    .hero-video.is-ready .hero-intro__logo {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: clamp(3.25rem, 14vw, 4rem);
        max-width: none;
        height: auto;
        margin: 0;
        transform: none !important;
        transition: opacity 0.7s ease;
    }
    .hero-video.is-glided .hero-intro__text,
    .hero-video.is-ready .hero-intro__text {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: 100%;
        width: 100%;
        margin: 0;
        transform: none !important;
        transition: opacity 0.7s ease;
    }
    .hero-intro__title {
        font-size: clamp(1.35rem, 6.2vw, 1.85rem);
        line-height: 1.08;
        margin-bottom: 0.25rem;
    }
    .hero-intro__sub {
        font-size: 0.85rem;
        line-height: 1.35;
        max-width: 30ch;
    }
    /* CTAs in normal flow under the copy — side by side to save height */
    .hero-video__buttons {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: none;
        align-self: stretch;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0.5rem;
        margin: 0 var(--mobile-gutter);
        margin-bottom: calc(var(--mobnav-h) + 0.45rem);
        padding: 0;
        z-index: 10;
        filter: drop-shadow(0 8px 25px rgba(0,0,0,0.7));
    }
    .hero-video__buttons .btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        justify-content: center;
        padding: 0.7rem 0.4rem;
        font-size: 0.68rem;
        letter-spacing: 0.03em;
    }
    .hero-video__toggle {
        bottom: calc(var(--mobnav-h) + 0.35rem);
        right: var(--mobile-gutter);
    }

    /* Very short viewports (Chrome UI + small phones): tighten further */
    @media (max-height: 700px) {
        .hero-intro__sub { display: none; }
        .hero-video.is-glided .hero-intro__logo,
        .hero-video.is-ready .hero-intro__logo {
            width: 3rem;
        }
        .hero-intro__title {
            font-size: clamp(1.2rem, 5.5vw, 1.55rem);
        }
        .hero-video__buttons {
            margin-bottom: calc(var(--mobnav-h) + 0.3rem);
        }
        .hero-video__buttons .btn {
            padding: 0.6rem 0.35rem;
            font-size: 0.64rem;
        }
    }

    /* ----- Page titles ----- */
    .page-title { overflow: hidden; }
    .page-title:not(.is-bg) [data-row] {
        padding-top: clamp(1.75rem, 7vw, 2.75rem);
        padding-bottom: clamp(1rem, 4vw, 1.75rem);
    }
    .page-title__title {
        margin-bottom: 0.85rem;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .page-title__title.slide-up > * { max-width: 100%; }
    .page-title__desc {
        font-size: 1rem;
        line-height: 1.55;
        max-width: 100%;
    }
    .page-title__desc p { margin: 0; overflow-wrap: anywhere; }

    /* ----- Service / content cards: drop skew on phones ----- */
    .card-grid { gap: 1rem; }
    .card {
        -webkit-clip-path: none;
        clip-path: none;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        overflow: hidden;
    }
    .card__body {
        padding: 1.35rem 1.2rem !important;
    }
    .card__title {
        font-size: 1.15rem;
        padding-right: 0;
        margin-bottom: 0.75rem;
    }
    .card__desc {
        font-size: 0.95rem;
    }
    .card__desc ul {
        padding-left: 1.15rem;
        margin: 0.5rem 0 0;
    }
    .card__cta {
        padding: 0.75rem 1.2rem;
    }
    .services-headline {
        font-size: clamp(1.5rem, 7vw, 2rem);
        max-width: 100%;
    }

    /* ----- About ----- */
    .about__grid {
        gap: 1.25rem;
        overflow: hidden;
    }
    .about__panel,
    .about__image {
        -webkit-clip-path: none;
        clip-path: none;
        border-radius: 6px;
        max-width: 100%;
        overflow: hidden;
    }
    .about__panel-body {
        padding: 1.5rem 1.2rem;
        gap: 1.1rem;
    }
    .about__heading {
        max-width: none;
        font-size: clamp(1.55rem, 7vw, 2rem);
    }
    .about__copy { font-size: 1rem; }
    .about__eyebrow { letter-spacing: 0.16em; }
    .about__stat { padding: 1.1rem 1rem; }
    .about__stat-value { font-size: 1.5rem; }

    /* ----- Reels rail: arrows inside the frame, card full-width ----- */
    .reels__head { gap: 0.75rem; margin-bottom: 1rem; }
    .reels__title { font-size: clamp(1.6rem, 7vw, 2rem); }
    .reels__intro { font-size: 0.95rem; max-width: none; }
    .reels__view-all {
        justify-content: flex-start;
        margin-bottom: 0.75rem;
    }
    .reels__rail-wrap {
        --reel-nav-top: 42%;
        padding: 0 2.4rem;
    }
    .reels__nav {
        width: 2rem;
        height: 2.75rem;
    }
    .reels__nav--prev { left: 0; }
    .reels__nav--next { right: 0; }
    .reels__rail {
        margin: 0;
        padding: 0.15rem 0 1rem;
        gap: 0.85rem;
    }
    .reel {
        flex: 0 0 100%;
        max-width: none;
    }

    /* ----- Dropdowns / Mobile Production ----- */
    .dropdowns-layout { gap: 1.5rem; }
    .dropdown-item__toggle {
        padding: 1rem 1.1rem;
        font-size: 1rem;
    }
    .dropdown-item__body > * {
        padding: 0 1.1rem 1rem;
        font-size: 0.95rem;
    }
    .interactive-image { display: none; }

    /* ----- Footer clears the dock ----- */
    .site-footer {
        padding-bottom: calc(var(--mobnav-h) + 2rem);
    }
}

/* Tablet: keep trailer diagram, but don't let it dominate the column. */
@media (min-width: 768px) and (max-width: 1023px) {
    .dropdowns-layout { gap: 2.5rem; }
    .interactive-image { max-width: 260px; }
}

/* Mobile Production page: tighter title + equipment stack */
@media (max-width: 1023px) {
    .page-mobile .dropdowns-section [data-row] {
        padding-top: 0.5rem;
    }
    .page-mobile .dropdowns-section .mb-16 {
        margin-bottom: 1.25rem;
    }
}