/* Wrappers preserve the desktop composition. Mobile content pans within clear bounds. */
.mobile-method-viewport,.mobile-method-track{display:contents}
@media(max-width:820px), (max-width:1024px) and (max-height:500px){
  /* A separate photo survives blocked autoplay and video loading on phones. */
  .global-photo-bg{display:block;position:fixed;inset:0;z-index:0;height:100vh;height:100lvh;pointer-events:none;background:#0e1410 url('assets/hero-intro-poster.jpg') center/cover no-repeat}
  .hero-flow--loop .global-photo-bg{background-image:url('assets/hero-intro-lastframe.jpg')}
  .global-video-bg{opacity:0}
  .hero-video-ready .global-video-bg{opacity:1}
  #metod{--mobile-method-scroll:1;--method-bottom:calc(84px + env(safe-area-inset-bottom,0px));scroll-margin-top:0}
  #metod .method-sticky{margin-top:calc(-1 * var(--method-banner))}
  #metod .method-intro{min-height:0;padding:10px 16px;background:#101a14;font:700 15px/1.35 'Manrope',sans-serif;letter-spacing:0;text-align:left}
  #metod .method-intro.on{letter-spacing:0}
  #metod.method-leaving .method-intro{visibility:hidden}
  #metod .method-intro-subtitle{margin-top:3px;font:400 12px/1.4 'Manrope',sans-serif;color:#c7cebd}
  #metod .method-scene{padding-inline:16px}
  #metod .mobile-method-viewport{position:absolute;z-index:2;inset:calc(var(--method-header) + var(--method-banner) + 16px) 16px var(--method-bottom);display:block;overflow:hidden}
  #metod .mobile-method-track{position:relative;display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:100%;transform:translateY(var(--mobile-method-pan,0px));transition:none}
  #metod .scene-copy,#metod .lead{font:400 16px/1.55 'Manrope',sans-serif}
  #metod .scene-copy h2{font:700 clamp(23px,6vw,30px)/1.2 'Manrope',sans-serif;letter-spacing:-.02em;margin:6px 0 14px;text-wrap:balance}
  #metod .scene-copy h3{font:700 20px/1.3 'Manrope',sans-serif}
  #metod .scene-number{font-size:12px}
  #metod #method-0 .scene-copy{order:0;width:100%;padding:18px}
  #metod #method-0 .scene-copy,
  #metod .scene-two>div,
  #metod .method-steps>div,
  #metod #method-5 .work-pair__copy{background:rgba(14,20,16,.64);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  #metod .method-heroine{order:1;position:relative;height:230px;width:auto;max-width:100%;align-self:center;right:auto;bottom:auto;margin:0}
  #metod .apparatus-grid,#metod #method-2 .apparatus-grid{grid-template-columns:1fr;width:100%;gap:12px;margin:18px 0 0}
  #metod .apparatus-grid figure{position:relative;display:block;min-height:138px;overflow:hidden;border-radius:16px}
  #metod .apparatus-grid img{position:absolute;inset:0 auto 0 0;height:100%;width:34%;object-fit:cover}
  #metod .apparatus-grid figcaption{margin-left:34%;padding:14px;font:400 15px/1.5 'Manrope',sans-serif;overflow-wrap:break-word}
  #metod .apparatus-grid figcaption b{font-weight:700}
  #metod .rating-grid{gap:14px;margin:18px 0}
  #metod .rating-grid a{min-height:142px;padding:20px}
  #metod .rating-grid b{font-size:46px}
  #metod.method-paper-ready #method-3 .paper-layout{margin:0}
  #metod.method-paper-ready #method-3 .paper-viewport{left:16px;right:16px;padding:0}
  #metod.method-paper-ready #method-3 .paper-argument p{font-size:15px;line-height:1.55}
  #metod #method-results .results-copy{left:16px;right:16px;width:auto}
  #metod #method-results .results-intro{font-size:14px;line-height:1.45}
  #metod #method-results .results-note{font-size:12px;line-height:1.45}
  .results-filter{font-size:12px;min-height:44px}
  .results-card figcaption,.results-dialog-title{font-size:13px}
  .results-card figcaption span:last-child{font-size:12px}
  #metod #method-5.work-steps-ready .work-copy{left:16px;right:16px;width:auto}
  #metod #method-5 .work-pair__copy>p{font:400 15px/1.5 'Manrope',sans-serif}
}
@media(max-width:1024px) and (max-height:500px){
  #metod .method-intro{padding-block:6px;font-size:14px}
  #metod .method-intro-subtitle{display:none}
  #metod .mobile-method-track{justify-content:flex-start}
}

/* Phones and short desktop windows use natural height instead of clipped scenes. */
@media(max-width:820px), (max-height:800px){
  #metod{--mobile-method-flow:1}
  #metod.method-flow{height:auto!important;min-height:0;padding-block:24px 32px;overflow:visible}
  #metod.method-flow .method-sticky{position:static;height:auto;min-height:0;margin:0;overflow:visible}
  #metod.method-flow .method-intro{position:relative;top:auto;width:auto;height:auto;margin:0 16px 8px;border-radius:14px;opacity:1;transform:none}
  #metod.method-flow.method-leaving .method-intro{visibility:visible}
  #metod.method-flow .method-scene{position:relative;inset:auto;display:block;height:auto;min-height:0;padding:24px 16px;opacity:1!important;transform:none!important;pointer-events:auto;transition:none;overflow:visible;scroll-margin-top:calc(var(--method-header) + 16px)}
  #metod.method-flow .method-scene+.method-scene{margin-top:12px}
  #metod.method-flow .mobile-method-viewport{position:static;inset:auto;display:block;height:auto;min-height:0;overflow:visible}
  #metod.method-flow .mobile-method-track{height:auto;min-height:0;justify-content:flex-start;transform:none!important}
  #metod.method-flow .scene-copy{width:100%;margin:0}
  #metod.method-flow .scene-two{grid-template-columns:minmax(0,1fr);gap:16px}
  #metod.method-flow.method-paper-ready #method-3 .paper-viewport{position:static;inset:auto;display:block;height:auto;min-height:0;padding:0;overflow:visible;perspective:none}
  #metod.method-flow.method-paper-ready #method-3 .paper-layout{margin:0;transform:none!important;perspective:none}
  #metod.method-flow.method-paper-ready #method-3 .paper-sheet{opacity:1!important;transform:none!important;will-change:auto;box-shadow:none}
  #metod.method-flow.method-paper-ready #method-3 .paper-argument{perspective:none}
  #metod.method-flow #method-results .results-copy{position:static;inset:auto;width:100%;height:auto;min-height:0;margin:0;gap:12px}
  #metod.method-flow #method-results .results-rail{flex:none;width:100%;height:clamp(280px,90vw,420px)}
  #metod.method-flow #method-5.work-steps-ready .work-copy{position:static;inset:auto;width:100%;height:auto;min-height:0;margin:0}
  #metod.method-flow #method-5 .work-counter{display:none}
  #metod.method-flow #method-5 .work-pairs{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;flex:none;height:auto;min-height:0;margin:18px 0 0;overflow:visible}
  #metod.method-flow #method-5 .work-pair{position:relative;inset:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;min-height:0;gap:12px;opacity:1!important;transform:none!important;pointer-events:auto}
  #metod.method-flow #method-5 .work-pair__photo{height:clamp(240px,75vw,420px);max-height:none}
  #metod.method-flow .flow-next{display:none}
  #metod.method-flow #method-5.work-steps-ready .flow-next[href="#price"]{display:flex;margin:24px auto 0;visibility:visible!important}
}

/* Short desktop windows keep the two-column composition and complete card edges. */
@media(min-width:821px) and (max-height:800px){
  #metod.method-flow .method-scene{padding:36px 5vw}
  #metod.method-flow .method-intro{max-width:1100px;margin:0 auto 12px}
  #metod.method-flow .mobile-method-viewport,
  #metod.method-flow .scene-copy,
  #metod.method-flow #method-results .results-copy,
  #metod.method-flow #method-5.work-steps-ready .work-copy{width:100%;max-width:1100px;margin-inline:auto}
  #metod.method-flow .scene-two{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:24px}
  #metod.method-flow.method-paper-ready #method-3 .paper-layout{margin-inline:auto}
  #metod.method-flow #method-0 .mobile-method-track{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.6fr);gap:32px;align-items:center}
  #metod.method-flow #method-0 .scene-copy{width:100%;margin:0}
  #metod.method-flow .method-heroine{position:static;height:360px;max-height:none;max-width:100%;grid-column:2;grid-row:1;justify-self:center}
  #metod.method-flow #method-5 .work-pairs{gap:36px}
  #metod.method-flow #method-5 .work-pair{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:auto;gap:clamp(20px,3vw,40px);align-items:center}
  #metod.method-flow #method-5 .work-pair__photo{height:clamp(280px,34vw,420px)}
  #metod.method-flow #method-5 .work-pair[data-step="4"] .work-pair__photo{height:auto;aspect-ratio:1672/941}
}