/* style.css */
@font-face{font-family:Inter Tight;src:url("/wp-content/themes/somnium-construction/concept-20261014-mixed-projects/assets/inter-tight-latin.woff2") format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url("/wp-content/themes/somnium-construction/concept-20261014-mixed-projects/assets/manrope-latin.woff2") format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
:root{--paper:#eaece3;--forest:#10392f;--deep:#08271f;--mint:#9edbc0;--teal:#3dc2af;--line:rgba(16,57,47,.25);--gutter:clamp(22px,4vw,80px);--display:'Inter Tight',Arial,sans-serif;--body:Manrope,Arial,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--forest);font-family:var(--body);-webkit-font-smoothing:antialiased}button,a,input{touch-action:manipulation}button,a{color:inherit}a{text-decoration:none}button{font:inherit;cursor:pointer}button:disabled{cursor:wait}button{border:0}img,video{display:block;width:100%}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:6px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:500}em{font-style:normal;color:var(--mint)}::selection{background:var(--forest);color:var(--paper)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:10px;left:10px;padding:15px;background:var(--forest);color:white;transform:translateY(-160%);z-index:200}.skip-link:focus{transform:none}.section-pad{padding-inline:var(--gutter)}.eyebrow,.small-label{font-size:11px;line-height:1.5;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.crosshair{display:block;position:relative;width:25px;height:25px;flex:none}.crosshair:before,.crosshair:after{content:'';position:absolute;background:currentColor}.crosshair:before{height:1px;width:25px;top:12px;left:0}.crosshair:after{height:25px;width:1px;left:12px;top:0}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:44px;font-size:13px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:5px}.text-link>span[aria-hidden]{font-size:25px;transition:transform .25s}.text-link:hover>span[aria-hidden]{transform:translate(3px,-3px)}
.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gutter);border-bottom:1px solid var(--line);position:relative;z-index:20;background:var(--paper)}.brand{display:flex;align-items:center;gap:12px;width:207px}.brand-symbol{width:32px;height:44px;object-fit:contain}.brand-wordmark{position:relative;display:block;width:158px}.brand-wordmark>img{display:block;width:100%;height:auto;clip-path:inset(0 0 40%)}.brand-wordmark:after{content:"";position:absolute;inset:0;background:var(--forest);-webkit-mask:url("/wp-content/themes/somnium-construction/concept-20261014-mixed-projects/assets/somnium-wordmark.png") center/100% 100% no-repeat;mask:url("/wp-content/themes/somnium-construction/concept-20261014-mixed-projects/assets/somnium-wordmark.png") center/100% 100% no-repeat;clip-path:inset(60% 0 0)}.navigation{display:flex;align-items:center;gap:36px;font-size:12px;font-weight:600}.navigation>a{padding-block:15px}.navigation>a:not(.nav-contact){position:relative}.navigation>a:not(.nav-contact):after{content:'';position:absolute;left:0;right:100%;bottom:9px;height:1px;background:var(--forest);transition:right .25s}.navigation>a:hover:after{right:0}.nav-contact{display:flex;gap:34px;align-items:center;border:1px solid var(--forest);padding:12px 20px!important;margin-left:20px}.nav-contact>span{font-size:21px}.nav-contact:hover{background:var(--forest);color:var(--paper)}.menu-toggle{display:none}
.opening{padding:30px var(--gutter) 35px}.opening-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}.opening-top>.eyebrow{display:flex;gap:10px;align-items:center}.status-dot{height:6px;width:6px;background:var(--forest);border-radius:50%;display:block}.location{font-size:11px}.headline-layout{position:relative}.headline-layout h1{font-size:clamp(80px,13.3vw,225px);line-height:.86;letter-spacing:-.065em;font-weight:550}.headline-layout h1>span{display:block}.headline-layout h1>span+span{margin-top:8px}.opening-note{position:absolute;right:0;top:10px;width:22%;padding-left:24px;border-left:1px solid var(--line);display:grid;grid-template-columns:1fr 48px;gap:20px}.opening-note>.crosshair{grid-column:1/3;color:var(--forest)}.opening-note>p{font-size:clamp(14px,1.3vw,20px);line-height:1.5}.round-link{border:1px solid var(--line);border-radius:50%;height:46px;width:46px;display:grid;place-items:center;font-size:30px;align-self:end;transition:background .25s,transform .25s}.round-link:hover{background:var(--mint);transform:translate(2px,2px)}.opening-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:30px}.opening-bottom>p{font-size:12px;line-height:1.6}.opening-bottom .text-link{min-width:220px}
.film-scene{height:165svh;background:var(--paper);position:relative}.film-stage{height:100svh;position:sticky;top:0;overflow:hidden}.film-frame{position:absolute;left:24%;width:72%;top:0;height:82%;overflow:hidden;background:var(--forest);will-change:left,width,height}.film-frame>video{width:100%;height:100%;object-fit:cover}.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.23),transparent 38%,rgba(0,0,0,.68))}.film-aside{position:absolute;left:var(--gutter);top:12%;width:18%;display:flex;flex-direction:column;gap:30px}.film-aside>p{font-family:var(--display);font-size:clamp(23px,2.5vw,43px);line-height:1.04;letter-spacing:-.03em}.film-aside>.small-label{font-weight:400;font-size:10px}.down-arrow{font-size:40px}.film-topline,.film-bottomline{position:absolute;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;color:white}.film-topline{top:26px}.film-topline>.small-label{font-size:10px}.film-toggle{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.65);background:rgba(10,32,25,.5);color:white;padding:10px 16px;border-radius:30px;font-size:11px;min-height:42px}.play-icon{width:10px;font-size:10px}.film-bottomline{bottom:40px;align-items:end}.film-bottomline>p{font-family:var(--display);font-size:clamp(36px,5.8vw,90px);line-height:.98;letter-spacing:-.04em;max-width:80%}.film-open{font-size:12px;border-bottom:1px solid white;padding:10px 0;background:none;color:inherit;display:flex;gap:35px;align-items:center}.film-open>span{font-size:24px}.film-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.2)}.film-progress>span{display:block;height:100%;background:var(--mint);width:0%}
.intro{display:grid;grid-template-columns:1fr 3fr;gap:50px;padding-top:120px;padding-bottom:130px;background:var(--forest);color:var(--paper)}.section-label{display:flex;flex-direction:column;gap:26px}.section-label>.crosshair{color:var(--mint)}.intro h2{font-size:clamp(42px,5.5vw,87px);letter-spacing:-.045em;line-height:1.05}.intro-bottom{display:flex;gap:65px;align-items:end;justify-content:space-between;margin-top:48px}.intro-bottom>p{max-width:475px;font-size:15px;line-height:1.9;color:#d3dfd6}.intro-bottom>.text-link{white-space:nowrap;color:var(--mint);flex:none}
.projects{padding-top:110px;padding-bottom:125px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:72px}.section-heading h2{font-size:clamp(65px,8.7vw,144px);line-height:.9;letter-spacing:-.055em}.indented{padding-left:12vw}.project-heading-side{padding-bottom:8px;min-width:290px}.project-heading-side>p{font-size:13px;line-height:1.65;margin-bottom:40px}.filters{display:flex;gap:7px}.filters>button{padding:10px 14px;border:1px solid var(--line);border-radius:30px;min-height:42px;background:none;font-size:11px;transition:background .2s,color .2s}.filters>button[aria-pressed=true]{background:var(--forest);color:var(--paper);border-color:var(--forest)}.filters>button:hover{border-color:var(--forest)}.project-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2.5vw;row-gap:72px}.project-walnut{grid-column:1/8}.project-mygp{grid-column:9/13;margin-top:180px}.project-elms{grid-column:2/6;margin-top:45px}.project-somerford{grid-column:7/13}.project-button{display:block;width:100%;text-align:left;background:none;padding:0}.project-photo{position:relative;overflow:hidden;background:#cfdbcf;aspect-ratio:1.28}.project-mygp .project-photo,.project-elms .project-photo{aspect-ratio:.91}.project-photo>img{height:100%;object-fit:cover;transition:transform .8s var(--ease)}.project-button:hover .project-photo>img{transform:scale(1.035)}.image-link{position:absolute;right:16px;top:16px;background:var(--paper);color:var(--forest);height:45px;width:45px;border-radius:50%;display:grid;place-items:center;font-size:27px;transition:background .25s,transform .25s}.project-button:hover .image-link{transform:rotate(45deg);background:var(--mint)}.image-category{position:absolute;left:16px;bottom:16px;background:var(--paper);padding:8px 12px;border-radius:30px;font-size:10px}.project-caption{padding-top:19px;display:flex;flex-direction:column;gap:6px}.project-caption h3{font-size:clamp(24px,2.4vw,40px);letter-spacing:-.025em}.project-caption p{font-size:11px}.project-grid.is-filtered{grid-template-columns:1fr 1fr;gap:4vw}.project-grid.is-filtered .project{grid-column:auto;margin-top:0}.project-grid.is-filtered .project-photo{aspect-ratio:1.15}
.scrub-scene{height:190svh;position:relative;background:var(--forest);color:var(--paper)}.scrub-stage{position:sticky;top:0;height:100svh;overflow:hidden}.scrub-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.scrub-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,22,14,.66),rgba(3,22,14,.04) 75%),linear-gradient(0deg,rgba(3,22,14,.67),transparent 70%)}.scrub-top{position:absolute;left:var(--gutter);right:var(--gutter);top:36px;display:flex;align-items:center;justify-content:space-between}.scrub-mode{background:rgba(10,32,25,.65);border:1px solid rgba(255,255,255,.4);color:white;padding:12px 16px;font-size:11px;border-radius:30px;min-height:42px}.scrub-mode>span{margin-left:14px}.scrub-content{position:absolute;left:var(--gutter);right:var(--gutter);bottom:100px;display:flex;align-items:end;justify-content:space-between}.scrub-content>h2{font-size:clamp(90px,13vw,200px);line-height:.87;letter-spacing:-.06em}.scrub-copy{font-size:16px;line-height:1.5;display:flex;flex-direction:column;gap:28px;padding-right:5vw}.scrub-copy>.small-label{margin-top:10px}.scrub-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:30px;display:flex;align-items:center;gap:25px}.scrub-track{height:1px;background:rgba(255,255,255,.35);flex:1}.scrub-track>span{display:block;transform:scaleX(0);transform-origin:left;width:100%;height:2px;background:var(--mint)}
.services{padding-top:130px;padding-bottom:135px;display:grid;grid-template-columns:1fr 1.4fr;gap:10vw}.services-heading>.eyebrow{margin-bottom:32px}.services-heading>h2{font-size:clamp(58px,6.5vw,98px);line-height:.95;letter-spacing:-.05em}.services-heading em{color:#49745d}.services-heading>p:last-child{max-width:290px;line-height:1.8;font-size:13px;margin-top:35px}.service-list{padding-top:37px}.service-list>details{border-top:1px solid var(--line)}.service-list>details:last-child{border-bottom:1px solid var(--line)}.service-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--display);font-size:clamp(28px,3.7vw,61px);letter-spacing:-.04em;padding-block:25px;cursor:pointer}.service-list summary::-webkit-details-marker{display:none}.plus{font-family:var(--body);font-size:26px;font-weight:300;transition:transform .25s}.service-list details[open] .plus{transform:rotate(45deg)}.service-content{padding:0 0 35px;max-width:490px;font-size:14px;line-height:1.8}.service-content ul{list-style:none;padding:0;margin:25px 0;color:#416354;font-size:12px}.service-content li+li{margin-top:7px}.service-content .text-link{margin-top:6px;font-size:12px}
.contact{background:var(--mint);padding-top:50px;padding-bottom:50px;color:var(--deep)}.contact-top{display:flex;justify-content:space-between;align-items:center}.contact-heading{display:flex;justify-content:space-between;align-items:center;margin:65px 0 70px}.contact-heading h2{font-size:clamp(70px,11.7vw,190px);line-height:.87;letter-spacing:-.06em}.contact-heading em{color:inherit}.contact-arrow{font-family:var(--display);font-size:clamp(120px,19vw,300px);line-height:1;transition:transform .4s var(--ease)}.contact-heading:hover .contact-arrow{transform:translate(9px,-9px)}.contact-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(8,39,31,.3);padding-top:25px;gap:25px;font-size:13px;line-height:1.7}.contact-bottom>div{display:flex;flex-direction:column;gap:5px}.contact-bottom a:hover{text-decoration:underline}
.footer{background:var(--deep);color:var(--paper);padding:48px var(--gutter) 20px;overflow:hidden}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:35px;font-size:11px;line-height:1.7}.footer-brand{width:220px}.footer-brand img{height:auto}.footer-top>a:last-child{min-height:44px;display:flex;align-items:center}.footer-word{font-family:var(--display);font-size:17.5vw;line-height:1.05;letter-spacing:-.04em;font-weight:650;text-align:center;margin:48px -8px 22px;color:var(--mint)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #375449;padding-top:20px;font-size:9px;color:#b4c6bb}
dialog{border:0;padding:0;max-width:none;max-height:90svh;overscroll-behavior:contain}dialog::backdrop{background:rgba(4,24,17,.88);backdrop-filter:blur(9px)}.project-dialog{width:min(1100px,92vw);background:var(--paper);color:var(--forest)}.dialog-close{position:relative;float:right;display:flex;align-items:center;gap:20px;background:transparent;color:inherit;font-size:12px;min-height:60px;padding:15px 25px}.dialog-close>span{font-size:30px}.project-dialog-grid{clear:both;display:grid;grid-template-columns:1.2fr 1fr;min-height:440px}.project-dialog-grid>img{height:100%;object-fit:cover}.project-dialog-copy{padding:45px 35px;display:flex;flex-direction:column;align-items:start;gap:30px}.project-dialog-copy>h2{font-size:55px;line-height:1;letter-spacing:-.04em}.project-dialog-copy>p:not(.eyebrow){font-size:14px;line-height:1.8}.project-dialog-copy>.text-link{margin-top:auto}.film-dialog{width:min(1100px,94vw);background:var(--deep);color:var(--paper)}.film-dialog>video{clear:both;width:100%;max-height:70svh;object-fit:contain}.film-dialog>p{padding:18px 22px;font-size:11px}.modal-open{overflow:hidden}
@media(min-width:1800px){.opening{padding-top:40px;padding-bottom:55px}.opening-top{margin-bottom:50px}.film-aside{top:15%}.section-pad{padding-inline:max(80px,calc((100vw - 1700px)/2))}}
@media(max-width:1000px){.navigation{gap:20px}.nav-contact{margin-left:0}.headline-layout h1{font-size:13.1vw}.opening-note{width:25%;padding-left:15px}.opening-note>.round-link{display:none}.opening-note>p{grid-column:1/3}.intro{grid-template-columns:1fr 3fr;gap:30px}.intro-bottom{flex-direction:column;align-items:start;gap:25px}.intro h2{font-size:6vw}.project-mygp{grid-column:9/13;margin-top:120px}.project-elms{grid-column:1/6}.services{gap:7vw}.scrub-copy{padding-right:0}.footer-top>p{font-size:10px}}
@media(max-width:680px){html{scroll-padding-top:20px}.header{height:82px}.brand{width:166px;gap:9px}.brand-symbol{width:26px;height:35px}.brand-wordmark{width:130px}.menu-toggle{display:flex;align-items:center;gap:13px;min-height:44px;background:transparent;font-size:12px;padding:8px 0 8px 15px}.menu-icon{position:relative;width:22px;height:12px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}.menu-toggle[aria-expanded=true] .menu-icon{border:0}.menu-toggle[aria-expanded=true] .menu-icon:before,.menu-toggle[aria-expanded=true] .menu-icon:after{content:'';height:1px;width:22px;position:absolute;top:5px;left:0;background:currentColor;transform:rotate(45deg)}.menu-toggle[aria-expanded=true] .menu-icon:after{transform:rotate(-45deg)}.navigation{display:none;position:absolute;left:0;right:0;top:81px;padding:24px var(--gutter) 32px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 15px 22px rgba(16,57,47,.1)}.navigation.is-open{display:flex;flex-direction:column;align-items:stretch;gap:8px}.navigation>a{font-size:20px;padding-block:12px}.navigation .nav-contact{margin-top:10px;justify-content:space-between}.opening{padding-top:24px;padding-bottom:25px}.opening-top{margin-bottom:26px}.opening-top>.eyebrow{font-size:8px;letter-spacing:.04em}.status-dot{width:4px;height:4px}.location{display:none}.headline-layout h1{font-size:13.9vw;font-weight:550;line-height:.91;letter-spacing:-.06em}.headline-layout h1>span+span{margin-top:2px}.opening-note{position:static;border:0;padding:0;margin-top:23px;width:100%;display:flex;align-items:center;gap:13px}.opening-note>.crosshair{width:18px;height:18px}.opening-note>.crosshair:before{width:18px;top:9px}.opening-note>.crosshair:after{height:18px;left:9px}.opening-note>p{font-size:13px}.opening-note>p br{display:none}.opening-bottom{margin-top:22px;align-items:center;gap:16px}.opening-bottom>p{font-size:10px}.opening-bottom .text-link{min-width:0;font-size:10px;gap:18px;padding-bottom:0}.opening-bottom .text-link>span{font-size:20px}.film-scene{height:120svh}.film-stage{height:83svh;top:0}.film-frame{left:var(--gutter);width:calc(100% - 2*var(--gutter));height:93%}.film-aside{display:none}.film-topline{top:18px;left:20px;right:20px}.film-topline>.small-label{font-size:9px}.film-toggle{padding:8px 12px;font-size:10px;gap:8px}.film-bottomline{bottom:30px;left:20px;right:20px;align-items:start;flex-direction:column;gap:20px}.film-bottomline>p{font-size:13vw;max-width:100%}.film-open{font-size:11px;gap:24px;min-height:40px}.intro{grid-template-columns:1fr;padding-top:65px;padding-bottom:65px;gap:35px}.section-label{flex-direction:row;align-items:center;gap:15px}.section-label>.crosshair{width:19px;height:19px}.section-label>.crosshair:before{width:19px;top:9px}.section-label>.crosshair:after{height:19px;left:9px}.intro h2{font-size:10vw;line-height:1.06}.intro-bottom{margin-top:27px;gap:25px}.intro-bottom>p{font-size:13px;line-height:1.9}.intro-bottom>.text-link{font-size:12px}.projects{padding-top:65px;padding-bottom:65px}.section-heading{flex-direction:column;align-items:start;gap:25px;margin-bottom:32px}.section-heading h2{font-size:18vw}.indented{padding-left:16vw}.project-heading-side{width:100%;min-width:0;display:flex;flex-direction:column;gap:20px}.project-heading-side>p{font-size:12px;margin:0}.filters{width:100%;gap:7px}.filters>button{padding:10px 16px;font-size:10px}.project-grid,.project-grid.is-filtered{display:grid;grid-template-columns:1fr;gap:38px}.project,.project-grid.is-filtered .project{grid-column:1;margin:0}.project-mygp{padding-left:12%}.project-elms{padding-right:12%}.project-photo,.project-grid.is-filtered .project-photo{aspect-ratio:1.05}.project-mygp .project-photo,.project-elms .project-photo{aspect-ratio:1}.project-somerford .project-photo{aspect-ratio:1.28}.project-caption{padding-top:13px;gap:5px}.project-caption h3{font-size:27px}.project-caption p{font-size:10px}.image-link{height:40px;width:40px;font-size:24px;top:12px;right:12px}.image-category{left:12px;bottom:12px;font-size:9px}.scrub-scene{height:165svh}.scrub-stage{height:90svh;top:0}.scrub-stage>video{object-position:54% center}.scrub-shade{background:linear-gradient(180deg,rgba(3,22,14,.4),transparent 25%),linear-gradient(0deg,rgba(3,22,14,.77),rgba(3,22,14,.04) 90%)}.scrub-top{top:24px;gap:10px;align-items:start}.scrub-top>.eyebrow{max-width:130px;font-size:9px;line-height:1.7}.scrub-mode{font-size:9px;padding:9px 12px}.scrub-mode>span{margin-left:7px}.scrub-content{bottom:92px;display:block}.scrub-content>h2{font-size:23vw}.scrub-copy{margin-top:28px;font-size:13px;flex-direction:row;align-items:end;justify-content:space-between;gap:15px}.scrub-copy>.crosshair{display:none}.scrub-copy>.small-label{font-size:8px;max-width:70px;line-height:1.8}.scrub-bottom{bottom:25px;gap:16px}.scrub-bottom>.small-label{font-size:8px}.services{display:block;padding-top:70px;padding-bottom:65px}.services-heading>h2{font-size:16vw}.services-heading>h2 br:nth-child(2){display:none}.services-heading>.eyebrow{margin-bottom:24px}.services-heading>p:last-child{font-size:12px;max-width:290px;margin-top:22px}.service-list{padding-top:35px}.service-list summary{font-size:35px;padding-block:22px}.service-content{font-size:13px}.service-content ul{font-size:11px}.service-content .text-link{font-size:11px}.contact{padding-top:30px;padding-bottom:30px}.contact-top>.eyebrow{font-size:8px;max-width:220px}.contact-top>.crosshair{transform:scale(.8)}.contact-heading{margin:42px 0}.contact-heading h2{font-size:16vw}.contact-arrow{font-size:25vw}.contact-bottom{flex-direction:column;font-size:12px;gap:22px}.contact-bottom>div{gap:7px}.contact-bottom a{min-height:26px}.footer{padding-top:32px}.footer-top{flex-wrap:wrap;gap:25px;font-size:10px}.footer-brand{width:175px}.footer-top>p{order:3;width:100%}.footer-word{font-size:18vw;line-height:1.2;margin:25px -4px 20px}.footer-bottom{font-size:8px;line-height:1.5;flex-wrap:wrap;gap:12px;justify-content:start}.footer-bottom>span:nth-child(2){margin-left:auto}.footer-bottom>span:last-child{width:100%}.project-dialog-grid{display:block}.project-dialog-grid>img{height:240px}.project-dialog-copy{padding:30px 24px;gap:22px}.project-dialog-copy>h2{font-size:42px}.project-dialog-copy>p:not(.eyebrow){font-size:13px}.dialog-close{min-height:50px;padding:10px 20px}.film-dialog>p{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.film-scene{height:auto}.film-stage{position:relative;height:80svh}.film-frame{left:0!important;width:100%!important;height:100%!important}.film-aside{display:none}.scrub-scene{height:auto}.scrub-stage{position:relative;height:90svh}.scrub-track{display:none}.project-photo>img{transform:none!important}}

/* assets/vendor/lenis-1.3.26.css */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* motion.css */
/* Weighted wheel scrolling, with native touch and reduced-motion fallbacks. */
html.lenis { scroll-behavior: auto !important; }
html { scrollbar-gutter: stable; }

/* Keep the composition still. The drone opens from an inset frame to full bleed. */
.film-frame > video { will-change: transform; }
.scrub-scene { background: var(--paper); }
.scrub-frame { position: absolute; inset: 0; overflow: hidden; background: var(--forest); }
.scrub-stage { --frame-inset: 0px; --frame-radius: 0px; }
.scrub-frame { clip-path: inset(0 var(--frame-inset) round var(--frame-radius)); }
.aerial-window { position: absolute; inset: 0; overflow: hidden; }
.aerial-poster { position: absolute; inset: 0; display: block; }
.aerial-poster img { width: 100%; height: 100%; object-fit: cover; }
#aerial-video { position: absolute; inset: 0; opacity: 0; }
#aerial-video.is-ready { opacity: 1; }
.aerial-window > video { width: 100%; height: 100%; object-fit: cover; transform-origin: 56% 54%; will-change: transform; }
.scrub-scene { height: 310svh; }
.scrub-shade { background: linear-gradient(90deg, #0004, transparent 55%), linear-gradient(0deg, #0008, transparent 58%); }
.scrub-top, .scrub-content, .scrub-bottom { text-shadow: 0 2px 14px #0006; }

/* Warm cream and an aligned pair of photographs give the introduction room to breathe. */
.intro { display: block; padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); background: #f2eee5; color: #202b27; }
.intro-header { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 7vw; align-items: start; }
.intro-title { display: grid; gap: 32px; }
.intro-title > .eyebrow { color: #505a52; }
.intro h2 { font-size: clamp(48px, 6.8vw, 120px); line-height: 1.02; letter-spacing: -.055em; }
.intro h2 > span { display: block; }
.intro h2 em { color: #356252; }
.intro-summary { display: flex; flex-direction: column; align-items: start; gap: 26px; padding-top: 2px; }
.intro-copy { display: grid; gap: 22px; max-width: 520px; }
.intro-copy > p { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.8; color: #505a52; }
.intro-copy > .intro-lead { font-size: clamp(21px, 1.7vw, 28px); line-height: 1.5; color: #202b27; }
.intro-summary > .text-link { color: #244c3e; }
.intro-summary > .text-link:focus-visible { outline-color: #244c3e; }
.intro-images { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 4fr); gap: clamp(16px, 3vw, 48px); align-items: stretch; margin-top: clamp(40px, 5vw, 80px); }
.intro-images > figure { min-width: 0; margin: 0; overflow: hidden; }
.intro-image-site { aspect-ratio: 3 / 2; }
.intro-image-detail { aspect-ratio: 2 / 3; }
.intro-images img { height: 100%; object-fit: cover; }
@media(max-width:1000px) {
  .intro-header { grid-template-columns: 1fr; gap: 36px; }
  .intro-title { gap: 24px; }
  .intro h2 { font-size: clamp(48px, 9vw, 82px); }
  .intro-summary { padding-top: 0; gap: 20px; }
  .intro-copy { grid-template-columns: 1fr 1fr; gap: 6vw; max-width: none; }
  .intro-copy > p { font-size: 15px; }
  .intro-copy > .intro-lead { grid-column: 1 / -1; font-size: 23px; }
}
@media(max-width:680px) {
  .aerial-window > video { object-position: center; }
  .scrub-scene { height: 250svh; }
  .scrub-shade { background: linear-gradient(180deg, #0004, transparent 25%), linear-gradient(0deg, #0009, transparent 64%); }
  .intro { padding-block: 60px; }
  .intro-header { gap: 28px; }
  .intro-title { gap: 22px; }
  .intro h2 { font-size: clamp(36px, 10.2vw, 68px); line-height: 1.06; }
  .intro-copy { grid-template-columns: 1fr; gap: 18px; }
  .intro-copy > p { font-size: 15px; line-height: 1.8; }
  .intro-copy > .intro-lead { font-size: 21px; line-height: 1.5; }
  .intro-images { gap: 12px; margin-top: 34px; }
}
@media(prefers-reduced-motion:reduce) {
  .film-frame > video, .film-poster img, .aerial-window > video { transform: none !important; will-change: auto; }
  .scrub-scene { height: auto; }
  .scrub-frame { clip-path: none; }
}

/* services.css */
/* Service descriptions and architectural cutaways continue the warm introduction. */
.service-overview { padding-top: 0; padding-bottom: clamp(64px, 7vw, 112px); background: #f2eee5; color: #202b27; }
.service-overview-header { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
.service-overview-header h2 { font-size: clamp(42px, 5.2vw, 80px); line-height: 1; letter-spacing: -.05em; }
.service-overview .text-link { color: #244c3e; }
.service-overview .text-link:focus-visible { outline-color: #244c3e; }
.service-rows { border-bottom: 1px solid #244c3e40; }
.service-row { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding-block: 32px; border-top: 1px solid #244c3e40; }
.service-row h3 { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.06; letter-spacing: -.04em; }
.service-row h3 span { display: block; }
.service-description { display: grid; justify-items: start; gap: 20px; }
.service-description p { max-width: 380px; color: #505a52; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.8; }
.service-description .text-link { font-size: 12px; gap: 20px; }
.service-illustration { width: 100%; }
.service-illustration img { width: 100%; height: auto; max-height: 280px; object-fit: contain; }
/* The artwork settles into its row; the text keeps its reading position. */
.has-scroll-motion .service-illustration img {
  opacity: var(--service-opacity, 1);
  transform: translate3d(var(--service-x, 0px), var(--service-y, 0px), 0) scale(var(--service-scale, 1));
}
@media (min-width: 1001px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .has-scroll-motion .service-rows { position: relative; isolation: isolate; }
  .has-scroll-motion .service-row { position: sticky; top: calc(var(--header-height) + 24px); background: #f2eee5; box-shadow: 0 -18px 30px #202b2708; }
  .has-scroll-motion .service-row + .service-row { margin-top: clamp(40px, 8svh, 96px); }
}
@media (max-width: 1000px) {
  .service-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 6vw; padding-block: 36px; }
  .service-row h3 { grid-column: 1; font-size: clamp(32px, 4.2vw, 42px); }
  .service-description { grid-column: 1; }
  .service-illustration { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 560px) {
  .service-overview { padding-bottom: 60px; }
  .service-overview-header { align-items: start; flex-direction: column; gap: 20px; margin-bottom: 24px; }
  .service-overview-header h2 { font-size: 42px; }
  .service-row { grid-template-columns: 1fr; gap: 20px; padding-block: 32px; }
  .service-row h3 { font-size: clamp(32px, 8vw, 42px); }
  .service-description p { font-size: 15px; }
  .service-illustration { grid-column: 1; grid-row: auto; width: min(100%, 340px); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .service-illustration img { opacity: 1 !important; transform: none !important; }
}

/* projects.css */
/* Two distinct sectors, each with a lead project and a supporting example. */
.project-sectors { background: #f2eee5; color: #202b27; }
.project-index { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 30px; border-top: 1px solid #202b2733; }
.project-index h2 { font-size: clamp(24px, 2.5vw, 38px); letter-spacing: -.035em; }
.sector-links { display: flex; gap: clamp(24px, 4vw, 64px); }
.sector-links a { display: flex; align-items: center; gap: 24px; min-height: 44px; font-size: 13px; font-weight: 600; }
.sector-links a span { font-size: 24px; }
.sector-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.project-sector { padding-top: clamp(32px, 4vw, 64px); padding-bottom: clamp(64px, 8vw, 128px); }
.sector-heading { margin: 0 0 clamp(30px, 4vw, 64px); font-size: clamp(68px, 12.2vw, 210px); line-height: .94; letter-spacing: -.055em; font-weight: 500; }
.sector-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: 'lead companion'; gap: clamp(28px, 5vw, 96px); align-items: stretch; }
.work-card-lead { grid-area: lead; }
.sector-companion { grid-area: companion; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.sector-description { font-family: var(--display); font-size: clamp(24px, 2.6vw, 42px); line-height: 1.2; letter-spacing: -.025em; }
.work-card { position: relative; min-width: 0; }
.work-image { overflow: hidden; background: #dedbd2; aspect-ratio: 3 / 2; }
.work-card-lead .work-image { aspect-ratio: 4 / 3; }
.work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work-caption { padding: 20px 56px 0 0; }
.work-caption h4 { margin: 0; font-family: var(--display); font-size: clamp(24px, 2vw, 34px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.work-card-lead h4 { font-size: clamp(32px, 3.3vw, 58px); }
.work-caption button { padding: 0; background: transparent; font: inherit; letter-spacing: inherit; text-align: left; }
.work-caption p { margin-top: 9px; color: #505a52; font-size: 12px; line-height: 1.6; }
/* The real button is in the heading; its hit area covers the full project. */
.work-caption button::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.work-caption button:focus-visible { outline: none; }
.work-caption button:focus-visible::after { outline: 3px solid #244c3e; outline-offset: 7px; }
.work-arrow { position: absolute; right: 0; bottom: 7px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #202b2766; border-radius: 50%; font-size: 26px; transition: background-color .25s, color .25s; }
.work-card:hover .work-arrow, .work-card:focus-within .work-arrow { background: #202b27; color: #f2eee5; }
.sector-commercial { background: #e3e5dd; }
.sector-commercial .sector-heading { text-align: right; }
.sector-commercial .sector-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: 'companion lead'; }
.project-sectors a:focus-visible { outline-color: #244c3e; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work-card:hover .work-image img { transform: scale(1.035); }
}
@media (max-width: 1000px) {
  .sector-layout { gap: 28px; }
  .sector-description { font-size: clamp(22px, 2.6vw, 28px); }
  .work-caption { padding-right: 42px; }
  .work-arrow { width: 34px; height: 34px; font-size: 22px; }
}
@media (max-width: 800px) {
  .sector-layout, .sector-commercial .sector-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lead' 'companion'; gap: 40px; }
  .sector-companion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .sector-description { font-size: clamp(24px, 3.7vw, 30px); }
  .sector-commercial .sector-heading { text-align: left; }
  .work-caption h4 { font-size: 26px; }
  .work-card-lead h4 { font-size: clamp(32px, 5.5vw, 44px); }
}
@media (max-width: 560px) {
  .project-index { align-items: start; flex-direction: column; gap: 8px; padding-block: 24px; }
  .sector-links { width: 100%; justify-content: space-between; gap: 20px; }
  .sector-links a { font-size: 12px; gap: 12px; }
  .sector-heading { font-size: clamp(48px, 12.4vw, 70px); letter-spacing: -.05em; margin-bottom: 28px; }
  .project-sector { padding-top: 32px; padding-bottom: 56px; }
  .sector-companion { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sector-description { font-size: 25px; line-height: 1.25; }
  .sector-description br { display: none; }
  .sector-companion .work-card { width: 88%; margin-left: auto; }
  .work-caption { padding-top: 16px; }
  .work-caption p { font-size: 11px; margin-top: 7px; }
  .work-caption h4 { font-size: 25px; }
  .work-card-lead h4 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-image img { transform: none !important; }
}

/* hero.css */
/* Original overlapping composition, with warm cream in place of charcoal. */
:root { --header-height: 100px; --hero-height: 100svh; --hero-video-gap: 16px; --hero-video-top: calc(var(--header-height) + var(--hero-video-gap)); --hero-ink: #202b27; --hero-paper: #f2eee5; --hero-title: #41c5ad; }
html { scroll-padding-top: calc(var(--header-height) + 20px); }
.header { position: fixed; inset: 0 0 auto; height: var(--header-height); padding-top: 24px; z-index: 40; color: #fff; background: #161918; border-color: #ffffff1a; transition: color .25s ease, background-color .3s ease, border-color .3s ease; }
.header::before { content: ''; position: absolute; inset: 0 0 -36px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #161918b3, #16191866 calc(100% - 36px), transparent); opacity: 0; transition: opacity .3s ease; }
.header.is-over-hero:not(.menu-is-open) { background: transparent; border-color: transparent; }
.header.is-over-hero:not(.menu-is-open)::before { opacity: 1; }
.header.is-over-paper:not(.menu-is-open) { color: var(--hero-ink); background: transparent; }
.header.is-over-paper:not(.menu-is-open)::before { background: linear-gradient(180deg, #f2eee5e6, #f2eee580 calc(100% - 36px), transparent); opacity: 1; }
.header .brand-wordmark::after { background: currentColor; }
.header .navigation > a:not(.nav-contact)::after { background: currentColor; }
.header .nav-contact { color: #10392f; background: #41c5ad; border-color: #41c5ad; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.header .nav-contact:hover { color: #10392f; background: #67d2be; border-color: #67d2be; }
.header .nav-contact:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; box-shadow: 0 0 0 6px #f2eee5; }
.navigation { font-size: 13px; }

/* Static reading order is also the no-JavaScript/reduced-motion layout. */
.film-scene { height: auto; background: var(--hero-paper); color: var(--hero-ink); }
.film-stage { position: relative; top: 0; height: auto; isolation: isolate; }
.film-frame { left: 35%; width: 42%; top: var(--hero-video-top); height: calc(var(--hero-height) - var(--hero-video-top)); background: var(--hero-ink); }
.film-frame > video { transform-origin: 55% 48%; }
.film-poster { position: absolute; inset: 0; display: block; }
.film-poster img { width: 100%; height: 100%; object-fit: cover; transform-origin: 55% 48%; }
#opening-video { position: absolute; inset: 0; opacity: 0; }
#opening-video.is-ready { opacity: 1; }
.film-frame > .film-finish { display: none; position: absolute; inset: 0; object-position: center; transform-origin: 50% 54%; opacity: var(--finish-opacity, 0); transition: opacity .18s linear; }
.film-shade { background: linear-gradient(0deg, #0009, #0003 28%, transparent 60%); opacity: var(--hero-shade-opacity, 1); }

.opening { position: relative; z-index: 3; min-height: var(--hero-height); padding: 120px var(--gutter) clamp(38px, 6svh, 72px); display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; pointer-events: none; }
.headline-layout h1 { font-size: clamp(72px, 13.1vw, 235px); line-height: .88; letter-spacing: -.06em; font-weight: 550; color: var(--hero-title); text-shadow: 0 1px 1px #10392f24; }
.headline-layout h1 > span + span { margin-top: 6px; }
.headline-layout h1 > span { overflow: visible; padding-bottom: .14em; margin-bottom: -.14em; }
.headline-layout h1 > span > span { display: block; }
.hero-word { position: relative; }
.hero-solid { display: block; }
.hero-outline { display: none; position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px var(--hero-title); pointer-events: none; }
.film-headline { position: relative; z-index: 2; padding: 44px var(--gutter); margin: 0; color: var(--forest); background: var(--paper); font-size: clamp(36px, 6.8vw, 116px); line-height: 1.04; letter-spacing: -.045em; font-weight: 500; pointer-events: none; }
.film-headline > span { display: block; }
.film-headline > span > span { display: block; }
.scrub-stage { top: var(--header-height); height: calc(100svh - var(--header-height)); }

/* Scroll clears the first statement before introducing the next. */
.has-scroll-motion .film-scene { height: calc(285svh + var(--hero-height)); isolation: isolate; z-index: 0; }
.has-scroll-motion .film-stage { position: sticky; top: 0; height: var(--hero-height); }
/* Every following section must cover the extended hero, including on tall viewports. */
.has-scroll-motion .film-scene ~ section { position: relative; z-index: 1; }
.has-scroll-motion .intro { margin-top: calc(-1 * var(--hero-height)); }
.has-scroll-motion .film-frame { top: var(--hero-video-top); height: calc(100% - var(--hero-video-top)); }
.has-scroll-motion .film-finish { display: block; }
.has-scroll-motion .opening { position: absolute; inset: 0; min-height: 0; opacity: var(--hero-intro-opacity, 1); }
.has-scroll-motion .film-headline { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(46px, 8svh, 100px); padding: 0; color: #fff; background: none; text-shadow: 0 2px 18px #0003; }
.has-scroll-motion .film-headline > span { overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.has-scroll-motion .story-idea > span { opacity: var(--idea-opacity, 0); transform: translate3d(0, var(--idea-rise, 112%), 0); }
.has-scroll-motion .story-detail { margin-top: .06em; font-size: 1.08em; }
.has-scroll-motion .story-detail > span { opacity: var(--detail-opacity, 0); transform: translate3d(0, var(--detail-rise, 112%), 0); }


/* A stepped cream edge echoes the offset opening frame. The title leads;
   the lower copy column leaves the finished film visible a little longer. */
.intro { --intro-step: clamp(80px, 8vw, 144px); --intro-cut: 58%; isolation: isolate; }
#intro-heading em { color: #41c5ad; }
.has-scroll-motion .intro { background: transparent; }
.has-scroll-motion .intro::before,
.has-scroll-motion .intro::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  background: #f2eee5;
}
.has-scroll-motion .intro::before { inset: var(--intro-step) 0 0; }
.has-scroll-motion .intro::after { inset: 0 auto auto 0; width: var(--intro-cut); height: var(--intro-step); }
.has-scroll-motion .intro-summary { padding-top: calc(var(--intro-step) + 2px); }

/* Each photograph follows its own text column, continuing the stepped rhythm. */
.intro-column { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 64px); min-width: 0; }
.intro-column > figure { margin: 0; min-width: 0; overflow: hidden; width: 100%; }
.intro-column > .intro-image-detail { width: 78%; align-self: flex-start; }
.intro-column img { height: 100%; object-fit: cover; }

/* Let the wording arrive quietly, then remain still for reading. No text masks. */
@media (prefers-reduced-motion: no-preference) {
  .intro.has-text-entrance #intro-heading > span,
  .intro.has-text-entrance .intro-summary {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .8s ease, transform .85s cubic-bezier(.22, 1, .36, 1);
  }
  .intro.has-text-entrance #intro-heading > span:nth-child(2) { transition-delay: .07s; }
  .intro.has-text-entrance #intro-heading > span:nth-child(3) { transition-delay: .14s; }
  .intro.has-text-entrance .intro-summary { transition-delay: .1s; }
  .intro.has-text-entrance #intro-heading > .text-has-arrived,
  .intro.has-text-entrance .intro-summary.text-has-arrived,
  .intro.has-text-entrance .intro-summary:focus-within { opacity: 1; transform: none; }

  /* The frames stay aligned; the photographs gently open and settle inside them. */
  .intro.has-image-entrance .intro-column > figure {
    opacity: 0;
    clip-path: inset(0 0 14% 0);
    transition: opacity .9s ease, clip-path 1.15s cubic-bezier(.22, 1, .36, 1);
  }
  .intro.has-image-entrance .intro-column img {
    transform: translate3d(0, 10px, 0) scale(1.035);
    transition: transform 1.25s cubic-bezier(.22, 1, .36, 1);
  }
  .intro.has-image-entrance .intro-column > .intro-image-detail,
  .intro.has-image-entrance .intro-image-detail img { transition-delay: .16s; }
  .intro.has-image-entrance .intro-column > .image-has-arrived { opacity: 1; clip-path: inset(0); }
  .intro.has-image-entrance .image-has-arrived img { transform: none; }
}
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .intro.has-image-entrance .intro-column > figure:not(.image-has-arrived) { clip-path: inset(0 0 8% 0); }
  .intro.has-image-entrance .intro-column > figure:not(.image-has-arrived) img { transform: scale(1.02); }
}
@media (max-width: 1000px) {
  .intro { --intro-step: 56px; --intro-cut: 78%; }
  .intro-header { grid-template-columns: minmax(0, 9fr) minmax(0, 4fr); gap: 36px clamp(16px, 3vw, 48px); }
  .intro-column { display: contents; }
  .intro-title { grid-column: 1 / -1; grid-row: 1; }
  .intro-summary { grid-column: 1 / -1; grid-row: 2; }
  .intro-column > .intro-image-site { grid-column: 1; grid-row: 3; }
  .intro-column > .intro-image-detail { grid-column: 2; grid-row: 3; width: 100%; align-self: start; }
  .has-scroll-motion .intro-summary { padding-top: 0; }
}
@media (max-width: 680px) {
  .intro { --intro-step: 36px; }
  .intro-header { gap: 28px 12px; }
  .intro.has-text-entrance #intro-heading > span:not(.text-has-arrived),
  .intro.has-text-entrance .intro-summary:not(.text-has-arrived):not(:focus-within) { transform: translate3d(0, 14px, 0); }
}

/* A short drawing-to-solid entrance, followed by a still, readable headline. */
@supports (-webkit-text-stroke: 1px #fff) {
  @media (prefers-reduced-motion: no-preference) {
    .opening.has-entered .hero-outline { display: block; animation: hero-outline-in 1.3s var(--ease) both; }
    .opening.has-entered .hero-solid { animation: hero-type-fill 1.3s var(--ease) both; }
    .opening.has-entered h1 > span:nth-child(2) .hero-outline,
    .opening.has-entered h1 > span:nth-child(2) .hero-solid { animation-delay: .18s; }
  }
}
@keyframes hero-outline-in {
  0% { clip-path: inset(-.12em 100% -.22em 0); opacity: 1; }
  32%, 70% { clip-path: inset(-.12em -.04em -.22em -.04em); opacity: 1; }
  100% { clip-path: inset(-.12em -.04em -.22em -.04em); opacity: 0; }
}
/* Tight line boxes exclude some glyph ink: include descenders in the reveal mask. */
@keyframes hero-type-fill {
  0%, 28% { clip-path: inset(calc(100% + .22em) -.04em -.22em -.04em); }
  88%, 100% { clip-path: inset(-.12em -.04em -.22em -.04em); }
}

@media (max-width: 1000px) and (min-width: 681px) {
  .navigation { gap: 20px; font-size: 12px; }
  .nav-contact { padding-inline: 15px !important; }
}
@media (max-width: 680px) {
  :root { --header-height: 82px; }
  .header { padding-top: 12px; }
  .navigation { top: calc(var(--header-height) - 1px); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; color: #fff; background: var(--hero-ink); border-color: #ffffff1a; box-shadow: 0 15px 22px #0002; }
  .film-frame { left: 17%; width: calc(80% - var(--gutter)); }
  .opening { padding-top: 110px; padding-bottom: 38px; gap: 24px; }
  .headline-layout h1 { font-size: 13.8vw; line-height: .96; letter-spacing: -.055em; }
  .film-headline { padding-block: 34px; font-size: 8.6vw; line-height: 1.12; letter-spacing: -.035em; }
  .has-scroll-motion .film-scene { height: calc(252svh + var(--hero-height)); }
  .has-scroll-motion .film-headline { bottom: 48px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .opening { padding-top: 56px; padding-bottom: 18px; gap: 16px; }
  .headline-layout h1 { font-size: min(11vw, 13svh); }
  .film-headline { font-size: clamp(30px, 5.3vw, 66px); }
  .has-scroll-motion .film-headline { bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub-stage { position: relative; top: 0; }
  .film-frame { top: var(--hero-video-top); height: calc(var(--hero-height) - var(--hero-video-top)) !important; }
  .opening, .film-headline { opacity: 1; }
  .intro.has-text-entrance #intro-heading > span,
  .intro.has-text-entrance .intro-summary { opacity: 1; transform: none !important; }
}

/* Review-only hero action. The approved header and typography stay in place. */
.film-scene .opening { gap: clamp(22px, 3svh, 30px); }
.hero-project-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 56px;
  max-width: 100%;
  padding: 16px 24px;
  border: 1px solid #268571;
  background: #41c5ad;
  color: #10392f;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-project-cta:focus-visible {
  outline: 2px solid #10392f;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px #f2eee5;
}
@media (hover: hover) {
  .hero-project-cta:hover { background: #67d2be; border-color: #10392f; transform: translateY(-1px); }
}
.hero-project-cta:active { transform: translateY(1px); }
@media (max-width: 680px) {
  .film-scene .opening { gap: 22px; padding-bottom: 32px; }
  .hero-project-cta { min-height: 54px; padding: 15px 23px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .film-scene .opening { gap: 16px; padding-bottom: 18px; }
  .hero-project-cta { min-height: 48px; padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-project-cta { transition: none; transform: none; }
}

/* services-layout.css */
/* Keep the services heading with its rows, below the introduction photographs. */
.service-overview { position: relative; background: #f2eee5; }
.service-overview-header {
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(28px, 2.5vw, 40px);
}
.service-overview-header > .text-link { flex-shrink: 0; margin-bottom: 4px; }
.service-overview-header h2 { font-size: clamp(48px, 6.8vw, 108px); line-height: 1.02; letter-spacing: -.055em; }
.service-row {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 7vw;
  padding-block: clamp(36px, 4vw, 64px);
  min-height: 420px;
}
.service-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
.service-row h3 { font-size: clamp(42px, 5.2vw, 80px); line-height: 1.02; letter-spacing: -.05em; }
.service-description p { max-width: 460px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; }
.service-illustration { grid-column: 2; grid-row: auto; width: 100%; }
.service-illustration img { max-height: 420px; }
@media (min-width: 1001px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .has-scroll-motion .service-row { box-shadow: none; }
}
/* Headings and descriptions enter as a unit; artwork uses the existing scroll settle. */
@media (prefers-reduced-motion: no-preference) {
  .service-overview.has-service-entrance .service-overview-header,
  .service-overview.has-service-entrance .service-copy {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .8s ease, transform .85s cubic-bezier(.22, 1, .36, 1);
  }
  .service-overview.has-service-entrance .service-text-arrived,
  .service-overview.has-service-entrance .service-copy:focus-within,
  .service-overview.has-service-entrance .service-overview-header:focus-within { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
  .service-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; gap: 5vw; }
  .service-row h3 { font-size: clamp(36px, 5vw, 52px); }
  .service-copy { gap: 24px; }
}
@media (max-width: 680px) {
  .service-overview-header h2 { font-size: clamp(42px, 10.2vw, 68px); }
  .service-overview-header { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .service-overview-header > .text-link { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .service-row { grid-template-columns: 1fr; gap: 28px; padding-block: 36px; }
  .service-copy { gap: 20px; }
  .service-row h3 { font-size: clamp(34px, 8.8vw, 48px); }
  .service-description p { font-size: 15px; }
  .service-illustration { grid-column: 1; grid-row: auto; width: 100%; max-width: 380px; justify-self: center; }
}

/* projects-transition.css */
/* A stepped stone panel connects the service drawings to the finished work. */
.project-sectors {
  --project-paper: #e6e2d8;
  --project-step: clamp(36px, 5vw, 80px);
  position: relative;
  isolation: isolate;
  background: var(--project-paper);
}
.project-sectors::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--project-step));
  right: 0;
  width: calc(var(--gutter) + (100% - 2 * var(--gutter) - 7vw) * 5 / 12);
  height: var(--project-step);
  background: var(--project-paper);
  pointer-events: none;
}
.service-rows { border-bottom: 0; }
.project-index {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 7vw;
  border-top: 0;
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(32px, 3.5vw, 56px);
}
.project-index h2 { font-size: clamp(42px, 5.8vw, 88px); line-height: 1.04; letter-spacing: -.05em; }
.project-index .sector-links { justify-content: space-between; gap: 24px; padding-bottom: 3px; }
.project-index .sector-links a { gap: 16px; }
.sector-residential { padding-top: 0; padding-bottom: clamp(96px, 9vw, 144px); }

/* The second category reverses the step and image balance within the same gallery. */
.sector-commercial {
  --commercial-paper: #d8e3dc;
  --sector-step: clamp(36px, 4.5vw, 72px);
  position: relative;
  padding-top: clamp(48px, 5vw, 80px);
  background: var(--commercial-paper);
}
.sector-commercial::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(-1 * var(--sector-step));
  width: calc(var(--gutter) + (100% - 2 * var(--gutter) - clamp(28px, 5vw, 96px)) / 3);
  height: var(--sector-step);
  background: var(--commercial-paper);
  pointer-events: none;
}

/* Let the final service pause briefly as the project panel passes over it. */
@media (min-width: 1001px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .has-scroll-motion .service-overview { --project-handover: clamp(120px, 20svh, 180px); padding-bottom: 0; }
  .has-scroll-motion .service-rows::after { content: ''; display: block; height: var(--project-handover); }
  .has-scroll-motion .project-sectors { margin-top: calc(-1 * clamp(120px, 20svh, 180px)); }
}

/* Reveal once, then leave the photographs still for browsing. */
@media (prefers-reduced-motion: no-preference) {
  .has-project-entrance .project-index,
  .has-project-entrance .project-sector .sector-heading {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  }
  .has-project-entrance .project-sector .work-image {
    opacity: 0;
    clip-path: inset(0 0 10% 0);
    transition: opacity .9s ease, clip-path 1.15s cubic-bezier(.22, 1, .36, 1);
  }
  .has-project-entrance .project-sector .work-image img { transform: scale(1.035); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
  .has-project-entrance .project-sector .sector-companion .work-image { transition-delay: .12s; }
  .has-project-entrance .project-index.project-has-arrived,
  .has-project-entrance .project-index:focus-within,
  .has-project-entrance .project-sector .sector-heading.project-has-arrived { opacity: 1; transform: none; }
  .has-project-entrance .project-sector .work-image.project-has-arrived,
  .has-project-entrance .project-sector .work-card:focus-within .work-image { opacity: 1; clip-path: inset(0); }
  .has-project-entrance .project-sector .work-image.project-has-arrived img,
  .has-project-entrance .project-sector .work-card:focus-within .work-image img { transform: none; }
}
@media (max-width: 1000px) {
  .project-sectors::before { width: 38%; }
  .sector-commercial::before { width: calc(var(--gutter) + (100% - 2 * var(--gutter) - 28px) / 3); }
}
@media (max-width: 800px) {
  .project-index { grid-template-columns: 1fr; gap: 24px; }
  .sector-commercial::before { width: 38%; }
  .project-index .sector-links { justify-content: flex-start; gap: 48px; }
}
@media (max-width: 560px) {
  .project-sectors { --project-step: 28px; }
  .sector-residential { padding-bottom: 72px; }
  .sector-commercial { --sector-step: 28px; padding-top: 36px; }
  .sector-commercial::before { width: 30%; }
  .project-sectors::before { width: 30%; }
  .project-index { padding-top: 36px; padding-bottom: 32px; gap: 16px; }
  .project-index h2 { font-size: clamp(40px, 10.8vw, 56px); }
  .project-index .sector-links { justify-content: space-between; gap: 20px; padding-bottom: 0; }
  .project-index .sector-links a { gap: 12px; }
}

/* aerial-story.css */
/* Commercial's sage surface opens into a film with a clear enquiry purpose. */
.sector-commercial { padding-bottom: clamp(64px, 6vw, 96px); }
.scrub-scene { height: auto; background: #d8e3dc; color: #f2eee5; }
.scrub-stage { position: relative; top: 0; height: auto; }
.scrub-frame { position: relative; inset: auto; clip-path: none; background: #161918; }
.scrub-shade { background: #101a14b8; }
.scrub-top { position: relative; inset: auto; padding: 28px var(--gutter) 0; gap: 24px; align-items: center; }
.scrub-top > .eyebrow { max-width: none; font-size: 10px; }
.scrub-mode { border-radius: 0; background: #16191855; font-size: 11px; min-height: 44px; }
.aerial-story { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw; padding: 64px var(--gutter); }
.aerial-chapter { min-width: 0; }
.aerial-chapter h3 { font-family: var(--display); font-size: clamp(28px, 3vw, 44px); font-weight: 500; line-height: 1.04; letter-spacing: -.045em; }
.aerial-chapter p { max-width: 480px; margin-top: 24px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; color: #f2eee5; }
.scrub-bottom { position: relative; inset: auto; padding: 0 var(--gutter) 32px; justify-content: space-between; gap: 32px; }
.aerial-progress { display: none; align-items: center; gap: 20px; width: min(220px, 28%); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aerial-inquiry { color: #f2eee5; border-color: #f2eee580; margin-left: auto; font-size: 14px; min-height: 44px; }
.aerial-inquiry:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* Without scroll motion, every message remains readable in ordinary page flow. */
@media (max-width: 800px) {
  .aerial-story { grid-template-columns: 1fr; gap: 48px; padding-block: 48px; }
  .aerial-chapter h3 { font-size: clamp(34px, 6vw, 48px); }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .has-scroll-motion .scrub-scene { height: 310svh; }
  .has-scroll-motion .scrub-stage { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); }
  .has-scroll-motion .scrub-frame { position: absolute; inset: var(--frame-lift, 0px) var(--frame-inset, 0px) 0; }
  .has-scroll-motion .scrub-shade { background: linear-gradient(90deg, #101a14c4, #101a1466 58%, #101a140d), linear-gradient(0deg, #101a1480, transparent 50%); }
  .has-scroll-motion .scrub-top { position: absolute; inset: 28px var(--gutter) auto; padding: 0; }
  .has-scroll-motion .aerial-story { display: block; position: absolute; inset: auto var(--gutter) 120px; padding: 0; }
  .has-scroll-motion .aerial-chapter {
    position: absolute; left: 0; bottom: 0; width: min(800px, 82%);
    opacity: var(--chapter-opacity, 0);
    transform: translate3d(0, var(--chapter-y, 12px), 0);
  }
  .has-scroll-motion .aerial-chapter:first-child { --chapter-opacity: 1; --chapter-y: 0px; }
  .has-scroll-motion .aerial-chapter h3 { font-size: clamp(48px, 6.5vw, 96px); line-height: 1; }
  .has-scroll-motion .scrub-bottom { position: absolute; inset: auto var(--gutter) 28px; padding: 0; }
  .has-scroll-motion .aerial-progress { display: flex; }
  .has-scroll-motion .scrub-track { display: block; }
}
@media (max-width: 680px) {
  .scrub-top { gap: 14px; padding-top: 20px; }
  .scrub-top > .eyebrow { font-size: 8px; }
  .scrub-mode { font-size: 10px; padding: 9px 10px; }
  .aerial-chapter p { font-size: 15px; line-height: 1.6; margin-top: 20px; }
  .aerial-inquiry { font-size: 12px; gap: 16px; }
  .aerial-progress { width: 84px; gap: 10px; font-size: 10px; }
  .scrub-bottom { gap: 20px; }
}
@media (max-width: 680px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .has-scroll-motion .scrub-scene { height: 250svh; }
  .has-scroll-motion .scrub-shade { background: linear-gradient(180deg, #101a1455, #101a1426 28%, #101a14b8 68%, #101a14d1); }
  .has-scroll-motion .scrub-top { top: 20px; }
  .has-scroll-motion .aerial-story { bottom: 112px; }
  .has-scroll-motion .aerial-chapter { width: 100%; }
  .has-scroll-motion .aerial-chapter h3 { font-size: clamp(32px, 9.4vw, 52px); }
  .has-scroll-motion .scrub-bottom { bottom: 24px; }
}

/* contact-finish.css */
/* The final film gives way to a calm, useful invitation. */
.contact {
  --contact-step: clamp(36px, 5vw, 80px);
  position: relative;
  z-index: 8;
  background: #f2eee5;
  color: #10392f;
  padding-block: clamp(64px, 7vw, 112px) clamp(72px, 8vw, 128px);
  scroll-margin-top: -20px;
}
.contact::before {
  display: none;
  content: '';
  position: absolute;
  height: var(--contact-step);
  top: calc(-1 * var(--contact-step) + 1px);
  left: 50%;
  right: 0;
  background: inherit;
}
.contact-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 8vw; align-items: start; }
.contact-copy { min-width: 0; }
.contact-copy > .eyebrow { margin-bottom: 28px; }
.contact-title { font-family: var(--display); font-size: clamp(60px, 7.5vw, 118px); font-weight: 500; line-height: .96; letter-spacing: -.055em; }
.contact-title > span { display: block; }
.contact-title em { color: #41c5ad; font-style: normal; }
.contact-intro { max-width: 355px; margin-top: 32px; font-size: 17px; line-height: 1.65; }
.contact-direct { display: grid; justify-items: start; gap: 6px; margin-top: 48px; }
.contact-direct p { margin-bottom: 8px; font-size: 12px; color: #50625b; }
.contact-direct a { min-height: 44px; display: inline-flex; align-items: center; max-width: 100%; font-size: clamp(15px, 1.5vw, 21px); text-decoration: underline; text-decoration-color: #10392f50; text-underline-offset: 6px; overflow-wrap: anywhere; }
.contact-direct a:first-of-type { font-size: clamp(26px, 3vw, 40px); font-family: var(--display); letter-spacing: -.035em; text-decoration: none; }
.contact-direct a:hover { color: #218574; }
.contact a:focus-visible { outline: 2px solid #10392f; outline-offset: 5px; }
.contact-form-wrap { min-width: 0; }
.contact .dmc-form {
  --dmc-accent: #10392f;
  --dmc-text: #10392f;
  --dmc-muted: #50625b;
  --dmc-bg: transparent;
  --dmc-border: #89988c;
  --dmc-radius: 0px;
  max-width: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}
.contact .dmc-form legend { font-family: var(--display); font-size: 24px; letter-spacing: -.025em; font-weight: 500; margin-bottom: 20px; }
.contact .dmc-topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact .dmc-topic { min-height: 58px; padding: 14px 16px; align-items: center; gap: 12px; background: transparent; }
.contact .dmc-topic input { margin-top: 0; width: 17px; height: 17px; }
.contact .dmc-topic strong { font-weight: 500; }
.contact .dmc-topic:has(input:checked) { background: #d8e3dc; box-shadow: none; }
.contact .dmc-topic:focus-within { outline: 2px solid #10392f; outline-offset: 3px; }
.contact .dmc-form fieldset { margin-bottom: 28px; }
.contact .dmc-fields { gap: 24px 20px; }
.contact .dmc-field > label { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.contact .dmc-field > label span { font-size: 11px; margin-left: 4px; }
.contact .dmc-field input, .contact .dmc-field textarea { background: #ffffff40; font-size: 16px; min-height: 50px; padding: 12px; }
.contact .dmc-field textarea { min-height: 128px; }
.contact .dmc-upload-control { min-height: 64px; padding: 12px 16px; }
.contact .dmc-upload-control strong { font-weight: 500; font-size: 13px; }
.contact .dmc-upload-control:focus-within { outline: 2px solid #10392f; outline-offset: 3px; }
.contact .dmc-upload-control::after { overflow-wrap: anywhere; }
.contact .dmc-upload-help { font-size: 11px; line-height: 1.6; }
.contact .dmc-consent { font-size: 12px; line-height: 1.6; gap: 12px; margin: 24px 0; }
.contact .dmc-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; }
.contact .dmc-consent input:focus-visible { outline: 2px solid #10392f; outline-offset: 3px; }
.contact .dmc-submit { display: flex; align-items: center; justify-content: space-between; border-radius: 0; padding: 18px 22px; min-height: 62px; font-weight: 500; font-size: 16px; color: #10392f; background: #41c5ad; }
.contact .dmc-submit::after { content: ''; display: block; flex: 0 0 auto; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019%2019%205M5%205h14v14%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019%2019%205M5%205h14v14%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.contact .dmc-submit:hover { background: #67d2be; filter: none; }
.contact .dmc-submit:focus-visible { outline: 2px solid #10392f; outline-offset: 4px; }
.contact-preview-note { margin-top: 16px; color: #50625b; font-size: 11px; line-height: 1.65; max-width: 440px; }
.contact .dmc-form--success { min-height: 420px; border-block: 1px solid #89988c; }
.contact .dmc-success-panel { text-align: left; padding: 32px 0; }
.contact .dmc-success-panel h2 { color: #10392f; }
.contact .dmc-success-icon { margin-left: 0; }
.contact .dmc-success-icon::before, .contact .dmc-success-icon::after { display: none; }
.contact .dmc-field-error { color: #962d23; }
.contact [aria-invalid='true'] { border-color: #962d23; }
.contact .dmc-trap { left: 0 !important; clip-path: inset(50%); }
.contact-fallback { border-top: 1px solid #89988c; padding-top: 24px; font-size: 18px; line-height: 1.65; }

@media (max-width: 1000px) {
  .contact-layout { grid-template-columns: 1fr 1.1fr; gap: 5vw; }
  .contact-title { font-size: clamp(48px, 7.4vw, 74px); }
  .contact-intro { font-size: 15px; }
  .contact-direct a { font-size: 14px; }
}
@media (max-width: 800px) {
  .contact { --contact-step: 32px; padding-top: 48px; padding-bottom: 64px; }
  .contact::before { left: 68%; }
  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .contact-title { font-size: clamp(58px, 11vw, 88px); }
  .contact-copy > .eyebrow { margin-bottom: 24px; }
  .contact-intro { margin-top: 24px; max-width: 450px; }
  .contact-direct { margin-top: 28px; gap: 0; }
  .contact-direct p { margin-bottom: 2px; }
  .contact-direct a { font-size: 15px; }
  .contact .dmc-form { border-top: 1px solid #89988c; padding-top: 32px; }
  .contact .dmc-topic { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .contact .dmc-topic-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .has-scroll-motion .scrub-scene { --contact-overlap: 45svh; height: calc(310svh + var(--contact-overlap)); }
  .has-scroll-motion .contact { margin-top: -45svh; }
  .has-scroll-motion .contact::before { display: block; }
  .contact.has-contact-entrance .contact-title > span,
  .contact.has-contact-entrance .contact-intro { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
  .contact.has-contact-entrance .contact-title > .contact-has-arrived,
  .contact.has-contact-entrance .contact-intro.contact-has-arrived { opacity: 1; transform: none; }
}
@media (max-width: 680px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .has-scroll-motion .scrub-scene { --contact-overlap: 28svh; height: calc(250svh + var(--contact-overlap)); }
  .has-scroll-motion .contact { margin-top: -28svh; }
}

/* testimonials-editorial.css */
/* A quiet editorial pause between the projects and the final film. */
.testimonials {
  --testimonial-paper: #f2eee5;
  position: relative;
  z-index: 2;
  padding-block: clamp(56px, 6vw, 96px) clamp(40px, 4vw, 64px);
  background: var(--testimonial-paper);
  color: #202b27;
}
.testimonials::before {
  content: '';
  position: absolute;
  top: -32px;
  right: 0;
  width: 64%;
  height: 32px;
  background: var(--testimonial-paper);
  pointer-events: none;
}
.testimonials-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  border-top: 1px solid #202b2730;
  padding-top: clamp(28px, 3vw, 48px);
}
.testimonials-heading .eyebrow { margin-bottom: 28px; }
.testimonials h2 {
  font-size: clamp(56px, 7.2vw, 112px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 500;
}
.testimonials h2 span { display: block; }
.testimonials h2 span:last-child { color: #41c5ad; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(36px, 4vw, 56px);
}
.testimonial { min-width: 0; margin: 0; }
.testimonial blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 1.9vw, 29px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.3;
  text-wrap: pretty;
}
.testimonial-lead { grid-column: 1 / -1; }
.testimonial-lead blockquote {
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.14;
  letter-spacing: -.035em;
}
.testimonial-mark {
  display: block;
  height: 58px;
  font-family: Georgia, serif;
  font-size: 112px;
  line-height: .95;
  color: #41c5ad;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}
.testimonial figcaption::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .5; }
.testimonial:not(.testimonial-lead) { border-top: 1px solid #202b2730; padding-top: 26px; }
.testimonials + .scrub-scene { background: #f2eee5; }

/* Pick up the quote column, then open the picture before its camera move starts. */
@media (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .has-scroll-motion .testimonials + .scrub-scene.has-testimonial-handover .scrub-frame {
    inset: 0 var(--handover-right, 0px) 0 var(--handover-left, 0px);
  }
  .has-scroll-motion .testimonials + .scrub-scene.has-testimonial-handover .aerial-story {
    opacity: var(--handover-copy, 1);
    transform: translate3d(0, var(--handover-rise, 0px), 0);
  }
}

/* Quotes remain visible without JavaScript and when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .testimonials.has-testimonial-reveal .testimonial-enter {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .75s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  }
  .testimonials.has-testimonial-reveal .testimonial-enter.is-visible { opacity: 1; transform: none; }
  .testimonials.has-testimonial-reveal .testimonial-lead { transition-delay: .08s; }
}
@media (max-width: 900px) {
  .testimonials-layout { grid-template-columns: 1fr; gap: 36px; }
  .testimonials-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
  .testimonials-heading .eyebrow { margin: 8px 0 0; }
  .testimonials h2 { font-size: clamp(60px, 9vw, 80px); }
  .testimonials h2 span { display: inline; }
  .testimonial-lead blockquote { font-size: clamp(34px, 5vw, 44px); max-width: 23ch; }
}
@media (max-width: 560px) {
  .testimonials { padding-top: 36px; padding-bottom: 36px; }
  .testimonials::before { height: 24px; top: -24px; width: 32%; }
  .testimonials-layout { padding-top: 24px; gap: 32px; }
  .testimonials-heading { display: block; }
  .testimonials-heading .eyebrow { margin: 0 0 20px; }
  .testimonials h2 { font-size: clamp(46px, 12.6vw, 66px); }
  .testimonial-grid { grid-template-columns: 1fr; gap: 30px; }
  .testimonial-mark { height: 42px; font-size: 88px; }
  .testimonial-lead blockquote { font-size: clamp(28px, 7.8vw, 37px); line-height: 1.16; }
  .testimonial blockquote { text-wrap: auto; }
  .testimonial:not(.testimonial-lead) { padding-top: 24px; }
  .testimonial figcaption { margin-top: 20px; }
}

/* navigation.css */
/* Shared portfolio navigation, including the homepage's selected work. */
.project-menu { position: relative; }
.nav-steelwork { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-steelwork > span[aria-hidden] { font-size: 15px; font-weight: 400; }
@media (min-width: 681px) and (max-width: 900px) {
  .header .brand { width: 180px; gap: 10px; flex: none; }
  .header .brand-symbol { width: 27px; height: 37px; }
  .header .brand-wordmark { width: 140px; }
  .header .navigation { gap: 14px; }
  .header .nav-contact { margin-left: 0; padding-inline: 12px !important; white-space: nowrap; }
}
.project-menu > summary { display: flex; align-items: center; gap: 9px; min-height: 48px; cursor: pointer; list-style: none; }
.project-menu > summary::-webkit-details-marker { display: none; }
.project-menu > summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.project-menu[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.project-submenu { position: absolute; top: calc(100% + 12px); left: -24px; min-width: 250px; padding: 10px 24px; background: #f2eee5; color: #10392f; box-shadow: 0 12px 30px #0002; }
.project-submenu a { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 18px; font-size: 16px; }
.project-submenu a + a { border-top: 1px solid #10392f26; }
.project-submenu a:hover, .project-submenu a[aria-current="page"] { color: #167767; }
.project-submenu a span { transition: transform .2s; }
.project-submenu a:hover span { transform: translateX(4px); }
.sector-view-all { display: flex; justify-content: flex-end; margin-top: 40px; }
.sector-view-all .text-link { min-width: 270px; }
@media (max-width: 680px) {
  .project-menu > summary { font-size: 20px; padding-block: 12px; justify-content: space-between; }
  .project-submenu { position: static; background: transparent; color: inherit; box-shadow: none; padding: 0 0 10px 18px; min-width: 0; }
  .project-submenu a { font-size: 17px; padding-block: 14px; }
  .project-submenu a + a { border-color: #ffffff26; }
  .project-submenu a:hover, .project-submenu a[aria-current="page"] { color: #9edbc0; }
  .sector-view-all { justify-content: flex-start; margin-top: 28px; }
  .sector-view-all .text-link { width: 100%; min-width: 0; }
  html:not(.has-navigation) .header { position: relative; height: auto; min-height: 82px; flex-wrap: wrap; padding-bottom: 18px; }
  html:not(.has-navigation) .menu-toggle { display: none; }
  html:not(.has-navigation) .navigation { display: flex; position: static; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: 18px 0 0; background: transparent; color: inherit; box-shadow: none; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .project-menu *, .project-menu *::after { transition: none; } }

/* assets/build-sequence/build-sequence.css */
/* Approved homepage construction sequence and project handoff. */
.homepage-build-sequence { --build-overlap: 68svh; }
.homepage-build { position: relative; isolation: isolate; border-top: 1px solid #244c3e40; color: #202b27; }
.homepage-build .story-stage { position: relative; padding: 28px 0 24px; min-height: 640px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; background: #f2eee5; }
.homepage-build.build-ready { height: calc(380svh - var(--header-height) + var(--build-overlap)); }
.homepage-build.build-ready .story-stage { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); min-height: 0; }
.homepage-build .stage-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.homepage-build .stage-top h3 { font-family: Manrope, Arial, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; margin: 0; }
.homepage-build .scroll-note { display: flex; align-items: center; gap: 14px; font-size: 11px; color: #566653; }
.homepage-build .scroll-note span { font-size: 20px; }
.homepage-build .stage-main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 4vw; align-items: center; min-height: 0; }
.homepage-build .stage-copy { display: grid; min-width: 0; }
.homepage-build .step-copy { grid-area: 1 / 1; display: none; }
.homepage-build .step-copy[data-step="4"] { display: block; }
.homepage-build.build-ready .step-copy { display: block; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1), visibility .4s; }
.homepage-build.build-ready .step-copy.is-active { opacity: 1; visibility: visible; transform: none; }
.homepage-build .step-kicker { display: flex; align-items: baseline; gap: 12px; color: #566653; font-size: 12px; line-height: 1.5; margin-bottom: 22px; }
.homepage-build .step-kicker span { font-size: 11px; letter-spacing: .06em; }
.homepage-build .step-copy h4 { font-family: 'Inter Tight', Arial, sans-serif; font-size: clamp(44px, 5.1vw, 82px); font-weight: 500; line-height: 1.03; letter-spacing: -.05em; margin: 0 0 24px; }
.homepage-build .step-copy h4 em { font-style: normal; color: #41c5ad; }
.homepage-build .step-copy p { max-width: 360px; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.8; color: #505a52; margin: 0; }
.homepage-build .stage-partner-link { color: #244c3e; text-decoration: underline; text-decoration-color: #41c5ad; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.homepage-build .stage-partner-link:hover { text-decoration-thickness: 2px; }
.homepage-build .stage-partner-link:focus-visible { outline: 2px solid #244c3e; outline-offset: 4px; }
.homepage-build .model-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.homepage-build .building { display: block; width: 100%; height: 100%; max-height: 61svh; overflow: visible; }
.homepage-build .blueprint { opacity: 0; }
.homepage-build.build-ready .blueprint { opacity: 1; }
.homepage-build .model-signature { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #416950; opacity: 0; pointer-events: none; }
.homepage-build .model-signature img { width: 16px; height: 22px; object-fit: contain; }
.homepage-build .model-signature strong { font-weight: 600; }
.homepage-build .sequence-controls { display: none; }
.homepage-build.build-ready .sequence-controls { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 24px; }
.homepage-build .stage-button { display: flex; align-items: baseline; gap: 14px; position: relative; border: 0; border-top: 2px solid #b9c6b450; border-radius: 0; background: transparent; color: #5b6759; padding: 16px 0 4px; min-height: 54px; text-align: left; cursor: pointer; font: inherit; touch-action: manipulation; }
.homepage-build .stage-button::before { content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: #41c5ad; transform: scaleX(var(--fill, 0)); transform-origin: left; }
.homepage-build .stage-button span { font-size: 11px; }
.homepage-build .stage-button strong { font-size: 14px; font-weight: 500; }
.homepage-build .stage-button[aria-pressed="true"] { color: #202b27; }
.homepage-build .stage-button[aria-pressed="true"] strong { font-weight: 650; }
.homepage-build .stage-button:hover { color: #244c3e; }
.homepage-build .stage-button:focus-visible { outline: 2px solid #244c3e; outline-offset: 5px; }
/* The real projects cover the held model; short/no-JS views retain normal flow. */
.homepage-build-sequence .service-overview { padding-bottom: clamp(36px, 5vw, 80px); }
.homepage-build-sequence .project-sectors { margin-top: 0; z-index: 2; }
@media (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .homepage-build-sequence .service-overview:has(.build-ready) { padding-bottom: 0; }
  .homepage-build-sequence .service-overview:has(.build-ready) + .project-sectors { margin-top: calc(-1 * var(--build-overlap)); }
  .homepage-build.build-ready .stage-copy { opacity: var(--handoff-copy, 1); }
  .homepage-build.build-ready .stage-top,
  .homepage-build.build-ready .sequence-controls { opacity: var(--handoff-chrome, 1); }
  .homepage-build.build-ready .model-wrap { opacity: var(--handoff-model, 1); transform: translateY(var(--handoff-y, 0px)) scale(var(--handoff-scale, 1)); transform-origin: 50% 45%; }
}
@media (max-width: 1000px) {
  .homepage-build .stage-main { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); gap: 2vw; }
  .homepage-build .step-copy h4 { font-size: clamp(42px, 5.6vw, 58px); }
  .homepage-build .step-copy p { font-size: 14px; }
}
@media (max-width: 680px) {
  .homepage-build-sequence { --build-overlap: 76svh; }
  .homepage-build.build-ready { height: calc(390svh - var(--header-height) + var(--build-overlap)); }
  .homepage-build .story-stage { padding: 22px 0 18px; gap: 16px; }
  .homepage-build .stage-top h3 { font-size: 13px; }
  .homepage-build .scroll-note { font-size: 10px; gap: 8px; }
  .homepage-build .stage-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  .homepage-build .stage-copy { align-self: start; padding-top: 8px; }
  .homepage-build .step-kicker { font-size: 11px; gap: 9px; margin-bottom: 14px; }
  .homepage-build .step-kicker span { font-size: 10px; }
  .homepage-build .step-copy h4 { font-size: clamp(36px, 10.4vw, 56px); line-height: 1.04; margin-bottom: 14px; }
  .homepage-build .step-copy h4 br { display: none; }
  .homepage-build .step-copy p { font-size: 13px; line-height: 1.7; max-width: 410px; }
  .homepage-build .building { max-height: 40svh; max-width: 430px; }
  .homepage-build .model-signature { font-size: 8px; gap: 6px; }
  .homepage-build .model-signature img { width: 12px; height: 17px; }
  .homepage-build.build-ready .sequence-controls { gap: 8px; }
  .homepage-build .stage-button { display: block; padding-top: 10px; min-height: 54px; }
  .homepage-build .stage-button span { display: block; font-size: 9px; margin-bottom: 5px; }
  .homepage-build .stage-button strong { font-size: clamp(9px, 2.65vw, 11px); letter-spacing: -.02em; }
}
/* Short screens and reduced motion keep the five choices without a pinned scroll. */
@media (max-height: 699px), (prefers-reduced-motion: reduce) {
  .homepage-build.build-ready { height: auto; }
  .homepage-build.build-ready .story-stage { position: relative; top: auto; height: auto; min-height: 0; padding-block: 30px; }
  .homepage-build .stage-main { min-height: 400px; }
  .homepage-build .building { max-height: 480px; }
  .homepage-build .scroll-note { display: none; }
  .homepage-build.build-ready .step-copy { transition: none; transform: none; }
}
@media (max-width: 680px) and (max-height: 699px), (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .homepage-build { --compact-model-height: clamp(210px, 34svh, 290px); }
  .homepage-build.build-ready .story-stage { padding-block: 20px; gap: 12px; }
  .homepage-build .stage-main { grid-template-rows: auto var(--compact-model-height); min-height: 0; gap: 12px; }
  .homepage-build .building { max-height: var(--compact-model-height); }
}

/* Rendered 3D alternative only: fixed camera, real materials, no WebGL runtime. */
.homepage-build .model-canvas, .homepage-build .model-poster { object-fit: contain; transform: scale(1.08); transform-origin: center; }
.homepage-build .model-canvas[hidden], .homepage-build .model-poster[hidden] { display: none; }
.homepage-build .building { overflow: hidden; }

/* Bring the copy and model together while the section rails keep their width. */
@media (min-width: 681px) {
  .homepage-build .stage-main {
    padding-inline: clamp(0px, calc(8vw - 54.4px), 80px);
    gap: clamp(16px, 1.5vw, 24px);
  }
  .homepage-build .stage-copy {
    transform: translateX(clamp(0px, calc(10vw - 64px), 88px));
  }
}

/* contact-finale.css */
/* A full-width invitation carries the final film into a practical next step. */
.contact.contact-finale { padding-top: clamp(48px, 5vw, 80px); }
.contact-finale::before {
  left: 0;
  right: auto;
  width: calc(var(--gutter) + (100% - 2 * var(--gutter) - 8vw) * 5 / 11);
}
.contact-finale .contact-header {
  padding-bottom: clamp(32px, 3.5vw, 56px);
  margin-bottom: clamp(36px, 4vw, 64px);
  border-bottom: 1px solid #10392f35;
}
.contact-finale .contact-header > .eyebrow { margin-bottom: 24px; }
.contact-finale .contact-title {
  display: flex;
  flex-wrap: wrap;
  column-gap: .18em;
  font-size: clamp(68px, 9.8vw, 164px);
  line-height: 1.02;
}
.contact-finale .contact-title > span { white-space: nowrap; }
.contact-finale .contact-intro {
  max-width: 390px;
  margin-top: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.25;
  text-wrap: pretty;
}
.contact-finale .contact-guidance {
  max-width: 340px;
  margin-top: 20px;
  color: #50625b;
  font-size: 16px;
  line-height: 1.7;
}
.contact-finale .contact-direct { margin-top: 36px; }
.contact-finale .contact-direct a:first-of-type { font-size: clamp(32px, 3.2vw, 46px); }

/* Clear the outgoing message before the cream panel reaches its lettering. */
@media (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .has-scroll-motion .scrub-scene.has-contact-finale .aerial-chapter {
    opacity: calc(var(--chapter-opacity, 0) * var(--contact-outro-copy, 1));
    transform: translate3d(0, calc(var(--chapter-y, 12px) - var(--contact-outro-rise, 0px)), 0);
  }
  .has-scroll-motion .scrub-scene.has-contact-finale .scrub-top,
  .has-scroll-motion .scrub-scene.has-contact-finale .scrub-bottom {
    opacity: var(--contact-outro-copy, 1);
  }
  .has-scroll-motion .contact-finale.has-contact-entrance .contact-title > span + span { transition-delay: .1s; }
}
@media (max-width: 1000px) {
  .contact-finale .contact-guidance { font-size: 15px; }
  .contact-finale::before { width: 42%; }
}
@media (max-width: 800px) {
  .contact.contact-finale { padding-top: 40px; }
  .contact-finale::before { width: 32%; }
  .contact-finale .contact-header { padding-bottom: 28px; margin-bottom: 32px; }
  .contact-finale .contact-title { display: block; font-size: clamp(58px, 16vw, 100px); }
  .contact-finale .contact-intro { font-size: clamp(24px, 4.5vw, 32px); max-width: 470px; }
  .contact-finale .contact-guidance { margin-top: 16px; max-width: 400px; }
  .contact-finale .contact-layout { gap: 36px; }
  .contact-finale .contact-direct { margin-top: 28px; }
}