/* ==========================================================================
   Case content — single case page (hero meta · media grid · about · related)
   ========================================================================== */

/* ── Section body copy (The Challenge / Solution / Delivery) — medium size ─── */
.single-case .expertise-text .text-grid {
  --tw-body-size: var(--body-md);
  --tw-body-lh: var(--body-md-lh);
}

/* Case hero heading sits in a narrower container than the expertise/career hero */
.case-hero-x .expertise-hero__title { max-width: 50%; }

/* ── Hero video (mp4 header) — fills the .expertise-hero like the image ────── */
.case-hero-x__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Hero — Bunny Stream embed. Over-size the 16:9 player with container-query
   units so it COVERS the wide header (no letterbox); overflow:hidden crops. */
.case-hero-x__embed { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; }
.case-hero-x__embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  border: 0;
  pointer-events: none;
}
/* Hero set to Click to play / Player: the wrapper fills the header the way the
   bare <video> does, the play button sits above the gradient, and the media
   takes pointer events so the controls work. An interactive embed fits the
   header instead of being over-sized, so its controls aren't cropped off. */
.case-hero-x .video-click { position: absolute; inset: 0; z-index: 0; }
.case-hero-x .video-click__btn { z-index: 3; }
.case-hero-x__video.js-video { pointer-events: auto; }
.case-hero-x__embed.is-interactive iframe {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* ── Hero meta (Område tags + year) — on the dark .expertise-hero ─────────── */
.case-hero-x__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* Glass tag/eyebrow — unified size (Figma 3190:9242): 46px tall, 24px sides,
   20px corners, 20px/regular text. Keep in sync with .site-hero__tag and
   .service-hero__eyebrow. Glass look via .glass-card + --fx-filter. */
.case-hero-x__tag {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-light);
  font-size: var(--body-md);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* ── Media — per item: full (full-bleed) / landscape (half) / portrait (half) ── */
.case-media { padding-block: 60px; display: flex; flex-direction: column; gap: 20px; }
/* Rows that are .container carry its padding-bottom (50px desktop / 16px
   mobile) — inside the media block the flex gap owns ALL row spacing, so that
   padding is neutralised; otherwise rows ending in a grid get uneven gaps and
   the section's bottom padding stops being exactly 60px. */
.case-media > .container { padding-bottom: 0; }
/* A media block that ENDS the page with an edge-to-edge full row (no rounded
   corners) docks flush against the contact section — no bottom padding, the
   image/video meets the dark section directly. Contained (rounded) rows and
   blocks followed by more content keep their breathing room. */
.case-media:has(> .case-media__full:last-child:not(.case-media__full--contained)):has(+ .section-contact) {
  padding-bottom: 0;
}

/* Full-width "helskärm" item — full-bleed, tall, no radius */
.case-media__full { width: 100%; }
.case-media__full .case-mediagrid__item { border-radius: 0; max-height: 100vh; }
/* Optional "contained" look for a full item (toggle in the builder): rounded
   corners + the SAME geometry as .container, so the image tops out at the
   content column (1340px) and lines up with every other row — instead of
   running viewport-wide with a token margin on huge screens. */
.case-media__full--contained {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-primary);
}
.case-media__full--contained .case-mediagrid__item { border-radius: var(--radius-image); }
.case-media__full .case-mediagrid__item img,
.case-media__full .case-mediagrid__item video { width: 100%; height: auto; max-height: 100vh; object-fit: cover; display: block; }

/* Half items — landscape/portrait in a centered 2-column grid */
.case-mediagrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.case-mediagrid__item { margin: 0; overflow: hidden; border-radius: var(--radius-image); position: relative; }
.case-mediagrid__item img,
.case-mediagrid__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bunny Stream embed — COVER the tile like the images do. The player keeps the
   video's own aspect, so over-size it with container-query units (per shape)
   and let the tile's overflow:hidden crop the excess. No letterbox. */
.case-embed { position: absolute; inset: 0; container-type: size; }
.case-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, 177.78cqh);   /* 16:9 (default) */
  height: max(100cqh, 56.25cqw);
  border: 0;
  pointer-events: none;
}
.case-embed--square iframe { width: max(100cqw, 100cqh); height: max(100cqw, 100cqh); }        /* 1:1 */
.case-embed--portrait iframe { width: max(100cqw, 80cqh); height: max(100cqh, 125cqw); }      /* 4:5 (portrait) */
/* Full items take their natural height (no fixed-height crop). Embeds have no
   intrinsic size, so give the tile a ratio box matching the video's shape. */
.case-media__full .case-mediagrid__item:has(.case-embed)           { aspect-ratio: 16 / 9; }
.case-media__full .case-mediagrid__item:has(.case-embed--square)   { aspect-ratio: 1 / 1; }
.case-media__full .case-mediagrid__item:has(.case-embed--portrait) { aspect-ratio: 4 / 5; }

/* ── Full-BLEED full items (no radius/padding) → full-screen ─────────────────
   Fill the viewport: 100vh tall, full width, cover-cropped and centred. Videos
   (incl. portrait) COVER the container — the crop shape comes from the Aspect
   flag on the item. */
.case-media__full:not(.case-media__full--contained) .case-mediagrid__item { height: 100vh; }
.case-media__full:not(.case-media__full--contained) .case-mediagrid__item:has(.case-embed) { aspect-ratio: auto; }
/* No object-position here: center is the default, and hardcoding it would
   out-specify the .case-pos-* classes — the Position choice must work in
   full-bleed rows too (pick which part of the image survives the crop). */
.case-media__full:not(.case-media__full--contained) .case-mediagrid__item img,
.case-media__full:not(.case-media__full--contained) .case-mediagrid__item video { height: 100%; object-fit: cover; }
.case-mediagrid__item--landscape { aspect-ratio: 3 / 2; }
.case-mediagrid__item--portrait  { aspect-ratio: 3 / 4; }
.case-mediagrid__item--square    { aspect-ratio: 1 / 1; }
/* Landscape 4:3 — the classic photo ratio (660×495 at full content width,
   the Figma two-up pair height). */
.case-mediagrid__item--landscape43 { aspect-ratio: 4 / 3; }
/* Instagram-format tiles (4:5) — the Bunny portrait player is 4:5 too, so an
   insta video in this shape shows with zero crop. */
.case-mediagrid__item--portrait45 { aspect-ratio: 4 / 5; }
/* "Original — no crop": the tile takes the media's own ratio, so designed
   cards (e.g. 4:3 exports) are never cropped. Two tiles with the same source
   ratio line up perfectly; mixed ratios sit top-aligned. */
.case-mediagrid__item--natural { aspect-ratio: auto; }
.case-mediagrid__item--natural img,
.case-mediagrid__item--natural video { height: auto; }

/* Two-up vertical alignment: how the SHORTER tile sits beside the taller one.
   Matches the Figma pairs — top (default), centred (equal air above/below),
   or bottom-lined. Replaces guessing with fixed pixel offsets. */
.case-collage--valign-center { align-items: center; }
.case-collage--valign-end    { align-items: end; }
/* Per-TILE override (set on the item in the builder): pins one tile to the
   top or bottom edge of its row regardless of the row-level alignment. */
.case-valign-start { align-self: start; }
.case-valign-end   { align-self: end; }
/* Per-tile HORIZONTAL alignment (Justify in the builder). Only visible when a
   tile is narrower than its cell — the square card in a feature stack, a
   case-card-half tile, or an item with a custom width. */
.case-halign-start  { margin-right: auto; }
.case-halign-center { margin-inline: auto; }
.case-halign-end    { margin-left: auto; }

/* Fit + Position. Fit says whether the media fills the cell (cover, the default
   — crops the overflow) or shows its whole frame (contain — letterboxes).
   Position says which part survives: with cover it picks the part that is KEPT,
   with contain it picks the edge the media hugs. They are separate so a video
   can be cover-cropped towards its top edge, which the old single "align" list
   made impossible (any edge choice forced contain). */
.case-fit-contain img,
.case-fit-contain video { object-fit: contain; }
.case-pos-top    img, .case-pos-top    video { object-position: center top; }
.case-pos-bottom img, .case-pos-bottom video { object-position: center bottom; }
.case-pos-left   img, .case-pos-left   video { object-position: left center; }
.case-pos-right  img, .case-pos-right  video { object-position: right center; }

/* ── Full-bleed: "Show the whole video" ─────────────────────────────────────
   The alternative to filling the viewport. The item takes the media's own
   proportions instead of a fixed 100vh, so nothing is cropped no matter how
   wide or tall the screen is — the fix for videos being cut off on large
   displays. Capped at the viewport height and centred. */
/* The :not() is what the fill rules above are scoped with — matching it keeps
   these at the same specificity, and being later in the file they win. */
.case-media__full--natural:not(.case-media__full--contained) .case-mediagrid__item {
  height: auto;
  max-height: 100vh;
  margin-inline: auto;
  background: #000;
}
.case-media__full--natural:not(.case-media__full--contained) .case-mediagrid__item img,
.case-media__full--natural:not(.case-media__full--contained) .case-mediagrid__item video {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}
/* Embeds have no intrinsic size — give the tile the video's shape and let the
   player fill it 1:1 instead of over-sizing it to cover. max-width keeps the
   box exactly on ratio once max-height kicks in, so there is no letterbox. */
.case-media__full--natural:not(.case-media__full--contained) .case-mediagrid__item:has(.case-embed) {
  aspect-ratio: 16 / 9;
  max-width: calc(100vh * 16 / 9);
}
.case-media__full--natural:not(.case-media__full--contained) .case-mediagrid__item:has(.case-embed--square) {
  aspect-ratio: 1 / 1;
  max-width: 100vh;
}
.case-media__full--natural:not(.case-media__full--contained) .case-mediagrid__item:has(.case-embed--portrait) {
  aspect-ratio: 4 / 5;
  max-width: calc(100vh * 4 / 5);
}
.case-media__full--natural .case-embed iframe {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
}

/* An interactive embed (Click to play / Player) shows the player's own controls,
   so it must NOT be over-sized to cover the cell — the controls would be cropped
   off. It fits the cell instead, letterboxing if the shapes differ. */
.case-embed.is-interactive iframe {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* ── Collage rows (row-based media builder) ─────────────────────────────────
   Each row is one pattern. `full` and `two-up` reuse the classes above; the
   patterns below get their own grids. Air = how much breathing room a row has:
   tight pulls the tiles together, airy indents the row and opens the gap. */
.case-collage { display: grid; gap: 20px; }
.case-collage--air-tight { gap: 12px; }
.case-mediagrid.case-collage--air-tight { gap: 12px; }
.case-collage--air-airy { gap: 32px; padding-inline: calc(var(--margin-primary) + 6%); }
.case-mediagrid.case-collage--air-airy { gap: 32px; padding-inline: calc(var(--margin-primary) + 6%); }

/* Feature: one tall tile + two stacked beside it. Matches the Figma component:
   equal halves (2+2 columns of the 4-col grid), the big tile's 3:4 ratio
   drives the row height, and the stack splits it 532/332 (1.6:1) like the
   design — a landscape tile on top, a smaller card below. */
.case-collage--feature-left,
.case-collage--feature-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1.6fr 1fr;
}
/* The design draws the small bottom card at HALF the column width — items
   opt in via the media builder's CSS class field ("case-card-half"). */
.case-collage__stack .case-mediagrid__item.case-card-half { width: 50%; }
.case-collage__big { grid-row: 1 / 3; }
/* The big CELL owns its 3:4 shape; the item covers it. Without this the item
   takes width from its own aspect-ratio and pokes past the container on
   screens wider than 1440 (the cell can't shrink it). */
.case-collage--feature-left  .case-collage__big,
.case-collage--feature-right .case-collage__big { aspect-ratio: 3 / 4; }
.case-collage--feature-right .case-collage__big { grid-column: 2; grid-row: 1 / 3; }
.case-collage--feature-right .case-collage__stack { grid-column: 1; }
.case-collage--feature-right .case-collage__stack:nth-child(2) { grid-row: 1; }
.case-collage--feature-right .case-collage__stack:nth-child(3) { grid-row: 2; }
.case-collage__big .case-mediagrid__item { width: 100%; height: 100%; aspect-ratio: auto; }
.case-collage__stack { min-height: 0; }
.case-collage__stack .case-mediagrid__item { aspect-ratio: auto; height: 100%; }
/* A SQUARE item in the stack keeps its shape: it takes the row's height and
   sizes its width to match, sitting flush left — the design's "smaller card
   below" without needing the case-card-half class. */
.case-collage__stack { position: relative; }
.case-collage__stack .case-mediagrid__item--square {
  /* Absolute so the square can't feed its own height back into the fr rows
     (a static block with aspect-ratio would size the row to the column width). */
  position: absolute; top: 0; left: 0; bottom: 0;
  height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 1;
}
.case-collage__stack .case-mediagrid__item--square.case-halign-center { left: 50%; transform: translateX(-50%); }
.case-collage__stack .case-mediagrid__item--square.case-halign-end    { left: auto; right: 0; }

/* Collage 1+3: big tile on one side; a wide tile + two small ones on the
   other. Here the RIGHT-hand stack drives the row height and the big tile
   stretches to match (cover-cropped), so it can never blow up the row —
   matches the Nordstan "Bäst klädda" reference. */
.case-collage--quad-left  { grid-template-columns: 0.9fr 0.5fr 0.5fr; grid-template-rows: auto auto; }
.case-collage--quad-right { grid-template-columns: 0.5fr 0.5fr 0.9fr; grid-template-rows: auto auto; }
.case-collage--quad-left  .case-collage__big  { grid-column: 1; grid-row: 1 / 3; }
.case-collage--quad-left  .case-collage__wide { grid-column: 2 / 4; grid-row: 1; }
.case-collage--quad-right .case-collage__big  { grid-column: 3; grid-row: 1 / 3; }
.case-collage--quad-right .case-collage__wide { grid-column: 1 / 3; grid-row: 1; }
.case-collage--quad-right .case-collage__tile:nth-child(3) { grid-column: 1; grid-row: 2; }
.case-collage--quad-right .case-collage__tile:nth-child(4) { grid-column: 2; grid-row: 2; }
.case-collage--quad-left .case-collage__big .case-mediagrid__item,
.case-collage--quad-right .case-collage__big .case-mediagrid__item { aspect-ratio: auto; height: 100%; }
.case-mediagrid__item--wide { aspect-ratio: 2 / 1; }
/* Height cap: the 1+3 module never exceeds the Instagram-portrait height
   (825px = 660×825). The wide tile tops out at its natural 2:1 at full
   content width (352px) and the small pair at the remainder (453px);
   352 + 20 gap + 453 = 825. Taller shape choices cover-crop instead of
   growing the module. Desktop only — the stacked mobile flow is naturally
   taller than any single-screen cap. */
@media (min-width: 768px) {
  .case-collage--quad-left,
  .case-collage--quad-right { max-height: 825px; }
  .case-collage--quad-left  .case-collage__wide .case-mediagrid__item,
  .case-collage--quad-right .case-collage__wide .case-mediagrid__item { max-height: 352px; }
  .case-collage--quad-left  .case-collage__tile .case-mediagrid__item,
  .case-collage--quad-right .case-collage__tile .case-mediagrid__item { max-height: 453px; }
}

/* The chosen PATTERN owns the 1+3 collage geometry — cells keep the layout
   icon's proportions and items always cover their cell; a per-item shape can
   never shrink a tile below its cell (Figma: layout first, crop follows). */
.case-collage--quad-left  .case-collage__wide,
.case-collage--quad-right .case-collage__wide { aspect-ratio: 2 / 1; }
.case-collage--quad-left  .case-collage__tile,
.case-collage--quad-right .case-collage__tile { aspect-ratio: 330 / 453; }
.case-collage--quad-left  .case-collage__wide .case-mediagrid__item,
.case-collage--quad-right .case-collage__wide .case-mediagrid__item,
.case-collage--quad-left  .case-collage__tile .case-mediagrid__item,
.case-collage--quad-right .case-collage__tile .case-mediagrid__item {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
}

/* Offset pair: two tiles, one pushed down for the staggered editorial look */
.case-collage--offset-left,
.case-collage--offset-right {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.case-collage--offset-left  .case-collage__cell:first-child,
.case-collage--offset-right .case-collage__cell:last-child { margin-top: clamp(48px, 8vw, 130px); }
/* A per-tile Align choice OVERRIDES the pattern's built-in push: Top switches
   the stagger off for that tile, Bottom aligns to the row's bottom edge
   instead of using the fixed offset. Align wins over the pattern everywhere. */
.case-collage--offset-left  .case-collage__cell.case-valign-start,
.case-collage--offset-right .case-collage__cell.case-valign-start { margin-top: 0; }
.case-collage--offset-left  .case-collage__cell.case-valign-end,
.case-collage--offset-right .case-collage__cell.case-valign-end { margin-top: 0; align-self: end; }

/* Solo: one tile at reduced width, centred, with air around it */
.case-collage--solo { grid-template-columns: 1fr; }
.case-collage--solo .case-collage__cell { width: min(100%, 62%); margin-inline: auto; }
.case-collage--solo.case-collage--air-tight .case-collage__cell { width: min(100%, 78%); }

/* ── More about the client — accordion (native <details>) ─────────────────── */
.case-about-section { padding-block: 24px 60px; }
/* Figma: 60px total between this section and the next heading — the section's
   own bottom padding IS that gap, so the neighbours contribute nothing. Also
   keeps the accordion from shoving the next section far down when it opens.
   (Desktop only: mobile has its own 24/20/32 spec further down.) */
@media (min-width: 768px) {
  .single-case .expertise-text { padding-top: 20px; }   /* 60 + 20 = 80px total */
  .case-about .case-about__body { padding-bottom: 0; }
}
/* Row: accordion on the left, company / case title on the right (static) */
.case-about-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 0;   /* .container's own 50px — the section's 60px is the gap */
}
.case-about { border: none; flex: 1 1 auto; min-width: 0; }   /* no dividers / borders */
.case-about__client {
  flex: 0 0 auto;
  text-align: right;
  /* Body.Large straight from tokens.css — size, leading AND tracking; the
     tokens are responsive themselves (24/36 desktop → 20/28 mobile). */
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  letter-spacing: var(--body-lg-ls);
  color: var(--text-title);
}
.case-about__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;        /* icon sits right next to the text */
  align-items: center;
  gap: 12px;
  padding: 0 0 24px;
  font-family: var(--font);
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--text-title);
}
.case-about__summary::-webkit-details-marker { display: none; }

/* Revealed content — main.js animates the panel's HEIGHT on open/close, so
   the client name and everything below glide down/up instead of jumping.
   The motion is a combo: the text block RISES slightly (transform on the
   direct children, subheading a beat before the body) while a soft gradient
   curtain wipes the text in top-down (the mask rules below). Closing
   reverses fast so the collapse never outruns the text. */
/* overflow:hidden is PERMANENT, not just while animating: it keeps the last
   child's bottom margin inside the panel's height. Without it the settled
   auto-height is 20px shorter than the animated height (margin collapses out
   of the box the moment the inline overflow is cleared) and everything below
   jumps up 20px at the end of the open animation. */
.case-about__reveal { will-change: height; overflow: hidden; position: relative; }   /* offsetTop anchor for the shared sweep canvas */
/* Applied for a single frame while main.js reads scrollHeight: the children's
   pre-reveal translateY inflates the scrollable overflow, and measuring with
   it in place makes the panel animate ~24px too tall and snap at the end. */
.case-about.is-measuring .case-about__reveal > * { transform: none !important; transition: none !important; }
.case-about__reveal > * {
  transform: translateY(16px);   /* subtle — the horizontal sweep is the star */
  transition: transform 0.3s ease;
}
.case-about.is-revealed .case-about__reveal > * {
  transform: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-about.is-revealed .case-about__reveal > *:nth-child(1) { transition-delay: 0.05s; }
.case-about.is-revealed .case-about__reveal > *:nth-child(2) { transition-delay: 0.12s; }
/* The GLINT IS THE REVEAL: each text element carries a background-clip:text
   gradient reading [solid colour → light band → transparent] with a diagonal
   (115°) edge. Sliding the gradient horizontally sweeps the shining band
   left→right across the glyphs, and every letter lights up as the band
   passes — the text grows in reading order with the sheen as its front edge.
   The image is 3× the element width: parked at 100% only the transparent
   tail covers the text (invisible); parked at 0% only the solid head does
   (plain type). One pass per open, never loops; closing slides it back out. */
/* ONE continuous front through the whole block: both elements carry the same
   gradient on a shared canvas — main.js sizes it to 5× the panel height (px)
   and offsets each element's window by its own position in the panel, so the
   rising band crosses body AND subheading as a single motion at a single
   speed (no per-element clocks, nothing lags). JS also drives the sweep by
   transitioning background-position between the parked ends.
   Gated on .has-anim (set by main.js): without JS the text stays plain and
   visible — the parked-transparent state must never apply then. */
.case-about.has-anim .case-about__subheading,
.case-about.has-anim .case-about__body {
  background-image: linear-gradient(165deg,
    transparent 44%,
    color-mix(in srgb, var(--text-title) 40%, #fff) 50%,
    var(--text-title) 56%);
  background-size: 100% 500%;
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.case-about.has-anim .case-about__body {
  background-image: linear-gradient(165deg,
    transparent 44%,
    color-mix(in srgb, var(--text-body) 40%, #fff) 50%,
    var(--text-body) 56%);
}
@media (prefers-reduced-motion: reduce) {
  .case-about__reveal > *,
  .case-about.is-revealed .case-about__reveal > * { transition: none; transform: none; }
  .case-about.has-anim .case-about__subheading,
  .case-about.has-anim .case-about__body {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    animation: none;
    transition: none;
  }
  .case-about.has-anim .case-about__subheading { color: var(--text-title); }
  .case-about.has-anim .case-about__body { color: var(--text-body); }
}
.case-about__subheading {
  margin: 0 0 16px;
  font-size: var(--title-xs);
  line-height: var(--title-xs-lh);
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--text-title);
}
.case-about__icon {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--text-title);
  transition: transform 0.25s ease;
}
.case-about__icon::before,
.case-about__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.case-about__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* + rotates to × (matches the side nav-drawer expand toggle); keeps its colour */
.case-about[open] .case-about__icon { transform: rotate(45deg); }
.case-about__body {
  padding-bottom: 32px;
  max-width: 760px;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--text-body);
}
.case-about__body p { margin: 0 0 1em; }
.case-about__body p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  /* Figma mobile: media blocks have NO top padding — the preceding text
     widget's 40px bottom is the whole gap — and exactly 60px below. */
  .case-media { padding-block: 0 60px; }

  .case-mediagrid { grid-template-columns: 1fr; }
  .case-mediagrid__item--landscape,
  .case-mediagrid__item--portrait { aspect-ratio: 4 / 3; }

  /* Collage rows collapse to one column; offsets and indents reset. The 1+3
     collage keeps its two small tiles side by side (big + wide span both). */
  .case-collage--feature-left,
  .case-collage--feature-right,
  .case-collage--offset-left,
  .case-collage--offset-right { grid-template-columns: 1fr; grid-template-rows: none; }
  .case-collage--quad-left,
  .case-collage--quad-right { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .case-collage--quad-left  .case-collage__big,
  .case-collage--quad-left  .case-collage__wide,
  .case-collage--quad-right .case-collage__big,
  .case-collage--quad-right .case-collage__wide { grid-column: 1 / 3; grid-row: auto; }
  .case-collage--quad-right .case-collage__tile:nth-child(3),
  .case-collage--quad-right .case-collage__tile:nth-child(4) { grid-column: auto; grid-row: auto; }
  .case-collage--quad-left .case-collage__big .case-mediagrid__item,
  .case-collage--quad-right .case-collage__big .case-mediagrid__item { aspect-ratio: 3 / 4; height: auto; }
  .case-collage__big,
  .case-collage--feature-right .case-collage__big,
  .case-collage--feature-right .case-collage__stack:nth-child(2),
  .case-collage--feature-right .case-collage__stack:nth-child(3) { grid-column: auto; grid-row: auto; }
  .case-collage--quad-left .case-collage__big,
  .case-collage--quad-right .case-collage__big { grid-column: 1 / 3; }
  .case-collage__stack .case-mediagrid__item { aspect-ratio: 3 / 2; height: auto; }
  /* …but an explicit shape wins on mobile too (a square quote card must not be
     cropped to 3:2). */
  .case-collage__stack .case-mediagrid__item--square      { position: static; height: auto; aspect-ratio: 1 / 1; width: 100%; }
  .case-collage__stack .case-mediagrid__item--landscape43 { aspect-ratio: 4 / 3; }
  .case-collage__stack .case-mediagrid__item--portrait    { aspect-ratio: 3 / 4; }
  .case-collage__stack .case-mediagrid__item--portrait45  { aspect-ratio: 4 / 5; }
  .case-collage--offset-left  .case-collage__cell:first-child,
  .case-collage--offset-right .case-collage__cell:last-child { margin-top: 0; }
  .case-collage--air-airy { padding-inline: var(--margin-primary); gap: 20px; }
  .case-mediagrid.case-collage--air-airy { padding-inline: var(--margin-primary); gap: 20px; }
  .case-collage--solo .case-collage__cell { width: 100%; }
  /* Full-bleed media isn't full-viewport-tall on phones: drop the desktop
     height:100vh and let each tile use its aspect-ratio box, so embeds keep a
     height (instead of collapsing — the embed is absolutely positioned) and
     media isn't over-cropped to a portrait sliver. */
  .case-media__full:not(.case-media__full--contained) .case-mediagrid__item { height: auto; }
  .case-media__full:not(.case-media__full--contained) .case-mediagrid__item:has(.case-embed)           { aspect-ratio: 16 / 9; }
  .case-media__full:not(.case-media__full--contained) .case-mediagrid__item:has(.case-embed--square)   { aspect-ratio: 1 / 1; }
  .case-media__full:not(.case-media__full--contained) .case-mediagrid__item:has(.case-embed--portrait) { aspect-ratio: 4 / 5; }
  .case-media__full:not(.case-media__full--contained) .case-mediagrid__item img,
  .case-media__full:not(.case-media__full--contained) .case-mediagrid__item video { height: auto; }
  .case-about__subheading { font-size: var(--title-sm); line-height: var(--title-sm-lh); }
  /* Figma mobile spec: 24px above the client name, 20px between the name and
     "More about the client", 32px below; sides come from .container (16px). */
  .case-about-section { padding-top: 24px; padding-bottom: 32px; }
.case-about{order: 1;}
  .case-about-row { gap: 20px; flex-direction: column; padding-bottom: 0; }
  .case-about__client { text-align: left; order: 0; }   /* type comes from the responsive tokens */
  /* Case hero title wraps inside 75% of the width on phones (hero height is
     the site-wide 100svh from the .expertise-hero / .site-hero mobile rules). */
  .case-hero-x .expertise-hero__title { max-width: 75%; }
  /* Tags stack vertically on mobile (Figma mobile spec) */
  .case-hero-x__meta { flex-direction: column; align-items: flex-start; }
  .case-hero-x__tag { font-size: var(--body-md); }
      .expertise-text{
        padding-block: 40px;
      }
}

/* ── Related Work — dark section between Contact and Footer (Figma 2982-9463) ── */
.case-related { background-color: #1C1B1F; padding-block: 100px 60px; }
.case-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 48px;
  align-items: start;
}
.case-related__heading {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--title-md);
  line-height: var(--title-md-lh);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #F0F1FA;
}
.case-related__item { text-decoration: none; display: flex; flex-direction: column; gap: 22px; }
.case-related__img {
  border-radius: var(--radius-image);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  aspect-ratio: 660 / 568;
}
.case-related__item:first-of-type .case-related__img { aspect-ratio: 660 / 690; }
.case-related__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.case-related__item:hover .case-related__img img,
.case-related__item.is-pressed .case-related__img img { transform: scale(1.03); }
.case-related__item:focus-visible .case-related__img img { transform: scale(1.03); }
.case-related__meta { display: flex; flex-direction: column; gap: 8px; }
.case-related__client { font-size: var(--body-sm); line-height: var(--body-sm-lh); color: #fff; }
.case-related__title { font-size: var(--title-xs); line-height: 1.15; color: #fff; }
/* "View case" reuses the header's small-link dot→arrow animation, but stays
   pure white with no dimming/backdrop, and triggers when hovering ANYWHERE on
   the card (the whole card is the anchor, not just the label). */
.case-related__link { margin-top: 4px; }
.case-related__link.small-link--light:hover { color: #fff; }
.case-related__item:hover .case-related__link .nav-dot,
.case-related__item.is-pressed .case-related__link .nav-dot        { opacity: 0; transform: translateX(6px); }
.case-related__item:focus-visible .case-related__link .nav-dot        { opacity: 0; transform: translateX(6px); }
.case-related__item:hover .case-related__link .nav-arrow-icon,
.case-related__item.is-pressed .case-related__link .nav-arrow-icon { opacity: 1; transform: translateX(0); }
.case-related__item:focus-visible .case-related__link .nav-arrow-icon { opacity: 1; transform: translateX(0); }

@media (max-width: 767px) {
  .case-related { padding-block: 60px 40px; }
  .case-related__item { gap: 12px; }
  .case-related__link { padding-top: 8px; margin-top: 0; }
  .case-related__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .case-related__heading { font-size: var(--title-sm); line-height: var(--title-sm-lh); }
  .case-related__title { font-size: var(--body-lg); line-height: var(--body-lg-lh); }
  .case-related__img,
  .case-related__item:first-of-type .case-related__img { aspect-ratio: 4 / 3; }
}