/* Cozy cinema: a luminous Excel garden, with information held on a steady plane. */
:root{--cinema-ease:cubic-bezier(.16,1,.3,1);--cinema-slow:cubic-bezier(.22,.61,.36,1)}
.scene{--blend:clamp(120px,17svh,190px);--scene-light:#fff8dd;--scene-shade:#aac5a3;--halo-x:27%;--cinema-entry:1;--cinema-exit:0;--cinema-camera:0px;--cinema-dolly:1}
.hero-scene{--halo-x:55%;--scene-light:#fff7d3;--scene-shade:#9cbd96}
.coaching-scene{--scene-light:#fff5e4;--scene-shade:#b8a0cc}
.sheets-scene{--halo-x:76%;--scene-light:#fff2d7;--scene-shade:#d5b7a1}
.services-scene{--scene-light:#ffeed1;--scene-shade:#c99f9f}
.contact-scene{--halo-x:76%;--scene-light:#fff6df;--scene-shade:#a1beb5}
.cinema-atmosphere{position:absolute;z-index:0;inset:0;overflow:clip;pointer-events:none;contain:paint;-webkit-mask-image:linear-gradient(#000 0%,#000 76%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 76%,transparent 100%)}
.cinema-halo{position:absolute;top:30px;left:var(--halo-x);width:clamp(620px,62vw,960px);height:clamp(720px,108svh,1150px);transform:translate3d(calc(-50% + var(--mx)*-12px),calc(var(--cinema-camera)*.65),0) scale(calc(.97 + var(--cinema-entry)*.03));transform-origin:50% 24%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,var(--scene-light),#fff9ed36 53%,transparent 73%);opacity:.85}
.cinema-halo>i{position:absolute;inset:11% 13%;border-radius:50%;border:1px solid #fff9ee9c;box-shadow:0 0 65px #fff9e850,inset 0 0 60px #fff9e830;transform:translate3d(calc(var(--mx)*5px),calc(var(--my)*5px),0);opacity:.62}
.cinema-wing{position:absolute;width:clamp(280px,32vw,560px);height:clamp(600px,95svh,1050px);border-radius:50%;pointer-events:none;opacity:.23;transform:translate3d(calc(var(--mx)*12px),calc(var(--cinema-camera)*1.25),0)}
.cinema-wing-near{left:-24%;top:8%;background:radial-gradient(ellipse at 95% 50%,var(--scene-shade),transparent 72%);box-shadow:inset -1px 0 #fff9efb3}
.cinema-wing-far{right:-22%;top:-24%;width:40vw;min-width:350px;opacity:.36;background:radial-gradient(ellipse at 0 50%,#fff9edc4,transparent 72%);transform:translate3d(calc(var(--mx)*-16px),calc(var(--cinema-camera)*-.75),0)}
.cinema-cells{position:absolute;inset:0;transform:translate3d(calc(var(--mx)*-12px),calc(var(--cinema-camera)*1.1),0)}
.cinema-cells>i{position:absolute;display:block;width:56px;height:56px;border:1px solid #7f9c7a29;border-radius:17px;box-shadow:inset 0 0 22px #fff9ed55;background:linear-gradient(135deg,#fff9ed50,transparent);transform:translateY(calc((1 - var(--cinema-entry))*38px)) rotate(calc((1 - var(--cinema-entry))*-8deg));opacity:.62}
.cinema-cells>i::after{content:'';position:absolute;inset:14px;border-radius:50%;background:var(--scene-shade);opacity:.16}
.cinema-cells>i:nth-child(1){left:5%;top:39%}.cinema-cells>i:nth-child(2){right:4%;top:18%;width:32px;height:32px;border-radius:10px}.cinema-cells>i:nth-child(2)::after{inset:9px}.cinema-cells>i:nth-child(3){left:44%;top:58%;width:19px;height:19px;border-radius:6px;opacity:.5}.cinema-cells>i:nth-child(3)::after{inset:6px}
.cinema-horizon{position:absolute;left:-10%;right:-10%;bottom:-120px;height:330px;border-radius:50% 50% 0 0 / 50%;background:linear-gradient(180deg,#fff9ed50,transparent 70%);border-top:1px solid #fff9ed70;transform:translate3d(0,calc(var(--cinema-exit)*-40px),0)}
.scene .cell-pattern{opacity:.32}
.hero-scene .portrait-arch{background:linear-gradient(155deg,#fff9ed9c,#fff9ed36);border:1px solid #fff9ed85;box-shadow:inset 0 0 85px #fff9ed33,0 -8px 85px #fff9ed24}
.scene:not(.hero-scene) .portrait-frame::before{background:radial-gradient(ellipse at 48% 33%,#fffaf266,#fffaf20f 65%,transparent 78%);border-top:1px solid #fffaf295;border-left:1px solid #fffaf233}
.scene .photo-wrap{transform:translateX(-50%);transform-origin:50% 18%}
.coaching-copy,.contact-panel{background:linear-gradient(145deg,#fffdf9f5,#fffaf1f0);box-shadow:0 22px 70px #49524a08,0 2px 5px #fff9ed60;border-color:#fffdf9}
.workbook-window,.rescue-demo{box-shadow:0 20px 70px #65533c0b,0 3px 10px #65533c04}
.scene .scene-topline{color:var(--pine)}

/* A steady face and a feathered exit share the backdrop's release clock. */
.scene{--portrait-release:0}
.scene .portrait-window{opacity:calc(1 - var(--portrait-release))}
.scene .portrait-frame::before,.scene .portrait-frame::after{opacity:calc(1 - var(--portrait-release))}
.scene .portrait-tap-hint{opacity:calc((1 - var(--portrait-release))*var(--tip-presence,1))}
.portrait-tip-layer{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:calc((1 - var(--portrait-release))*var(--tip-presence,1))}
.hero-scene .portrait-arch{opacity:calc(1 - var(--portrait-release))}
.cinema-halo{opacity:calc(.85 - var(--portrait-release)*.55)}
.scene .portrait-interaction{transform:none}
.scene:has(.portrait-interaction:hover) .cinema-halo>i,.scene:has(.portrait-interaction:focus-visible) .cinema-halo>i{opacity:.82}
@media(min-width:1001px){
 .hero-scene .hero-formula{width:86px;height:86px}
 .scene:not(.hero-scene) .portrait-window{height:var(--portrait-view);clip-path:inset(0 0 var(--portrait-cut,0px) 0);-webkit-mask-image:linear-gradient(#000 0px,#000 var(--portrait-fade-start,calc(100% - 64px)),transparent var(--portrait-fade-end,100%));mask-image:linear-gradient(#000 0px,#000 var(--portrait-fade-start,calc(100% - 64px)),transparent var(--portrait-fade-end,100%))}
 .scene:not(.hero-scene) .portrait-interaction{height:var(--portrait-floor,374px)}
 .scene:not(.hero-scene) .portrait-frame>.floating-art{width:86px;height:86px;left:2px;right:auto;top:38px;bottom:auto}
 .sheets-scene:not(.hero-scene) .portrait-frame>.floating-art,.contact-scene:not(.hero-scene) .portrait-frame>.floating-art{left:auto;right:12px;top:38px}
}
.floating-art{opacity:var(--art-clearance,1)}
.portrait-frame>.floating-art{pointer-events:auto;opacity:calc((1 - var(--portrait-release))*var(--art-clearance,1))}
.floating-art[data-mass="heavy"] img{animation:cinema-heavy-bob 10s ease-in-out infinite}
.floating-art[data-mass="light"] img{animation:cinema-light-bob 7s ease-in-out infinite}
@keyframes cinema-heavy-bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes cinema-light-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.scene:not(.is-motion-active) .floating-art img,.scene.is-reading .floating-art img,.page-is-hidden .floating-art img{animation-play-state:paused}

/* One section beat: headline, offer, then supporting details. */
.cinema-line-clip{display:block;overflow:clip;padding:.09em .025em .15em;margin:-.09em -.025em -.15em}
.cinema-line{display:block}
.sequence-ready .cinema-heading.is-revealed{opacity:1;transform:none;animation:none;will-change:auto}
.sequence-ready .cinema-heading.is-revealed:not(.reveal-done) .cinema-line{animation:cinema-title 620ms var(--cinema-ease) calc(var(--reveal-delay,0ms) + var(--line-cue,0ms)) both;will-change:transform,opacity}
.sequence-ready .hero-scene .cinema-heading.is-revealed:not(.reveal-done) .cinema-line{animation-duration:820ms}
.cinema-heading.reveal-done .cinema-line{animation:none;opacity:1;transform:none;will-change:auto}
@keyframes cinema-title{from{opacity:.45;transform:translate3d(0,65%,0)}to{opacity:1;transform:none}}
.sequence-ready .reveal-item[data-entry="label"]{--reveal-y:8px;--reveal-duration:360ms}
.sequence-ready .reveal-item[data-entry="detail"]{--reveal-y:12px;--reveal-duration:540ms}
.sequence-ready .reveal-item[data-entry="showcase"]{--reveal-y:14px;--reveal-duration:650ms}
.sequence-ready .reveal-item[data-entry="card"]{--reveal-y:10px;--reveal-duration:470ms}
.cinema-ready .hero-signoff{animation:cinema-signature 920ms var(--cinema-ease) 120ms both}
@keyframes cinema-signature{from{opacity:.2;translate:0 10px}to{opacity:1;translate:0 0}}
.portrait-ready .hero-scene .portrait-arrival.is-arrived{animation:portrait-cinema-hero 1100ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.portrait-ready .coaching-scene .portrait-arrival.is-arrived{animation:portrait-cinema-left 780ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.portrait-ready .sheets-scene .portrait-arrival.is-arrived{animation:portrait-cinema-right 800ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.portrait-ready .services-scene .portrait-arrival.is-arrived{animation:portrait-cinema-left 760ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.portrait-ready .contact-scene .portrait-arrival.is-arrived{animation:portrait-cinema-welcome 820ms var(--cinema-ease) var(--portrait-cue,0ms) both}
.portrait-ready .scene .portrait-arrival.portrait-arrived{animation:none;will-change:auto}
@keyframes portrait-cinema-hero{from{opacity:0;transform:translate3d(0,10px,0) scale(1.025)}to{opacity:1;transform:none}}
@keyframes portrait-cinema-left{from{opacity:0;transform:translate3d(-18px,6px,0)}to{opacity:1;transform:none}}
@keyframes portrait-cinema-right{from{opacity:0;transform:translate3d(16px,8px,0)}to{opacity:1;transform:none}}
@keyframes portrait-cinema-welcome{from{opacity:0;transform:translate3d(0,10px,0) scale(1.015)}to{opacity:1;transform:none}}
.cinema-art{display:block;width:100%;height:100%;transform-origin:50% 70%}
.cinema-ready .cinema-art:not(.is-on){opacity:0}
.cinema-art.is-on:not(.cinema-settled){animation:cinema-art-arrive 580ms var(--cinema-ease) var(--art-cue) both;will-change:transform,opacity}
.hero-scene .cinema-art.is-on:not(.cinema-settled){animation-duration:740ms}
.floating-art[data-mass="heavy"] .cinema-art{--art-arrive-scale:.96;--art-arrive-y:10px}
.floating-art[data-mass="light"] .cinema-art{--art-arrive-scale:.9;--art-arrive-y:14px}
.cinema-art.cinema-settled{opacity:1;transform:none;animation:none;will-change:auto}
@keyframes cinema-art-arrive{from{opacity:0;transform:translate3d(0,var(--art-arrive-y),0) scale(var(--art-arrive-scale))}to{opacity:1;transform:none}}

/* The transition light belongs to the background, beneath all copy and controls. */
.cinema-travel-light{position:absolute;inset:0 -20%;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 40%,var(--scene-light),transparent 62%);border-radius:50%;contain:paint}
.desktop-nav{position:relative;isolation:isolate}
.cinema-nav-light{position:absolute;z-index:-1;left:0;top:11px;bottom:11px;border-radius:30px;background:#d9e9d5b5;border:1px solid #b4c9ad40;opacity:0;pointer-events:none;transition:transform .3s var(--cinema-ease),width .3s var(--cinema-ease),opacity .2s}
.desktop-nav a::after{display:none}
.chapter-nav a.is-active:after{box-shadow:0 0 0 5px #fff9ed60;transition:scale .3s var(--cinema-ease),box-shadow .3s,background .3s}
.reading-progress span{background:linear-gradient(90deg,#638a68,#a893ba,#be9f6b)}
.mobile-menu{transition:opacity .3s,transform .4s var(--cinema-ease),visibility .3s}
.menu-open .mobile-menu>a{animation:cinema-menu-link 420ms var(--cinema-ease) var(--menu-cue) both}
@keyframes cinema-menu-link{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.button,.header-cta{position:relative;isolation:isolate;overflow:hidden}
.button::before,.header-cta::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent,#fff9ed30,transparent);transform:translateX(-125%);transition:transform .5s var(--cinema-slow)}
@media(hover:hover) and (pointer:fine){.button:hover::before,.header-cta:hover::before{transform:translateX(125%)}.service-card{transition:transform .35s var(--cinema-ease),background .3s,box-shadow .35s,border-color .3s}.service-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #8a5f4610}}
@media(max-width:1000px){
 .scene{--blend:110px;--halo-x:50%}
 .cinema-halo{top:40px;width:680px;height:610px;opacity:.72;transform:translate3d(-50%,calc(var(--cinema-camera)*.5),0)}
 .hero-scene .cinema-halo{top:-50px;height:650px}
 .cinema-wing-near{left:-52%;opacity:.18}.cinema-wing-far{right:-42%;opacity:.2}
 .cinema-cells>i:nth-child(1){left:3%;top:270px;width:33px;height:33px;border-radius:10px}.cinema-cells>i:nth-child(1)::after{inset:10px}
 .cinema-cells>i:nth-child(2){top:160px;right:5%}.cinema-cells>i:nth-child(3){display:none}
 .cinema-horizon{height:220px;bottom:-80px}
 .scene:not(.hero-scene) .portrait-frame>.floating-art{width:64px;height:64px;left:auto;right:12px;top:70px;bottom:auto}
}
@media(max-width:600px){
 .cinema-halo{top:80px;width:470px;height:500px}.hero-scene .cinema-halo{top:-10px;width:500px;height:460px}
 .cinema-halo>i{inset:10% 14%;opacity:.35;box-shadow:none}.cinema-wing{display:none}.cinema-cells{opacity:.5}
 .cinema-cells>i:nth-child(1){top:330px;left:-8px}.cinema-cells>i:nth-child(2){top:150px;right:12px;width:22px;height:22px;border-radius:7px}.cinema-cells>i:nth-child(2)::after{inset:6px}
 .hero-scene .hero-formula{width:62px;height:62px;left:14px;top:135px}.hero-scene .hero-workbook{width:68px;height:68px;right:14px;top:200px}
 .scene .scene-copy,.scene .contact-panel,.scene .hero-copy{width:100%;margin-left:0;margin-right:0}
 .scene .scene-copy,.scene .contact-panel{max-width:none}
 .whatsapp-float,.portrait-main-active .whatsapp-float{width:44px;height:44px;right:max(8px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));padding:10px}
 .session-offer{flex-wrap:wrap;row-gap:8px}.session-offer>span{font-size:12px;padding-left:10px}
 .scene-copy>.button,.contact-copy>.button,.hero-copy>.button{max-width:100%;font-size:13px;gap:10px;padding-left:14px;padding-right:14px}
 .demo-grid{font-size:12px}.demo-grid td,.demo-grid th{padding-left:5px;padding-right:5px}.demo-grid .row-col{width:18px}.grid-labels td{font-size:10px}
 .editable-cell input,.editable-cell select{font-size:16px}.demo-grid .status-col{width:38%}
 .formula-bar{gap:7px;padding-left:10px;padding-right:10px}.formula-bar code{font-size:11px;overflow-wrap:anywhere}
 .workbook-tabs>button{font-size:12px;line-height:1.3}.workbook-titlebar{gap:5px;padding-left:10px;padding-right:10px;font-size:11px}
 .workbook-caption .button{max-width:100%;padding:12px 13px;font-size:12px;gap:8px}
 .scene .site-footer{padding-right:var(--edge)}
 .floating-art[data-mass] img{animation-name:cinema-phone-bob}
 @keyframes cinema-phone-bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
}
@media(max-width:360px){.scene-copy h2,.contact-copy h2{font-size:30px}.hero-copy h1{font-size:34px}.coaching-copy,.contact-panel{padding-left:18px;padding-right:18px}.session-offer>span{border-left:0;padding-left:0}.workbook-panel{min-height:450px}}
.reduced-motion .cinema-line,.reduced-motion .cinema-art,.reduced-motion .hero-signoff,.reduced-motion .mobile-menu>a{animation:none!important;opacity:1!important;transform:none!important;translate:none!important;will-change:auto!important}
.reduced-motion .scene .photo-wrap{transform:translateX(-50%)}
.reduced-motion .cinema-atmosphere *{transform:none!important}.reduced-motion .cinema-halo{transform:translateX(-50%)!important}
.reduced-motion .floating-art img{animation:none!important}
.reduced-motion .scene .floating-art{transform:translate3d(var(--art-x,0px),var(--art-y,0px),0)!important}
@media(prefers-reduced-motion:reduce){.cinema-line,.cinema-art,.hero-signoff,.mobile-menu>a{animation:none!important;opacity:1!important;transform:none!important;translate:none!important;will-change:auto!important}.cinema-atmosphere *{transform:none!important}.cinema-halo{transform:translateX(-50%)!important}.floating-art img{animation:none!important}.cinema-nav-light,.button::before,.header-cta::before{transition:none}}
.portrait-frame.is-chatting .portrait-tip-layer .portrait-note{opacity:1}
.hero-scene:has(.portrait-frame.is-chatting)>.stage>.portrait-note{opacity:calc(1 - var(--portrait-release))}
@media(max-width:600px){.scene:not(.hero-scene) .portrait-tap-hint{left:12px;right:auto}.scene:not(.hero-scene) .portrait-frame.is-chatting .portrait-tap-hint{opacity:0}}
@media(min-width:601px) and (max-width:1000px){.scene .scene-copy,.scene .contact-panel{width:calc(100% - 60px);max-width:660px;margin-left:0;margin-right:60px}}

/* A shallow bottom dock restores the workbook's full phone width. */
.enquiry-dock{display:contents}.enquiry-dock>span{display:none}
html{scroll-padding-top:90px}
@media(min-width:1001px) and (max-width:1200px){.hero-scene .hero-formula{width:72px;height:72px}}
@media(max-width:600px){
 html{scroll-padding-bottom:88px}body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
 .enquiry-dock{position:fixed;display:flex;z-index:45;left:0;right:0;bottom:0;align-items:center;justify-content:space-between;gap:12px;padding:9px max(16px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom));min-height:66px;background:#fffaf3f5;border-top:1px solid #d4dfce;box-shadow:0 -6px 24px #28594e08}
 .enquiry-dock>span{display:block;font:500 15px/1.25 var(--display);max-width:135px}
 .enquiry-dock .whatsapp-float,.portrait-main-active .enquiry-dock .whatsapp-float{position:relative;inset:auto;width:auto;height:46px;min-height:46px;padding:10px 15px;gap:8px;flex:none;box-shadow:none}
.enquiry-dock .whatsapp-float .wa-label{display:flex}.enquiry-dock .wa-label b{font-size:13px}.enquiry-dock .wa-label small,.enquiry-dock .wa-dot{display:none}.enquiry-dock .whatsapp-float>svg{width:21px;height:21px}
 main :is(input,select,button,a,summary){scroll-margin-bottom:90px}
}

/* Each prop belongs to its pose, with the same fixed-home safety margin. */
@media(min-width:1001px){
 .coaching-scene:not(.hero-scene) .portrait-frame>.floating-art{left:auto;right:12px;top:105px;width:72px;height:72px}
 .sheets-scene:not(.hero-scene) .portrait-frame>.floating-art{left:0;right:auto;top:210px;width:64px;height:64px}
 .services-scene:not(.hero-scene) .portrait-frame>.floating-art{left:2px;right:auto;top:270px;width:64px;height:64px}
 .contact-scene:not(.hero-scene) .portrait-frame>.floating-art{top:72px;width:76px;height:76px}
}
@media(min-width:1001px) and (max-width:1200px){.coaching-scene:not(.hero-scene) .portrait-frame>.floating-art{width:64px;height:64px}}
.hero-offer-line{display:none}
@media(max-width:600px){
 .hero-offer-line{display:block;font-size:11px;line-height:1.3;font-weight:800;margin:4px 0;color:var(--pine)}
 .hero-scene .hero-signoff{top:calc(clamp(330px,45svh,395px) - 104px);padding:8px 10px 6px}
 .hero-scene .hero-signoff .hero-title{font-size:32px}
 .hero-scene .hero-signoff .scene-bottom{margin-top:5px}
 .hero-scene .hero-copy{padding-top:20px;padding-bottom:20px}
 .enquiry-dock>span{display:none}
 .enquiry-dock .whatsapp-float,.portrait-main-active .enquiry-dock .whatsapp-float{flex:1;width:100%;justify-content:center}
 .enquiry-dock .wa-label b{font-size:14px}
 .scene:not(.hero-scene) .scene-topline{margin-bottom:12px}
 .scene:not(.hero-scene) .scene-copy>.pill{border:0;background:none;padding:0;border-radius:0;font-size:12px;line-height:1.5}
 .scene:not(.hero-scene) .scene-copy h2,.scene .contact-copy h2{margin-top:12px;margin-bottom:14px}
 .scene-copy>p,.contact-copy>p{margin-bottom:18px}
 .scene:not(.hero-scene) .shop-copy,.scene:not(.hero-scene) .services-copy{padding-top:14px}
 .coaching-copy,.contact-panel{padding-top:22px;padding-bottom:22px}
 .workbook-preview{margin-top:18px}.service-grid{margin-top:18px}
 .service-card{padding:15px 16px;min-height:94px}.faq-card{margin-top:22px}
 .scene .arcade-section+.site-footer{padding-bottom:24px}
 .site-footer .back-top{padding-right:0}
}
@media(max-width:600px) and (max-height:700px){
 .hero-copy{margin-top:320px}
 .hero-scene .portrait-window,.hero-scene .portrait-interaction{height:241px}
 .hero-scene .hero-signoff{top:216px}
 .hero-copy h1{font-size:32px;margin-top:12px;margin-bottom:14px}
 .hero-scene .portrait-note{width:100px;max-width:none;font-size:12px;padding:9px 11px}
 .hero-scene .portrait-tap-hint{top:92px;bottom:auto;left:18px}
 .hero-scene .hero-formula{width:48px;height:48px;left:18px;top:96px}
}