/*
  Continental Media — case-study page block styles.
  Namespaced under .cm-case. Depends on assets/css/tokens.css.
  See case-study.html for the full direction-contract comment and the
  placeholder-asset inventory.
*/

.cm-case {
  background: var(--cm-color-bg);
  color: var(--cm-color-fg);
}

/* ---------- Shared: placeholder media component ---------- */
/* One visual language for "an asset goes here" reused at every
   aspect-ratio in the page — a dashed border and a bracketed label read
   unambiguously as a placeholder (never mistaken for a broken image),
   while the aria-label carries the real, already-written alt text so
   swapping in the final asset later only means changing a src/tag, not
   rewriting accessibility copy. */
.cm-case__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--cm-radius-sm);
  box-sizing: border-box;
}

.cm-case__placeholder-icon {
  width: 40px;
  height: 40px;
  flex: none;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cm-case__placeholder-label {
  max-width: 42ch;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.58);
}

/* ---------- Shared: real media, once an asset replaces its placeholder ---------- */
/* Every placeholder slot in this template is a fixed aspect-ratio box;
   a real <img> or <video> just needs to fill that same box edge-to-edge
   — the box itself (and the reveal/parallax transforms already applied
   to it) never changes between the placeholder and final-asset state. */
.cm-case__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Hero ---------- */

.cm-case-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  font-size: 0.9375rem; /* base for unsized wrappers, see about-teaser.css's .cm-about for why */
}

.cm-case-hero__media {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  box-sizing: border-box;
  transform: translate3d(0, var(--cm-case-parallax-y, 0px), 0) scale(var(--cm-case-parallax-scale, 1.06));
  transform-origin: center;
  will-change: transform;
}

/* Once a real hero photo replaces the placeholder it should bleed to
   every edge (no framing padding, nothing but the image + the gradient
   overlay already in front of it), so the padding that keeps the
   placeholder's own dashed box off the viewport edge is placeholder-only. */
.cm-case-hero__media--photo {
  padding: 0;
}

.cm-case-hero__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hero's text block anchors to the bottom of the viewport and can
   run tall for a long title, at any viewport height. Rather than push
   the placeholder's centered content up with padding (fragile — the
   exact amount of clearance needed shifts with title length, font
   clamp and viewport height all at once), decouple it from that flow
   entirely: a compact corner badge that can never compete with the
   bottom-anchored text for vertical space. */
.cm-case-hero__media .cm-case__placeholder {
  position: absolute;
  top: clamp(5.5rem, 12vh, 7rem);
  left: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: auto;
  width: auto;
  height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  text-align: left;
  background: rgba(10, 11, 13, 0.55);
  border-radius: var(--cm-radius-sm);
  max-width: 480px;
}

.cm-case-hero__media .cm-case__placeholder-icon {
  width: 26px;
  height: 26px;
}

/* Same bottom-heavy gradient family as the home hero's overlay. */
.cm-case-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(4, 5, 8, 0.9) 0%,
    rgba(4, 5, 8, 0.74) 22%,
    rgba(4, 5, 8, 0.44) 45%,
    rgba(4, 5, 8, 0.14) 68%,
    rgba(4, 5, 8, 0) 85%
  );
  pointer-events: none;
}

.cm-case-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.cm-case-hero__content {
  pointer-events: auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--cm-gutter) clamp(3rem, 8vh, 6rem);
}

.cm-case-hero [data-cm-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--cm-duration-slow) var(--cm-ease-out),
    transform var(--cm-duration-slow) var(--cm-ease-out);
}

.cm-case-hero.is-ready [data-cm-reveal] {
  opacity: 1;
  transform: translateY(0);
}

.cm-case-hero.is-ready .cm-case-hero__label { transition-delay: 40ms; }
.cm-case-hero.is-ready .cm-case-hero__title { transition-delay: 120ms; }
.cm-case-hero.is-ready .cm-case-hero__meta { transition-delay: 280ms; }
.cm-case-hero.is-ready .cm-case-hero__disciplines { transition-delay: 340ms; }
.cm-case-hero.is-ready .cm-case-hero__facts { transition-delay: 400ms; }

.cm-case-hero__label {
  display: block;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1em;
}

.cm-case-hero__title {
  margin: 0;
  /* Wide enough that even a long title (this one's own 71 characters)
     wraps to 2-3 lines, not a tall 5-line tower that could reach into
     the placeholder's own centered label above — text-wrap:balance
     keeps whatever wrap it does land evenly. */
  max-width: 32ch;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cm-case-hero__meta {
  margin: 1.1em 0 0;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
}

/* Discipline pills: the one deliberately-rounded shape in this page's
   vocabulary (the rest of the site keeps --cm-radius-sm's near-sharp
   corners) — a frosted glass-over-photo chip reads as its own distinct
   "tag" affordance, which a wall of comma-separated words over a photo
   doesn't. Kept small and quiet (no accent color, no hover state) so it
   stays a supporting fact, not competing with the title for attention. */
.cm-case-hero__disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
  max-width: 640px;
}

.cm-case-hero__discipline-pill {
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

.cm-case-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 1.1rem 2.5rem;
  max-width: 680px;
  margin: 1.85rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.cm-case-hero__fact {
  margin: 0;
}

.cm-case-hero__fact dt {
  font-family: var(--cm-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.35em;
}

.cm-case-hero__fact dd {
  margin: 0;
  font-family: var(--cm-font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  .cm-case-hero__media {
    transform: none;
  }

  .cm-case-hero [data-cm-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* On short viewports the bottom-anchored text stack (label + a wrapped
   title + meta + fact-sheet) can outgrow the 100vh hero and get clipped
   at the top by its overflow:hidden. The fact-sheet is supplementary to
   the label/title/meta that carry the block's actual narrative weight,
   so it is the first thing to give way and keep the essential content
   intact and clear of the corner badge above it. */
@media (max-height: 700px) {
  .cm-case-hero__facts {
    display: none;
  }
}

@media (max-width: 640px) {
  .cm-case-hero__facts {
    grid-template-columns: 1fr;
  }

  /* The corner badge sits independently of the text flow already, but
     pull it in a bit tighter to the fixed header at narrow widths. */
  .cm-case-hero__media .cm-case__placeholder {
    top: clamp(4.5rem, 10vh, 5.5rem);
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .cm-case-hero__media .cm-case__placeholder-icon {
    width: 22px;
    height: 22px;
  }

  .cm-case-hero__media .cm-case__placeholder-label {
    font-size: 0.75rem;
  }
}

/* ---------- Shared: narrow editorial column + eyebrow ---------- */

.cm-case__eyebrow {
  display: block;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1em;
}

.cm-case__eyebrow--on-accent {
  color: var(--cm-color-on-accent);
  opacity: 0.85;
}

[data-cm-case-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--cm-duration-base) var(--cm-ease-out),
    transform var(--cm-duration-base) var(--cm-ease-out);
}

[data-cm-case-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Resumen ---------- */

.cm-case-summary {
  padding-block: clamp(5rem, 13vh, 8rem);
}

.cm-case-summary__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: var(--cm-gutter);
}

.cm-case-summary__text {
  margin: 0;
  font-family: var(--cm-font-body);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Contexto (full-bleed image + narrow text) ---------- */

.cm-case-context__media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.cm-case-context__media-inner {
  position: absolute;
  inset: -10% 0;
  will-change: transform;
}

.cm-case-context__text {
  max-width: 700px;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 5.5rem) var(--cm-gutter) clamp(4rem, 10vh, 6rem);
}

.cm-case-context__body {
  margin: 0;
  font-family: var(--cm-font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .cm-case-context__media-inner {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .cm-case-context__media {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Reto (full-bleed accent, soft edge transitions) ---------- */

.cm-case-challenge {
  position: relative;
  background: var(--cm-color-accent);
  color: var(--cm-color-on-accent);
  padding-block: clamp(5.5rem, 15vh, 9rem);
}

/* The near-black ground "bleeds into" the accent block at both edges
   instead of cutting straight to it — an editorial soft transition
   achieved with two static gradients, no scroll-linked color
   interpolation needed. */
.cm-case-challenge__fade {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(90px, 14vh, 160px);
  pointer-events: none;
}

.cm-case-challenge__fade--top {
  top: 0;
  background: linear-gradient(to bottom, var(--cm-color-bg), transparent);
}

.cm-case-challenge__fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--cm-color-bg), transparent);
}

.cm-case-challenge__inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-inline: var(--cm-gutter);
}

.cm-case-challenge__text {
  margin: 0;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ---------- Enfoque ---------- */

.cm-case-approach {
  padding-block: clamp(5.5rem, 14vh, 8.5rem);
}

.cm-case-approach__inner {
  max-width: 900px;
  margin: 0 auto;
  padding-inline: var(--cm-gutter);
}

.cm-case-approach__title {
  margin: 0.3em 0 0;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cm-case-approach__list {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cm-case-approach__item {
  display: grid;
  grid-template-columns: clamp(3.5rem, 8vw, 5.5rem) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--cm-duration-base) var(--cm-ease-out),
    transform var(--cm-duration-base) var(--cm-ease-out);
}

/* Same "container observed once, children cascade via nth-child delay"
   pattern as about-teaser's photo grid / services-teaser's chips — one
   IntersectionObserver on the list (case-study.js), not four. */
.cm-case-approach__list.is-visible .cm-case-approach__item {
  opacity: 1;
  transform: translateY(0);
}

.cm-case-approach__list.is-visible .cm-case-approach__item:nth-child(1) { transition-delay: 0ms; }
.cm-case-approach__list.is-visible .cm-case-approach__item:nth-child(2) { transition-delay: 110ms; }
.cm-case-approach__list.is-visible .cm-case-approach__item:nth-child(3) { transition-delay: 220ms; }
.cm-case-approach__list.is-visible .cm-case-approach__item:nth-child(4) { transition-delay: 330ms; }

.cm-case-approach__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Scroll-reactive divider: each item's own border sweeps to the accent
   blue as it crosses the middle of the viewport (roughly when it's
   being read), then eases back to its neutral color as it moves on —
   a native scroll-driven animation tied to the item's own position
   (animation-timeline: view()), not JS. Where the browser doesn't
   support it yet, @supports simply never applies this block and the
   border stays its plain neutral color — a safe, silent no-op rather
   than a broken animation. */
@supports (animation-timeline: view()) {
  .cm-case-approach__item {
    animation-name: cm-case-approach-line-sweep;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }

  .cm-case-approach__item:last-child {
    animation-name: cm-case-approach-line-sweep-last;
  }

  @keyframes cm-case-approach-line-sweep {
    0%,
    100% {
      border-top-color: rgba(255, 255, 255, 0.14);
    }
    50% {
      border-top-color: var(--cm-blue-500);
    }
  }

  @keyframes cm-case-approach-line-sweep-last {
    0%,
    100% {
      border-top-color: rgba(255, 255, 255, 0.14);
      border-bottom-color: rgba(255, 255, 255, 0.14);
    }
    50% {
      border-top-color: var(--cm-blue-500);
      border-bottom-color: var(--cm-blue-500);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cm-case-approach__item {
      animation: none;
    }
  }
}

.cm-case-approach__index {
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.32);
}

.cm-case-approach__text {
  margin: 0.2em 0 0;
  font-family: var(--cm-font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Solución y proceso ---------- */

.cm-case-solution {
  padding-block: clamp(2rem, 6vh, 3rem);
}

.cm-case-solution__intro {
  max-width: 900px;
  margin: 0 auto clamp(1rem, 4vh, 2rem);
  padding-inline: var(--cm-gutter);
}

.cm-case-solution__section {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--cm-gutter);
}

.cm-case-solution__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cm-case-solution__media,
.cm-case-solution__media-dual,
.cm-case-solution__text {
  flex: 1 1 380px;
  min-width: 0;
}

.cm-case-solution__row--reverse .cm-case-solution__media,
.cm-case-solution__row--reverse .cm-case-solution__media-dual {
  order: 2;
}

/* Two images sharing the row's one media slot (e.g. a pair of product
   screenshots that belong together) instead of one image stretched
   across the whole column — each half is a full, independent
   .cm-case-solution__media box (same aspect-ratio/reveal/modifier
   rules as a single image), just at half width side by side. */
.cm-case-solution__media-dual {
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
}

.cm-case-solution__media-dual .cm-case-solution__media {
  flex: 1 1 50%;
  min-width: 0;
}

.cm-case-solution__media {
  aspect-ratio: 4 / 3;
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--cm-duration-base) var(--cm-ease-out),
    transform var(--cm-duration-base) var(--cm-ease-out);
}

.cm-case-solution__media--wide {
  aspect-ratio: 16 / 10;
}

/* A raw web screenshot is the one asset in this row that isn't already
   styled photography or a designed slide — rounded corners + a browser-
   chrome bar frame it as "this is a live site" instead of a flat image
   pasted into the page. Scoped to this one modifier only; every other
   media slot keeps the site's plain, unrounded rectangle. */
.cm-case-solution__media--screenshot {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}

.cm-case-solution__browser-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(to bottom, rgba(10, 11, 13, 0.7), transparent);
  pointer-events: none;
}

.cm-case-solution__browser-chrome span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
}

/* A chat/product screenshot reads as real evidence, not a flat image,
   inside a minimal device chassis — a dark bezel + a notch pill, sized
   to a natural phone silhouette rather than stretched to fill the
   slot's full column width. Scoped to this one modifier; the frame's
   own aspect-ratio (not the image's) sets the shape, so it stays a
   consistent device silhouette regardless of the screenshot's own
   native size. */
.cm-case-solution__media--phone {
  position: relative;
  aspect-ratio: 9 / 19.5;
  max-width: 300px;
  margin: 0 auto;
  padding: 14px;
  overflow: hidden;
  background: #0c0d0f;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2.25rem;
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.75);
}

.cm-case-solution__media--phone .cm-case__media-img {
  border-radius: 1.5rem;
}

.cm-case-solution__media--phone::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 1;
  width: 84px;
  height: 20px;
  background: #0c0d0f;
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}

[data-cm-case-reveal].is-visible .cm-case-solution__media {
  opacity: 1;
  transform: scale(1);
}

.cm-case-solution__text h3 {
  margin: 0;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  letter-spacing: -0.015em;
}

.cm-case-solution__text p {
  margin: 0.85em 0 0;
  font-family: var(--cm-font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.cm-case-solution__video-wrap {
  padding-bottom: clamp(3rem, 8vw, 5.5rem);
}

.cm-case-solution__video-caption {
  margin: 0.85rem 0 0;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.48);
}

.cm-case-solution__video {
  position: relative;
  overflow: hidden;
  /* Fallback only — the generator now writes each video's own real
     aspect-ratio inline (mirrors .cm-case-solution__media--screenshot's
     approach), so this 16:9 only applies if width/height were ever
     missing from the data. */
  aspect-ratio: 16 / 9;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--cm-duration-base) var(--cm-ease-out),
    transform var(--cm-duration-base) var(--cm-ease-out);
}

/* A vertical/Reel-style source (taller than wide) stays capped and
   centered instead of stretching the full row width — at native
   proportions that would produce an absurdly tall box (e.g. a 720x1280
   reel at ~1100px column width would be ~1950px tall). Still
   deliberately larger in on-screen area than the row-image boxes
   beside it, just contained. */
.cm-case-solution__video--portrait {
  max-width: min(480px, 100%);
  margin-inline: auto;
}

/* Real reel only: a second, independent scale layer nested inside the
   entrance-reveal box above. It grows a little as the reel scrolls
   through the viewport (case-study.js writes --cm-case-video-scale),
   the frame's own overflow:hidden keeping that growth cropped to the
   16:9 window instead of spilling past it. */
.cm-case-solution__video-inner {
  position: absolute;
  inset: 0;
  transform: scale(var(--cm-case-video-scale, 1));
  transform-origin: center;
  will-change: transform;
}

.cm-case-solution__video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-cm-case-reveal].is-visible .cm-case-solution__video {
  opacity: 1;
  transform: scale(1);
}

.cm-case-solution__video .cm-case__placeholder-icon {
  width: 52px;
  height: 52px;
}

@media (prefers-reduced-motion: reduce) {
  .cm-case-approach__item,
  .cm-case-solution__media,
  .cm-case-solution__video {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cm-case-solution__video-inner {
    transform: none;
  }
}

@media (max-width: 780px) {
  .cm-case-solution__row--reverse .cm-case-solution__media,
  .cm-case-solution__row--reverse .cm-case-solution__media-dual {
    order: 0;
  }

  .cm-case-solution__media-dual {
    flex-direction: column;
  }
}

/* ---------- Resultado ---------- */

.cm-case-result {
  padding-block: clamp(6rem, 16vh, 10rem);
}

/* Optional, per-case: a closing image above the text (e.g. a group/
   community shot that pays off the narrative) — see
   generate-case-study-pages.mjs's renderResult(). Only applied when
   result.media is set; every case without one keeps the plain
   padding-block above untouched. */
.cm-case-result--has-media {
  padding-top: 0;
}

.cm-case-result__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--cm-duration-base) var(--cm-ease-out),
    transform var(--cm-duration-base) var(--cm-ease-out);
}

[data-cm-case-reveal].is-visible .cm-case-result__media {
  opacity: 1;
  transform: scale(1);
}

.cm-case-result--has-media .cm-case-result__inner {
  padding-top: clamp(3.5rem, 9vh, 5.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .cm-case-result__media {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .cm-case-result__media {
    aspect-ratio: 4 / 3;
  }
}

.cm-case-result__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: var(--cm-gutter);
  text-align: center;
}

.cm-case-result__inner .cm-case__eyebrow {
  text-align: center;
}

.cm-case-result__text {
  margin: 0 auto;
  max-width: 62ch;
  font-family: var(--cm-font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

/* The narrative climax: the case's strongest fact, isolated from the
   paragraph and given the page's single largest treatment (bigger than
   the hero title itself) so it reads as a standalone statement, not
   another line of body copy. */
.cm-case-result__highlight {
  margin: 0.9em 0 0;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  /* --cm-blue-500, not the site's flatter --cm-color-accent: a slightly
     lighter blue reads brighter/more "won" against near-black at this
     display size, and still clears 5.11:1 AA (verified) with generous
     margin to spare for text already far above the large-text floor. */
  color: var(--cm-blue-500);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--cm-duration-base) var(--cm-ease-out),
    transform var(--cm-duration-base) var(--cm-ease-out);
  transition-delay: 180ms;
}

[data-cm-case-reveal].is-visible .cm-case-result__highlight {
  opacity: 1;
  transform: translateY(0);
}

.cm-case-result__attribution {
  margin: 0.75em 0 0;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
}

/* Optional, per-case only: a case with two comparably-strong stats (not
   one dominant number) sets result.highlights instead of the single
   highlight/attribution pair above — e.g. an Instagram figure and a
   Facebook figure that both matter and would undersell each other if
   only one got the climax treatment. Same display-type climax feel as
   .cm-case-result__highlight, just sized to sit two across without
   wrapping awkwardly, and stacked as independent value+label groups so
   each stat keeps its own attribution instead of sharing one caption. */
.cm-case-result__highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 4.5rem);
  max-width: 1100px;
  margin: 0.9em auto 0;
  padding-inline: var(--cm-gutter);
  text-align: center;
}

.cm-case-result__highlight-group {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--cm-duration-base) var(--cm-ease-out),
    transform var(--cm-duration-base) var(--cm-ease-out);
  transition-delay: 180ms;
}

[data-cm-case-reveal].is-visible .cm-case-result__highlight-group {
  opacity: 1;
  transform: translateY(0);
}

.cm-case-result__highlight-value {
  margin: 0;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cm-blue-500);
}

.cm-case-result__highlight-label {
  margin: 0.6em 0 0;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .cm-case-result__highlight,
  .cm-case-result__highlight-group {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Closing: CTA + next project ---------- */

.cm-case-close {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cm-case-close__cta {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(5rem, 13vh, 7.5rem) var(--cm-gutter);
  text-align: center;
}

.cm-case-close__cta-title {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cm-case-close__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  font-family: var(--cm-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--cm-radius-sm);
  padding: 0.95em 1.75em;
  cursor: pointer;
  border: 1.5px solid var(--cm-color-accent);
  background: var(--cm-color-accent);
  color: var(--cm-color-on-accent);
  transition:
    background-color var(--cm-duration-fast) var(--cm-ease-out),
    border-color var(--cm-duration-fast) var(--cm-ease-out),
    transform var(--cm-duration-fast) var(--cm-ease-out);
}

.cm-case-close__button:hover {
  background: var(--cm-color-accent-hover);
  border-color: var(--cm-color-accent-hover);
}

.cm-case-close__button:active {
  transform: translateY(1px);
}

.cm-case-close__button:focus-visible {
  outline: 2px solid var(--cm-color-fg);
  outline-offset: 3px;
}

.cm-case-next {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(280px, 42vh, 420px);
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--cm-next-bg);
  color: var(--cm-next-fg);
  text-decoration: none;
  will-change: filter;
  transition: filter var(--cm-duration-fast) var(--cm-ease-out);
}

.cm-case-next:hover,
.cm-case-next:focus-visible {
  filter: brightness(1.06) saturate(1.12);
}

.cm-case-next:focus-visible {
  outline: 2px solid var(--cm-next-fg);
  outline-offset: -4px;
}

.cm-case-next__top {
  position: absolute;
  top: clamp(2rem, 5vw, 3rem);
  left: clamp(2rem, 5vw, 3rem);
  right: clamp(2rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cm-case-next__label {
  font-family: var(--cm-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.cm-case-next__badge {
  flex-shrink: 0;
  font-family: var(--cm-font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: var(--cm-radius-sm);
  padding: 0.25em 0.55em;
}

.cm-case-next__category {
  display: block;
  font-family: var(--cm-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cm-case-next__name {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--cm-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .cm-case-next {
    transition: none;
  }
}

@media (max-width: 640px) {
  .cm-case-close__cta-title {
    text-wrap: balance;
  }
}