/* Facade Infinite / Motion Edition — deliberate motion, architectural interaction */
:root{--easing:cubic-bezier(.19,1,.22,1)}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.95)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes orbit{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes float-alt{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-17px,0)}}
@keyframes light-rush{0%{transform:translateX(-170%) rotate(-19deg)}100%{transform:translateX(300%) rotate(-19deg)}}
@keyframes beam-travel{0%{top:-20%;opacity:0}12%{opacity:.6}80%{opacity:.4}100%{top:112%;opacity:0}}
@keyframes flare{0%,100%{box-shadow:0 0 0 0 rgba(231,128,74,.0)}45%{box-shadow:0 0 0 10px rgba(231,128,74,.05)}}
@keyframes flash-panels{0%,100%{opacity:.15}50%{opacity:.7}}
@keyframes reveal-ring{to{stroke-dashoffset:0}}
/* Hero: motion language and scanning instruments */
.hero{background:#071014}
.hero__image-fallback{opacity:.3;animation:hero-ken-burns 23s ease-in-out infinite alternate;filter:grayscale(.75) contrast(1.25)}
@keyframes hero-ken-burns{from{transform:scale(1);background-position:50% 44%}to{transform:scale(1.17);background-position:55% 58%}}
.hero__grid{animation:hero-grid-drift 32s linear infinite}
@keyframes hero-grid-drift{from{background-position:0 0}to{background-position:130px 130px}}
.hero__mask{background:linear-gradient(90deg,#080d10 0%,rgba(8,13,16,.97) 23%,rgba(8,13,16,.7) 44%,rgba(8,13,16,.08) 77%,rgba(8,13,16,.12) 100%),linear-gradient(0deg,#080d10 1%,transparent 24%)}
.hero__beam{pointer-events:none;position:absolute;z-index:1;top:0;right:12%;width:20%;height:115%;transform:skewX(-17deg);background:linear-gradient(90deg,transparent,rgba(229,135,86,.045),transparent);mix-blend-mode:screen;animation:light-rush 15s ease-in-out infinite}
.hero__orbital{position:absolute;right:6%;top:34%;width:clamp(230px,39vw,700px);aspect-ratio:1;border:1px solid rgba(180,203,207,.12);border-radius:50%;pointer-events:none;z-index:1;animation:orbit 65s linear infinite;transform-origin:center}
.hero__orbital:before,.hero__orbital:after{content:'';position:absolute;width:7px;height:7px;border-radius:100%;background:var(--orange);top:50%;box-shadow:0 0 20px rgba(243,144,88,.5)}
.hero__orbital:before{left:-4px}.hero__orbital:after{right:-4px;background:#95d1e2}
.hero__orbital--two{top:36%;right:12%;width:clamp(150px,25vw,490px);border-style:dashed;opacity:.3;animation-duration:47s;animation-direction:reverse}
.hero__tech{position:absolute;z-index:2;top:24%;right:10.1%;display:grid;justify-items:end;gap:9px;color:#b9cbd1;font-size:9px;letter-spacing:.2em;font-weight:700;pointer-events:none;opacity:.72}
.hero__tech b{font-size:8px;font-weight:600;color:#82959b}
.hero__tech-line{width:100px;height:1px;background:linear-gradient(90deg,transparent,var(--orange))}
.hero__live{display:flex;align-items:center;gap:10px;color:#afbcbf;letter-spacing:.19em;font-weight:700;font-size:8px;margin:21px 0 35px;opacity:.9}
.hero__live i{font-style:normal;color:var(--orange);padding:0 7px}
.hero__live-circle{width:19px;height:19px;display:grid;place-items:center;flex-shrink:0;border:1px solid rgba(243,144,88,.55);border-radius:50%;animation:flare 3s ease-in-out infinite}
.hero__live-circle:before{content:'';width:5px;height:5px;background:var(--orange);border-radius:50%;box-shadow:0 0 12px var(--orange)}
.hero__hint{position:absolute;z-index:3;right:6.6%;bottom:13.5%;display:flex;align-items:center;gap:14px;color:#b8c8c9;font-size:8px;letter-spacing:.16em;line-height:1.8;opacity:.65;pointer-events:none}
.hero__hint-scope{font-size:33px;color:var(--orange);font-weight:300;animation:orbit 14s linear infinite;transform-origin:center}
.hero__copy{position:relative}.hero__copy:after{content:'';pointer-events:none;position:absolute;bottom:-100px;left:0;width:95px;height:1px;background:linear-gradient(90deg,var(--orange),transparent);opacity:.4}
.hero h1{transform-origin:left center;filter:drop-shadow(0 18px 40px rgba(0,0,0,.12))}
/* Stagger / reveal accents */
.reveal{will-change:opacity,transform}.reveal.in-view{will-change:auto}
.intro__heading h2,.work__heading h2,.team__heading h2{transition:letter-spacing .7s var(--easing)}
.intro__heading:hover h2,.team__heading:hover h2{letter-spacing:-.06em}
.expertise-card{isolation:isolate;overflow:hidden}
.expertise-card:after{content:'';position:absolute;inset:-100%;background:linear-gradient(115deg,transparent 43%,rgba(255,255,255,.21) 50%,transparent 56%);transform:translateX(-40%) rotate(-13deg);opacity:0;transition:transform 1.4s ease,opacity .4s;pointer-events:none;z-index:4}
.expertise-card:hover:after{opacity:.6;transform:translateX(50%) rotate(-13deg)}
.expertise-card:nth-child(2n) .expertise-card__art{animation:float-alt 7s ease-in-out infinite}
.expertise-card:nth-child(2n+1) .expertise-card__art{animation:float-alt 6.3s ease-in-out infinite reverse}
.expertise-card:focus-within{outline:2px solid var(--orange)}
/* Lab: interactive 3D façade object with zero dependencies, graceful WebGL complement */
.materials-lab{position:relative;overflow:hidden;min-height:930px;background:radial-gradient(ellipse at 75% 45%,#152932 0,#091319 38%,#080e12 78%);color:#f0f2ef;padding:125px 0 118px;isolation:isolate}
.materials-lab:before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,rgba(166,200,213,.033) 1px,transparent 1px),linear-gradient(to bottom,rgba(166,200,213,.033) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 10%,black 87%);pointer-events:none}
.lab__halo{position:absolute;right:-25%;top:-40%;width:88vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(114,151,160,.13);box-shadow:0 0 0 130px rgba(104,150,158,.025),0 0 0 260px rgba(104,150,158,.02);pointer-events:none}
.lab__shell{position:relative;z-index:1}.materials-lab .section-meta{margin-bottom:85px}
.lab__layout{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);min-height:635px;gap:3.5vw;align-items:center}
.lab__content{align-self:center;position:relative;z-index:4}
.lab__micro{font-size:9px;letter-spacing:.19em;font-weight:800;color:#d2dedb;margin-bottom:35px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lab__micro>span:last-child{color:#627d86}.lab__live,.lab__active-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 5px rgba(232,122,64,.12),0 0 12px rgba(232,122,64,.55);display:inline-block;flex-shrink:0;animation:flare 2.8s ease-in-out infinite}
.lab__title{font-size:clamp(57px,6.5vw,115px);line-height:.92;letter-spacing:-.094em;margin:0 0 27px;position:relative}.lab__title>span{color:var(--orange)}.lab__period{color:var(--orange)}
.lab__description{max-width:420px;font-size:14px;color:#acbec1;line-height:1.9;margin-bottom:48px}
.lab__controls{border-top:1px solid #36515a;max-width:480px}
.lab__tab{width:100%;display:flex;align-items:center;gap:20px;padding:20px 5px;border:0;border-bottom:1px solid #36515a;color:#7f949a;text-align:left;background:transparent;font-weight:700;letter-spacing:.08em;font-size:12px;transition:padding .35s var(--easing),color .35s,background .35s}
.lab__tab>span{font-size:9px;letter-spacing:.1em;color:#6c7d83}.lab__tab b{font-weight:400;font-size:19px;margin-left:auto;transition:transform .35s}
.lab__tab.is-active,.lab__tab:hover{color:#f6eee7;padding-left:13px;background:linear-gradient(90deg,rgba(225,115,67,.12),transparent 90%)}
.lab__tab.is-active>span{color:var(--orange)}.lab__tab.is-active b{color:var(--orange);transform:rotate(45deg)}
.lab__specs{margin-top:38px;min-height:78px;display:grid;align-content:start;gap:7px}.lab__specs>span{font-size:9px;letter-spacing:.2em;color:var(--orange)}.lab__specs strong{font-size:11px;letter-spacing:.19em}.lab__specs p{color:#718a90;font-size:11px;margin:0}
.lab__visual{height:680px;position:relative;perspective:1050px;display:flex;align-items:center;justify-content:center;touch-action:pan-y;cursor:grab;--look-x:-13deg;--look-y:-27deg;--lab-y:0px}
.lab__visual:active{cursor:grabbing}
.lab__visual:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(52,127,153,.11),transparent 55%);pointer-events:none}
.lab__orbit{position:absolute;top:50%;left:50%;width:85%;aspect-ratio:1;border:1px solid rgba(158,193,197,.11);border-radius:50%;animation:orbit 38s linear infinite;pointer-events:none}
.lab__orbit:after{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;background:var(--orange);border-radius:50%;box-shadow:0 0 16px var(--orange)}
.lab__orbit--inner{width:56%;border-style:dashed;opacity:.4;animation-duration:29s;animation-direction:reverse}
.lab__model-wrap{width:370px;height:515px;position:relative;transform-style:preserve-3d;z-index:3;transform:translateY(var(--lab-y));animation:float-alt 8s ease-in-out infinite}
.lab__model{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(var(--look-x)) rotateY(var(--look-y));transition:transform .24s ease-out,filter .6s ease;filter:drop-shadow(45px 35px 45px rgba(0,0,0,.56))}
.lab__model-face{position:absolute;top:0;left:0;background:#18323e;overflow:hidden;transform-style:preserve-3d;backface-visibility:visible;border:4px solid #354751}
.lab__model-face--front{width:100%;height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(9,1fr);gap:3px;padding:3px;box-shadow:0 0 0 1px rgba(207,236,239,.3),inset 0 0 35px rgba(0,0,0,.5)}
.lab__model-face--side{width:124px;height:100%;left:100%;transform:rotateY(90deg);transform-origin:left center;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(9,1fr);gap:3px;padding:3px;filter:brightness(.6)}
.lab__model-face--top{width:100%;height:124px;top:auto;bottom:100%;transform:rotateX(90deg);transform-origin:bottom center;background:repeating-linear-gradient(90deg,#172c36 0 55px,#435a63 56px 59px);box-shadow:inset 0 0 40px #02080b}
.lab-pane{min-width:0;min-height:0;position:relative;background:linear-gradient(125deg,rgba(177,215,228,.64),rgba(31,74,98,.56) 39%,rgba(8,27,43,.94) 85%);box-shadow:inset 0 0 0 1px rgba(196,235,244,.19),inset -8px -8px 14px rgba(0,0,0,.34);transition:background .7s,border-color .6s,transform .75s var(--easing),opacity .55s;animation:panes-assemble 1s var(--easing) both;animation-delay:calc(var(--i)*11ms)}
.lab-pane:after{content:'';position:absolute;inset:5px 0 auto;height:1px;background:rgba(229,243,247,.2);opacity:.6}
@keyframes panes-assemble{from{transform:translate3d(0,38px,140px) scale(.92);opacity:.06}to{transform:translate3d(0,0,0) scale(1);opacity:1}}
.lab__model.is-spider .lab__model-face{border-color:#4b686a;background:#061b25}
.lab__model.is-spider .lab-pane{background:linear-gradient(135deg,rgba(112,187,201,.36),rgba(10,35,44,.8));box-shadow:inset 0 0 1px 1px rgba(176,217,224,.4);border:1px solid rgba(180,217,222,.21)}
.lab__model.is-spider .lab-pane:after{top:50%;left:50%;width:11px;height:11px;transform:translate(-50%,-50%);border:2px solid #b6c2c5;border-radius:50%;background:#30464a;box-shadow:0 0 5px #b8ced1;opacity:1}
.lab__model.is-cladding .lab__model-face{background:#292e34;border-color:#515a5e}
.lab__model.is-cladding .lab-pane{background:linear-gradient(105deg,#78878d 0%,#454e55 28%,#202b30 70%,#7c8588 100%);box-shadow:inset 1px 1px 1px #a0aeb2,inset -5px -3px 7px rgba(0,0,0,.35)}
.lab__model.is-cladding .lab-pane:nth-child(3n){background:linear-gradient(105deg,#5c6c72,#222f37 75%)}
.lab__model.is-cladding .lab-pane:after{display:none}
.lab__scan{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent 5%,black 28%,black 72%,transparent 94%)}
.lab__scan:after{content:'';position:absolute;left:5%;right:5%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(229,151,93,.6),transparent);box-shadow:0 0 24px 8px rgba(229,151,93,.06);animation:beam-travel 7.5s linear infinite}
.lab__corner{width:29px;height:29px;position:absolute;pointer-events:none;opacity:.65}.lab__corner--tl{left:3%;top:8%;border-top:1px solid #76999f;border-left:1px solid #76999f}.lab__corner--br{right:3%;bottom:9%;border-bottom:1px solid #76999f;border-right:1px solid #76999f}.lab__crosshair{position:absolute;left:5%;top:47%;color:#e3a078;font-size:24px;opacity:.65}
.lab__visual-label{position:absolute;left:4%;right:4%;bottom:5%;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#88a1a9;font-size:9px;letter-spacing:.13em;font-weight:800;pointer-events:none}.lab__visual-label>span:first-child{display:flex;align-items:center;gap:15px}.lab__visual-label>span:last-child{color:var(--orange)}
.lab__measure{position:absolute;right:-2%;top:48%;font-size:9px;font-weight:700;letter-spacing:.12em;writing-mode:vertical-rl;color:#748f99;opacity:.65}.lab__measure span{color:var(--orange)}
/* Numbers / kinetic band */
.signal{background:#dce1dc;color:#142023;padding:48px 0;border-top:1px solid rgba(0,0,0,.1)}
.signal__grid{display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:35px;align-items:center}.signal__item{display:flex;align-items:center;gap:17px;border-right:1px solid rgba(20,40,44,.17)}
.signal__item strong{font:800 clamp(57px,5.2vw,95px)/1 var(--font);letter-spacing:-.1em;font-variant-numeric:tabular-nums;color:#13282c}
.signal__item span{font-size:9px;line-height:1.7;font-weight:800;letter-spacing:.13em;color:#5c6968}.signal__tag{font-size:10px;letter-spacing:.13em;font-weight:800;display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:#52605b}.signal__tag-line{width:27px;height:1px;background:#b36b46}.signal__tag b{font-size:30px;color:var(--orange);font-weight:400;animation:orbit 15s linear infinite}
.massive-marquee{overflow:hidden;background:#dce1dc;color:#1c2e31;border-top:1px solid #bac5c0;border-bottom:1px solid #bac5c0;padding:18px 0;user-select:none}
.massive-marquee__inner{width:max-content;white-space:nowrap;font:800 clamp(58px,8.5vw,134px)/1 var(--font);letter-spacing:-.09em;animation:massive-run 36s linear infinite}.massive-marquee__inner span{font-weight:400;font-size:.75em;color:var(--orange);padding:0 30px}
@keyframes massive-run{to{transform:translateX(-50%)}}
/* Portfolio: shader-like sweep and cursor lens */
.project-card__visual{isolation:isolate}
.project-card__visual:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(245,252,246,.17) 50%,transparent 65%);transform:translateX(-160%);transition:transform 1.1s var(--easing);mix-blend-mode:screen}
.project-card__button:hover .project-card__visual:before,.project-card__button:focus-visible .project-card__visual:before{transform:translateX(160%)}
.project-card__visual img{will-change:transform}.project-card__button:hover .project-card__details h3{color:#e99061}.project-card__details h3{transition:color .25s}
.project-card__button{position:relative}
.project-card__visual .project-card__index{backdrop-filter:blur(5px);background:rgba(7,13,16,.2);padding:6px 8px}
.cursor-lens{position:fixed;top:0;left:0;z-index:340;width:102px;height:102px;border-radius:50%;display:grid;place-items:center;transform:translate3d(-160px,-160px,0) scale(.6);pointer-events:none;background:var(--orange);color:#0b1315;font-size:11px;font-weight:800;letter-spacing:.12em;opacity:0;transition:opacity .28s,scale .3s;box-shadow:0 10px 25px rgba(0,0,0,.16)}
.cursor-lens.is-visible{opacity:1;scale:1}
.manifesto__kinetic{position:absolute;right:1%;bottom:-35%;font:400 min(80vw,900px)/1 Georgia,serif;pointer-events:none;color:rgba(19,28,29,.08);transform:rotate(14deg);animation:float-alt 18s ease-in-out infinite}
.manifesto__display{position:relative;z-index:2}
.manifesto__display strong{display:inline-block}
.process__image img,.factory__image img{will-change:transform}
.factory__image{overflow:hidden}
.contact{position:relative;overflow:hidden}.contact:before{content:'';position:absolute;top:0;right:-20vw;width:70vw;height:70vw;border:1px solid rgba(236,158,115,.08);border-radius:50%;box-shadow:0 0 0 75px rgba(236,158,115,.025),0 0 0 150px rgba(236,158,115,.02);pointer-events:none;animation:orbit 40s linear infinite}
.contact__heading{position:relative}
@media (hover:hover) and (pointer:fine){.button,.header-cta,.lab__tab{will-change:transform}}
@media(max-width:1100px){.lab__layout{grid-template-columns:1fr 1fr}.lab__visual{height:600px}.lab__model-wrap{width:290px;height:415px}.lab__title{font-size:clamp(56px,6.8vw,90px)}.signal__grid{gap:18px}.signal__item{gap:10px}}
@media(max-width:900px){.materials-lab{padding:95px 0 70px}.lab__layout{grid-template-columns:1fr;gap:15px}.lab__content{max-width:740px}.lab__title{font-size:clamp(59px,11vw,105px)}.lab__description{max-width:540px;margin-bottom:32px}.lab__controls{max-width:100%}.lab__visual{height:620px}.lab__model-wrap{width:340px;height:465px}.lab__measure{right:2%}.signal__grid{grid-template-columns:repeat(3,1fr)}.signal__tag{grid-column:1/-1}.hero__tech{display:none}}
@media(max-width:600px){.hero__orbital{top:40%;right:-27%;width:90vw}.hero__orbital--two{right:-5%;top:44%;width:58vw}.hero__image-fallback{opacity:.22}.hero__hint{display:none}.hero__live{font-size:7px;letter-spacing:.08em;max-width:290px}.hero__copy:after{display:none}.materials-lab{padding:78px 0 50px;min-height:0}.materials-lab .section-meta{margin-bottom:65px}.lab__title{font-size:clamp(56px,14vw,78px)}.lab__description{font-size:13px}.lab__micro{font-size:8px}.lab__tab{font-size:11px}.lab__visual{height:500px;margin:0 -18px}.lab__model-wrap{width:230px;height:340px}.lab__model-face--side,.lab__model-face--top{width:83px}.lab__model-face--top{width:100%;height:83px}.lab__model-face--side{width:83px}.lab__visual-label{font-size:7px}.lab__measure{font-size:7px}.lab__orbit--outer{width:96%}.signal{padding:36px 0}.signal__grid{grid-template-columns:1fr 1fr;gap:25px 15px}.signal__item{border-right:0}.signal__item strong{font-size:53px}.signal__item span{font-size:7.5px}.signal__tag{gap:6px;font-size:8px;max-width:290px}.massive-marquee__inner{font-size:60px}.cursor-lens{display:none}}
@media(prefers-reduced-motion:reduce){.lab__model-wrap,.lab__orbit,.hero__image-fallback,.hero__grid,.hero__orbital,.hero__hint-scope,.hero__live-circle,.lab__scan:after,.massive-marquee__inner,.signal__tag b,.manifesto__kinetic,.lab-pane{animation:none!important}.lab__model{transition:none}.lab-pane{opacity:1}.cursor-lens{display:none}.hero__beam{display:none}.expertise-card__art{animation:none!important}}
/* The Three.js tower replaces the photographic stand-in when WebGL loads. */
.hero.webgl-active .hero__image-fallback{opacity:.085}
/* Gallery frames unmask as the user approaches, and process steps illuminate in sequence. */
.project-card.motion-queued .project-card__visual{clip-path:inset(0 0 100% 0);transform:translate3d(0,28px,0)}
.project-card.motion-queued.motion-shown .project-card__visual{clip-path:inset(0 0 0 0);transform:translate3d(0,0,0)}
.project-card.motion-queued .project-card__visual{transition:clip-path 1.15s var(--easing),transform 1.15s var(--easing);transition-delay:var(--card-stagger,0ms)}
.project-card.motion-queued .project-card__details{opacity:.2;transform:translateY(15px);transition:opacity .8s ease,transform .8s var(--easing);transition-delay:var(--card-stagger,0ms)}
.project-card.motion-shown .project-card__details{opacity:1;transform:none}
.process-step{position:relative;transition:padding-left .5s var(--easing),background .5s}
.process-step:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--easing)}
.process-step.is-focused{padding-left:13px;background:linear-gradient(90deg,rgba(213,118,73,.07),transparent 70%)}
.process-step.is-focused:before{transform:scaleY(1)}
.process-step.is-focused>span{color:#b45f31}
@media(prefers-reduced-motion:reduce){.project-card.motion-queued .project-card__visual,.project-card.motion-queued .project-card__details{clip-path:none;transform:none;opacity:1;transition:none}}