/* ==========================================================================
   CASE — AI ASSISTANT
   Breakpoint: 800px  (mobile < 800px | desktop ≥ 800px)

   CR pattern (.cr):  aspect-ratio + max-height on a flex child.
                      Grows proportionally until height cap, then wider only.

   Full block (.case-full): full-width, responsive aspect-ratio, no height cap.
                            Mobile and desktop ratios differ per block.

   Dark blocks (Outfit / Answer / ProductUI):
     Mobile  → image is `position:absolute` with top%/bottom%/aspect-ratio.
     Desktop → outer block becomes flex container (display:flex + padding),
               image is a **direct flex child** (position:relative, flex:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties
-------------------------------------------------------------------------- */
:root {
  --case-bg-dark:  #010307;
  --case-bg-white: #ffffff;
  --case-bg-ai:    #f7f8fc;
  --case-bg-grey:  #dbdddf;
  --case-bg-hero:  #e9eaeb;
  --case-bg-black: #000000;
  --case-text-0:   #000000;
  --case-text-1:   #666666;
  --case-text-2:   #999999;
  --case-font: 'Inter', sans-serif;
  --case-size: 15px;
  --case-lh:   24px;
  --case-ls:   -0.45px;
}

/* --------------------------------------------------------------------------
   Page base
-------------------------------------------------------------------------- */
html { background-color: var(--case-bg-white); }

.case-page {
  width: 100%;
  font-family: var(--case-font);
  font-size: var(--case-size);
  font-weight: 400;
  line-height: var(--case-lh);
  letter-spacing: var(--case-ls);
  color: var(--case-text-1);
  background-color: var(--case-bg-white);
}

/* Hide LQIP images until JS controls them */
.case-page img[data-lqip] { opacity: 0; }

/* Keep base64 placeholders pixelated — JS clears this on finishReveal */
.case-page img[data-src] { image-rendering: pixelated; }

/* --------------------------------------------------------------------------
   CR — Case Ratio
   .cr__content — absolute overlay
-------------------------------------------------------------------------- */
.cr {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.cr--1-1 { width: 100%; aspect-ratio: 1 / 1; }
.cr--8-9 { width: 100%; aspect-ratio: 4 / 5;  max-height: 1200px; max-width: 1066.67px; }

.cr__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Case block — two-col section wrapper
-------------------------------------------------------------------------- */
.case-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Full block — switches aspect-ratio at 800px
-------------------------------------------------------------------------- */
.case-full {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.case-full--dark {
  background-color: var(--case-bg-black);
}

/* ==========================================================================
   1. HERO — full viewport height
   Driven by the hero's own ASPECT RATIO (viewport width/height), not by
   width breakpoints — matches Figma's "HeroAspectRatio" component, which
   has 3 ratio variants: "2:3" (default/narrow) → "1:1" (medium) → "16:9" (wide).
   All positions are percentages of the hero box, so they scale continuously
   within each ratio state instead of snapping at fixed pixel widths.

   Asset01/03/04 exports are pre-rendered in final canvas orientation — just
   position + object-fit:cover. Asset02 export is raw/unrotated — rotated via
   container-query units (cqw/cqh), mirroring Figma's own technique: wrapper
   has container-type:size, inner swaps 100cqh×100cqw then rotate(-90deg).
   ========================================================================== */
.case-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--case-bg-hero);
  flex-shrink: 0;
}

/* Min/max box ratio clamp: width is always 100%. Within [1:2, 2.7] the box
   fills the full viewport height. Below 1:2 (very tall/narrow) the box
   shrinks to the 1:2 ratio, ending up shorter than the viewport. Above 2.7
   (very wide/short) the box grows to the 2.7 ratio, ending up taller than
   the viewport (overflows) rather than narrower than 100%. */
@media (max-aspect-ratio: 1/2) {
  .case-hero { height: auto; aspect-ratio: 1 / 2; }
}

@media (min-aspect-ratio: 2.7/1) {
  .case-hero { height: auto; aspect-ratio: 2.7 / 1; }
}

.case-hero__asset { position: absolute; overflow: hidden; }

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

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

/* "2:3" state (default) — aspect-ratio < 8:9 (portrait/narrow viewports) */
.case-hero__asset--01 { aspect-ratio: 283 / 250;          top: 0;      left: 0%;      right: 40%; }
.case-hero__asset--02 { aspect-ratio: 380 / 289;           top: 0;      left: 56.25%;  right: -7.25%; }
.case-hero__asset--03 { aspect-ratio: 606 / 452;          bottom: 0;   left: -24.5%;  right: 53.75%; }
.case-hero__asset--04 { aspect-ratio: 1920 / 823;         bottom: -0.53px; left: 41.28%;  right: -49.49%; }

.case-hero__logo {
  position: absolute;
  top: calc(50% + 0.5px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 158px;
  height: 33px;
}

.case-hero__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "8:9" state — aspect-ratio ≥ 8:9 (squarish/medium viewports) */
@media (min-aspect-ratio: 8/9) {
  .case-hero__asset--01 { left: 12.37%; right: 54.38%; }
  .case-hero__asset--02 { left: 65.87%; right: 0; }
  .case-hero__asset--03 { bottom: 0;   left: -9%;   right: 69.5%; }
  .case-hero__asset--04 { bottom: 0; left: 55.38%; right: -12.87%; }

  .case-hero__logo {
    top: 50%;
    left: calc(50% + 0.5px);
    width: 155px;
    height: 32px;
  }
}

/* "16:9" state — aspect-ratio ≥ 16:9 (wide viewports) */
@media (min-aspect-ratio: 16/9) {
  .case-hero__asset--01 { left: 26.19%;  right: 51.13%; }
  .case-hero__asset--02 { top: 0; left: 75.63%; right: 0; }
  .case-hero__asset--03 { bottom: -1px; left: -2.44%;  right: 68.06%; }
  .case-hero__asset--04 { left: 50.56%;  right: 3.19%; }

  .case-hero__logo {
    aspect-ratio: 302.111 / 62.95;
    width: auto;
    height: auto;
    left: 44.3%;
    right: 44.3%;
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   2. PRINCIPLES (TextBlock01)
   Mobile:  flex-col · px-40 · py-80 · gap-40
   Desktop: 2×2 grid · px-80 · py-160
   ========================================================================== */
.case-principles {
  width: 100%;
  background-color: var(--case-bg-white);
  padding: 80px 40px;
  flex-shrink: 0;
}

.case-principles__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.case-principle          { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.case-principle__num     { color: var(--case-text-2); }
.case-principle__title   { color: var(--case-text-1); }
.case-principle__text    { color: var(--case-text-2); }

/* ==========================================================================
   3. RESULTS — ProductTypes (video + tags) + Prompt
   Mobile:  flex-col · ProductTypes TOP · Prompt BOTTOM
   Desktop: flex-row · ProductTypes LEFT · Prompt RIGHT

   ProductTypes has its OWN 540px breakpoint (component-level container
   query — switches independently of the global mobile/laptop breakpoint).
   Prompt: bg = linear-gradient(#e9eaeb → #fff) + Prompt.BlockUI.png centered
   Max: max-h-123.12px max-w-540px aspect-1000/228 (same at every breakpoint)
   ========================================================================== */
.case-results__tags-wrap,
.case-results__prompt-wrap {
  width: 100%;
  flex-shrink: 0;
}

.case-results__tags,
.case-results__prompt {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* ProductTypes: video bg, 3-col grid centered vertically, own 540px breakpoint */
.case-results__tags {
  background-color: var(--case-bg-white);
  container-type: inline-size;
  isolation: isolate;
  transform: translateZ(0);
}

.case-tags__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  outline: none;
  border: 0;
}


/* Prompt block: square container centered vertically, image inset 12.22%
   left/right and centered vertically inside it */
.case-results__prompt {
  background: linear-gradient(to bottom, var(--case-bg-hero), var(--case-bg-white));
}

.case-prompt__container {
  position: absolute;
  aspect-ratio: 1 / 1;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.case-prompt__img-wrap {
  position: absolute;
  left: 12.22%;
  right: 12.22%;
  top: 50%;
  transform: translateY(-50%);
}

.case-results__prompt-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 228;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   4. OUTFIT UI (dark full block)

   Mobile:  aspect-ratio 390/752
     OutfitUI.Screen: position:absolute · left:50% translateX(-50%)
       top:5.32% · bottom:5.32% · aspect-ratio:1560/3376

   Desktop: aspect-ratio 1600/900 · display:flex · p:80px
     OutfitUI.Screen: flex:1 · min-h:1px · aspect-ratio:310/672
   ========================================================================== */
.case-full--outfit {
  aspect-ratio: 390 / 752;
}

.case-outfit__img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.32%;
  bottom: 5.32%;
  aspect-ratio: 1560 / 3376;
  overflow: hidden;
  z-index: 2;
}

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

/* ==========================================================================
   5. PRODUCT TO SET + BOUNDARIES

   Mobile (flex-col):
     ProductToSet: plain full-bleed image, aspect 1/1, no padding/cap
     Boundaries:   aspect 400/450 (8:9-ish) · max-h:600px · max-w:533.33px
       BoundariesAsset01: top-aligned square (aspect 1/1, left:0 right:0 top:0)
       Quote text at bottom (h:72px)

   Desktop (flex-row):
     ProductToSet: aspect 8/9, flex:1, unbounded
     Boundaries:   aspect 8/9, flex:1, unbounded
       BoundariesAsset02: portrait left:21% right:20.88% top:0 (aspect 277/460)
       Quote text at bottom
   ========================================================================== */
.case-producttoset-wrap,
.case-boundaries-wrap {
  width: 100%;
  flex-shrink: 0;
}

.case-producttoset {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.case-producttoset img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.case-boundaries-ratio {
  position: relative;
  overflow: hidden;
  background-color: var(--case-bg-hero);
  width: 100%;
  aspect-ratio: 400 / 500;
}

.case-boundaries {
  position: absolute;
  inset: 0;
}

.case-boundaries__img--mobile {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Tablet (800-1079px) position; switches to laptop position at 1080px below */
.case-boundaries__img--desktop {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 277 / 460;
  overflow: hidden;
}

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

/* Quote text base: mobile + tablet styling (12px/-0.36/lh20, wraps).
   Boundaries switches to laptop styling (15px/-0.45/lh24) at 1080px;
   Showreel switches to its own laptop styling at 800px (see below) — each
   scoped via its container since the two diverge independently. */
.case-quote {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  color: var(--case-text-2);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.42px;
  white-space: normal;
  z-index: 2;
  padding: 0 20px 32px;
}

/* ==========================================================================
   6. ANSWER UI (dark full block)

   Mobile:  aspect-ratio 390/752
     AnswerUI.Screen: position:absolute · left:50% translateX(-50%)
       top:5.32% · bottom:5.47% · aspect-ratio:390/844

   Desktop: aspect-ratio 1600/900 · display:flex · p:80px
     AnswerUI.Screen: flex:1 · min-h:1px · aspect-ratio:390/844
   ========================================================================== */
.case-full--answer {
  aspect-ratio: 390 / 752;
}

.case-answer__img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.32%;
  bottom: 5.47%;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  z-index: 2;
}

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

/* ==========================================================================
   7. OUTFIT SUMMARY (bg #f7f8fc)
   Mobile:  aspect-ratio 600/675
     BG: OutfitSummary.Asset01.png — position:absolute · left:50% · top:0 bottom:0
         aspect-ratio:522/710
     UI: OutfitSummary.ModuleUI.png centered via absolute inset:0 · p:60px
         aspect:836/436 · max-h:239.9px · max-w:460px

   Desktop: aspect-ratio 1600/900
     BG: same asset, bleeds top:-16% bottom:-12.22%, fills left:3.5% to right:43.5%
     UI right half (inset:0 0 0 50.63%): p:40px
         aspect:836/436 · max-h:333.78px · max-w:640px
   ========================================================================== */
.case-full--outfitsummary {
  aspect-ratio: 8 / 11;
  background-color: var(--case-bg-ai);
}

.case-outfitsummary__bg-mobile {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  aspect-ratio: 522 / 710;
  overflow: hidden;
}

.case-outfitsummary__bg-mobile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.case-outfitsummary__bg-desktop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.case-outfitsummary__bg-desktop {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.case-outfitsummary__ui {
  position: absolute;
  left: 11.67%;
  right: 11.67%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  padding: 0;
  z-index: 1;
}

.case-outfitsummary__ui img {
  width: 100%;
  height: auto;
  aspect-ratio: 836 / 436;
  display: block;
  max-width: none;
  max-height: none;
}

/* ==========================================================================
   8. PROMPT CONTEXT + SHOWREEL (two CR blocks)
   Mobile:  PromptContext 1:1 (max-h:600px max-w:600px) + Showreel 8:9 — stacked
   Desktop: PromptContext 8:9 (max-h:1200px max-w:1066.67px) + Showreel 8:9 — side by side

   PromptContext: black bg · p:40px
     Mobile:  PromptContext.Asset01 aspect:404/318 · max-h:393.56px · max-w:500px
     Desktop: PromptContext.Asset01 aspect:404/318 · max-h:409.31px · max-w:520px

   Showreel: fills cr--8-9
     _Asset wrapper: left:0 right:0 top:50% translateY(-50%) aspect:800/900
   ========================================================================== */
.case-info-wrap,
.case-showreel-wrap { width: 100%; flex-shrink: 0; }

/* Info CR: 1:1 on mobile (max-h:600 max-w:600), 8:9 on desktop */
.case-info-ratio {
  position: relative;
  overflow: hidden;
  background-color: var(--case-bg-black);
  width: 100%;
  aspect-ratio: 4 / 5;
}

.case-info {
  position: absolute;
  inset: 0;
  background-color: var(--case-bg-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.case-info__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 404 / 318;
}

.case-info__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

.case-ar {
  position: absolute;
  inset: 0;
}

/* Showreel.Asset01: centered, fills full height, aspect locked at 379/390
   (flattened export already includes the reflection effect baked in) */
.case-ar__frame {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  aspect-ratio: 379 / 390;
  overflow: hidden;
}

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


/* ==========================================================================
   9. PRODUCT SUMMARY (grey bg #dbdddf)
   Mobile:  CR 1:1 (max-h:600px max-w:600px), content fills via absolute
   Desktop: aspect-ratio 1600/900, content fills via absolute

   Frame: top:8% bottom:8% (84% of block height) · aspect:294/476.43 fixed,
   centered horizontally — driven by the block's own proportion, not a
   fixed max-height/max-width cap. Same rule at every breakpoint.
   ProductSummary.Asset01:    top:0 · bottom:23.42% · aspect:1744/2164
   ProductSummary.BlockUI:    top:84.64% · bottom:0.09% · aspect:1520/376
   ========================================================================== */
.case-object-product { width: 100%; flex-shrink: 0; }

.case-object-product__ratio {
  position: relative;
  overflow: hidden;
  background-color: var(--case-bg-grey);
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 800px;
}

.case-object-product__inner {
  position: absolute;
  inset: 0;
  background-color: var(--case-bg-grey);
  overflow: hidden;
}

.case-object-product__frame {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  transform: translateX(-50%);
  aspect-ratio: 294 / 476.43;
}

.case-object-product__obj {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 23.42%;
  aspect-ratio: 1744 / 2164;
  overflow: hidden;
}

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

.case-object-product__desc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 84.64%;
  bottom: 0.09%;
  aspect-ratio: 1520 / 376;
  overflow: hidden;
}

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

/* ==========================================================================
   10. PROMPT ARTWORK (bg #e9eaeb)
   Mobile:  aspect-ratio 400/600
     Strip (Asset01): left:-0.75% right:-61.25% top:0 (left-aligned, overflows right)
     PromptArtwork.BlockUI:   top:32.5% · bottom:56.17% · aspect:2000/456
     PromptArtwork.Asset02:   top:55.5% · bottom:4.7%   · aspect:3228/2036

   Desktop: aspect-ratio 1600/1000
     PromptArtwork.Asset01:   left:0 right:0 top:0 (full width strip)
     PromptArtwork.BlockUI:   top:36%   · bottom:52.33%
     PromptArtwork.Asset02:   top:53.44%· bottom:4%
   ========================================================================== */
.case-full--promptartwork {
  aspect-ratio: 400 / 600;
  background-color: var(--case-bg-hero);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.case-models__frame {
  flex: 1;
  width: 100%;
  min-height: 1px;
  position: relative;
}

.case-models__strip {
  position: absolute;
  left: -0.75%;
  right: -61.25%;
  top: 0;
  bottom: auto;
  aspect-ratio: 4096 / 1093;
  overflow: hidden;
}

.case-models__product {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 32.5%;
  bottom: 56.17%;
  aspect-ratio: 2000 / 456;
  overflow: hidden;
}

.case-models__group {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 55.5%;
  bottom: 4.7%;
  aspect-ratio: 3228 / 2036;
  overflow: hidden;
}

.case-models__strip img,
.case-models__product img,
.case-models__group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   11. PRODUCT UI (dark full block)

   Mobile:  aspect-ratio 390/752
     ProductUI.Screen: position:absolute · left:50% translateX(-50%)
       top:5.32% · bottom:5.47% · aspect-ratio:390/844

   Desktop: aspect-ratio 1600/900 · display:flex · p:80px
     ProductUI.Screen: flex:1 · min-h:1px · aspect-ratio:390/844
   ========================================================================== */
.case-full--productui {
  aspect-ratio: 390 / 752;
}

.case-productui__img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.32%;
  bottom: 5.47%;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  z-index: 2;
}

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

/* ==========================================================================
   12. STYLE SELECTION (new section)
   8-col grid, two tall portrait cards at col 3 / col 6.
   Mobile:  ratio 4:5 (max-h:800px max-w:640px)
   Desktop: ratio 16:9 (max-h:1200px max-w:2133.33px)
   ========================================================================== */
.case-styleselection-section { width: 100%; flex-shrink: 0; }

.case-styleselection-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 600;
  max-height: 800px;
  background: linear-gradient(to bottom, #e8e9eb, #fafafa);
  overflow: hidden;
}

.case-styleselection {
  position: absolute;
  inset: 0;
}

.case-styleselection__asset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 390 / 1240;
  overflow: hidden;
}

.case-styleselection__asset--1 { left: 8.25%;  right: 53.5%; }
.case-styleselection__asset--2 { left: 53.5%;  right: 8.5%;  }

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

/* ==========================================================================
   13. PRODUCT CONFIGURATION + PRODUCT VARIETY (two 1:1 CR blocks, unbounded)
   Mobile:  flex-col (stacked) — each CR is 1:1
   Desktop: flex-row (side by side)

   ProductConfiguration (left/top): bg flat #f0f0f0, p:60px
     ProductConfiguration.BlockUI: aspect:1332/1408 · flex:1 · max-h:528.53px · max-w:500px

   ProductVariety (right/bottom): bg linear-gradient(#fefefe → #e9eaec)
     ProductVariety.Asset01: left:14.81% right:14.81% top:50%+0.5px translateY(-50%) aspect:2240/1764
   ========================================================================== */
.case-review-wrap,
.case-models2-wrap { width: 100%; flex-shrink: 0; }

.case-review {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

.case-review__ui {
  position: absolute;
  left: 16.25%;
  right: 16.25%;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 1332 / 1408;
}

.case-review__ui img { width: 100%; height: 100%; display: block; }

.case-models2 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #fefefe, #e9eaec);
}

.case-models2__group {
  position: absolute;
  left: 12.96%;
  right: 12.96%;
  top: calc(50% + 0.5px);
  transform: translateY(-50%);
  aspect-ratio: 2240 / 1764;
  overflow: hidden;
}

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

/* ==========================================================================
   14. TEXT BLOCK 2 — "Tell AURA what you want."
   ========================================================================== */
.case-text2 {
  width: 100%;
  background-color: var(--case-bg-white);
  padding: 80px 20px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.case-text2__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  width: 100%;
}

.case-text2__headline { font-size: 24px; line-height: 28px; letter-spacing: -0.96px; color: var(--case-text-0); }
.case-text2__sub { color: var(--case-text-2); }

/* ==========================================================================
   DESKTOP — min-width: 1024px
   All layout transitions: stacked → side-by-side, dark blocks → 1:1 square.
   ========================================================================== */
@media (min-width: 1024px) {

  /* ---- 2. Principles: 2×2 grid, px-80 py-160 ---- */
  .case-principles {
    padding: 160px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .case-principles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 40px 20px;
    width: 100%;
    max-width: 1200px;
  }

  /* ---- 3. Results: side by side ---- */
  .case-block--results { flex-direction: row; }
  .case-results__tags-wrap,
  .case-results__prompt-wrap {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  /* ---- 4. Outfit UI: 1:1 square, inner screen top/bottom 7.81% ---- */
  .case-full--outfit { aspect-ratio: 1 / 1; }
  .case-outfit__img { top: 7.81%; bottom: 7.81%; }

  /* ---- 5. ProductToSet + Boundaries: side by side, both 8:9 ---- */
  .case-block--product-quote { flex-direction: row; }

  .case-producttoset-wrap,
  .case-boundaries-wrap {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .case-producttoset { width: 100%; aspect-ratio: 800 / 900; }

  .case-boundaries-ratio {
    width: 100%;
    aspect-ratio: 800 / 900;
    max-height: none;
    max-width: none;
  }

  .case-boundaries__img--mobile  { display: none; }
  .case-boundaries__img--desktop {
    display: block;
    bottom: 16.6%;
  }

  .case-boundaries .case-quote {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    white-space: nowrap;
    padding: 0 20px 24px;
  }

  /* ---- 6. Answer UI: 1:1 square ---- */
  .case-full--answer { aspect-ratio: 1 / 1; }
  .case-answer__img { top: 7.81%; bottom: 7.81%; }

  /* ---- 7. Outfit Summary: 1:1 square, bg centered, UI strip centered ---- */
  .case-full--outfitsummary { aspect-ratio: 1 / 1; }

  .case-outfitsummary__ui {
    top: 50%;
    left: 21.88%;
    right: 21.88%;
    bottom: auto;
    transform: translateY(-50%);
    display: block;
    padding: 0;
  }

  .case-outfitsummary__ui img {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  /* ---- 8. PromptContext + Showreel: side by side ---- */
  .case-block--info-ar { flex-direction: row; }
  .case-info-wrap,
  .case-showreel-wrap {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .case-block--info-ar .cr--8-9 {
    width: 100%;
    aspect-ratio: 800 / 900;
    max-height: none;
    max-width: none;
  }

  .case-info-ratio {
    aspect-ratio: 800 / 900;
    max-height: none;
    max-width: none;
  }

  .case-info { padding: 0; }

  .case-info__frame {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    transform: translateY(-50%);
    width: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 404 / 318;
  }

  .cr--8-9 .case-quote {
    padding: 0 20px 24px;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    white-space: nowrap;
  }

  /* ---- 9. Product Summary: 4:3 ---- */
  .case-object-product__ratio {
    aspect-ratio: 4 / 3;
    max-height: none;
    max-width: none;
  }

  /* ---- 10. Prompt Artwork: 1:1 square, group y-position updated ---- */
  .case-full--promptartwork {
    aspect-ratio: 1 / 1;
    display: block;
  }

  .case-models__frame {
    position: absolute;
    inset: 0;
  }

  .case-models__strip {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    transform: none;
    aspect-ratio: 4096 / 1093;
  }

  .case-models__group {
    top: 52.83%;
    bottom: 6%;
  }

  /* ---- 11. Product UI: 1:1 square ---- */
  .case-full--productui { aspect-ratio: 1 / 1; }
  .case-productui__img { top: 7.81%; bottom: 7.81%; }

  /* ---- 12. Style Selection: 1:1, absolute asset positioning ---- */
  .case-styleselection-ratio {
    aspect-ratio: 1 / 1;
    max-height: none;
    max-width: none;
  }

  .case-styleselection__asset--1 { left: 18.75%; right: 55.88%; }
  .case-styleselection__asset--2 { left: 55.81%; right: 18.81%; }

  /* ---- 13. Product Config + Variety: side by side, 800/900 at 1024 ---- */
  .case-block--review-models { flex-direction: row; }
  .case-review-wrap, .case-models2-wrap { flex: 1; min-width: 0; }

  .case-block--review-models .cr { aspect-ratio: 800 / 900; }

  .case-review {
    display: block;
    padding: 0;
  }

  .case-review__ui {
    position: absolute;
    top: 50%;
    left: 18.75%;
    right: 18.75%;
    transform: translateY(-50%);
    flex: none;
    width: auto;
    max-height: none;
    max-width: none;
    aspect-ratio: 1332 / 1408;
  }

  /* ---- 14. Text Block 2: bigger padding, 16px body ---- */
  .case-text2 { padding: 160px 80px; min-height: 600px; }

  .case-text2__content { gap: 13px; }

  .case-text2__sub {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: -0.48px;
  }

} /* end @media 1024px */

/* ==========================================================================
   LAPTOP — min-width: 1400px
   Dark blocks 1400×1200. Screens switch to 310/672. Font and position updates.
   ========================================================================== */
@media (min-width: 1400px) {

  /* ---- 2. Principles: 16px/26px font ---- */
  .case-principles {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.48px;
  }

  .case-principle__num,
  .case-principle__title,
  .case-principle__text { line-height: 26px; }

  /* ---- 2b. Text Block 2: min-height at laptop ---- */
  .case-text2 { min-height: 900px; }

  /* ---- 4. Outfit UI: 1400/1200, screen 310/672 at 8% ---- */
  .case-full--outfit { aspect-ratio: 1400 / 1200; }

  .case-outfit__img {
    top: 8%;
    bottom: 8%;
    aspect-ratio: 310 / 672;
  }

  /* ---- 5. Boundaries quote: 17px ---- */
  .case-boundaries .case-quote {
    font-size: 17px;
    line-height: 25px;
    letter-spacing: -0.51px;
    padding: 0 20px 40px;
  }

  /* ---- 6. Answer UI: 1400/1200, screen 310/672 ---- */
  .case-full--answer { aspect-ratio: 1400 / 1200; }

  .case-answer__img {
    top: 8%;
    bottom: 8%;
    aspect-ratio: 310 / 672;
  }

  /* ---- 7. Outfit Summary: 1600/1000, bg left strip, UI right ---- */
  .case-full--outfitsummary { aspect-ratio: 1600 / 1000; }
  .case-outfitsummary__bg-mobile  { display: none; }
  .case-outfitsummary__bg-desktop {
    display: block;
    top: 0;
    bottom: 0;
    left: 6.88%;
    right: 47.19%;
  }

  .case-outfitsummary__ui {
    left: 55.88%;
    right: 12.69%;
  }

  /* ---- 8. Showreel quote: 17px at 1400 ---- */
  .cr--8-9 .case-quote {
    font-size: 17px;
    line-height: 25px;
    letter-spacing: -0.51px;
    padding: 0 20px 40px;
  }

  /* ---- 9. Product Summary: 16:9 ---- */
  .case-object-product__ratio { aspect-ratio: 16 / 9; }

  /* ---- 10. Prompt Artwork: 1600/1260, updated y-positions ---- */
  .case-full--promptartwork { aspect-ratio: 1600 / 1260; }

  .case-models__product {
    top: 33.89%;
    bottom: 56.59%;
  }

  .case-models__group {
    top: 54.6%;
    bottom: 5.63%;
  }

  /* ---- 11. Product UI: 1400/1200, screen 310/672 ---- */
  .case-full--productui { aspect-ratio: 1400 / 1200; }

  .case-productui__img {
    top: 8%;
    bottom: 8%;
    aspect-ratio: 310 / 672;
  }

  /* ---- 8. PromptContext: 17.5% at 1400 (overrides 10% from 1024) ---- */
  .case-info__frame {
    left: 17.5%;
    right: 17.5%;
  }

  /* ---- 12. Style Selection: 1400/900, updated asset positions ---- */
  .case-styleselection-ratio { aspect-ratio: 1400 / 900; }

  .case-styleselection__asset--1 { left: 23.39%; right: 60.89%; }
  .case-styleselection__asset--2 { left: 60.89%; right: 23.39%; }

  /* ---- 13. Product Config + Variety: 700/700 (square) ---- */
  .case-block--review-models .cr { aspect-ratio: 700 / 700; }

  .case-review__ui {
    left: 26.5%;
    right: 26.63%;
  }

} /* end @media 1400px */

/* ==========================================================================
   1920px — font scaling for text blocks
   ========================================================================== */
@media (min-width: 1920px) {

  .case-principles {
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.6px;
    min-height: 800px;
  }

  .case-principles__grid { max-width: 1400px; gap: 80px 20px; }

  .case-principle__num,
  .case-principle__title,
  .case-principle__text { line-height: 32px; }

  .case-boundaries .case-quote,
  .cr--8-9 .case-quote {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.6px;
    padding-bottom: 40px;
  }

  .case-text2 { min-height: 900px; }

  .case-text2__content { gap: 16px; }

  .case-text2__headline {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -1.12px;
  }

  .case-text2__sub {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.6px;
  }

}