/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   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: 800 / 900;  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.case-hero__asset--02-inner {
  width: 100cqh;
  height: 100cqw;
  transform: rotate(-90deg);
  overflow: hidden;
}

.case-hero__asset--02-inner img { object-fit: cover; }

/* "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: 242.747 / 184.615;  top: 0;      left: 53.42%;  right: -14.1%; }
.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 { aspect-ratio: 255.00001525878906 / 193.93418884277344; left: 68.12%; 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 { aspect-ratio: 415 / 315.618; top: -30px; left: 75.94%; right: -1.88%; }
  .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); line-height: var(--case-lh); }
.case-principle__title   { color: var(--case-text-1); line-height: var(--case-lh); }
.case-principle__text    { color: var(--case-text-2); line-height: var(--case-lh); }

/* ==========================================================================
   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;
  transform: scale(1.02);
  will-change: transform;
  backface-visibility: hidden;
}


/* 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 / 450;
}

.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: 21.75%;
  right: 21.75%;
  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: 12px;
  line-height: 20px;
  letter-spacing: -0.36px;
  white-space: normal;
  z-index: 2;
}

/* ==========================================================================
   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: 600 / 675;
  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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-outfitsummary__bg-desktop {
  display: none;
  position: absolute;
  top: -16%;
  bottom: -12.22%;
  left: 3.5%;
  right: 43.5%;
  overflow: hidden;
}

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

.case-outfitsummary__ui {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  z-index: 1;
}

.case-outfitsummary__ui img {
  width: 100%;
  max-width: 460px;
  max-height: 239.9px;
  aspect-ratio: 836 / 436;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   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: 1 / 1;
  max-height: 600px;
}

.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%;
  max-width: 500px;
  max-height: 393.56px;
  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;
}

/* Showreel quote: only 2 states (mobile / laptop), switches at 800px */
@media (min-width: 800px) {
  .cr--8-9 .case-quote {
    padding: 0 10px 24px;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   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 600/675
     Inner frame: flex:1 · w:100%
     PromptArtwork.Asset01:   top:0     · bottom:76.3%  · aspect:4096/1093
     PromptArtwork.BlockUI:   top:34.52%· bottom:51.55% · aspect:2000/456
     PromptArtwork.Asset02:   top:58.37%· bottom:4.3%   · 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: 600 / 675;
  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: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 76.15%;
  aspect-ratio: 4096 / 1093;
  overflow: hidden;
}

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

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

/* Slight overscan: each layer is scaled up so its own edge bleeds past the
   parent's overflow:hidden boundary, masking the 1px outline that
   percentage-positioned/cropped images otherwise show at their edge. */
.case-models__strip img,
.case-models__product img,
.case-models__group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transform-origin: center center;
}

/* ==========================================================================
   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 / 500;
  max-height: 800px;
  background: linear-gradient(to bottom, #e8e9eb, #fafafa);
  overflow: hidden;
}

.case-styleselection {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: stretch;
  padding: 60px 0;
}

.case-styleselection__asset {
  position: relative;
  height: 100%;
  aspect-ratio: 390 / 1240;
  justify-self: center;
  overflow: hidden;
}

.case-styleselection__asset--1 { grid-column: 3; }
.case-styleselection__asset--2 { grid-column: 6; }

.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;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  overflow: hidden;
  background-color: #f0f0f0;
}

.case-review__ui {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 1px;
  max-height: 528.53px;
  max-width: 500px;
  aspect-ratio: 1332 / 1408;
  overflow: hidden;
}

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

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

.case-models2__group {
  position: absolute;
  left: 14.81%;
  right: 14.81%;
  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 40px;
  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.6px; color: var(--case-text-0); }
.case-text2__sub { color: var(--case-text-2); line-height: var(--case-lh); }

/* ==========================================================================
   DESKTOP — min-width: 800px
   ========================================================================== */
@media (min-width: 800px) {

  /* ---- 2. Principles: 2×2 grid ---- */
  .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;
    max-width: 1000px;
  }

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

  /* ---- 4. Outfit UI: tablet 100vw/100vh clamped [1:1, 16:9], pad:40 → laptop 1600/900 pad:80 at 1080px ---- */
  .case-full--outfit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }

  .case-outfit__img {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex: 1;
    min-height: 1px;
    width: auto;
    max-width: 100%;
    aspect-ratio: 1560 / 3376;
  }

  /* ---- 5. ProductToSet + Boundaries: side by side, both 8:9 unbounded ---- */
  .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; }

  /* ---- 6. Answer UI: tablet 100vw/100vh clamped [1:1, 16:9], pad:40 → laptop 1600/900 pad:80 at 1080px ---- */
  .case-full--answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }

  .case-answer__img {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex: 1;
    min-height: 1px;
    width: auto;
    aspect-ratio: 390 / 844;
  }

  /* ---- 7. Outfit Summary: 1600/900, bg in left half, UI in right half ---- */
  .case-full--outfitsummary { aspect-ratio: 1600 / 900; }
  .case-outfitsummary__bg-mobile  { display: none; }
  .case-outfitsummary__bg-desktop { display: block; }

  .case-outfitsummary__ui {
    inset: 0 0 0 50.63%;
    padding: 40px;
  }

  .case-outfitsummary__ui img {
    max-width: 640px;
    max-height: 333.78px;
  }

  /* ---- 8. PromptContext + Showreel: side by side, both 8:9 unbounded ---- */
  .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%;
    max-height: none;
    max-width: none;
  }

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

  /* Desktop: fixed aspect-ratio box (left/right %) instead of padding+cap */
  .case-info { padding: 0; }

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

  /* ---- 10. Prompt Artwork: 1600/1100, elements positioned directly ---- */
  .case-full--promptartwork {
    aspect-ratio: 1600 / 1100;
    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__product {
    left: calc(54.17% - 66.23px);
    top: 36%;
    bottom: 52.33%;
  }

  .case-models__group {
    left: calc(54.17% - 56.58px);
    top: 53.44%;
    bottom: 4%;
  }

  /* ---- 11. Product UI: tablet 100vw/100vh clamped [1:1, 16:9], pad:40 → laptop 1600/900 pad:80 at 1080px ---- */
  .case-full--productui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }

  .case-productui__img {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex: 1;
    min-height: 1px;
    width: auto;
    aspect-ratio: 390 / 844;
  }


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

  /* Desktop: ProductConfiguration switches to fixed aspect-ratio box (left/right %) */
  .case-review {
    display: block;
    padding: 0;
  }

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

  /* ---- 14. Text Block 2: bigger padding ---- */
  .case-text2 { padding: 160px 80px; }

} /* end @media desktop */

/* ==========================================================================
   TABLET RANGE — 800–1079px (OutfitUI / AnswerUI / ProductUI only)
   Block always fills the full width (100vw), matching the full-bleed blocks
   around it — never leaves side gaps. Height is derived from the viewport's
   own aspect ratio, clamped between 1:1 and 16:9:
     - viewport ratio < 1:1  → box clamps to a 1:1 square (100vw × 100vw)
     - 1:1 ≤ ratio ≤ 16:9    → box fills viewport naturally (100vw × 100vh)
     - ratio > 16:9          → box clamps to 16:9 via width (height:100vw*9/16),
                               which exceeds 100vh — it overflows vertically
                               rather than shrinking narrower than the viewport
   Scoped strictly below 1080px so it doesn't fight the laptop breakpoint.
   ========================================================================== */
@media (min-width: 800px) and (max-width: 1079.98px) {

  .case-full--outfit,
  .case-full--answer,
  .case-full--productui {
    width: 100vw;
    height: 100vw;
  }

  .case-object-product__ratio {
    width: 100vw;
    height: 100vw;
    max-width: none;
    max-height: none;
  }

}

@media (min-width: 800px) and (max-width: 1079.98px) and (min-aspect-ratio: 1/1) {

  .case-full--outfit,
  .case-full--answer,
  .case-full--productui,
  .case-object-product__ratio {
    height: 100vh;
  }

}

@media (min-width: 800px) and (max-width: 1079.98px) and (min-aspect-ratio: 16/9) {

  .case-full--outfit,
  .case-full--answer,
  .case-full--productui,
  .case-object-product__ratio {
    width: 100vw;
    height: auto;
    aspect-ratio: 16 / 9;
  }

}

/* ==========================================================================
   LAPTOP — min-width: 1080px
   OutfitUI / AnswerUI / ProductUI have their OWN breakpoint independent of
   the page's 800px split: tablet (800–1079px, pad:40, viewport-clamped) →
   laptop (≥1080px, pad:80, 1600/900). OutfitUI.Screen's own aspect also changes
   (1560/3376 tablet → 310/672 laptop); Answer/Product screens stay 390/844.

   Boundaries also has its own tablet→laptop split here: image position
   (21.75%/21.75% tablet → 21%/20.88% laptop) and quote text size
   (12px tablet → 15px laptop), independent of Showreel's own 800px switch.
   ========================================================================== */
@media (min-width: 1080px) {

  .case-full--outfit {
    aspect-ratio: 1600 / 900;
    padding: 80px;
  }

  .case-outfit__img {
    aspect-ratio: 310 / 672;
  }

  .case-full--answer {
    aspect-ratio: 1600 / 900;
    padding: 80px;
  }

  .case-full--productui {
    aspect-ratio: 1600 / 900;
    padding: 80px;
  }

  .case-object-product__ratio {
    aspect-ratio: 1600 / 900;
    max-width: none;
    max-height: none;
  }

  .case-boundaries__img--desktop {
    left: 21%;
    right: 20.88%;
  }

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

} /* end @media laptop */

/* ==========================================================================
   STYLE SELECTION — own breakpoint at 1200px (not 1080px like the other
   laptop-only components). Figma only defines mobile/laptop variants for
   this component, so it keeps the mobile ratio (4:5, capped) and padding
   (60px) all the way up to 1200px, then switches to 16:9/uncapped/100px.
   ========================================================================== */
@media (min-width: 1200px) {

  .case-styleselection-ratio {
    aspect-ratio: 1600 / 900;
    max-height: none;
    max-width: none;
  }

  .case-styleselection { padding: 100px 0; }

}