/* ============================================================
   KIRDEC — case-page styles. Loaded AFTER styles.css, which owns
   the .page zoom scale-to-fill system, the header, @font-face, tokens.
   All values are native 1440 px; the shared zoom system scales them.
   (768 / 375 breakpoints added later.)
   ============================================================ */

/* Header sits above the cover (the cover is positioned + later in DOM, so it
   would otherwise paint over the absolutely-positioned header notch). */
.hero-header { z-index: 30; }

/* Logo link back to main — display:contents keeps the reused header
   logo elements exactly where styles.css positions them, just clickable. */
.hero-logo-link { display: contents; cursor: pointer; }

/* Case frames end flush at the last block, so drop the shared .page
   bottom padding (48/40px, meant for the main page) that would otherwise
   leave a white strip below block 9. Case-page only (styles.css untouched). */
.page { padding-bottom: 0; }

/* ---- Block 1: cover — live text + hanging-tag photo + white fade ---- */
.case-cover {
  position: relative;
  width: 100%;
  height: 810px;
  background: #ffffff;
  overflow: hidden;
  color: #000000;
}
.case-cover__eyebrow {
  position: absolute;
  left: 0; top: 107.32px;
  width: 100%;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 35.462px;
  font-weight: 410;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}
.case-cover__title {
  position: absolute;
  left: 0; top: 208.64px;
  width: 100%;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 44.468px;
  font-weight: 760;
  font-variation-settings: "wdth" 132;
  line-height: normal;
}
.case-cover__desc {
  position: absolute;
  font-size: 18.013px;
  font-weight: 540;
  font-variation-settings: "wdth" 132;
}
.case-cover__desc p { margin: 0; line-height: 24.017px; }
.case-cover__desc--1 { left: 442.81px; top: 358px; width: 554.635px; }
.case-cover__desc--2 { left: 442px;    top: 550px; width: 617px; }

.case-cover__tag {
  position: absolute;
  left: 769.28px; top: -159.11px;
  width: 983.944px; height: 1088.064px;
  display: flex; align-items: center; justify-content: center;
}
.case-cover__tag-rot { flex: none; transform: rotate(64.38deg); }
.case-cover__tag-rot img {
  display: block;
  width: 887.503px; height: 665.627px;
  object-fit: cover;
}
.case-cover__fade {
  position: absolute;
  left: 50%; top: 755.77px;
  transform: translateX(-50%);
  width: 1490.534px; height: 173.37px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #ffffff 91.347%);
  pointer-events: none;
}

/* ---- Blocks 2-9: stacked WebP images (contiguous). Per-breakpoint sets
   toggled with scoped rules (higher specificity than the generic .bp-*). ---- */
.case-block { display: none; width: 100%; }
.case-block.bp-desktop { display: block; }

/* ---- Fixed CTA (37:8063 style) — inside .page so the zoom scales it.
   Bottom-right, inset from the corner (not flush). ---- */
.case-cta {
  position: fixed;
  right: 40px; bottom: 40px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  border: 4px solid #7497ff;
  border-radius: 46px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
  line-height: normal;
  font-weight: 410;
  font-variation-settings: "wdth" 132;
}

/* ============================================================
   TABLET — 768 case frame (37:8236). Active 572–1103 (zoom scales it).
   ============================================================ */
@media (max-width: 1103px) {
  /* block sets — Figma exports the wider "bleed" blocks already clipped to
     the 768 frame, so every tablet block is displayed full-width. */
  .case-block.bp-desktop { display: none; }
  .case-block.bp-tablet { display: block; }
  /* b7/b8 overlap by 57px in the frame (b8 y=3407 < b7 end 3464) */
  .case-block--bleed8 { margin-top: -57px; }

  /* cover — 768 (cover-11 37:8237, node centred-bleed at frame x -336) */
  .case-cover { height: 584px; }
  .case-cover__eyebrow { top: 80px; font-size: 32px; }
  .case-cover__title { top: 164px; font-size: 40px; }
  .case-cover__desc { font-size: 16px; }
  .case-cover__desc p { line-height: 20px; }
  .case-cover__desc--1 { left: 106.81px; top: 263px; width: 554.635px; }
  .case-cover__desc--2 { left: 106.81px; top: 405px; width: 554.635px; }
  .case-cover__tag {
    left: 443px; top: -31px;
    width: 580.323px; height: 641.733px;
  }
  .case-cover__tag-rot img { width: 523.443px; height: 392.582px; }
  .case-cover__fade { display: none; }
}

/* ============================================================
   MOBILE — 375 case frame (37:8511). Active ≤571 (zoom scales it).
   Cover text is split into live nodes (37:8512/8513/8514/8515);
   the blob 37:8516 sits fully off-frame (x=452 in a 375 frame) so it
   is not rendered. No hanging-tag photo on mobile.
   ============================================================ */
@media (max-width: 571px) {
  /* block sets — turn off tablet, show the 375 set (all clipped to 375-wide) */
  .case-block.bp-tablet { display: none; }
  .case-block.bp-mobile { display: block; }
  /* stack corrections vs frame y-origins (native 375 px):
     b3 overlaps b2 by 36, b4 sits 26.5 below b3, b7 overlaps b6 by 6,
     b8 overlaps b7 by 2; the rest are contiguous. */
  .case-block--m3 { margin-top: -36px; }
  .case-block--m4 { margin-top: 26.5px; }
  .case-block--m7 { margin-top: -6px; }
  .case-block--m8 { margin-top: -2px; }

  /* cover — 375 (frame height 639: text y=96..619, b2 begins at y=639) */
  .case-cover { height: 639px; }
  .case-cover__eyebrow { top: 96px; font-size: 20px; }
  .case-cover__title { top: 152px; font-size: 24px; }
  .case-cover__desc { font-size: 14px; font-weight: 410; }
  .case-cover__desc p { line-height: 22px; }
  .case-cover__desc--1 { left: 16px; top: 213px; width: 346px; }
  .case-cover__desc--2 { left: 16px; top: 399px; width: 346px; }
  .case-cover__tag { display: none; }
}