/* Portrait-led opening: the image is the hero, the introduction gets its own stage. */
@font-face{font-family:Display;src:url('assets/anton-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--orange:#ff7900;--copper:#ff7900;--paper:#fff2df;--ink:#18120e;--white:#fff6e9}
.header{border-top:6px solid var(--orange);height:106px;background:linear-gradient(#18120fe8,#18120f00)}
.scrolled .header{height:84px;background:#18120ff5}
.header-cta{background:var(--orange);color:var(--ink);padding:12px 19px;border:0;border-radius:30px}
.hero{height:100svh;min-height:760px;max-height:1200px;padding:0;background:radial-gradient(ellipse at 90% 70%,#713512 0%,#29180e 42%,#160f0b 80%)}
.hero-art{inset:0;height:100%;transform:translate3d(0,var(--hero-drift,0px),0);overflow:visible;isolation:auto}
.hero-art>#reaction-poster{inset:auto;top:0;left:50%;width:auto;max-width:none;height:100%;object-fit:contain;object-position:center;transform:translate3d(calc(-66% + var(--portrait-x,0px)),var(--portrait-y,0px),0);mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 87%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 87%,transparent 100%)}
.hero-art-shade{background:linear-gradient(0deg,#18120f75,transparent 30%,transparent 88%,#18120f55);z-index:1}
.portrait-light{background:radial-gradient(ellipse at 50% 90%,#ff790028,transparent 60%)}
.hero-glass{position:absolute;z-index:2;pointer-events:none;width:min(90vw,1500px);mix-blend-mode:screen;transition:transform 1.8s var(--ease);will-change:transform}
.hero-glass img{width:100%;height:auto}
.hero-glass-left{left:-28vw;bottom:-8%;transform:translate3d(var(--foreground-x,0px),var(--foreground-drift,0px),0) rotate(-8deg)}
.hero-glass-right{width:min(83vw,1400px);right:-27vw;bottom:-9%;transform:translate3d(calc(var(--foreground-x,0px) * -1),calc(var(--foreground-drift,0px) * .7),0) rotate(8deg)}
.hero-glass-right img{transform:scaleX(-1)}
.hero-footer{left:var(--gutter);right:var(--gutter);bottom:27px;margin:0;padding:0;border:0;justify-content:center;z-index:5;pointer-events:none}
.hero-footer .scroll-cue{display:flex;pointer-events:auto;color:var(--ink);background:var(--orange);border-radius:40px;padding:11px 18px;gap:22px;font-size:12px}
.hero-footer .scroll-cue span{display:flex;animation:scroll-nudge 2s ease-in-out infinite}
.hero-pause{top:126px;right:var(--gutter);bottom:auto;z-index:6;font-size:12px}
@keyframes scroll-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.opening{background:var(--orange);color:var(--ink);padding-top:100px;padding-bottom:100px;position:relative;z-index:3}
.opening-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:6%;align-items:center}
.opening .hero-kicker{color:var(--ink);margin-bottom:28px;max-width:490px;font-size:12px;letter-spacing:.04em}
.opening .status-dot{background:var(--ink)}
.opening h1{font-size:clamp(48px,5.4vw,88px);font-weight:600;letter-spacing:-.065em;line-height:1.04}
.opening h1 span,.opening h1 em{display:block;white-space:nowrap}
.opening h1 em{font-size:1.08em;color:var(--ink);line-height:1.12}
.opening-signature{display:block;margin-top:32px;font-size:24px;font-weight:500}
.opening-signature em{font-size:28px}
.opening .hero-intro{max-width:470px;margin:0;font-size:clamp(19px,1.7vw,25px);line-height:1.5;color:var(--ink);letter-spacing:-.025em}
.opening .hero-links{gap:22px;flex-wrap:wrap;margin-top:30px}
.opening .primary{background:var(--ink);color:var(--white);border-color:var(--ink)}
.opening .primary:before{background:var(--paper)}
.opening .primary:hover{background:var(--paper);color:var(--ink)}
.opening .film-link>span{border-color:#18120f80}
.opening .film-link:hover>span{background:var(--ink);color:var(--orange)}
.opening-note{color:#4e2a0e;font-size:14px;line-height:1.7;margin-top:26px!important;max-width:350px}
.light{background:var(--paper)}
.light h2{font-weight:500}
.light h2 em{color:var(--ink)}
.light .intro-copy>p:not(.lead),.light .practice-row p,.light .about-copy p,.light .service-body p{color:#554436}
.opening.light{background:var(--orange)}
.intro{padding-top:95px}
.element{transition:transform .5s var(--ease),background .4s,color .4s,border-color .4s;transform-style:preserve-3d}
.element.selected{background:var(--orange);border-color:var(--orange)}
.element.selected .element-state{transform:rotate(180deg);transition:transform .5s var(--ease)}
.element-symbol{transform-origin:center;position:relative;z-index:1}
.element.is-reacting:after{content:'';position:absolute;inset:0;border:3px solid #ffe6c2;pointer-events:none;animation:element-flash .65s ease-out both}
@keyframes element-flash{from{opacity:1;transform:scale(.87)}to{opacity:0;transform:scale(1.025)}}
@media(min-width:901px) and (hover:hover) and (pointer:fine){.element:hover{transform:perspective(700px) rotateX(var(--element-tilt-y,0deg)) rotateY(var(--element-tilt-x,0deg)) translateY(-5px)}}
.contact{background:var(--orange);color:var(--ink);--rule:#18120f40}
.contact:before{display:none}
.contact .status-dot{background:var(--ink)}
.contact h2,.contact h2 em{color:var(--ink)}
.contact h2{font-weight:500}
.contact-main p{color:#3b2618}
.contact .primary{background:var(--ink);color:var(--white)}
.contact .primary:hover{background:var(--paper);color:var(--ink)}
.contact .primary:before{background:var(--paper)}
.contact .footer-identity>span{color:#713807}
.contact .footer-bottom{color:#3c2412}
.contact .footer-bottom button,.contact .footer-bottom a{color:var(--ink)}
.contact .footer-identity .logo{filter:invert(1);mix-blend-mode:multiply;opacity:1}
.reduced .hero-art>#reaction-poster{transform:translateX(-66%)!important}
.reduced .hero-glass-left{transform:rotate(-8deg)!important}
.reduced .hero-glass-right{transform:rotate(8deg)!important}
.reduced .hero-footer .scroll-cue span{animation:none}
.reduced .element{transform:none!important}
@media(min-width:761px) and (max-width:1100px){
 .hero{min-height:720px}.hero-glass{width:110vw}.hero-glass-left{left:-41vw;bottom:-6%}.hero-glass-right{right:-44vw;bottom:-9%}
 .opening-grid{gap:5%;grid-template-columns:1.15fr 1fr}.opening h1{font-size:5vw}.opening .hero-intro{font-size:20px}.opening .hero-links{gap:12px}.opening .hero-links .pill{font-size:14px;padding:14px 18px;gap:18px}.opening .film-link{font-size:14px}
}
@media(max-width:760px){
 .header,.scrolled .header{height:80px}
 .hero{height:92svh;min-height:650px;max-height:950px;display:block;padding:0}
 .hero-art,html[lang=en] .hero-art{inset:60px 0 0;height:calc(100% - 60px);transform:none}
 .hero-art>#reaction-poster{inset:auto;top:0;left:50%;width:auto;height:100%;object-fit:contain;transform:translateX(-66%);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 88%,transparent)}
 .hero-art-shade{background:linear-gradient(0deg,#18120f90,transparent 40%)}
 .hero-glass{width:145vw;max-width:1000px}.hero-glass-left{left:-68vw;bottom:-3%}.hero-glass-right{right:-72vw;bottom:-5%}
 .hero-footer{position:absolute;bottom:22px;width:auto;left:20px;right:20px;justify-content:center;padding:0;margin:0}
 .hero-pause{top:35px;right:20px;font-size:11px}
 .opening{padding:62px var(--gutter)}
 .opening-grid{grid-template-columns:1fr;gap:28px}
 .opening .hero-kicker{max-width:330px;font-size:11px;margin-bottom:22px;line-height:1.6}
 .opening .hero-kicker .status-dot{margin-top:6px}
 .opening h1{font-size:clamp(34px,9.8vw,70px);font-weight:600;letter-spacing:-.06em}
 .opening h1 em{font-size:1.11em;line-height:1.12}
 .opening-signature{margin-top:24px;font-size:21px}.opening-signature em{font-size:25px}
 .opening .hero-intro,html[lang=en] .opening .hero-intro{margin:0;max-width:none;font-size:20px;line-height:1.55}
 .opening .hero-links{margin-top:25px;gap:12px}.opening .hero-links .film-link{min-height:48px}.opening-note{margin-top:14px!important;font-size:14px;max-width:350px}
 .intro{padding-top:65px}
 .contact .footer-identity>span{color:#713807}
}
@media(max-width:374px){.opening h1{font-size:9.6vw}.opening .hero-intro,html[lang=en] .opening .hero-intro{font-size:19px}}
@media(prefers-reduced-motion:reduce){.hero-art>#reaction-poster{transform:translateX(-66%)!important}.hero-glass-left{transform:rotate(-8deg)!important}.hero-glass-right{transform:rotate(8deg)!important}.hero-footer .scroll-cue span{animation:none}.element{transform:none!important}}

/* Final direction confirmed by Kris: black, white and vivid orange; heavy display type. */
:root{--ink:#080808;--paper:#fff7ef;--white:#fff7ef;--orange:#ff7900;--copper:#ff7900;--rule:#ffffff30;--display:Display,Impact,'Arial Narrow',sans-serif}
body,.light,.opening.light,.chemistry,.contact{background:#050505;color:var(--white);--rule:#ffffff30}
.header{background:linear-gradient(#050505f2,#05050500)}
.scrolled .header,.mobile-menu{background:#050505f7}
.hero{background:radial-gradient(ellipse at 80% 65%,#41200e 0%,#0b0704 55%,#000 90%)}
.hero-art-shade{background:linear-gradient(0deg,#0009,transparent 35%,transparent 85%,#0008)}
.hero-footer .scroll-cue{background:var(--orange);color:#080808}
.hero-pause{background:#0007;color:white;border-color:#ffffff50}
.opening{padding-top:100px;padding-bottom:105px}
.opening-grid{grid-template-columns:1fr;gap:55px}
.opening-title{text-align:center}
.opening .hero-kicker{justify-content:center;margin:0 auto 35px;color:#d1d1d1;max-width:none;font-size:13px}
.opening .status-dot{background:var(--orange)}
.opening h1{font-family:var(--display);font-weight:400;font-size:clamp(62px,10.8vw,168px);line-height:1.06;letter-spacing:-.018em;text-transform:uppercase}
.opening h1 em{font:inherit;font-style:normal;color:var(--orange);line-height:1.06}
.opening-signature{font-family:var(--display);font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin-top:32px;color:var(--white)}
.opening-signature em{font:inherit;color:var(--orange)}
.opening-body{display:grid;grid-template-columns:1.25fr 1fr;gap:20px 9%;align-items:center;max-width:1110px;width:100%;margin:auto}
.opening .hero-intro,html[lang=en] .opening .hero-intro{color:#ececec;font-size:clamp(21px,1.8vw,27px);line-height:1.5;max-width:600px;margin:0}
.opening .hero-links{justify-content:end;margin:0;gap:22px;flex-wrap:wrap}
.opening .primary,.contact .primary{background:var(--orange);color:#080808;border-color:var(--orange)}
.opening .primary:hover,.contact .primary:hover{background:var(--white);color:#080808}
.opening .primary:before,.contact .primary:before{background:var(--white)}
.opening .film-link{color:white}
.opening .film-link>span{border-color:#ffffff70}
.opening .film-link:hover>span{background:var(--orange);color:#080808;border-color:var(--orange)}
.opening-note{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:22px;color:#adadad;max-width:none;margin-top:12px!important;font-size:14px}
.light h2,.chem-heading h2,.contact h2,.cinema-heading h2{font-family:var(--display);font-weight:400;font-size:clamp(49px,6.4vw,100px);line-height:1.06;letter-spacing:-.015em;text-transform:uppercase}
.light h2 em,.chem-heading h2 em,.contact h2 em,.cinema-heading h2 em{font:inherit;color:var(--orange);font-style:normal}
.light h3,.reaction-result h3{font-weight:600;color:var(--white)}
.light .statement{font-size:clamp(48px,5.8vw,90px);line-height:1.08}
.light .intro-copy>p:not(.lead),.light .practice-row p,.light .about-copy p,.light .service-body p,.light .section-heading p,.light .project-label p{color:#c1c1c1}
.light .project-label .micro,.light .practice-row>span,.light .service-body .micro,.light .service summary>span,.about-sign,.about-numbers small,.light .engagement-note{color:#b9b9b9}
.light .about-copy .personal-line{color:#f1ac71}
.light .gallery-item figcaption,.light .about-personal .gallery-item figcaption,.light .portfolio-film p,.light .portfolio-film .micro,.light .case-more-heading p{color:#c1c1c1}
.work-slider-top,.work-tabs>button{color:#b9b9b9}
.work-slider-controls{border-color:#ffffff40}
.work-tabs>button[aria-current=true]{color:var(--white)}
.work-tabs>button:before,.work-tab-progress{background:var(--orange)}
.work-step,.round-button{border-color:#ffffff55;color:var(--white)}
.work-step:hover,.round-button:hover{background:var(--orange);color:#080808}
.work-step:disabled{color:var(--white)}
.work-archive>summary{color:var(--white)}
.work-archive,.expertise-strip,.services,.service,.case-gallery{border-color:var(--rule)}
.chemistry:before{display:none}
.chem-heading h2{font-size:clamp(48px,5.5vw,86px)}
.chem-heading p,.reaction-result>p{color:#c9c9c9}
.element{background:#101010;border-color:#ffffff50;color:white}
.element.selected{background:var(--orange);color:#080808;border-color:var(--orange)}
.element-symbol{font-family:var(--display);font-size:clamp(44px,5.8vw,80px);font-weight:400;letter-spacing:0}
.chem-still-life figcaption{color:#bdbdbd}
.result-top,.chem-bottom{color:#b9b9b9}
.result-equation{font-family:var(--display);font-size:65px;font-weight:400;letter-spacing:0}
.result-equation i{color:var(--orange)}
.about-title h2{font-size:clamp(90px,11vw,170px);line-height:1.02}
.about-title h2 em{font-size:1em}
.about-numbers strong,.about-numbers strong>span{color:var(--orange)}
.signature-line{background:var(--orange)}
.contact h2{font-size:clamp(70px,10vw,160px);color:white}
.contact h2 em{color:var(--orange)}
.contact-main p{color:#cdcdcd}
.contact .status-dot{background:var(--orange)}
.contact .footer-identity>span{color:var(--white);font-family:var(--display);font-size:clamp(48px,8vw,125px);text-transform:uppercase;letter-spacing:0}
.contact .footer-identity em{font:inherit;color:var(--orange)}
.contact .footer-identity .logo{filter:none;mix-blend-mode:normal;opacity:1}
.contact .footer-bottom,.contact .footer-bottom button,.contact .footer-bottom a{color:#bdbdbd}
#detail,#detail.project-open{background:#080808;color:var(--white);--rule:#ffffff30}
.dialog-bar,.project-open .dialog-bar{background:#080808f5;color:white;border-color:#ffffff30}
.dialog-bar>span{color:#ccc}
.case-experience .case-intro p,.case-experience .case-intro .micro,.case-experience .case-intro .case-role,.case-sections p,.case-more-heading p,.case-approach p{color:#c1c1c1}
.case-experience .case-intro h3,.case-experience .reel-heading h3,.case-cover h2,.case-approach h3,.case-more-heading h3{font-family:var(--display);font-weight:400;letter-spacing:0;text-transform:uppercase}
.case-reel,.campaign-film,.case-end,.case-film,.lab-films{background:#111;color:var(--white)}
.case-end>p,.portfolio-film p,.portfolio-film .micro,.case-end .micro{color:#d1d1d1}
.case-end .pill{background:var(--orange);color:#080808}
.case-gallery .gallery-item figcaption{color:#ccc}
.case-sections section,.case-approach,.case-intro,.case-end{border-color:#ffffff30}
@media(max-width:760px){
 .opening{padding-top:65px;padding-bottom:60px}.opening-grid{gap:32px}.opening .hero-kicker{font-size:11px;max-width:330px;margin-bottom:26px}
 .opening h1{font-size:clamp(32px,10.7vw,78px);letter-spacing:-.01em;line-height:1.1}.opening h1 em{font-size:1em}
 .opening-signature{font-size:22px;margin-top:24px}.opening-signature em{font-size:1em}
 .opening-body{grid-template-columns:1fr;gap:24px}.opening .hero-intro,html[lang=en] .opening .hero-intro{font-size:20px;line-height:1.6}
 .opening .hero-links{width:100%;justify-content:stretch;gap:12px}.opening-note{padding-top:20px;margin-top:0!important;font-size:14px;line-height:1.7}
 .light h2,.chem-heading h2,.cinema-heading h2{font-size:clamp(42px,11vw,72px);line-height:1.08}.light .statement{font-size:clamp(41px,11vw,72px)}
 .element-symbol{font-size:60px}.result-equation{font-size:55px}.contact h2{font-size:clamp(50px,12.8vw,85px)}.about-title h2{font-size:90px}
 .contact .footer-identity>span{font-size:clamp(27px,7.5vw,55px)}.contact .footer-identity .baseline-switch{font-size:inherit;line-height:1.3}
}

/* Large foreground still lifes return at the elements and at the closing invitation. */
@media(min-width:761px){
 .chem-heading{min-height:730px;align-items:center;gap:9%}
 .chem-still-life{height:730px}
 .chem-glass{position:absolute;width:min(83vw,1200px);left:-23vw;bottom:25px;aspect-ratio:auto}
 .chem-glass img{width:100%;height:auto;transform:none}
 .chem-still-life figcaption{position:absolute;bottom:0;left:0;right:0}
 .chem-heading>div{position:relative;z-index:1}
 .contact{padding-top:150px}
 .contact>.section-top{position:relative;z-index:2;max-width:64%;align-items:start}
 .contact-status{max-width:265px;text-align:right;line-height:1.6}
 .contact>h2{font-size:clamp(65px,8.2vw,130px);max-width:75%;position:relative;z-index:2}
 .contact-main{position:relative;z-index:2;display:flex;flex-direction:column;gap:28px;max-width:55%}
 .contact .footer-identity{position:relative;z-index:2;margin-top:145px}
}
.contact-glass{position:absolute;right:-22vw;top:-30px;width:min(84vw,1400px);mix-blend-mode:screen;pointer-events:none;transform:translate3d(0,var(--closing-drift,0px),0) rotate(-9deg);transition:transform 1.6s var(--ease)}
.contact-glass img{width:100%;height:auto;transform:scaleX(-1)}
@media(max-width:1100px) and (min-width:761px){.chem-heading,.chem-still-life{min-height:540px;height:auto}.chem-still-life{height:540px}.chem-glass{width:92vw;left:-29vw}.contact{padding-top:100px}.contact-glass{width:100vw;right:-41vw;top:20px}}
@media(max-width:760px){
 .chem-still-life{max-width:none;margin:0 0 25px}
 .chem-glass{width:160%;margin-left:-30%;aspect-ratio:1.49}
 .chem-glass img{transform:none;width:100%;height:auto}
 .chem-still-life figcaption{margin-top:-10px}
 .contact{padding-top:325px}
 .contact-glass{width:150vw;right:-53vw;top:-20px;transform:rotate(-9deg)}
 .contact>.section-top,.contact>h2,.contact-main,.contact .footer-identity,.contact .footer-bottom{position:relative;z-index:2}
 .contact>.section-top{padding-top:25px;background:linear-gradient(#05050500,#050505 50%)}
}
.reduced .contact-glass{transform:rotate(-9deg)!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.contact-glass{transform:rotate(-9deg)!important;transition:none!important}}