/* The methodology uses a wide visual stage, independent of the building block. */
.method-experience{position:relative;background:#071016;color:#edf3f2;isolation:isolate}
.method-experience.is-ready{height:340svh}
.method-scene{position:sticky;top:82px;height:calc(100svh - 82px);box-sizing:border-box;padding:16px 5vw;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.method-caption{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#9eb6c0}
.method-caption span:first-child:before{content:'';display:inline-block;width:5px;height:5px;background:#d9edb6;border-radius:50%;margin-right:12px}
.method-layout{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;gap:14px}
.method-explanation{display:flex;align-items:center;justify-content:space-between;gap:28px}
.method-explanation>.method-overline{display:none}
.method-explanation h2{font:400 clamp(25px,2.7vw,44px)/1.15 Manrope,Arial,sans-serif;letter-spacing:-.045em;margin:0}
.method-explanation h2 em{font-style:normal;color:#aac2cf}
.method-intro{color:#a9bdc8;font-size:12px;line-height:1.6;max-width:300px;margin:0}
.method-visual{position:relative;flex:1;min-height:0;width:100%;margin:0;background:#0d1b23}
.method-videos{position:absolute;inset:0;overflow:hidden;background:#0d1b23}
.method-videos video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .8s ease;pointer-events:none}
.method-videos video.is-active{opacity:1}
.method-videos:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#07101677,transparent 28%,transparent 80%,#07101699)}
.method-annotations{position:absolute;inset:0;z-index:2;pointer-events:none}
.method-example{position:absolute;top:13px;left:20px;font:9px/1.4 Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#eff5ee;text-shadow:0 1px 5px #000}
.method-note{position:absolute;top:46px;width:clamp(220px,24vw,350px);max-width:36%;box-sizing:border-box;padding:15px 18px;background:#071820ed;border-left:2px solid #d9edb6;color:#b5cbd1;font:11px/1.4 Manrope,Arial,sans-serif;box-shadow:0 8px 30px #0002}
.method-note small{display:block;font-size:clamp(13px,1.2vw,18px);line-height:1.45;color:#f1f7ea;margin-top:9px;font-variant-numeric:tabular-nums}
.method-note-a{left:20px}.method-note-b{right:20px;opacity:0;transform:translateY(5px);transition:opacity .6s,transform .6s}
.has-method-labels .method-note-b{opacity:1;transform:none}
.method-scene-status{position:absolute;bottom:14px;left:20px;z-index:3;display:flex;gap:15px;align-items:center;pointer-events:none;font:10px/1.4 Manrope,Arial,sans-serif;color:#dceae5;text-shadow:0 1px 4px #000}
.method-scene-status span:first-child:before{content:'';display:inline-block;width:5px;height:5px;background:#d9edb6;border-radius:50%;margin-right:8px}
.method-scene-status span:last-child{color:#bdd0d8}
.method-playback{position:absolute;bottom:9px;right:20px;z-index:4;display:flex;gap:18px}
.method-playback button{appearance:none;border:0;border-bottom:1px solid #b5d0db55;color:#e5efef;background:#071016bb;padding:6px 8px;font:10px Manrope,Arial,sans-serif;cursor:pointer}
.method-reading{display:flex;align-items:center;gap:30px;flex-shrink:0}
.method-detail{display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,1.4fr);column-gap:26px;max-width:1100px;flex:1}
.method-overline{color:#d9edb6;font-size:9px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 7px;grid-column:1}
.method-detail h3{font:400 clamp(19px,1.7vw,26px)/1.25 Manrope,Arial,sans-serif;letter-spacing:-.025em;margin:0;grid-column:1}
.method-detail>p:not(.method-overline){grid-column:2;grid-row:1/3;font-size:12px;line-height:1.6;color:#c1d0d6;margin:0;align-self:center}
.method-attribution{max-width:220px;color:#78919e;font-size:9px;line-height:1.6;margin:0}
.method-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;flex-shrink:0}
.method-controls button{position:relative;appearance:none;border:0;border-top:1px solid #b5d0db30;background:transparent;text-align:left;color:#91a8b3;padding:12px 0 2px;font:12px Manrope,Arial,sans-serif;cursor:pointer}
.method-controls button:before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:#d9edb6;transform:scaleX(0);transform-origin:left;transition:transform .4s}
.method-controls button[aria-pressed=true]{color:#eff5e9}
.method-controls button[aria-pressed=true]:before{transform:scaleX(1)}
.method-controls button span{font-size:10px;color:#7e99a7;margin-right:14px}
.method-experience button:focus-visible{outline:2px solid #d9edb6;outline-offset:3px}
@media(min-width:901px) and (max-height:790px){
 .method-scene{gap:10px;padding-top:12px;padding-bottom:12px}.method-explanation h2{font-size:28px}
 .method-intro{font-size:10px;max-width:260px}.method-detail>p:not(.method-overline){font-size:11px}
 .method-attribution{display:none}.method-detail h3{font-size:20px}.method-note{top:36px;padding:10px 13px}.method-note small{font-size:14px}
}
@media(max-width:900px),(max-height:600px){
 .method-experience.is-ready{height:auto}.method-scene{position:relative;top:auto;height:auto;padding:24px;gap:20px;overflow:hidden}
 .method-caption{font-size:9px;letter-spacing:.06em}.method-caption span:last-child{max-width:125px;text-align:right}
 .method-layout{flex:none;gap:20px}.method-explanation{display:block}.method-explanation h2{font-size:32px;max-width:520px}
 .method-intro{font-size:12px;margin-top:12px;max-width:520px}
 .method-visual{flex:none;height:auto;aspect-ratio:16/9;min-height:290px}
 .method-videos video{object-fit:contain}
 .method-note{top:37px;padding:9px 10px;max-width:44%;width:270px;font-size:9px}.method-note small{font-size:12px;line-height:1.4;margin-top:5px}
 .method-note-a{left:10px}.method-note-b{right:10px}.method-example{left:10px;top:12px;font-size:8px;letter-spacing:.03em}
 .method-scene-status{bottom:46px;left:10px;font-size:9px;gap:8px}.method-playback{right:10px;bottom:9px;gap:12px}
 .method-reading{display:block}.method-detail{display:block}.method-detail h3{font-size:24px;margin-bottom:12px}
 .method-detail>p:not(.method-overline){font-size:13px;line-height:1.7}.method-attribution{max-width:600px;font-size:10px;margin-top:16px}
 .method-controls{gap:9px}.method-controls button{font-size:10px;padding:12px 0 8px;letter-spacing:-.025em}
 .method-controls button span{display:block;margin:0 0 7px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .method-experience.is-ready{height:auto}.method-scene{position:relative;top:auto;height:auto;min-height:680px}
 .method-visual{flex:none;min-height:290px;aspect-ratio:16/9}
 .method-videos video,.method-note-b,.method-controls button:before{transition:none}
}