/* MechanicWithIQ — exhibits: the five compositions + Index (desktop geometry).
   Elite + Bespalove keep their approved geometry (the 1440/390 states are never redesigned);
   MONSI + TissuCare are rebuilt as one-scene compositions (see responsive.css for the
   medium ranges — the supporting-object sizing is shared across 640–1099 landscape and
   desktop so the 1099→1100 boundary is continuous, not a cliff). */

/* ---------- journey + pinned stage ---------- */
.journey { height: 1050vh; } /* 950vh of pinned scrub + 100vh stage */
.stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: var(--base);
}
.layer { position: absolute; inset: 0; }

/* ---------- INTRO (approved composition) ---------- */
.l-intro { display: flex; flex-direction: column; padding: 0 var(--margin); }
.intro-topbar {
  height: 72px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.intro-topbar .word { font-weight: 700; font-family: var(--font-display); }
.intro-topbar .right { color: var(--muted); }
.intro-topbar .right-m { display: none; } /* mobile-only compact location label */
.intro-main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
h1.monument {
  font-family: var(--font-display);
  font-size: clamp(140px, 18vw, 237px);
  font-weight: 700; line-height: 0.86; letter-spacing: -0.025em; text-transform: uppercase;
  transform-origin: left center;
  will-change: transform, opacity;
}
h1.monument span { display: block; }
h1.monument .l2 { margin-left: clamp(56px, 8.6vw, 96px); }
h1.monument .l3 { margin-left: clamp(112px, 17vw, 192px); }
.descriptor { margin-top: 40px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.intro-bottombar {
  height: 64px; flex: none; border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.intro-bottombar .caps { display: flex; gap: 14px; align-items: baseline; }
.intro-bottombar .caps b { font-size: 12px; color: var(--ink); }
.intro-bottombar .caps span { color: var(--muted); font-size: 10px; }
.intro-bottombar .next { font-weight: 700; }

/* ---------- ELITE (approved composition, geometry preserved) ---------- */
.l-elite { display: flex; flex-direction: column; padding: 72px var(--margin) 0; }
.elite-main {
  flex: 1; display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr; column-gap: 24px; padding-top: 12px;
}
.l-elite .info { grid-column: 1 / 4; display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
.l-elite h2 {
  margin-top: 18px; font-family: var(--font-display);
  font-size: clamp(52px, 4.5vw, 64px); /* 64px at the approved 1440 point; the clamp only guards the title column below it */
  font-weight: 700; line-height: 0.92; letter-spacing: -0.03em;
}
.l-elite .meta { margin-top: 18px; font-size: 12px; line-height: 1.7; color: var(--muted); letter-spacing: 0.04em; }
.l-elite .view { margin-top: 28px; }
.l-elite .media { grid-column: 5 / 13; align-self: end; height: min(600px, calc(100vh - 160px)); margin-bottom: 0; will-change: transform, opacity; }

/* ---------- BESPALOVE (approved full-bleed state) ---------- */
.l-bespalove { background: #0E0E0D; color: #F1F0EC; }
.plane {
  position: absolute; inset: 0; overflow: hidden;
  background: #0E0E0D;
  will-change: transform, opacity;
}
.plane .block { position: absolute; inset: 0; }
.plane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* authentic colors */
.scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,13,0.62) 0%, rgba(14,14,13,0.05) 34%, rgba(14,14,13,0.05) 58%, rgba(14,14,13,0.78) 100%); }
.title-over { position: absolute; left: 40px; bottom: 88px; z-index: 2; }
.title-over h2 {
  font-family: var(--font-display); font-size: 104px; font-weight: 700; line-height: 0.92; letter-spacing: -0.03em;
}
.title-over .sub { margin-top: 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }
.l-bespalove .view { position: absolute; right: 40px; bottom: 104px; z-index: 2; color: #F1F0EC; border-bottom-color: #F1F0EC; }
.besp-bottombar {
  position: absolute; left: 40px; right: 40px; bottom: 32px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7;
}

/* ---------- TISSUCARE — one scene: dominant desktop field + small supporting mobile ---------- */
.l-tissucare { display: flex; flex-direction: column; padding: 72px var(--margin) 0; }
.tissu-main {
  position: relative; flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; row-gap: 14px; padding-top: 12px;
}
.l-tissucare .info {
  grid-column: 1 / 13; grid-row: 1;
  display: flex; flex-direction: row; align-items: baseline; gap: 28px; padding: 4px 0 8px;
}
.l-tissucare h2 { font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; }
.l-tissucare .meta { font-size: 12px; line-height: 1.7; color: var(--muted); letter-spacing: 0.04em; }
.l-tissucare .view { margin-left: auto; }
.l-tissucare .media-desktop {
  grid-column: 1 / 13; grid-row: 2; align-self: center; justify-self: center;
  height: min(720px, calc(100vh - 220px), 52vw); width: auto; aspect-ratio: 8 / 5;
  max-width: 100%; z-index: 1; will-change: transform, opacity;
}
.l-tissucare .media-desktop img { object-fit: contain; object-position: center; }
/* the supporting object: the fold's hero region, top-anchored in a deliberate 390:660 frame
   (nav + headline + copy + "Request a Quote" CTA all land above the cut — the phone's
   semantic core; only empty lower-page background is cropped). Its height tracks ~54% of
   the desktop field's height through the same min() terms the field itself uses — the
   shared formula with the medium-landscape block makes the 1099→1100 boundary continuous. */
.l-tissucare .media-mobile {
  position: absolute; right: 3%; bottom: 24px;
  height: min(calc(52vw * 0.54), calc((100vh - 220px) * 0.54), calc(720px * 0.54));
  width: auto; aspect-ratio: 390 / 660;
  z-index: 3; will-change: transform, opacity;
}
.l-tissucare .media-mobile img { object-fit: cover; object-position: center top; }

/* ---------- MONSI — one scene: desktop primary + one overlapping mobile object ---------- */
.l-monsi { display: flex; flex-direction: column; padding: 72px var(--margin) 0; }
.monsi-main {
  position: relative; flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; row-gap: 14px; padding-top: 12px;
}
.l-monsi .kicker-row { grid-column: 1 / 4; grid-row: 1; align-self: center; }
.l-monsi .monsi-id {
  grid-column: 4 / 13; grid-row: 1; display: flex; align-items: baseline; justify-content: flex-end; gap: 32px;
}
.l-monsi .title, .l-monsi .meta-v { grid-column: auto; grid-row: auto; align-self: auto; }
.l-monsi h2 { font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; }
.l-monsi .meta-v { display: flex; align-items: baseline; gap: 24px; }
.l-monsi .meta { font-size: 12px; line-height: 1.7; color: var(--muted); letter-spacing: 0.04em; }
.l-monsi .view { margin-top: 0; }
.l-monsi .media-hero {
  grid-column: 1 / 13; grid-row: 2; align-self: center; justify-self: center;
  height: min(700px, calc(100vh - 230px), 52vw); width: auto; aspect-ratio: 8 / 5;
  max-width: 100%; z-index: 1; will-change: transform, opacity;
}
.l-monsi .media-hero img { object-fit: contain; object-position: center; }
/* tile-b: the mobile hero as the single supporting object, ~54% of the field's height and
   overlapping its lower-right edge — same shared formula as the medium-landscape block so
   the 1099→1100 boundary stays continuous. */
.l-monsi .tile-b {
  display: block; position: absolute; right: 3%; bottom: 24px;
  height: min(calc(52vw * 0.54), calc((100vh - 220px) * 0.54), calc(700px * 0.54));
  width: auto; aspect-ratio: 390 / 560;
  z-index: 3; will-change: transform, opacity;
}
.l-monsi .tile-b img { object-fit: contain; object-position: center top; }

/* ---------- INDEX — list + meaningful project-specific preview ---------- */
.index-view {
  height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  column-gap: 48px; align-items: center; padding: 72px var(--margin) 64px;
}
.l-index .index-wrap { position: absolute; inset: 0; height: auto; }
.l-index .index-view { position: static; height: 100%; }
.list { display: flex; flex-direction: column; justify-content: center; }
.index-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.index-head .count { color: var(--muted); }
.rows { list-style: none; }
.row {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline;
  width: 100%; padding: 22px 14px; border: none; border-bottom: 1px solid var(--hair);
  background: none; text-align: left; cursor: pointer; font-family: var(--font-body); color: var(--ink);
  margin: 0 -14px; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.row .n { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.row .name { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.row .cat { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); align-self: center; }
.row.active { background: var(--ink); color: var(--base); }
.row.active .n { color: var(--base); font-weight: 700; }
.row.active .cat { color: var(--muted-invert); }
@media (hover: hover) and (pointer: fine) { .row:hover { background: var(--base-2); } .row.active:hover { background: var(--ink); } }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.preview-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.preview-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.preview { width: min(100%, calc((100vh - 170px) * var(--preview-ratio-num, 1.5))); height: auto; aspect-ratio: 3 / 2; max-height: none; }
.preview .block { background: var(--base); }
.preview .pv { opacity: 0; transition: opacity var(--dur-standard) var(--ease-out); object-fit: contain; object-position: center; }
.preview .pv.show { opacity: 1; }
.index-bottombar {
  position: absolute; left: var(--margin); right: var(--margin); bottom: 0; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.index-bottombar .right { color: var(--muted); }
.index-wrap { position: relative; height: 100vh; }

/* Desktop Index handoff: the animated clone resolves into the single functional Index
   at the exact end of the 950vh scrub. The negative overlap removes the duplicate
   full-screen Index that previously followed the clone. */
@media (min-width: 640px) {
  #index-section {
    margin-top: -100vh; opacity: 0; pointer-events: none;
    position: relative; z-index: 10; background: var(--base);
  }
  #index-section.handoff-ready { opacity: 1; pointer-events: auto; }
}