@font-face{font-family:Inter;src:url('assets/inter-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Playfair;src:url('assets/playfair-display-500.ttf') format('truetype');font-weight:500;font-display:swap}*{box-sizing:border-box}html{overflow-anchor:none;scroll-behavior:smooth;scroll-padding-top:90px;--paper:#eeede7;--ink:#20211e;--muted:#71736b;--line:#c9cac2;--red:#dc382b;--panel:#e3e3db;color-scheme:light}html[data-theme=dark]{--paper:#161715;--ink:#ecece4;--muted:#a6a89f;--line:#3b3d37;--panel:#22241f;color-scheme:dark}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}body:has(dialog[open]){overflow:hidden}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{background:none;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:7px}::selection{background:var(--red);color:#fff}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.065em;line-height:1.02}em{font-family:Playfair,Georgia,serif;font-weight:500;letter-spacing:-.065em}h2{font-size:clamp(58px,6.6vw,110px)}p{line-height:1.55}img,video{display:block;max-width:100%}.eyebrow,.section-label,.hero-foot,.tiny-index,.project-top,.project-baseline,.pending-caption,.placeholder-tag,.art-footer,.fine-print,.dialog-bar,.menu-bottom,.tools,.archive-preview>span,footer,.chapter-indicator{font-size:10px;letter-spacing:.12em;line-height:1.55;font-weight:500}.skip{position:fixed;top:-100px;left:20px;z-index:300;background:var(--paper);padding:20px}.skip:focus{top:10px}header{position:absolute;z-index:15;top:0;left:0;width:100%;padding:30px 4.5%;display:flex;align-items:center;justify-content:space-between}.logo{font-size:36px;font-weight:750;letter-spacing:-.07em;display:inline-flex;align-items:baseline}.logo span,.logo sup{font-size:12px;align-self:flex-start;margin-top:8px;letter-spacing:0}.logo i{width:6px;height:6px;border-radius:50%;background:var(--red);margin-left:4px}.header-center{font-size:9px;letter-spacing:.13em;line-height:1.6;text-align:center}.header-center span{color:var(--muted)}.header-actions{display:flex;gap:26px;align-items:center}.header-actions button{font-size:10px;letter-spacing:.13em;display:flex;gap:15px;align-items:center}#theme{font-size:23px}.menu-lines{display:grid;gap:5px}.menu-lines i{width:20px;height:1px;background:currentColor}.hero-journey{height:240vh;min-height:calc(1200px + 40vh)}.hero-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden}.hero-copy{padding:20vh 4.5% 0;position:relative;z-index:2;pointer-events:none}.hero-copy a{pointer-events:auto}.hero-kicker{margin-bottom:32px;display:flex;align-items:center;gap:10px}.live-dot{width:6px;height:6px;background:var(--red);border-radius:50%}h1{font-size:clamp(76px,10.5vw,170px);letter-spacing:-.08em;line-height:.99;max-width:1100px}.title-line{display:block}.second{padding-left:12vw}.second em{color:var(--red)}.hero-bottom{margin-top:42px;display:flex;justify-content:space-between;max-width:44%;gap:30px}.hero-bottom p{font-size:13px;color:var(--muted)}.round-link{display:flex;gap:25px;align-items:center;font-size:9px;letter-spacing:.1em}.round-link b{border:1px solid var(--line);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:24px;font-weight:400;transition:.3s}.round-link:hover b{background:var(--red);color:white;border-color:var(--red);transform:rotate(45deg)}.hero-film{position:absolute;z-index:1;right:4.5%;bottom:13%;width:35%;height:25%;overflow:hidden;border-radius:4px;background:#1b1c1a;padding:0;will-change:width,height,bottom,right}.hero-film video{width:100%;height:100%;object-fit:cover;opacity:.87}.hero-film:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#0008)}.film-badge{position:absolute;z-index:2;left:25px;bottom:22px;color:white;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.12em}.film-badge i{font-style:normal;border:1px solid #fff6;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.film-badge small{font-size:8px;opacity:0;margin-left:18px;transition:.3s}.hero-film:hover small{opacity:1}.hero-foot{position:absolute;bottom:30px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;color:var(--muted)}.hero-vertical{position:absolute;right:18px;top:43%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.2em;color:var(--muted)}.chapter-heading{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:end;gap:30px;padding:100px 4.5% 110px}.chapter-heading p{font-size:13px;color:var(--muted)}.work{background:#121411;color:#eeeee5}.chapter-heading h2{font-size:clamp(60px,7vw,110px)}.chapter-heading .eyebrow{align-self:start;padding-top:12px;color:#b0b3a9}.project-scene{height:170vh;position:relative;--accent:#b9adff}.project-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:650px;padding:45px 6%;display:flex;flex-direction:column;overflow:hidden;background:#171916;transform-origin:center;will-change:transform,opacity}.project-top{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid #ffffff20;flex-shrink:0}.project-top span:first-child{color:var(--accent)}.project-title{display:flex;align-items:center;justify-content:space-between;margin:24px 0}.project-title h3{font-size:clamp(40px,4.7vw,74px)}.project-title em{color:var(--accent)}.outline-number{font-size:90px;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff25;letter-spacing:-.08em}.project-media{padding:0;position:relative;overflow:hidden;background:#252720;display:block}.project-media video{width:100%;height:100%;object-fit:contain}.statement .project-media{width:73%;height:48vh;min-height:220px;align-self:center}.play-pill{position:absolute;bottom:20px;right:20px;border-radius:100px;background:#eeede7;color:#222;padding:13px 20px;font-size:9px;letter-spacing:.1em;transition:.3s}.project-media:hover .play-pill{background:var(--accent);transform:translateY(-4px)}.project-caption{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.project-caption p{font-size:12px;color:#acaea6}.text-button{font-size:10px;letter-spacing:.1em;border-bottom:1px solid currentColor;padding:10px 0;display:inline-flex;gap:30px;align-items:center;transition:color .2s}.text-button:hover{color:var(--red)}.project-layout{display:grid;grid-template-columns:1fr 1.45fr;gap:6%;flex:1;align-items:center}.project-context h3{font-size:clamp(40px,4.1vw,70px);margin:30px 0}.project-context h3 em{color:var(--accent)}.project-context>p{font-size:14px;color:#afb1a8}.project-notes{border-top:1px solid #fff2;margin-top:30px;padding-top:20px;max-width:300px}.project-notes span{font-size:9px;letter-spacing:.15em}.project-notes p{font-size:12px;color:#afb1a8;margin-top:10px}.project-context .text-button{margin-top:18px}.explanation .project-media{height:53vh}.project-baseline{display:flex;justify-content:space-between;color:#969a8f}.detail-heading{display:flex;justify-content:space-between;align-items:end;margin:28px 0}.detail-heading h3{font-size:clamp(40px,4.3vw,68px)}.detail-heading em{color:var(--accent)}.detail-heading p{font-size:12px;color:#adb1a5}.detail .project-media{height:46vh;width:75%;align-self:flex-start}.detail-strip{display:flex;gap:6%;align-items:center;margin-top:22px}.detail-word{font-size:26px;letter-spacing:-.05em;line-height:1}.detail-strip p{font-size:11px;color:#a5aa9d}.detail-strip .text-button{margin-left:auto}.personal{background:#181412;color:#f0e9de}.personal-intro{min-height:95vh;padding:130px 8%;position:relative;display:flex;flex-direction:column;justify-content:center}.personal-intro h2{font-size:clamp(100px,12vw,190px);margin:35px 0;position:relative}.personal-intro h2 em{color:#ce4b3b}.asterisk{position:absolute;right:8%;top:20%;font-size:150px;color:#ce4b3b;font-family:Arial;animation:turn 40s linear infinite}.personal-intro p{margin-left:52%;font-size:14px;color:#b0a59c}.personal-scene{height:150vh}.personal-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9%;padding:80px 8%;overflow:hidden}.rose .personal-pin{background:radial-gradient(ellipse at 80% 50%,#6d292933,transparent 60%),#181412}.hear .personal-pin{background:radial-gradient(ellipse at 70% 50%,#5d757333,transparent 65%),#142020}.personal-copy h3{font-size:clamp(80px,9vw,145px);margin:35px 0}.personal-copy h3>span{color:#ce4b3b}.personal-copy p{color:#bcaea3;font-size:16px}.pending-caption{display:block;color:#a99689;margin-top:40px;font-size:8px}.personal-art{aspect-ratio:4/5;max-height:75vh;position:relative;overflow:hidden;border:1px solid #e2b0a533;background:#271515;box-shadow:0 35px 100px #0004;transform-style:preserve-3d;transition:transform .25s}.placeholder-tag{display:inline-block;border:1px solid currentColor;padding:6px 10px;font-size:8px;opacity:.65}.personal-art>.placeholder-tag{position:absolute;left:25px;top:25px;z-index:3}.art-title{position:absolute;top:45%;left:0;width:100%;text-align:center;font-size:clamp(35px,4vw,65px);letter-spacing:.15em;line-height:1.1;z-index:2}.art-footer{position:absolute;bottom:25px;left:25px;font-size:8px;color:#c8a9a2}.rose-orbit{position:absolute;inset:5%;display:grid;place-items:center}.rose-orbit i{position:absolute;width:65%;height:65%;border:1px solid #ca4b3e;border-radius:50%;transform:rotate(-30deg) scaleX(.6);box-shadow:inset 15px 0 70px #aa302522,20px 0 80px #d3462822}.rose-orbit i:nth-child(2){transform:rotate(30deg) scaleX(.6)}.rose-orbit i:nth-child(3){transform:rotate(90deg) scaleX(.6)}.hear .personal-art{background:#aebbb1;color:#1c3731}.hear .art-title{text-align:left;left:10%;letter-spacing:-.07em;font-weight:700;font-size:5vw;top:40%}.hear .art-footer{color:#38554b}.sound-rings{position:absolute;width:150%;height:150%;top:-25%;left:-25%;background:repeating-radial-gradient(ellipse,#29433900 0 12px,#29433933 13px 14px,#29433900 15px 25px);transform:rotate(-30deg) scaleX(.75)}.archive{padding:110px 6%;background:var(--paper)}.section-label{display:flex;justify-content:space-between;padding-bottom:30px;border-bottom:1px solid var(--line);color:var(--muted)}.archive-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:8%;align-items:center;padding-top:70px}.archive h2{font-size:6vw;margin-bottom:50px}.archive-row{border-top:1px solid var(--line);padding:26px 0;display:flex;align-items:center;width:100%;text-align:left;gap:20px}.archive-row:last-child{border-bottom:1px solid var(--line)}.archive-row>span{font-size:9px;color:var(--muted)}.archive-row strong{font-size:24px;font-weight:500;letter-spacing:-.04em;transition:transform .3s}.archive-row small{font-size:8px;letter-spacing:.08em;margin-left:auto;color:var(--muted)}.archive-row b{font-size:25px;font-weight:400}.archive-row:hover strong,.archive-row:focus-visible strong{transform:translateX(8px);color:var(--red)}.fine-print{font-size:9px;color:var(--muted);margin-top:20px;letter-spacing:.03em}.archive-preview{transform:rotate(3deg);transition:transform .5s}.archive-preview img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:opacity .2s}.archive-preview>span{display:block;margin-top:20px;font-size:8px}.about{padding:100px 6% 140px;background:var(--panel)}.about-layout{display:grid;grid-template-columns:.85fr 1.2fr;gap:11%;align-items:center;padding-top:80px}.portrait{position:relative}.portrait img{aspect-ratio:3/4;object-fit:cover;filter:saturate(.7)}.portrait>span{display:block;font-size:8px;letter-spacing:.12em;margin-top:15px;color:var(--muted)}.about-copy h2{font-size:5vw}.about-statement{font-size:clamp(24px,2.6vw,42px);letter-spacing:-.045em;line-height:1.3;margin:35px 0}.about-statement span{transition:opacity .2s}.about-copy>p:not(.about-statement){font-size:14px;color:var(--muted);max-width:440px}.about-copy>.text-button{margin-top:20px}.tools{border-top:1px solid var(--line);margin-top:45px;padding-top:25px}.tools>div{display:flex;gap:22px;margin-top:18px}.tools img{width:30px;height:30px;object-fit:contain}.process{padding:130px 6%;display:grid;grid-template-columns:1fr 1.25fr;gap:7%;align-items:center}.process h2{font-size:4.5vw;margin:30px 0}.process-copy>p{font-size:12px;color:var(--muted);margin-bottom:25px}.compare{height:480px;position:relative;overflow:hidden;background:#d4d5cb;--split:50%}.compare-rough,.compare-finished{position:absolute;inset:0;padding:30px;color:#3a3c34}.compare-rough{background:linear-gradient(#6e756511 1px,transparent 1px),linear-gradient(90deg,#6e756511 1px,transparent 1px),#e0e1d7;background-size:25px 25px}.compare-finished{background:#30382e;color:#edece3;clip-path:inset(0 0 0 var(--split))}.compare span{font-size:8px;letter-spacing:.1em;position:relative;z-index:2}.compare b{position:absolute;left:30px;bottom:30px;font-weight:500;font-size:38px;letter-spacing:-.06em;line-height:1}.wireframe,.abstract-frame{position:absolute;width:190px;height:190px;top:100px;left:calc(50% - 95px);transform:rotate(-18deg);border:1px solid #7d826e}.wireframe i{position:absolute;inset:15px;border:1px solid #7d826e}.wireframe i:nth-child(2){inset:30px}.wireframe i:nth-child(3){inset:45px}.abstract-frame{background:linear-gradient(135deg,#b5c293,#55664e);box-shadow:25px 30px 0 #1e261d,50px 55px 70px #0e1a0a66;border:0}.abstract-frame:after{content:'';position:absolute;inset:30px;background:#33402f;box-shadow:inset 8px 8px 30px #142411}.compare-divider{position:absolute;left:var(--split);top:0;bottom:0;width:1px;background:white;pointer-events:none;z-index:3}.compare-divider i{position:absolute;top:50%;left:-20px;border-radius:50%;background:white;color:#222;width:40px;height:40px;display:grid;place-items:center;font-style:normal}.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}.compare:focus-within{outline:2px solid var(--red);outline-offset:5px}.voices{background:var(--red);color:#f4eade;padding:100px 12%;text-align:center}.quote-mark{font-family:Playfair;font-size:130px;line-height:1;margin-top:35px;height:100px}.voices h2{font-size:5.5vw}.quote-slot{margin:30px 0 65px;font-size:14px;opacity:.7}.quote-footer{display:flex;align-items:center;justify-content:space-between;gap:25px}.quote-footer .text-button:hover{color:white}.services{padding:110px 8%}.services h2{margin:60px 0}.services details{border-top:1px solid var(--line)}.services details:last-child{border-bottom:1px solid var(--line)}summary{list-style:none;display:flex;gap:40px;padding:32px 0;align-items:center;cursor:pointer}summary::-webkit-details-marker{display:none}summary>span{font-size:10px;color:var(--muted)}summary h3{font-size:clamp(28px,3.2vw,50px);transition:transform .3s}summary:hover h3{transform:translateX(10px);color:var(--red)}summary b{font-size:35px;font-weight:300;margin-left:auto;transition:transform .3s}details[open] summary b{transform:rotate(45deg)}.service-body{padding:0 0 35px 55px;display:grid;grid-template-columns:1.3fr 1fr;gap:20px 80px;animation:appear .35s}.service-body p{font-size:14px;max-width:500px;color:var(--muted)}.service-body span,.service-body a{font-size:10px;letter-spacing:.1em}.service-body a{grid-column:1;color:var(--red)}.contact{background:#181a16;color:#eeede5;padding:90px 8% 0;position:relative;overflow:hidden}.contact-frame{width:170px;height:95px;margin-bottom:60px;position:relative;overflow:hidden;transform-origin:left center}.contact-frame img{height:100%;width:100%;object-fit:cover;opacity:.55}.contact-frame>span{position:absolute;inset:0;display:grid;place-items:center;font-size:55px;font-weight:650;letter-spacing:-.1em}.contact h2{font-size:clamp(80px,10vw,160px);margin:32px 0 45px}.contact h2 em{color:#d84a3c}.contact-actions{display:flex;align-items:center;gap:50px;margin-bottom:120px}.contact-cta{background:#df382b;color:#fff0e8;padding:22px 28px;display:flex;justify-content:space-between;gap:50px;font-size:10px;letter-spacing:.1em;transition:background .2s}.contact-cta:hover{background:#b92c21}.contact-actions>a{font-size:13px;border-bottom:1px solid #ffffff40;padding:10px 0}footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:35px 0;border-top:1px solid #fff2;font-size:8px;color:#afb3a7}footer .logo{color:#eeede5}.chapter-indicator{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 5px 30px #0001;padding:10px 15px;display:flex;gap:14px;align-items:center;font-size:8px;letter-spacing:.05em;border-radius:3px;pointer-events:none}.indicator-dot{width:5px;height:5px;border-radius:50%;background:var(--red)}#page-progress{border-left:1px solid var(--line);padding-left:14px;min-width:30px}dialog{padding:0;border:0;color:var(--ink);background:var(--paper);max-height:90vh;width:min(1000px,90vw)}dialog::backdrop{background:#050704c9;backdrop-filter:blur(10px)}.dialog-bar{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line)}.dialog-bar button{font-size:10px;letter-spacing:.1em;padding:10px}.film-dialog{background:#111;color:#eee;width:min(1200px,94vw)}.film-dialog .dialog-bar{border-color:#333}.film-dialog video{width:100%;max-height:75vh;background:black}.film-dialog p{padding:20px}.menu-dialog{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:30px 6%;background:var(--paper);overflow:auto}.menu-dialog[open]{animation:menu-enter .55s cubic-bezier(.2,.8,.2,1)}.menu-top{display:flex;justify-content:space-between;align-items:center}.menu-top button{font-size:10px;letter-spacing:.15em}.menu-content{max-width:1100px;margin:7vh auto 0}.menu-content nav{margin:25px 0 45px}.menu-content nav a{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:18px 0;font-size:clamp(40px,6.5vw,95px);letter-spacing:-.065em;gap:30px;transition:color .2s}.menu-content nav a small{font-size:10px;letter-spacing:0;align-self:flex-start;margin-top:14px}.menu-content nav a span{margin-left:auto;font-size:50px}.menu-content nav a:hover{color:var(--red)}.menu-dialog[open] nav a{animation:menu-item .7s both}.menu-dialog[open] nav a:nth-child(2){animation-delay:.07s}.menu-dialog[open] nav a:nth-child(3){animation-delay:.14s}.menu-dialog[open] nav a:nth-child(4){animation-delay:.21s}.menu-bottom{display:flex;justify-content:space-between;color:var(--muted)}.inquiry-dialog{width:min(650px,90vw);padding:0 35px 35px}.inquiry-dialog .dialog-bar{padding-left:0;padding-right:0}.inquiry-dialog h2{font-size:64px;margin:28px 0}form label{display:grid;gap:9px;font-size:10px;letter-spacing:.08em;margin-bottom:22px}input,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;color:var(--ink);outline-color:var(--red);border-radius:0;letter-spacing:0;font-size:14px}textarea{resize:vertical}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:25px}form .contact-cta{width:100%}#draft-ready{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}#draft-ready a{display:inline-block;padding:15px 20px 0 0;font-size:10px;letter-spacing:.1em;color:var(--red)}#detail-content{padding:40px}#detail-content h2{font-size:65px;margin-bottom:25px}#detail-content img{width:100%;margin:25px 0;max-height:40vh;object-fit:contain;background:#111}#detail-content p{max-width:650px;color:var(--muted);margin:20px 0}#detail-content .detail-meta{font-size:10px;letter-spacing:.12em;color:var(--red)}.reveal{opacity:1;transform:none}.js-motion .reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.js-motion .reveal.visible{opacity:1;transform:none}@keyframes turn{to{transform:rotate(360deg)}}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes menu-enter{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}@keyframes menu-item{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}html[data-motion=off]{scroll-behavior:auto}html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}html[data-motion=off] .hero-journey{height:100vh;height:100svh;min-height:650px}html[data-motion=off] .project-scene,html[data-motion=off] .personal-scene{height:auto}html[data-motion=off] .project-pin,html[data-motion=off] .personal-pin{position:relative}html[data-motion=off] .reveal{opacity:1;transform:none}@media(min-width:1700px){.project-pin{padding-left:10%;padding-right:10%}.statement .project-media{height:50vh}.hero-copy{padding-top:22vh}}@media(max-height:760px) and (min-width:901px){.hero-copy{padding-top:19vh}.hero-kicker{margin-bottom:18px}h1{font-size:9.2vw}.hero-bottom{margin-top:25px}.project-pin{min-height:560px;padding-top:25px;padding-bottom:25px}.project-title{margin:15px 0}.project-title h3{font-size:4vw}.outline-number{font-size:65px}.statement .project-media{height:44vh}.project-caption{margin-top:12px}.detail-heading h3{font-size:3.6vw}.detail-heading{margin:18px 0}.detail-strip{margin-top:15px}.personal-pin{min-height:560px}}@media(max-width:900px){.header-center{display:none}.hero-copy{padding-top:22vh}h1{font-size:12vw}.second{padding-left:0}.hero-film{width:42%;height:22%;bottom:14%}.hero-bottom{max-width:45%}.round-link{display:none}.hero-foot>span:last-child{display:none}.chapter-heading{grid-template-columns:1fr;padding:70px 6%}.project-layout{grid-template-columns:1fr 1.2fr;gap:4%}.project-context h3{font-size:36px}.project-notes{display:none}.project-title h3,.detail-heading h3{font-size:42px}.personal-pin{gap:5%;padding:60px 6%}.personal-copy h3{font-size:65px}.archive-layout{gap:5%}.archive-row small{display:none}.about-layout{gap:6%}.about-copy h2{font-size:40px}.process{grid-template-columns:1fr}.process h2{font-size:55px}.compare{height:430px}.voices h2{font-size:55px}.contact-actions{flex-wrap:wrap;gap:20px}footer{flex-wrap:wrap}}@media(max-width:600px){header{padding:20px 6%}html[data-motion=off] .hero-journey{height:auto!important;min-height:0}html[data-motion=off] .hero-pin{position:relative;height:900px;min-height:0}.hero-copy{padding:160px 6% 0}.hero-kicker{font-size:8px}h1{font-size:15vw}.hero-bottom{max-width:100%;margin-top:25px}html[data-motion=off] .hero-film{width:88%!important;right:6%!important;height:230px!important;bottom:90px!important}.hero-foot{font-size:7px;bottom:30px}.hero-vertical{display:none}.project-scene,.personal-scene{height:auto}.project-pin,.personal-pin{position:relative;height:auto;min-height:0;padding:40px 6%}.project-title{margin:30px 0}.project-title h3,.detail-heading h3{font-size:38px}.outline-number{font-size:65px}.statement .project-media,.detail .project-media{width:100%;height:auto;aspect-ratio:16/9;min-height:0}.project-caption{gap:20px;align-items:start}.project-caption p{font-size:10px}.text-button{font-size:8px}.project-layout{display:block}.project-context{padding:30px 0}.project-context h3{font-size:44px}.explanation .project-media{height:auto;aspect-ratio:16/9}.project-baseline{margin-top:25px;font-size:7px}.detail-heading{display:block}.detail-heading p{margin-top:20px}.detail-strip{flex-wrap:wrap;gap:25px}.detail-strip .text-button{margin-left:0}.personal-intro{min-height:650px;padding:90px 6%}.personal-intro h2{font-size:22vw}.asterisk{font-size:70px;right:0;top:0}.personal-intro p{margin-left:20%}.personal-pin{display:block}.personal-copy{padding:30px 0}.personal-copy h3{font-size:75px}.pending-caption{margin-top:20px}.personal-art{max-height:none}.hear .art-title{font-size:13vw}.archive,.about,.services{padding:70px 6%}.section-label>span:last-child{display:none}.archive-layout,.about-layout{display:block;padding-top:40px}.archive h2{font-size:16vw}.archive-preview{margin-top:45px;transform:none}.portrait{max-width:75%;margin-bottom:45px}.about-copy h2{font-size:47px}.about-statement{font-size:28px}.process{padding:70px 6%}.process h2{font-size:45px}.compare{height:400px}.compare b{font-size:32px}.voices{padding:70px 6%}.voices h2{font-size:40px}.quote-footer{flex-direction:column}.services h2{font-size:50px}summary{gap:20px}summary h3{font-size:26px}.service-body{display:block;padding-left:30px}.service-body span,.service-body a{display:block;margin-top:20px}.contact{padding:70px 6% 0}.contact h2{font-size:18vw}.contact-actions{margin-bottom:70px}.contact-cta{gap:20px;font-size:9px}.chapter-indicator{font-size:7px;padding:8px 12px;bottom:12px}.menu-content nav a{font-size:45px}.menu-content nav a span{font-size:30px}.menu-bottom{display:block}.menu-bottom a{display:block;margin-top:12px}.inquiry-dialog{padding:0 20px 25px}#detail-content{padding:25px}#detail-content h2{font-size:43px}.film-badge small{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}

.chapter-indicator{pointer-events:auto;cursor:pointer}.chapter-indicator:hover{border-color:var(--red)}.title-line{animation:title-arrive 1s cubic-bezier(.16,.8,.2,1) both}.title-line.second{animation-delay:.12s}@keyframes title-arrive{from{clip-path:inset(100% 0 0 0);transform:translateY(40px)}to{clip-path:inset(-10% -10% -20% -10%);transform:translateY(0)}}
/* Continuous chapter choreography */
body,section,header,dialog,button,a,p,h1,h2,h3,footer,summary,.section-label{transition:background-color .8s ease,color .8s ease,border-color .8s ease}
.experiment-gallery{display:grid;gap:100px;margin-top:70px}.experiment{display:grid;grid-template-columns:1fr 1.45fr;gap:8vw;align-items:center}.experiment:nth-child(2){grid-template-columns:1.45fr 1fr}.experiment:nth-child(2) .experiment-copy{order:2}.experiment-copy h3{font-size:clamp(40px,5vw,76px);margin:24px 0}.experiment-copy p{max-width:370px;color:var(--muted);margin-bottom:30px}.experiment-film{padding:0;text-align:left}.experiment-film video{width:100%;max-height:65vh;object-fit:contain;background:#10110f}.experiment-film>span{display:block;font-size:10px;letter-spacing:.12em;margin-top:15px}.personal-intro{min-height:55vh!important;padding-top:90px!important}.personal-scene{height:auto!important;min-height:70vh}.personal-pin{position:relative!important;min-height:70vh!important;height:auto!important;padding-top:70px!important;padding-bottom:70px!important}
.chapter-stage{position:relative;background:#10110f;isolation:isolate}.chapter-surface{position:relative;transform-origin:center center;will-change:transform,clip-path;backface-visibility:hidden}
@media(min-width:0px){html[data-motion=on] .chapter-stage{padding-bottom:55vh}html[data-motion=on] .chapter-surface{position:sticky;top:0}html[data-motion=on] .chapter-stage+.chapter-stage{margin-top:-20vh}html[data-motion=on] .chapter-stage[data-transition=uncover]{padding-bottom:0} .personal-pin{gap:8vw}.personal-art{max-height:60vh}.personal-copy h3{font-size:clamp(55px,7vw,110px)}}
@media(max-width:900px){.experiment,.experiment:nth-child(2){grid-template-columns:1fr;gap:30px}.experiment:nth-child(2) .experiment-copy{order:0}.experiment-gallery{gap:80px}html[data-motion=off] .chapter-surface{transform:none!important;clip-path:none!important;opacity:1!important}}
@media(prefers-reduced-motion:reduce){body,section,header,dialog,button,a,p,h1,h2,h3,footer,summary,.section-label{transition:none}.chapter-surface{transform:none!important;clip-path:none!important;opacity:1!important}}
/* Paper chapters must paint their own surface over the dark transition stage. */
.process,.services{background-color:var(--paper);color:var(--ink)}
/* Film-specific palettes and uncropped personal media. */
.personal-scene.replay{background:radial-gradient(ellipse at 75% 45%,#d8c6a9,#ece4d6 70%);color:#332e25}
.personal-scene.yours{background:radial-gradient(ellipse at 70% 45%,#e8c6d5,#f5e7ee 75%);color:#493341}
.personal-scene.co2{background:radial-gradient(ellipse at 70% 45%,#ded6ab,#f1ecdc 75%);color:#3b382b}
.personal-scene .personal-pin{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:90px 8%;gap:8vw}
.personal-scene .personal-art{width:auto;height:auto;aspect-ratio:auto;max-height:none;min-height:0;padding:0;display:block;background:transparent;box-shadow:0 24px 70px #30202018;overflow:hidden;justify-self:center;position:relative}
.personal-scene .personal-art video{width:auto;height:auto;max-height:68vh;max-width:100%;object-fit:contain}
.personal-scene .personal-copy p{color:inherit;opacity:.78;max-width:390px;margin:25px 0}
.personal-scene .personal-copy h3{font-size:clamp(46px,6vw,95px)}
.personal-play{position:absolute;bottom:14px;right:14px;background:#161715de;color:#fff;padding:12px 16px;font-size:10px;letter-spacing:.1em}
.silent-note{display:block;margin-top:20px;font-size:9px;letter-spacing:.14em;opacity:.6}
@media(max-width:900px){.personal-scene .personal-pin{grid-template-columns:1fr;padding:65px 7%}.personal-scene .personal-art video{max-height:65vh}.personal-scene .personal-copy h3{font-size:55px}}
.personal-scene{position:relative}.personal-scene:before{content:'';position:absolute;inset:0 0 auto;height:110px;pointer-events:none;z-index:1;background:linear-gradient(var(--previous-film),transparent)}
.personal-scene.replay{--previous-film:#10110f}.personal-scene.yours{--previous-film:#ece4d6}.personal-scene.co2{--previous-film:#f5e7ee}

/* Film transitions and local choice focus */
.personal-scene:before{display:none}
.personal-scene{transition:background-color .8s ease}
.menu-content nav a{transition:filter .22s ease,color .22s ease,opacity .22s ease}
.menu-content nav[data-focus] a:not(.choice-active){filter:blur(2.5px);opacity:.8}
.services summary h3{transition:filter .22s ease,opacity .22s ease}
.services[data-focus] details:not(.choice-active) summary h3{filter:blur(1.2px);opacity:.8}
@media(prefers-reduced-motion:reduce){.menu-content nav a,.services summary h3{transition:none}}

/* Phase 1 story transitions: hero cut to black, chapter pill tone, Personal doorway, Personal-to-About card exit. */
.hero-pin:after{content:'';position:absolute;inset:0;z-index:4;background:#121411;opacity:var(--veil,0);pointer-events:none}
.chapter-indicator{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease}
.chapter-indicator[data-tone=dark]{background:#1c1d1ae8;color:#ecebe3;border-color:#ffffff26;box-shadow:0 8px 30px #0005}
.chapter-indicator[data-tone=dark] #page-progress{border-left-color:#ffffff26}
#chapter-name{display:inline-block}
#chapter-name.roll{animation:chapter-roll .55s cubic-bezier(.2,.8,.2,1)}
@keyframes chapter-roll{from{opacity:0;transform:translateY(7px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.personal-intro{isolation:isolate;overflow:hidden;overflow:clip}
/* The doorway square lives inside the held copy block so the difference-blended text can see it (sticky creates its own stacking context). */
.intro-hold{position:relative;isolation:isolate}
.intro-hold:before{content:'';position:absolute;left:var(--pcx,74%);top:var(--pcy,50%);width:100px;height:100px;z-index:-1;background:#eeede7;transform:translate(-50%,-50%) scale(var(--pk,0));pointer-events:none}
.intro-hold>.eyebrow,.intro-hold .portal-ink,.intro-hold>p{mix-blend-mode:difference}
.personal-scene.replay{transition:none}
@media(min-width:0px){html[data-motion=on] .personal-intro{min-height:150vh!important;justify-content:flex-start;padding-top:24vh!important;padding-bottom:0!important}
html[data-motion=on] .intro-hold{position:sticky;top:24vh}
/* Sticky surfaces can only travel inside the stage's content box, so the trailing hold is an in-flow spacer, not padding. */
html[data-motion=on] .chapter-stage{padding-bottom:0}
html[data-motion=on] .chapter-stage:after{content:'';display:block;height:55vh}
html[data-motion=on] .chapter-stage[data-transition=uncover]:after{height:0}
html[data-motion=on] .chapter-surface{min-height:100vh;min-height:100svh}
html[data-motion=on] .chapter-stage[data-transition=uncovered]{margin-top:-100vh;margin-top:-100svh}
html[data-motion=on] .chapter-stage[data-transition=uncovered]:after{height:155vh}
}

/* Phase 2: Work filmstrip with scroll-run timecode rail; curved Experiments sheet overlaps the strip's trailing hold. */
.film-strip,.strip-view,.strip-track{display:contents}
.film-rail{display:none}
@media(min-width:0px){html[data-motion=on] .film-strip{display:block;position:relative;height:calc(100vh + var(--strip-len,480vh));height:calc(100svh + var(--strip-len,480vh))}
html[data-motion=on] .strip-view{display:block;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html[data-motion=on] .strip-track{display:flex;height:100%;will-change:transform}
html[data-motion=on] .strip-track>.project-scene{flex:0 0 100vw;width:100vw;height:100vh!important;height:100svh!important}
html[data-motion=on] .strip-track .project-pin{position:relative;height:100%;min-height:0}
html[data-motion=on] .film-rail{display:flex;align-items:center;gap:22px;margin-top:auto;margin-bottom:46px;padding-top:16px;font-size:9px;letter-spacing:.14em;color:#8f9389;flex-shrink:0}
html[data-motion=on] .film-rail i{position:relative;flex:1;height:1px;background:#ffffff1f;overflow:hidden}
html[data-motion=on] .film-rail b{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(0)}
html[data-motion=on] .rail-time{font-variant-numeric:tabular-nums;color:#c9cbc2;min-width:92px;text-align:right}
html[data-motion=on] .chapter-stage[data-transition=sheet]{margin-top:-60vh;background:transparent}
}

/* Phase 3: Contact showreel bookend and the film cursor tag. (Process 'divider' and Services credit rows are inline-style only.) */
.bookend{display:none;position:absolute;z-index:2;overflow:hidden;background:#181a16;pointer-events:none}
.bookend img{width:100%;height:100%;object-fit:cover;max-width:none}

/* Intro "Step inside the frame": desktop + motion only. A camera walk through nested frames toward a slit of warm light,
   which opens, closes to a hairline, holds a beat of black, then the cream hero cuts in with a hard edge. */
.intro{display:none}
@media(prefers-reduced-motion:no-preference){
html:not([data-motion=off]) .intro{display:block;position:relative;z-index:3;height:380vh;margin-bottom:-100vh;margin-bottom:-100svh;background:transparent;color:#ecebe3;pointer-events:none}
.intro-pin{background:#0b0c0a;pointer-events:auto}
html:not([data-motion=off]) header{top:280vh;z-index:2}
html:not([data-motion=off]) #home{scroll-margin-top:-90px}
html.intro-live:not(.hero-arrived) .title-line{animation-play-state:paused}
}
.intro-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.intro-scene{position:absolute;inset:0;perspective:800px;perspective-origin:50% 50%}
.intro-depth{position:absolute;inset:0;transform-style:preserve-3d}
.intro-frame{position:absolute;left:50%;top:50%;width:64vw;height:64vh;border:1px solid #ecebe34d;transform:translate3d(-50%,-50%,-4000px);opacity:0;will-change:transform,opacity}
.intro-frame:before,.intro-frame:after{content:'';position:absolute;width:22px;height:22px;border:solid #ecebe399}
.intro-frame:before{left:-1px;top:-1px;border-width:1px 0 0 1px}
.intro-frame:after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.intro-door{position:absolute;left:50%;top:50%;width:11vw;height:11vh;background:var(--paper);box-shadow:0 0 0 1px #f4e3c8,0 0 70px #f4e3c855,0 0 180px #dc382b1f;transform:translate(-50%,-50%);opacity:0}
.intro-fill{position:absolute;inset:0;z-index:1;background:var(--paper);opacity:0;pointer-events:none}
.intro-grain{position:absolute;inset:-50%;opacity:.12;pointer-events:none;background-size:160px 160px;animation:intro-grain .9s steps(6) infinite}
html.intro-gone .intro-grain,html.intro-gone .intro-mote{animation-play-state:paused}
@keyframes intro-grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,18px)}40%{transform:translate(22px,-26px)}60%{transform:translate(-14px,-34px)}80%{transform:translate(34px,12px)}100%{transform:translate(0,0)}}
.intro-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,#050504cc 100%);opacity:var(--vig,1)}
.intro-mote{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;opacity:0;will-change:transform,opacity}
.intro-mote:before{content:'';position:absolute;inset:0;border-radius:50%;background:#ecebe3}
.intro-mote.plus{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
.intro-mote.plus:before{border-radius:0;background:linear-gradient(#ecebe3,#ecebe3) center/100% 1px no-repeat,linear-gradient(#ecebe3,#ecebe3) center/1px 100% no-repeat}
.intro-mote.square{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
.intro-mote.square:before{border-radius:0;background:none;border:1px solid #ecebe3}
.intro-mote.dash{width:16px;height:1px;margin:0 0 0 -8px}
.intro-mote.dash:before{border-radius:0}
.intro-mote.warm:before{background:#f0dcc0;box-shadow:0 0 8px #f0dcc0aa}
.intro-mote.warm.plus:before,.intro-mote.warm.square:before{box-shadow:none}
.intro-mote.twinkle:before{animation:intro-twinkle 4s ease-in-out infinite;animation-delay:inherit}
@keyframes intro-twinkle{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.intro-grain,.intro-mote:before{animation:none}}
.intro-hud{position:absolute;left:4.5%;bottom:13vh;display:grid;gap:8px;z-index:2}
.intro-logo{font-size:44px;font-weight:750;letter-spacing:-.07em;line-height:1}
.intro-logo sup{font-size:12px;letter-spacing:0;margin-left:2px}
.intro-role{font-size:9px;letter-spacing:.16em;color:#a9aba1}
.intro-word{font-size:30px;color:#ecebe3;display:inline-block;margin-top:6px}
.intro-word.roll{animation:chapter-roll .55s cubic-bezier(.2,.8,.2,1)}
.intro-vertical{position:absolute;right:18px;top:43%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.2em;color:#8d8f86}
.intro-foot{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);font-size:9px;letter-spacing:.14em;color:#8d8f86}
.intro-skip{position:absolute;right:4.5%;top:34px;font-size:9px;letter-spacing:.14em;color:#a9aba1;border-bottom:1px solid #ffffff30;padding:8px 0;z-index:3}
.intro-skip:hover{color:#fff}

/* Interactivity I-1: proximity-weight headings, link roll, toast, compare hold, dock, smooth service rows. */
.fx-word{display:inline-block;white-space:nowrap}
.fx-l{display:inline-block;transition:font-variation-settings .18s ease-out}
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;line-height:1.25}
.roll-a,.roll-b{display:block;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.roll-b{position:absolute;left:0;top:100%}
a:hover .roll>span,button:hover .roll>span,a:focus-visible .roll>span,button:focus-visible .roll>span{transform:translateY(-100%)}
.site-toast{position:fixed;left:50%;bottom:74px;z-index:40;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#161715f0;color:#f1efe7;padding:12px 16px;font-size:9px;letter-spacing:.14em;border-radius:2px;transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
.site-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.site-toast a{border-bottom:1px solid #ffffff55;margin-left:6px}
.compare.held .compare-divider i{background:var(--red);color:#fff}
.tools img{transition:transform .18s ease-out;transform-origin:50% 100%}
.service-body{overflow:hidden}

/* Interactivity I-2: breakable About sentence, hero move/stay letters, Experiments poster trail. */
html.fx-on .break-word{cursor:pointer;text-decoration:underline dotted 1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
html.fx-on .break-word:hover{color:var(--red)}
.about-statement{transition:padding-bottom .5s cubic-bezier(.2,.8,.2,1)}
.about-statement.is-broken{cursor:grab;user-select:none}
.about-statement.is-broken span{display:inline-block;white-space:pre-wrap;will-change:transform}
.put-back{margin:-120px 0 40px;position:relative;z-index:2}
.mv-l{display:inline-block;transition:transform .28s cubic-bezier(.2,.8,.2,1),font-variation-settings .28s ease-out}
.trail-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.trail-layer img{position:absolute;left:0;top:0;width:230px;height:130px;object-fit:cover;max-width:none;opacity:0;box-shadow:0 22px 50px #20211e33}
.archive>.section-label,.archive>h2{position:relative;z-index:1}

/* Interactivity I-3: cursor ring, rewinding pill, film sheen, grain on dark chapters, tilting personal frames. */
.chapter-indicator.rewinding .indicator-dot{animation:rewind-blink .5s steps(2) infinite}
.chapter-indicator.rewinding #page-progress{min-width:96px;font-variant-numeric:tabular-nums;color:var(--red)}
@keyframes rewind-blink{50%{opacity:.15}}
.sheen{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s ease;mix-blend-mode:screen;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#ffffff2e,transparent 38%),linear-gradient(110deg,transparent calc(var(--sx,50%) - 24%),#ffffff1f var(--sx,50%),transparent calc(var(--sx,50%) + 24%))}
html.fx-on .hero-film:hover .sheen,html.fx-on .project-media:hover .sheen,html.fx-on .experiment-film:hover .sheen,html.fx-on .personal-art:hover .sheen{opacity:1}
.experiment-film{position:relative}
.play-pill,.personal-play{z-index:2}
.work{position:relative;isolation:isolate}
.work:after,.contact:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background-image:var(--grain);background-size:160px 160px;opacity:.055}

/* Work accent glow: each project's own film colour (measured from its frames) rises softly from the bottom of its panel and fades to the dark surface toward the top,
   echoing the Personal film palettes. --lit (set by the filmstrip) dims it as a panel slides away. */
.project-pin{isolation:isolate}
.project-scene.statement{--glow:#7fcff0}
.project-scene.explanation{--glow:#d49ac2}
.project-scene.detail{--glow:#f0c59e}
.project-pin:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--lit,1);transition:opacity .3s linear;background:radial-gradient(130% 75% at 50% 118%,var(--glow,var(--accent)) 0%,transparent 62%),linear-gradient(to top,var(--glow,var(--accent)),transparent 58%);mix-blend-mode:normal}
@supports (background:color-mix(in srgb,red 50%,transparent)){.project-pin:before{background:radial-gradient(130% 75% at 50% 118%,color-mix(in srgb,var(--glow,var(--accent)) 42%,transparent) 0%,transparent 62%),linear-gradient(to top,color-mix(in srgb,var(--glow,var(--accent)) 13%,transparent),transparent 58%)}}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.project-pin:before{opacity:calc(var(--lit,1)*.22)}}

/* ===== Rework: "one edit session" ===== Static layouts first (phones, Motion Off); pinned scenes only on desktop with motion. */
:root{--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.scene-label{display:block;color:#9a9d93;margin-bottom:28px}
#page-progress{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:84px}
/* HUD: persistent Let's talk pill (bottom right) */
.hud-talk{position:fixed;right:4.5%;bottom:22px;z-index:16;background:#dc382b;color:#fff;padding:11px 16px;font-size:9px;letter-spacing:.14em;border-radius:100px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s,background .2s}
html.hud-on .hud-talk{opacity:1;pointer-events:auto;transform:none}
body:has(dialog[open]) .hud-talk{opacity:0;pointer-events:none}
.hud-talk:hover{background:#b92c21}
@media(max-width:600px){.hud-talk{bottom:12px;right:12px;padding:9px 12px;font-size:8px}}
/* Sprocket rails (desktop dark scenes) */
.rail{position:fixed;top:0;bottom:0;width:14px;z-index:9;pointer-events:none;opacity:0;transition:opacity .5s;background-image:linear-gradient(transparent 0 9px,#ecebe32e 9px 21px,transparent 21px);background-size:9px 30px;background-repeat:repeat-y;background-position-x:center;box-shadow:inset 1px 0 #ecebe312,inset -1px 0 #ecebe312}
.rail.left{left:12px}.rail.right{right:12px}.rail.on{opacity:1}
@media(max-width:900px){.rail{display:none}}
/* Statement */
.statement-scene{background:#121411;color:#eeeee5;padding:110px 8%;position:relative}
.statement-scene .about-statement{font-size:clamp(30px,4.2vw,66px);max-width:1150px;line-height:1.16;letter-spacing:-.05em;margin:0}
/* Slate (clapperboard) */
.slate{display:none}
.clapper{width:min(520px,72vw);color:#ecebe3;font-family:var(--mono)}
.clapper-top{height:44px;border:2px solid #ecebe3;background:repeating-linear-gradient(135deg,#ecebe3 0 24px,#121411 24px 48px);transform-origin:0 100%;transform:rotate(-24deg)}
.clapper-body{border:2px solid #ecebe3;border-top:0;display:grid;grid-template-columns:repeat(3,1fr)}
.clapper-body>span{padding:10px 14px 4px;font-size:9px;letter-spacing:.16em;color:#9a9d93;border-right:1px solid #ecebe340}
.clapper-body>b{padding:2px 14px 14px;font:500 44px/1 Inter,sans-serif;letter-spacing:-.04em;border-right:1px solid #ecebe340;border-bottom:1px solid #ecebe340}
.clapper-body>span:nth-child(3),.clapper-body>b:nth-child(6){border-right:0}
.slate-title{grid-column:1/-1;padding:16px 14px;font-size:24px;letter-spacing:.1em;font-weight:500}
.slate-tc{grid-column:1/-1;padding:10px 14px;border-top:1px solid #ecebe340;color:#dc382b;font-size:13px;letter-spacing:.14em}
/* Beliefs */
.beliefs{background:#121411;color:#eeeee5;padding:110px 8%;position:relative;overflow:hidden}
.belief-col{display:none}
.belief-note{position:relative;max-width:640px;background:#efe9da;color:#20211e;padding:48px 52px 34px;box-shadow:0 30px 70px #0008;transform:rotate(-1.2deg)}
.belief-note .tape{position:absolute;left:50%;top:-14px;width:124px;height:28px;background:#e7dbbfd9;transform:translateX(-50%) rotate(2deg)}
.belief{font-size:clamp(30px,3.4vw,54px);letter-spacing:-.05em;line-height:1.06;margin:0 0 20px}
.belief em{color:#c63d30}
.belief-count{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#71736b}
/* Before / After the edit */
.beforeafter{background:#0d0e0c;color:#ecebe3;padding:110px 8%}
.ba-slate{display:none}
.ba-frame{position:relative;max-width:900px;margin:36px 0;overflow:hidden;background:#000}
.ba-frame img{width:100%;display:block}
.ba-streaks{display:none}
.ba-tc,.ba-tag{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.14em;background:#0d0e0cd9;padding:6px 9px;z-index:2}
.ba-tc{left:12px;bottom:12px;color:#dc382b}.ba-tag{right:12px;top:12px}
.ba-title{font-size:clamp(56px,7vw,120px);margin:0}
.ba-title>span{display:block;margin-bottom:24px}
.ba-before em{color:#8d8f86}.ba-after em{color:#dc382b}
.ba-cards{list-style:none;padding:0;margin:24px 0;display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.ba-cards li{background:#1b1c19;border:1px solid #ffffff1c;padding:22px;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em;line-height:1.15}
.ba-cards li b{display:block;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;color:#8d8f86;margin-bottom:28px}
.ba-cards.after li{background:#efe9da;color:#20211e;border-color:transparent}
.ba-draft{display:inline-block;margin-top:8px}
@media(max-width:600px){.ba-cards{grid-template-columns:1fr}}
/* Services: scroll-drawn divider lines and turning + (titles stay owned by the hover blur) */
.services.draw-lines details{position:relative;border-top-color:transparent}
.services.draw-lines details:before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform-origin:left center;transform:scaleX(var(--ln,1))}
.services.draw-lines summary b{rotate:var(--plus,0deg)}
/* How a film comes together */
.howiwork{background:var(--paper);color:var(--ink);padding:110px 8%}
.tl-viewer{margin:46px 0 30px}
.tl-line{font-size:clamp(22px,2.4vw,36px);letter-spacing:-.04em;line-height:1.2;max-width:860px;margin:0 0 22px}
.tl-line b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--red);font-weight:400;margin-bottom:8px}
.tl-panel{position:relative;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 4%,var(--paper));padding:16px 18px;font-family:var(--mono)}
.tl-ruler{height:16px;margin:0 0 10px 46px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 36px)}
.tl-track{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tl-name{width:34px;font-size:10px;color:var(--muted)}
.tl-clips{flex:1;display:grid;grid-template-columns:1.1fr 1.6fr 1fr 1.3fr;gap:4px}
.tl-clip{height:54px;text-align:left;padding:8px 10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:color-mix(in srgb,var(--ink) 12%,var(--paper));border:1px solid var(--line);transition:background .3s,color .3s}
.tl-clip.on{background:var(--ink);color:var(--paper)}
.tl-wave{flex:1;height:28px;opacity:.55;background:repeating-linear-gradient(90deg,var(--muted) 0 2px,transparent 2px 5px)}
.tl-playhead{display:none;position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)}
.tl-draft{display:inline-block;margin-top:16px}
/* Export ending */
.export-bar{position:relative;z-index:3;display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#a9aba1;margin-bottom:46px}
.export-bar i{flex:1;height:2px;background:#ffffff1a;position:relative;overflow:hidden}
.export-bar b{position:absolute;inset:0;background:#dc382b;transform-origin:left center}
.export-pct{min-width:40px;text-align:right;color:#ecebe3}
.cta-bar{display:flex;width:100%;gap:20px;justify-content:space-between;align-items:center;text-align:left;background:#ecebe3;color:#121411;padding:22px 26px;font-size:clamp(16px,2vw,28px);letter-spacing:-.03em;font-weight:600;margin:0 0 56px}
.cta-bar strong{background:#121411;color:#ecebe3;padding:12px 18px;font-size:.62em;letter-spacing:.06em;white-space:nowrap;transition:background .25s}
.cta-bar:hover strong,.cta-bar:focus-visible strong{background:#dc382b}
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a;margin:0 -9% 46px;padding:16px 0}
.marquee-track{display:inline-flex;gap:34px;font-size:clamp(40px,6vw,96px);letter-spacing:-.05em;font-weight:500;will-change:transform}
.marquee i{font-style:normal;color:#dc382b}
.wordmark{font-size:31vw;font-weight:750;letter-spacing:-.08em;line-height:.78;margin:34px 0 -7vw -1.2vw;color:#ecebe3;white-space:nowrap;user-select:none;pointer-events:none}
.wordmark span{color:#dc382b}
@media(max-width:600px){.cta-bar{flex-direction:column;align-items:flex-start}.marquee{margin:0 -6% 36px}}
/* Inquiry as a slate sheet */
.inquiry-dialog{border-top:14px solid transparent;border-image:repeating-linear-gradient(135deg,var(--ink) 0 18px,var(--paper) 18px 36px) 14}
.inquiry-dialog label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* ----- Desktop + motion: pinned scenes ----- */
@media(min-width:0px){
html[data-motion=on] .statement-scene{height:240vh;padding:0}
html[data-motion=on] .statement-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 8%}
html[data-motion=on] .slate{display:block;height:135vh;background:#121411}
html[data-motion=on] .slate-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
html[data-motion=on] .beliefs{height:330vh;padding:0;overflow:visible}
html[data-motion=on] .beliefs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html[data-motion=on] .belief-col{display:flex;flex-direction:column;gap:22px;position:absolute;top:0;width:19vw;will-change:transform}
html[data-motion=on] .belief-col.left{left:4vw}
html[data-motion=on] .belief-col.right{right:4vw}
html[data-motion=on] .belief-col img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.5}
html[data-motion=on] .belief-stage{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center}
html[data-motion=on] .belief-note{width:min(640px,48vw);display:grid}
html[data-motion=on] .belief{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
html[data-motion=on] .belief.on{opacity:1;transform:none}
html[data-motion=on] .beforeafter{height:620vh;padding:0}
html[data-motion=on] .ba-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html[data-motion=on] .ba-slate{display:grid;position:absolute;inset:0;z-index:5;place-items:center;background:#0d0e0c}
html[data-motion=on] .clapper.small{width:min(440px,60vw)}
html[data-motion=on] .ba-frame{position:absolute;right:6%;top:50%;width:46vw;max-width:none;margin:0;transform:translateY(-50%)}
html[data-motion=on] .ba-streaks{display:block;position:absolute;inset:0;z-index:1;opacity:0;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,transparent 0 5px,#ffffff26 5px 6px),linear-gradient(90deg,transparent 20%,#ffffff38 50%,transparent 80%);background-size:100% 100%,60% 100%;background-repeat:repeat,no-repeat;animation:ba-ff .35s linear infinite}
html[data-motion=on] .ba-title{position:absolute;left:6%;top:15vh}
html[data-motion=on] .ba-title>span{position:absolute;left:0;top:0;white-space:nowrap;margin:0}
html[data-motion=on] .ba-after{opacity:0}
html[data-motion=on] .ba-cards{position:absolute;left:6%;bottom:9vh;width:40vw;margin:0}
html[data-motion=on] .ba-cards li{min-height:150px;opacity:0}
html[data-motion=on] .ba-draft{position:absolute;right:6%;bottom:5vh;margin:0}
html[data-motion=on] .howiwork{height:300vh;padding:0}
html[data-motion=on] .how-pin{position:sticky;top:0;min-height:100vh;min-height:100svh;padding:80px 8% 70px;display:flex;flex-direction:column;justify-content:center}
html[data-motion=on] .tl-viewer{display:grid;min-height:150px}
html[data-motion=on] .tl-line{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
html[data-motion=on] .tl-line.on{opacity:1;transform:none}
html[data-motion=on] .tl-playhead{display:block}
}
@keyframes ba-ff{to{background-position:0 0,240% 0}}
/* Static Before/After order: each title sits with its own cards. Pinned layout restores the absolute stage. */
.ba-pin{display:flex;flex-direction:column}
.ba-title{display:contents}
.ba-frame{order:1}.ba-before{order:2}.ba-cards.before{order:3}.ba-after{order:4}.ba-cards.after{order:5}.ba-draft{order:6;align-self:flex-start}
.ba-title>span{font-size:clamp(56px,7vw,120px);font-weight:500;letter-spacing:-.065em;line-height:1.02;margin:40px 0 0}
@media(min-width:0px){html[data-motion=on] .ba-pin{display:block}html[data-motion=on] .ba-title{display:block}html[data-motion=on] .ba-title>span{margin:0}}
@media(max-width:600px){#chapter-name{max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* INDI Creative: mirrored explanation layout (film left, story right); gold accent and amber glow measured from the film. */
.project-scene.indi{--glow:#f2b51c}
.explanation.mirror .project-layout{grid-template-columns:1.45fr 1fr}
.explanation.mirror .project-context{order:2}
@media(max-width:900px){.explanation.mirror .project-layout{grid-template-columns:1.2fr 1fr}}

/* Services does not overlap the Process comparison (frame and captions reach the bottom), and the timeline does not overlap Services: the generic -20vh stage overlap covered the last service row. */
@media(min-width:0px){html[data-motion=on] .chapter-stage:has(>#howiwork),html[data-motion=on] .chapter-stage:has(>#services){margin-top:0}}

/* Personal worlds: one page per edit, its film behind it (the preview drawn blurred into a tiny canvas, soft-light blended over the film's deep base colour) with grain;
   cream dips between pages; the next frame develops, then its colour spills in (rework.js drawWorlds). Stacked pages with a still blurred background on phones and Motion Off. */
.pw{--dip:#eeede7;position:relative}
.pw-stage{position:relative}
.pw-page{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;overflow:clip;color:#f3eee6;isolation:isolate}
.pw-dip{position:absolute;inset:0;z-index:0;background:var(--dip);opacity:0}
.pw-dip:after{content:'';position:absolute;inset:0;background-image:var(--grain);background-size:180px 180px;opacity:.05}
.pw-world{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--base)}
.pw-world:before{content:'';position:absolute;inset:-14%;background:var(--bgpost) center/cover no-repeat;mix-blend-mode:soft-light}
.pw .pw-world .pw-bg{position:absolute;left:-14%;top:-14%;right:auto;bottom:auto;width:128%;height:128%;max-width:none;max-height:none;object-fit:cover;mix-blend-mode:soft-light;opacity:0;transition:opacity .6s ease}
.pw .pw-world .pw-bg.on{opacity:1}
.pw-shade{position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 72% 50%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 72%),linear-gradient(90deg,#000a,#0004 52%,#0000 80%),radial-gradient(ellipse at 50% 50%,transparent 45%,#0009)}
.pw-grain{position:absolute;inset:-80px;background-image:var(--grain);background-size:170px 170px;opacity:.14;pointer-events:none}
html[data-motion=on] .pw-live .pw-grain{animation:pw-grain .9s steps(5) infinite}
@keyframes pw-grain{0%{transform:translate(0,0)}20%{transform:translate(-40px,22px)}40%{transform:translate(28px,-34px)}60%{transform:translate(-18px,40px)}80%{transform:translate(36px,10px)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.pw-grain{animation:none!important}}
.pw-content{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7vw;padding:90px 8%;transform-origin:68% 50%}
.pw-copy{max-width:470px}
.pw-copy .eyebrow{color:var(--accent)}
.pw-copy h3{font-size:clamp(52px,6.2vw,100px);margin:26px 0 22px;line-height:.92;letter-spacing:-.05em;color:#f7f2ea}
.pw-lede{font-size:18px;line-height:1.45;margin:0 0 14px;color:#f3eee6}
.pw-desc{font-size:14px;line-height:1.7;color:#f3eee6b8;margin:0 0 26px}
.pw-facts{display:flex;gap:36px;margin:0 0 30px;padding:16px 0 0;border-top:1px solid #f3eee62e}
.pw-facts dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#f3eee685;margin:0 0 6px}
.pw-facts dd{margin:0;font-size:13px}
.pw-copy .text-button{color:#f7f2ea}
.pw .personal-art{aspect-ratio:var(--ar);height:min(70vh,640px);width:auto;max-width:42vw;max-height:none;min-height:0;padding:0;border:0;background:#0000002e;box-shadow:0 40px 120px #0009;overflow:hidden;position:relative;display:block}
.pw .personal-art video{width:100%;height:100%;max-height:none;object-fit:contain;display:block}
.pw-frame{justify-self:end;transform-origin:50% 60%}
.pw-exit{position:absolute;inset:0;z-index:5;background:var(--paper);opacity:0;pointer-events:none;display:none}
.pw-rail{display:none}
@media(min-width:0px){
html[data-motion=on] .pw-live .pw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip}
html[data-motion=on] .pw-live .pw-page{position:absolute;inset:0;min-height:0}
html[data-motion=on] .pw-live .pw-content{min-height:0;height:100%}
html[data-motion=on] .pw-live .pw-exit{display:block}
html[data-motion=on] .pw-live .pw-rail{display:flex;position:absolute;left:8%;bottom:34px;z-index:6;gap:18px;font-size:10px;letter-spacing:.14em;color:#fff;mix-blend-mode:difference;pointer-events:none}
.pw-rail span{display:flex;align-items:center;gap:8px;opacity:.45;transition:opacity .3s}
.pw-rail span.on{opacity:1}
.pw-rail i{display:block;width:44px;height:1px;background:#ffffff40;position:relative;overflow:hidden}
.pw-rail i:after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(var(--f,0));transform-origin:left}
}
@media(max-width:900px){.pw-content{grid-template-columns:1fr;padding:80px 7%;gap:40px}.pw .personal-art{height:min(70vh,86vw);max-width:100%}.pw-frame{justify-self:start}}

/* Process compare with real footage (Two Six ad): a portrait 9:16 frame; the edit (video, right half of a side-by-side file)
   sits over the raw footage (canvas) and is clipped from the divider rightwards. */
.process{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:center;padding-top:56px;padding-bottom:56px;min-height:100vh;min-height:100svh}
.process-credit{display:inline-block;font-size:10px;letter-spacing:.14em;color:var(--muted);border-top:1px solid currentColor;padding-top:12px}
.compare-wrap{justify-self:start;margin-left:3vw}
@media(max-width:900px){.compare-wrap{justify-self:center;margin-left:0}}
.compare.compare-film{height:min(calc(100vh - 190px),900px);height:min(calc(100svh - 190px),900px);max-width:100%;width:auto;aspect-ratio:9/16;background:#111;box-shadow:0 30px 80px #0002}
.compare-film .compare-rough,.compare-film .compare-finished{padding:0;background:#111;overflow:hidden}
.compare-film .compare-raw{position:absolute;inset:0;width:100%;height:100%;display:block}
.compare-film .compare-video{position:absolute;top:0;left:-100%;width:200%;height:100%;max-width:none;object-fit:cover;display:block}
.compare .compare-tag{position:absolute;top:14px;left:14px;z-index:2;font-size:9px;letter-spacing:.12em;padding:6px 9px;background:#000000a6;color:#fff;border-radius:2px}
.compare .compare-tag.right{left:auto;right:14px}
.compare-captions{display:flex;justify-content:space-between;gap:20px;margin-top:18px}
.compare-captions b{font-weight:500;font-size:22px;letter-spacing:-.05em;line-height:1}
.compare-captions b:last-child{text-align:right}
@media(max-width:900px){.process{grid-template-columns:1fr}.compare.compare-film{height:min(72vh,calc(88vw * 16 / 9))}.compare-captions b{font-size:18px}}

/* ===== Space fillers: fragments of the edit (fill.js). Beside films, never over them; desktop-first, hidden or static elsewhere. ===== */
/* Hero: viewer metadata above the resting showreel, and an "up next" fan of the Work films in the empty top right. */
.hero-meta,.hero-fan{display:none}
@media(min-width:0px){
.hero-meta{display:flex;align-items:center;gap:12px;position:absolute;left:60.5%;bottom:calc(38% + 12px);z-index:2;font-size:9px;letter-spacing:.14em;color:var(--muted);pointer-events:none;white-space:nowrap}
.hero-meta b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.hero-meta .rec{width:6px;height:6px;border-radius:50%;background:var(--red)}
html[data-motion=on] .hero-meta .rec{animation:rec-blink 1.6s steps(2) infinite}
@keyframes rec-blink{50%{opacity:.25}}
.hero-fan{display:block;position:absolute;right:6%;top:26vh;width:230px;z-index:2;color:var(--ink);text-decoration:none}
.fan-deck{position:relative;display:block;height:150px}
.fan-deck img{position:absolute;left:40px;top:28px;width:150px;aspect-ratio:16/9;object-fit:cover;border:3px solid var(--paper);box-shadow:0 14px 34px #0003;transform:translateX(calc(var(--i)*30px)) translateY(calc(var(--i)*var(--i)*4px)) rotate(calc(var(--i)*8deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fan-deck img:nth-child(2){z-index:2}
.hero-fan:hover .fan-deck img,.hero-fan:focus-visible .fan-deck img{transform:translateX(calc(var(--i)*62px)) translateY(calc(var(--i)*var(--i)*10px)) rotate(calc(var(--i)*11deg))}
.fan-cap{display:flex;justify-content:space-between;margin-top:8px;padding-top:10px;border-top:1px solid currentColor;font-size:9px;letter-spacing:.14em}
.fan-cap b{font-weight:600}
}
/* Statement: outline laptop (CSS 3D) in the empty space above the sentence. */
.laptop3d{display:none}
@media(min-width:0px){
html[data-motion=on] .laptop3d{display:block}
/* Right side, vertically centred, scaled up and set back behind the sentence (soft depth-of-field blur, dimmed) so the words lead. */
.laptop3d{position:absolute;right:10.5%;top:50%;margin-top:-100px;width:240px;height:240px;z-index:0;transform-origin:50% 50%;transform:scale(var(--lps,1.65));perspective:1000px;pointer-events:none;filter:blur(var(--lpb,1.4px));opacity:.72;--line:#ecebe3b3;--on:1}
@media(max-height:820px){.laptop3d{--lps:1.35}}
@media(min-width:1700px) and (min-height:960px){.laptop3d{--lps:1.95}}
.statement-pin .scene-label,.statement-pin .about-statement{position:relative;z-index:1}
.lp-rig{position:absolute;left:10px;top:92px;width:220px;height:150px;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(-24deg)}
.lp-base{position:absolute;inset:0;border:1.2px solid var(--line);border-radius:6px;transform:rotateX(90deg);background:#ecebe308}
.lp-keys{position:absolute;left:14px;right:14px;top:16px;height:62px;border:1px solid #ecebe355;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 15px,#ecebe32a 15px 16px),repeating-linear-gradient(0deg,transparent 0 14px,#ecebe32a 14px 15px)}
.lp-pad{position:absolute;left:78px;width:64px;bottom:14px;height:40px;border:1px solid #ecebe355;border-radius:3px}
.lp-front{position:absolute;left:0;width:220px;top:75px;height:9px;border:1.2px solid var(--line);border-top:0;border-radius:0 0 6px 6px;transform:translateZ(75px)}
.lp-lid{position:absolute;left:0;top:-75px;width:220px;height:150px;border:1.2px solid var(--line);border-radius:7px;background:#121311;transform-origin:50% 100%;transform:translateZ(-75px) rotateX(14deg)}
.lp-screen{position:absolute;inset:9px 9px 14px;border:1px solid #ecebe355;border-radius:3px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,rgb(220 82 62 / calc(var(--on) * .32)),transparent 72%)}
.lp-glow{position:absolute;left:14%;right:14%;bottom:20%;height:1.5px;background:#ecebe3;opacity:calc(var(--on) * .8);box-shadow:0 0 10px #dc523e}
.lp-glow:after{content:'';position:absolute;left:38%;top:-5px;width:1.5px;height:12px;background:var(--red)}
.lp-crack{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .15s}
.lp-crack path{fill:none;stroke:#ecebe3;stroke-width:1.3;vector-effect:non-scaling-stroke}
.laptop3d.is-broken .lp-crack{opacity:1}
.lp-shadow{position:absolute;left:-10px;top:0;width:240px;height:150px;transform:translateY(80px) rotateX(90deg);background:radial-gradient(ellipse at center,#0009,transparent 70%)}
}
/* Experiments: an index of the studies on the right of the heading, with a peek of the hovered study. */
.exp-index{display:none}
@media(min-width:0px){
.exp-index{display:flex;flex-direction:column;position:absolute;right:6%;top:178px;width:min(360px,30vw);z-index:2;border-top:1px solid #20211e2e}
.exp-link{display:flex;align-items:baseline;gap:16px;width:100%;padding:13px 0;border:0;border-bottom:1px solid #20211e2e;background:none;color:inherit;font:inherit;font-size:22px;letter-spacing:-.03em;text-align:left;cursor:pointer;transition:padding .3s ease}
.exp-link i{font-style:normal;font-size:10px;letter-spacing:.12em;color:var(--muted)}
.exp-link b{margin-left:auto;font-weight:400;font-size:14px;opacity:.5;transition:transform .3s ease,opacity .3s}
.exp-link:hover,.exp-link:focus-visible{padding-left:10px}
.exp-link:hover b,.exp-link:focus-visible b{opacity:1;transform:translate(3px,3px)}
.exp-peek{position:absolute;right:calc(100% + 26px);top:var(--y,0);width:190px;aspect-ratio:16/9;overflow:hidden;opacity:0;transform:translateY(-50%) scale(.92);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 16px 40px #0003;pointer-events:none}
.exp-peek img{width:100%;height:100%;object-fit:cover;display:block}
.exp-index.peeking .exp-peek{opacity:1;transform:translateY(-50%) scale(1)}
}
/* Before/After: RGB parade scopes in the left column (only while the scene is pinned). */
.ba-scopes{display:none}
@media(min-width:0px){
html[data-motion=on] .ba-scopes{display:block;position:absolute;left:6%;top:44vh;width:300px;z-index:2;opacity:0;pointer-events:none}
.scope-head{display:flex;justify-content:space-between;margin-bottom:8px;font-size:9px;letter-spacing:.14em;color:#ecebe399}
.scope-head b{font-weight:500;color:var(--red)}
.ba-scopes canvas{display:block;width:300px;height:132px;border:1px solid #ecebe322;border-radius:3px;background:#0000004d}
}
/* Section 9: live edit log under the copy. */
.edit-log{margin-top:30px;max-width:430px}
.edit-head{display:flex;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid #20211e33;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.edit-time b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.edit-log ol{list-style:none;margin:0;padding:0}
.edit-log button{display:flex;align-items:baseline;gap:16px;width:100%;padding:7px 0;border:0;border-bottom:1px solid #20211e14;background:none;color:var(--muted);font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:color .25s}
.edit-log button i{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.06em;min-width:38px}
.edit-log li.on button{color:var(--ink)}
.edit-log li.on button i{color:var(--red)}
.edit-log button:hover{color:var(--ink)}
.edit-draft{display:inline-block;margin-top:14px}
/* Services: preview tile beside the heading. */
.svc-preview{display:none}
@media(min-width:0px){
.svc-preview{display:block;position:absolute;right:8%;top:152px;width:min(340px,25vw);margin:0;z-index:2;pointer-events:none}
.svc-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#20211e14;box-shadow:0 18px 44px #0002}
.svc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .8s ease}
.svc-frame img.on{opacity:1;transform:none}
.svc-preview figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.svc-preview figcaption b{font-weight:500;color:var(--ink)}
}
/* How a film comes together: program monitor to the right of the steps and timeline. */
.tl-monitor{display:none}
@media(min-width:0px){
.how-pin.has-monitor{position:relative}
.has-monitor .tl-viewer,.has-monitor .tl-panel,.has-monitor .tl-draft{margin-right:calc(var(--monw,200px) + 4vw)}
.tl-monitor{display:block;position:absolute;right:8%;margin:0;aspect-ratio:9/16;z-index:2}
.tl-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#111;border:1px solid #20211e33;box-shadow:0 20px 50px #0002}
.tl-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.tl-screen img.on{opacity:1}
.tl-monitor figcaption{position:absolute;left:0;right:0;top:calc(100% + 10px);display:flex;gap:10px;align-items:baseline;font-size:9px;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.tl-monitor figcaption b{font-weight:500;color:var(--ink)}
.tl-monitor figcaption i{font-style:normal;margin-left:auto;color:var(--red)}
}
/* Contact: dot frame in the empty right half. */
.contact-dots{display:none}
@media(min-width:0px){.contact-dots{display:block;position:absolute;right:8%;top:150px;width:min(440px,30vw);height:min(500px,56vh);z-index:1}}

/* Back to the start: round button to the right of the Let's talk pill (shares its show/hide rules). */
.hud-top{position:fixed;right:4.5%;bottom:22px;z-index:16;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s,background .2s}
html.hud-on .hud-talk{right:calc(4.5% + 42px)}
html.hud-on .hud-top{opacity:1;pointer-events:auto;transform:none}
body:has(dialog[open]) .hud-top{opacity:0;pointer-events:none}
.hud-top span{display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hud-top:hover span,.hud-top:focus-visible span{transform:translateY(-3px)}
.hud-top:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(max-width:600px){.hud-top{bottom:50px;right:12px;width:30px;height:30px}html.hud-on .hud-talk{right:12px}}

/* ===================== Mobile parity: every scene on every screen (phone / tablet / portrait layouts) ===================== */
html,body{overflow-x:clip}
@media(max-width:900px) and (max-aspect-ratio:1/1){
/* Hero (motion on): headline on top, showreel full-width under it at 16:9; it grows to full-bleed with the scroll (app.js). */
html[data-motion=on] .hero-pin{position:sticky;top:0;height:100vh;height:100svh}
html[data-motion=on] .hero-copy{padding:118px 6% 0}
html[data-motion=on] .hero-bottom{max-width:56%}
html[data-motion=on] .hero-meta{left:6%;bottom:calc(19% + 88vw * 9 / 16 + 12px);font-size:8px;gap:8px}
html[data-motion=on] .hero-meta span:last-child{display:none}
html[data-motion=on] .hero-fan{right:5%;top:auto;bottom:calc(19% + 88vw * 9 / 16 + 34px);width:150px;transform:scale(.78);transform-origin:100% 100%}
html[data-motion=on] .hero-foot{bottom:18px}
/* Statement laptop: centred under the sentence, smaller, still blurred behind the words. */
html[data-motion=on] .laptop3d{right:50%;top:auto;bottom:9%;margin:0 -120px 0 0;--lps:.95}
}
@media(max-width:420px){html[data-motion=on] .laptop3d{--lps:.82}}
@media(max-width:900px) and (max-aspect-ratio:1/1){
/* Before/After (portrait): title, full-width frame, scopes under it, the three cards as one row at the bottom. */
html[data-motion=on] .ba-title{top:12vh}
html[data-motion=on] .ba-title>span{font-size:clamp(46px,13vw,90px)}
html[data-motion=on] .ba-frame{left:6%;right:6%;width:auto;top:calc(12vh + 30vw + 40px);transform:none}
html[data-motion=on] .ba-scopes{left:6%;right:6%;width:auto;top:calc(12vh + 30vw + 64px + 88vw * 9 / 16)}
html[data-motion=on] .ba-scopes canvas{width:100%;height:auto;aspect-ratio:300/70}
html[data-motion=on] .ba-cards{left:6%;right:6%;width:auto;bottom:11vh;display:flex;gap:8px}
html[data-motion=on] .ba-cards li{flex:1;min-height:0;padding:12px;font-size:12px}
html[data-motion=on] .ba-cards li b{font-size:9px}
html[data-motion=on] .ba-draft{display:none}
/* Beliefs: the section label sits above the note; the film-still columns stay as slim side strips. */
html[data-motion=on] .belief-note{width:min(520px,76vw)}
html[data-motion=on] .belief-col{width:15vw}
/* Experiments: the index becomes a row of chips under the heading. */
.exp-index{position:static;width:auto;flex-direction:row;flex-wrap:wrap;gap:8px;border:0;margin:18px 0 6px}
.exp-link{width:auto;padding:8px 12px;font-size:13px;border:1px solid #20211e2e;border-radius:40px}
.exp-link:hover,.exp-link:focus-visible{padding-left:12px}
.exp-link b{display:none}
.exp-peek{display:none}
}
@media(max-width:900px) and (max-aspect-ratio:1/1){
/* Personal worlds (portrait): film first, copy under it, everything inside one screen. */
.is-portrait .pw-content{grid-template-columns:1fr;align-content:center;gap:16px;padding:64px 6% 84px}
.is-portrait .pw-frame{order:-1;justify-self:start}
.is-portrait .pw .personal-art{height:min(34vh,62vw);max-width:100%}
.is-portrait .pw-copy h3{font-size:clamp(34px,10vw,56px);margin:10px 0 10px}
.is-portrait .pw-lede{font-size:14px;margin-bottom:8px}
.is-portrait .pw-desc{font-size:12px;line-height:1.55;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.is-portrait .pw-facts{margin-bottom:12px;padding-top:10px;gap:24px}
.is-portrait .pw-rail{left:6%;bottom:62px}
/* Services: the preview tile sits under the heading as a full-width frame. */
.svc-preview{position:relative;right:auto;top:auto;width:100%;margin:22px 0 8px}
/* How a film: program monitor between the label and the steps; steps and timeline use the full width. */
.how-pin.has-monitor{display:flex;flex-direction:column}
.has-monitor .tl-viewer,.has-monitor .tl-panel,.has-monitor .tl-draft{margin-right:0}
.tl-monitor{position:relative!important;right:auto!important;top:auto!important;order:1;height:24vh!important;align-self:flex-start;margin:6px 0 34px}
.how-pin .section-label{order:0}.how-pin .tl-viewer{order:2}.how-pin .tl-panel{order:3}.how-pin .tl-draft{order:4}
html[data-motion=on] .tl-line{font-size:clamp(20px,6vw,28px)}
.tl-draft{display:none}
/* Contact: the dot frame becomes a band under the actions, never behind the headline. */
.contact-dots{position:relative;right:auto;top:auto;width:100%;height:34vh;margin:0 0 40px}
}

/* Touch twins: horizontal drags reach the interactive pieces while vertical swipes keep scrolling; press feedback; hint chips. */
.strip-track .project-media,.tilt,.contact-dots,.hero-copy h1,.tools>div{touch-action:pan-y}
@media(hover:none){
.magnetic:active,.contact-cta:active,.text-button:active,.hud-talk:active,.hud-top:active,.round-link:active{transform:scale(.96)}
.hero-film:active .sheen,.project-media:active .sheen,.experiment-film:active .sheen,.personal-art:active .sheen{opacity:1}
}
.touch-hint{display:inline-block;margin-top:14px;font-size:9px;letter-spacing:.16em;padding:7px 11px;border-radius:30px;border:1px solid currentColor;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.touch-hint.show{opacity:.7;transform:none}
.touch-hint.gone{opacity:0}
html[data-motion=off] .touch-hint{display:none}

@media(max-width:900px) and (max-aspect-ratio:1/1){
/* Before/After stack sized to the screen: frame width capped so frame + scopes + cards always fit; each piece placed under the last. */
html[data-motion=on] .ba-pin{--baw:min(88vw,calc((88svh - min(30vw,200px) - 292px) * 1.257));--bat:calc(12vh + min(30vw,200px) + 40px)}
html[data-motion=on] .ba-frame{right:auto;width:var(--baw);top:var(--bat)}
html[data-motion=on] .ba-scopes{right:auto;width:var(--baw);top:calc(var(--bat) + var(--baw) * .5625 + 22px)}
html[data-motion=on] .ba-cards{right:auto;bottom:auto;width:var(--baw);top:calc(var(--bat) + var(--baw) * .7955 + 72px)}
}
/* Short landscape screens (phones on their side): desktop arrangement, sized to the height. */
@media(max-height:520px) and (min-aspect-ratio:1/1){
html[data-motion=on] .hero-copy{padding-top:86px}
html[data-motion=on] .hero-copy h1{font-size:min(10vw,19vh)}
html[data-motion=on] .hero-bottom p{font-size:11px}
html[data-motion=on] .hero-fan,html[data-motion=on] .hero-meta{display:none}
html[data-motion=on] .ba-title{top:9vh}
html[data-motion=on] .ba-title>span{font-size:15vh}
html[data-motion=on] .ba-cards{bottom:5vh;width:44vw;display:flex;gap:8px}
html[data-motion=on] .ba-cards li{flex:1;min-height:0;padding:8px;font-size:11px}
html[data-motion=on] .ba-scopes{display:none}
.pw-content{grid-template-columns:minmax(0,1fr) auto!important;padding:28px 6% 40px!important;gap:5vw!important;align-content:center}
.pw .personal-art{height:72vh!important;max-width:40vw}
.pw-frame{order:0!important}
.pw-copy h3{font-size:12vh;margin:8px 0}
.pw-lede{font-size:13px}
.pw-desc{display:none}
.pw-facts{margin-bottom:10px}
}
@media(max-width:900px){html[data-motion=off] .hero-fan,html[data-motion=off] .hero-meta{display:none}}

/* Phone GPU budget: no live blur on the rotating laptop (dimmed instead). */
@media(hover:none),(max-width:900px){.laptop3d{filter:none;opacity:.6}}

/* Portrait phones: pinned scenes keep a 76px safe zone at the bottom for the floating chapter pill and Let's talk. */
@media(max-width:900px) and (max-aspect-ratio:1/1){
html[data-motion=on] .strip-track .project-pin{padding:58px 6% 84px;justify-content:center;gap:12px}
html[data-motion=on] .strip-track .project-top{margin-bottom:6px}
html[data-motion=on] .strip-track .project-context h3{font-size:clamp(30px,8.6vw,46px);margin:10px 0 8px}
html[data-motion=on] .strip-track .project-context p{font-size:13px;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-motion=on] .strip-track .project-media{margin-top:12px}
html[data-motion=on] .strip-track .project-baseline{margin-top:10px}
html[data-motion=on] .how-pin{padding:56px 6% 84px;justify-content:center}
.tl-monitor{height:min(22svh,190px)!important;margin:4px 0 26px}
html[data-motion=on] .tl-line{font-size:clamp(19px,5.4vw,26px)}
}
@media(max-width:900px) and (max-aspect-ratio:1/1) and (max-height:700px){
html[data-motion=on] .strip-track .project-context p{-webkit-line-clamp:1}
.tl-monitor{height:17svh!important}
}
@media(max-width:900px) and (max-aspect-ratio:1/1) and (max-height:700px){
.is-portrait .pw .personal-art{height:min(28svh,52vw)}
.is-portrait .pw-content{gap:12px;padding-top:56px}
.is-portrait .pw-copy h3{font-size:clamp(30px,9vw,46px)}
.tl-monitor{height:13svh!important;margin:2px 0 18px}
html[data-motion=on] .tl-line{font-size:18px}
html[data-motion=on] .how-pin{padding-top:48px}
}
@media(max-width:900px) and (max-aspect-ratio:1/1) and (max-height:700px){
html[data-motion=on] .ba-cards li{padding:9px 10px;font-size:11px;line-height:1.3}
html[data-motion=on] .ba-pin{--baw:min(88vw,calc((88svh - min(30vw,200px) - 312px) * 1.257))}
}
@media(max-width:900px) and (max-aspect-ratio:1/1){.is-portrait .pw-rail{bottom:92px}}

/* Site cursor (added by app.js only when a mouse is in use and motion is on). */
html.custom-cursor,html.custom-cursor *{cursor:none!important}
.cursor-dot,.cursor-frame{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;transform:translate3d(-100px,-100px,0);display:none}
html.custom-cursor .cursor-dot,html.custom-cursor .cursor-frame{display:block}
.cursor-dot{z-index:41;mix-blend-mode:difference}
.cursor-dot:before{content:'';position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;transition:transform .2s ease,opacity .2s ease}
.cursor-dot[data-s=film]:before{transform:scale(0)}
.cursor-dot[data-s=text]:before{border-radius:1px;width:2px;height:20px;left:-1px;top:-10px}
.cursor-dot[data-s=off]:before{opacity:0}
.cursor-frame{z-index:40;mix-blend-mode:difference;color:#fff}
.cursor-frame .cf-in{--w:18px;--h:18px;position:absolute;left:calc(var(--w)/-2);top:calc(var(--h)/-2);width:var(--w);height:var(--h);display:flex;align-items:center;justify-content:center;transition:width .26s cubic-bezier(.3,1.4,.5,1),height .26s cubic-bezier(.3,1.4,.5,1),left .26s cubic-bezier(.3,1.4,.5,1),top .26s cubic-bezier(.3,1.4,.5,1),opacity .2s ease,transform .12s ease}
.cursor-frame[data-s=link] .cf-in{--w:40px;--h:40px}
.cursor-frame[data-s=film] .cf-in{--w:128px;--h:72px}
.cursor-frame[data-s=text] .cf-in,.cursor-frame[data-s=off] .cf-in{opacity:0}
.cursor-frame .cf-in.shut{transform:scale(.84)}
.cursor-frame .c{position:absolute;width:6px;height:6px;border:0 solid currentColor;transition:width .26s ease,height .26s ease}
.cursor-frame[data-s=link] .c{width:8px;height:8px}
.cursor-frame[data-s=film] .c{width:11px;height:11px}
.cursor-frame .tl{left:0;top:0;border-width:1px 0 0 1px}.cursor-frame .tr{right:0;top:0;border-width:1px 1px 0 0}
.cursor-frame .bl{left:0;bottom:0;border-width:0 0 1px 1px}.cursor-frame .br{right:0;bottom:0;border-width:0 1px 1px 0}
.cursor-frame .rec{position:absolute;left:15px;top:10px;width:5px;height:5px;border-radius:50%;background:#dc382b;opacity:0;transition:opacity .2s ease}
.cursor-frame .cf-label{font:500 8.5px/1 Inter,Arial,sans-serif;letter-spacing:.16em;padding-left:.16em;white-space:nowrap;opacity:0;transition:opacity .15s ease}
.cursor-frame[data-s=film] .rec,.cursor-frame[data-s=film] .cf-label{opacity:1;transition-delay:.08s}
.strip-track .project-media{user-select:none;-webkit-user-select:none}
.cursor-frame[data-s=film]{mix-blend-mode:normal;color:#f1efe7;filter:drop-shadow(0 0 2px #0008)}

/* Site search: header magnifier opens a top sheet; results update as you type. */
#search-open{width:30px;height:30px;justify-content:center;padding:0}
#search-open svg{display:block;transition:transform .3s ease}
#search-open:hover svg{transform:rotate(-12deg) scale(1.08)}
.search-dialog{max-width:none;max-height:min(86vh,760px);width:100%;margin:0;padding:30px 4.5% 38px;background:var(--paper);color:var(--ink);border:0;border-bottom:1px solid var(--line);overflow:auto}
.search-dialog::backdrop{background:#0d0e0c99;backdrop-filter:blur(3px)}
.search-dialog[open]{animation:search-drop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes search-drop{from{transform:translateY(-24px);opacity:0}}
.search-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.13em}
.search-top button{font-size:10px;letter-spacing:.13em}
.search-box{display:flex;align-items:center;gap:18px;margin-top:34px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.search-box svg{flex:none;opacity:.6}
#search-input{flex:1;min-width:0;background:none;border:0;outline:0;color:inherit;font:400 clamp(30px,4.6vw,64px)/1.05 Inter,Arial,sans-serif;letter-spacing:-.04em;padding:0}
#search-input::placeholder{color:var(--muted);opacity:.55}
#search-input::-webkit-search-cancel-button{display:none}
.search-box:focus-within{border-bottom-color:var(--red)}
.search-hint{margin:18px 0 6px;font-size:9px;letter-spacing:.16em;color:var(--muted);min-height:11px}
.search-results{list-style:none;margin:0;padding:0}
.search-results [role=option]{position:relative;display:grid;grid-template-columns:200px 1fr 30px;gap:4px 28px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:padding .25s ease,color .2s ease}
.search-results [role=option] small{grid-row:span 2;font-size:9px;letter-spacing:.16em;color:var(--muted);padding-top:6px}
.search-results [role=option] strong{font-weight:500;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em}
.search-results [role=option] span{grid-column:2;font-size:13px;line-height:1.5;color:var(--muted)}
.search-results [role=option] b{grid-row:1/span 2;grid-column:3;font-weight:400;justify-self:end;opacity:0;transform:translate(-6px,6px);transition:opacity .2s ease,transform .25s ease}
.search-results [role=option][aria-selected=true]{padding-left:14px}
.search-results [role=option][aria-selected=true]:before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:2px;background:var(--red)}
.search-results [role=option][aria-selected=true] b{opacity:1;transform:none;color:var(--red)}
.search-results mark{background:none;color:var(--red)}
.search-chips{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.search-chips button{font-size:12px;padding:10px 16px;border:1px solid var(--line);border-radius:40px;transition:border-color .2s ease,color .2s ease}
.search-chips button:hover,.search-chips button:focus-visible{border-color:var(--red);color:var(--red)}
.search-flash{outline:1px solid var(--red);outline-offset:8px;animation:search-flash 1.8s ease forwards}
@keyframes search-flash{0%,60%{outline-color:var(--red)}100%{outline-color:transparent}}
html[data-motion=off] .search-dialog[open],html[data-motion=off] .search-flash{animation:none}
@media(max-width:700px){.search-dialog{max-height:100svh;height:100svh;padding:22px 6% 30px}.search-results [role=option]{grid-template-columns:1fr 24px}.search-results [role=option] small{grid-row:auto;padding:0}.search-results [role=option] span{grid-column:1}.search-results [role=option] b{grid-row:1/span 3;grid-column:2}}
.search-dialog{background:var(--paper)!important;color:var(--ink)!important}
@media(max-width:700px){.search-dialog{height:100svh!important;max-height:100svh!important;inset:0!important}}

/* Fixed header after the intro, on clear glass (.hdr-glass, behind). The header itself blends with 'difference' in white, so its
   text and icons invert against whatever is behind them; .header-dots (a non-blended copy) shows only the red logo dot. */
html header,html:not([data-motion=off]) header{position:fixed!important;top:0!important;z-index:20!important;transition:opacity .5s ease,padding .35s ease,visibility 0s}
html.intro-live:not(.intro-gone) header,html.intro-live:not(.intro-gone) .hdr-glass{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
header:not(.header-dots){mix-blend-mode:difference;color:#fff}
header:not(.header-dots) *{color:#fff!important}
header:not(.header-dots) .header-center span{opacity:.6}
header:not(.header-dots) .menu-lines i{background:#fff!important}
header:not(.header-dots) .logo i{visibility:hidden}
header.header-dots{z-index:21!important;pointer-events:none;mix-blend-mode:normal}
header.header-dots *{visibility:hidden}
header.header-dots .logo,header.header-dots .logo i{visibility:visible;color:transparent!important}
header.header-dots .logo i{background:var(--red)}
.hdr-glass{position:fixed;z-index:19;left:0;right:0;top:0;height:96px;pointer-events:none;opacity:0;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px) saturate(1.5) brightness(1.03);backdrop-filter:blur(18px) saturate(1.5) brightness(1.03);-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);transition:opacity .45s ease}
html.hdr-scrolled .hdr-glass{opacity:1}
html[data-theme=dark] .hdr-glass{background:rgba(255,255,255,.04)}
html.hdr-scrolled header{padding-top:16px;padding-bottom:16px}
html.hdr-scrolled .header-center{opacity:0;pointer-events:none}
.header-center{transition:opacity .35s ease}
@media(hover:none),(pointer:coarse){.hdr-glass{height:80px;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}}
html[data-motion=off] header,html[data-motion=off] .hdr-glass{transition:none}
@media(max-width:900px){html.hdr-scrolled header{padding-top:12px;padding-bottom:12px}}


/* ===== Hero blank spaces: "the cutting-room poster" (herofill.js). Hero only. Arrivals are backwards-filled keyframes so the
   scroll-driven exit (--hf-k from heroFillDraw) owns the resting values; nothing transitions against the scroll. ===== */
.hero-pin{--hf-k:1}
.hf-dots{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:var(--hf-k)}
.hf-disc{--ds:min(30vw,50vh);position:absolute;z-index:0;width:var(--ds);height:var(--ds);right:calc(var(--ds) / -2);top:calc(68% - var(--ds) / 2);border-radius:50%;pointer-events:none;
 background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-blend-mode:multiply;
 transform:translate(var(--dx,0px),calc(var(--dy,0px) + (1 - var(--hf-k)) * 75vh))}
/* Timeline */
.hf-timeline{position:absolute;z-index:0;left:4.5%;right:42.5%;bottom:13%;height:100px;color:var(--muted);font-size:8px;letter-spacing:.14em;font-weight:500;user-select:none;-webkit-user-select:none;
 opacity:var(--hf-k);transform:translateX(calc(var(--hf-out,0) * 14vw))}
.hf-timeline.off{display:none}
.hf-ruler{position:relative;height:15px;margin-left:46px;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.hf-ruler span{position:absolute;top:0;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.hf-ruler span:first-child{transform:none}
.hf-ruler span:before{content:'';position:absolute;left:50%;bottom:-5px;width:1px;height:4px;background:currentColor;opacity:.6}
.hf-ruler span:first-child:before{left:0}
.hf-lanes{position:relative;margin-left:46px;touch-action:pan-y}
.hf-lane{position:relative}
.hf-v1{height:40px;margin-top:9px}
.hf-luma{height:24px;margin-top:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.hf-lab{position:absolute;left:-46px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted)}
.hf-clip{position:absolute;top:0;bottom:0;padding:0;border:0;border-radius:3px;overflow:hidden;cursor:pointer;box-shadow:inset -2px 0 0 var(--paper);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,filter .28s}
.hf-clip span{position:absolute;left:6px;top:5px;font-size:8px;letter-spacing:.12em;font-weight:600;color:#fff;opacity:.75}
.hf-clip:hover,.hf-clip.on,.hf-clip:focus-visible{transform:translateY(-4px);box-shadow:inset -2px 0 0 var(--paper),0 10px 22px -8px #0006;filter:saturate(1.15) brightness(1.08);z-index:2}
.hf-clip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hf-luma svg{position:absolute;inset:0;width:100%;height:100%}
.hf-luma path{fill:color-mix(in srgb,var(--ink) 30%,transparent)}
.hf-head{position:absolute;left:0;top:-30px;bottom:0;width:1px;background:var(--red);pointer-events:none;will-change:transform}
.hf-flag{position:absolute;top:0;left:0;transform:translateX(-50%);background:var(--red);color:#fff;font-size:8px;font-weight:600;letter-spacing:.08em;padding:2px 5px;border-radius:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hf-timeline.scrub .hf-clip{transition:none}
/* Badge */
.hf-badge{--s:120px;position:absolute;z-index:3;width:var(--s);height:var(--s);padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;opacity:var(--hf-k)}
.hf-badge.off{display:none}
.hf-ring{width:100%;height:100%;overflow:visible;animation:hf-spin 22s linear infinite}
.hf-ring text{font-size:7.4px;letter-spacing:.18em;font-weight:600;fill:currentColor}
.hf-core{position:absolute;inset:27%;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hf-core i{font-style:normal;font-size:12px;padding-left:3px}
.hf-badge:hover .hf-core,.hf-badge:focus-visible .hf-core{transform:scale(1.1)}
.hf-badge:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@keyframes hf-spin{to{transform:rotate(360deg)}}
/* The vertical label moves up out of the disc's way. */
@media(min-width:901px){.hero-vertical{top:16%}}
/* Slate */
.title-line.second{position:relative}
.hf-slate{position:absolute;left:0;top:50%;transform:translateY(-42%);width:min(calc(12vw - 28px),150px);display:block;color:var(--ink);font:500 8px/1.2 Inter,sans-serif;letter-spacing:.1em;font-variation-settings:normal;pointer-events:auto}
.hf-arm{display:block;height:17px;border:1.5px solid var(--ink);border-radius:2px 2px 0 0;background:repeating-linear-gradient(-55deg,var(--ink) 0 9px,var(--paper) 9px 18px);transform-origin:1px 100%;transform:rotate(-17deg)}
.hf-slate.clap .hf-arm{animation:hf-clap .5s cubic-bezier(.5,0,.2,1) forwards}
@keyframes hf-clap{0%{transform:rotate(-17deg)}55%{transform:rotate(0)}72%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.hf-board{display:block;margin-top:2px;border:1.5px solid var(--ink);padding:3px 7px}
.hf-row{display:flex;justify-content:space-between;align-items:baseline;gap:4px;padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.hf-row:last-child{border-bottom:0}
.hf-row b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.hf-row span{color:var(--muted)}
.hf-row.hf-name{justify-content:center;font-weight:700;letter-spacing:.16em}
/* Clock */
.hf-clock{position:absolute;z-index:2;right:4.5%;top:20vh;display:flex;align-items:baseline;gap:9px;font-size:9px;letter-spacing:.16em;color:var(--muted);opacity:var(--hf-k);perspective:200px}
.hf-clock b{font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.08em;font-variant-numeric:tabular-nums;display:inline-block}
.hf-clock b.flip{animation:hf-flip .5s cubic-bezier(.2,.8,.2,1)}
@keyframes hf-flip{from{transform:rotateX(90deg);opacity:.2}}
/* Highlighter under "stay." */
.hero-copy .second em{position:relative}
.hf-hl{position:absolute;left:-3%;bottom:.04em;width:106%;height:.3em;z-index:-1;overflow:visible;pointer-events:none}
.hf-hl path{fill:none;stroke:var(--red);stroke-opacity:.2;stroke-width:15;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
/* Arrival (motion on, no reduced motion): hidden until html.hf-in, then each piece plays once. */
@media(prefers-reduced-motion:no-preference){
 html[data-motion=on]:not(.hf-in) :is(.hf-dots,.hf-badge,.hf-clock,.hf-slate,.hf-clip,.hf-ruler,.hf-luma,.hf-head){opacity:0}
 html[data-motion=on]:not(.hf-in) .hf-disc{translate:0 50vh}
 html[data-motion=on]:not(.hf-in) .hf-hl path{stroke-dashoffset:1}
 html.hf-in .hf-dots{animation:hf-fade 1.2s backwards}
 html.hf-in .hf-disc{animation:hf-rise 1.4s .15s cubic-bezier(.16,.8,.2,1) backwards}
 html.hf-in :is(.hf-ruler,.hf-luma,.hf-head){animation:hf-fade .6s .45s backwards}
 html.hf-in .hf-clip{animation:hf-drop .55s calc(.55s + var(--i) * 55ms) cubic-bezier(.2,.8,.2,1) backwards}
 html.hf-in .hf-slate{animation:hf-slide .7s .6s cubic-bezier(.2,.8,.2,1) backwards}
 html.hf-in .hf-clock{animation:hf-fade .8s .9s backwards}
 html.hf-in .hf-badge{animation:hf-pop .8s 1.1s cubic-bezier(.2,.8,.2,1) backwards}
 html.hf-in .hf-hl path{animation:hf-draw .9s 1.35s cubic-bezier(.6,0,.2,1) backwards}
}
@keyframes hf-fade{from{opacity:0}}
@keyframes hf-rise{from{translate:0 50vh}}
@keyframes hf-drop{from{opacity:0;translate:0 -18px}}
@keyframes hf-slide{from{opacity:0;translate:-12px 0}}
@keyframes hf-pop{from{opacity:0;scale:.6}}
@keyframes hf-draw{from{stroke-dashoffset:1}}
html[data-motion=off] .hf-ring{animation:none}
@media(prefers-reduced-motion:reduce){.hf-ring{animation:none}.hf-slate.clap .hf-arm{animation:none;transform:rotate(0)}}
/* Smaller screens: slate, clock and badge give way; the disc and timeline stay, sized down. */
@media(max-width:900px){.hf-slate,.hf-clock,.hf-badge{display:none}.hf-disc{--ds:min(70vw,44vh);top:calc(60% - var(--ds) / 2)}}
@media(max-width:900px) and (max-aspect-ratio:1/1){.hf-disc{--ds:46vw;top:calc(23% - var(--ds) / 2)}.hf-timeline{left:6%;right:6%;bottom:max(46px,calc(13% - 78px));height:60px}.hf-ruler{display:none}.hf-v1{height:26px;margin-top:0}.hf-luma{height:16px}.hf-head{top:-6px}.hf-flag{display:none}.hf-lanes,.hf-ruler{margin-left:34px}.hf-lab{left:-34px}}
@media(max-height:520px) and (min-aspect-ratio:1/1){.hf-timeline,.hf-disc{display:none}}
/* Hero top band: the site ruler (herofill.js). Ticks rise from a hairline baseline; chapter numbers above, timecodes below. */
.hf-sr{position:absolute;z-index:3;left:4.5%;right:4.5%;top:110px;height:34px;color:var(--muted);font-size:8px;letter-spacing:.12em;font-weight:500;opacity:var(--hf-k);user-select:none;-webkit-user-select:none}
.hf-sr.off{display:none}
.hf-sr-track{position:absolute;left:0;right:0;top:0;height:24px;cursor:pointer;border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.hf-sr-ticks{position:absolute;left:0;bottom:0;width:100%;height:8px;overflow:visible}
.hf-sr-ticks path{stroke:color-mix(in srgb,var(--ink) 35%,transparent);stroke-width:1;fill:none}
.hf-sr-labels{position:absolute;left:0;right:0;top:27px;height:10px;pointer-events:none}
.hf-sr-labels span{position:absolute;transform:translateX(-50%);font-variant-numeric:tabular-nums;opacity:.8}
.hf-sr-labels span:first-child{transform:none}.hf-sr-labels span:last-child{transform:translateX(-100%)}
.hf-sr-marks{position:absolute;inset:0}
.hf-sr-m{position:absolute;bottom:0;width:18px;height:24px;margin-left:-9px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.hf-sr-m span{font-size:8px;font-weight:600;letter-spacing:.06em;line-height:1;margin-bottom:3px;transition:color .2s,transform .25s cubic-bezier(.2,.8,.2,1);font-variant-numeric:tabular-nums}
.hf-sr-m i{display:block;width:1px;height:9px;background:currentColor;transition:height .25s cubic-bezier(.2,.8,.2,1),background .2s}
.hf-sr-m:hover,.hf-sr-m.on,.hf-sr-m:focus-visible{color:var(--ink)}
.hf-sr-m:hover span,.hf-sr-m.on span,.hf-sr-m:focus-visible span{transform:translateY(-2px)}
.hf-sr-m:hover i,.hf-sr-m.on i,.hf-sr-m:focus-visible i{height:13px;width:1.5px}
.hf-sr-m:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.hf-sr-play{position:absolute;left:0;top:2px;bottom:-12px;width:1px;background:var(--red);pointer-events:none;will-change:transform}
.hf-sr-play b{position:absolute;top:100%;left:0;transform:translateX(-50%);background:var(--red);color:#fff;font-size:7.5px;font-weight:600;letter-spacing:.06em;padding:1px 4px;border-radius:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hf-sr-ghost{position:absolute;left:0;top:-2px;bottom:0;width:1px;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
.hf-sr.hot .hf-sr-ghost{opacity:.55}
.hf-sr-tip{position:absolute;bottom:calc(100% + 4px);left:0;white-space:nowrap;background:var(--paper);color:var(--ink);font-size:8px;font-weight:600;letter-spacing:.12em;padding:2px 6px;border-radius:2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent);text-transform:uppercase;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
 html[data-motion=on]:not(.hf-in) :is(.hf-sr-ticks,.hf-sr-labels,.hf-sr-m,.hf-sr-play){opacity:0}
 html.hf-in .hf-sr-ticks{animation:hf-wipe .8s cubic-bezier(.6,0,.2,1) backwards}
 html.hf-in .hf-sr-labels{animation:hf-fade .6s .35s backwards}
 html.hf-in .hf-sr-m{animation:hf-pop .5s .5s cubic-bezier(.2,.8,.2,1) backwards}
 html.hf-in .hf-sr-play{animation:hf-drop .6s .75s cubic-bezier(.2,.8,.2,1) backwards}
}
@keyframes hf-wipe{from{clip-path:inset(0 100% 0 0)}}
@media(max-width:900px){.hf-sr{left:6%;right:6%;height:44px}.hf-sr-track{height:30px}.hf-sr-labels,.hf-sr-m span,.hf-sr-tip{display:none}.hf-sr-m{height:30px;pointer-events:none}.hf-sr-play{bottom:-4px}.hf-sr-play b{display:none}}
/* Short laptop screens (e.g. 1280x720): the band is thin, so the ruler keeps ticks, markers and the hover label only. */
.hf-sr.tight{height:18px}.hf-sr.tight .hf-sr-track{height:16px}.hf-sr.tight :is(.hf-sr-labels,.hf-sr-m span,.hf-sr-play b){display:none}.hf-sr.tight .hf-sr-m{height:16px}.hf-sr.tight .hf-sr-m i{height:7px}.hf-sr.tight .hf-sr-play{bottom:-2px}
/* Compact timeline (tight screens): shots only, with the playhead. */
.hf-timeline.compact .hf-ruler,.hf-timeline.compact .hf-luma{display:none}.hf-timeline.compact .hf-v1{margin-top:6px}.hf-timeline.compact .hf-head{top:-4px}.hf-timeline.compact .hf-flag{top:auto;bottom:100%;margin-bottom:2px}
/* Sound toggle (sound.js): three thin bars; flat when off, gently moving when on. */
#sound{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.snd-bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.snd-bars i{display:block;width:2px;height:5px;background:currentColor;border-radius:1px;opacity:.4;transition:height .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.snd-bars i:nth-child(2){height:9px}.snd-bars i:nth-child(3){height:6px}
html.sound-on .snd-bars i{opacity:1}
html.sound-on .snd-bars i:nth-child(1){height:7px}html.sound-on .snd-bars i:nth-child(2){height:12px}html.sound-on .snd-bars i:nth-child(3){height:9px}
@media(prefers-reduced-motion:no-preference){html.sound-on[data-motion=on] .snd-bars i{animation:snd-bar 1.4s ease-in-out infinite alternate}html.sound-on[data-motion=on] .snd-bars i:nth-child(2){animation-delay:-.5s}html.sound-on[data-motion=on] .snd-bars i:nth-child(3){animation-delay:-.9s}}
@keyframes snd-bar{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.snd-bars i{transform-origin:50% 100%}
#sound:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}

/* ===== Phone native pass (6 Nov 2026): one calm bottom bar, a roomy header, nothing clipped or colliding. ===== */
@media(max-width:600px){
 /* Header: logo left, four even 36px controls right; INDEX keeps its name for screen readers but shows only the lines. */
 .header-actions{gap:6px}
 .header-actions button{min-width:36px;min-height:36px;justify-content:center}
 #menu-open{font-size:0;letter-spacing:0;gap:0}
 /* Bottom bar: chapter pill on the left, back-to-top and Let's talk on the right, all 36px tall, one row, safe-area aware. */
 .chapter-indicator{left:12px;right:auto;transform:none;bottom:calc(12px + env(safe-area-inset-bottom));height:36px;padding:0 12px;gap:9px;font-size:8px;max-width:calc(100vw - 24px - 92px - 52px);box-sizing:border-box}
 #chapter-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #page-progress{display:none}
 .hud-talk{bottom:calc(12px + env(safe-area-inset-bottom));right:12px;height:36px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}
 html.hud-on .hud-talk{right:12px}
 .hud-top{bottom:calc(12px + env(safe-area-inset-bottom));right:calc(12px + 92px + 8px);width:36px;height:36px}
 /* Hero: the corner fan and the foot labels gave way to the bottom bar; the timeline sits clear of it. */
 .hero-fan,.hero-foot{display:none!important}
 .hf-timeline{bottom:calc(64px + env(safe-area-inset-bottom))!important}
 /* Work: outline numbers no longer sit on the titles; the caption stacks. */
 .outline-number{display:none}
 .project-caption{flex-direction:column;align-items:flex-start;gap:12px}
 /* Personal: the 01-02-03 rail sits above the bottom bar. */
 .is-portrait .pw-rail{bottom:calc(62px + env(safe-area-inset-bottom))!important}
 /* Contact: the longest word fits the width. */
 .contact h2{font-size:15vw}
}
@media(max-width:900px) and (max-aspect-ratio:1/1){
 /* 04: the label reads on its own chip above the drifting stills, which sit further back. */
 .belief-stage .scene-label{position:relative;z-index:2;display:inline-block;max-width:78vw;padding:6px 10px;background:#161715e6;border-radius:2px;white-space:normal}
 html[data-motion=on] .belief-col img{opacity:.3}
 /* Personal worlds: the film is centred and large, the copy under it. */
 .is-portrait .pw-frame{justify-self:center}
 .is-portrait .pw .personal-art{height:min(36svh,86vw);max-width:86vw}
}
/* Landscape phones: the hero pin is one screen tall (the 600px desktop minimum pushed the showreel below the fold). */
@media(max-height:520px) and (min-aspect-ratio:1/1){.hero-pin{min-height:0!important}.hero-foot{display:none!important}}
/* Services rising over Process: its stage shows the paper colour, not the dark stage backdrop (was a black band). */
html[data-motion=on] .chapter-stage[data-transition=rows]{background:var(--paper)}
/* Before/After draft label: above the bottom bar instead of under Let's talk. */
html[data-motion=on] .ba-draft{bottom:calc(22px + 34px + 18px)}
@media(max-width:600px){html[data-motion=on] .ba-draft{bottom:calc(60px + env(safe-area-inset-bottom))}}