/* One continuous scene: photographed glass → a connecting line → three practices. */
.story-enabled .hero-scroll{height:235svh!important;position:relative}
.story-enabled .hero{position:sticky!important;top:0!important;height:100svh;max-height:none;overflow:hidden;isolation:isolate}
.story-enabled .hero-art{transform-origin:72% 50%;will-change:transform,opacity}
.story-enabled .hero-copy{will-change:transform,opacity}
.story-enabled .hero h1>span{display:block}
.story-layer{position:absolute;inset:0;pointer-events:none;z-index:3;color:#25343e;opacity:0}
.story-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.story-heading{position:absolute;top:21%;left:8%;margin:0;font-size:clamp(34px,4.2vw,66px);font-weight:650;line-height:1.3;letter-spacing:-.055em}
.story-heading small{display:block;font-size:11px;letter-spacing:.19em;font-weight:500;margin-bottom:20px;color:#9a4b1e}
.story-practices{position:absolute;left:8%;right:8%;top:62%;display:grid;grid-template-columns:repeat(3,1fr);gap:5vw}
.story-practice{pointer-events:none;display:block;text-decoration:none;color:inherit;border-top:1px solid #34434e30;padding:23px 0;opacity:0;transform:translateY(24px)}
.story-practice span{font-size:11px;letter-spacing:.15em;color:#946440}
.story-practice h2{font-size:clamp(24px,2.4vw,38px);font-weight:550;letter-spacing:-.04em;margin:15px 0}
.story-practice p{font-size:13px;line-height:1.9;color:#5c6b73;max-width:25em}
.story-practice b{display:block;margin-top:22px;font-size:22px;font-weight:400}
.story-enabled .hero-bottom{transition:none}
.story-enabled .header{z-index:10}
.story-enabled .motion-toggle{position:fixed!important;top:auto!important;bottom:22px!important;right:25px!important;z-index:20}
.story-enabled .projects{position:relative;background:#f8fafb;z-index:4}
.story-enabled body[data-motion=off] .hero-scroll{height:auto!important}
.story-enabled body[data-motion=off] .hero{position:relative!important;overflow:visible;margin-bottom:430px}
body[data-motion=off] .story-layer{top:100%;height:430px;opacity:1!important;background:#f3f7f9;pointer-events:auto}
body[data-motion=off] .story-heading{top:35px;font-size:28px}
body[data-motion=off] .story-heading small,body[data-motion=off] .story-lines{display:none}
body[data-motion=off] .story-practices{top:125px}
body[data-motion=off] .story-practice{opacity:1!important;transform:none!important;pointer-events:auto}
@media(max-width:700px){
.story-enabled .hero-scroll{height:175svh!important}
.story-enabled .hero{min-height:720px}
.story-enabled .motion-toggle{bottom:12px!important;right:12px!important}
.story-heading{left:7%;top:13%;font-size:34px}
.story-heading small{font-size:9px;margin-bottom:15px}
.story-practices{left:14%;right:7%;top:37%;display:flex;flex-direction:column;gap:0}
.story-practice{padding:16px 0;position:relative}
.story-practice span{font-size:9px}.story-practice h2{font-size:25px;margin:6px 0}.story-practice p{font-size:11px;margin:0}.story-practice b{position:absolute;right:0;top:18px;margin:0;font-size:20px}
.story-enabled body[data-motion=off] .hero{margin-bottom:600px}
body[data-motion=off] .story-layer{height:600px}
body[data-motion=off] .story-practices{top:120px}
}

#story-reveal{position:absolute;top:138svh}#story-mid{position:absolute;top:65svh}
@media(max-width:700px){#story-reveal{top:80svh}#story-mid{top:42svh}.story-practice h2 br{display:none}}

@media(max-width:700px){
.story-enabled .hero-copy{will-change:opacity;transform:none!important}
.story-enabled .hero-actions .button{white-space:nowrap;font-size:clamp(11px,3.2vw,13px);padding:13px 15px}
.story-enabled .hero-actions{bottom:48px}
}
.story-enabled .project-image{position:relative;isolation:isolate;will-change:clip-path}
.story-enabled .project-image>img{transform:scale(calc(1.06 - var(--project-reveal,1)*.06));transition:none}
.project-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.project-trace rect{fill:none;stroke:#c6844a;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.story-enabled .projects:before{content:'';position:absolute;left:8%;top:0;height:65px;width:1px;background:linear-gradient(#cf8d53,#cf8d5300)}

/* Scroll-linked reveals below the hero; source screenshots move with their monitor. */
.story-content-reveal{opacity:calc(.12 + var(--content-progress,1)*.88);transform:translate3d(0,var(--content-rise,0px),0);transition:none!important}
.story-content-reveal:focus-within{opacity:1!important;transform:none!important}
.story-rule{position:relative}
.service-row.story-rule{border-top-color:transparent}
.service-row.story-rule:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#bd875e,#cad4da 55%);transform:scaleX(var(--rule-progress,1));transform-origin:left;pointer-events:none}
.company dl>div.story-rule{border-bottom-color:transparent}
.company dl>div.story-rule:after,.contact-button.story-rule:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#a7b6be;transform:scaleX(var(--rule-progress,1));transform-origin:left;pointer-events:none}
body[data-motion=off] .story-content-reveal{opacity:1!important;transform:none!important}
body[data-motion=off] .story-rule{--rule-progress:1!important}
@media(prefers-reduced-motion:reduce){body:not([data-motion=on]) .story-content-reveal{opacity:1;transform:none}}
@media print{.story-content-reveal{opacity:1!important;transform:none!important}.story-enabled .project-image{clip-path:none!important}}
