@font-face{font-family:Inter;src:url('assets/InterTight.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Bodoni;src:url('assets/BodoniModa.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--paper:#f4f1ea;--ember:#ff9a55;--black:#0a0a0b;color-scheme:dark}
*{box-sizing:border-box}html{background:var(--black);scrollbar-width:thin;scrollbar-color:#695344 #0a0a0b}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--paper);background:var(--black)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ember);outline-offset:5px}a{color:inherit}img{display:block}h1,h2,p{margin:0}h1,h2{font-family:Bodoni,Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:-.045em}em{font-style:italic;color:var(--ember)}button{border:0}::selection{background:var(--ember);color:#14110e}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#journey{height:1100svh;position:relative}.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0a0a0b}.visuals{position:absolute;inset:0;overflow:hidden;pointer-events:none}.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.room{position:absolute;inset:0;width:100%;height:100%}.led{position:absolute;left:24.15%;top:4.6%;width:52.2%;height:40.2%;overflow:hidden;background:#0c0c11;container-type:size}.stock{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.stock p{z-index:1;font:400 2.5cqw/1.4 Arial,sans-serif;text-align:center;color:#eee;letter-spacing:0}.stock-orbs{position:absolute;inset:-15%;background:radial-gradient(ellipse at 20% 30%,#20203d 0,transparent 32%),radial-gradient(ellipse at 75% 60%,#301f36 0,transparent 40%),#101017;animation:stock-loop 12s linear infinite alternate;opacity:.8}.film{position:absolute;inset:0;opacity:0;background:#211710;overflow:hidden}.film-art{position:absolute;inset:0;background-image:url('assets/web/celebration-frames.webp');background-size:300% 200%;background-position:0 0;animation:film-drift 12s ease-in-out infinite alternate}.film-wash{position:absolute;inset:0;background:linear-gradient(transparent 25%,#27110033 55%,#000a)}.film-credit{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:end;padding-bottom:4%;gap:1.5cqh;text-align:center}.film-credit span{font-size:1.25cqw;letter-spacing:.3em}.film-credit strong{font:400 13cqw/1 Bodoni,serif;letter-spacing:-.06em}.film-beam{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,#ffdb9d35 50%,transparent 60%);animation:beam 6s linear infinite}.crowd,.service{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;will-change:transform,opacity;transform-origin:50% 80%}.service{transform-origin:50% 60%}.crowd-after{opacity:0}.wall-glow{position:absolute;left:17%;top:0;width:65%;height:70%;background:radial-gradient(ellipse,#ff9a5529,transparent 70%);mix-blend-mode:screen;opacity:0}.birthday-board{position:absolute;left:78.2%;top:53%;width:14%;text-align:center;font-size:7px;letter-spacing:.16em;color:#ffe0a8;transform:rotate(-3deg);opacity:0}.birthday-board b{font-size:11px;letter-spacing:.1em}.portal-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#171310,#070708 80%);opacity:0}.room-close{position:absolute;inset:-12%;background:url('assets/web/club-background.webp') center/cover;filter:blur(7px) brightness(.4);opacity:0;will-change:transform,opacity}.problem{position:absolute;left:4%;right:4%;height:150px;top:calc(44% - 75px);overflow:hidden;opacity:0;mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}.problem-reel{position:absolute;width:100%;will-change:transform}.problem-reel p{height:150px;display:flex;justify-content:center;align-items:center;text-align:center;font:400 clamp(20px,3vw,42px)/1.4 Arial,sans-serif;color:#d9d8df}
.live-shot{position:absolute;left:50%;top:50%;width:max(100vw,177.68svh);aspect-ratio:1672/941;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity}.live-shot>img{width:100%;height:100%;object-fit:contain}.shot-shade{position:absolute;inset:0;background:linear-gradient(transparent 60%,#0a0a0b66)}.sent-bubble{position:absolute;left:55%;top:22%;max-width:370px;display:flex;align-items:center;gap:14px;background:#28231fe8;border:1px solid #b999743d;border-radius:14px;padding:17px 20px;box-shadow:0 20px 80px #0008;opacity:0;backdrop-filter:blur(20px);will-change:transform,opacity}.bubble-icon{height:34px;width:34px;display:grid;place-items:center;background:#ff9a5517;border:1px solid #ff9a5533;border-radius:9px;font-size:20px;color:var(--ember);flex-shrink:0}.sent-bubble small{font-size:8px;letter-spacing:.18em;color:#c3aa8e}.sent-bubble p{font-size:12px;line-height:1.45;margin:7px 0}.sent-bubble strong{font-weight:400;font-size:10px;color:var(--ember)}.sent-check{align-self:end;color:var(--ember);font-size:11px;white-space:nowrap}
.guest-phone{position:absolute;left:69%;top:46%;width:260px;height:530px;padding:10px;background:#0a0a0b;border:2px solid #b4a28b;border-radius:35px;box-shadow:0 40px 100px #0009,0 0 0 5px #22201f;opacity:0;transform:translate(-50%,-50%);overflow:hidden;will-change:transform,opacity}.phone-island{position:absolute;left:35%;right:35%;top:11px;height:18px;background:#000;border-radius:20px;z-index:3}.phone-status{display:flex;justify-content:space-between;font-size:9px;padding:8px 10px 15px}.phone-body{padding:16px 16px 10px}.venue-mark{display:block;text-align:center;font-size:10px;letter-spacing:.24em}.phone-line{height:1px;background:#ffffff20;margin:17px 0}.phone-eyebrow{font-size:7px;letter-spacing:.15em;color:#b4a494}.phone-body h2{font-size:34px;line-height:1.04;margin:10px 0}.phone-body>p{font-size:10px;color:#aba69e;margin-bottom:19px}.form-label{font-size:7px;letter-spacing:.16em;color:#aca297;margin:12px 0 7px}.form-value{height:26px;border-bottom:1px solid #ffffff30;display:flex;justify-content:space-between;font-size:13px;position:relative}.form-value i{position:absolute;left:35px;top:0;width:1px;height:15px;background:var(--ember);animation:blink 1s steps(1) infinite}.selfie-well{height:76px;border:1px dashed #ffffff35;border-radius:5px;margin-top:17px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;position:relative;overflow:hidden;background:#171511}.selfie-well>span:nth-child(2){font-size:9px;color:#b8afa2}.camera-outline{display:block;width:19px;height:13px;border:1px solid #bcac98;border-radius:3px;position:relative}.camera-outline:before{content:'';position:absolute;border:1px solid #bcac98;width:6px;height:6px;border-radius:50%;left:5px;top:2px}.selfie-image{position:absolute;inset:0;background:url('assets/web/celebration-frames.webp') 0 0/300% 200%;opacity:0}.selfie-well b{position:absolute;bottom:6px;right:6px;font-size:7px;background:#17110ae0;padding:4px 6px;color:var(--ember);font-weight:400;opacity:0}.phone-submit{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding:12px 10px;border-radius:4px;background:var(--ember);color:#21160d;font-size:10px}.phone-footnote{font-size:6px;color:#8e8579;margin-top:11px;text-align:center}.camera-frame{position:absolute;left:20%;top:15%;width:36%;height:54%;opacity:0}.camera-frame>i{position:absolute;width:25px;height:25px;border-color:#fff9;border-style:solid}.camera-frame>i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.camera-frame>i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.camera-frame>i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.camera-frame>i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}.camera-frame>span{position:absolute;top:-24px;left:0;font-size:8px;letter-spacing:.18em}.camera-frame>b{width:10px;height:10px;border:1px solid var(--ember);border-radius:50%;position:absolute;right:0;top:-24px;background:#ff9a5544}.camera-flash{position:absolute;inset:0;background:#ffefdb;opacity:0;pointer-events:none}
.submit-screen{position:absolute;left:39.25%;top:8%;width:20.5%;height:59%;padding:6% 2% 0;color:#f4f1ea;display:flex;flex-direction:column;align-items:flex-start;container-type:inline-size}.submit-screen>span{position:absolute;top:2%;left:0;right:0;text-align:center;font-size:4cqw;letter-spacing:.24em}.submit-portrait{width:58%;height:37%;min-height:60px;align-self:center;background:url('assets/web/celebration-frames.webp') 0 0/300% 200%;border:1px solid #ff9a5544;border-radius:4px;margin-bottom:8%}.submit-screen small{font-size:3.2cqw;letter-spacing:.2em;color:#a69889;margin-bottom:3%}.submit-screen>strong{font-size:6cqw;font-weight:400;border-bottom:1px solid #ffffff20;padding-bottom:4%;margin-bottom:6%;width:100%}.submit-screen>p{font-size:4cqw;color:#cbb08f;margin-top:0}.submit-label{position:absolute;left:0;top:104%;width:56%;font-size:6cqw;color:#261807;text-align:center}.submit-label b{margin-left:15%;font-size:7cqw}.submit-ripple{position:absolute;left:56%;top:73%;width:50px;height:50px;border:1px solid #fff9;border-radius:50%;opacity:0}
.generation{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8vw;opacity:0;will-change:transform,opacity}.memory{position:relative;width:260px;height:320px;perspective:1000px;transform:rotate(-5deg)}.memory-photo{position:absolute;inset:0;background:url('assets/web/celebration-frames.webp') 0 0/300% 200%;border:1px solid #ff9a5580;box-shadow:0 20px 100px #ff681022;border-radius:3px}.memory>i{position:absolute;inset:-10px;border:1px solid #ff9a5528;transform:translateZ(-20px) rotate(5deg)}.memory>i:nth-of-type(2){inset:-20px;transform:rotate(10deg)}.memory>i:nth-of-type(3){inset:-30px;transform:rotate(15deg)}.memory>i:nth-of-type(4){inset:-40px;transform:rotate(20deg)}.memory>span{position:absolute;bottom:15px;left:15px;font-size:8px;letter-spacing:.2em}.generation-copy{width:300px}.micro{font-size:9px;letter-spacing:.18em;color:#bd9d7a}.generation-track{height:1px;background:#fff2}.generation-track>i{display:block;height:1px;width:0;background:var(--ember);box-shadow:0 0 15px var(--ember)}.generation-copy>p{font-size:9px;color:#bdb1a3;display:flex;justify-content:space-between;margin-top:14px;gap:18px}.generation-copy b{font-weight:400;color:var(--ember)}#atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.vignette{position:absolute;inset:0;background:linear-gradient(#0008,transparent 19%,transparent 58%,#080808bb 87%,#080808ed);pointer-events:none}
.story-controls{position:absolute;left:4vw;right:4vw;bottom:25px;display:flex;align-items:center;gap:22px;height:32px;z-index:10}.story-controls>button{background:transparent;white-space:nowrap;font-size:10px;padding:8px 0}.story-controls>button:first-child{min-width:78px;text-align:left}.story-controls>button:first-child>span:first-child{margin-right:9px;color:var(--ember);font-size:10px}.story-controls>button:last-child{font-size:20px;color:var(--ember);padding:0 5px}.story-controls input{flex:1;min-width:0;height:20px;appearance:none;background:transparent;cursor:pointer}.story-controls input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,var(--ember) var(--progress,0%),#ffffff38 var(--progress,0%))}.story-controls input::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border-radius:50%;margin-top:-3px;background:var(--ember);box-shadow:0 0 10px #ff9a5555}.story-controls input::-moz-range-track{height:1px;background:#ffffff38}.story-controls input::-moz-range-progress{height:1px;background:var(--ember)}.story-controls input::-moz-range-thumb{height:7px;width:7px;border:0;border-radius:50%;background:var(--ember)}.timecode{font-size:8px;letter-spacing:.1em;color:#a79a8a;font-variant-numeric:tabular-nums}
dialog{width:min(560px,calc(100% - 32px));max-height:85svh;overflow:auto;border:1px solid #ff9a5540;background:#16130f;color:var(--paper);padding:40px}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}dialog h2{font-size:43px;margin:22px 0}dialog ol{padding-left:20px;font-size:13px;line-height:1.6;color:#c2b6a7}dialog li{padding:6px 0}dialog>p:not(.micro){font-size:13px;line-height:1.7;color:#c2b6a7}.close-dialog{background:transparent;position:absolute;right:15px;top:12px;font-size:26px}.close-dialog.text-close{position:static;font-size:12px;margin-top:20px;background:#f4f1ea;color:#16130f;padding:14px 18px}.no-script{position:fixed;z-index:100;bottom:70px;left:5%;right:5%;background:#171410;padding:25px;border:1px solid var(--ember)}.no-script h2{font-size:35px;margin-bottom:15px}.no-script p{font-size:14px;line-height:1.6}
@keyframes stock-loop{to{transform:rotate(20deg) scale(1.1)}}@keyframes film-drift{to{transform:scale(1.055) translateX(-.5%)}}@keyframes beam{from{transform:translateX(-60%)}to{transform:translateX(60%)}}@keyframes blink{50%{opacity:0}}@keyframes scroll-down{to{transform:translateY(5px);opacity:0}}
@media(max-width:700px){.story-controls{left:6vw;right:6vw;bottom:25px;gap:12px}.story-controls>button:first-child{min-width:67px;font-size:9px}.story-controls>button:first-child>span:first-child{margin-right:6px}.timecode{font-size:6px;letter-spacing:0}.story-controls>button:last-child{font-size:18px}.live-shot{width:178vw;top:43%;}.host-shot{width:170vw}.host-shot .shot-shade{display:none}.selfie-shot{width:185vw}.sent-bubble{left:15%;right:5%;top:17%;max-width:none;padding:12px;gap:8px}.sent-bubble p{font-size:9px}.sent-bubble small{font-size:7px}.sent-bubble strong{font-size:8px}.bubble-icon{width:27px;height:27px;font-size:16px}.guest-phone{left:50%;top:42%;width:234px;height:475px;border-radius:30px;transform-origin:center}.phone-body{padding:10px 12px}.phone-body h2{font-size:28px}.phone-body>p{font-size:9px;margin-bottom:12px}.phone-line{margin:12px 0}.phone-status{padding-bottom:12px}.selfie-well{height:67px;margin-top:13px}.phone-submit{padding:10px;margin-top:10px}.phone-footnote{font-size:6px}.camera-frame{left:9%;top:23%;width:51%;height:31%}.camera-frame>span{font-size:6px}.submit-shot{width:190vw;top:42%}.submit-screen{padding-top:5.5%}.submit-portrait{min-height:0}.generation{flex-direction:column;gap:40px;justify-content:start;padding-top:16svh}.memory{width:135px;height:158px;transform:rotate(-5deg)}.memory>i{inset:-6px}.memory>i:nth-of-type(2){inset:-12px}.memory>i:nth-of-type(3){inset:-18px}.memory>i:nth-of-type(4){inset:-24px}.memory>span{font-size:6px;bottom:10px;left:10px}.generation-copy{width:240px;text-align:center}.generation-copy>p{font-size:8px}.problem{left:5%;right:5%;top:calc(39% - 75px)}.problem-reel p{font-size:24px}.vignette{background:linear-gradient(#0008,transparent 20%,transparent 50%,#080808c9 83%,#080808f5)}dialog{padding:30px}dialog h2{font-size:35px}dialog ol{font-size:12px}}
@media(max-height:650px) and (min-width:701px){.guest-phone{scale:.78;top:45%}.generation{gap:60px}.memory{width:160px;height:200px}}
.service-art{width:100%;height:100%}.birthday-board{left:79.5%;top:28%;width:12%;font-size:10px;transform:rotate(4deg)}.birthday-board b{font-size:15px}
.world{mask-image:linear-gradient(#000 88%,transparent 100%)}.film-art{background-size:300% auto}
.memory-photo,.submit-portrait{background-image:url('assets/web/guest-taking-photo.webp');background-color:#18130d;background-size:auto 110%;background-position:28% center}
.selfie-image{background-image:url('assets/web/guest-taking-photo.webp');background-color:#18130d;background-size:auto 150%;background-position:28% 20%}
@media(max-width:700px) and (max-height:760px){.guest-phone{scale:.82;top:39%}.generation{padding-top:14svh;gap:25px}.memory{width:110px;height:130px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.camera-flash{display:none}.camera-frame b{display:none}}

/* ===== Story additions (1 Oct 2026): hidden screen, callouts, centred captions ===== */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The screen stays in darkness until the second beat. */
.led-off{position:absolute;inset:0;z-index:5;background:#050506;opacity:1}
.stage[data-screen="on"] .led-off{animation:power-on 1.1s steps(1,end) forwards}
@keyframes power-on{0%{opacity:1}12%{opacity:.35}20%{opacity:.9}32%{opacity:.15}40%{opacity:.6}55%{opacity:0}62%{opacity:.25}75%,100%{opacity:0}}
.screen-veil{position:absolute;left:0;right:0;top:0;height:64%;background:linear-gradient(#060607 0,#060607f7 52%,#06060799 74%,transparent 100%);pointer-events:none;will-change:opacity}
.crowd-before,.service{will-change:transform,opacity,filter}

/* Callouts: a dot on the object, a drawn line, a label. Positioned every frame by story.js. */
.callout-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.callout-lines polyline{fill:none;stroke:#ffcf9c;stroke-width:1;opacity:.85}
.callout-lines circle{fill:var(--ember);stroke:#ffe3c4;stroke-width:1}
.callout-lines circle.halo{fill:none;stroke:#ff9a55;stroke-width:1;opacity:.55}
.callouts{position:absolute;inset:0}
.callout{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;will-change:transform,opacity}
.callout b{display:block;font-size:8px;font-weight:500;letter-spacing:.22em;color:var(--ember);margin-bottom:5px}
.callout span{display:block;font:italic 400 clamp(17px,1.5vw,23px)/1 Bodoni,Georgia,serif;color:#fff4e6;text-shadow:0 2px 18px #000,0 0 3px #000c}

/* Centred, animated captions. */
.caption{position:absolute;left:50%;top:var(--cy,50%);width:min(860px,88vw);text-align:center;transform:translate(-50%,-50%);pointer-events:none;z-index:4;will-change:opacity}
.caption:before{content:'';position:absolute;inset:-35% -12%;background:radial-gradient(closest-side,#070708c4,#07070866 55%,transparent);z-index:-1}
.caption-kicker{font-size:10px;letter-spacing:.3em;color:#e3bf97;margin-bottom:18px}
.caption h1{font-size:clamp(40px,5.6vw,88px);line-height:1.02;text-shadow:0 2px 40px #000a}
.caption h1 .ln{display:block}
.caption h1 .w{display:inline-block;white-space:pre}
.caption-line{font-size:clamp(13px,1.05vw,16px);line-height:1.6;color:#e2d6c7;margin-top:18px}
.caption.play .caption-kicker{animation:kicker-in 1s cubic-bezier(.16,1,.3,1) both}
.caption.play h1 .w{animation:word-in .95s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) * 75ms + 120ms)}
.caption.play .caption-line{animation:line-in 1s ease both;animation-delay:calc(var(--n) * 75ms + 420ms)}
@keyframes kicker-in{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.3em}}
@keyframes word-in{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes line-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.caption-dim{position:absolute;inset:0;background:#070708;opacity:0}

/* The story's last frame. */
.ending{position:absolute;left:50%;top:70%;width:min(760px,90vw);transform:translate(-50%,-50%);text-align:center;z-index:6;will-change:opacity,transform}
.ending[hidden]{display:none}
.ending:before{content:'';position:absolute;inset:-30% -10%;background:radial-gradient(closest-side,#070708d9,#07070870 60%,transparent);z-index:-1}
.ending>p{font-size:13px;color:#e8dccd;margin-bottom:12px}
.ending h2{font-size:clamp(46px,6vw,92px);text-shadow:0 2px 35px #0009}
.ending-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.button-primary,.button-quiet{display:inline-flex;align-items:center;gap:26px;padding:16px 20px;font-size:12px;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.button-primary{background:var(--ember);color:#1d130b}.button-primary:hover{background:#ffb47e}
.button-quiet{border:1px solid #ffffff38;background:#0a0a0b8c;backdrop-filter:blur(12px);color:#f4ead9}.button-quiet:hover{border-color:var(--ember)}
.button-primary span,.button-quiet span{font-size:16px}

/* Header: fixed above the story and the sections. */
.masthead{position:fixed;left:0;right:0;top:0;height:86px;padding:0 3.5vw;display:flex;align-items:center;gap:24px;z-index:20;transition:background .4s,height .4s,border-color .4s;border-bottom:1px solid transparent}
.masthead>a{flex:none;width:120px;transition:width .4s}.masthead img{width:100%;height:auto}
.masthead-line{font-size:8px;letter-spacing:.25em;color:#c8bbab;margin-left:auto;white-space:nowrap;transition:opacity .3s}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);margin-left:auto}
.masthead-line+.site-nav{margin-left:clamp(20px,3vw,48px)}
.site-nav a{font-size:11px;color:#dccfbe;text-decoration:none;padding:10px 0;white-space:nowrap}
.site-nav a:hover{color:#fff}
.site-nav .nav-demo{border-bottom:1px solid #ff9a5580;color:#f4e2ce}.site-nav .nav-demo span{color:var(--ember);margin-left:8px}
body.past-story .masthead{background:#0a0a0bd9;backdrop-filter:blur(16px);border-bottom-color:#ffffff12;height:68px}
body.past-story .masthead>a{width:96px}
body.past-story .masthead-line{opacity:0}

/* ===== Sections after the story ===== */
.section{position:relative;padding:clamp(90px,13vw,170px) 6vw;max-width:1380px;margin:0 auto;scroll-margin-top:40px}
.section h2{font-size:clamp(46px,6.2vw,96px);line-height:1.01}
.section h3{font-family:Bodoni,Georgia,serif;font-weight:400;letter-spacing:-.03em;margin:0}
.section .micro{font-size:10px;letter-spacing:.28em;color:#d0a77c}
.section-head .micro{margin-bottom:26px}
.lead{font-size:clamp(15px,1.25vw,18px);line-height:1.65;color:#c9bcab;max-width:560px;margin-top:28px}
.section-head.split{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:end}
.section-head.split .lead{margin-top:0}
.section-head.centered{text-align:center}.section-head.centered .lead{margin-left:auto;margin-right:auto}
.idea{border-top:1px solid #ffffff10}

.steps{list-style:none;padding:0;margin:clamp(60px,8vw,110px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
.step{position:relative}
.step-art{position:relative;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#6a3516,#1c130d 60%,#0f0c0a);border:1px solid #ffffff14;margin-bottom:26px}
.step-art img{position:absolute;height:100%;width:auto;max-width:none;top:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.step-art-host img{left:-8%}
.step-art-guest img{left:-30%;height:118%;top:-2%}
.step:hover .step-art img{transform:scale(1.04)}
.step-art-room .mini-room{position:absolute;height:100%;aspect-ratio:1672/941;left:50%;transform:translateX(-50%)}
.step-number{font:400 15px Bodoni,Georgia,serif;color:var(--ember)}
.step h3{font-size:clamp(26px,2.3vw,36px);margin:10px 0 12px}
.step p{font-size:14px;line-height:1.65;color:#b9ac9b;max-width:340px}

/* A small composited room: plate, a playing film on the LED, the crowd in front. */
.mini-room{position:relative;overflow:hidden}
.mini-room>img{position:absolute;inset:0;width:100%;height:100%}
.mini-led{position:absolute;left:24.15%;top:4.6%;width:52.2%;height:40.2%;background:url('assets/web/celebration-frames.webp') 0 0/300% 200%;box-shadow:0 0 60px #ff9a5544;display:grid;place-items:end center;container-type:size}
.mini-led:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#0009)}
.mini-led span{position:relative;z-index:1;font:400 22cqh/1 Bodoni,serif;letter-spacing:-.05em;padding-bottom:5cqh}

.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(60px,7vw,100px)}
.film-card{position:relative;overflow:hidden;aspect-ratio:4/5;background:#17130f;border:1px solid #ffffff14}
.film-thumb{position:absolute;inset:0;background-image:url('assets/web/celebration-frames.webp');background-size:300% 200%;background-repeat:no-repeat;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.film-card:hover .film-thumb{transform:scale(1.05)}
.film-thumb.birthday{background-position:0 0}.film-thumb.anniversary{background-position:50% 0}.film-thumb.retirement{background-position:100% 0}.film-thumb.engagement{background-position:0 100%}.film-thumb.promotion{background-position:50% 100%}.film-thumb.graduation{background-position:100% 100%}
.film-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#0a0806e6)}
.film-meta{position:absolute;left:24px;right:24px;bottom:22px;z-index:1}
.film-meta span{font-size:9px;letter-spacing:.24em;color:#e8b98a}
.film-meta h3{font-size:clamp(26px,2.4vw,38px);margin-top:9px}
.fine-print{font-size:11px;color:#8c7e6e;margin-top:26px;letter-spacing:.04em}

.venues{max-width:none;padding-left:0;padding-right:0}
.venue-band{position:relative;height:min(64vw,720px);overflow:hidden;margin-bottom:clamp(70px,9vw,120px)}
.venue-band .mini-room{position:absolute;left:50%;top:50%;width:max(100%,1280px);aspect-ratio:1672/941;transform:translate(-50%,-50%)}
.venue-band:after{content:'';position:absolute;inset:0;background:linear-gradient(#0a0a0b,transparent 22%,transparent 70%,#0a0a0b)}
.venues .section-head,.venue-points,.venue-note{max-width:1380px;margin-left:auto;margin-right:auto;padding:0 6vw}
.venue-points{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,40px);margin-top:clamp(60px,7vw,100px)}
.venue-points>div{border-top:1px solid #ff9a5566;padding-top:22px}
.venue-points b{font:400 34px Bodoni,Georgia,serif;color:var(--ember)}
.venue-points h3{font-size:clamp(23px,1.9vw,29px);margin:26px 0 10px}
.venue-points p{font-size:13.5px;line-height:1.65;color:#b9ac9b}
.venue-note{text-align:center;margin-top:60px;color:#8c7e6e;font-size:12px}

.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start;border-top:1px solid #ffffff10}
.faq-list details{border-top:1px solid #ffffff22}
.faq-list details:last-child{border-bottom:1px solid #ffffff22}
.faq-list summary{list-style:none;cursor:pointer;padding:26px 40px 26px 0;font:400 clamp(20px,1.7vw,25px)/1.25 Bodoni,Georgia,serif;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';position:absolute;right:6px;top:24px;font-family:Inter,sans-serif;color:var(--ember);transition:transform .3s}
.faq-list details[open] summary:after{transform:rotate(45deg)}
.faq-list details p{font-size:14px;line-height:1.7;color:#b9ac9b;max-width:600px;padding:0 30px 26px 0}

.demo{max-width:none;text-align:center;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 50% 100%,#ff7a2a2e,transparent 70%),radial-gradient(ellipse at 50% 120%,#3a1d0d,#0a0a0b 65%);border-top:1px solid #ffffff10}
.demo-inner{max-width:760px;margin:0 auto}
.demo .lead{margin-left:auto;margin-right:auto}
.contact-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:46px;text-align:left}
.contact-choice{position:relative;text-decoration:none;display:grid;gap:9px;border:1px solid #ff9a554d;padding:22px 50px 22px 20px;background:#1d1510cc;transition:background .25s,border-color .25s}
.contact-choice:hover{background:#3a2216;border-color:var(--ember)}
.contact-choice>span{font-size:9px;letter-spacing:.22em;color:var(--ember)}
.contact-choice strong{font-size:17px;font-weight:400;overflow-wrap:anywhere}
.contact-choice b{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--ember);font-size:20px;font-weight:400}
.contact-note{font-size:11px;margin-top:20px;color:#8c7e6e}

.site-footer{padding:70px 6vw 34px;border-top:1px solid #ffffff14;background:#070708}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1380px;margin:0 auto}
.footer-brand img{width:150px;height:auto}
.footer-brand p{font:italic 400 18px Bodoni,Georgia,serif;color:#cdbfae;margin-top:20px}
.footer-nav,.footer-contact{display:flex;flex-direction:column;gap:12px}
.footer-nav .micro,.footer-contact .micro{font-size:9px;letter-spacing:.24em;color:#a08369;margin-bottom:6px}
.footer-nav a,.footer-contact a{font-size:13px;color:#d8ccbd;text-decoration:none;width:fit-content}
.footer-nav a:hover,.footer-contact a:hover{color:var(--ember)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;max-width:1380px;margin:60px auto 0;padding-top:22px;border-top:1px solid #ffffff10;font-size:9px;letter-spacing:.18em;color:#7d705f}
.footer-bottom i{font-style:normal;letter-spacing:0;color:#b39b87}

/* Gentle reveal as each block enters (only when JavaScript runs). */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--delay,0ms)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

@media(max-width:1000px){
  .masthead-line{display:none}
  .masthead-line+.site-nav{margin-left:auto}
  .film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .venue-points{grid-template-columns:1fr 1fr}
  .section-head.split{grid-template-columns:1fr;gap:0}
  .section-head.split .lead{margin-top:28px}
  .faq{grid-template-columns:1fr;gap:40px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:700px){
  .masthead{height:64px;padding:0 16px}
  .masthead>a{width:88px}
  body.past-story .masthead{height:56px}
  body.past-story .masthead>a{width:78px}
  .site-nav{gap:14px}
  .site-nav a:not(.nav-demo):not(:first-child){display:none}
  .site-nav a{font-size:10px}
  .scroll-instruction{position:absolute;bottom:72px;left:0;right:0;justify-content:center}
  .story-controls{left:16px;right:16px}
  .story-controls .read-story{display:none}
  .caption{width:calc(100% - 32px)}
  .caption h1{font-size:clamp(34px,10vw,46px)}
  .caption-kicker{font-size:8px;letter-spacing:.22em;margin-bottom:12px}
  .caption-line{font-size:12px;margin-top:12px}
  .callout b{font-size:6px;margin-bottom:3px}
  .callout span{font-size:14px}
  .ending{top:66%}
  .ending h2{font-size:44px}
  .ending-actions{flex-direction:column;align-items:center}
  .section{padding:90px 16px}
  .venues{padding-left:0;padding-right:0}
  .venues .section-head,.venue-points,.venue-note{padding:0 16px}
  .venue-band{height:300px}
  .venue-band .mini-room{width:620px}
  .film-grid{gap:10px}
  .film-meta{left:14px;right:14px;bottom:14px}
  .film-meta h3{font-size:22px}
  .film-meta span{font-size:7px}
  .venue-points{grid-template-columns:1fr}
  .contact-choices{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:10px}
}
@media(max-width:360px){.site-nav a:first-child{display:none}}
/* Scroll hint, centred above the controls. */
.scroll-instruction{position:absolute;left:0;right:0;bottom:78px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:8px;letter-spacing:.2em;color:#d6bfa5;z-index:6;pointer-events:none}.scroll-instruction>span{width:10px;height:17px;border:1px solid #bfa68988;border-radius:10px;position:relative}.scroll-instruction>span:before{content:'';position:absolute;left:3px;top:3px;width:2px;height:3px;background:var(--ember);animation:scroll-down 1.5s ease-in-out infinite}
.caption-line:empty{display:none}
/* The reel sits high so the centred caption has room below it. */
.problem{top:calc(33% - 75px)}
@media(max-width:700px){.problem{top:calc(30% - 75px)}}
/* Film-making beat: the photo with its progress line beneath, centred (the caption carries the words). */
.generation{flex-direction:column;gap:46px}.generation-copy{width:min(320px,70vw)}.generation-copy>p{font-size:10px;margin-top:16px}
@media(max-width:700px){.generation{justify-content:center;padding-top:0;gap:34px}}
/* Board text sits on the photographed board: measured 3.8° clockwise tilt, centre 39.9% / 32.4% of staff-right.png. */
/* Service staff: two separate cut-outs, placed beside the screen by story.js so the table never hides them. */
.staff{position:absolute;left:0;top:0;height:100%;transform-origin:0 0;will-change:transform,opacity,filter}
.staff-left{aspect-ratio:360/941}.staff-right{aspect-ratio:392/941;container-type:inline-size}
.staff img{width:100%;height:100%}
.staff-right .birthday-board{position:absolute;left:11.35%;top:25.7%;width:57.1%;height:13.4%;transform:rotate(3.8deg);transform-origin:50% 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;opacity:1;text-align:center;font-size:inherit;color:#ffe2b0;text-shadow:0 0 2cqw #ff9a55aa}
.staff-right .birthday-board span{font-size:4.6cqw;letter-spacing:.32em;color:#e8c597}
.staff-right .birthday-board b{display:block;font:400 9.6cqw/0.95 Bodoni,Georgia,serif;letter-spacing:.02em;color:#fff1d8}
@media(max-width:760px){.steps{grid-template-columns:1fr;max-width:460px}}
.led{isolation:isolate}
/* Film stills are 16:9 tiles in a 3×2 atlas. Keep their true shape and crop to the card instead of stretching. */
.film-thumb{inset:auto;top:0;left:50%;height:100%;width:auto;aspect-ratio:681/385;translate:-50% 0}
.mini-led{background-size:300% auto;background-position:0 12%}
/* Opening screen: play the story, or scroll it. */
.intro{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;pointer-events:none;will-change:opacity}
.intro:before{content:'';position:absolute;left:50%;top:50%;width:min(620px,120vw);height:min(620px,120vw);transform:translate(-50%,-50%);background:radial-gradient(closest-side,#070708b3,#07070840 60%,transparent);z-index:-1}
#intro-play{position:relative;width:108px;height:108px;border-radius:50%;background:var(--ember);color:#1b120a;display:grid;place-items:center;box-shadow:0 0 0 1px #ffd2a866,0 22px 70px #ff6a1a66;transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s}
#intro-play:hover{transform:scale(1.07);background:#ffb47e}
#intro-play svg{width:38px;height:38px;fill:currentColor;margin-left:6px}
.intro-ring{position:absolute;inset:-1px;border-radius:50%;border:1px solid #ff9a55;animation:intro-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes intro-pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.intro-scroll{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:#e8d8c4;text-shadow:0 2px 14px #000}
.intro-scroll>span{width:14px;height:22px;border:1px solid #e8d8c499;border-radius:10px;position:relative}
.intro-scroll>span:before{content:'';position:absolute;left:50%;top:4px;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:var(--ember);animation:scroll-down 1.5s ease-in-out infinite}
@media(max-width:700px){#intro-play{width:88px;height:88px}#intro-play svg{width:30px;height:30px}.intro-scroll{font-size:9px}}
/* Logo beat: "Introducing Hey, Nice Screen" with the full logo. */
.logo-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;background:radial-gradient(ellipse 55% 50% at 50% 50%,#2a160b 0,#0a0a0b 70%);will-change:opacity}
.logo-reveal img{width:min(560px,74vw);height:auto;transform:scale(var(--grow,1));filter:blur(var(--focus,0)) drop-shadow(0 0 calc(var(--glow,0) * 38px) #ff9a5555)}
.logo-kicker{font-size:11px;letter-spacing:.5em;color:#e3bf97;margin-bottom:clamp(14px,3vh,30px);opacity:var(--glow,0)}
.logo-line{font:italic 400 clamp(17px,1.6vw,24px) Bodoni,Georgia,serif;color:#e8dccd;margin-top:clamp(10px,2.5vh,26px);opacity:var(--glow,0)}
/* Demo request: form beside direct contact details. */
.demo-inner{max-width:1120px}
.demo-head{text-align:center}
.demo-grid{display:grid;grid-template-columns:1.45fr .85fr;gap:clamp(18px,2.4vw,34px);margin-top:56px;text-align:left;align-items:start}
.demo-form{border:1px solid #ff9a5540;background:#140f0bd9;padding:clamp(22px,2.6vw,34px);display:grid;gap:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px}
.field label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#d0a77c}
.field label span{text-transform:none;letter-spacing:0;color:#8c7e6e}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;color:var(--paper);background:#0b0908;border:1px solid #ffffff22;border-radius:0;padding:13px 14px;transition:border-color .25s}
.field textarea{resize:vertical;min-height:84px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#ff9a55 50%),linear-gradient(-45deg,transparent 50%,#ff9a55 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember)}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.form-actions button{font:inherit;font-size:12px;cursor:pointer;border:0}
.form-actions .button-quiet{border:1px solid #ffffff38}
.form-note{font-size:11px;line-height:1.6;color:#8c7e6e}
.demo-contact .micro{margin-bottom:14px}
.demo-contact .contact-choices{grid-template-columns:1fr;margin-top:0}
.demo-contact .contact-note{text-align:left}
.demo-dialog{width:min(640px,calc(100% - 32px))}
.demo-dialog h2{font-size:clamp(32px,4vw,44px);margin:14px 0 22px}
.demo-dialog .demo-form{padding:0;border:0;background:none}
@media(max-width:860px){.demo-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}}
/* Demo form: status line beside the button, hidden spam trap. */
.form-actions{align-items:center}
.form-actions button:disabled{opacity:.6;cursor:progress}
.form-status{font-size:12px;line-height:1.5;color:#cdbfae;flex:1;min-width:180px}
.form-status[data-state="ok"]{color:#ffcf9c}
.form-status[data-state="error"]{color:#fff}
.field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field input::placeholder,.field textarea::placeholder{color:#6f6458}