.page-progress { position:fixed; left:0; top:0; width:100%; height:3px; z-index:40; background:var(--blue); transform:scaleX(var(--page-progress,0)); transform-origin:left; pointer-events:none; }
.experience-toggle { position:fixed; right:20px; bottom:20px; z-index:15; width:42px; height:42px; border:1px solid #ffffff70; background:#17191c; color:white; border-radius:50%; box-shadow:0 3px 16px #0002; }
.experience-toggle:hover { background:var(--blue); }
.experience-toggle .lucide { width:17px; }
.page-wipe { position:fixed; inset:0; background:#17191c; z-index:50; transform:translateY(100%); display:grid; place-items:center; pointer-events:none; }
.page-wipe img { width:190px; height:auto; }
.experience-leaving .page-wipe { transform:translateY(0); transition:transform .3s cubic-bezier(.76,0,.24,1); pointer-events:auto; }
.experience-ready .page-intro,.experience-ready .case-intro { position:relative; isolation:isolate; overflow:hidden; }
.intro-backword { display:none; }
.experience-playing .intro-backword { display:block; position:absolute; right:3%; bottom:-30px; font:700 138px/.95 var(--display); color:var(--blue); opacity:.06; z-index:-1; pointer-events:none; transform:translateX(var(--intro-drift,0px)); white-space:nowrap; }
.experience-playing .page-intro h1,.experience-playing .case-intro h1 { animation:headline-unfold .9s cubic-bezier(.16,1,.3,1) both; }
.experience-playing .page-intro { background:color-mix(in srgb,#dae5fc var(--intro-tint,0%),var(--paper)); }
.experience-playing .page-index a { position:relative; overflow:hidden; }
.experience-playing .page-index a::before { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.experience-playing .page-index a:hover::before,.experience-playing .page-index a:focus-visible::before { transform:scaleX(1); }
.experience-playing .section-heading,.experience-playing .section-top,.experience-playing .works-heading { clip-path:inset(-8px -8px calc((1 - var(--band-enter,1)) * 100%) -8px); }
.experience-playing .service-detail,.experience-playing .price-section,.experience-playing .faq-section,.experience-playing .faq-home,.experience-playing .cost-section { background:color-mix(in srgb,var(--band-tint,#e5ecfb) calc((1 - var(--band-enter,1)) * 75%),var(--band-base,#fff)); }
.experience-playing .band-visual { transform:translateY(calc((1 - var(--visual-enter,1)) * 50px)) scale(calc(.88 + var(--visual-enter,1) * .12)); transform-origin:center; }
.experience-playing .experience-row { --row-enter:1; position:relative; }
.experience-playing .experience-row::after { content:''; position:absolute; left:0; top:0; width:100%; height:2px; pointer-events:none; background:var(--blue); transform:scaleX(var(--row-enter)); transform-origin:left; }
.experience-playing .experience-row>h3,.experience-playing .experience-row>div>h3,.experience-playing .experience-row>h2,.experience-playing .experience-row>dt { transform:translateY(calc((1 - var(--row-enter)) * 24px)); opacity:calc(.3 + var(--row-enter) * .7); }
.experience-playing .price-amount { transform:translateY(calc((1 - var(--row-enter,1)) * 28px)) scale(calc(.82 + var(--row-enter,1) * .18)); transform-origin:right center; clip-path:inset(0 0 calc((1 - var(--row-enter,1)) * 85%) 0); }
.experience-playing .price-row { background:color-mix(in srgb,#e4eaf8 calc((1 - var(--row-enter,1)) * 100%),transparent); }
.experience-playing .cost-total dd { transform:translateY(calc((1 - var(--row-enter,1)) * 22px)) scale(calc(.85 + var(--row-enter,1) * .15)); transform-origin:right center; }
.experience-playing .service-row { position:relative; isolation:isolate; }
.experience-playing .service-row::before { content:''; position:absolute; inset:0 -14px; background:#e4eaf8; z-index:-1; transform:scaleX(var(--service-fill,0)); transform-origin:left; }
.experience-playing .service-row:nth-of-type(2)::before { background:#d6f3e0; }
.experience-playing .service-row:nth-of-type(3)::before { background:#ffebba; }
.experience-playing .service-row:hover .lucide { transform:translate(5px,-5px) rotate(45deg); }
.experience-playing .approach-visual { clip-path:inset(0 calc((1 - var(--band-enter,1)) * 8%)); }
.experience-playing .approach-message>p { color:color-mix(in srgb,#ffffff var(--message-light,100%),#777b83); }
.experience-playing .founder-note { position:relative; }
.experience-playing .founder-note::after { content:''; position:absolute; left:0; top:-1px; width:100%; height:2px; background:var(--amber); transform:scaleX(var(--band-enter,1)); transform-origin:left; }
.experience-playing .faq-list details { position:relative; background:color-mix(in srgb,#e0e8f9 calc((1 - var(--row-enter,1)) * 60%),transparent); }
.experience-playing .faq-list summary { transition:color .2s,background .3s; }
.experience-playing .faq-list summary:hover { color:var(--blue); background:#214de309; }
.experience-playing .faq-list details[open]>div { animation:answer-unfold .45s cubic-bezier(.16,1,.3,1); }
.experience-playing .contact { overflow:hidden; position:relative; }
.experience-playing .contact::before { content:''; position:absolute; top:0; left:6%; width:88%; height:4px; background:#17191c; transform:scaleX(var(--band-enter,1)); transform-origin:right; }
.experience-playing .contact h2 { transform:translateY(var(--contact-shift,0px)) scale(calc(.88 + var(--band-enter,1) * .12)); transform-origin:left center; clip-path:inset(-10% -1% calc((1 - var(--band-enter,1)) * 100%) -1%); }
.experience-playing .contact-links a { position:relative; overflow:hidden; isolation:isolate; }
.experience-playing .contact-links a::before { content:''; position:absolute; inset:0; background:#ffffff22; transform:translateX(-105%); transition:transform .45s cubic-bezier(.16,1,.3,1); z-index:-1; }
.experience-playing .contact-links a:hover::before { transform:translateX(0); }
.service-theatre { background:#dfe8fc; }
.service-chapters { list-style:none; padding:45px 6%; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; }
.service-chapters li { min-width:0; }
.service-chapters li>span { font:500 12px var(--display); }
.chapter-copy h2 { font-size:26px; line-height:1.6; margin:20px 0 14px; }
.chapter-copy .overline { margin-top:24px; }
.chapter-copy>p:not(.overline) { font-size:14px; }
.chapter-copy .text-link { margin-top:25px; }
.chapter-visual { margin-top:35px; }
.chapter-visual>img { width:100%; height:auto; }
.service-diagram { display:flex; flex-direction:column; align-items:center; gap:9px; }
.service-diagram>div { display:flex; align-items:center; gap:18px; width:100%; padding:15px 20px; border-bottom:1px solid #17191c40; background:#ffffff7a; }
.service-diagram>div>.lucide { width:24px; height:24px; }
.service-diagram span { font-size:14px; }
.service-diagram>b { display:grid; place-items:center; }
.chapter-track,.chapter-stage { position:relative; }
.chapter-meta,.chapter-backword { display:none; }
.experience-playing .chapter-track { height:calc((var(--chapter-count) + .5) * 80svh); }
.experience-playing .chapter-stage { position:sticky; top:5svh; height:90svh; min-height:400px; overflow:hidden; isolation:isolate; }
.experience-playing .chapter-backword { display:block; position:absolute; top:14%; left:0; right:0; font:700 150px/.9 var(--display); opacity:.085; white-space:nowrap; pointer-events:none; transform:translateX(var(--chapter-word-shift,0px)); }
.experience-playing .chapter-meta { display:flex; position:absolute; left:0; right:0; bottom:20px; gap:20px; align-items:center; }
.chapter-progress { height:2px; flex:1; background:#ffffff40; }
.chapter-progress>span { display:block; width:100%; height:100%; background:var(--amber); transform:scaleX(var(--chapter-progress,0)); transform-origin:left; }
.chapter-counter { font:500 13px var(--display); padding-right:40px; }
.experience-playing .chapter-source { position:absolute; inset:0; display:block; list-style:none; margin:0; padding:0; }
.experience-playing .chapter-source>li { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; border:0; padding:0 2%; opacity:var(--chapter-opacity,0); transform:translateX(var(--chapter-x,0px)) scale(var(--chapter-scale,1)); pointer-events:none; }
.experience-playing .chapter-source>li.is-current { pointer-events:auto; }
.experience-playing .chapter-source>li>span { position:absolute; right:2%; top:16%; font:500 180px/1 var(--display); color:var(--amber); opacity:.28; }
.experience-playing .chapter-source h3 { font-size:48px; line-height:1.5; margin:22px 0; max-width:90%; }
.experience-playing .chapter-source>li>p { font-size:20px; max-width:680px; line-height:1.9; }
.experience-playing .service-theatre { background:var(--chapter-bg,#dfe8fc); }
.experience-playing .service-theatre .chapter-stage { height:100svh; top:0; }
.experience-playing .service-theatre .chapter-backword { top:12%; left:4%; }
.experience-playing .service-theatre .chapter-meta { left:6%; right:6%; }
.experience-playing .service-theatre .chapter-progress { background:#17191c30; }
.experience-playing .service-theatre .chapter-progress>span { background:var(--ink); }
.experience-playing .service-theatre .chapter-source>li { padding:85px 6%; display:grid; grid-template-columns:1fr 1fr; gap:6%; align-items:center; }
.experience-playing .service-theatre .chapter-source>li>span { top:9%; right:6%; font-size:110px; color:var(--ink); opacity:.08; }
.experience-playing .service-theatre .chapter-copy h2 { font-size:43px; }
.experience-playing .service-theatre .chapter-copy>p:not(.overline) { font-size:16px; }
.experience-playing .service-theatre .chapter-visual { margin:0; transform:scale(var(--diagram-scale,1)); }
.experience-playing .service-theatre .service-diagram>div { min-height:85px; padding:22px 28px; }
.experience-playing .service-theatre .service-diagram span { font-size:20px; }
.experience-playing .service-theatre .service-diagram .lucide { width:32px; height:32px; }
.experience-playing .service-diagram>b { transform:translateY(var(--diagram-arrow,0px)); }
.case-visual-track { position:relative; }
.case-visual-caption { display:none; }
.experience-playing .case-visual-track { height:200svh; }
.experience-playing .case-visual-track .case-screenshot { position:sticky; top:0; height:100svh; margin:0; display:grid; place-items:center; overflow:hidden; background:var(--case-color,#dfe8fc); }
.experience-playing .case-visual-track .case-screenshot>img { width:auto; height:auto; max-width:88%; max-height:calc(100svh - 130px); transform:scale(var(--case-zoom,.72)); box-shadow:0 30px 65px -35px #17191c60; }
.experience-playing .case-visual-caption { display:flex; position:absolute; bottom:25px; left:6%; right:6%; gap:20px; justify-content:space-between; align-items:center; font:500 12px var(--display); }
.experience-playing .case-visual-caption>span:last-child { max-width:70%; text-align:right; line-height:1.7; }
.next-case-image { width:140px; height:auto; }
.experience-playing .case-pagination { padding-top:60px; padding-bottom:60px; }
.experience-playing .case-pagination>a:last-child { flex:1; justify-content:space-between; min-height:200px; padding:30px 0 30px 6%; border-left:1px solid var(--line); font-size:24px; overflow:hidden; }
.experience-playing .next-case-image { width:28%; transform:translateY(calc((1 - var(--band-enter,1)) * 55px)) scale(calc(.82 + var(--band-enter,1) * .18)); transition:translate .35s; }
.experience-playing .case-pagination>a:last-child:hover .next-case-image { translate:-10px 0; }
@keyframes headline-unfold { from { clip-path:inset(100% 0 -10%); transform:translateY(45px); } to { clip-path:inset(-10% 0); transform:none; } }
@keyframes answer-unfold { from { opacity:0; clip-path:inset(0 0 100%); transform:translateY(-14px); } to { opacity:1; clip-path:inset(0); transform:none; } }
@media(min-width:1700px) { .experience-playing .chapter-backword { font-size:210px; } .experience-playing .chapter-source h3 { font-size:60px; } .experience-playing .service-theatre .chapter-copy h2 { font-size:52px; } }
@media(max-width:1100px) { .experience-playing .service-theatre .chapter-copy h2 { font-size:34px; } .experience-playing .chapter-source h3 { font-size:42px; } .experience-playing .chapter-source>li>p { max-width:600px; font-size:18px; } .experience-playing .case-pagination>a:last-child { font-size:20px; } }
@media(max-width:760px) {
  .experience-toggle { width:36px; height:36px; right:14px; bottom:14px; }
  .experience-playing .intro-backword { font-size:68px; bottom:-8px; }
  .experience-playing .chapter-track { height:calc((var(--chapter-count) + .5) * 75svh); }
  .experience-playing .chapter-stage { top:3svh; height:88svh; min-height:350px; }
  .experience-playing .chapter-backword { font-size:78px; top:15%; }
  .experience-playing .chapter-source>li { padding:0 0 35px; }
  .experience-playing .chapter-source>li>span { top:20%; font-size:95px; }
  .experience-playing .chapter-source h3 { font-size:31px; max-width:100%; margin:20px 0; }
  .experience-playing .chapter-source>li>p { font-size:16px; max-width:100%; }
  .experience-playing .chapter-meta { bottom:12px; }
  .chapter-counter { padding-right:28px; font-size:11px; }
  .service-chapters { grid-template-columns:1fr; padding:35px 22px; gap:50px; }
  .experience-playing .service-theatre .chapter-source>li { display:flex; padding:65px 22px 70px; gap:26px; align-items:stretch; justify-content:center; }
  .experience-playing .service-theatre .chapter-source>li>span { top:10%; font-size:72px; right:6%; }
  .experience-playing .service-theatre .chapter-copy .overline { margin-top:0; font-size:10px; }
  .experience-playing .service-theatre .chapter-copy h2 { font-size:28px; margin:15px 0 12px; }
  .experience-playing .service-theatre .chapter-copy>p:not(.overline) { font-size:13px; }
  .experience-playing .service-theatre .chapter-copy .text-link { font-size:12px; margin-top:17px; }
  .experience-playing .service-theatre .chapter-visual { width:100%; max-width:480px; align-self:center; }
  .experience-playing .service-theatre .service-diagram { gap:4px; }
  .experience-playing .service-theatre .service-diagram>div { min-height:48px; padding:10px 16px; gap:14px; }
  .experience-playing .service-theatre .service-diagram span { font-size:14px; }
  .experience-playing .service-theatre .service-diagram .lucide { width:23px; height:23px; }
  .experience-playing .service-theatre .service-diagram>b .lucide { width:18px; height:18px; }
  .experience-playing .service-theatre .chapter-backword { top:6%; font-size:94px; }
  .experience-playing .case-visual-track { height:170svh; }
  .experience-playing .case-visual-track .case-screenshot>img { max-width:calc(100% - 28px); max-height:calc(100svh - 120px); }
  .experience-playing .case-visual-caption { left:22px; right:22px; bottom:65px; font-size:10px; }
  .experience-playing .case-pagination { padding-top:35px; padding-bottom:35px; }
  .experience-playing .case-pagination>a:last-child { border-left:0; border-top:1px solid var(--line); padding:25px 0; font-size:16px; min-height:150px; gap:16px; }
  .experience-playing .next-case-image { width:28%; }
  .next-case-image { width:85px; }
  .experience-playing .case-pagination>a:last-child>span { flex:1; }
  .experience-playing .service-row::before { inset:0 -8px; }
}
@media(max-width:380px) { .experience-playing .service-theatre .chapter-copy h2 { font-size:25px; } .experience-playing .chapter-source h3 { font-size:28px; } .experience-playing .service-theatre .chapter-source>li { gap:22px; } }
@media(max-height:600px) and (min-width:761px) {
  .experience-playing .chapter-stage { min-height:300px; height:94svh; top:3svh; }
  .experience-playing .chapter-source>li>span { top:12%; font-size:100px; }
  .experience-playing .chapter-source h3 { font-size:35px; margin:14px 0; }
  .experience-playing .chapter-source>li>p { font-size:15px; max-width:75%; }
  .experience-playing .chapter-backword { font-size:110px; top:9%; }
  .experience-playing .service-theatre .chapter-source>li { padding:45px 6%; gap:4%; }
  .experience-playing .service-theatre .chapter-copy h2 { font-size:28px; margin:12px 0; }
  .experience-playing .service-theatre .chapter-copy>p:not(.overline) { font-size:13px; }
  .experience-playing .service-theatre .chapter-copy .overline { margin-top:0; }
  .experience-playing .service-theatre .chapter-copy .text-link { margin-top:14px; font-size:12px; }
  .experience-playing .service-theatre .service-diagram>div { min-height:42px; padding:8px 16px; }
  .experience-playing .service-theatre .service-diagram span { font-size:14px; }
  .experience-playing .service-theatre .service-diagram { gap:2px; }
  .experience-playing .service-theatre .service-diagram .lucide { width:20px; height:20px; }
  .experience-playing .service-theatre .chapter-meta { bottom:10px; }
}
.motion-paused .page-progress { display:none; }
@media(prefers-reduced-motion:reduce) { .page-progress,.page-wipe { display:none; } }