/* Keep the 592 × 332 intro at its natural shape and near its native size. */
.hero{min-height:860px;background:radial-gradient(ellipse at 85% 45%,#573c2c42,transparent 58%),#10100f}
.hero-media{inset:max(150px,calc(50% - 270px)) var(--gutter) auto auto;width:min(54vw,880px);background:none;z-index:2}
.hero-media video{display:block;width:100%;height:auto;aspect-ratio:592/332;object-fit:contain;filter:contrast(1.04) saturate(1.08)}
/* A light film grain and vignette give the 592 × 332 source a deliberate, cinematic texture. */
.intro-frame{position:relative;overflow:hidden;background:#000;border:1px solid #ffffff30;box-shadow:0 30px 90px #000000b3}
.intro-frame:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #000000b3}
.film-grain{position:absolute;inset:-60%;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite}
@keyframes grain{20%{transform:translate(-6%,4%)}40%{transform:translate(5%,-7%)}60%{transform:translate(-3%,6%)}80%{transform:translate(7%,2%)}}
/* Full-bleed ambient copy of the intro: heavily blurred, so its low resolution never shows. */
.hero-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#10100f}
.hero-ambient>img,.hero-ambient>canvas{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;filter:blur(42px) saturate(1.35) brightness(.9)}
.hero-ambient>canvas{opacity:0;transition:opacity 1.4s}.hero-ambient>canvas.live{opacity:1}
.hero-ambient:after{content:'';position:absolute;inset:0;transition:opacity .9s;background:linear-gradient(90deg,#10100f 0%,#10100fd9 32%,#10100f66 62%,#10100f26 100%),linear-gradient(0deg,#10100f 0%,transparent 32%,transparent 80%,#10100fa6 100%)}
.intro-caption{display:flex;justify-content:space-between;gap:18px;padding:15px 0;color:#c4baac;font-size:8px;letter-spacing:.16em;font-weight:700}
.intro-caption>span:last-child{color:var(--lime)}
.hero-copy{max-width:53%;padding-top:150px;padding-bottom:150px}
.hero h1{font-size:clamp(74px,7.4vw,112px)}
.hero-copy>p:not(.eyebrow){max-width:365px}
.hero-shade{background:none;pointer-events:none}
.hero-graphics{z-index:1}.hero-orbit{width:360px;height:360px;right:12%;top:22%;border-color:#f68d6430}
.film-note{top:145px;right:var(--gutter);font-size:8px}
.corner-a{top:125px;right:var(--gutter)}.corner-b{bottom:125px}
.film-dialog{width:min(634px,94vw)}
.film-dialog video{height:auto;object-fit:contain;aspect-ratio:auto;max-height:72svh}
.film-dialog.portrait-film{width:min(520px,94vw)}
.film-dialog.portrait-film video{height:min(78svh,900px);width:100%;object-fit:contain;background:#000}
.film-dialog.portrait-film .film-heading h2{font-size:28px}
.class-film{display:flex;width:fit-content;margin-top:8px!important;border-bottom:0;text-align:left;color:#87442d;gap:12px}
.practice-film{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,95px);align-items:center;margin:55px var(--gutter) 0;padding-top:40px;border-top:1px solid #ffffff26}
.practice-preview{position:relative;display:block;padding:0;width:100%;overflow:hidden;aspect-ratio:16/9;background:#000}
.practice-preview img{width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:brightness(.75)}
.practice-preview:hover img{transform:scale(1.025)}
.practice-preview .play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;background:#10100f88;font-size:13px;color:var(--cream)}
.clip-time{position:absolute;right:16px;bottom:12px;color:var(--cream);font-size:10px;letter-spacing:.1em}
.film-tile{position:relative;display:block;width:100%;height:100%;padding:0;background:#000;overflow:hidden}
.film-tile img{transition:transform .6s,filter .6s}.film-tile:hover img{transform:scale(1.03);filter:saturate(.9)}
.film-tile .play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;background:#10100f88;font-size:14px;color:var(--cream)}
.film-tile .clip-time{left:20px;right:auto;bottom:20px;font-size:9px;font-weight:700;letter-spacing:.16em}
.practice-film .eyebrow{font-size:8px;color:var(--lime);margin-bottom:22px}
.practice-film h3{font-size:clamp(44px,4.3vw,70px)}
.practice-film p:not(.eyebrow){font-size:12px;color:var(--muted);max-width:330px;margin:22px 0 10px}
@media(min-width:1800px){.hero-copy{max-width:55%}.hero-media{right:max(var(--gutter),calc((100vw - 1650px)/2))}}
@media(max-width:1100px){.hero{min-height:830px}.hero-copy{max-width:54%;padding-top:145px}.hero h1{font-size:8vw}.hero-actions{gap:15px}.hero-copy .eyebrow{font-size:8px;letter-spacing:.12em}.hero-media{top:190px}.hero-bottom{gap:20px}.hero-bottom .scroll-link{display:none}.film-actions{gap:24px}}
@media(max-width:850px){
 .hero{min-height:0;display:flex;flex-direction:column;padding-bottom:28px}
 .hero-copy{order:1;max-width:none;width:100%;padding:128px var(--gutter) 40px}
 .hero h1{font-size:clamp(68px,11.5vw,100px)}
 .hero-media{order:2;position:relative;inset:auto;width:calc(100% - var(--gutter)*2);max-width:760px;margin:0 auto}
 .hero-bottom{order:3;position:relative;inset:auto;margin:30px var(--gutter) 0;display:flex;align-items:center;flex-wrap:wrap}
 .hero-ambient:after{background:linear-gradient(180deg,#10100fe6 0%,#10100fb3 45%,#10100f8c 75%,#10100f 100%)}
.hero-orbit{top:21%;right:-90px;opacity:.5}.film-note,.corner-a,.corner-b{display:none}
 .hero-copy>p:not(.eyebrow){max-width:430px}.hero-actions{gap:24px}.hero-copy .eyebrow{font-size:9px}
 .practice-film{gap:28px}.practice-film .eyebrow{font-size:7px;letter-spacing:.12em}.practice-film h3{font-size:44px}
}
@media(max-width:600px){
 .hero-copy{padding-top:125px;padding-bottom:34px}.hero h1{font-size:clamp(65px,15.5vw,92px)}
 .hero-copy .eyebrow{font-size:8px}.hero-bottom{display:block;padding-top:20px;margin-top:25px}
 .hero-actions{gap:18px}.intro-caption{font-size:7px;letter-spacing:.1em;padding-block:13px}
 .practice-film{grid-template-columns:1fr;gap:28px;margin-top:35px;padding-top:30px}.practice-film h3{font-size:54px}.practice-film .eyebrow{font-size:8px}.practice-film p:not(.eyebrow){margin-top:18px}
}
@media(max-width:360px){.hero-actions{gap:10px}.hero-copy .eyebrow{font-size:7px}}

/* Intro: on the first visit of a session the film opens the page, then glides into the hero. */
.hero-ambient:before{content:'';position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .9s;background:radial-gradient(ellipse 75% 70% at 50% 44%,transparent 40%,#050505f2 100%)}
html.intro-playing,html.intro-playing body{overflow:hidden}
.intro-playing .hero-ambient{position:fixed;z-index:59}
.intro-playing .hero-ambient:before{opacity:1}.intro-playing .hero-ambient:after{opacity:0}
.intro-playing .hero-media{position:fixed;z-index:61;inset:auto;left:50%;top:calc(50% - 48px);width:min(94vw,1320px,calc((100svh - 280px)*1.783));max-width:none;margin:0;transform:translate(-50%,-50%)}
.intro-playing .intro-frame{animation:intro-in 1.8s cubic-bezier(.2,.7,.2,1) both;box-shadow:0 50px 140px #000}
.intro-playing .intro-caption{display:none}.intro-playing main>:not(.hero),.intro-playing .site-footer{visibility:hidden}
.intro-playing .site-header{opacity:0;pointer-events:none}.site-header{transition:background .25s,opacity .8s}
.intro-leaving .hero-copy,.intro-leaving .hero-bottom{animation:intro-rise .9s .35s both}
@keyframes intro-in{from{opacity:0;transform:scale(1.06)}}
@keyframes intro-rise{from{opacity:0;transform:translateY(26px)}}
.intro-shell{position:fixed;inset:0;z-index:62;display:flex;flex-direction:column;justify-content:space-between;padding:22px var(--gutter) 30px;pointer-events:none;color:var(--cream);transition:opacity .7s}
.intro-shell.leaving{opacity:0}.intro-shell button{pointer-events:auto}
.intro-top{display:flex;justify-content:space-between;align-items:center;gap:20px;animation:intro-rise 1s .3s both}
.intro-brand{display:flex;align-items:center;gap:12px;font:800 19px/1 var(--display);letter-spacing:.03em}
.intro-brand img{width:40px;height:40px;border-radius:50%;filter:grayscale(1)}
.intro-tools{display:flex;align-items:center;gap:22px}
#intro-sound{white-space:nowrap;min-height:44px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;color:var(--cream)}
#intro-skip{white-space:nowrap;min-height:48px;padding:0 22px;border:1px solid var(--cream);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:14px;background:#10100fb3;backdrop-filter:blur(8px);transition:background .2s,color .2s,border-color .2s}
#intro-skip:hover,#intro-skip:focus-visible{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.intro-bottom{display:grid;grid-template-columns:1fr minmax(300px,440px) auto;align-items:end;gap:36px;animation:intro-rise 1.2s .9s both}
.intro-heading>span{display:block;margin-top:12px;color:#c4baac;font-size:9px;font-weight:700;letter-spacing:.16em}
.intro-title{font:800 clamp(34px,3.6vw,60px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.intro-preview{position:relative;height:84px;margin:0;padding:0;list-style:none}
.intro-preview li{position:absolute;inset:0;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;opacity:0;transform:translateY(8px);transition:opacity 1s,transform 1s}
.intro-preview li.active{opacity:1;transform:none}
.intro-preview img{width:120px;height:84px;object-fit:cover;filter:saturate(.75);border:1px solid #ffffff26}
.intro-preview small{display:block;color:var(--lime);font-size:8px;font-weight:700;letter-spacing:.16em}
.intro-preview b{display:block;margin-top:6px;font:800 24px/1 var(--display);text-transform:uppercase}
.intro-preview li span{display:block;margin-top:6px;color:#cfc8bc;font-size:12px;line-height:1.45}
.intro-enter{position:relative;min-height:60px;padding:20px 26px;font-size:13px;gap:40px}
.intro-enter:after{content:'';position:absolute;inset:0;border:2px solid var(--lime);opacity:0;pointer-events:none;animation:enter-ring 2.4s 3s ease-out infinite}
@keyframes enter-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.1,1.4)}}
.intro-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff1f}.intro-progress i{display:block;height:100%;width:0;background:var(--lime);transition:width .25s linear}
@media(max-width:900px){.intro-bottom{grid-template-columns:1fr auto;gap:20px}.intro-heading{display:none}}
@media(max-width:600px){
 .intro-playing .hero-media{width:100vw;top:40%}.intro-playing .intro-frame{border-inline:0}
 .intro-brand{font-size:15px}.intro-brand img{width:32px;height:32px}.intro-tools{gap:14px}#intro-skip{padding:0 14px;font-size:10px}#intro-sound{font-size:9px}
 .intro-bottom{grid-template-columns:1fr;gap:18px}.intro-enter{width:100%}
 .intro-preview{height:72px}.intro-preview li{grid-template-columns:96px 1fr;gap:14px}.intro-preview img{width:96px;height:72px}.intro-preview b{font-size:20px}.intro-preview li span{font-size:11px}
}
@media(max-width:600px){.intro-brand{font-size:0;gap:0}.intro-heading{display:block}.intro-title{font-size:clamp(36px,11vw,52px)}}
@media(max-width:360px){.intro-preview li span{display:none}}