/* A shared photographic stage for bespoke Three.js objects. */
[data-chapter]{position:relative}
:is(.button,.header-contact,.copy-email,.icon-button,.menu-button,.dialog-close,.shape-picker button){--button-depth:2px;border-radius:10px;box-shadow:0 2px 0 var(--button-edge),0 7px 18px #15201124,inset 0 1px 0 #ffffff45}
:is(.project-open,.spatial-play){box-shadow:0 2px 0 #8c9672,0 7px 17px #15201120}
.section-pad{padding-top:88px;padding-bottom:88px}
.studio-scene{position:relative;display:block;min-width:0;isolation:isolate;touch-action:pan-y}
.studio-scene>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .6s ease}
.studio-scene[data-studio-state=ready]>canvas{opacity:1}
.studio-scene[data-studio-state=ready]>.studio-fallback{visibility:hidden;pointer-events:none}
.studio-fallback{transition:visibility 0s}
.studio-work{height:440px;overflow:visible!important;background:radial-gradient(ellipse at 48% 68%,#dadfcd66,transparent 68%);border:0;border-radius:0;box-shadow:none!important;transform:none!important;align-self:center}
.studio-work>img.studio-fallback{position:absolute;left:0;top:12%;width:100%;height:76%;object-fit:contain;transform:none!important;border-radius:9px}
.studio-work .project-open{right:0;bottom:12px;z-index:2;border-radius:50%;width:44px;height:44px;border-color:#7a886650;background:#f8f6e9;box-shadow:0 3px 15px #26301f12}
.saas-case{grid-template-columns:.73fr 1.27fr;gap:4%;padding-bottom:62px}
.saas-copy h3{font-size:clamp(32px,3.7vw,48px);letter-spacing:-1.5px}
.brand-section{background:#e5e7dc}
.brand-story{grid-template-columns:1.35fr .65fr;gap:5%;margin:0}
.studio-brand{height:clamp(480px,calc(100svh - 150px),700px);margin:-28px 0;background:radial-gradient(ellipse at 50% 48%,#f7f6ed88,transparent 66%)}
.studio-brand>.studio-fallback{position:absolute;inset:55px 20px}
.brand-story-copy h2{font-size:clamp(40px,4.8vw,64px);letter-spacing:-2px}
.brand-story-copy>p{max-width:31ch}
.studio-brand[data-studio-state=ready]>canvas{pointer-events:auto;cursor:grab;user-select:none;touch-action:none;border-radius:12px}
.studio-brand[data-brand-dragging=true]>canvas{cursor:grabbing}
.studio-brand>canvas:focus-visible{outline:2px solid #52643b;outline-offset:2px}
.about-section{padding-bottom:74px;background:radial-gradient(ellipse at 25% 65%,#39432b77,transparent 55%),#22281f}
.about-layout{grid-template-columns:1.1fr 1fr;gap:9%;align-items:center;margin:0}
.about-heading{min-width:0}
.about-heading h2{margin-bottom:19px}
.studio-about{height:340px;margin:27px -20px -32px}
.studio-about-fallback{height:100%;display:flex;align-items:center;justify-content:center;gap:25px}
.studio-about-fallback span{padding:18px 22px;color:#d8ddbd;font:600 42px var(--display);border:1px solid #7d8861;border-radius:14px;background:#303927}
.studio-about-fallback i{display:block;width:45px;height:1px;background:#b4a374}
.about-copy{padding:0}
.contact-section{background:#e5e7dc}
.contact-layout{grid-template-columns:minmax(0,1.15fr) minmax(330px,1fr);gap:7%;min-height:370px}
.contact-object.studio-contact{height:370px;width:100%;max-width:470px;margin:-12px -15px -20px 0;justify-self:center;perspective:none;isolation:isolate;cursor:pointer;border-radius:16px}
.contact-object.studio-contact::before{display:none}
.studio-contact>.envelope.studio-fallback{position:absolute;left:7%;top:22%;width:86%}
.studio-contact:focus-visible{outline:2px solid #52643b;outline-offset:5px}
.contact-copy h2{margin-top:0}
[data-chapter]+[data-chapter]::before{content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,#a6ac8a55 20%,#a6ac8a55 80%,transparent);pointer-events:none}
@media(min-width:1500px){.section-pad{padding-left:max(6%,calc((100vw - 1320px)/2));padding-right:max(6%,calc((100vw - 1320px)/2))}}
@media(max-width:1100px){
 .section-pad{padding-top:68px;padding-bottom:68px}
 .studio-work{height:365px}
 .brand-story{grid-template-columns:1.2fr .8fr;gap:4%}
 .studio-brand{height:clamp(480px,calc(100svh - 140px),600px)}
 .contact-layout{gap:4%;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)}
 .contact-object.studio-contact{height:330px}
 .studio-about{height:300px;margin-left:-25px;margin-right:-20px}
}
@media(max-width:760px){
 .section-pad{padding-top:52px;padding-bottom:52px}
 .saas-case{grid-template-columns:1fr;gap:6px;padding-bottom:35px}
 .studio-work{height:340px;margin:0 -10px;order:-1}
 .studio-work .project-open{right:10px;bottom:8px}
 .saas-copy h3{font-size:34px;letter-spacing:-1px}
 .brand-story{display:flex;gap:28px}
 .studio-brand{height:clamp(470px,calc(100svh - 150px),570px);margin:-10px 0 -4px}
 .brand-story-copy h2{font-size:42px;letter-spacing:-1.2px}
 .brand-story-copy>p{max-width:none}
 .about-layout{grid-template-columns:1fr;gap:25px}
 .studio-about{height:320px;margin:14px -10px -10px}
 .about-copy{max-width:540px}
 .contact-layout{grid-template-columns:minmax(0,1fr);gap:18px;min-height:0}
 .contact-object.studio-contact{height:300px;max-width:420px;margin:-12px auto -15px}
 .contact-copy .email-link{font-size:20px;gap:12px}
}
@media(max-width:380px){
 .studio-work{height:310px}
 .studio-brand{height:clamp(440px,calc(100svh - 150px),530px)}
 .studio-about{height:290px}
 .contact-object.studio-contact{height:280px}
 .contact-copy .email-link{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 .studio-scene{translate:none!important;transform:none!important}
 .studio-scene>canvas{transition:none}
}
@media print{
 .studio-scene>canvas{display:none}
 .studio-scene>.studio-fallback{visibility:visible!important}
 .studio-work{height:250px}
 .studio-brand{height:400px}
 .studio-about,.contact-object.studio-contact{display:none}
 .section-pad{padding-top:35px;padding-bottom:35px}
}