/* A separate mobile composition. Desktop's scene variables are deliberately ignored here. */
@media (max-width: 760px) {
  .header-inner { justify-content: space-between; }
  .header-contact { margin-left: auto; font-size: 12px; }
  .opening { padding-top: 112px; padding-bottom: 82px; }
  .opening h1 { font-size: clamp(61px, 16vw, 95px); line-height: .88; margin: 20px 0 25px; }
  .opening-lede { font-size: 17px; line-height: 1.52; }
  .opening-actions { margin-top: 26px; }
  .portrait { width: min(69%, 345px); margin-top: 45px; margin-bottom: 64px; }
  .portrait img { height: clamp(260px, 79vw, 375px); }
  .case-intro h2 { white-space: normal; font-size: clamp(63px, 16vw, 102px); }
  .case-intro > p { line-height: 1.58; }
  .technical-heading > p:last-child, .technical-list p, .hotel-facts p { line-height: 1.65; }
  .trajectory-meta { gap: 10px; }
  .perkup-lead h2 { font-size: clamp(82px, 20vw, 138px); }
  .perkup-fields article { position: relative; min-height: 245px; padding: 31px 4px 39px 0; }
  .perkup-fields article > span { color: #e8bb82; }
  .perkup-fields h3 { font-size: clamp(39px, 10.5vw, 58px); max-width: 360px; }
  .perkup-fields p { max-width: 370px; line-height: 1.65; }
  .perkup-stack { grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(247,240,232,.24); }
  .perkup-stack > div { min-height: 115px; border-bottom: 1px solid rgba(247,240,232,.24); }
  .perkup-stack > div:last-child { grid-column: 1 / -1; }
  .perkup-stack strong { font-size: 16px; line-height: 1.45; }
  .recognition-layout { padding-top: 88px; padding-bottom: 100px; }
  .recognition h2 { font-size: clamp(49px, 12.5vw, 76px); }
  .contact h2 { overflow-wrap: anywhere; }
}

@media (max-width: 760px) and (min-height: 651px) and (prefers-reduced-motion: no-preference) {
  .lura-motion { height: 235svh; }
  .lura-stage, .hotel-stage, .work-stage { min-height: 0; height: 100svh; }
  .lura-stage { background: #e6ded3; }
  .lura-stage:before { left: -.12em; top: -.06em; font-size: 100vw; }
  .stage-index { top: 20px; left: 20px; right: 20px; }
  .stage-tail { display: none; }
  .lura-start { top: 11svh; left: 22px; right: 22px; width: auto; opacity: var(--m-lura-start, 1); }
  .lura-start strong { font-size: clamp(39px, 10.2vw, 62px); max-width: 650px; line-height: 1.03; }
  .lura-frame { left: 50%; top: var(--m-lura-top, 70svh); width: var(--m-lura-width, 40vw); height: auto; aspect-ratio: 390 / 844; max-width: none; border: 5px solid #fffaf3; transform: translate(-50%, -50%); box-shadow: 0 20px 55px rgba(32,24,20,.24); }
  .lura-frame picture, .hotel-frame picture { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lura-frame img, .hotel-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .lura-frame figcaption { left: -5px; bottom: -23px; font-size: 7px; letter-spacing: .11em; opacity: var(--m-lura-caption, 0); }
  .lura-result { top: 44svh; bottom: auto; left: 22px; right: 22px; width: auto; opacity: var(--m-lura-result, 0); transform: translateY(var(--m-lura-result-y, 24px)); }
  .lura-result strong { font-size: clamp(34px, 8.9vw, 52px); line-height: 1.01; }
  .lura-result p { font-size: clamp(13px, 3.5vw, 16px); line-height: 1.56; margin-top: 17px; }

  .hotel-bridge { height: 215svh; }
  .hotel-stage { background: var(--m-hotel-bg, #292622); }
  .bridge-folio { left: -2vw; bottom: 0; font-size: 82vw; }
  .bridge-early { top: 12svh; left: 22px; right: 22px; width: auto; opacity: var(--m-hotel-early, 1); }
  .bridge-early strong { font-size: clamp(43px, 10.5vw, 62px); max-width: 480px; }
  .hotel-frame { left: 50%; top: var(--m-hotel-top, 70svh); width: var(--m-hotel-width, 25vw); height: auto; aspect-ratio: 390 / 844; transform: translate(-50%, -50%); border: 2px solid #e4c18a; box-shadow: 0 24px 60px rgba(0,0,0,.32); }
  .hotel-frame figcaption { top: -22px; left: -2px; font-size: 7px; letter-spacing: .1em; opacity: var(--m-hotel-caption, 0); }
  .bridge-title { top: 48svh; bottom: auto; left: 22px; right: 22px; width: auto; background: none; padding: 0; opacity: var(--m-hotel-title, 0); transform: translateY(var(--m-hotel-title-y, 28px)); }
  .bridge-title h2 { font-size: clamp(51px, 12.6vw, 76px); line-height: .96; }
  .bridge-title p { font-size: clamp(13px, 3.6vw, 16px); line-height: 1.55; margin-top: 16px; max-width: 380px; }

  .work-bridge { height: 175svh; }
  .work-stage { background: linear-gradient(180deg, #172735 0, #172735 var(--m-work-veil, 52%), #f2eee7 var(--m-work-veil, 52%), #f2eee7 100%); }
  .work-start { top: 12svh; left: 22px; right: 22px; width: auto; font-size: clamp(40px, 10.2vw, 58px); opacity: var(--m-work-start, 1); }
  .booking-frame { left: 50%; top: var(--m-work-top, 64svh); width: var(--m-work-width, 60vw); height: var(--m-work-height, 51svh); transform: translate(-50%, -50%); border: 5px solid #c59a55; box-shadow: 0 24px 54px rgba(37,30,24,.22); }
  .booking-frame picture { opacity: var(--m-work-image, 1); }
  .booking-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .booking-frame figcaption { bottom: 0; opacity: var(--m-work-image, 1); font-size: 7px; }
  .work-title { top: 28svh; left: 22px; right: 22px; width: auto; opacity: var(--m-work-title, 0); transform: translateY(var(--m-work-title-y, 28px)); }
  .work-title strong { font-size: clamp(59px, 14.5vw, 91px); line-height: .93; }
  .work-title p { font-size: 15px; line-height: 1.5; margin-top: 20px; max-width: 345px; }
}

@media (max-width: 360px) {
  .opening h1 { font-size: 58px; }
  .lura-result { top: 40svh; }
  .lura-result strong { font-size: 31px; }
  .lura-result p { font-size: 12.5px; }
  .bridge-title h2 { font-size: 47px; }
  .work-title strong { font-size: 54px; }
}