/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — CASES
   Page styles for /en/cases/  (namespace: .ca-)
   Built on Signal Core tokens in global.css.
   ============================================================================ */

/* Black page base for the Reveal Lift seam: every section paints its own
   opaque background, so the base colour only shows through the footer seam. */
.ca-page { background: var(--wr-black) !important; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Touch chrome: no grey tap flash on any interactive element. */
.ca-page a, .ca-page button, .ca-page summary { -webkit-tap-highlight-color: transparent; }
/* Long client / mark / heading strings wrap instead of forcing a side-scroll. */
.ca-case__client, .ca-case__mark, .ca-clip__mark, .ca-h1, .ca-h2, .ca-cta__h { overflow-wrap: break-word; }

/* Section scaffolding ------------------------------------------------------ */
.ca-section { position: relative; z-index: 2; width: 100%; padding: clamp(88px, 12vh, 168px) var(--wr-pad-x); background: var(--wr-white); }
.ca-section--dark  { background: var(--wr-hero);  color: var(--wr-white); }
.ca-section--black { background: var(--wr-black); color: var(--wr-white); }
.ca-inner { position: relative; z-index: 4; max-width: var(--wr-max-width); margin: 0 auto; width: 100%; }
.ca-section.is-hidden { display: none; }

/* Section head ------------------------------------------------------------- */
.ca-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 32px; margin-bottom: clamp(40px, 5vh, 60px); scroll-margin-top: 148px; }
.ca-head__main { max-width: 30ch; }
.ca-eyebrow { margin-bottom: 22px; }
.ca-h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--wr-black); text-wrap: balance; }
.ca-section--dark .ca-h2, .ca-section--black .ca-h2 { color: var(--wr-white); }
.ca-head__count { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wr-black-40); white-space: nowrap; padding-bottom: 6px; }
.ca-section--dark .ca-head__count { color: var(--wr-white-45); }
.ca-head__count b { color: var(--wr-orange); }

/* Buttons / text links (Signal System action button) ---------------------- */
.ca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 30px; border-radius: var(--wr-radius-pill); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--wr-black); position: relative; isolation: isolate; border: none; cursor: pointer; font-family: inherit; background: var(--wr-grad); background-size: 200% auto; animation: gradientShimmerSlow 4s ease-in-out infinite alternate; transition: transform 0.25s var(--wr-ease-out), box-shadow 0.3s ease; box-shadow: 0 8px 30px -10px #F0492366; text-decoration: none; }
.ca-btn svg { width: 15px; height: 15px; stroke: var(--wr-black); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--wr-ease-out); }
@media (hover: hover) and (pointer: fine) { .ca-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -10px #F0492399; } .ca-btn:hover svg { transform: translateX(4px); } }
.ca-btn--ghost { background: transparent; animation: none; box-shadow: none; color: var(--wr-white); border: 1.5px solid var(--wr-white-16); }
.ca-btn--ghost svg { stroke: var(--wr-orange); }
@media (hover: hover) and (pointer: fine) { .ca-btn--ghost:hover { transform: translateY(-2px); border-color: var(--wr-orange); } }

/* Breadcrumb --------------------------------------------------------------- */
.ca-crumb { display: inline-flex; align-items: center; gap: 9px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-white-45); margin-bottom: 24px; }
.ca-crumb a { color: var(--wr-white-65); text-decoration: none; transition: color 0.2s ease; }
.ca-crumb a:hover { color: var(--wr-white); }
.ca-crumb span { color: var(--wr-white-16); }
.ca-crumb b { color: var(--wr-orange); font-weight: 700; }

/* ============================================================================
   S1 — HERO REEL. A scroll-driven montage: a horizontal filmstrip of clips
   that advances one after another while the page holds. #caReel is made tall
   by cases.js; its stage is sticky; the track translate + meter are scrubbed
   1:1 with scroll. NB: no overflow on .ca-reel itself — that would break the
   sticky pin in some browsers; the filmstrip is clipped on the viewport only.
   ========================================================================== */
.ca-reel { position: relative; z-index: 2; width: 100%; background: var(--wr-hero); color: var(--wr-white); }
.ca-reel__glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(46% 48% at 90% 2%, #F0492326 0%, transparent 60%), radial-gradient(40% 40% at 2% 96%, #FFD80014 0%, transparent 56%); }
.ca-reel__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, #F2F2F20E 1px, transparent 1.4px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(130% 100% at 86% 4%, #000 0%, transparent 64%); mask-image: radial-gradient(130% 100% at 86% 4%, #000 0%, transparent 64%); opacity: 0.6; }
.ca-reel__beam { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, #F0492366 26%, #FFD80088 50%, #F0492366 74%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); opacity: 0.5; }

.ca-reel__stage { position: relative; height: 100vh; height: 100svh; z-index: 2; max-width: var(--wr-max-width); margin: 0 auto; padding: calc(var(--wr-nav-height) + 48px) var(--wr-pad-x) clamp(44px, 6vh, 72px); display: grid; grid-template-columns: minmax(290px, 0.82fr) 1.5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

/* Lead column — kept deliberately spare: heading, one line, proof, scrubber. */
.ca-reel__lead { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ca-h1 { margin: 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--wr-white); max-width: 13ch; text-wrap: balance; }
.ca-reel__sub { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6; color: var(--wr-white-75); max-width: 42ch; margin-top: 22px; }
.ca-reel__sub strong { color: var(--wr-white); font-weight: 700; }

/* Volume line — the standout proof sentence */
.ca-volume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: clamp(26px, 4vh, 40px); }
.ca-volume__unit { display: inline-flex; align-items: baseline; gap: 8px; }
.ca-volume__n { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ca-volume__l { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--wr-white-65); }
.ca-volume__sep { width: 1px; height: 20px; background: var(--wr-white-16); align-self: center; }

/* Scroll cue — quiet, no counter or progress bar */
.ca-reel__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(30px, 4.5vh, 48px); font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wr-white-45); }
.ca-reel__hint svg { width: 26px; height: 8px; stroke: var(--wr-orange); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ca-reel__hint b { color: var(--wr-white-65); font-weight: 700; }

/* Filmstrip viewport + track ----------------------------------------------- */
.ca-reel__viewport { position: relative; min-width: 0; height: clamp(400px, 66vh, 640px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent); }
.ca-reel__track { display: flex; gap: 20px; height: 100%; align-items: center; will-change: transform; }

/* Clip frame — carries the case detail so the lead can stay spare */
.ca-clip { position: relative; flex: 0 0 auto; width: clamp(250px, 26vw, 392px); height: 100%; border-radius: var(--wr-radius-card); overflow: hidden; background-color: #0D0A07; background-image: repeating-linear-gradient(135deg, #F2F2F20A 0 2px, transparent 2px 13px); border: 1px solid var(--wr-white-08); display: flex; flex-direction: column; justify-content: space-between; padding: 20px; transition: transform 0.55s var(--wr-ease-out), border-color 0.45s ease, opacity 0.45s ease, box-shadow 0.45s ease; opacity: 0.42; transform: scale(0.92); }
.ca-clip::after { content: ''; position: absolute; inset: 0; background: radial-gradient(82% 62% at 74% 16%, #F0492322, transparent 60%), radial-gradient(52% 50% at 12% 96%, #FFD80012, transparent 58%); pointer-events: none; }
.ca-clip.is-active { opacity: 1; transform: scale(1); border-color: var(--wr-white-16); box-shadow: 0 34px 80px -34px #F0492359; }
.ca-clip__head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ca-clip__type { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wr-white); padding: 6px 11px; border-radius: var(--wr-radius-pill); background: #0D0A07AA; border: 1px solid var(--wr-white-16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ca-clip__n { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 800; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ca-clip__foot { position: relative; z-index: 2; }
.ca-clip__field { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-orange); }
.ca-clip__field::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wr-grad); }
.ca-clip__mark { font-size: clamp(21px, 2vw, 28px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08; color: var(--wr-white); margin-top: 9px; }
.ca-clip__stat { font-size: 12.5px; line-height: 1.45; color: var(--wr-white-65); margin-top: 11px; max-width: 30ch; opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease 0.05s, transform 0.45s var(--wr-ease-out) 0.05s; }
.ca-clip.is-active .ca-clip__stat { opacity: 1; transform: none; }

/* Pinned reel on phones / tablets — single column (headline over the strip),
   near-full-width clips so the scrub advances one clip at a time. */
@media (max-width: 920px) {
  .ca-reel:not(.is-static) .ca-reel__stage { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 28px); align-content: center; padding-top: calc(var(--wr-nav-height) + 40px); padding-bottom: clamp(24px, 4vh, 44px); }
  .ca-reel:not(.is-static) .ca-reel__lead { text-align: left; }
  .ca-reel:not(.is-static) .ca-reel__viewport { height: clamp(250px, 42vh, 400px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent); }
  .ca-reel:not(.is-static) .ca-reel__track { gap: 12px; }
  .ca-reel:not(.is-static) .ca-clip { width: 62vw; max-width: 280px; }
}

/* Static fallback (reduced-motion): native horizontal swipe, no scrub */
.ca-reel.is-static .ca-reel__stage { position: static; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: clamp(28px, 5vh, 44px); padding-top: calc(var(--wr-nav-height) + 56px); padding-bottom: clamp(48px, 7vh, 80px); }
.ca-reel.is-static .ca-reel__viewport { height: 320px; overflow-x: auto; overflow-y: hidden; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; }
.ca-reel.is-static .ca-reel__track { transform: none !important; padding-right: 0; }
.ca-reel.is-static .ca-clip { opacity: 1; transform: none; scroll-snap-align: start; width: 74vw; max-width: 320px; }
.ca-reel.is-static .ca-clip__stat { opacity: 1; transform: none; }
.ca-reel.is-static .ca-reel__scrub { display: none; }

/* ============================================================================
   FIELD SELECTOR — two states.
   (a) Default: an inline underline-tab bar sitting in flow after the reel.
   (b) After it scrolls out of view, a detached rounded glass capsule fades in
       fixed beneath the nav. Both mirror the same active field via cases.js.
   ========================================================================== */

/* When the floating filter is active, collapse the header's top contact bar
   so the chrome stays clean (overrides the is-scrolled 36px height). */
#siteHeader.is-topbar-hidden #topBar { height: 0; opacity: 0; overflow: hidden; pointer-events: none; }

/* (a) Inline bar — text colour mirrors the nav links (resting = white) ---- */.ca-filter-sentinel { position: relative; height: 0; }
/* Background simply continues the dark hero (no seam with the reel above). The
   hard edge into the next light section is intentional. */
.ca-filter { position: relative; z-index: 2; background: var(--wr-hero); }
.ca-filter__inner { max-width: var(--wr-max-width); margin: 0 auto; padding: 0 var(--wr-pad-x); display: flex; align-items: center; justify-content: center; }
.ca-filter__set { position: relative; display: flex; align-items: stretch; gap: clamp(8px, 2vw, 30px); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ca-filter__set::-webkit-scrollbar { display: none; }
.ca-filter__btn { position: relative; display: inline-flex; align-items: baseline; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--wr-white); background: transparent; border: none; cursor: pointer; padding: 19px 2px; white-space: nowrap; transition: opacity 0.25s ease; }
@media (hover: hover) and (pointer: fine) { .ca-filter__btn:not(.is-active):hover { opacity: 0.6; } }
.ca-filter__btn.is-active { background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ca-filter__btn i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: var(--wr-white-45); font-family: ui-monospace, Menlo, monospace; }
.ca-filter__btn.is-active i { -webkit-text-fill-color: var(--wr-orange); color: var(--wr-orange); }

/* (b) Floating rounded capsule — light/white, sits clearly below the nav --- */
.ca-floatfilter { position: fixed; top: calc(var(--wr-nav-height) + 34px); left: 0; right: 0; z-index: 40; display: flex; justify-content: center; padding: 0 var(--wr-pad-x); pointer-events: none; opacity: 0; transform: translateY(-14px) scale(0.96); transition: opacity 0.4s var(--wr-ease-out), transform 0.46s var(--wr-ease-spring); }
.ca-floatfilter.is-on { opacity: 1; transform: none; }
.ca-floatfilter.is-on .ca-floatfilter__set { pointer-events: auto; }
.ca-floatfilter__set { position: relative; display: flex; align-items: stretch; gap: clamp(6px, 1vw, 14px); padding: 8px 12px; border-radius: var(--wr-radius-pill); background: var(--wr-white); border: 1px solid var(--wr-black-08); box-shadow: 0 24px 54px -18px rgba(13,10,7,0.42), 0 2px 6px rgba(13,10,7,0.08); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ca-floatfilter__set::-webkit-scrollbar { display: none; }
.ca-floatfilter__btn { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--wr-black); background: transparent; border: none; cursor: pointer; padding: 9px 14px; border-radius: var(--wr-radius-pill); white-space: nowrap; transition: opacity 0.25s ease; }
@media (hover: hover) and (pointer: fine) { .ca-floatfilter__btn:not(.is-active):hover { opacity: 0.55; } }
.ca-floatfilter__btn.is-active { background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ca-floatfilter__btn i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: var(--wr-black-40); font-family: ui-monospace, Menlo, monospace; }
.ca-floatfilter__btn.is-active i { -webkit-text-fill-color: var(--wr-orange); color: var(--wr-orange); }
@media (prefers-reduced-motion: reduce) { .ca-floatfilter { transition: opacity 0.2s linear; } }
@media (max-width: 680px) {
  /* Wrap the labels instead of clipping past the edge. (Background continues the
     hero + fades into the section via the base .ca-filter rule.) */
  .ca-filter__inner { padding-top: 8px; }
  .ca-filter__set { flex-wrap: wrap; overflow-x: visible; justify-content: center; column-gap: clamp(12px, 4vw, 22px); row-gap: 2px; }
  .ca-filter__btn { font-size: 12.5px; padding: 8px 2px; }
  /* Float capsule: wrap inside the pill so it never overflows the nav width. */
  .ca-floatfilter__set { flex-wrap: wrap; overflow-x: visible; justify-content: center; column-gap: clamp(10px, 3vw, 16px); row-gap: 0; border-radius: 20px; padding: 6px 14px; }
  .ca-floatfilter__btn { font-size: 12px; padding: 8px 10px; }
}

/* ============================================================================
   CASE GRID — gallery cards, feature-led per category
   ========================================================================== */
.ca-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Smoother scroll-in than the generic .reveal: gentle rise + soft fade, longer
   decelerating ease. Stagger (transition-delay) is left to .reveal-delay-*. */
.ca-grid .ca-case.reveal { opacity: 0; transform: translateY(34px); transition-property: opacity, transform; transition-duration: 1.05s; transition-timing-function: var(--wr-ease-out); will-change: opacity, transform; }
.ca-grid .ca-case.reveal.is-visible { opacity: 1; transform: none; }

.ca-case { position: relative; display: flex; flex-direction: column; border-radius: var(--wr-radius-card); overflow: hidden; background: var(--wr-white); border: 1px solid var(--wr-black-08); box-shadow: 0 1px 2px rgba(13,10,7,0.04), 0 22px 48px -38px rgba(13,10,7,0.55); transition: transform 0.35s var(--wr-ease-out), border-color 0.3s ease, box-shadow 0.3s ease; }
.ca-section--dark .ca-case { background: linear-gradient(180deg, #15100B, #0C0907); border-color: var(--wr-white-08); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .ca-case:hover { transform: translateY(-4px); border-color: var(--wr-black-15); box-shadow: 0 1px 2px rgba(13,10,7,0.05), 0 30px 56px -40px rgba(13,10,7,0.6); } .ca-section--dark .ca-case:hover { border-color: var(--wr-white-16); } }

/* Brand Plate (image-ready) */
.ca-case__plate { position: relative; aspect-ratio: 16 / 10; background-color: #0D0A07; background-image: repeating-linear-gradient(135deg, #F2F2F20A 0 2px, transparent 2px 12px); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.ca-case__plate::after { content: ''; position: absolute; inset: 0; background: radial-gradient(74% 62% at 72% 22%, #F0492322, transparent 60%), radial-gradient(56% 50% at 16% 92%, #FFD80012, transparent 58%); pointer-events: none; }
.ca-case__type { position: relative; z-index: 2; align-self: flex-start; margin: 14px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wr-white); padding: 7px 12px; border-radius: var(--wr-radius-pill); background: #0D0A07AA; border: 1px solid var(--wr-white-16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ca-case__mark { position: relative; z-index: 2; margin: 0 16px 16px; font-size: clamp(18px, 1.8vw, 23px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: var(--wr-white); }
.ca-case__tag { position: absolute; right: 14px; top: 14px; z-index: 2; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-white-65); padding: 5px 10px; border: 1px solid var(--wr-white-16); border-radius: var(--wr-radius-pill); background: #0D0A07AA; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Body */
.ca-case__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 22px; }
.ca-case__client { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--wr-black); line-height: 1.2; }
.ca-section--dark .ca-case__client { color: var(--wr-white); }
.ca-case__deliver { font-size: 13.5px; line-height: 1.55; color: var(--wr-black-40); margin-top: 9px; }
.ca-section--dark .ca-case__deliver { color: var(--wr-white-65); }

/* Standout stat */
.ca-case__stat { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--wr-black-08); display: flex; align-items: baseline; gap: 11px; }
.ca-section--dark .ca-case__stat { border-top-color: var(--wr-white-08); }
.ca-case__statn { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.ca-case__statl { font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--wr-black-40); }
.ca-section--dark .ca-case__statl { color: var(--wr-white-65); }

/* Case link */
.ca-case__link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--wr-black); text-decoration: none; }
.ca-section--dark .ca-case__link { color: var(--wr-white); }
.ca-case__link svg { width: 14px; height: 14px; stroke: var(--wr-orange); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s var(--wr-ease-out); }
@media (hover: hover) and (pointer: fine) { .ca-case:hover .ca-case__link svg { transform: translateX(4px); } }

/* Feature card — full-width, horizontal split, larger plate */
.ca-case--feature { grid-column: 1 / -1; flex-direction: row; }
.ca-case--feature .ca-case__plate { aspect-ratio: auto; flex: 0 0 52%; min-height: 340px; }
.ca-case--feature .ca-case__mark { font-size: clamp(24px, 3vw, 40px); }
.ca-case--feature .ca-case__body { flex: 1; justify-content: center; padding: clamp(28px, 4vw, 52px); }
.ca-case--feature .ca-case__client { font-size: clamp(22px, 2.4vw, 30px); }
.ca-case--feature .ca-case__deliver { font-size: clamp(14px, 1.2vw, 16px); margin-top: 14px; max-width: 46ch; }
.ca-case--feature .ca-case__statn { font-size: clamp(30px, 3.4vw, 44px); }
.ca-case--feature .ca-case__statl { font-size: 13.5px; max-width: 22ch; }

/* ============================================================================
   CTA CLOSE (black): final CTA + signal field
   ========================================================================== */
.ca-cta { text-align: center; overflow: hidden; }
.ca-cta .ca-inner { display: flex; flex-direction: column; align-items: center; }
.ca-cta__h { font-size: clamp(34px, 5vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--wr-white); max-width: 18ch; text-wrap: balance; }
.ca-cta__sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62; color: var(--wr-white-65); max-width: 54ch; margin: 24px auto 0; }
.ca-cta__ctas { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

.ca-signal { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 0%, transparent 72%); mask-image: radial-gradient(80% 70% at 50% 50%, #000 0%, transparent 72%); }
.ca-signal__bar { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #F04923 30%, #FFD800 50%, #F04923 70%, transparent); filter: blur(3px); transform: translateX(-100%); animation: caSweep linear infinite; }
@keyframes caSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ca-signal__bar { animation: none; opacity: 0.18; transform: none; } }

/* ============================================================================
   REVEAL LIFT — footer fixed beneath the page; body padding-bottom is the
   scroll room that uncovers it.
   ========================================================================== */
.ca-foot-reveal #site-footer-mount { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; width: 100%; }
.ca-foot-reveal { padding-bottom: 55vh; }
@media (prefers-reduced-motion: reduce) {
  .ca-foot-reveal #site-footer-mount { position: static; }
  .ca-foot-reveal { padding-bottom: 0; }
}

/* ============================================================================
   RESPONSIVE CASCADE — ultrawide → wide → laptop → tablet → mobile → compact.
   Container width scales on the body (.ca-page) so every section that reads
   var(--wr-max-width) tracks it (.ca-inner, .ca-reel__stage, .ca-filter__inner,
   .ca-floatfilter). The reel switches to its native-swipe static mode at ≤920
   via cases.js; the grid collapses below tune the rest of the rhythm.
   ========================================================================== */

/* ---- Ultrawide: widen the measure so the composition doesn't strand at
   1280px in a sea of margin, and lift the type ceilings to match. ---- */
@media (min-width: 1700px) {
  .ca-page { --wr-max-width: 1480px; }
  .ca-h1     { font-size: clamp(40px, 4vw, 72px); }
  .ca-h2     { font-size: clamp(32px, 3.4vw, 56px); }
  .ca-cta__h { font-size: clamp(40px, 4.6vw, 76px); }
}
@media (min-width: 2200px) {
  .ca-page { --wr-max-width: 1680px; }
  .ca-h1     { font-size: clamp(40px, 3.6vw, 84px); }
  .ca-cta__h { font-size: clamp(40px, 4vw, 88px); }
  /* Grow the reel clips so a handful don't look lost in the wider stage. */
  .ca-clip { width: clamp(320px, 22vw, 440px); }
}

/* ---- Laptop / small desktop: narrow the reel's lead column. ---- */
@media (max-width: 1040px) {
  .ca-reel__stage { grid-template-columns: minmax(260px, 0.8fr) 1.4fr; }
}

/* ---- Tablet: reel goes static (cases.js, ≤920); cards to 2-up; the feature
   card stacks vertically with a banner plate. ---- */
@media (max-width: 920px) {
  .ca-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-case--feature { flex-direction: column; }
  .ca-case--feature .ca-case__plate { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}

/* ---- Tablet portrait: tighten section heads + the static reel viewport. ---- */
@media (max-width: 768px) {
  .ca-head { margin-bottom: clamp(32px, 4vh, 48px); }
  .ca-reel.is-static .ca-reel__viewport { height: 300px; }
}

/* ---- Mobile: single-column grid; stacked head; bigger fluid H1. ---- */
@media (max-width: 600px) {
  .ca-grid { grid-template-columns: 1fr; }
  .ca-head { grid-template-columns: 1fr; }
  .ca-head__count { padding-bottom: 0; }
  .ca-h1 { font-size: clamp(32px, 9vw, 44px); max-width: none; }
}

/* ---- Small phones: full-width stacked CTA buttons; trim the hero pad and
   give the swipeable clips a little more width. ---- */
@media (max-width: 540px) {
  .ca-reel.is-static .ca-reel__stage { padding-top: calc(var(--wr-nav-height) + 40px); }
  .ca-cta__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  .ca-btn { width: 100%; }
  .ca-reel.is-static .ca-clip { width: 82vw; }
}

/* ---- Compact phones: keep the big gradient numerals from forcing a
   horizontal scroll and tighten card padding. ---- */
@media (max-width: 380px) {
  .ca-case__stat { gap: 8px; }
  .ca-case--feature .ca-case__statn { font-size: clamp(26px, 9vw, 34px); }
  .ca-case__body { padding: 20px 18px; }
  .ca-reel.is-static .ca-reel__viewport { height: 280px; }
}

/* ---- Coarse pointers (touch): keep the filter tabs + case link an easy
   tap height regardless of the viewport width. ---- */
@media (pointer: coarse) {
  .ca-floatfilter__btn { padding-top: 11px; padding-bottom: 11px; }
  .ca-case__link { padding-top: 20px; }
}