@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Italiana&display=swap');
:root{--green:#14291f;--ink:#17291f;--cream:#f5f3ea;--lime:#d3db98;--line:rgba(23,41,31,.2)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b3c96d;outline-offset:6px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}h1,h2{font-family:'Italiana',Georgia,serif;line-height:1.08;letter-spacing:-.045em}h1 em,h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em}h2{font-size:clamp(42px,4.7vw,74px)}p+p{margin-top:20px}header{position:absolute;top:0;left:0;width:100%;height:110px;z-index:3;padding:0 5%;display:flex;align-items:center;justify-content:space-between;color:white;border-bottom:1px solid #ffffff30}.wordmark{font-size:35px;letter-spacing:-2px;font-weight:500;line-height:1;display:inline-flex;align-items:baseline;gap:12px}.wordmark span{font-size:11px;letter-spacing:3px;font-weight:500}nav{display:flex;gap:34px;font-size:14px}nav a{border-bottom:1px solid transparent;padding:7px 0}nav a:hover{border-color:currentColor}.menu{display:none}.hero{height:min(900px,100svh);min-height:710px;position:relative;background:#10271f;color:white;overflow:hidden}.hero-image{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,16,.76),rgba(8,24,16,.32) 62%,rgba(8,24,16,.05)),linear-gradient(0deg,rgba(8,24,16,.6),transparent 30%)}.hero-content{position:relative;padding:220px 5% 120px;max-width:1070px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;line-height:1.5;margin-bottom:27px}.hero h1{font-size:clamp(56px,6.6vw,102px)}.hero h1 em{color:#e6ebc8}.hero-copy{max-width:440px;margin-top:28px;font-size:17px;color:#f3f4eb;line-height:1.8}.button{display:inline-flex;gap:52px;justify-content:space-between;align-items:center;padding:15px 23px;font-size:14px;font-weight:500;margin-top:32px;transition:background .25s,transform .25s}.button:hover{background:var(--lime);transform:translateY(-2px)}.light{background:var(--cream);color:var(--ink)}.button span{font-size:22px}.hero-bottom{position:absolute;left:5%;right:5%;bottom:28px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.7px}.hero-bottom a{display:flex;gap:30px}.section{padding:110px 7%}.intro{padding-bottom:45px}.intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:10%}.intro-grid>div{max-width:510px}.lead{font-size:24px;line-height:1.5}.intro-grid p:not(.lead){color:#526054}.audiences{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:80px;padding-top:28px;font-size:11px;letter-spacing:1.7px}.hospitality{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding-top:65px}.hospitality-image{height:660px;position:relative;overflow:hidden}.hospitality-image img{width:100%;height:100%;object-fit:cover;object-position:76%}.image-caption{position:absolute;bottom:22px;left:24px;color:white;font-size:11px;letter-spacing:2px;text-shadow:0 1px 6px #000}.hospitality-copy .eyebrow{font-size:11px}.hospitality-copy h2{font-size:clamp(40px,4.4vw,65px);margin-bottom:30px}.hospitality-copy p:not(.eyebrow){color:#526054}.hospitality-copy .standout{font-size:20px;color:var(--ink)!important}.text-link{display:inline-flex;align-items:center;gap:35px;border-bottom:1px solid;padding-bottom:6px;margin-top:30px;font-size:14px}.text-link:hover{opacity:.7}.approach{background:var(--green);color:var(--cream)}.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end}.section-heading>p{max-width:300px;color:#c0c9bd}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;margin-top:74px}.steps article{border-top:1px solid #ffffff38;padding-top:24px}.step-number{font-size:12px;letter-spacing:1.6px;color:var(--lime)}h3{font-family:'Italiana',Georgia,serif;font-size:35px;line-height:1.2;margin:26px 0 20px}.steps p{font-size:15px;color:#c0c9bd}.steps strong{color:var(--cream);font-weight:500}details{border-top:1px solid #ffffff38;border-bottom:1px solid #ffffff38;margin-top:58px}summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-size:14px}summary::-webkit-details-marker{display:none}summary span{font-size:24px;line-height:1}details[open] summary span{transform:rotate(45deg)}details>div{max-width:850px;padding:0 0 25px;color:#c0c9bd;font-size:15px}.brand-note{display:grid;grid-template-columns:1.2fr 1fr;column-gap:13%;background:#e8ebde}.brand-note>.eyebrow{grid-column:1/-1}.brand-note h2{font-size:clamp(52px,5.8vw,86px)}.brand-note>div{align-self:end;max-width:450px}.brand-note>div>p:first-child{font-size:23px;line-height:1.45}.offers .section-heading>p{color:#526054}.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:60px}.offer{border:1px solid var(--line);padding:38px 38px 0}.offer:nth-child(2){background:#e8ebde;border-color:#e8ebde}.offer h3{font-size:42px}.offer>p{max-width:420px;color:#526054}.offer-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:38px;padding:22px 0}.offer-foot span{font-size:11px;letter-spacing:1.5px}.offer-foot a{font-size:25px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .2s}.offer-foot a:hover{background:var(--lime)}.contact{background:var(--green);color:var(--cream);text-align:center;padding-top:100px;padding-bottom:100px}.contact h2{font-size:clamp(52px,6.5vw,95px)}.contact h2 em{color:#d9dfb4}.contact>p:not(.eyebrow){margin-top:28px;color:#c0c9bd}.contact .contact-note{font-size:12px;margin-top:18px;color:#b8c1b4}footer{padding:40px 5%;display:flex;justify-content:space-between;align-items:center;gap:30px}footer .wordmark{font-size:29px}footer .wordmark span{font-size:9px}footer p{font-size:13px}footer>span{font-size:10px;letter-spacing:1.2px}.skip{position:fixed;left:20px;top:-100px;z-index:10;padding:10px;background:var(--cream)}.skip:focus{top:10px}[hidden]{display:none!important}@media(min-width:1700px){.section{padding-left:max(7%,calc((100vw - 1450px)/2));padding-right:max(7%,calc((100vw - 1450px)/2))}}@media(max-width:800px){header{height:85px;padding:0 6%}.wordmark{font-size:29px}.wordmark span{font-size:9px}header nav{display:none}.menu{display:block;border:1px solid #ffffff60;background:transparent;color:white;padding:7px 14px;font-size:14px}#mobile-nav{position:absolute;top:85px;z-index:4;background:var(--green);width:100%;padding:20px 6%;flex-direction:column;gap:10px}.hero{min-height:690px;height:92svh;max-height:950px}.hero-content{padding:185px 6% 110px}.hero h1{font-size:clamp(49px,8.9vw,72px)}.hero .eyebrow{font-size:10px;letter-spacing:1.5px}.hero-copy{max-width:360px;font-size:16px}.hero-image{object-position:65%}.hero-shade{background:linear-gradient(90deg,#0a1e16cf,#0a1e164d),linear-gradient(0deg,#0a1e16ad,transparent 45%)}.hero-bottom{left:6%;right:6%;font-size:9px;letter-spacing:1px}.hero-bottom a{gap:10px}.hero-bottom>span{max-width:180px}.section{padding:75px 6%}.intro-grid,.hospitality,.brand-note{grid-template-columns:1fr;gap:32px}.intro-grid>div{max-width:none}.lead{font-size:22px}.audiences{margin-top:42px;gap:15px;flex-wrap:wrap;font-size:10px}.hospitality{padding-top:10px}.hospitality-image{height:430px}.hospitality-copy h2{font-size:47px}.section-heading{display:block}.section-heading>p{margin-top:26px;max-width:400px}.steps{grid-template-columns:1fr;gap:34px;margin-top:44px}.steps h3{margin:15px 0;font-size:32px}.steps p{font-size:16px}.brand-note>.eyebrow{margin-bottom:0}.brand-note>div{max-width:none}.offer-grid{grid-template-columns:1fr;gap:22px;margin-top:40px}.offer{padding:28px 25px 0}.offer h3{font-size:37px}.contact h2{font-size:clamp(48px,9vw,72px)}footer{flex-wrap:wrap;padding:35px 6%;gap:22px}footer p{width:100%;order:3}footer>span{font-size:9px}.desktop{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Business-led editorial opening; hospitality retained as a secondary specialism. */
.hero{background:#14291f;min-height:680px;height:min(800px,94svh)}.hero-shade{background:linear-gradient(115deg,#14291f 20%,#213e2e 100%)}.hero-content{max-width:1320px;padding-top:220px}.hero h1{font-size:clamp(48px,5.6vw,86px)}.hero-copy{max-width:510px}.intro{padding-bottom:75px}#business{background:#e8ebde}.hospitality-image{height:420px}.hospitality-copy h2{font-size:58px}.steps h3{font-size:31px}@media(max-width:800px){.hero{min-height:640px;height:90svh;max-height:800px}.hero-content{padding-top:175px}.hero h1{font-size:clamp(43px,7.3vw,61px)}.hospitality{padding-top:65px}.hospitality-image{height:300px}.hospitality-copy h2{font-size:46px}.intro{padding-bottom:60px}}

/* Tinderbox identity */
header{background:#14291f}.wordmark{display:block;line-height:0;flex-shrink:0}.studio-logo{display:block;width:270px;height:auto}footer{background:#14291f;color:#f5f3ea;border-top:1px solid #ffffff30}footer .studio-logo{width:240px}@media(max-width:800px){header .studio-logo{width:215px}footer .studio-logo{width:215px}}@media(max-width:370px){header .studio-logo{width:185px}}

/* A content-sized hero prevents collisions at short heights and enlarged text. */
.studio-logo{filter:url(#logo-transparency)}
header{position:relative}
.hero{height:auto;max-height:none;min-height:calc(100svh - 110px);display:flex;flex-direction:column;overflow:visible}
.hero-shade{pointer-events:none}
.hero-content{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:6%;width:100%;max-width:none;padding:75px 5% 64px;flex:1}
.hero h1{font-size:clamp(42px,4.5vw,70px)}
.hero-copy{max-width:500px}
.hero-bottom{position:relative;left:auto;right:auto;bottom:auto;flex-wrap:wrap;gap:20px;margin:0 5%;padding:26px 0;border-top:1px solid #ffffff26}
.hero-player{min-width:0;width:100%}
.screen{aspect-ratio:16/10;background:#0b1812;border:1px solid #ffffff28;position:relative;display:grid;place-items:center;overflow:hidden}
.screen-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:28px;gap:28px;text-align:center}
.screen-label{font-size:12px;letter-spacing:3px;color:#c1c9b7}
.play-showreel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 24px;background:none;border:0;color:#f5f3ea;font-size:18px;cursor:pointer;min-height:48px}
.play-circle{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;border:1px solid #f5f3ea90;transition:background .2s,transform .2s}
.play-circle svg{margin-left:5px}
.play-showreel:not(:disabled):hover .play-circle{background:#d77b45;transform:scale(1.05)}
.play-showreel:disabled{cursor:default}
#showreel-status{font-size:14px;color:#c1c9b7;margin:0}
#showreel-video{width:100%;height:100%;max-height:100%;object-fit:contain;background:#050b08;position:absolute;inset:0}
.player-caption{display:flex;justify-content:space-between;gap:15px;padding-top:18px;font-size:11px;letter-spacing:1.4px;color:#c1c9b7}
.clip-navigation{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.clip-navigation button{padding:10px 14px;min-height:44px;border:1px solid #ffffff40;background:transparent;color:var(--cream);cursor:pointer;font-size:14px}
.clip-navigation button[aria-current="true"]{background:var(--cream);color:var(--green)}
@media(max-width:1000px){.hero-content{gap:4%}.hero h1{font-size:44px}.screen-intro{gap:20px;padding:22px}.play-circle{width:64px;height:64px}}
@media(max-width:800px){.hero{height:auto;max-height:none;min-height:0}.hero-content{grid-template-columns:1fr;padding:48px 6% 42px;gap:42px}.hero h1{font-size:clamp(40px,8vw,60px)}.hero-copy{max-width:540px}.hero-bottom{margin:0 6%;padding:22px 0}.hero-bottom>span{max-width:none}.screen{aspect-ratio:16/10}.screen-intro{gap:24px}.play-circle{width:72px;height:72px}#mobile-nav{top:85px}}

/* Tactile transport console: functional surfaces, glass and a sprung play key. */
.hero-content{grid-template-columns:1.05fr 1fr;gap:5.5%}
.reel-console{background:linear-gradient(135deg,#323733 0%,#202622 45%,#171e1a 100%);padding:20px 20px 14px;border:1px solid #65706570;border-radius:12px;box-shadow:0 36px 65px -22px #030b08a6,0 7px 0 -2px #0c140f,0 8px 0 -2px #4b584c,0 1px 0 #adb5a652 inset;position:relative}
.console-top,.console-bottom{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:1.8px;color:#a9b2a3;align-items:center}
.console-top{padding:0 2px 17px}.console-top>span:first-child{font-weight:600;color:#e0e5d7;letter-spacing:2.5px}.console-top>span:last-child{font-size:9px;letter-spacing:1.2px}
.reel-console .screen{aspect-ratio:16/10;border:5px solid #111813;outline:1px solid #5c675747;border-radius:5px;background:#08130d;box-shadow:0 0 0 1px #000,0 3px 10px #000a inset;isolation:isolate}
.reel-console .screen-intro{position:absolute;inset:0;padding:22px;display:flex;justify-content:space-between;gap:10px;background:radial-gradient(ellipse at 50% 50%,#203a2747,transparent 65%),linear-gradient(140deg,#ffffff08,transparent 50%)}
.reel-console .screen-intro:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#ffffff08,transparent 38%);pointer-events:none}
.screen-topline{width:100%;display:flex;justify-content:space-between;font-family:monospace;font-size:11px;letter-spacing:1.3px;color:#9fac93}.screen-topline>span:last-child{font-size:11px}
.screen-wordmark{width:85%;height:auto;filter:url(#logo-transparency);opacity:.88}
.screen-bottomline{font-family:monospace;color:#a8b39b;font-size:11px;letter-spacing:2px}
.transport{display:flex;align-items:center;gap:20px;padding:27px 2px 23px}
.key-socket{padding:5px 5px 9px;border-radius:5px;background:#080e0b;box-shadow:0 1px 0 #76827373,0 2px 5px #0009 inset;flex-shrink:0}
.reel-console .play-showreel{display:block;padding:0;min-height:0;width:99px;border:0;border-radius:3px;background:linear-gradient(#6f776c,#535d50);color:#243323;box-shadow:0 5px 0 #475040,0 6px 2px #000b;position:relative;transform:translateY(0);transition:transform 100ms ease,box-shadow 100ms ease;cursor:pointer}
.key-face{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:12px 14px 10px;min-height:75px;border:1px solid #d3d9c1;border-bottom-color:#a6af94;border-radius:3px;background:repeating-linear-gradient(0deg,#fff0 0px,#fff0 2px,#fff1 3px),linear-gradient(115deg,#dce0cf,#b9c2aa 45%,#d0d6c0);box-shadow:0 1px 0 #fff9 inset,1px 0 0 #fff4 inset;text-shadow:0 1px 0 #edf1d8;font-size:11px;font-weight:700;letter-spacing:2px}
.reel-console .play-showreel:hover .key-face{filter:brightness(1.08)}
.reel-console .play-showreel:active,.reel-console .play-showreel.is-pressed,.reel-console .play-showreel.is-playing{transform:translateY(5px);box-shadow:0 0 0 #475040,0 1px 2px #000b}
.reel-console .play-showreel.is-playing .key-face{background:linear-gradient(115deg,#c4ceb4,#aebd9b);box-shadow:0 2px 5px #34482d40 inset}
.reel-console .play-showreel:focus-visible{outline:2px solid #f2c09a;outline-offset:9px}
.transport-info{min-width:0;flex:1}.transport-title{font-family:'Italiana',Georgia,serif;color:#f5f3ea;font-size:25px;line-height:1.2;display:block;margin-bottom:6px}
.reel-console #showreel-status{font-size:12px;color:#b2bbaa;line-height:1.5;max-width:220px}
.time-display{background:#0d160f;border:1px solid #4a594149;box-shadow:0 2px 4px #0006 inset;border-radius:3px;padding:9px 10px;min-width:75px;display:flex;flex-direction:column;align-items:center;gap:3px}
#reel-time{font-family:monospace;font-size:20px;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#b4c39a;text-shadow:0 0 8px #aac77630}.time-caption{font-size:8px;letter-spacing:1.4px;color:#879876}
.console-bottom{border-top:1px solid #ffffff10;padding:12px 2px 0;font-size:9px;color:#9ba793}.hero-player>.player-caption{margin-top:12px;font-size:10px;letter-spacing:1.5px;padding:14px 3px 0;color:#bcc4b1}
@media(min-width:1350px){.reel-console{padding:24px 24px 16px}.transport{padding-top:30px;padding-bottom:28px}.reel-console .screen{aspect-ratio:16/10}}
@media(max-width:1100px) and (min-width:801px){.time-display{display:none}.transport{gap:15px}.reel-console{padding:16px}.reel-console .screen-intro{padding:16px}.transport-title{font-size:23px}}
@media(max-width:800px){.hero-content{grid-template-columns:1fr;gap:46px}.hero-player{max-width:620px;margin:0 auto}.reel-console .screen-intro{gap:10px}.transport-title{font-size:26px}}
@media(max-width:420px){.reel-console{padding:14px 13px 12px}.console-top{gap:8px}.console-top>span:last-child{font-size:8px}.transport{gap:13px;padding:22px 0 19px}.reel-console .play-showreel{width:78px}.key-face{min-height:68px;padding:10px}.time-display{display:none}.reel-console .screen-intro{padding:16px}.transport-title{font-size:25px}.hero-player>.player-caption{font-size:9px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.reel-console .play-showreel{transition:none}}

/* A photographic CRT/VHS housing with one real transport key. */
.crt-player{max-width:600px;margin:auto;width:100%;filter:drop-shadow(0 25px 20px #06110970)}
.crt-unit{position:relative;width:100%;aspect-ratio:1}
.crt-housing{display:block;width:100%;height:auto;clip-path:polygon(4.5% 6.5%,5.5% 4.8%,10% 4.1%,30% 3.5%,50% 3.4%,80% 3.9%,94.5% 4.8%,95.5% 6.8%,95.5% 90%,93.2% 92%,92% 95%,8% 95%,7% 92%,4.5% 90%);user-select:none;pointer-events:none}
.crt-screen{position:absolute;left:14.7%;top:12.2%;width:71.1%;height:50.4%;border-radius:8% / 7%;overflow:hidden;isolation:isolate}
.crt-screen #showreel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#070b09}
.crt-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;background:transparent}
.crt-idle #screen-message{font-family:monospace;letter-spacing:2px;font-size:clamp(10px,1vw,13px);color:#d3ddcc;text-shadow:0 0 8px #c4d7b63b;opacity:.85}
.crt-key-socket{position:absolute;left:39%;top:84%;width:22%;height:7.4%;padding:3px 3px 6px;border-radius:5px;background:#101413;box-shadow:0 1px 1px #929a9150,0 2px 4px #000b inset}
.crt-play{width:100%;height:100%;display:block;border:0;border-radius:3px;padding:0;cursor:pointer;background:#535b50;color:#1c281b;box-shadow:0 4px 0 #40483b,0 5px 2px #000b;transition:transform 90ms ease,box-shadow 90ms ease;touch-action:manipulation}
.crt-key-face{height:100%;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #d5dbca;border-bottom-color:#949e86;border-radius:3px;background:repeating-linear-gradient(0deg,#fff0 0px,#fff0 2px,#fff1 3px),linear-gradient(110deg,#e1e5d6,#b8c2a7 55%,#d1d9c1);box-shadow:0 1px 0 #fff9 inset;font-size:12px;font-weight:700;letter-spacing:1.5px;text-shadow:0 1px 0 #fff8}
.crt-play:hover .crt-key-face{filter:brightness(1.13)}
.crt-play:active,.crt-play.is-pressed,.crt-play.is-playing{transform:translateY(4px);box-shadow:0 1px 1px #0009}
.crt-play.is-playing .crt-key-face{background:linear-gradient(110deg,#c4cfb5,#abb999);box-shadow:0 2px 4px #45543a50 inset}
.crt-play:focus-visible{outline:3px solid #f3c19d;outline-offset:6px}
.crt-status{font-size:13px;color:#c2cbb9;text-align:center;margin:9px 15px 0;min-height:22px}
@media(max-width:800px){.crt-player{max-width:540px}.crt-idle #screen-message{font-size:11px}.crt-key-socket{left:36%;width:28%;top:83%;height:10%}.crt-key-face{min-height:36px}.crt-play{min-height:36px}}
@media(max-width:400px){.crt-key-face{font-size:11px;gap:6px}.crt-idle #screen-message{font-size:10px;letter-spacing:1px}.crt-status{font-size:12px}}
@media(prefers-reduced-motion:reduce){.crt-play{transition:none}}

/* Flame accent for the two primary invitations. */
.hero h1 em,.contact h2 em{color:#f3aa66;background-image:linear-gradient(105deg,#e88650 0%,#f5a45e 35%,#ffd99a 65%,#ee9153 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(forced-colors:active){.hero h1 em,.contact h2 em{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* Tape loading follows the depth of the front-loading slot. */
.crt-unit{perspective:900px}
.vhs-slot{position:absolute;left:18.1%;top:72.7%;width:64%;height:7.2%;background:linear-gradient(#050807,#101512);border-radius:2px;box-shadow:0 2px 5px #000c inset;pointer-events:none}
.vhs-cassette{position:absolute;left:18%;top:72.5%;width:64%;height:11%;transform-origin:50% 0;z-index:2;pointer-events:none;filter:drop-shadow(0 5px 3px #0009)}
.vhs-cassette img{display:block;width:100%;height:100%;clip-path:polygon(8.3% 3.5%,91.6% 3.5%,93% 15.8%,94% 16.5%,99% 65%,98% 91%,96% 94%,4% 94%,2% 92%,1% 65%,6% 16.5%,7% 16.5%);user-select:none}
.vhs-flap{position:absolute;left:18.3%;top:72.8%;width:63.4%;height:7%;transform-origin:50% 0;transform:rotateX(-88deg);z-index:3;border:1px solid #4e5557;border-top-color:#657073;background:linear-gradient(165deg,#373d40,#272d30 70%,#1c2428);box-shadow:0 2px 3px #000a,0 1px 0 #ffffff0d inset;border-radius:2px;pointer-events:none;backface-visibility:hidden}
.crt-key-socket{z-index:4}
.crt-unit.is-loading .vhs-cassette{animation:tape-in 850ms cubic-bezier(.38,.03,.3,1) forwards}
.crt-unit.is-loading .vhs-flap{animation:flap-shut 320ms 850ms cubic-bezier(.3,.6,.3,1) both}
.crt-unit.is-loaded .vhs-cassette{visibility:hidden;opacity:0}
.crt-unit.is-loaded .vhs-flap{transform:rotateX(0)}
.crt-play[aria-busy="true"]{transform:translateY(4px);box-shadow:0 1px 1px #0009;cursor:progress}
@keyframes tape-in{0%{transform:translateY(0) scale(1);opacity:1}75%{transform:translateY(-1%) scale(.98,.3);opacity:1}100%{transform:translateY(0) scale(.96,.02);opacity:0}}
@keyframes flap-shut{0%{transform:rotateX(-88deg)}80%{transform:rotateX(3deg)}100%{transform:rotateX(0)}}
@media(prefers-reduced-motion:reduce){.crt-unit.is-loading .vhs-cassette,.crt-unit.is-loading .vhs-flap{animation:none}.crt-unit.is-loading .vhs-cassette{visibility:hidden}.crt-unit.is-loading .vhs-flap{transform:rotateX(0)}}

/* Straight-on spine: crop the asset margin inside the tape's front face. */
.vhs-cassette{left:18.4%;top:73.3%;width:63.2%;height:6.2%;overflow:hidden;border-radius:3px;transform-origin:50% 50%;filter:none;box-shadow:0 5px 4px #000b}
.vhs-cassette img{position:absolute;left:-1.5%;top:-120%;width:103%;height:350%;max-width:none;clip-path:none;object-fit:fill}
@keyframes tape-in{0%{transform:scale(1);opacity:1;filter:brightness(1)}75%{transform:scale(.96,.93);opacity:1;filter:brightness(.4)}100%{transform:scale(.94,.9);opacity:0;filter:brightness(.2)}}