/* VENTIC / Architectural motion edition. No animation libraries or video. */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
.hero-art{position:absolute;inset:-70px 0;overflow:hidden;transform:translate3d(0,var(--hero-drift,0px),0);transform-origin:center}
.hero-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.045)}
.hero-photo{background:#89928a}
.hero-photo .photo-grid{inset:28px;border-color:#ffffff50}
.hero-photo .photo-grid::before,.hero-photo .photo-grid::after{content:'';position:absolute;width:28px;height:28px;border-color:#fff;border-style:solid;opacity:.7}
.hero-photo .photo-grid::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.hero-photo .photo-grid::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.hero h1{transform:translate3d(0,var(--hero-type-drift,0px),0)}
.hero .title-mask:nth-child(2){transform:translate3d(var(--hero-line-drift,0px),0,0)}
.hero-foot .scroll-cue{display:flex;align-items:center;gap:13px}
.scroll-cue>span{width:13px;height:23px;border:1px solid #909e91;border-radius:9px;position:relative;overflow:hidden}
.scroll-cue>span::after{content:'';position:absolute;width:1px;height:5px;background:var(--ink);left:5px;top:4px}
.section-index::before{content:'';display:block;width:34px;height:1px;background:#829889;margin-bottom:20px;transform-origin:left}
.line-mask{display:block;overflow:hidden;padding:.03em 0 .06em;line-height:.86}
.line-mask>span{display:block}
.precision-copy h2 .line-mask,.precision-copy h2 .line-mask>span{color:inherit}
.precision-copy h2 .line-mask:last-child>span{color:var(--mint)}
.contact-title>.line-mask{font:inherit;padding:0 0 .075em;line-height:.86}
.contact-title>.line-mask>span{font:inherit}
.architectural-composition{background:#e3e7dd;isolation:isolate}
.architectural-composition::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - .5px),#82988912 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),#82988912 50%,transparent calc(50% + .5px));z-index:-1}
.glass-back{background:linear-gradient(138deg,#9fbdab,#dddcc6);transform:skewY(-8deg) translate3d(0,var(--glass-back,0px),0)}
.glass-pane{transition:none;background:linear-gradient(120deg,#ffffffa0,#d5e5db30 47%,#ffffff60);box-shadow:12px 20px 30px #364b3b13}
.pane-one,.architectural-composition:hover .pane-one{transform:translate3d(var(--glass-left,0px),0,0) rotateY(-24deg)}
.pane-two{transform:translate3d(0,var(--glass-middle,0px),0) rotateY(-24deg)}
.pane-three,.architectural-composition:hover .pane-three{transform:translate3d(var(--glass-right,0px),0,0) rotateY(-24deg)}
.composition-mark{display:block;width:28px;height:28px;border:1px solid #829889;position:relative}
.composition-mark::before{content:'';position:absolute;inset:6px;border:1px solid #829889}
.brand-selectors{position:sticky;top:112px}
.brand-selector{overflow:hidden}
.brand-selector::after{content:'';position:absolute;inset:0;background:#cfeae140;transform:translateX(-102%);transition:transform .6s var(--ease-out);z-index:0;pointer-events:none}
.brand-selector>*{position:relative;z-index:1}
.brand-selector:hover::after{transform:translateX(0)}
.brand-selector.is-active{background:#cfeae1}
.system-lines a{position:relative;transition:color .3s,padding .45s var(--ease-out)}
.system-lines a::after{content:'';height:1px;position:absolute;bottom:-1px;left:0;right:0;background:#5a856e;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.system-lines a:hover{padding-inline:8px}
.system-lines a:hover::after{transform:scaleX(1)}
.system-photo img{object-fit:cover}
/* A real product, seen as a continuous opening. Content and link stay visible. */
.panorama-section{position:relative;background:#303831;color:var(--paper);--pane-shift:94%;--scene-inset:0px;--scene-scale:1;--panorama-progress:1}
.panorama-stage{position:relative;min-height:700px;height:min(850px,90svh);isolation:isolate;overflow:hidden}
.panorama-view{position:absolute;inset:0;clip-path:inset(0 var(--scene-inset));overflow:hidden;z-index:-3}
.panorama-view>img{width:100%;height:100%;object-fit:cover;object-position:center 56%;transform:scale(var(--scene-scale));transform-origin:50% 55%}
.panorama-view figcaption{position:absolute;top:38px;right:var(--gutter);color:#fff;font-size:10px;z-index:2}
.panorama-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#10231d55,#10231d14 72%),linear-gradient(180deg,#101e2450 0%,#1725220a 38%,#18261e55 60%,#17221ded 100%);pointer-events:none}
.panorama-glazing{position:absolute;inset:26px;pointer-events:none;z-index:-1;border:1px solid #e6f1e03d}
.panorama-glazing>span{position:absolute;top:0;bottom:0;width:50%;border:1px solid #e9f0e36b;background:linear-gradient(117deg,#e5f3e90d,transparent 30%,#f6fff021 66%,#e3f5e90a);box-shadow:2px 0 10px #17211f20}
.glazing-left{left:0;transform:translate3d(calc(var(--pane-shift) * -1),0,0)}
.glazing-right{right:0;transform:translate3d(var(--pane-shift),0,0)}
.glazing-left::after,.glazing-right::after{content:'';position:absolute;top:52%;width:3px;height:38px;border:1px solid #e8eee4aa;box-shadow:1px 1px 2px #23322644}
.glazing-left::after{right:16px}.glazing-right::after{left:16px}
.panorama-content{height:100%;min-height:inherit;display:flex;flex-direction:column;position:relative;z-index:1;padding-top:36px;padding-bottom:42px}
.panorama-top{display:flex;align-items:center;gap:24px;color:#e4ebe0;font-size:10px}
.panorama-meter{display:block;width:62px;height:1px;background:#e7f0e24d;overflow:hidden}
.panorama-meter i{display:block;width:100%;height:100%;background:#d8eddf;transform:scaleX(var(--panorama-progress));transform-origin:left}
#panorama-title{margin:auto 0;font-size:clamp(86px,12.8vw,210px);line-height:.87;letter-spacing:-.025em;text-shadow:0 3px 26px #1a2c2740;max-width:1300px}
#panorama-title>span{display:block;transform:translate3d(var(--panorama-title-x,0px),0,0)}
#panorama-title>span:last-child{color:#d4eadb;transform:translate3d(calc(var(--panorama-title-x,0px) * -.7),0,0)}
.panorama-bottom{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:clamp(26px,5vw,80px);padding-top:26px;border-top:1px solid #e5ede163}
.panorama-bottom .micro{color:#c8d5c3;font-size:9px;margin-bottom:9px}
.panorama-bottom h3{font:800 clamp(32px,3.3vw,52px)/.95 FranklinDisplay;text-transform:uppercase}
.panorama-bottom>p{font-size:14px;line-height:1.6;color:#e0e5dc;max-width:350px}
.panorama-bottom .text-link{font-size:10px;margin-bottom:3px;margin-right:70px;white-space:nowrap}
/* The engineering is just as important as the image. */
.precision-copy{position:sticky;align-self:start;top:128px}
.precision-section{background:#303831;--opening-scroll:36px}
.precision-copy h2{margin-top:48px}
.opening-demo{position:relative;background:linear-gradient(145deg,#a7be9812,transparent 60%);border-color:#a5b79b60}
.demo-indicator{width:5px;height:5px;border-radius:50%;background:#cfeae1;box-shadow:0 0 0 4px #cfeae10d;align-self:center}
.demo-top>.demo-indicator{font-size:inherit;line-height:inherit}
.window-drawing{overflow:visible}
.sliding-leaf{transition:none;transform:translateX(var(--opening))}
.opening-demo.is-manual .sliding-leaf{transition:transform .12s linear}
.precision-features p{position:relative;padding-left:0;transition:color .35s}
.precision-features p::after{content:'';height:1px;position:absolute;bottom:-1px;left:0;width:100%;background:#cfeae1;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.precision-features p.is-reached::after{transform:scaleX(1)}
.precision-features p.is-reached span{color:#cfeae1}
/* A reading rhythm, not a slideshow. */
.process-steps{position:relative;padding-left:30px;--process-progress:0}
.process-rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);overflow:hidden}
.process-rail>span{display:block;width:100%;height:100%;background:#6b8d78;transform:scaleY(var(--process-progress));transform-origin:top}
.process-step{position:relative;transition:opacity .6s}
.process-step::before{content:'';position:absolute;left:-33px;top:42px;width:7px;height:7px;border-radius:50%;background:var(--paper);border:1px solid #b9c2b3;transition:background .5s,border-color .5s}
.process-step.is-active::before{background:#6b8d78;border-color:#6b8d78}
.process-step.is-visible .step-number{color:#9ca995}
.process-step.is-active .step-number{color:#56735e}
.process-step h3{transition:color .5s}
.process-step.is-active h3{color:#4d735f}
.footer-wordmark{overflow:hidden}
.footer-wordmark>img{transform:translate3d(0,var(--footer-drift,0px),0)}
/* Enhancement is conditional. Reduced motion and no-JS have a complete static page. */
@media(prefers-reduced-motion:no-preference){
 .motion-ready .hero-art>img{animation:hero-photo-arrive 2.4s var(--ease-out) both}
 .motion-ready .hero-photo{will-change:auto}
 .motion-ready .hero-photo.is-inview .hero-art{will-change:transform}
 .motion-ready .scroll-cue>span::after{animation:scroll-tick 2.8s ease-in-out 3}
 .motion-ready .section-heading[data-reveal],.motion-ready .precision-copy[data-reveal],.motion-ready .process-heading[data-reveal]{opacity:1;transform:none;transition:none}
 .motion-ready [data-reveal] .line-mask>span{transform:translateY(112%);transition:transform 1.25s var(--ease-out)}
 .motion-ready [data-reveal].is-visible .line-mask>span{transform:translateY(0)}
 .motion-ready [data-reveal] .line-mask:nth-child(2)>span{transition-delay:.11s}
 .motion-ready [data-reveal] .line-mask:nth-child(3)>span{transition-delay:.19s}
 .motion-ready .section-heading[data-reveal] .section-index{opacity:0;transition:opacity .8s .1s}
 .motion-ready .section-heading[data-reveal].is-visible .section-index{opacity:1}
 .motion-ready .brand-panel.is-entering{animation:none}
 .motion-ready .brand-panel.is-entering .system-photo{animation:photo-reveal 1s var(--ease-out) both}
 .motion-ready .brand-panel.is-entering .brand-panel-copy{animation:soft-in .8s .08s var(--ease-out) both}
 .motion-ready .brand-panel.is-entering .system-lines a{animation:soft-in .7s var(--ease-out) both}
 .motion-ready .brand-panel.is-entering .system-lines a:nth-child(2){animation-delay:.07s}
 .motion-ready .brand-panel.is-entering .system-lines a:nth-child(3){animation-delay:.14s}
 .motion-ready .brand-panel.is-entering .system-lines a:nth-child(4){animation-delay:.21s}
 .motion-ready .panorama-section{height:180svh}
 .motion-ready .panorama-stage{position:sticky;top:82px;min-height:0;height:calc(100svh - 82px);max-height:1000px}
 .motion-ready .panorama-section.is-inview .panorama-view>img,.motion-ready .panorama-section.is-inview .panorama-glazing>span{will-change:transform}
}
@keyframes hero-photo-arrive{from{transform:scale(1.12)}to{transform:scale(1.045)}}
@keyframes photo-reveal{from{clip-path:inset(7% 3% 7% 3%);opacity:.4}to{clip-path:inset(0);opacity:1}}
@keyframes scroll-tick{0%,20%{transform:translateY(0);opacity:1}65%{transform:translateY(10px);opacity:0}66%{transform:translateY(-8px);opacity:0}90%,100%{transform:translateY(0);opacity:1}}
@media(min-width:1700px){#panorama-title{font-size:210px}.panorama-bottom{padding-bottom:15px}}
@media(max-width:1100px){.panorama-bottom{grid-template-columns:1fr 1.4fr;gap:20px 40px}.panorama-bottom .text-link{grid-column:2;justify-self:start;margin-right:0}.panorama-bottom>div{grid-row:span 2}.precision-copy{top:115px}.process-steps{padding-left:24px}.process-step::before{left:-27px}}
@media(max-width:900px){.brand-selectors{position:static}.panorama-stage{min-height:660px}.motion-ready .panorama-stage{top:76px;height:calc(100svh - 76px)}#panorama-title{font-size:13.2vw}.panorama-bottom>p{font-size:13px}.precision-copy{top:110px}.section-index::before{margin-bottom:16px}}
@media(max-width:620px){
 .hero-art{inset:-32px 0}
 .hero-art>img{object-position:56% center}
 .hero .title-mask:nth-child(2){transform:none}
 .hero-photo .photo-grid{inset:14px}
 .hero h1{transform:none}
 .section-index::before{display:none}
 .panorama-stage,.motion-ready .panorama-stage{position:relative;top:auto;height:650px;min-height:0;max-height:none}
 .panorama-section,.motion-ready .panorama-section{height:auto}
 .panorama-content{padding-top:28px;padding-bottom:32px}
 .panorama-view>img{object-position:53% center}
 .panorama-view figcaption{top:28px;font-size:9px}
 .panorama-top{font-size:9px;gap:16px}
 .panorama-meter{width:36px}
 .panorama-glazing{inset:14px}
 #panorama-title{font-size:17.5vw;margin:auto 0;line-height:.9;letter-spacing:-.015em}
 .panorama-bottom{display:block;padding-top:22px}
 .panorama-bottom h3{font-size:38px}
 .panorama-bottom>p{font-size:13px;line-height:1.55;margin:16px 0 20px;max-width:290px}
 .panorama-bottom .text-link{font-size:10px;padding-bottom:6px}
 .panorama-bottom .micro{margin-bottom:8px}
 .precision-copy{position:static}
 .process-steps{padding-left:22px}
 .process-step::before{left:-25px;top:33px}
 .system-lines a:hover{padding-inline:0}
 .motion-ready [data-reveal] .line-mask>span{transition-duration:.9s}
 .motion-ready [data-reveal] .line-mask:nth-child(2)>span{transition-delay:.06s}
 .motion-ready [data-reveal] .line-mask:nth-child(3)>span{transition-delay:.12s}
}
@media(max-height:600px) and (min-width:621px){.motion-ready .panorama-section{height:auto}.motion-ready .panorama-stage{position:relative;top:0;height:660px}.precision-copy,.process-heading{position:static}}
@media(prefers-reduced-motion:reduce){
 .hero-art,.hero-art>img,.hero h1,.hero .title-mask:nth-child(2),.glass-pane,.glass-back,.panorama-view>img,#panorama-title>span,.footer-wordmark>img{transform:none!important}
 [data-reveal] .line-mask>span{transform:none!important}
 .panorama-section,.motion-ready .panorama-section{height:auto}
 .panorama-stage,.motion-ready .panorama-stage{position:relative;top:auto;min-height:660px;height:85svh}
 .panorama-glazing{display:none}
 .panorama-view{clip-path:none}
 .brand-panel .system-photo{clip-path:none}
 .precision-copy{position:static}
}

/* Daylight opening: keep the approved source crisp instead of stretching it.
   At 420 × 525 CSS px the visible crop retains more than 2 source px per px. */
.hero-daylight .hero-photo{width:calc(100% - var(--gutter));max-width:420px;aspect-ratio:4/5;align-self:center;justify-self:end;margin:40px var(--gutter) 40px 0;background:#e2e5dc}
.hero-daylight .hero-art{inset:0;transform:none;will-change:auto}
.hero-daylight .hero-art>img{transform:none;animation:none;object-position:51% 50%}
.hero-daylight .hero-photo.is-inview .hero-art{will-change:auto}
.hero-daylight .photo-grid{display:none}
.hero-daylight .hero-photo::after{inset:80% 0 0;background:linear-gradient(transparent,#25342655)}
.hero-daylight .hero-photo figcaption{bottom:24px;left:24px;right:24px}
@media(max-width:620px){
 .hero-daylight .hero-photo{width:calc(100% - var(--gutter)*2);justify-self:center;margin:0 auto 32px;aspect-ratio:4/5}
}

/* Restored Ventic opening: the photograph fills the full right-hand column. */
.hero-legacy .hero-photo{width:100%;max-width:none;align-self:stretch;justify-self:stretch;margin:0;aspect-ratio:auto}
.hero-legacy .hero-art{inset:0;transform:none}
.hero-legacy .hero-art>img{object-position:52% 53%;transform:none;animation:none}
.hero-legacy .photo-grid{display:none}
.hero-legacy .hero-photo.is-inview .hero-art{will-change:auto}
@media(max-width:620px){
 .hero-legacy .hero-photo{width:calc(100% - var(--gutter)*2);margin:0 auto 30px;min-height:0;aspect-ratio:3/4}
 .hero-legacy .hero-art>img{object-position:50% 58%}
}