:root{--tr-paper:#efefec;--tr-ink:#080909;--tr-grid:rgba(9,10,10,.1);--tr-pad:clamp(18px,3vw,48px);--tr-mono:ui-monospace,SFMono-Regular,Consolas,monospace}
:focus-visible{outline:2px solid #6c7fff!important;outline-offset:3px!important;border-radius:2px}
[data-site-mode="dark"] :focus-visible{outline-color:#9db4ff!important}
html{scroll-behavior:auto!important}body{overscroll-behavior:none}.topbar,.side-index,.contact-pill,.sound-toggle{mix-blend-mode:difference}.topbar{color:#fff}.tr-main{position:relative;z-index:20;background:var(--tr-paper);color:var(--tr-ink)}.tr-light{background:var(--tr-paper);color:var(--tr-ink)}.tr-micro{font:600 7px/1.2 var(--tr-mono);letter-spacing:.12em;text-transform:uppercase}.tr-rule{height:1px;background:rgba(0,0,0,.15)}

/* Slice transitions - the horizontal line/band reveal from the reference recording */
.tr-slice-wrap{height:100svh;position:relative;overflow:hidden;isolation:isolate}.tr-slice-wrap.is-light{background:var(--tr-paper)}.tr-slice-wrap.is-dark{background:#080909}.tr-slice__base{position:absolute;inset:0;background:inherit}.tr-slice{position:absolute;left:-4%;width:108%;background:#080909;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.07);will-change:transform}.tr-slice-wrap.is-dark .tr-slice{background:var(--tr-paper);border-color:rgba(0,0,0,.12)}.tr-slice__signal{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);font:600 8px var(--tr-mono);letter-spacing:.16em;color:#fff;mix-blend-mode:difference;white-space:nowrap}

/* Key facts */
.tr-keyfacts{min-height:150svh;padding:13vh var(--tr-pad) 9vh;position:relative;overflow:hidden;background-image:linear-gradient(90deg,transparent calc(25% - .5px),var(--tr-grid) 25%,transparent calc(25% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),var(--tr-grid) 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(75% - .5px),var(--tr-grid) 75%,transparent calc(75% + .5px))}.tr-keyfacts h2{font-size:clamp(52px,7vw,124px);letter-spacing:-.075em;font-weight:400;margin:18vh 0 0;text-align:center}.tr-kicker{width:260px;text-align:center;margin:12px auto 9vh;font-size:11px;line-height:1.5;color:#555}.tr-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,70px);align-items:end;max-width:1250px;margin:0 auto 16vh}.tr-fact-card{position:relative;min-height:430px;border:1px solid rgba(0,0,0,.15);padding:22px;background:#e4e3df;overflow:hidden;transform-origin:50% 100%}.tr-fact-card:nth-child(2){margin-top:70px}.tr-fact-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.04);opacity:.76}.tr-fact-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(4,4,4,.72))}.tr-fact-card>span,.tr-fact-card>strong,.tr-fact-card>p{position:relative;z-index:2;color:#fff}.tr-fact-card>span{font:7px var(--tr-mono)}.tr-fact-card>strong{position:absolute;right:18px;bottom:44px;font-size:clamp(50px,6vw,94px);font-weight:300;letter-spacing:-.08em}.tr-fact-card>strong sup{font-size:.2em;vertical-align:top;margin-left:4px}.tr-fact-card>p{position:absolute;left:18px;bottom:18px;margin:0;font-size:10px}.tr-keyfacts .tr-rule{position:absolute;left:var(--tr-pad);right:var(--tr-pad);bottom:4vh}

/* Horizontal selected work */
.tr-work{height:100svh;position:relative;overflow:hidden;padding:11vh 0 0;background-image:linear-gradient(90deg,transparent calc(33.333% - .5px),var(--tr-grid) 33.333%,transparent calc(33.333% + .5px)),linear-gradient(90deg,transparent calc(66.666% - .5px),var(--tr-grid) 66.666%,transparent calc(66.666% + .5px))}.tr-work-head{position:absolute;left:var(--tr-pad);top:13vh;width:min(420px,38vw);z-index:3}.tr-work-title{font-size:clamp(52px,6vw,110px);line-height:.82;letter-spacing:-.07em;font-weight:400;margin:12vh 0 0}.tr-work-title .word{display:block;overflow:hidden}.tr-work-track{position:absolute;left:39vw;top:13vh;height:68vh;display:flex;gap:clamp(22px,3vw,50px);align-items:flex-start;will-change:transform;padding-right:20vw}.tr-project{width:min(520px,39vw);flex:0 0 auto}.tr-project:nth-child(2n){margin-top:10vh}.tr-project__media{height:48vh;min-height:360px;position:relative;overflow:hidden;background:#ccc}.tr-project__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}.tr-project:hover .tr-project__media img{transform:scale(1.035)}.tr-project__media span{position:absolute;left:14px;top:14px;background:#f5f4f0;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font:7px var(--tr-mono)}.tr-project__meta{padding-top:13px;display:grid;grid-template-columns:1fr auto;gap:3px 18px}.tr-project__meta h3{font-size:22px;letter-spacing:-.04em;font-weight:500;margin:0}.tr-project__meta p{font:7px var(--tr-mono);margin:7px 0 0}.tr-project__meta em{grid-column:1/-1;font-style:normal;font-size:9px;color:#666;max-width:350px;line-height:1.45}.tr-work-foot{position:absolute;left:39vw;right:var(--tr-pad);bottom:4vh;border-top:1px solid rgba(0,0,0,.15);padding-top:10px;font:7px var(--tr-mono);letter-spacing:.06em}.tr-work-foot span{float:right}

/* Capabilities master sequence */
.tr-capabilities{height:100svh;position:relative;overflow:hidden;isolation:isolate;transition:background .2s}.tr-cap-webgl{position:absolute;inset:0;opacity:0;z-index:0}.tr-webgl{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}.tr-cap-micro{position:absolute;z-index:4;left:50%;top:7vh;transform:translateX(-50%);mix-blend-mode:difference;color:#fff}.tr-cap-stack{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:100%;mix-blend-mode:difference;color:#fff;text-shadow:0 10px 42px rgba(0,0,0,.62),0 0 22px rgba(0,0,0,.38)}.tr-cap-stack>div{font-size:clamp(72px,8.5vw,158px);line-height:.68;letter-spacing:-.085em;font-weight:500;white-space:nowrap}.tr-char{display:inline-block;will-change:transform,opacity}.tr-cap-core-label{position:absolute;z-index:3;left:50%;bottom:5vh;transform:translate(-50%,25px);opacity:0;text-align:center;font:7px/1.5 var(--tr-mono);letter-spacing:.1em;color:#d5d6d3;text-shadow:0 2px 18px rgba(0,0,0,.6)}.tr-cap-services{position:absolute;z-index:4;inset:0;pointer-events:none}.tr-cap-service{position:absolute;width:min(270px,25vw);color:#f3f3ef;text-shadow:0 4px 22px rgba(0,0,0,.62)}.tr-cap-service.p0{left:8%;top:35%}.tr-cap-service.p1{right:7%;top:30%}.tr-cap-service.p2{left:10%;bottom:17%}.tr-cap-service.p3{right:9%;bottom:17%}.tr-cap-service.p4{left:50%;top:16%;transform:translateX(-50%)}.tr-cap-service.p5{left:50%;bottom:12%;transform:translateX(-50%)}.tr-cap-service small{font:6px var(--tr-mono);letter-spacing:.1em;color:#a4a7a8}.tr-cap-service h3{font-size:clamp(24px,2.3vw,42px);line-height:.93;letter-spacing:-.05em;font-weight:450;margin:7px 0 10px}.tr-cap-service p{font-size:9px;line-height:1.5;color:#adb1b1;margin:0}.tr-cap-service i{display:block;margin-top:16px;width:42px;height:1px;background:#fff;opacity:.35}
.tr-cap-video-bg{position:absolute;inset:0;overflow:hidden;background:#000}.tr-cap-video-bg:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.22)}.tr-cap-video-bg:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.04) 28%,rgba(0,0,0,.04) 72%,rgba(0,0,0,.24)),radial-gradient(circle at 50% 50%,transparent 0%,transparent 58%,rgba(0,0,0,.10) 82%,rgba(0,0,0,.18) 100%)}.tr-cap-video{position:absolute;left:0;top:50%;z-index:0;display:block;width:100%;height:auto;max-width:none;transform:translateY(-50%);object-fit:contain;object-position:50% 50%;opacity:1;filter:brightness(.98) saturate(1.08) contrast(1.14);pointer-events:none;will-change:contents,transform,filter}

/* Client stories */
.tr-stories{height:100svh;position:relative;overflow:hidden;padding:10vh var(--tr-pad);background-image:linear-gradient(90deg,transparent calc(33.333% - .5px),var(--tr-grid) 33.333%,transparent calc(33.333% + .5px)),linear-gradient(90deg,transparent calc(66.666% - .5px),var(--tr-grid) 66.666%,transparent calc(66.666% + .5px))}.tr-stories h2{font-size:clamp(54px,6vw,112px);font-weight:400;letter-spacing:-.07em;margin:20vh 0 0}.tr-story-index{position:absolute;left:34%;top:23vh;font:7px var(--tr-mono);color:#777}.tr-story-stage{position:absolute;left:50%;right:7%;top:27%;bottom:14%}.tr-story{position:absolute;inset:0}.tr-story>span{font:7px var(--tr-mono);color:#666}.tr-story blockquote{font-size:clamp(22px,2.2vw,43px);line-height:1.03;letter-spacing:-.045em;margin:12vh 0 6vh;max-width:800px}.tr-story footer{display:flex;align-items:center;gap:20px;font-size:9px}.tr-story footer b{font-weight:600}.tr-story footer em{font-style:normal;color:#777}

/* Design in motion ribbon -> grid */
.tr-motion{height:100svh;position:relative;overflow:hidden;perspective:1600px;background-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.035),transparent 45%),linear-gradient(90deg,transparent calc(50% - .5px),var(--tr-grid) 50%,transparent calc(50% + .5px))}.tr-motion-title{position:absolute;inset:0;pointer-events:none}.tr-motion-title h2{position:absolute;font-size:clamp(86px,10.7vw,202px);font-weight:450;letter-spacing:-.09em;line-height:.8;margin:0;white-space:nowrap}.tr-motion-left{left:-2vw;top:30vh}.tr-motion-right{right:-1vw;top:50vh}.tr-motion-ribbon{position:absolute;left:50%;top:50%;width:1px;height:1px;transform-style:preserve-3d;will-change:transform}.tr-ribbon-card{position:absolute;left:-150px;top:-95px;width:300px;height:190px;background:#ddd;box-shadow:0 16px 60px rgba(0,0,0,.12);transform-style:preserve-3d;will-change:transform}.tr-ribbon-card img{width:100%;height:100%;object-fit:cover}.tr-ribbon-card span{position:absolute;left:10px;bottom:25px;background:rgba(246,245,240,.9);padding:5px 7px;font-size:10px}.tr-ribbon-card small{position:absolute;left:10px;bottom:8px;background:#0b0c0c;color:#fff;padding:4px 6px;font:6px var(--tr-mono)}.tr-motion-copy{position:absolute;left:var(--tr-pad);bottom:5vh;width:260px;font-size:9px;line-height:1.45;color:#686868}.tr-motion-caption{position:absolute;right:var(--tr-pad);bottom:5vh;font:7px var(--tr-mono);opacity:0;transform:translateY(20px)}

/* Footer */
.tr-contact{height:100svh;min-height:760px;position:relative;overflow:hidden;background:#070808;color:#f3f3ef;isolation:isolate}.tr-footer-webgl{position:absolute;inset:0;z-index:0;opacity:.95}.tr-contact-inner{position:relative;z-index:2;height:100%;padding:11vh var(--tr-pad) 4vh}.tr-contact h2{font-size:clamp(62px,8vw,148px);line-height:.8;letter-spacing:-.08em;font-weight:400;margin:5vh 0 6vh}.tr-contact-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:8vw;border-top:1px solid rgba(255,255,255,.18);padding-top:2.5vh}.tr-contact form{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;max-width:760px}.tr-contact label{font:6px var(--tr-mono);color:#8c9394;letter-spacing:.1em}.tr-contact input,.tr-contact textarea{display:block;width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;padding:12px 0;outline:none;font-size:13px}.tr-contact label:nth-child(4){grid-column:1/-1}.tr-contact form button{justify-self:start;border:1px solid rgba(255,255,255,.4);border-radius:40px;padding:14px 20px;background:transparent;color:#fff;cursor:pointer;font:7px var(--tr-mono);letter-spacing:.08em}html.robotic-cursor-enabled .tr-contact form button{cursor:none}.tr-contact form>p{font-size:9px;color:#afb8b8}.tr-contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:9px;line-height:1.5;color:#bbc0c0}.tr-contact-meta p:first-child{grid-column:1/-1}.tr-footer-word{position:absolute;left:var(--tr-pad);right:var(--tr-pad);bottom:-2.6vw;font-size:clamp(155px,25vw,480px);line-height:.55;letter-spacing:-.1em;font-weight:600;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.18) 6px 7px);-webkit-background-clip:text;background-clip:text}

/* Right side controller */
.tr-scroll{position:fixed;z-index:970;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;mix-blend-mode:difference}.tr-scroll button{border:0;background:transparent;color:inherit;width:30px;height:28px;font:10px var(--tr-mono);cursor:pointer}html.robotic-cursor-enabled .tr-scroll button{cursor:none}.tr-scroll__track{position:relative;width:16px;height:180px;border-left:1px solid currentColor;border-right:1px solid currentColor;padding:2px;cursor:ns-resize}.tr-scroll__track:before{content:"";position:absolute;top:50%;left:2px;right:2px;border-top:1px solid currentColor;opacity:.25}.tr-scroll__track i{position:absolute;left:2px;display:block;width:10px;height:34%;max-height:62px;background:currentColor;will-change:top}.tr-scroll .tr-top{width:48px;border:1px solid currentColor;border-radius:24px;font-size:6px;margin-top:3px}

@media(max-width:900px){.tr-facts{grid-template-columns:1fr 1fr}.tr-fact-card:last-child{grid-column:1/-1;width:50%;justify-self:center}.tr-work-head{width:42vw}.tr-work-track{left:46vw}.tr-project{width:55vw}.tr-cap-service{width:34vw}.tr-story-stage{left:43%}.tr-ribbon-card{width:250px;height:158px;left:-125px;top:-79px}}
@media(max-width:767px){.tr-keyfacts{padding-top:12vh}.tr-keyfacts h2{margin-top:14vh}.tr-facts{grid-template-columns:1fr;margin-top:6vh}.tr-fact-card,.tr-fact-card:last-child{width:100%;min-height:360px;grid-column:auto;transform:none!important}.tr-work-head{left:14px;top:11vh;width:80vw}.tr-work-title{margin-top:9vh;font-size:14vw}.tr-work-track{left:14px;top:39vh;height:50vh;gap:18px}.tr-project{width:76vw}.tr-project:nth-child(2n){margin-top:4vh}.tr-project__media{height:33vh;min-height:260px}.tr-work-foot{left:14px;right:14px}.tr-cap-stack>div{font-size:13vw}.tr-cap-service{width:42vw}.tr-cap-service.p0,.tr-cap-service.p2{left:5%}.tr-cap-service.p1,.tr-cap-service.p3{right:5%}.tr-cap-service h3{font-size:6vw}.tr-cap-service p{font-size:8px}.tr-stories h2{margin-top:17vh;font-size:14vw}.tr-story-index{left:14px;top:32vh}.tr-story-stage{left:14px;right:14px;top:41%}.tr-story blockquote{font-size:7vw;margin-top:8vh}.tr-motion-title h2{font-size:15vw}.tr-motion-left{top:22vh}.tr-motion-right{top:68vh}.tr-ribbon-card{width:180px;height:114px;left:-90px;top:-57px}.tr-motion-copy{left:14px;bottom:8vh}.tr-contact{min-height:900px}.tr-contact-inner{padding-left:14px;padding-right:14px}.tr-contact h2{font-size:15vw}.tr-contact-grid{grid-template-columns:1fr}.tr-contact form{grid-template-columns:1fr}.tr-contact label:nth-child(4){grid-column:auto}.tr-contact-meta{margin-top:4vh}.tr-scroll{right:2px}.tr-scroll__track{height:120px}.tr-scroll .tr-top{display:none}}


/* =========================================================
   V5 / REFERENCE-MATCH MOTION
   Curved ribbon trip -> six-direction assembly -> 3x2 grid
   ========================================================= */
.tr-trip{height:100svh;position:relative;overflow:hidden;perspective:1500px;isolation:isolate;background:#e5e5e3;color:#111;background-image:radial-gradient(circle at 50% 52%,rgba(0,0,0,.025),transparent 46%),linear-gradient(90deg,transparent calc(50% - .5px),rgba(0,0,0,.065) 50%,transparent calc(50% + .5px))}.tr-trip:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px);background-size:100% 25%,25% 100%}.tr-trip-title{position:absolute;inset:0;z-index:1;pointer-events:none}.tr-trip-title h2{position:absolute;margin:0;font-size:clamp(78px,10.6vw,204px);line-height:.76;letter-spacing:-.09em;font-weight:450;white-space:nowrap;will-change:transform,opacity}.tr-trip-title-left{left:-1.5vw;top:35vh}.tr-trip-title-right{right:-1.2vw;top:52vh}.tr-trip-guide{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.tr-trip-guide path{fill:none;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}.tr-trip-guide-path{stroke:rgba(0,0,0,.35);stroke-width:1.15}.tr-trip-guide-glow{stroke:rgba(255,255,255,.85);stroke-width:9;filter:blur(9px)}.tr-trip-stage{position:absolute;z-index:8;left:50%;top:50%;width:1px;height:1px;transform-style:preserve-3d}.tr-trip-card{position:absolute;left:clamp(-205px,-11.5vw,-120px);top:clamp(-130px,-7.4vw,-78px);width:clamp(240px,23vw,410px);aspect-ratio:1.58/1;overflow:hidden;background:#c9c9c6;border-radius:3px;box-shadow:0 26px 72px rgba(0,0,0,.18);transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden}.tr-trip-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(.1px);user-select:none;pointer-events:none}.tr-trip-card:after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.13);pointer-events:none}.tr-trip-card-shade{position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,0,0,.45),transparent 48%,rgba(255,255,255,.12));opacity:0;pointer-events:none}.tr-trip-card-meta{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;z-index:2;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55)}.tr-trip-card-meta b{font-size:10px;font-weight:600;letter-spacing:-.02em}.tr-trip-card-meta span{font:6px var(--tr-mono);text-align:right;text-transform:uppercase;letter-spacing:.06em}.tr-trip-card>i{position:absolute;z-index:2;left:9px;top:9px;width:24px;height:24px;border-radius:50%;background:rgba(244,244,240,.92);display:grid;place-items:center;color:#111;font:6px var(--tr-mono);font-style:normal}.tr-trip-copy{position:absolute;z-index:20;left:var(--tr-pad);bottom:7vh;width:min(300px,26vw);font-size:10px;line-height:1.45;color:#595959;margin:0}.tr-trip-phase{position:absolute;z-index:20;right:var(--tr-pad);bottom:7vh;font:6px var(--tr-mono);letter-spacing:.12em;text-transform:uppercase;color:#4c4c4c;border-bottom:1px solid rgba(0,0,0,.35);padding:0 0 8px 70px}.tr-trip-grid-note{position:absolute;z-index:22;left:50%;top:8vh;transform:translateX(-50%);font:6px var(--tr-mono);letter-spacing:.13em;opacity:0;white-space:nowrap}.tr-trip-axis{position:absolute;z-index:4;inset:0;opacity:0;pointer-events:none;font:6px var(--tr-mono);letter-spacing:.14em;color:rgba(0,0,0,.48)}.tr-trip-axis span{position:absolute}.tr-trip-axis .a-left{left:2vw;top:48%}.tr-trip-axis .a-right{right:2vw;top:42%}.tr-trip-axis .a-top{left:47%;top:2.8vh}.tr-trip-axis .a-bottom{left:48%;bottom:2.8vh}.tr-trip-axis .a-front{right:21%;top:21%}.tr-trip-axis .a-back{left:19%;bottom:20%}.tr-trip-axis:before,.tr-trip-axis:after{content:"";position:absolute;left:50%;top:50%;background:rgba(0,0,0,.12);transform:translate(-50%,-50%)}.tr-trip-axis:before{width:92%;height:1px}.tr-trip-axis:after{width:1px;height:86%}

/* =========================================================
   V5 / GRID -> BLACK STRIP TRANSFORMATION
   Seven independently clipped rows reproduce the reference
   grid being sliced into horizontal strips before dark mode.
   ========================================================= */
.tr-band-transform{height:202svh;position:relative;background:#050606;color:#f4f4f0;isolation:isolate;z-index:24}.tr-band-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#050606;isolation:isolate}.tr-band-black-base{position:absolute;inset:0;background:radial-gradient(circle at 52% 43%,#111416 0,#08090a 34%,#040505 72%)}.tr-band-rows{position:absolute;z-index:4;inset:0}.tr-band-row{position:absolute;left:0;width:100%;overflow:hidden;background:#e5e5e3;will-change:transform;transform-origin:center}.tr-band-scene{position:absolute;left:0;width:100vw;height:100svh;background:#e5e5e3;color:#111;will-change:transform}.tr-band-scene:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent calc(50% - .5px),rgba(0,0,0,.07) 50%,transparent calc(50% + .5px));pointer-events:none}.tr-band-grid{position:absolute;inset:0}.tr-band-card{position:absolute;width:min(22vw,395px);aspect-ratio:1.55/1;overflow:hidden;background:#ccc;border-radius:3px;box-shadow:0 14px 34px rgba(0,0,0,.11)}.tr-band-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.tr-band-card span{position:absolute;left:8px;bottom:7px;background:rgba(245,245,241,.9);color:#111;padding:4px 6px;font-size:7px}.tr-band-card.g0{left:17%;top:17%}.tr-band-card.g1{left:39%;top:17%}.tr-band-card.g2{left:61%;top:17%}.tr-band-card.g3{left:17%;top:52%}.tr-band-card.g4{left:39%;top:52%}.tr-band-card.g5{left:61%;top:52%}.tr-band-scene-copy{position:absolute;left:var(--tr-pad);right:var(--tr-pad);bottom:5vh;display:flex;justify-content:space-between;align-items:end;color:#565656}.tr-band-scene-copy p{width:270px;margin:0;font-size:9px;line-height:1.45}.tr-band-scene-copy em{font:6px var(--tr-mono);font-style:normal;letter-spacing:.12em}.tr-band-line{position:absolute;z-index:9;left:0;bottom:0;width:100%;height:1px;background:rgba(255,255,255,.84);box-shadow:0 0 10px rgba(255,255,255,.35);will-change:transform,opacity}.tr-band-dark-copy{position:absolute;z-index:2;left:var(--tr-pad);right:var(--tr-pad);bottom:7vh;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;opacity:0}.tr-band-dark-copy span{font-size:11px;font-weight:600}.tr-band-dark-copy b{font:6px var(--tr-mono);font-weight:500;letter-spacing:.12em;color:#8f9697}.tr-band-dark-copy em{grid-column:2;font:6px var(--tr-mono);font-style:normal;color:#777}

@media(max-width:900px){.tr-trip-card{width:34vw;left:-17vw;top:-10.7vw}.tr-trip-copy{width:34vw}.tr-band-card{width:26vw}.tr-band-card.g0,.tr-band-card.g3{left:9%}.tr-band-card.g1,.tr-band-card.g4{left:37%}.tr-band-card.g2,.tr-band-card.g5{left:65%}}
@media(max-width:767px){.tr-trip-title h2{font-size:15.5vw}.tr-trip-title-left{top:25vh}.tr-trip-title-right{top:68vh}.tr-trip-card{width:39vw;left:-19.5vw;top:-12.35vw}.tr-trip-copy{left:14px;bottom:8vh;width:42vw;font-size:8px}.tr-trip-phase{right:14px;bottom:8vh;padding-left:20px}.tr-trip-grid-note{top:9vh;font-size:5px}.tr-trip-axis{font-size:5px}.tr-band-card{width:39vw}.tr-band-card.g0{left:9%;top:15%}.tr-band-card.g1{left:52%;top:15%}.tr-band-card.g2{left:9%;top:38%}.tr-band-card.g3{left:52%;top:38%}.tr-band-card.g4{left:9%;top:61%}.tr-band-card.g5{left:52%;top:61%}.tr-band-scene-copy{left:14px;right:14px}.tr-band-scene-copy p{width:52vw;font-size:8px}.tr-band-dark-copy{left:14px;right:14px}.tr-band-dark-copy b{display:none}}


/* ================================================================
   TRUE WEBGL CURVED SCROLL IMAGE GALLERY — V6 CAMERA SWEEP
   The ribbon now crosses the camera in depth rather than forming a flat U.
   ================================================================ */
.mfa-ribbon{
  position:relative;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#cfcfcd;
  color:#171816;
}
.mfa-ribbon:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 46% 46%,rgba(255,255,255,.14),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.014));
}
.mfa-ribbon-title{
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  white-space:nowrap;
  font-size:clamp(70px,8.55vw,168px);
  line-height:.82;
  letter-spacing:-.078em;
  font-weight:470;
  color:#2e2f2c;
}
.mfa-ribbon-title span{
  position:absolute;
  display:block;
  will-change:transform;
}
.mfa-ribbon-title__design{
  right:-2.5vw;
  top:35.6vh;
}
.mfa-ribbon-title__motion{
  left:6.7vw;
  top:52.8vh;
}
.mfa-ribbon-canvas{
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
}
.mfa-ribbon-canvas canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
.mfa-ribbon-caption{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(280px,66vw);
  text-align:center;
  pointer-events:none;
  font:500 7px/1.36 var(--tr-mono);
  letter-spacing:.075em;
  text-transform:uppercase;
  color:#2d2e2b;
  opacity:0;
}
.mfa-ribbon-caption span,.mfa-ribbon-caption strong{display:block;}
.mfa-ribbon-caption strong{font-weight:700;}
.mfa-ribbon-micro{
  position:absolute;
  z-index:4;
  left:2.0vw;
  bottom:7.4vh;
  font:6px/1.2 var(--tr-mono);
  letter-spacing:.08em;
  white-space:nowrap;
  opacity:0;
}
.mfa-ribbon-progress{
  position:absolute;
  z-index:4;
  right:2.0vw;
  bottom:7.4vh;
  display:flex;
  align-items:center;
  gap:11px;
  font:6px var(--tr-mono);
  letter-spacing:.08em;
  pointer-events:none;
}
.mfa-ribbon-progress i{
  display:block;
  width:72px;
  height:1px;
  background:currentColor;
  opacity:.34;
}

@media(max-width:900px){
  .mfa-ribbon-title{font-size:10.5vw;}
  .mfa-ribbon-title__design{right:-8vw;top:38vh;}
  .mfa-ribbon-title__motion{left:2vw;top:56vh;}
}
@media(max-width:767px){
  .mfa-ribbon-title{font-size:16vw;letter-spacing:-.07em;}
  .mfa-ribbon-title__design{right:-18vw;top:35vh;}
  .mfa-ribbon-title__motion{left:-8vw;top:59vh;}
  .mfa-ribbon-caption{font-size:6px;width:210px;}
  .mfa-ribbon-micro{left:14px;bottom:4vh;font-size:5px;}
  .mfa-ribbon-progress{right:14px;bottom:4vh;font-size:5px;}
  .mfa-ribbon-progress i{width:36px;}
}


/* =========================================================
   V8 / ORIGINAL HERO LOGO-FIRST OPENING
   The legacy WebGL sphere/logo is the first hero frame.
   WE CREATE / DIGITAL WORLDS becomes the second hero chapter
   only after initial scroll travel. The original Three.js,
   loader, sand, water and pointer runtime remain untouched.
   ========================================================= */
.hero--logo-first .hero__title{
  opacity:0;
  visibility:hidden;
  filter:blur(16px);
  transform:translate(-50%,-45%) scale(.955);
  transition:opacity .75s var(--ease),filter .9s var(--ease),transform 1s var(--ease),visibility 0s linear .9s;
}
.hero--logo-first.hero--title-phase .hero__title{
  opacity:1;
  visibility:visible;
  filter:blur(0);
  transform:translate(-50%,-50%) scale(1);
  transition-delay:0s;
}
/* SandText reads computed opacity, so its GPU text particles stay hidden
   during the logo-only opening and appear with the second chapter. */
.hero--logo-first.hero--logo-phase .hero__title{opacity:0!important}
.hero--logo-first.hero--logo-phase .hero__frame:before{
  background:radial-gradient(circle at 50% 48%,transparent 0 30%,rgba(4,5,7,.035) 47%,rgba(4,5,7,.58) 92%),linear-gradient(90deg,rgba(3,4,6,.48),transparent 27%,transparent 73%,rgba(3,4,6,.43));
}
.hero--logo-first.hero--logo-phase .hero__copy{max-width:330px}
.hero--logo-first.hero--logo-phase .world-chapter{opacity:1;filter:none}
@media(max-width:767px){
  .hero--logo-first .hero__title{transform:translate(-50%,-43%) scale(.96)}
  .hero--logo-first.hero--title-phase .hero__title{transform:translate(-50%,-50%) scale(1)}
}

/* =========================================================
   V9 — ORIGINAL PARTICLE LOGO HERO IS THE REQUIRED FIRST FRAME
   This project intentionally ignores reduced-motion for the legacy hero because
   the user explicitly requires the full WebGL / particle / water experience.
   ========================================================= */
.hero--logo-first.hero--logo-phase .hero__title{
  opacity:0!important;
  visibility:hidden!important;
  filter:blur(18px)!important;
  pointer-events:none!important;
}
.hero--logo-first.hero--title-phase .hero__title{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}
.hero--logo-first.hero--logo-phase .hero__eyebrow,
.hero--logo-first.hero--logo-phase .hero__copy,
.hero--logo-first.hero--logo-phase .hero__status,
.hero--logo-first.hero--logo-phase .hero__progress,
.hero--logo-first.hero--logo-phase .hero__enter,
.hero--logo-first.hero--logo-phase .world-chapter{
  z-index:4;
}
#worldCanvas{display:block!important}
.world-ready #worldCanvas{display:block!important;opacity:1!important}

@media (prefers-reduced-motion: reduce){
  /* Override legacy accessibility fallback only for this explicitly immersive site. */
  #worldCanvas,#waterCanvas,#sandTextCanvas,.water-glass,.loader{display:block!important}
  #worldCanvas{opacity:0}
  .world-ready #worldCanvas{opacity:1!important}
  .water-ready #waterCanvas{opacity:.82!important}
  .sand-ready #sandTextCanvas{opacity:1!important}
  .hero.immersive-scene{height:550vh!important;min-height:0!important}
  .hero .sticky-frame{position:sticky!important;top:0!important;height:100svh!important;min-height:660px!important}
  .hero--logo-first .hero__title{transition:opacity .75s var(--ease),filter .9s var(--ease),transform 1s var(--ease),visibility 0s linear .9s!important}
}

/* ================================================================
   V10 — NATIVE REACT THREE.JS NEWGEN HERO + FLUID INTERACTION
   No legacy WebGL boot scripts are required for the opening scene.
   ================================================================ */
.newgen-world-canvas{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  width:100vw!important;
  height:100svh!important;
  pointer-events:none!important;
  background:#050608;
}
.newgen-fluid-canvas{
  position:fixed!important;
  inset:0!important;
  z-index:880!important;
  width:100vw!important;
  height:100svh!important;
  pointer-events:none!important;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .55s ease;
}
.newgen-fluid-ready .newgen-fluid-canvas{opacity:.88}
.newgen-react-hero .hero{position:relative;z-index:2}
.newgen-react-hero .hero__frame{z-index:3}
.newgen-react-hero .topbar,
.newgen-react-hero .side-index,
.newgen-react-hero .scroll-meter,
.newgen-react-hero .sound-toggle,
.newgen-react-hero .contact-pill,
.newgen-react-hero .menu{z-index:930}
.newgen-react-hero .water-glass{z-index:879}
.newgen-react-hero .grain{z-index:870}
.newgen-react-hero .cursor{z-index:980}
.newgen-logo-caption{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,135px);
  z-index:5;
  display:flex;
  align-items:baseline;
  gap:4px;
  opacity:0;
  font-size:11px;
  letter-spacing:-.045em;
  color:#e8f7ff;
  text-shadow:0 0 18px rgba(173,225,255,.26);
  transition:opacity .7s ease .7s,transform 1.1s cubic-bezier(.16,1,.3,1) .45s;
  pointer-events:none;
}
.newgen-logo-caption b{font-weight:700}.newgen-logo-caption span{font-weight:300}
.newgen-logo-ready .hero--logo-phase .newgen-logo-caption{opacity:.68;transform:translate(-50%,122px)}
.hero--title-phase .newgen-logo-caption{opacity:0!important}
.newgen-react-hero .hero--logo-phase .hero__title{opacity:0!important;visibility:hidden!important;filter:blur(18px)!important}
.newgen-react-hero .hero--title-phase .hero__title{opacity:1!important;visibility:visible!important;filter:none!important}
.newgen-react-hero .fluid-react{will-change:translate,rotate;translate:var(--fluid-x,0) var(--fluid-y,0);rotate:var(--fluid-r,0deg)}
.newgen-react-hero .hero--logo-phase .hero__frame:before{
  background:radial-gradient(circle at 50% 49%,transparent 0 29%,rgba(4,5,7,.04) 47%,rgba(4,5,7,.58) 92%),linear-gradient(90deg,rgba(3,4,6,.45),transparent 27%,transparent 73%,rgba(3,4,6,.42));
}
@media(max-width:767px){
  .newgen-logo-caption{transform:translate(-50%,100px);font-size:9px}
  .newgen-logo-ready .hero--logo-phase .newgen-logo-caption{transform:translate(-50%,92px)}
  .newgen-fluid-ready .newgen-fluid-canvas{opacity:.62}
}

/* ================================================================
   V11 — EXACT CI4 PARTICLE PORTAL + RAW THREE.JS FLUID
   The opening hero is rendered by two explicit WebGL canvases using
   the same particle geometry/shaders and mouse-ripple shader as the
   supplied CI4 project. No R3F hero wrapper or dynamic legacy module.
   ================================================================ */
html.newgen-react-hero #worldCanvas.newgen-world-raw{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  z-index:0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  background:#050608!important;
}
html.newgen-react-hero #waterCanvas.newgen-water-raw{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  z-index:880!important;
  opacity:.94!important;
  visibility:visible!important;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
  background:transparent!important;
  filter:drop-shadow(0 0 12px rgba(188,230,255,.08));
}
html.newgen-react-hero .hero{position:relative;z-index:2}
html.newgen-react-hero .hero__frame{z-index:3}
html.newgen-react-hero .hero--logo-phase .hero__title{
  opacity:0!important;visibility:hidden!important;filter:blur(22px)!important;transform:translate(-50%,-46%) scale(.96)!important;
}
html.newgen-react-hero .hero--title-phase .hero__title{
  opacity:1!important;visibility:visible!important;filter:none!important;transform:translate(-50%,-50%) scale(1)!important;
  transition:opacity .75s var(--ease),filter .9s var(--ease),transform 1s var(--ease)!important;
}
html.newgen-react-hero .fluid-react{will-change:translate,rotate;translate:var(--fluid-x,0) var(--fluid-y,0);rotate:var(--fluid-r,0deg)}
.newgen-assembly-status{
  position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,150px);display:flex;align-items:center;gap:10px;
  font:6px/1 var(--mono);letter-spacing:.16em;color:rgba(205,231,249,.55);pointer-events:none;
}
.newgen-assembly-status i{display:block;width:34px;height:1px;background:linear-gradient(90deg,transparent,#bfe7ff);animation:newgenAssembly 1.1s ease-in-out infinite}
@keyframes newgenAssembly{0%,100%{transform:scaleX(.25);opacity:.3}50%{transform:scaleX(1);opacity:1}}
.newgen-accessible-brand{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:767px){html.newgen-react-hero #waterCanvas.newgen-water-raw{opacity:.72!important}.newgen-assembly-status{transform:translate(-50%,116px)}}

/* ================================================================
   V12 — CONTENT-COUPLED LIQUID FIELD + CINEMATIC REVEALS
   The water field now moves real UI nodes, not only a background canvas.
   Individual translate/rotate/scale properties deliberately coexist with
   GSAP's transform matrix so scroll choreography stays intact.
   ================================================================ */
[data-fluid-ui]{
  translate:var(--liq-x,0px) var(--liq-y,0px);
  rotate:var(--liq-r,0deg);
  scale:var(--liq-s,1);
  transform-style:preserve-3d;
  will-change:translate,rotate,scale;
}
[data-fluid-media]{
  translate:var(--liq-media-x,0px) var(--liq-media-y,0px);
  rotate:var(--liq-media-r,0deg);
  scale:var(--liq-media-s,1);
  will-change:translate,rotate,scale;
}
.liquid-card{
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.liquid-card:before{
  content:"";position:absolute;inset:-1px;z-index:5;pointer-events:none;opacity:calc(var(--liq-pressure,0)*.28);
  background:radial-gradient(circle at var(--liquid-pointer-x,50%) var(--liquid-pointer-y,50%),rgba(255,255,255,.26),transparent 34%);
  mix-blend-mode:soft-light;
}
.liquid-section:after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:30;opacity:.16;
  background:radial-gradient(220px circle at var(--liquid-pointer-x,50%) var(--liquid-pointer-y,50%),rgba(255,255,255,.12),transparent 72%);
  mix-blend-mode:overlay;
}

/* Key facts — arrive from three directions, flatten only after reveal. */
.tr-keyfacts{perspective:1800px}
.tr-facts{perspective:1500px}
.tr-fact-card{transform-style:preserve-3d;box-shadow:0 22px 70px rgba(0,0,0,.08)}
.tr-fact-media{position:absolute;inset:0;overflow:hidden}
.tr-fact-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.32) contrast(1.04);opacity:.78;scale:1.035}
.tr-fact-card>img{display:none}

/* Selected work — keep the editorial title in its own lane; cards reveal only
   as they enter the viewport instead of being permanently visible. */
.tr-work{perspective:1800px}
.tr-work-head{width:min(330px,26vw);overflow:hidden;z-index:6}
.tr-work-title{font-size:clamp(46px,5.15vw,92px);line-height:.88;margin-top:10vh}
.tr-work-track{left:31vw;top:12vh;height:70vh;gap:clamp(30px,4.2vw,78px)}
.tr-project{width:min(570px,42vw);transform-style:preserve-3d}
.tr-project:nth-child(2n){margin-top:7vh}
.tr-project__media{height:52vh;min-height:390px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.10)}
.tr-project__media img{scale:1.035;transition:scale .9s cubic-bezier(.16,1,.3,1),filter .6s ease}
.tr-project:hover .tr-project__media img{scale:1.075}
.tr-project__meta{position:relative;z-index:3;background:linear-gradient(180deg,rgba(239,239,236,.94),rgba(239,239,236,.78));backdrop-filter:blur(8px);padding:13px 4px 4px}
.tr-work-foot{left:31vw}

/* Nine-direction water assembly. */
.tr-water-grid{height:100svh;position:relative;overflow:hidden;perspective:1800px;background:var(--tr-paper);background-image:linear-gradient(90deg,transparent calc(33.333% - .5px),var(--tr-grid) 33.333%,transparent calc(33.333% + .5px)),linear-gradient(90deg,transparent calc(66.666% - .5px),var(--tr-grid) 66.666%,transparent calc(66.666% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),var(--tr-grid) 50%,transparent calc(50% + .5px))}
.tr-water-grid-title{position:absolute;left:var(--tr-pad);top:8vh;z-index:8;pointer-events:none}
.tr-water-grid-title span{font:600 7px/1.2 var(--tr-mono);letter-spacing:.13em}
.tr-water-grid-title h2{margin:16px 0 0;font-size:clamp(62px,8vw,150px);line-height:.75;letter-spacing:-.085em;font-weight:400}
.tr-water-grid-stage{position:absolute;left:50%;top:53%;width:min(72vw,1280px);height:72vh;translate:-50% -50%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:12px;perspective:1800px}
.tr-water-grid-card{position:relative;overflow:hidden;background:#d8d8d5;min-width:0;min-height:0;box-shadow:0 18px 60px rgba(0,0,0,.08);transform-style:preserve-3d}
.tr-water-grid-media{position:absolute;inset:0;overflow:hidden}
.tr-water-grid-media img{width:100%;height:100%;object-fit:cover;scale:1.05}
.tr-water-grid-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.54));pointer-events:none}
.tr-water-grid-card small,.tr-water-grid-card b{position:absolute;z-index:3;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.28)}
.tr-water-grid-card small{top:11px;left:12px;font:6px var(--tr-mono)}
.tr-water-grid-card b{left:12px;bottom:10px;font-size:12px;font-weight:500}
.tr-water-grid-note{position:absolute;right:var(--tr-pad);bottom:3.5vh;width:min(510px,44vw);text-align:right;font:6px/1.5 var(--tr-mono);letter-spacing:.07em;color:#696969}

/* True cylindrical DESIGN IN MOTION. The WebGL planes themselves are bent in
   the vertex shader; CSS only establishes the stage. */
.mfa-ribbon{background:#d8d8d5!important;perspective:1800px}
.mfa-ribbon-canvas{inset:-3vh -5vw!important}
.mfa-ribbon-canvas canvas{filter:drop-shadow(0 28px 34px rgba(0,0,0,.13))}
.mfa-ribbon-title{z-index:1!important}
.mfa-ribbon-title__design{top:31vh!important;right:-3vw!important}
.mfa-ribbon-title__motion{top:55vh!important;left:-3vw!important}
.mfa-ribbon-caption{z-index:6!important;padding:9px 13px;border:1px solid rgba(0,0,0,.12);background:rgba(239,239,236,.44);backdrop-filter:blur(8px)}

/* Make static pages feel suspended in the same fluid container. */
.tr-keyfacts,.tr-work,.tr-water-grid,.mfa-ribbon{isolation:isolate}
.tr-keyfacts h2,.tr-kicker,.tr-work-title,.tr-project,.tr-fact-card,.tr-water-grid-card,.mfa-ribbon-caption,.mfa-ribbon-title{will-change:transform,opacity,filter,clip-path,translate,rotate,scale}

@media(max-width:900px){
  .tr-work-head{width:34vw}.tr-work-track{left:38vw}.tr-work-foot{left:38vw}
  .tr-water-grid-stage{width:82vw;height:68vh}
}
@media(max-width:767px){
  .tr-work-head{width:78vw}.tr-work-track{left:14px;top:39vh}.tr-work-foot{left:14px}
  .tr-water-grid-stage{width:92vw;height:68vh;gap:7px}
  .tr-water-grid-title h2{font-size:13vw}.tr-water-grid-note{width:72vw}
  .mfa-ribbon-title__design{top:34vh!important;right:-17vw!important}
  .mfa-ribbon-title__motion{top:61vh!important;left:-10vw!important}
}


/* ================================================================
   V13 — CONTINUOUS HAND-OFF + VISIBLE KEY-FACTS TILT
   ================================================================ */
.tr-band-transform{margin-top:0;overflow:visible}
.tr-band-sticky{will-change:transform;contain:paint}
.tr-band-rows{opacity:1;pointer-events:none}
.tr-band-row{backface-visibility:hidden}
.tr-band-scene{backface-visibility:hidden}
.tr-keyfacts .tr-facts{transform-style:preserve-3d}
.tr-keyfacts .tr-fact-card{backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity,clip-path}
.tr-keyfacts .tr-fact-media{will-change:transform}
@media(max-width:767px){.tr-fact-card:nth-child(2){margin-top:0}}

/* ===================================================================
   V14 — RECORDING-MATCH MOTION PASS
   Continuous strips, obvious 3D reveals, inward spring ribbon and a
   whole-interface liquid field. These rules intentionally override the
   earlier experimental passes without disturbing the original hero.
   =================================================================== */

/* Individual 3D liquid transform layer: compounds with GSAP transforms. */
[data-fluid-ui]{
  translate:var(--liq-x,0px) var(--liq-y,0px)!important;
  rotate:var(--liq-axis-x,0) var(--liq-axis-y,0) 0 var(--liq-angle,0deg)!important;
  scale:var(--liq-s,1)!important;
  transform-style:preserve-3d;
}
[data-fluid-media]{
  translate:var(--liq-media-x,0px) var(--liq-media-y,0px)!important;
  rotate:0 0 1 var(--liq-media-angle,0deg)!important;
  scale:var(--liq-media-s,1)!important;
  transform-style:preserve-3d;
}
.liquid-card{perspective:1300px;isolation:isolate}
.liquid-card:before{opacity:calc(var(--liq-pressure,0)*.36);backdrop-filter:blur(calc(var(--liq-pressure,0)*1.2px))}
.liquid-section:after{opacity:calc(.08 + var(--liq-pressure,0)*.08)}

/* Slice hand-offs enter from below instead of creating a black pause. */
.tr-slice-wrap{height:112svh;margin-top:-14svh;padding-top:14svh;overflow:visible;z-index:25;pointer-events:none;background:transparent!important}
.tr-slice-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:var(--tr-paper)}
.tr-slice-wrap.is-dark .tr-slice-stage{background:#080909}
.tr-slice__base{background:inherit}

/* Key facts is a long sticky choreography. Cards are clearly tilted while visible. */
.tr-keyfacts{height:190svh;min-height:0;padding:0;overflow:visible;perspective:1800px}
.tr-keyfacts-sticky{position:sticky;top:0;height:100svh;overflow:hidden;padding:7vh var(--tr-pad) 5vh;background:var(--tr-paper);background-image:linear-gradient(90deg,transparent calc(25% - .5px),var(--tr-grid) 25%,transparent calc(25% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),var(--tr-grid) 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(75% - .5px),var(--tr-grid) 75%,transparent calc(75% + .5px))}
.tr-keyfacts h2{margin:7vh 0 0;font-size:clamp(54px,6.8vw,118px)}
.tr-kicker{margin:10px auto 5.5vh}
.tr-facts{max-width:1180px;margin:0 auto;gap:clamp(18px,3.5vw,62px);align-items:center;perspective:1500px}
.tr-fact-card{min-height:min(48vh,520px);height:48vh;margin-top:0!important;box-shadow:0 28px 80px rgba(0,0,0,.12)}
.tr-fact-card:nth-child(2){translate:0 4vh}
.tr-keyfacts .tr-rule{bottom:3.4vh}

/* Selected work: editorial title stays in its lane; each project masks/tilts in. */
.tr-work-head{left:var(--tr-pad);top:11vh;width:min(270px,20vw)}
.tr-work-title{font-size:clamp(42px,4.55vw,82px);line-height:.86;margin-top:8.5vh}
.tr-work-track{left:24vw;top:11vh;height:72vh;gap:clamp(34px,4.5vw,82px);padding-right:16vw}
.tr-project{width:min(610px,43vw)}
.tr-project:nth-child(2n){margin-top:9vh}
.tr-project__media{height:53vh;min-height:410px}
.tr-work-foot{left:24vw}

/* Recording-style DESIGN IN MOTION spring stage. */
.mfa-ribbon{background:#d3d3d0!important}
.mfa-ribbon-canvas{inset:-8vh -6vw!important}
.mfa-ribbon-canvas canvas{filter:drop-shadow(0 32px 38px rgba(0,0,0,.15))}
.mfa-ribbon-title{font-size:clamp(78px,9.1vw,176px)!important;color:#383936}
.mfa-ribbon-title__design{top:29vh!important;right:-2vw!important}
.mfa-ribbon-title__motion{top:57vh!important;left:-2vw!important}
.mfa-ribbon-caption{background:rgba(228,228,224,.58)!important;border-color:rgba(0,0,0,.10)!important;box-shadow:0 12px 40px rgba(0,0,0,.06)}

/* Ribbon -> flat 3x2 composition. */
.tr-ribbon-grid{height:100svh;position:relative;overflow:hidden;perspective:1800px;background:#d3d3d0;background-image:linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(0,0,0,.07) 33.333%,transparent calc(33.333% + .5px)),linear-gradient(90deg,transparent calc(66.666% - .5px),rgba(0,0,0,.07) 66.666%,transparent calc(66.666% + .5px))}
.tr-ribbon-grid-copy{position:absolute;left:var(--tr-pad);bottom:4vh;z-index:5;width:270px;color:#555}
.tr-ribbon-grid-copy span{display:block;font:6px var(--tr-mono);letter-spacing:.12em;margin-bottom:8px}
.tr-ribbon-grid-copy b{font-size:24px;line-height:.88;letter-spacing:-.05em;font-weight:500}
.tr-ribbon-grid-stage{position:absolute;left:50%;top:48%;translate:-50% -50%;width:min(76vw,1240px);height:72vh;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:16px;perspective:1800px}
.tr-ribbon-grid-card{position:relative;overflow:hidden;background:#ddd;box-shadow:0 20px 65px rgba(0,0,0,.10);transform-style:preserve-3d;min-width:0;min-height:0}
.tr-ribbon-grid-card>div{position:absolute;inset:0;overflow:hidden}
.tr-ribbon-grid-card img{width:100%;height:100%;object-fit:cover;scale:1.035}
.tr-ribbon-grid-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.52));pointer-events:none}
.tr-ribbon-grid-card small,.tr-ribbon-grid-card strong{position:absolute;z-index:3;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.32)}
.tr-ribbon-grid-card small{top:11px;left:11px;font:6px var(--tr-mono)}
.tr-ribbon-grid-card strong{left:11px;bottom:10px;font-size:12px;font-weight:500}

/* Final grid begins slicing while it is still visually present. */
.tr-band-transform{height:208svh;margin-top:-10svh;padding-top:10svh;z-index:28;background:#050606}
.tr-band-sticky{contain:paint}
.tr-band-card{border-radius:2px}

/* Light final contact, like the supplied recording. */
.tr-contact{height:100svh;min-height:720px;background:#f4f4f1!important;color:#aaa!important;overflow:hidden}
.tr-contact-liquid{position:absolute;inset:0;pointer-events:none;background:radial-gradient(340px circle at var(--liquid-pointer-x,50%) var(--liquid-pointer-y,50%),rgba(80,95,100,.08),transparent 72%),linear-gradient(90deg,transparent calc(50% - .5px),rgba(0,0,0,.06) 50%,transparent calc(50% + .5px));opacity:.75}
.tr-contact-inner{color:#9a9a97}
.tr-contact h2{color:#b2b2ae}
.tr-contact-grid{border-top-color:rgba(0,0,0,.12)}
.tr-contact label{color:#a1a19d}
.tr-contact input,.tr-contact textarea{color:#353532!important;border-bottom-color:rgba(0,0,0,.18)!important;background:transparent!important}
.tr-contact button{color:#333!important;border-color:rgba(0,0,0,.22)!important;background:transparent!important}
.tr-contact a{color:#858581!important}
.tr-footer-word{color:rgba(0,0,0,.035)!important}

@media(max-width:900px){
  .tr-work-head{width:28vw}.tr-work-track{left:31vw}.tr-work-foot{left:31vw}
  .tr-ribbon-grid-stage{width:84vw;height:68vh}
}
@media(max-width:767px){
  .tr-slice-wrap{margin-top:-14svh;padding-top:14svh;height:120svh}
  .tr-keyfacts{height:225svh}.tr-keyfacts-sticky{padding:8vh 14px 4vh}.tr-keyfacts h2{margin-top:8vh}.tr-facts{grid-template-columns:1fr 1fr;gap:10px}.tr-fact-card{height:31vh;min-height:250px}.tr-fact-card:nth-child(3){grid-column:1/-1;width:56%;justify-self:center}
  .tr-work-head{width:78vw}.tr-work-track{left:14px;top:39vh}.tr-work-foot{left:14px}
  .tr-ribbon-grid-stage{width:92vw;height:70vh;gap:8px;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
  .tr-ribbon-grid-copy{left:14px;bottom:2vh;width:210px}.tr-ribbon-grid-copy b{font-size:18px}
  .mfa-ribbon-title__design{top:32vh!important;right:-16vw!important}.mfa-ribbon-title__motion{top:62vh!important;left:-9vw!important}
}


/* ===================================================================
   V18 — smoother liquid cards, readable type and visible cursor
   =================================================================== */
html,body,a,button,[role="button"],input,textarea,select,summary,.menu-button,.sound-toggle,.tr-scroll button,.tr-scroll__track{
  cursor:auto!important;
}

.tr-micro{font-size:9px!important;line-height:1.25!important;letter-spacing:.11em!important}
.tr-kicker{width:min(420px,70vw)!important;font-size:13px!important;line-height:1.55!important}

.tr-work-head{left:max(22px,var(--tr-pad))!important;top:11vh!important;width:min(380px,26vw)!important;overflow:visible!important;z-index:8!important}
.tr-work-title{font-size:clamp(48px,4.9vw,92px)!important;line-height:.86!important;margin-top:8vh!important}
.tr-work-title .word{overflow:visible!important}
.tr-work-track{left:26vw!important;gap:clamp(34px,4vw,74px)!important}
.tr-work-foot{left:26vw!important;font-size:9px!important;letter-spacing:.08em!important}
.tr-project__meta h3{font-size:28px!important;line-height:1.02!important}
.tr-project__meta p{font-size:9px!important;line-height:1.45!important;letter-spacing:.08em!important}
.tr-project__meta em{font-size:12px!important;line-height:1.55!important;color:#555!important;max-width:420px!important}

.tr-fact-card>span{font-size:8px!important;letter-spacing:.08em!important}
.tr-fact-card>strong{font-size:clamp(58px,6.5vw,102px)!important}
.tr-fact-card>p{font-size:12px!important;line-height:1.45!important;max-width:76%!important}

.tr-ribbon-grid-copy span{font-size:8px!important;line-height:1.35!important}
.tr-ribbon-grid-copy b{font-size:28px!important;line-height:.92!important}
.tr-ribbon-grid-card small{font-size:8px!important}
.tr-ribbon-grid-card strong{font-size:15px!important;line-height:1.2!important}

/* Shared liquid card treatment for selected work, key facts and ribbon-grid cards */
.tr-project,.tr-fact-card,.tr-ribbon-grid-card{
  border-radius:calc(8px + var(--liq-pressure,0)*7px) calc(18px + var(--liq-pressure,0)*12px) calc(10px + var(--liq-pressure,0)*8px) calc(16px + var(--liq-pressure,0)*12px)!important;
  overflow:hidden!important;
  transition:border-radius .28s ease, box-shadow .35s ease, filter .35s ease;
  box-shadow:0 24px 72px rgba(0,0,0,.10), 0 3px 14px rgba(255,255,255,.12) inset!important;
}
.tr-project__media,.tr-fact-media,.tr-ribbon-grid-card>div{
  border-radius:inherit!important;
  overflow:hidden!important;
}
.tr-project::after,.tr-fact-card::before,.tr-ribbon-grid-card::before{
  backdrop-filter:blur(calc(1.4px + var(--liq-pressure,0)*2.4px));
}
.liquid-card:before{
  opacity:calc(.10 + var(--liq-pressure,0)*.18)!important;
  background:
    radial-gradient(circle at var(--liquid-pointer-x,50%) var(--liquid-pointer-y,50%),rgba(255,255,255,.34),transparent 24%),
    radial-gradient(140px circle at calc(var(--liquid-pointer-x,50%) + 22px) calc(var(--liquid-pointer-y,50%) - 18px),rgba(173,225,255,.16),transparent 58%)!important;
}
[data-fluid-media] img{
  filter:saturate(1.03) contrast(1.04);
}

/* Mobile readable fallback */
@media(max-width:767px){
  .tr-work-head{width:84vw!important;left:14px!important;top:10vh!important}
  .tr-work-track{left:14px!important;top:39vh!important}
  .tr-work-foot{left:14px!important;right:14px!important;font-size:8px!important}
  .tr-project__meta h3{font-size:22px!important}
  .tr-project__meta em{font-size:11px!important}
  .tr-facts{grid-template-columns:1fr!important}
  .tr-fact-card,.tr-fact-card:nth-child(3){width:100%!important;justify-self:stretch!important}
}

/* ===================================================================
   V19 — REFERENCE DESIGN-IN-MOTION CYLINDRICAL RIBBON
   Continuous edge-to-edge project strip. This intentionally overrides
   the older spring/helix treatment used in V14/V18.
   =================================================================== */
.mfa-ribbon{
  background:#d7d7d5!important;
  background-image:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.18),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.012))!important;
}
.mfa-ribbon:before{
  opacity:.48!important;
  background:
    linear-gradient(14deg,transparent 0 48.8%,rgba(0,0,0,.035) 49%,transparent 49.2%),
    linear-gradient(-11deg,transparent 0 54.8%,rgba(0,0,0,.028) 55%,transparent 55.2%)!important;
}
.mfa-ribbon-canvas{
  inset:-2vh -2.5vw!important;
  z-index:3!important;
}
.mfa-ribbon-canvas canvas{
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.12))!important;
}
.mfa-ribbon-title{
  z-index:1!important;
  font-size:clamp(72px,7.35vw,148px)!important;
  line-height:.80!important;
  letter-spacing:-.074em!important;
  font-weight:440!important;
  color:#343532!important;
}
.mfa-ribbon-title__design{
  left:25.5vw!important;
  right:auto!important;
  top:29.2vh!important;
}
.mfa-ribbon-title__motion{
  left:48.0vw!important;
  right:auto!important;
  top:41.0vh!important;
}
.mfa-ribbon-caption{
  z-index:5!important;
  left:50%!important;
  top:56.5%!important;
  width:auto!important;
  min-width:196px!important;
  padding:6px 10px!important;
  border:1px solid rgba(0,0,0,.075)!important;
  background:rgba(221,221,218,.52)!important;
  backdrop-filter:blur(7px)!important;
  box-shadow:none!important;
  color:#555650!important;
  font-size:5.5px!important;
  line-height:1.28!important;
  letter-spacing:.055em!important;
}
.mfa-ribbon-micro{
  z-index:5!important;
  left:2.1vw!important;
  bottom:6.0vh!important;
  max-width:250px!important;
  white-space:normal!important;
  color:#565752!important;
  font-size:5.2px!important;
  line-height:1.45!important;
  letter-spacing:.045em!important;
}
.mfa-ribbon-progress{
  z-index:5!important;
  right:2.1vw!important;
  bottom:6.0vh!important;
  color:#565752!important;
  font-size:5.2px!important;
  letter-spacing:.055em!important;
  flex-direction:row-reverse!important;
}
.mfa-ribbon-progress i{
  width:55px!important;
  opacity:.38!important;
}

@media(max-width:900px){
  .mfa-ribbon-title{font-size:10.2vw!important}
  .mfa-ribbon-title__design{left:16vw!important;top:31vh!important}
  .mfa-ribbon-title__motion{left:43vw!important;top:43vh!important}
  .mfa-ribbon-canvas{inset:-1vh -4vw!important}
}
@media(max-width:767px){
  .mfa-ribbon-title{font-size:15vw!important;letter-spacing:-.065em!important}
  .mfa-ribbon-title__design{left:4vw!important;top:28vh!important}
  .mfa-ribbon-title__motion{left:28vw!important;top:39vh!important}
  .mfa-ribbon-canvas{inset:-1vh -13vw!important}
  .mfa-ribbon-caption{top:55%!important;min-width:168px!important;font-size:5px!important}
  .mfa-ribbon-micro{left:14px!important;bottom:5vh!important;width:170px!important;font-size:4.8px!important}
  .mfa-ribbon-progress{right:14px!important;bottom:5vh!important;font-size:4.8px!important}
  .mfa-ribbon-progress i{width:32px!important}
}

/* ===================================================================
   V20 — DESIGN IN MOTION / FLAT-CARD 3D SPIRAL
   Matches the supplied cream editorial reference. Individual project
   images stay flat; only their X/Y/Z transforms build the shared spiral.
   =================================================================== */
.mfa-ribbon{
  background:#f2efe7!important;
  background-image:
    radial-gradient(circle at 48% 44%,rgba(255,255,255,.54),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.012))!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
.mfa-ribbon:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.22!important;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(0,0,0,.032) 50%,transparent calc(50% + .5px)),
    linear-gradient(0deg,transparent calc(50% - .5px),rgba(0,0,0,.022) 50%,transparent calc(50% + .5px))!important;
}
.mfa-ribbon-title{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  color:#11120f!important;
  font-size:clamp(104px,11.15vw,222px)!important;
  font-weight:520!important;
  line-height:.78!important;
  letter-spacing:-.083em!important;
  text-transform:uppercase!important;
  font-family:var(--tr-sans)!important;
}
.mfa-ribbon-title span{
  position:absolute!important;
  display:block!important;
  white-space:nowrap!important;
  /* GSAP owns transform in V25 so DESIGN IN / MOTION can slide continuously. */
}
.mfa-ribbon-title__design{
  left:3.1vw!important;
  right:auto!important;
  top:18vh!important;
}
.mfa-ribbon-title__motion{
  left:auto!important;
  right:4.8vw!important;
  top:43.2vh!important;
}
.mfa-ribbon-canvas{
  position:absolute!important;
  inset:-2.5vh -2.5vw -2.5vh -2.5vw!important;
  z-index:3!important;
  pointer-events:none!important;
}
.mfa-ribbon-canvas canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  filter:drop-shadow(0 20px 28px rgba(39,35,29,.13))!important;
}
.mfa-ribbon-copy,
.mfa-ribbon-selected,
.mfa-ribbon-foot-left,
.mfa-ribbon-foot-right{
  position:absolute!important;
  z-index:5!important;
  pointer-events:none!important;
  color:#1b1c18!important;
  font-family:var(--tr-mono)!important;
  font-weight:500!important;
  text-transform:uppercase!important;
}
.mfa-ribbon-copy{
  left:3.25vw!important;
  top:51.3vh!important;
  width:180px!important;
  font-size:clamp(7px,.58vw,11px)!important;
  line-height:1.42!important;
  letter-spacing:.015em!important;
}
.mfa-ribbon-selected{
  right:3.15vw!important;
  top:8.2vh!important;
  text-align:right!important;
  font-size:clamp(7px,.56vw,10px)!important;
  line-height:1.32!important;
  letter-spacing:.035em!important;
}
.mfa-ribbon-foot-left{
  left:3.25vw!important;
  bottom:6.0vh!important;
  font-size:clamp(6px,.52vw,9px)!important;
  letter-spacing:.025em!important;
}
.mfa-ribbon-foot-right{
  right:3.15vw!important;
  bottom:5.7vh!important;
  text-align:right!important;
  font-size:clamp(6px,.52vw,9px)!important;
  line-height:1.25!important;
  letter-spacing:.025em!important;
}

/* Hide old V18/V19 caption/progress UI if legacy markup is cached. */
.mfa-ribbon-caption,
.mfa-ribbon-micro,
.mfa-ribbon-progress{
  display:none!important;
}

@media(max-width:1100px){
  .mfa-ribbon-title{font-size:12.2vw!important}
  .mfa-ribbon-title__design{left:2.4vw!important;top:10vh!important}
  .mfa-ribbon-title__motion{right:2.8vw!important;top:47vh!important}
  .mfa-ribbon-copy{left:2.7vw!important;top:53vh!important}
  .mfa-ribbon-selected{right:2.7vw!important;top:9.5vh!important}
  .mfa-ribbon-canvas{inset:-1vh -5vw!important}
}

@media(max-width:767px){
  .mfa-ribbon-title{
    font-size:18vw!important;
    line-height:.80!important;
    letter-spacing:-.07em!important;
  }
  .mfa-ribbon-title__design{left:4vw!important;top:13vh!important}
  .mfa-ribbon-title__motion{right:4vw!important;top:61vh!important}
  .mfa-ribbon-copy{
    left:4vw!important;
    top:35vh!important;
    width:135px!important;
    font-size:6px!important;
  }
  .mfa-ribbon-selected{
    right:4vw!important;
    top:10vh!important;
    font-size:6px!important;
  }
  .mfa-ribbon-foot-left{left:4vw!important;bottom:5vh!important;font-size:5.5px!important}
  .mfa-ribbon-foot-right{right:4vw!important;bottom:5vh!important;font-size:5.5px!important}
  .mfa-ribbon-canvas{inset:-1vh -13vw!important}
}


/* ===================================================================
   V25 — FINAL INTERACTION/PACING POLISH
   =================================================================== */

/* The WebGL cloth patches now receive pointer events for curved hover focus.
   Wheel/touch scrolling still bubbles normally through the canvas. */
.mfa-ribbon-canvas{
  pointer-events:auto!important;
  touch-action:pan-y!important;
}
.mfa-ribbon-canvas canvas{
  cursor:default!important;
  touch-action:pan-y!important;
}

/* Keep moving editorial words crisp while they cross behind the ribbon. */
.mfa-ribbon-title__design,
.mfa-ribbon-title__motion{
  will-change:transform,opacity,filter!important;
}

/* Selected Work title is animated completely off the left edge by GSAP. */
.tr-work-head{
  will-change:transform,opacity!important;
}

/* ===================================================================
   V26 — PACING + TRANSITION + SELECTED-WORK SYNCHRONIZATION
   =================================================================== */

/* Opening world: keep the cinematic travel, but do not hold the user for
   more than necessary. Also give the two-line hero title/copy more air. */
.newgen-react-hero .hero.immersive-scene{
  height:390vh!important;
  min-height:0!important;
}
.newgen-react-hero .hero__title{
  line-height:.84!important;
}
.newgen-react-hero .hero__copy{
  line-height:1.56!important;
}
@media(prefers-reduced-motion:reduce){
  .newgen-react-hero .hero.immersive-scene{height:390vh!important}
}

/* The old full-white pause is now a compact editorial bridge with actual
   content. Negative 1px seams prevent a visible strip between sections. */
.tr-slice-wrap{
  height:78svh!important;
  min-height:610px!important;
  margin:-1px 0!important;
  background:var(--tr-paper)!important;
}
.tr-slice-stage{
  position:relative!important;
  top:auto!important;
  height:100%!important;
  min-height:inherit!important;
  overflow:hidden!important;
  background:var(--tr-paper)!important;
}
.tr-slice__base{
  background:
    radial-gradient(circle at 50% 52%,rgba(255,255,255,.92),transparent 38%),
    linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(0,0,0,.055) 33.333%,transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(66.666% - .5px),rgba(0,0,0,.055) 66.666%,transparent calc(66.666% + .5px)),
    var(--tr-paper)!important;
}
.tr-slice{
  z-index:3!important;
}
.tr-slice__signal{
  z-index:5!important;
  left:var(--tr-pad)!important;
  top:7.5vh!important;
  transform:none!important;
  color:#151613!important;
  mix-blend-mode:normal!important;
  font-size:7px!important;
  letter-spacing:.14em!important;
}
.tr-slice__content{
  position:absolute;
  inset:0;
  z-index:2;
  padding:15vh var(--tr-pad) 7vh;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  grid-template-rows:1fr auto;
  column-gap:8vw;
  pointer-events:none;
}
.tr-slice__headline{
  align-self:center;
  margin:0;
  font-size:clamp(64px,8.1vw,150px);
  line-height:.88;
  letter-spacing:-.078em;
  font-weight:430;
}
.tr-slice__headline span{
  display:block;
  overflow:hidden;
}
.tr-slice__copy{
  align-self:center;
  justify-self:end;
  width:min(390px,30vw);
  margin:0;
  font-size:clamp(14px,1.25vw,22px);
  line-height:1.48;
  letter-spacing:-.025em;
  color:#4d4f4b;
}
.tr-slice__pillars{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid rgba(0,0,0,.16);
}
.tr-slice__pillar{
  min-height:82px;
  padding:14px 18px 0 0;
  border-right:1px solid rgba(0,0,0,.12);
  display:grid;
  grid-template-columns:32px 1fr;
  grid-template-rows:auto auto;
  align-content:start;
}
.tr-slice__pillar:last-child{border-right:0;padding-left:18px}
.tr-slice__pillar:nth-child(2){padding-left:18px}
.tr-slice__pillar small{
  grid-row:1/3;
  font:600 7px/1.2 var(--tr-mono);
  color:#777;
}
.tr-slice__pillar b{
  font:600 8px/1.2 var(--tr-mono);
  letter-spacing:.12em;
}
.tr-slice__pillar em{
  margin-top:7px;
  font-style:normal;
  font-size:10px;
  color:#6b6d68;
}

/* Selected Work: heading is the FIRST item of the exact same horizontal
   track as the cards. Therefore forward scroll sends text out first and
   cards follow at identical speed; reverse scroll brings cards first and
   the complete title arrives last, with no left clipping. */
.tr-work-track{
  left:max(22px,var(--tr-pad))!important;
  top:15vh!important;
  height:70vh!important;
  gap:clamp(34px,4vw,74px)!important;
  align-items:flex-start!important;
  padding-right:18vw!important;
}
.tr-work-head{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  flex:0 0 min(390px,27vw)!important;
  width:min(390px,27vw)!important;
  height:68vh!important;
  overflow:visible!important;
  z-index:8!important;
  padding-top:1vh!important;
}
.tr-work-title{
  margin-top:9vh!important;
  line-height:.92!important;
}
.tr-work-title .word{
  overflow:visible!important;
  white-space:nowrap!important;
}
.tr-work-foot{
  left:max(22px,var(--tr-pad))!important;
  right:var(--tr-pad)!important;
}

@media(max-width:767px){
  .newgen-react-hero .hero.immersive-scene{height:315vh!important}
  .newgen-react-hero .hero__title{line-height:.88!important}
  .newgen-react-hero .hero__copy{line-height:1.5!important}
  .tr-slice-wrap{height:82svh!important;min-height:620px!important}
  .tr-slice__content{padding:14vh 14px 5vh;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:18px}
  .tr-slice__headline{font-size:16vw;align-self:start}
  .tr-slice__copy{justify-self:start;width:78vw;font-size:12px}
  .tr-slice__pillars{grid-template-columns:1fr;align-self:end}
  .tr-slice__pillar{min-height:48px;border-right:0;border-bottom:1px solid rgba(0,0,0,.1);padding:9px 0!important}
  .tr-work-track{left:14px!important;top:9.5vh!important;gap:28px!important}
  .tr-work-head{flex-basis:84vw!important;width:84vw!important;height:66vh!important}
  .tr-work-title{margin-top:8vh!important;line-height:.94!important}
  .tr-work-foot{left:14px!important;right:14px!important}
}

/* ===================================================================
   V27 — HERO DEPTH ZOOM + CLEAN SECTION SEAMS + WORK SPACING
   =================================================================== */

/* Scroll-driven title depth: the JS writes these variables from the hero's
   normalized travel. Reverse scroll therefore naturally zooms back out. */
.newgen-react-hero .hero__frame{
  perspective:1600px!important;
  transform-style:preserve-3d!important;
}
.newgen-react-hero .hero--title-phase .hero__title{
  opacity:var(--hero-depth-opacity,1)!important;
  filter:blur(var(--hero-depth-blur,0px))!important;
  transform:translate(-50%,-50%) translateZ(var(--hero-depth-z,0px)) scale(var(--hero-depth-scale,1))!important;
  transform-origin:50% 50%!important;
  transform-style:preserve-3d!important;
  transition:none!important;
  will-change:transform,opacity,filter!important;
}

/* V13 left a 14svh padding-top on this hand-off wrapper. That inherited
   padding was the visible white horizontal row between the black hero and
   the next scene. Reset it so the two scenes meet edge-to-edge. */
.tr-slice-wrap{
  padding-top:0!important;
  margin-top:-1px!important;
  overflow:hidden!important;
}
.tr-slice-stage{
  top:0!important;
  margin:0!important;
}

/* Give the editorial title its own physical lane. It remains the first item
   of the same moving track, but the first project can no longer intrude into
   the title area at any point in forward or reverse travel. */
.tr-work-track{
  gap:clamp(58px,4.8vw,96px)!important;
}
.tr-work-head{
  flex:0 0 clamp(470px,31vw,600px)!important;
  width:clamp(470px,31vw,600px)!important;
  padding-right:clamp(18px,2vw,38px)!important;
  box-sizing:border-box!important;
}
.tr-work-title{
  font-size:clamp(54px,5.15vw,98px)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
  margin-top:8.5vh!important;
}
.tr-work-title .word{
  display:block!important;
  white-space:nowrap!important;
}

@media(max-width:1100px){
  .tr-work-head{
    flex-basis:clamp(400px,40vw,500px)!important;
    width:clamp(400px,40vw,500px)!important;
  }
  .tr-work-title{font-size:clamp(48px,6.2vw,78px)!important}
}
@media(max-width:767px){
  .tr-work-track{gap:34px!important}
  .tr-work-head{
    flex-basis:88vw!important;
    width:88vw!important;
    padding-right:18px!important;
  }
  .tr-work-title{
    font-size:15vw!important;
    line-height:.98!important;
    white-space:normal!important;
  }
  .tr-work-title .word{white-space:normal!important}
}

/* ===================================================================
   V30 — FULL CMS SUBPAGES + HERO MICROCOPY CLEANUP
   =================================================================== */
/* Particle opening: fewer micro labels, larger useful labels and brand. */
.newgen-react-hero .topbar .brand{font-size:clamp(15px,1.25vw,22px)!important;transform:scale(1.08);transform-origin:left center}
.newgen-react-hero .topbar__center{font-size:7px!important;letter-spacing:.13em!important}
.newgen-react-hero .hero__eyebrow{font-size:7px!important;letter-spacing:.12em!important}
.newgen-react-hero .hero__copy{font-size:clamp(14px,1.12vw,20px)!important;line-height:1.55!important;max-width:390px!important}
.newgen-react-hero .hero__progress{font-size:7px!important}
.newgen-react-hero .hero__status{display:none!important}
.newgen-react-hero .world-chapter{font-size:8px!important;line-height:1.28!important}
.newgen-react-hero .world-chapter small{font-size:6px!important;letter-spacing:.12em!important}
.newgen-react-hero .hero--logo-phase .world-chapter:not(.is-active){opacity:0!important}
@media(max-width:767px){.newgen-react-hero .topbar__center,.newgen-react-hero .hero__eyebrow{display:none!important}}

/* CMS public page system */
.cms-site{--cms-paper:#efefec;--cms-ink:#0b0c0c;--cms-grid:rgba(10,11,11,.1);min-height:100vh;background:var(--cms-paper);color:var(--cms-ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.cms-site *{box-sizing:border-box}.cms-site a{color:inherit;text-decoration:none}.cms-site button,.cms-site input,.cms-site textarea{font:inherit}.cms-site main{position:relative}
.cms-header{position:fixed;z-index:100;left:0;right:0;top:0;height:74px;padding:0 clamp(22px,3vw,52px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(0,0,0,.12);background:rgba(239,239,236,.82);backdrop-filter:blur(16px)}
.cms-brand{justify-self:start;display:inline-flex;align-items:baseline;font-size:clamp(18px,1.45vw,27px);letter-spacing:-.075em}.cms-brand b{font-weight:800}.cms-brand span{font-weight:350}.cms-brand i{font-size:.4em;font-style:normal;margin-left:3px}.cms-brand img{width:auto;height:36px;max-width:190px;object-fit:contain}
.cms-header__meta{font:600 7px/1 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:#666}.cms-menu-btn{justify-self:end;border:0;background:none;display:flex;align-items:center;gap:9px;font:600 8px ui-monospace,monospace;letter-spacing:.1em;cursor:pointer}.cms-menu-btn i{display:block;width:25px;height:1px;background:#111}.cms-menu-btn i:last-child{margin-left:-34px;transform:translateY(5px)}
.cms-menu{position:fixed;z-index:300;inset:0;background:#080909;color:#f4f4f0;padding:clamp(28px,5vw,80px);display:grid;grid-template-columns:1fr .35fr;opacity:0;visibility:hidden;transform:translateY(-4%);transition:.45s cubic-bezier(.16,1,.3,1)}.cms-menu.is-open{opacity:1;visibility:visible;transform:none}.cms-menu>button{position:absolute;right:3vw;top:26px;border:1px solid #454545;border-radius:999px;background:none;color:white;padding:10px 16px;font:7px ui-monospace,monospace;cursor:pointer}.cms-menu small{font:7px ui-monospace,monospace;letter-spacing:.14em;color:#777}.cms-menu nav{margin-top:6vh;display:flex;flex-direction:column}.cms-menu nav a{display:grid;grid-template-columns:45px 1fr auto;align-items:center;border-top:1px solid #292929;padding:15px 0}.cms-menu nav a em{font:7px ui-monospace,monospace;color:#666;font-style:normal}.cms-menu nav a span{font-size:clamp(30px,4vw,72px);letter-spacing:-.06em;line-height:.92}.cms-menu nav a b{font-size:22px}.cms-menu footer{align-self:end;border-top:1px solid #292929;padding-top:22px}.cms-menu footer p{color:#999;line-height:1.6}.cms-menu footer a{font-size:18px}
.cms-hero{min-height:100svh;padding:clamp(115px,14vh,160px) clamp(22px,4vw,72px) 8vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:5vw;align-items:center;position:relative;perspective:1400px;border-bottom:1px solid rgba(0,0,0,.13)}.cms-grid-lines{position:absolute;inset:74px 0 0;background-image:linear-gradient(90deg,transparent calc(25% - .5px),var(--cms-grid) 25%,transparent calc(25% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),var(--cms-grid) 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(75% - .5px),var(--cms-grid) 75%,transparent calc(75% + .5px));pointer-events:none}.cms-hero__copy,.cms-hero__media{position:relative;z-index:2}.cms-hero__eyebrow{font:600 8px ui-monospace,monospace;letter-spacing:.15em;margin-bottom:5vh}.cms-hero h1{font-size:clamp(66px,8.4vw,158px);line-height:.79;letter-spacing:-.085em;font-weight:450;margin:0 0 4vh;max-width:1000px;transform-style:preserve-3d}.cms-hero__summary{max-width:650px;font-size:clamp(17px,1.35vw,24px);line-height:1.5;color:#4f5151}.cms-hero__summary p{margin:0}.cms-hero__media{height:min(70vh,720px);overflow:hidden;border-radius:2px;background:#0a0a0a;transform-style:preserve-3d}.cms-hero__media img{width:100%;height:100%;object-fit:cover}.cms-hero__media span{position:absolute;left:15px;bottom:15px;background:rgba(242,242,238,.9);padding:7px 10px;font:600 7px ui-monospace,monospace;letter-spacing:.1em}.cms-hero__index{position:absolute;z-index:2;left:20px;bottom:5vh;display:flex;flex-direction:column;align-items:center;gap:10px;font:6px ui-monospace,monospace}.cms-hero__index i{height:70px;width:1px;background:#999}.cms-hero__index span{writing-mode:vertical-rl;letter-spacing:.14em}
.cms-intro{min-height:72svh;padding:12vh clamp(22px,7vw,140px);display:grid;grid-template-columns:.35fr 1fr;gap:8vw;align-items:start;border-bottom:1px solid rgba(0,0,0,.13)}.cms-intro>small,.cms-section-head small,.cms-content-section small,.cms-contact small{font:600 7px ui-monospace,monospace;letter-spacing:.14em}.cms-intro__body{font-size:clamp(31px,4vw,76px);line-height:1.04;letter-spacing:-.055em;max-width:1200px}.cms-intro__body p{margin:0 0 .7em}
.cms-rich{font-size:clamp(15px,1.05vw,19px);line-height:1.75;color:#4c4f4e}.cms-rich p:first-child{margin-top:0}.cms-rich ul,.cms-rich ol{padding-left:1.2em}.cms-rich a{text-decoration:underline}
.cms-content-section{min-height:78svh;padding:11vh clamp(22px,6vw,110px);border-bottom:1px solid rgba(0,0,0,.13);display:grid;grid-template-columns:120px minmax(0,1fr) minmax(330px,.8fr);gap:4vw;align-items:center;perspective:1200px}.cms-content-section__index{align-self:start;display:flex;flex-direction:column;gap:10px}.cms-content-section__index b{font:600 8px ui-monospace,monospace}.cms-content-section__index span{font:6px ui-monospace,monospace;letter-spacing:.1em;color:#777;writing-mode:vertical-rl}.cms-content-section__copy h2{font-size:clamp(45px,5.8vw,108px);font-weight:450;letter-spacing:-.075em;line-height:.88;margin:20px 0 22px;transform-style:preserve-3d}.cms-subtitle{font-size:clamp(18px,1.6vw,28px);line-height:1.35;max-width:700px}.cms-content-section__image{height:58vh;min-height:420px;overflow:hidden;background:#111}.cms-content-section__image img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}.cms-content-section:hover .cms-content-section__image img{transform:scale(1.035)}.cms-button{display:inline-flex;margin-top:24px;border:1px solid #999;border-radius:999px;padding:13px 18px;font:600 8px ui-monospace,monospace}.layout-image-left .cms-content-section__image{grid-column:2;grid-row:1}.layout-image-left .cms-content-section__copy{grid-column:3}.layout-full{grid-template-columns:120px 1fr}.layout-full .cms-content-section__image{grid-column:1/-1;height:70vh}.layout-dark{background:#080909;color:#f3f3ef}.layout-dark .cms-rich{color:#b5b8b7}
.cms-listing,.cms-card-collection,.cms-careers{padding:12vh clamp(22px,6vw,110px);border-bottom:1px solid rgba(0,0,0,.13)}.cms-section-head{display:grid;grid-template-columns:.35fr 1fr;gap:4vw;margin-bottom:8vh}.cms-section-head h2{font-size:clamp(50px,6vw,112px);font-weight:450;letter-spacing:-.075em;line-height:.86;margin:0}.cms-service-list{border-top:1px solid #aaa}.cms-service-row{display:grid;grid-template-columns:60px minmax(230px,.7fr) 1fr 30px;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid #c3c3bf}.cms-service-row span{font:7px ui-monospace,monospace}.cms-service-row h3{font-size:clamp(24px,2.6vw,48px);font-weight:450;letter-spacing:-.055em;margin:0}.cms-service-row p{margin:0;color:#666;line-height:1.55}.cms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw}.cms-card>div{position:relative;height:46vh;min-height:340px;overflow:hidden;background:#111}.cms-card img{width:100%;height:100%;object-fit:cover;transition:.7s cubic-bezier(.16,1,.3,1)}.cms-card:hover img{transform:scale(1.045)}.cms-card>div span{position:absolute;top:12px;left:12px;background:#f1f1ed;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font:7px ui-monospace,monospace}.cms-card>small{display:block;margin:16px 0 8px;font:7px ui-monospace,monospace;color:#777}.cms-card h3{font-size:28px;letter-spacing:-.05em;margin:0}.cms-card p{color:#666;line-height:1.55}.cms-card>a{font:600 8px ui-monospace,monospace;border-bottom:1px solid #777;padding-bottom:5px}
.cms-careers>div:last-child{border-top:1px solid #aaa}.cms-careers article{display:grid;grid-template-columns:60px 1fr auto;gap:30px;padding:32px 0;border-bottom:1px solid #c3c3bf;align-items:start}.cms-careers article>span,.cms-careers small{font:7px ui-monospace,monospace;color:#777}.cms-careers h3{font-size:clamp(28px,3vw,52px);letter-spacing:-.055em;margin:6px 0 10px}.cms-careers p{color:#666;margin:5px 0;max-width:720px}.cms-careers article>a{border:1px solid #999;border-radius:999px;padding:12px 16px;font:600 8px ui-monospace,monospace}
.cms-contact{padding:12vh clamp(22px,6vw,110px);display:grid;grid-template-columns:.7fr 1fr;gap:8vw;min-height:78svh}.cms-contact h2{font-size:clamp(50px,6vw,110px);line-height:.86;letter-spacing:-.075em;font-weight:450}.cms-contact>div p{font-size:18px;line-height:1.6;color:#555}.cms-contact form{display:grid;grid-template-columns:1fr 1fr;gap:22px}.cms-contact label{font:600 7px ui-monospace,monospace;color:#666;letter-spacing:.08em}.cms-contact input,.cms-contact textarea{display:block;width:100%;border:0;border-bottom:1px solid #999;background:transparent;padding:12px 0;outline:0;font-size:17px}.cms-contact .wide{grid-column:1/-1}.cms-contact button{justify-self:start;border:1px solid #777;border-radius:999px;padding:14px 18px;background:transparent;cursor:pointer;font:600 8px ui-monospace,monospace}
.cms-footer{background:#080909;color:#f2f2ee;padding:8vh clamp(22px,5vw,90px) 3vh}.cms-footer__word{font-size:clamp(100px,19vw,360px);line-height:.7;letter-spacing:-.09em;font-weight:600;opacity:.94}.cms-footer__grid{margin-top:9vh;padding-top:30px;border-top:1px solid #333;display:grid;grid-template-columns:1fr .55fr .7fr;gap:5vw}.cms-footer__grid p{color:#929695;line-height:1.6;max-width:520px}.cms-footer nav,.cms-footer__grid>div:last-child{display:flex;flex-direction:column;gap:10px;font-size:13px}.cms-footer__grid>div:last-child span{color:#888;margin-top:10px}.cms-footer__bottom{margin-top:8vh;border-top:1px solid #333;padding-top:18px;display:flex;justify-content:space-between;color:#777;font:7px ui-monospace,monospace}.cms-footer__bottom div{display:flex;gap:20px}
.cms-loading,.cms-missing{min-height:100svh;background:#080909;color:#fff;display:grid;place-items:center;align-content:center;gap:20px;text-align:center}.cms-loading span{font:7px ui-monospace,monospace;letter-spacing:.2em}.cms-loading i{width:140px;height:1px;background:#fff;animation:cmsLoad 1.4s infinite alternate}.cms-missing h1{font-size:9vw;margin:0;letter-spacing:-.08em}.cms-missing p{color:#999}@keyframes cmsLoad{from{transform:scaleX(.1)}to{transform:scaleX(1)}}
@media(max-width:900px){.cms-header{grid-template-columns:1fr auto}.cms-header__meta{display:none}.cms-hero{grid-template-columns:1fr;min-height:auto;padding-top:130px}.cms-hero__media{height:60vh}.cms-intro{grid-template-columns:1fr;min-height:auto}.cms-content-section{grid-template-columns:70px 1fr}.cms-content-section__image{grid-column:2}.layout-image-left .cms-content-section__image,.layout-image-left .cms-content-section__copy{grid-column:2}.cms-cards{grid-template-columns:1fr 1fr}.cms-contact{grid-template-columns:1fr}.cms-menu{grid-template-columns:1fr}.cms-menu footer{display:none}}
@media(max-width:600px){.cms-header{height:62px;padding:0 16px}.cms-brand{font-size:18px}.cms-hero{padding:105px 16px 8vh}.cms-hero h1{font-size:16vw}.cms-hero__media{height:48vh}.cms-hero__index{display:none}.cms-intro,.cms-content-section,.cms-listing,.cms-card-collection,.cms-careers,.cms-contact{padding-left:16px;padding-right:16px}.cms-content-section{grid-template-columns:1fr}.cms-content-section__index{display:none}.cms-content-section__copy,.cms-content-section__image,.layout-image-left .cms-content-section__image,.layout-image-left .cms-content-section__copy{grid-column:1}.cms-content-section__image{height:48vh;min-height:300px}.cms-section-head{grid-template-columns:1fr}.cms-service-row{grid-template-columns:34px 1fr}.cms-service-row p{grid-column:2}.cms-cards{grid-template-columns:1fr}.cms-careers article{grid-template-columns:34px 1fr}.cms-careers article>a{grid-column:2;justify-self:start}.cms-contact form{grid-template-columns:1fr}.cms-contact .wide{grid-column:auto}.cms-footer{padding-left:16px;padding-right:16px}.cms-footer__grid{grid-template-columns:1fr}.cms-menu{padding:28px 18px}.cms-menu nav a span{font-size:10vw}}
.newgen-react-hero .world-chapter:not(.is-active){opacity:0!important;pointer-events:none!important}
.newgen-react-hero .topbar .brand.brand--image{transform:none!important;display:flex;align-items:center}.newgen-react-hero .topbar .brand.brand--image img{display:block;height:32px;width:auto;max-width:190px;object-fit:contain;filter:invert(1);mix-blend-mode:difference}

/* ===== V30 CMS + hero readability cleanup =====
   Keep the immersive scene visually sparse: enlarge the information that matters
   and remove duplicate micro-chrome from the opening particle chapter. */
.newgen-react-hero .topbar .brand{
  font-size:clamp(18px,1.48vw,28px)!important;
  transform:scale(1.12)!important;
  transform-origin:left center!important;
  letter-spacing:-.055em!important;
}
.newgen-react-hero .topbar .brand.brand--image{transform:none!important}
.newgen-react-hero .topbar .brand.brand--image img{
  height:clamp(38px,3vw,52px)!important;
  max-width:240px!important;
}
.newgen-react-hero .topbar__center{
  font-size:clamp(8px,.6vw,10px)!important;
  letter-spacing:.11em!important;
  opacity:.72!important;
  max-width:48vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.newgen-react-hero .topbar__center i,.newgen-react-hero .topbar__center em{display:none!important}
.newgen-react-hero .world-chapter{
  font-size:clamp(10px,.74vw,13px)!important;
  line-height:1.35!important;
  max-width:190px!important;
}
.newgen-react-hero .world-chapter small{
  font-size:clamp(7px,.48vw,9px)!important;
  line-height:1.3!important;
  letter-spacing:.11em!important;
  margin-bottom:7px!important;
}
.newgen-react-hero .world-chapter>span{font-size:inherit!important;line-height:inherit!important}
.newgen-react-hero .hero__copy{
  font-size:clamp(17px,1.28vw,24px)!important;
  line-height:1.34!important;
  max-width:430px!important;
}
.newgen-react-hero .hero__progress>span{
  font-size:clamp(7px,.5vw,9px)!important;
  letter-spacing:.11em!important;
}
.newgen-react-hero .hero__progress>b{display:none!important}
.newgen-react-hero .side-index{display:none!important}
.newgen-react-hero .newgen-assembly-status span{font-size:9px!important;letter-spacing:.12em!important}
@media(max-width:767px){
  .newgen-react-hero .topbar .brand{font-size:18px!important;transform:scale(1.05)!important}
  .newgen-react-hero .topbar .brand.brand--image img{height:34px!important;max-width:170px!important}
  .newgen-react-hero .world-chapter{font-size:10px!important;max-width:145px!important}
  .newgen-react-hero .hero__copy{font-size:15px!important;max-width:72vw!important}
}

/* V30 CMS collection pages */
.cms-editorial-list,.cms-people,.cms-quotes,.cms-faqs{padding:clamp(70px,9vw,150px) clamp(22px,5vw,92px);border-top:1px solid rgba(12,12,12,.14);background:#f2f1ec;color:#10110f}
.cms-editorial-grid,.cms-people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px)}
.cms-editorial-grid article,.cms-people-grid article{border-top:1px solid rgba(12,12,12,.22);padding-top:18px}
.cms-editorial-grid img,.cms-people-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:20px;filter:saturate(.92)}
.cms-people-grid img{aspect-ratio:4/5}
.cms-editorial-grid small,.cms-people-grid small{font:600 9px/1.3 var(--tr-mono);letter-spacing:.13em;text-transform:uppercase;opacity:.58}
.cms-editorial-grid h3,.cms-people-grid h3{font-size:clamp(28px,3vw,56px);font-weight:500;letter-spacing:-.05em;line-height:.96;margin:12px 0}
.cms-editorial-grid p,.cms-people-grid p{font-size:clamp(14px,1.2vw,19px);line-height:1.55;max-width:650px}
.cms-editorial-body{margin-top:20px;padding-top:18px;border-top:1px solid rgba(12,12,12,.12)}
.cms-quotes blockquote{font-size:clamp(28px,4.4vw,76px);line-height:1.02;letter-spacing:-.055em;margin:0;padding:clamp(38px,5vw,80px) 0;border-top:1px solid rgba(12,12,12,.18);max-width:1500px}
.cms-quotes blockquote footer{display:flex;gap:14px;align-items:baseline;margin-top:28px;font:600 10px/1.4 var(--tr-mono);letter-spacing:.1em;text-transform:uppercase}.cms-quotes blockquote footer span{opacity:.55}
.cms-faqs details{border-top:1px solid rgba(12,12,12,.18);padding:0}.cms-faqs details:last-child{border-bottom:1px solid rgba(12,12,12,.18)}
.cms-faqs summary{list-style:none;display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:20px;padding:28px 0;font-size:clamp(20px,2.2vw,38px);letter-spacing:-.035em;cursor:pointer}.cms-faqs summary::-webkit-details-marker{display:none}.cms-faqs summary span{font:600 9px/1 var(--tr-mono);letter-spacing:.12em;opacity:.55}.cms-faqs summary b{font-size:25px;font-weight:400}.cms-faqs details[open] summary b{transform:rotate(45deg)}.cms-faqs details>.cms-rich{padding:0 52px 32px;max-width:900px;font-size:17px;line-height:1.65}
@media(max-width:760px){.cms-editorial-grid,.cms-people-grid{grid-template-columns:1fr}.cms-faqs summary{grid-template-columns:30px 1fr 22px;gap:10px}.cms-faqs details>.cms-rich{padding-left:40px}}

/* ================================================================
   V39 — TRUE WEBGL CLOTH / LIQUID DISTORTION FOR 3x2 RIBBON GRID
   One shared GPU canvas deforms six image surfaces. DOM cards remain as
   semantic/meta overlays and as a fallback during the incoming GSAP assembly.
   ================================================================ */
.tr-ribbon-grid{--cloth-mix:0;isolation:isolate}
.tr-ribbon-grid-cloth-canvas{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--cloth-mix);transition:opacity .08s linear;filter:drop-shadow(0 18px 28px rgba(0,0,0,.12))}
.tr-ribbon-grid-cloth-canvas canvas{display:block!important;width:100%!important;height:100%!important}
.tr-ribbon-grid-stage{z-index:5;pointer-events:none}
.tr-ribbon-grid-card{background:transparent!important;box-shadow:0 20px 65px rgba(0,0,0,.11)!important;pointer-events:auto}
.tr-ribbon-grid-card>[data-cloth-media]{background:transparent!important}
.tr-ribbon-grid-card>[data-cloth-media] img[data-cloth-fallback]{opacity:calc(1 - var(--cloth-mix));transition:opacity .08s linear;filter:saturate(1.03) contrast(1.04)!important}
.tr-ribbon-grid-card:after{z-index:2;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.48));opacity:calc(1 - var(--cloth-mix));transition:opacity .08s linear}
.tr-ribbon-grid-card small,.tr-ribbon-grid-card strong{z-index:7}
/* Disable the old pseudo-glass blur specifically for these cards; the actual
   surface deformation now happens in WebGL and must stay optically sharp. */
.tr-ribbon-grid-card::before{backdrop-filter:none!important;opacity:0!important}
@media(max-width:767px){.tr-ribbon-grid-cloth-canvas{opacity:calc(var(--cloth-mix) * .92)}}

/* ================================================================
   V45 — CONTACT READABILITY + USABLE ENQUIRY FORM + ADAPTIVE MENU
   ================================================================ */
/* The React menu does not use the old legacy menu GSAP reveal, so make the
   backdrop deterministic. This guarantees white nav copy never sits on a
   white/light page. */
.newgen-react-hero .topbar{
  color:#fff!important;
  mix-blend-mode:difference!important;
}
.newgen-react-hero .topbar .brand,
.newgen-react-hero .topbar__center,
.newgen-react-hero .menu-button{color:#fff!important}
.newgen-react-hero .menu-button i{background:currentColor!important}
.newgen-react-hero .menu{
  color:#f5f6f2!important;
  mix-blend-mode:normal!important;
}
.newgen-react-hero .menu.is-open{background:#07080a!important}
.newgen-react-hero .menu .menu__backdrop{
  background:rgba(7,8,10,.985)!important;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s cubic-bezier(.16,1,.3,1);
}
.newgen-react-hero .menu.is-open .menu__backdrop{clip-path:inset(0)!important}
.newgen-react-hero .menu__close,
.newgen-react-hero .menu nav a,
.newgen-react-hero .menu nav span{color:#f5f6f2!important}
.newgen-react-hero .menu nav small,.newgen-react-hero .menu__meta{color:#8e98a6!important}
.newgen-react-hero .menu__foot{color:#aeb5bd!important}
.newgen-react-hero .menu__foot a{color:#d9fffd!important}

/* Homepage contact stays editorial/light, but important information should not
   disappear into pale-grey typography. */
.tr-contact{min-height:860px!important}
.tr-contact-inner{padding-top:9vh!important}
.tr-contact>.tr-contact-liquid{opacity:.48}
.tr-contact .tr-micro{font-size:9px!important;color:#6e6e69!important;letter-spacing:.13em!important}
.tr-contact h2{color:#969691!important;margin:4vh 0 5vh!important}
.tr-contact-grid{grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr)!important;gap:clamp(48px,7vw,120px)!important;padding-top:3vh!important;border-top-color:rgba(0,0,0,.18)!important}
.tr-contact-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 24px!important;max-width:920px!important;align-content:start}
.tr-contact-form label{font:700 9px/1.25 var(--tr-mono)!important;color:#555650!important;letter-spacing:.09em!important;display:block}
.tr-contact-form label>span{color:#6d8fa2}
.tr-contact-form input,.tr-contact-form textarea,.tr-contact-form select{
  display:block;width:100%;margin-top:8px;padding:12px 0 13px!important;border:0!important;border-bottom:1px solid rgba(20,20,18,.34)!important;border-radius:0!important;background:transparent!important;color:#161714!important;outline:none!important;font:500 15px/1.45 Manrope,Arial,sans-serif!important;transition:border-color .25s ease,background .25s ease
}
.tr-contact-form textarea{min-height:112px;resize:vertical}
.tr-contact-form select{appearance:auto;color:#252621}
.tr-contact-form input::placeholder,.tr-contact-form textarea::placeholder{color:#91918b;opacity:1}
.tr-contact-form input:focus,.tr-contact-form textarea:focus,.tr-contact-form select:focus{border-bottom-color:#111!important}
.tr-contact-form .tr-contact-wide{grid-column:1/-1!important}
.tr-contact-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.tr-contact-actions button{min-height:48px!important;padding:0 22px!important;font-size:9px!important;font-weight:700!important;letter-spacing:.09em!important;border-color:rgba(0,0,0,.38)!important;color:#20211e!important;background:rgba(255,255,255,.36)!important;transition:background .25s,color .25s,transform .25s}
.tr-contact-actions button:hover{background:#161714!important;color:#fff!important;transform:translateY(-1px)}
.tr-contact-actions button:disabled{opacity:.55;cursor:wait}
.tr-contact-actions small{font:500 11px/1.45 Manrope,Arial,sans-serif;color:#73736e;max-width:290px}
.tr-contact-status{grid-column:1/-1!important;margin:0!important;min-height:20px;font-size:12px!important;line-height:1.45!important;color:#64645f!important}
.tr-contact-status.is-success{color:#315f49!important}.tr-contact-status.is-error{color:#8b3d46!important}
.tr-contact-meta{display:flex!important;flex-direction:column;gap:28px!important;font-size:14px!important;line-height:1.6!important;color:#4d4e49!important;padding-top:2px}
.tr-contact-meta p{margin:0!important}.tr-contact-meta p:first-child{grid-column:auto!important}
.tr-contact-meta b{display:block;font-size:15px;color:#22231f;margin-bottom:4px}
.tr-contact-meta strong{display:block;font:700 9px/1.2 var(--tr-mono);letter-spacing:.12em;color:#777770;margin-bottom:8px}
.tr-contact-meta a{display:block!important;color:#31322e!important;font-size:14px!important;line-height:1.75;text-decoration:none}
.tr-contact-meta a:hover{text-decoration:underline}
.tr-contact-meta>small{font-size:10px!important;line-height:1.5!important;color:#777770!important;margin-top:auto}

/* Contact CMS page uses the same readable form language. */
.cms-contact form{align-content:start}
.cms-contact label{font-size:9px!important;color:#4d4f4a!important}
.cms-contact label>span{color:#6b8d9d}
.cms-contact input,.cms-contact textarea,.cms-contact select{display:block;width:100%;margin-top:8px;border:0;border-bottom:1px solid #777;background:transparent;padding:12px 0;outline:0;font-size:16px;color:#181916}
.cms-contact select{appearance:auto}.cms-contact textarea{resize:vertical;min-height:130px}
.cms-contact input::placeholder,.cms-contact textarea::placeholder{color:#888}
.cms-contact button{min-height:48px;padding:0 20px;font-size:9px!important;font-weight:700}.cms-contact button:disabled{opacity:.55}
.cms-contact form>p{grid-column:1/-1;font-size:12px;min-height:20px;color:#666}.cms-contact form>p.is-success{color:#315f49}.cms-contact form>p.is-error{color:#8b3d46}

@media(max-width:900px){
  .tr-contact{height:auto!important;min-height:100svh!important}
  .tr-contact-inner{height:auto!important;padding-bottom:150px!important}
  .tr-contact-grid{grid-template-columns:1fr!important}
  .tr-contact-meta{display:grid!important;grid-template-columns:1fr 1fr!important}
}
@media(max-width:620px){
  .tr-contact-form{grid-template-columns:1fr!important}
  .tr-contact-form .tr-contact-wide,.tr-contact-actions,.tr-contact-status{grid-column:1!important}
  .tr-contact-meta{display:flex!important}
  .tr-contact h2{font-size:15vw!important;line-height:.86!important}
  .newgen-react-hero .menu nav{left:6%;width:88vw}
  .newgen-react-hero .menu nav span{font-size:11vw!important}
}

/* ===================================================================
   V47 — ROBOTIC HAND GLOBAL CURSOR
   Fingertip is the real pointer hotspot.  The hand compresses around the
   fingertip on pointerdown to feel like an actual robotic finger press.
   =================================================================== */
.robotic-cursor{display:none}
@media (hover:hover) and (pointer:fine){
  html.robotic-cursor-enabled,
  html.robotic-cursor-enabled body,
  html.robotic-cursor-enabled body *{cursor:none!important}
  html.robotic-cursor-enabled .cursor{display:none!important}

  .robotic-cursor{
    --robot-hand-size:30px;
    position:fixed;
    left:0;top:0;
    z-index:100000;
    width:1px;height:1px;
    display:block;
    pointer-events:none;
    opacity:0;
    transform:translate3d(-180px,-180px,0);
    transition:opacity .16s ease;
    will-change:transform;
    contain:layout style;
  }
  .robotic-cursor.is-visible{opacity:1}
  .robotic-cursor__hand{
    position:absolute;
    left:0;top:0;
    width:var(--robot-hand-size);
    height:auto;
    max-width:none!important;
    user-select:none;
    pointer-events:none;
    /* Finger tip in the generated transparent artwork is ~32% / 10%. */
    transform:translate(-32.2%,-10.4%) rotate(-1.2deg) scale(1);
    transform-origin:32.2% 10.4%;
    filter:drop-shadow(0 8px 13px rgba(0,0,0,.23)) drop-shadow(0 0 8px rgba(73,159,255,.13));
    transition:transform .16s cubic-bezier(.2,.9,.25,1.25),filter .18s ease;
    will-change:transform,filter;
  }
  .robotic-cursor.is-interactive .robotic-cursor__hand{
    transform:translate(-32.2%,-10.4%) rotate(-.35deg) scale(1.10);
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.27)) drop-shadow(0 0 12px rgba(72,166,255,.30));
  }
  /* Body folds inward toward the fingertip, which remains locked to the true
     pointer coordinate — visually reads as the index finger pressing a surface. */
  .robotic-cursor.is-pressing .robotic-cursor__hand,
  .robotic-cursor.is-interactive.is-pressing .robotic-cursor__hand{
    transform:translate(-32.2%,-10.4%) translate(1.8px,2.8px) rotate(1.6deg) scale(.925,.955);
    transform-origin:32.2% 10.4%;
    filter:drop-shadow(0 4px 7px rgba(0,0,0,.25)) drop-shadow(0 0 16px rgba(95,190,255,.48));
    transition-duration:.065s;
  }
  .robotic-cursor__tap{
    position:absolute;
    left:0;top:0;
    width:8px;height:8px;
    border:1.5px solid rgba(135,218,255,.92);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(.35);
    opacity:0;
    box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 17px rgba(90,178,255,.40);
  }
  .robotic-cursor.is-click-pop .robotic-cursor__tap{animation:robotTapPulse .26s cubic-bezier(.1,.72,.3,1) both}
  .robotic-cursor__spark{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#b9edff;opacity:0;box-shadow:0 0 7px #6bc8ff}
  .robotic-cursor.is-click-pop .robotic-cursor__spark--a{animation:robotSparkA .25s ease-out both}
  .robotic-cursor.is-click-pop .robotic-cursor__spark--b{animation:robotSparkB .25s ease-out both}
  @keyframes robotTapPulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(.25)}55%{opacity:.72;transform:translate(-50%,-50%) scale(1.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.35)}}
  @keyframes robotSparkA{0%{opacity:0;transform:translate(-1px,-1px)}25%{opacity:.9}100%{opacity:0;transform:translate(13px,-8px)}}
  @keyframes robotSparkB{0%{opacity:0;transform:translate(-1px,-1px)}25%{opacity:.8}100%{opacity:0;transform:translate(-10px,10px)}}
}
@media (prefers-reduced-motion:reduce){
  .robotic-cursor__hand{transition:none!important}
  .robotic-cursor__tap,.robotic-cursor__spark{animation:none!important}
}

/* V48 final polish */
.tr-cap-stack>div{line-height:.84!important;margin:.035em 0!important}
.tr-work-track{will-change:transform!important;transform:translateZ(0);backface-visibility:hidden}
.tr-project{backface-visibility:hidden;transform-style:preserve-3d}
@media(max-width:767px){.tr-cap-stack>div{line-height:.88!important}}


/* ================================================================
   V49 — REFERENCE-MATCH SELECTED WORK CARD REVEAL
   Offscreen cards enter as a narrow right-edge slice, then their mask
   opens with the horizontal scroll. Reverse scrolling closes it again.
   ================================================================ */
.tr-work{overflow:hidden!important}
.tr-work-track{will-change:transform;transform:translateZ(0)}
.tr-project{will-change:clip-path,transform;transform-origin:0 50%;backface-visibility:hidden}
.tr-project__media{overflow:hidden;will-change:transform;transform:translateZ(0)}
.tr-project__media img{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.tr-project__meta{will-change:transform,opacity}

/* V50 — visible per-card reveal matching the supplied reference recording. */
.tr-project{--project-reveal:1;overflow:hidden!important;contain:paint;}
.tr-project__media{transform-origin:0 50%;}
.tr-project__media img{transition:none!important;}
.tr-project__meta{transition:none!important;}
.tr-project:not(:first-of-type){will-change:clip-path,transform;}

/* ================================================================
   V51 — SELECTED WORK: TRUE PER-CARD REVEAL
   Each project has its own inner reveal shell so horizontal track and liquid
   transforms cannot override the reveal. Hidden cards open from a thin slice.
   ================================================================ */
.tr-project{overflow:visible!important;perspective:1500px}
.tr-project__reveal{position:relative;width:100%;transform-style:preserve-3d;will-change:transform,clip-path,opacity}
.tr-project__media{isolation:isolate;transform-origin:50% 50%;will-change:transform}
.tr-project__media img{will-change:transform}
.tr-project__wipe{position:absolute!important;z-index:6!important;inset:-2px!important;width:auto!important;height:auto!important;border-radius:0!important;background:linear-gradient(90deg,var(--tr-paper,#efefec) 0%,var(--tr-paper,#efefec) 78%,rgba(239,239,236,.65) 100%)!important;pointer-events:none!important;transform:translateX(0);will-change:transform,opacity}
.tr-project__meta{will-change:transform,opacity}
/* V52 Career portal — Jobs + Internships */
.career-portal,.career-application{padding:clamp(74px,9vw,150px) var(--cms-pad,clamp(24px,4vw,72px));background:#efefec;color:#101010}.career-portal{border-top:1px solid rgba(0,0,0,.13)}.career-portal-head{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:40px;align-items:end;margin-bottom:54px}.career-portal-head small,.career-application-copy small{font:600 9px/1.2 var(--tr-mono);letter-spacing:.12em}.career-portal-head h2,.career-application-copy h2{font-size:clamp(54px,7vw,128px);line-height:.84;letter-spacing:-.075em;font-weight:450;margin:14px 0}.career-portal-head p,.career-application-copy>p{max-width:680px;font-size:16px;line-height:1.6;color:#4b4b49}.career-tabs{display:flex;gap:7px}.career-tabs button{border:1px solid rgba(0,0,0,.2);border-radius:999px;background:transparent;padding:13px 18px;cursor:pointer;font:600 10px var(--tr-mono);text-transform:uppercase}.career-tabs button.active{background:#101010;color:#fff}.career-tabs span{opacity:.5;margin-left:7px}.career-openings{border-top:1px solid rgba(0,0,0,.18)}.career-opening{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:28px;align-items:start;padding:34px 0;border-bottom:1px solid rgba(0,0,0,.18)}.career-opening-index{font:600 10px var(--tr-mono)}.career-opening-copy small{font:600 9px var(--tr-mono);text-transform:uppercase;letter-spacing:.1em;color:#646461}.career-opening h3{font-size:clamp(34px,4vw,64px);line-height:.94;letter-spacing:-.055em;font-weight:450;margin:10px 0}.career-opening p{max-width:820px;font-size:14px;line-height:1.6;color:#4f4f4c}.career-opening .career-location{font:600 10px var(--tr-mono);text-transform:uppercase;color:#111}.career-opening>button,.career-empty button{border:1px solid #111;border-radius:999px;background:transparent;padding:13px 18px;cursor:pointer;font:600 9px var(--tr-mono);white-space:nowrap}.career-opening details{margin-top:18px;border-top:1px solid rgba(0,0,0,.12);padding-top:13px}.career-opening summary{cursor:pointer;font:600 9px var(--tr-mono);text-transform:uppercase}.career-opening details div{max-width:850px;font-size:14px;line-height:1.7}.career-empty{padding:70px 0;text-align:center}.career-empty b{display:block;font-size:30px;margin-bottom:10px}.career-empty p{max-width:620px;margin:0 auto 25px;color:#666}.career-application{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.3fr);gap:clamp(45px,7vw,120px);border-top:1px solid rgba(0,0,0,.15);background:#e8e8e5}.career-application-copy{position:sticky;top:110px;height:max-content}.career-upload-note{display:flex;flex-direction:column;gap:6px;margin-top:30px;padding-top:20px;border-top:1px solid rgba(0,0,0,.2);font:9px/1.5 var(--tr-mono)}.career-upload-note b{text-transform:uppercase;margin-bottom:5px}.career-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}.career-form label{display:flex;flex-direction:column;gap:8px;font:600 9px/1.2 var(--tr-mono);letter-spacing:.08em}.career-form label>span{color:#a43a2d}.career-form label>small{font-weight:400;color:#777}.career-form input,.career-form select,.career-form textarea{width:100%;border:0;border-bottom:1px solid rgba(0,0,0,.28);background:transparent;padding:13px 0;font:15px/1.4 Arial,sans-serif;outline:0;color:#111}.career-form textarea{resize:vertical}.career-form input:focus,.career-form select:focus,.career-form textarea:focus{border-bottom-color:#111}.career-form .wide{grid-column:1/-1}.career-file{border:1px solid rgba(0,0,0,.18);padding:17px!important;gap:10px!important}.career-file input{border:0;padding:0}.career-file i{font-style:normal;font-weight:400;color:#777}.career-submit{grid-column:1/-1;border:1px solid #111;border-radius:999px;background:#111;color:#fff;padding:16px 20px;cursor:pointer;font:600 10px var(--tr-mono);letter-spacing:.07em}.career-submit:disabled{opacity:.45}.career-form-status{grid-column:1/-1;min-height:20px;margin:0;font-size:12px;color:#a13c30}.career-form-status.success{color:#287a38}
@media(max-width:900px){.career-portal-head,.career-application{grid-template-columns:1fr}.career-tabs{justify-content:flex-start}.career-application-copy{position:static}.career-opening{grid-template-columns:44px 1fr}.career-opening>button{grid-column:2}.career-form{grid-template-columns:1fr}.career-form .wide,.career-submit,.career-form-status{grid-column:auto}}
@media(max-width:560px){.career-portal,.career-application{padding-left:20px;padding-right:20px}.career-portal-head h2,.career-application-copy h2{font-size:48px}.career-tabs{width:100%}.career-tabs button{flex:1}.career-opening{grid-template-columns:1fr;gap:10px}.career-opening>button{grid-column:auto;width:max-content}}

/* ===================================================================
   V53 — COMPLETE PUBLIC NAVIGATION
   The CMS can expose 10+ public pages. Keep every menu item reachable
   without overflowing the viewport on desktop or mobile.
   =================================================================== */
@media (min-width:901px){
  .newgen-react-hero .menu nav{
    left:6%!important;top:12%!important;bottom:10%!important;transform:none!important;
    width:min(1120px,72vw)!important;display:grid!important;grid-template-columns:1fr 1fr!important;
    grid-auto-rows:minmax(0,1fr);column-gap:48px;align-content:center;overflow:auto;padding-right:12px
  }
  .newgen-react-hero .menu nav a{padding:7px 0!important;grid-template-columns:42px 1fr 24px!important}
  .newgen-react-hero .menu nav span{font-size:clamp(28px,3vw,56px)!important;line-height:.94!important}
  .cms-menu nav{display:grid!important;grid-template-columns:1fr 1fr;column-gap:36px;max-height:72vh;overflow:auto;padding-right:10px}
  .cms-menu nav a span{font-size:clamp(28px,3.2vw,54px)!important}
}
@media(max-width:900px){
  .newgen-react-hero .menu nav{top:72px!important;bottom:68px!important;transform:none!important;overflow-y:auto!important;padding-right:10px!important}
  .newgen-react-hero .menu nav span{font-size:clamp(28px,9vw,52px)!important}
  .cms-menu nav{max-height:78vh;overflow-y:auto;padding-right:6px}
}

/* =====================================================================
   V54 — COMPLETE SERVICE PAGES + PROFESSIONAL CAREER APPLICATION
   Service content stays CMS-driven through Pages + Page Sections.
   ===================================================================== */
.service-detail{background:#efefec;color:#101010}
.service-detail-intro{padding:clamp(90px,11vh,150px) clamp(24px,6vw,110px);display:grid;grid-template-columns:minmax(160px,.32fr) minmax(0,1fr);gap:5vw;border-bottom:1px solid rgba(0,0,0,.14)}
.service-detail-intro>small,.service-benefits small,.service-strategy small,.service-process small,.service-experience small,.service-cta small{font:700 10px/1.3 var(--tr-mono);letter-spacing:.12em;text-transform:uppercase;color:#555}
.service-detail-intro h2{max-width:1200px;font-size:clamp(38px,5.1vw,92px);line-height:.96;letter-spacing:-.065em;font-weight:450;margin:0 0 30px}
.service-detail-intro .cms-rich{max-width:850px;font-size:clamp(17px,1.3vw,22px);line-height:1.7}
.service-benefits{position:relative;padding:clamp(90px,11vh,150px) clamp(24px,6vw,110px);display:grid;grid-template-columns:82px minmax(0,1.05fr) minmax(320px,.72fr);gap:4vw;align-items:start;border-bottom:1px solid rgba(0,0,0,.14)}
.service-section-index{display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:5px}.service-section-index b{font:700 10px var(--tr-mono)}.service-section-index span{writing-mode:vertical-rl;font:700 8px var(--tr-mono);letter-spacing:.14em;color:#777}.service-section-index:after{content:"";width:1px;height:90px;background:#aaa}
.service-benefits__copy h2,.service-strategy__head h2,.service-process__head h2,.service-experience h2,.service-cta h2{font-size:clamp(46px,6vw,112px);line-height:.88;letter-spacing:-.075em;font-weight:450;margin:17px 0 24px}
.service-lead,.service-strategy__head p,.service-process__head p,.service-experience>div>p,.service-cta>p{font-size:clamp(18px,1.55vw,27px);line-height:1.45;color:#4c4d4a;max-width:820px}
.service-rich{font-size:16px;line-height:1.72;color:#444744}
.service-rich blockquote{margin:38px 0;padding:27px 30px;border-left:3px solid #111;background:#e4e4e0;font-size:clamp(18px,1.45vw,24px);line-height:1.55;color:#181818}
.service-rich ul{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 34px;border-top:1px solid rgba(0,0,0,.18)}
.service-rich ul li{position:relative;padding:15px 0 15px 18px;border-bottom:1px solid rgba(0,0,0,.13);font-size:14px;line-height:1.45}.service-rich ul li:before{content:"";position:absolute;left:0;top:22px;width:5px;height:5px;background:#111;border-radius:50%}
.service-benefits__media{position:sticky;top:105px;height:min(68vh,720px);overflow:hidden;background:#090a0b;border-radius:2px}.service-benefits__media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04);transition:transform 1s cubic-bezier(.16,1,.3,1)}.service-benefits__media:hover img{transform:scale(1.035)}.service-benefits__media i{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28));pointer-events:none}
.service-strategy{position:relative;background:#070809;color:#f3f3ef;padding:clamp(95px,11vh,155px) clamp(24px,6vw,110px);overflow:hidden;border-bottom:1px solid #222}.service-strategy__head{display:grid;grid-template-columns:.28fr minmax(0,1.05fr) minmax(260px,.6fr);gap:4vw;align-items:end;margin-bottom:68px}.service-strategy__head small{color:#8d9494}.service-strategy__head h2{margin:0;color:#fff}.service-strategy__head p{color:#9da1a0;margin:0}.service-strategy .service-rich{color:#c4c7c5;position:relative;z-index:2}.service-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-right:min(30vw,430px)}.service-mini-grid article{min-height:310px;padding:35px;background:#111416;border:1px solid #24292b;display:flex;flex-direction:column}.service-mini-grid article:nth-child(2){background:#ecece8;color:#111}.service-mini-grid b{font-size:clamp(24px,2.1vw,38px);letter-spacing:-.045em;font-weight:500}.service-mini-grid p{font-size:15px;line-height:1.65;opacity:.72}.service-mini-grid ul{display:block;border:0;margin:15px 0 0}.service-mini-grid li{border:0!important;padding:8px 0 8px 15px!important;color:inherit}.service-mini-grid li:before{background:currentColor!important;top:15px!important;width:4px!important;height:4px!important}.service-strategy__image{position:absolute;right:-4vw;bottom:-7vh;width:min(38vw,590px);height:min(65vh,680px);object-fit:cover;opacity:.44;filter:saturate(.75) contrast(1.15);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.service-process{padding:clamp(95px,12vh,165px) clamp(24px,6vw,110px);display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);column-gap:7vw;row-gap:50px;border-bottom:1px solid rgba(0,0,0,.14)}.service-process__head h2{margin-left:0}.service-process__head p{max-width:650px}.service-process__content{align-self:end}.service-process__content ol{list-style:none;counter-reset:service-step;padding:0;margin:0;border-top:1px solid rgba(0,0,0,.22)}.service-process__content ol li{counter-increment:service-step;display:grid;grid-template-columns:70px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid rgba(0,0,0,.18)}.service-process__content ol li:before{content:"0" counter(service-step);font:700 16px var(--tr-mono);color:#777}.service-process__content ol b{display:block;font-size:clamp(23px,2vw,34px);letter-spacing:-.04em;margin-bottom:8px;color:#111}.service-process__content ol p{margin:0;color:#555;line-height:1.65}.service-process__media{grid-column:1/-1;height:min(62vh,690px);overflow:hidden;background:#101010}.service-process__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.01)}
.service-experience{padding:clamp(80px,10vh,140px) clamp(24px,6vw,110px);background:#e3e4e2;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:6vw;align-items:center;border-bottom:1px solid rgba(0,0,0,.14)}.service-experience h2{max-width:980px}.service-experience .service-rich strong{display:block;font-size:clamp(72px,10vw,190px);letter-spacing:-.09em;line-height:.75;color:#111;font-weight:500;margin:40px 0 22px}.service-experience>div:last-child{height:min(60vh,650px);overflow:hidden;background:#111}.service-experience img{width:100%;height:100%;object-fit:cover}
.service-cta{padding:clamp(105px,13vh,180px) clamp(24px,8vw,150px);background:#080909;color:#f4f4ef;text-align:left}.service-cta small{color:#8a9292}.service-cta h2{max-width:1250px;color:#fff}.service-cta>p,.service-cta .cms-rich{color:#aeb2b0;max-width:800px;font-size:18px;line-height:1.65}.service-cta>a{display:inline-flex;margin-top:34px;padding:16px 22px;border:1px solid #fff;border-radius:999px;font:700 10px var(--tr-mono);letter-spacing:.07em;transition:.25s}.service-cta>a:hover{background:#fff;color:#080909}
.cms-services-directory .cms-service-row{grid-template-columns:minmax(180px,280px) 42px minmax(220px,.62fr) minmax(280px,1fr) 28px;gap:26px;padding:22px 0}.cms-service-row__media{height:170px;overflow:hidden;background:#101010}.cms-service-row__media img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.16,1,.3,1)}.cms-service-row:hover .cms-service-row__media img{transform:scale(1.045)}.cms-service-row>div:nth-of-type(2) small{display:block;font:700 8px var(--tr-mono);letter-spacing:.1em;color:#777;margin-bottom:9px}.cms-service-row>div:nth-of-type(2) h3{margin:0}

/* Career application: stronger visual hierarchy and readable field labels. */
.career-application{background:#e8e8e4!important;align-items:start}.career-application-copy small{font-size:11px!important}.career-application-copy>p{font-size:18px!important;line-height:1.65!important}.career-upload-note{font-size:11px!important;line-height:1.6!important}.career-form{background:#f6f6f2;border:1px solid rgba(0,0,0,.13);border-radius:22px;padding:clamp(24px,3.2vw,48px);gap:23px 18px;box-shadow:0 26px 70px rgba(0,0,0,.055)}.career-form-section-title{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:baseline;gap:14px;padding:7px 0 17px;margin-top:18px;border-bottom:1px solid rgba(0,0,0,.16)}.career-form-section-title:first-child{margin-top:0}.career-form-section-title span{font:700 11px var(--tr-mono);color:#777}.career-form-section-title b{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.035em}.career-form-section-title em{font:500 11px/1.4 var(--tr-mono);color:#777;font-style:normal}.career-form label{gap:10px!important;font:700 11px/1.35 var(--tr-mono)!important;letter-spacing:.075em!important;color:#292a29}.career-form label>small{font-size:10px!important;line-height:1.45!important}.career-form input,.career-form select,.career-form textarea{border:1px solid rgba(0,0,0,.15)!important;border-radius:11px!important;background:#fff!important;padding:15px 16px!important;font:16px/1.45 Arial,sans-serif!important;transition:border-color .2s,box-shadow .2s,background .2s}.career-form textarea{min-height:112px}.career-form input:focus,.career-form select:focus,.career-form textarea:focus{border-color:#111!important;box-shadow:0 0 0 3px rgba(0,0,0,.06);background:#fff!important}.career-file{background:#ededE8!important;border:1px dashed rgba(0,0,0,.25)!important;border-radius:13px!important;padding:20px!important}.career-file input{background:transparent!important;border:0!important;padding:4px 0!important}.career-file i{font-size:11px!important}.career-submit{padding:17px 22px!important;font-size:11px!important}.career-form-status{font-size:13px!important}

@media(max-width:1050px){.service-benefits{grid-template-columns:55px 1fr}.service-benefits__media{grid-column:2;position:relative;top:auto;height:54vh}.service-strategy__head{grid-template-columns:1fr}.service-mini-grid{margin-right:0}.service-strategy__image{display:none}.cms-services-directory .cms-service-row{grid-template-columns:190px 35px 1fr 28px}.cms-services-directory .cms-service-row>p{grid-column:3}.service-process{grid-template-columns:1fr}.service-experience{grid-template-columns:1fr}}
@media(max-width:700px){.service-detail-intro{grid-template-columns:1fr;padding-left:18px;padding-right:18px}.service-benefits{grid-template-columns:1fr;padding-left:18px;padding-right:18px}.service-section-index{display:none}.service-benefits__media{grid-column:1;height:48vh}.service-rich ul{grid-template-columns:1fr}.service-mini-grid{grid-template-columns:1fr}.service-process,.service-experience,.service-cta,.service-strategy{padding-left:18px;padding-right:18px}.service-process__content ol li{grid-template-columns:45px 1fr}.cms-services-directory .cms-service-row{grid-template-columns:1fr;gap:12px;padding:25px 0}.cms-service-row__media{height:52vw;min-height:220px}.cms-services-directory .cms-service-row>span{position:absolute;margin:12px;background:#efefec;border-radius:50%;width:30px;height:30px;display:grid;place-items:center}.cms-services-directory .cms-service-row>p{grid-column:1}.cms-services-directory .cms-service-row>b{display:none}.career-form{padding:20px 16px;border-radius:15px}.career-form-section-title{grid-template-columns:34px 1fr}.career-form-section-title em{grid-column:2}.career-form label{font-size:10.5px!important}.career-form input,.career-form select,.career-form textarea{font-size:16px!important}}

/* ===================================================================
   V55 — HERO RECOGNITION + STRONG DEPTH TITLE + PREMIUM CONTACT FORM
   =================================================================== */
.newgen-react-hero .hero--title-phase .hero__title{
  letter-spacing:var(--hero-depth-letter,0em)!important;
}

.hero-awards{
  position:absolute;
  z-index:7;
  left:50%;
  top:auto;
  bottom:clamp(72px,8vh,96px);
  width:min(390px,29vw);
  padding:16px 18px 14px;
  border:1px solid rgba(228,235,244,.18);
  border-radius:18px;
  color:#eef3f8;
  background:linear-gradient(145deg,rgba(11,14,19,.72),rgba(6,8,12,.42));
  box-shadow:0 24px 70px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  transform:translate3d(-50%,0,0);
  transition:opacity .5s ease,transform .65s cubic-bezier(.16,1,.3,1),filter .55s ease;
}
.hero--title-phase .hero-awards{opacity:0;transform:translate3d(-50%,18px,-120px) scale(.94);filter:blur(8px);pointer-events:none}
.hero-awards__head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.hero-awards__head>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:18px;background:radial-gradient(circle at 35% 30%,#fff3a8,#e4b527 58%,#7c5c08);box-shadow:0 0 26px rgba(239,187,35,.16)}
.hero-awards__head small{display:block;font:700 7px/1.25 var(--tr-mono);letter-spacing:.15em;color:#aab6c4;margin-bottom:5px}
.hero-awards__head b{display:block;font:600 15px/1.15 Manrope,Arial,sans-serif;letter-spacing:-.025em;color:#f2c94c}
.hero-awards__list{display:grid;gap:10px;padding:12px 0 8px}
.hero-awards__list article{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;min-width:0;padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.035)}
.hero-awards__list article>i{font-style:normal;color:#f1c52c;font-size:14px;text-align:center}
.hero-awards__list article>img{width:28px;height:28px;border-radius:7px;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.hero-awards__list strong{display:block;font:600 12px/1.3 Manrope,Arial,sans-serif;color:#f4f6f7;white-space:normal}
.hero-awards__list span{display:block;margin-top:2px;font:600 6.8px/1.25 var(--tr-mono);letter-spacing:.08em;color:#7f8b98;text-transform:uppercase}
.hero-awards>a{display:inline-flex;margin-top:2px;color:#c4ccd4;font:700 6.8px/1.2 var(--tr-mono);letter-spacing:.12em;text-decoration:none}
.hero-awards>a:hover{color:#f2c94c}

/* Give the contact/footer section a real form surface instead of a loose set
   of hairline inputs floating over the background word. */
.tr-contact{min-height:980px!important}
.tr-contact h2{max-width:980px!important;color:#8f908b!important;letter-spacing:-.065em!important}
.tr-contact-grid{align-items:start!important;grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr)!important;gap:clamp(30px,4vw,76px)!important;border-top:0!important;padding-top:0!important}
.tr-contact-form{
  max-width:none!important;
  padding:clamp(22px,2.2vw,36px)!important;
  gap:18px!important;
  border:1px solid rgba(24,25,22,.12)!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.58)!important;
  box-shadow:0 24px 70px rgba(35,36,31,.07)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tr-contact-form label{font:800 10px/1.25 var(--tr-mono)!important;letter-spacing:.1em!important;color:#363833!important}
.tr-contact-form input,.tr-contact-form textarea,.tr-contact-form select{
  margin-top:9px!important;
  min-height:54px!important;
  padding:14px 15px!important;
  border:1px solid rgba(30,31,27,.14)!important;
  border-radius:12px!important;
  background:#f8f8f5!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
  color:#161714!important;
  font:500 15px/1.45 Manrope,Arial,sans-serif!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease!important;
}
.tr-contact-form textarea{min-height:138px!important}
.tr-contact-form input:focus,.tr-contact-form textarea:focus,.tr-contact-form select:focus{
  border-color:rgba(20,21,18,.62)!important;
  box-shadow:0 0 0 4px rgba(22,23,20,.06)!important;
  background:#fff!important;
}
.tr-contact-actions{padding-top:4px!important}
.tr-contact-actions button{
  min-height:52px!important;
  padding:0 24px!important;
  border:1px solid #171814!important;
  border-radius:999px!important;
  background:#171814!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(20,21,18,.12)!important;
}
.tr-contact-actions button:hover{transform:translateY(-2px)!important;background:#292a25!important}
.tr-contact-meta{
  padding:24px!important;
  border:1px solid rgba(24,25,22,.1)!important;
  border-radius:22px!important;
  background:rgba(238,238,233,.74)!important;
  box-shadow:0 20px 50px rgba(35,36,31,.045)!important;
}
.tr-contact-meta b{font-size:18px!important;letter-spacing:-.02em}
.tr-contact-meta strong{font-size:9px!important}
.tr-contact-meta a,.tr-contact-meta span{font-size:14px!important}

/* Match the same form language on the standalone contact page. */
.cms-contact{gap:clamp(28px,5vw,86px)!important}
.cms-contact-form{
  padding:clamp(22px,2.4vw,38px)!important;
  border:1px solid rgba(24,25,22,.12)!important;
  border-radius:24px!important;
  background:#f7f7f3!important;
  box-shadow:0 22px 64px rgba(20,21,18,.06)!important;
}
.cms-contact label{font-size:10px!important;font-weight:800!important;letter-spacing:.09em!important;color:#363833!important}
.cms-contact input,.cms-contact textarea,.cms-contact select{
  margin-top:9px!important;padding:14px 15px!important;min-height:54px!important;
  border:1px solid rgba(24,25,22,.14)!important;border-radius:12px!important;background:#fff!important;
  font-size:15px!important;line-height:1.45!important;
}
.cms-contact textarea{min-height:140px!important}
.cms-contact button{border-radius:999px!important;background:#171814!important;color:#fff!important;border-color:#171814!important}

@media(max-width:900px){
  .hero-awards{left:50%;right:auto;top:auto;bottom:82px;width:min(350px,58vw);transform:translate3d(-50%,0,0)}
  .tr-contact-grid{grid-template-columns:1fr!important}
  .tr-contact-meta{max-width:none!important}
}
@media(max-width:620px){
  .hero-awards{left:14px;right:14px;top:auto;bottom:72px;width:auto;padding:12px 13px;transform:none}
  .hero-awards__list{grid-template-columns:1fr 1fr}
  .hero-awards__list article:nth-child(n+3){display:none}
  .hero-awards__list strong{font-size:10px}
  .tr-contact-form{padding:18px!important;border-radius:18px!important}
  .tr-contact-meta{padding:18px!important;border-radius:18px!important}
}

@media(max-width:620px){.hero--title-phase .hero-awards{transform:translate3d(0,18px,-120px) scale(.94)}}

/* ===================================================================
   V58 — COMPACT AWARD DOCK / CLICK POPOVER
   Keep recognition discoverable without permanently covering the hero.
   =================================================================== */
.hero-award-dock{
  position:absolute;
  z-index:10;
  left:7.5%;
  bottom:calc(13% + 92px);
  width:48px;
  height:48px;
  transform-style:preserve-3d;
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1),filter .45s ease;
}
.hero--title-phase .hero-award-dock{
  opacity:0;
  transform:translate3d(0,12px,-80px) scale(.9);
  filter:blur(5px);
  pointer-events:none;
}
.hero-award-trigger{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid rgba(247,211,80,.42);
  border-radius:50%;
  color:#17130a;
  background:radial-gradient(circle at 34% 28%,#fff8be 0,#f4ce42 32%,#c78e14 68%,#6f4708 100%);
  box-shadow:0 10px 34px rgba(0,0,0,.32),0 0 0 0 rgba(244,202,50,0),inset 0 1px 0 rgba(255,255,255,.72);
  cursor:pointer;
  isolation:isolate;
  animation:heroAwardIdle 6.2s cubic-bezier(.2,.8,.2,1) infinite;
}
.hero-award-trigger>span{font-size:22px;line-height:1;filter:drop-shadow(0 1px 1px rgba(74,42,0,.32));transform-origin:50% 70%}
.hero-award-trigger:before{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border:1px solid rgba(244,203,57,.0);
  border-radius:50%;
  opacity:0;
  transform:scale(.72);
  pointer-events:none;
  animation:heroAwardRing 6.2s ease-out infinite;
}
.hero-award-trigger:hover,.hero-award-dock.is-open .hero-award-trigger{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 13px 38px rgba(0,0,0,.38),0 0 30px rgba(244,202,50,.24),inset 0 1px 0 rgba(255,255,255,.8);
}
@keyframes heroAwardIdle{
  0%,67%,100%{transform:translate3d(0,0,0) rotate(0deg);box-shadow:0 10px 34px rgba(0,0,0,.32),0 0 0 0 rgba(244,202,50,0),inset 0 1px 0 rgba(255,255,255,.72)}
  72%{transform:translate3d(0,-5px,0) rotate(-5deg);box-shadow:0 14px 38px rgba(0,0,0,.36),0 0 26px 4px rgba(244,202,50,.2),inset 0 1px 0 rgba(255,255,255,.76)}
  76%{transform:translate3d(0,1px,0) rotate(4deg)}
  80%{transform:translate3d(0,-3px,0) rotate(-2deg)}
  85%{transform:translate3d(0,0,0) rotate(0deg)}
}
@keyframes heroAwardRing{
  0%,68%,100%{opacity:0;transform:scale(.72);border-color:rgba(244,203,57,0)}
  72%{opacity:.7;border-color:rgba(244,203,57,.5)}
  84%{opacity:0;transform:scale(1.42);border-color:rgba(244,203,57,0)}
}
.hero-award-dock .hero-awards{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:auto!important;
  bottom:62px!important;
  width:min(390px,29vw)!important;
  margin:0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,14px,0) scale(.95)!important;
  transform-origin:0 100%!important;
  filter:blur(8px)!important;
  transition:opacity .28s ease,visibility 0s linear .32s,transform .4s cubic-bezier(.16,1,.3,1),filter .32s ease!important;
}
.hero-award-dock.is-open .hero-awards{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;
  filter:none!important;
  transition-delay:0s!important;
}
.hero-award-dock.is-open .hero-award-trigger{animation-play-state:paused}
@media(max-width:1024px){
  .hero-award-dock{left:6%;bottom:calc(13% + 86px)}
  .hero-award-dock .hero-awards{width:min(360px,48vw)!important}
}
@media(max-width:767px){
  .hero-award-dock{left:14px;bottom:calc(16% + 74px);width:42px;height:42px}
  .hero-award-trigger{width:42px;height:42px}
  .hero-award-trigger>span{font-size:19px}
  .hero-award-dock .hero-awards{left:0!important;bottom:54px!important;width:min(330px,calc(100vw - 28px))!important;padding:12px 13px!important}
  .hero-award-dock .hero-awards__list{grid-template-columns:1fr!important}
  .hero-award-dock .hero-awards__list article:nth-child(n+3){display:none}
}

/* ===================================================================
   V59 — CONTACT/FULL FOOTER FLOW FIX
   Prevent clipping on laptop-height viewports, keep the NEWGEN word as a
   background-only watermark, and use hard readable typography/surfaces.
   =================================================================== */
.tr-contact{
  height:auto!important;
  min-height:100svh!important;
  overflow:hidden!important;
  background:#f2f2ee!important;
  color:#242522!important;
}
.tr-contact-inner{
  position:relative!important;
  height:auto!important;
  min-height:100svh!important;
  padding:clamp(62px,8vh,100px) var(--tr-pad) 0!important;
  color:#4b4c47!important;
  display:flex!important;
  flex-direction:column!important;
}
.tr-contact .tr-micro{
  position:relative;z-index:3;
  color:#555751!important;
  font-size:8px!important;
  font-weight:800!important;
  filter:none!important;
}
.tr-contact h2{
  position:relative;z-index:3;
  margin:clamp(24px,4vh,46px) 0 clamp(38px,5vh,64px)!important;
  max-width:1050px!important;
  color:#777972!important;
  font-weight:430!important;
  filter:none!important;
}
.tr-contact-grid{
  position:relative;z-index:3;
  display:grid!important;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,.58fr)!important;
  align-items:start!important;
  gap:clamp(28px,4vw,72px)!important;
  padding:0 0 clamp(80px,10vh,130px)!important;
  border:0!important;
}
.tr-contact-form{
  position:relative;z-index:3;
  max-width:none!important;
  padding:clamp(26px,2.8vw,44px)!important;
  gap:20px 22px!important;
  border:1px solid #d7d7d0!important;
  border-radius:24px!important;
  background:#fbfbf8!important;
  box-shadow:0 24px 64px rgba(20,22,18,.07)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
.tr-contact-form label{
  color:#343631!important;
  font:800 10px/1.25 var(--tr-mono)!important;
  letter-spacing:.095em!important;
}
.tr-contact-form label>span{color:#507488!important}
.tr-contact-form input,
.tr-contact-form textarea,
.tr-contact-form select{
  margin-top:9px!important;
  min-height:56px!important;
  padding:15px 16px!important;
  border:1px solid #cfd0ca!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#151613!important;
  font:500 16px/1.45 Manrope,Arial,sans-serif!important;
  box-shadow:none!important;
  filter:none!important;
}
.tr-contact-form textarea{min-height:154px!important;resize:vertical!important}
.tr-contact-form input::placeholder,
.tr-contact-form textarea::placeholder{color:#74766f!important;opacity:1!important}
.tr-contact-form input:focus,
.tr-contact-form textarea:focus,
.tr-contact-form select:focus{
  border-color:#2d2f2b!important;
  box-shadow:0 0 0 3px rgba(30,32,28,.07)!important;
  outline:0!important;
}
.tr-contact-actions{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  flex-wrap:wrap!important;
  padding-top:4px!important;
}
.tr-contact-actions button{
  min-height:54px!important;
  padding:0 25px!important;
  border:1px solid #171814!important;
  border-radius:999px!important;
  background:#171814!important;
  color:#fff!important;
  font:800 9px var(--tr-mono)!important;
  letter-spacing:.09em!important;
  box-shadow:0 10px 22px rgba(20,21,18,.12)!important;
}
.tr-contact-actions small{max-width:340px;color:#696b65!important;font-size:11px!important;line-height:1.5!important}
.tr-contact-status{grid-column:1/-1!important;margin:0!important;min-height:18px!important;color:#555750!important;font-size:12px!important}
.tr-contact-meta{
  position:relative;z-index:3;
  display:flex!important;
  flex-direction:column!important;
  gap:28px!important;
  padding:clamp(24px,2.3vw,36px)!important;
  border:1px solid #d5d6cf!important;
  border-radius:22px!important;
  background:#e9e9e4!important;
  color:#40423d!important;
  box-shadow:0 18px 48px rgba(20,21,18,.05)!important;
  filter:none!important;
}
.tr-contact-meta p{margin:0!important;display:flex!important;flex-direction:column!important;gap:7px!important}
.tr-contact-meta b{color:#252622!important;font-size:20px!important;line-height:1.2!important}
.tr-contact-meta strong{display:block!important;color:#62645e!important;font:800 9px var(--tr-mono)!important;letter-spacing:.1em!important;margin-bottom:4px!important}
.tr-contact-meta a,.tr-contact-meta span{color:#454741!important;font-size:14px!important;line-height:1.55!important;text-decoration:none!important}
.tr-contact-meta a:hover{color:#000!important}
.tr-footer-word{
  z-index:1!important;
  left:var(--tr-pad)!important;
  right:var(--tr-pad)!important;
  bottom:74px!important;
  font-size:clamp(150px,24vw,460px)!important;
  line-height:.55!important;
  color:rgba(35,37,32,.026)!important;
  -webkit-text-stroke:0!important;
  background:none!important;
  opacity:1!important;
  pointer-events:none!important;
  filter:none!important;
}
.tr-contact-footer{
  position:relative;z-index:4;
  margin-top:auto!important;
  min-height:74px;
  padding:22px 0 20px;
  border-top:1px solid #cfd0ca;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#50524c;
  font:700 8px/1.45 var(--tr-mono);
  letter-spacing:.05em;
}
.tr-contact-footer nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.tr-contact-footer a{color:#3e403b!important;text-decoration:none!important}
.tr-contact-footer a:hover{color:#000!important}

@media(max-width:980px){
  .tr-contact-grid{grid-template-columns:1fr!important;padding-bottom:90px!important}
  .tr-contact-meta{display:grid!important;grid-template-columns:1fr 1fr!important}
  .tr-footer-word{bottom:76px!important}
}
@media(max-width:620px){
  .tr-contact-inner{padding-left:14px!important;padding-right:14px!important}
  .tr-contact h2{font-size:14vw!important;line-height:.88!important;margin-bottom:34px!important}
  .tr-contact-form{grid-template-columns:1fr!important;padding:18px!important;border-radius:17px!important}
  .tr-contact-form .tr-contact-wide,.tr-contact-actions,.tr-contact-status{grid-column:1!important}
  .tr-contact-meta{display:flex!important;padding:20px!important;border-radius:17px!important}
  .tr-contact-footer{align-items:flex-start;flex-direction:column;gap:12px;padding-bottom:24px}
  .tr-footer-word{bottom:120px!important;font-size:42vw!important}
}

/* ===================================================================
   V55 — SELECTED WORK / SMOOTH PINNED HORIZONTAL TRACK
   Keep this scene compositor-only: no white reveal wipe, no liquid field,
   no per-frame clip-path writes. The whole card moves as one unit.
   =================================================================== */
.tr-work{
  height:100svh!important;
  padding:0!important;
  overflow:hidden!important;
  contain:paint;
}
.tr-work-track{
  left:max(22px,var(--tr-pad))!important;
  top:14vh!important;
  height:72vh!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:clamp(52px,4.5vw,88px)!important;
  padding-right:clamp(70px,12vw,220px)!important;
  transform:translate3d(0,0,0);
  will-change:transform!important;
  backface-visibility:hidden;
}
.tr-work-head{
  flex:0 0 clamp(470px,31vw,600px)!important;
  width:clamp(470px,31vw,600px)!important;
  height:68vh!important;
  padding:1vh clamp(18px,2vw,38px) 0 0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.tr-work-title{
  font-size:clamp(54px,5.15vw,98px)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
  margin-top:8.5vh!important;
}
.tr-project{
  flex:0 0 min(610px,43vw)!important;
  width:min(610px,43vw)!important;
  overflow:visible!important;
  contain:layout style;
  perspective:1200px!important;
  backface-visibility:hidden!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.tr-project:nth-child(2n){margin-top:7vh!important}
.tr-project:before,.tr-project:after{display:none!important}
.tr-project__reveal{
  position:relative!important;
  width:100%!important;
  overflow:hidden!important;
  border-radius:16px!important;
  background:var(--tr-paper)!important;
  box-shadow:0 22px 66px rgba(0,0,0,.12)!important;
  transform:translate3d(0,0,0);
  transform-style:preserve-3d;
  will-change:transform,opacity!important;
  backface-visibility:hidden;
}
.tr-project__media{
  position:relative!important;
  height:52vh!important;
  min-height:390px!important;
  overflow:hidden!important;
  border-radius:16px 16px 0 0!important;
  background:#111!important;
  box-shadow:none!important;
  transform:none!important;
  translate:none!important;
  rotate:none!important;
  scale:none!important;
}
.tr-project__media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  filter:none!important;
  transform:translate3d(0,0,0)!important;
  translate:none!important;
  rotate:none!important;
  scale:1!important;
  transition:transform .55s cubic-bezier(.16,1,.3,1)!important;
  backface-visibility:hidden!important;
}
.tr-project:hover .tr-project__media img{transform:translate3d(0,0,0) scale(1.025)!important}
.tr-project__media span{
  z-index:4!important;
  background:rgba(245,244,240,.94)!important;
  color:#111!important;
}
.tr-project__meta{
  position:relative!important;
  z-index:3!important;
  padding:14px 5px 5px!important;
  background:var(--tr-paper)!important;
  backdrop-filter:none!important;
  transform:none;
}
.tr-project__wipe{display:none!important}
.tr-work-foot{
  left:max(22px,var(--tr-pad))!important;
  right:var(--tr-pad)!important;
  bottom:3.4vh!important;
  transform:none!important;
  font-size:8px!important;
}
@media(max-width:1100px){
  .tr-work-head{flex-basis:clamp(390px,39vw,500px)!important;width:clamp(390px,39vw,500px)!important}
  .tr-project{flex-basis:min(600px,52vw)!important;width:min(600px,52vw)!important}
}
@media(max-width:767px){
  .tr-work-track{left:14px!important;top:10vh!important;height:76vh!important;gap:30px!important;padding-right:28vw!important}
  .tr-work-head{flex-basis:88vw!important;width:88vw!important;height:66vh!important;padding-right:18px!important}
  .tr-work-title{font-size:15vw!important;line-height:.98!important;margin-top:8vh!important}
  .tr-project{flex-basis:80vw!important;width:80vw!important}
  .tr-project:nth-child(2n){margin-top:4vh!important}
  .tr-project__media{height:39vh!important;min-height:270px!important}
  .tr-project__reveal{border-radius:13px!important}
  .tr-work-foot{left:14px!important;right:14px!important;font-size:7px!important}
}

/* V55 selected-work performance isolation: keep legacy data-fluid markup for
   hydration compatibility, but do not let the global liquid RAF transform it. */
.tr-work[data-tr-scene="SELECTED WORK"]:after,
.tr-work .liquid-card:before{display:none!important}
.tr-work [data-fluid-ui],.tr-work [data-fluid-media]{
  translate:0 0!important;
  rotate:none!important;
  scale:1!important;
}


/* ================================================================
   V67 — TRUE TEXT/BACKGROUND THEME (MEDIA ALWAYS ORIGINAL)
   The JS palette engine changes only neutral UI colours. It never filters
   IMG / VIDEO / CANVAS / SVG / CSS background-image pixels.
   ================================================================ */
html[data-site-mode="light"]{color-scheme:light}
html[data-site-mode="dark"]{color-scheme:dark;background:#f7f6f6}

/* Disable the old full-screen difference layer permanently. */
.newgen-theme-inverter{display:none!important;opacity:0!important}


/* The palette engine stores an inverted version of neutral computed colours in
   CSS variables. Coloured artwork/accent colours are intentionally preserved. */
html[data-site-mode="dark"] [data-ng-theme="1"]{
  color:var(--ng-theme-color)!important;
  background-color:var(--ng-theme-bg)!important;
  border-top-color:var(--ng-theme-bt)!important;
  border-right-color:var(--ng-theme-br)!important;
  border-bottom-color:var(--ng-theme-bb)!important;
  border-left-color:var(--ng-theme-bl)!important;
  outline-color:var(--ng-theme-outline)!important;
  text-decoration-color:var(--ng-theme-decoration)!important;
  caret-color:var(--ng-theme-caret)!important;
  column-rule-color:var(--ng-theme-column)!important
}
html[data-site-mode="dark"] [data-ng-theme-gradient="1"]{background-image:var(--ng-theme-bg-image)!important}
html[data-site-mode="dark"] [data-ng-before-theme="1"]::before{
  color:var(--ng-before-theme-color)!important;
  background-color:var(--ng-before-theme-bg)!important;
  border-top-color:var(--ng-before-theme-bt)!important;
  border-right-color:var(--ng-before-theme-br)!important;
  border-bottom-color:var(--ng-before-theme-bb)!important;
  border-left-color:var(--ng-before-theme-bl)!important;
  outline-color:var(--ng-before-theme-outline)!important;
  text-decoration-color:var(--ng-before-theme-decoration)!important
}
html[data-site-mode="dark"] [data-ng-before-gradient="1"]::before{background-image:var(--ng-before-theme-bg-image)!important}
html[data-site-mode="dark"] [data-ng-after-theme="1"]::after{
  color:var(--ng-after-theme-color)!important;
  background-color:var(--ng-after-theme-bg)!important;
  border-top-color:var(--ng-after-theme-bt)!important;
  border-right-color:var(--ng-after-theme-br)!important;
  border-bottom-color:var(--ng-after-theme-bb)!important;
  border-left-color:var(--ng-after-theme-bl)!important;
  outline-color:var(--ng-after-theme-outline)!important;
  text-decoration-color:var(--ng-after-theme-decoration)!important
}
html[data-site-mode="dark"] [data-ng-after-gradient="1"]::after{background-image:var(--ng-after-theme-bg-image)!important}

/* Theme changes animate UI paint only; media is not part of the animation. */
html.theme-spark [data-ng-theme="1"]{
  transition-property:color,background-color,border-color,outline-color,text-decoration-color!important;
  transition-duration:.5s!important;transition-timing-function:cubic-bezier(.16,1,.3,1)!important
}
html.theme-spark [data-ng-before-theme="1"]::before,
html.theme-spark [data-ng-after-theme="1"]::after{transition:color .5s cubic-bezier(.16,1,.3,1),background-color .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1)!important}

/* Legacy header disables pointer events on the whole topbar. These explicit
   overrides are essential: without them the bulb looks visible but cannot drag. */
.newgen-react-hero .topbar{mix-blend-mode:normal!important}
.newgen-react-hero .topbar .brand,.newgen-react-hero .topbar__center,.newgen-react-hero .menu-button{mix-blend-mode:difference}
.topbar__actions,.cms-header__actions{display:flex;align-items:flex-start;justify-self:end;gap:14px;pointer-events:auto!important;overflow:visible!important}
.cms-header__actions{align-items:center}

.theme-bulb{
  --bulb-pull:0px;position:relative;z-index:2147482001;pointer-events:auto!important;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:38px;min-width:38px;height:82px;padding:0;border:0;background:transparent;
  color:#fff;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:none;outline:none;overflow:visible!important;mix-blend-mode:normal!important
}
.cms-header .theme-bulb{color:#111}
.theme-bulb:active,.theme-bulb.is-pulling{cursor:grabbing}
.theme-bulb:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:999px}
.theme-bulb__cord{
  display:block;width:2px;height:calc(25px + var(--bulb-pull));flex:0 0 auto;border-radius:0 0 999px 999px;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.24));
  box-shadow:0 0 1px rgba(0,0,0,.5);transform-origin:50% 0;
  transition:height .46s cubic-bezier(.22,1.45,.36,1)
}
.cms-header .theme-bulb__cord{background:linear-gradient(180deg,rgba(0,0,0,.56),rgba(0,0,0,.20))}
.theme-bulb__cap{
  position:relative;display:block;width:17px;height:14px;flex:0 0 auto;margin-top:-1px;border-radius:4px;
  background:linear-gradient(180deg,#838791 0 17%,#4c4f58 17% 39%,#24262c 39% 63%,#555961 63% 78%,#202228 78%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 5px 13px rgba(0,0,0,.28)
}
.theme-bulb__pin{position:absolute;left:50%;top:-4px;transform:translateX(-50%);width:6px;height:5px;border-radius:4px 4px 0 0;background:#71757e}
.theme-bulb__glass{
  position:relative;display:block;width:30px;height:39px;flex:0 0 auto;margin-top:-1px;
  border-radius:47% 47% 52% 52% / 36% 36% 64% 64%;overflow:hidden;
  border:1px solid rgba(255,229,172,.36);
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,transform .38s cubic-bezier(.22,1.35,.36,1)
}
.theme-bulb__glass::before{content:"";position:absolute;left:50%;top:-2px;transform:translateX(-50%);width:16px;height:6px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#8d6938,#4a3018)}
.theme-bulb__shine{position:absolute;left:5px;top:8px;width:5px;height:13px;border-radius:50%;background:rgba(255,255,255,.48);filter:blur(.4px);transform:rotate(17deg)}
.theme-bulb__glow{position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 56%,rgba(255,218,99,.98),rgba(255,191,51,.55) 35%,rgba(255,181,39,.20) 64%,transparent 79%);transition:opacity .25s ease}
.theme-bulb__filament,.theme-bulb__filament-core{position:absolute;background:#ffd35c;transition:opacity .25s ease,filter .25s ease}
.theme-bulb__filament{top:15px;width:2px;height:11px;border-radius:999px}
.theme-bulb__filament--left{left:11px;transform:rotate(25deg)}
.theme-bulb__filament--right{right:11px;transform:rotate(-25deg)}
.theme-bulb__filament-core{left:50%;bottom:10px;transform:translateX(-50%);width:11px;height:3px;border-radius:999px}
.theme-bulb__hint{display:block;margin-top:5px;font:700 6px/1 var(--tr-mono,ui-monospace,SFMono-Regular,Consolas,monospace);letter-spacing:.14em;opacity:.48;transition:opacity .2s ease}

.theme-bulb.is-light .theme-bulb__glass{
  background:radial-gradient(circle at 50% 34%,rgba(255,250,219,.99),rgba(255,216,105,.92) 39%,rgba(255,186,45,.38) 73%,rgba(255,176,34,.12));
  box-shadow:0 0 18px rgba(255,205,84,.82),0 0 45px rgba(255,185,48,.36),0 9px 20px rgba(0,0,0,.25)
}
.theme-bulb.is-light .theme-bulb__glow{opacity:1;animation:newgenBulbGlow 2.4s ease-in-out infinite}
.theme-bulb.is-light :is(.theme-bulb__filament,.theme-bulb__filament-core){opacity:1;filter:drop-shadow(0 0 3px rgba(255,191,50,.75))}
.theme-bulb.is-dark .theme-bulb__glass{background:radial-gradient(circle at 50% 31%,rgba(255,255,255,.18),rgba(135,140,149,.17) 43%,rgba(65,68,74,.23) 76%);border-color:rgba(255,255,255,.14);box-shadow:0 8px 18px rgba(0,0,0,.30)}
.theme-bulb.is-dark .theme-bulb__glow{opacity:0;animation:none}
.theme-bulb.is-dark :is(.theme-bulb__filament,.theme-bulb__filament-core){opacity:.13;filter:none}
.theme-bulb.is-pulling .theme-bulb__cord{transition:none!important}
.theme-bulb.is-pulling .theme-bulb__glass{transform:scale(.96)}
.theme-bulb.is-pulling .theme-bulb__hint{opacity:.9}
.theme-bulb.is-switching .theme-bulb__glass{animation:newgenBulbSnap .48s cubic-bezier(.16,1,.3,1)}
@keyframes newgenBulbGlow{0%,100%{box-shadow:0 0 18px rgba(255,205,84,.82),0 0 45px rgba(255,185,48,.36),0 9px 20px rgba(0,0,0,.25)}50%{box-shadow:0 0 23px rgba(255,210,91,.92),0 0 58px rgba(255,185,48,.46),0 9px 20px rgba(0,0,0,.25)}}
@keyframes newgenBulbSnap{0%{transform:translateY(0) rotate(0)}28%{transform:translateY(4px) rotate(4deg)}55%{transform:translateY(-2px) rotate(-3deg)}100%{transform:translateY(0) rotate(0)}}
html.is-bulb-dragging,html.is-bulb-dragging body,html.is-bulb-dragging body *{cursor:grabbing!important}

@media(max-width:900px){.topbar__actions,.cms-header__actions{gap:11px}.theme-bulb{width:34px;min-width:34px;height:75px}.theme-bulb__cord{height:calc(22px + var(--bulb-pull))}.theme-bulb__glass{width:26px;height:34px}.theme-bulb__cap{width:15px;height:12px}.theme-bulb__hint{display:none}}
@media(max-width:600px){.topbar__actions,.cms-header__actions{gap:8px}.theme-bulb{width:30px;min-width:30px}.theme-bulb__glass{width:24px;height:32px}}


/* ================================================================
   V68 — MEDIA-CLEAN THEME + FULL-WIDTH HERO + ORIGINAL VIDEO
   Theme switching must never recolour/vignette image/video/WebGL scenes.
   ================================================================ */
/* Hero particle world is a visual/media scene. Keep it edge-to-edge and remove
   the old DOM vignette that could become a pale square when theme colours flip. */
html.newgen-react-hero #worldCanvas.newgen-world-raw{
  inset:0!important;left:0!important;top:0!important;width:100vw!important;
  height:100svh!important;max-width:none!important;max-height:none!important;
  background:#050608!important;filter:none!important;opacity:1!important
}
html.newgen-react-hero .hero,
html.newgen-react-hero .hero__frame{background:transparent!important}
html.newgen-react-hero .hero__frame::before{content:none!important;display:none!important;background:none!important;backdrop-filter:none!important}

/* Capabilities video: show the actual source video, with no haze, blur, colour
   filter, pseudo overlay, vignette or theme-generated wash. */
.tr-cap-video-bg{background:#000!important;filter:none!important;backdrop-filter:none!important}
.tr-cap-video-bg::before,.tr-cap-video-bg::after{content:none!important;display:none!important;background:none!important;opacity:0!important;filter:none!important;backdrop-filter:none!important}
.tr-cap-video{
  position:absolute!important;inset:0!important;left:0!important;top:0!important;
  width:100%!important;height:100%!important;max-width:none!important;
  transform:none!important;object-fit:cover!important;object-position:50% 50%!important;
  opacity:1!important;filter:none!important;mix-blend-mode:normal!important;
  backdrop-filter:none!important
}

/* These are readability layers over real-time media, not page backgrounds.
   Keep their original authored colours in both themes. */
html[data-site-mode="dark"] .hero,
html[data-site-mode="dark"] .hero *,
html[data-site-mode="dark"] #capabilities,
html[data-site-mode="dark"] #capabilities *{
  --ng-theme-color:initial;--ng-theme-bg:initial
}

/* Capabilities copy must stay visible above the clean video. */
.tr-capabilities .tr-cap-micro{z-index:7!important}
.tr-capabilities .tr-cap-stack{z-index:6!important;color:#fff!important}
.tr-capabilities .tr-cap-core-label{z-index:6!important}
.tr-capabilities .tr-cap-services{z-index:7!important}


/* Keep the hero water/grain renderer behind the website content. It is still
   visible through the transparent hero, but can no longer wash out videos,
   images or text in later sections. */
html.newgen-react-hero #waterCanvas.newgen-water-raw{z-index:1!important}
html.newgen-react-hero .water-glass{z-index:1!important}
html.newgen-react-hero .grain{z-index:1!important}
.newgen-react-hero .hero{z-index:2!important}
.tr-main{z-index:20!important}

/* ================================================================
   V69 — 60FPS SCROLL / VIDEO SCRUB PERFORMANCE PASS
   - transform-only scroll indicators
   - compositor-friendly capabilities video
   - no expensive blur/filter work while scrubbing
   ================================================================ */
html.is-smooth-runtime,html.is-smooth-runtime body{scroll-behavior:auto!important}
html.is-smooth-runtime body{overscroll-behavior-y:none}
html.is-smooth-runtime .scroll-meter i{
  height:100%!important;
  transform:scaleY(0);
  transform-origin:50% 0%;
  will-change:transform;
}
.tr-scroll__track i{
  top:2px!important;
  will-change:transform!important;
  transform:translate3d(0,0,0);
}
.tr-capabilities,.tr-cap-webgl,.tr-cap-video-bg{contain:paint}
.tr-cap-webgl{will-change:opacity;transform:translateZ(0)}
.tr-cap-video-bg{transform:translateZ(0);backface-visibility:hidden}
.tr-cap-video{
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  will-change:transform!important;
  image-rendering:auto;
}
.tr-cap-video.is-scrub-ready{visibility:visible}
.tr-cap-stack>div,.tr-cap-service,.tr-cap-core-label{backface-visibility:hidden;transform-style:preserve-3d}
@media (prefers-reduced-motion:no-preference){
  .tr-cap-stack>div,.tr-cap-service,.tr-char{will-change:transform,opacity}
}


/* ================================================================
   V72 — NATIVE-REFRESH SUPER-SMOOTH SCROLL PASS
   - no 60Hz hard cap: GSAP/Lenis follow the display refresh rate
   - 60fps source video seeks only once per real source frame
   - compositor-only media surface during scroll scrubbing
   - expensive transient blur is disabled on large scrolling headings
   ================================================================ */
html.is-smooth-runtime,html.is-smooth-runtime body{
  scroll-behavior:auto!important;
  overscroll-behavior-y:none;
}
html.is-smooth-runtime body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.tr-capabilities,.tr-cap-webgl,.tr-cap-video-bg{
  transform:translateZ(0);
  backface-visibility:hidden;
}
.tr-cap-video-bg{
  contain:layout paint style;
  isolation:isolate;
}
.tr-cap-video{
  transform:translate3d(0,0,0)!important;
  backface-visibility:hidden!important;
  will-change:transform!important;
  image-rendering:auto!important;
}
.tr-cap-stack,.tr-cap-stack>div,.tr-cap-stack .tr-char,
.tr-cap-service,.tr-cap-core-label,
.tr-work-track,.tr-project,.tr-story,.tr-ribbon-grid-card{
  backface-visibility:hidden;
}
/* Blur on very large elements forces full-frame raster repaints while scrolling.
   Their movement/fade remains intact, but raster-heavy blur is suppressed. */
html.is-smooth-runtime .tr-stories h2,
html.is-smooth-runtime .tr-stories>.tr-micro,
html.is-smooth-runtime .tr-story-index,
html.is-smooth-runtime .tr-ribbon-grid-copy{
  filter:none!important;
}
@media (max-width:767px){
  .tr-cap-video{will-change:auto!important}
}


/* ================================================================
   V73 — HERO MAIN TITLE ALWAYS WHITE
   WE CREATE / DIGITAL WORLDS must remain white in both bulb modes.
   This intentionally overrides inherited palette/theme text colour only;
   scroll depth/opacity/transform animation remains unchanged.
   ================================================================ */
html.newgen-react-hero .hero__title,
html[data-site-mode="light"].newgen-react-hero .hero__title,
html[data-site-mode="dark"].newgen-react-hero .hero__title,
html.newgen-react-hero .hero__title > span,
html[data-site-mode="light"].newgen-react-hero .hero__title > span,
html[data-site-mode="dark"].newgen-react-hero .hero__title > span{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* ================================================================
   V74 — DARK-MODE READABILITY + SMOOTH CUSTOM SCROLL CONTROLLER
   Bulb OFF is a true dark UI: text stays white/grey instead of becoming
   black-on-black.  Media pixels remain untouched.
   ================================================================ */
html[data-site-mode="dark"],
html[data-site-mode="dark"] body{
  background:#050607!important;
}

/* Hero/header copy is intentionally outside the automatic palette engine.
   Give every fixed hero UI label an explicit readable dark-mode colour. */
html[data-site-mode="dark"].newgen-react-hero .topbar,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand b,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand span,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand i,
html[data-site-mode="dark"].newgen-react-hero .topbar__center,
html[data-site-mode="dark"].newgen-react-hero .topbar__center span,
html[data-site-mode="dark"].newgen-react-hero .menu-button,
html[data-site-mode="dark"].newgen-react-hero .world-chapter,
html[data-site-mode="dark"].newgen-react-hero .world-chapter>span,
html[data-site-mode="dark"].newgen-react-hero .hero__copy,
html[data-site-mode="dark"].newgen-react-hero .hero__status,
html[data-site-mode="dark"].newgen-react-hero .hero__progress,
html[data-site-mode="dark"].newgen-react-hero .hero__enter,
html[data-site-mode="dark"].newgen-react-hero .side-index,
html[data-site-mode="dark"].newgen-react-hero .contact-pill{
  color:#f1f2f2!important;
  -webkit-text-fill-color:currentColor!important;
  mix-blend-mode:normal!important;
}
html[data-site-mode="dark"].newgen-react-hero .world-chapter small,
html[data-site-mode="dark"].newgen-react-hero .side-index span,
html[data-site-mode="dark"].newgen-react-hero .hero__progress>span,
html[data-site-mode="dark"].newgen-react-hero .hero__progress>b{
  color:#b9bec2!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-site-mode="dark"].newgen-react-hero .menu-button i,
html[data-site-mode="dark"].newgen-react-hero .hero__status i{
  background:#f1f2f2!important;
}
html[data-site-mode="dark"].newgen-react-hero .hero__progress em,
html[data-site-mode="dark"].newgen-react-hero .contact-pill{
  border-color:rgba(255,255,255,.46)!important;
}
html[data-site-mode="dark"].newgen-react-hero .hero__progress em>i{
  background:#eef0f1!important;
}

/* Capability words remain clean neutral typography on top of the original video. */
html[data-site-mode="dark"] #capabilities .tr-cap-stack,
html[data-site-mode="dark"] #capabilities .tr-cap-stack>div,
html[data-site-mode="dark"] #capabilities .tr-cap-stack .tr-char,
html[data-site-mode="dark"] #capabilities .tr-cap-micro,
html[data-site-mode="dark"] #capabilities .tr-cap-core-label,
html[data-site-mode="dark"] #capabilities .tr-cap-service{
  color:#f0f1f1!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-site-mode="dark"] #capabilities .tr-cap-service small,
html[data-site-mode="dark"] #capabilities .tr-cap-service p{
  color:#b8bdc0!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-site-mode="dark"] #capabilities .tr-cap-stack>div{
  text-shadow:0 2px 2px rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.32)!important;
  -webkit-text-stroke:.28px rgba(255,255,255,.25);
}

/* Extra insurance for dynamic neutral text generated by the palette engine. */
html[data-site-mode="dark"] [data-ng-theme="1"]{
  text-shadow:0 1px 1px rgba(0,0,0,.16);
}

/* Right custom controller: fixed compositor layer + smooth transform-only thumb. */
.tr-scroll{
  contain:layout paint style;
  transform:translate3d(0,-50%,0)!important;
  backface-visibility:hidden;
}
.tr-scroll__track{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  overscroll-behavior:contain;
}
.tr-scroll__track i{
  top:2px!important;
  will-change:transform!important;
  transition:none!important;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
.scroll-meter,
.scroll-meter i{
  backface-visibility:hidden;
  transform:translateZ(0);
}
html[data-site-mode="dark"] .tr-scroll{
  color:#f2f3f3!important;
  mix-blend-mode:normal!important;
}
html[data-site-mode="dark"] .tr-scroll__track{
  border-left-color:rgba(255,255,255,.78)!important;
  border-right-color:rgba(255,255,255,.78)!important;
}
html[data-site-mode="dark"] .tr-scroll__track:before{
  border-top-color:rgba(255,255,255,.36)!important;
}
html[data-site-mode="dark"] .tr-scroll__track i{
  background:#eef0f0!important;
  box-shadow:0 0 10px rgba(255,255,255,.13);
}
html[data-site-mode="dark"] .tr-scroll .tr-top{
  color:#f2f3f3!important;
  border-color:rgba(255,255,255,.72)!important;
}

/* The original full-height 2px meter follows the same interpolated progress. */
html[data-site-mode="dark"] .scroll-meter{
  background:rgba(255,255,255,.10)!important;
  mix-blend-mode:normal!important;
}
html[data-site-mode="dark"] .scroll-meter i{
  background:linear-gradient(180deg,#fff,#aeb4b8)!important;
  box-shadow:0 0 8px rgba(255,255,255,.25)!important;
}

/* ================================================================
   V77 — CONSISTENT BULB THEME + TRUE CIRCULAR REVEAL

   One rule everywhere:
   • bulb ON  = LIGHT mode
   • bulb OFF = DARK mode

   Neutral UI surfaces/copy now receive an explicit light AND dark palette,
   so an originally-dark section can no longer remain dark while the rest of
   the page is in light mode (and vice versa). Raster/video/canvas pixels are
   still never filtered or inverted.
   ================================================================ */

html[data-site-mode="light"],
html[data-site-mode="light"] body{
  color-scheme:light;
  background:#f7f7f5!important;
  color:#18191a;
}
html[data-site-mode="dark"],
html[data-site-mode="dark"] body{
  color-scheme:dark;
  background:#050607!important;
  color:#f1f2f2;
}

/* Two-way palette: authored neutral colours are normalized toward the ACTIVE
   mode instead of only being modified in dark mode. Coloured accents are left
   untouched by ThemePaletteEngine. */
html[data-site-mode="light"] [data-ng-theme="1"]{
  color:var(--ng-theme-light-color)!important;
  background-color:var(--ng-theme-light-bg)!important;
  border-top-color:var(--ng-theme-light-bt)!important;
  border-right-color:var(--ng-theme-light-br)!important;
  border-bottom-color:var(--ng-theme-light-bb)!important;
  border-left-color:var(--ng-theme-light-bl)!important;
  outline-color:var(--ng-theme-light-outline)!important;
  text-decoration-color:var(--ng-theme-light-decoration)!important;
  caret-color:var(--ng-theme-light-caret)!important;
  column-rule-color:var(--ng-theme-light-column)!important;
}
html[data-site-mode="dark"] [data-ng-theme="1"]{
  color:var(--ng-theme-dark-color)!important;
  background-color:var(--ng-theme-dark-bg)!important;
  border-top-color:var(--ng-theme-dark-bt)!important;
  border-right-color:var(--ng-theme-dark-br)!important;
  border-bottom-color:var(--ng-theme-dark-bb)!important;
  border-left-color:var(--ng-theme-dark-bl)!important;
  outline-color:var(--ng-theme-dark-outline)!important;
  text-decoration-color:var(--ng-theme-dark-decoration)!important;
  caret-color:var(--ng-theme-dark-caret)!important;
  column-rule-color:var(--ng-theme-dark-column)!important;
}
html[data-site-mode="light"] [data-ng-theme-gradient="1"]{background-image:var(--ng-theme-light-bg-image)!important}
html[data-site-mode="dark"] [data-ng-theme-gradient="1"]{background-image:var(--ng-theme-dark-bg-image)!important}

html[data-site-mode="light"] [data-ng-before-theme="1"]::before{
  color:var(--ng-before-theme-light-color)!important;background-color:var(--ng-before-theme-light-bg)!important;
  border-top-color:var(--ng-before-theme-light-bt)!important;border-right-color:var(--ng-before-theme-light-br)!important;
  border-bottom-color:var(--ng-before-theme-light-bb)!important;border-left-color:var(--ng-before-theme-light-bl)!important;
  outline-color:var(--ng-before-theme-light-outline)!important;text-decoration-color:var(--ng-before-theme-light-decoration)!important;
}
html[data-site-mode="dark"] [data-ng-before-theme="1"]::before{
  color:var(--ng-before-theme-dark-color)!important;background-color:var(--ng-before-theme-dark-bg)!important;
  border-top-color:var(--ng-before-theme-dark-bt)!important;border-right-color:var(--ng-before-theme-dark-br)!important;
  border-bottom-color:var(--ng-before-theme-dark-bb)!important;border-left-color:var(--ng-before-theme-dark-bl)!important;
  outline-color:var(--ng-before-theme-dark-outline)!important;text-decoration-color:var(--ng-before-theme-dark-decoration)!important;
}
html[data-site-mode="light"] [data-ng-before-gradient="1"]::before{background-image:var(--ng-before-theme-light-bg-image)!important}
html[data-site-mode="dark"] [data-ng-before-gradient="1"]::before{background-image:var(--ng-before-theme-dark-bg-image)!important}

html[data-site-mode="light"] [data-ng-after-theme="1"]::after{
  color:var(--ng-after-theme-light-color)!important;background-color:var(--ng-after-theme-light-bg)!important;
  border-top-color:var(--ng-after-theme-light-bt)!important;border-right-color:var(--ng-after-theme-light-br)!important;
  border-bottom-color:var(--ng-after-theme-light-bb)!important;border-left-color:var(--ng-after-theme-light-bl)!important;
  outline-color:var(--ng-after-theme-light-outline)!important;text-decoration-color:var(--ng-after-theme-light-decoration)!important;
}
html[data-site-mode="dark"] [data-ng-after-theme="1"]::after{
  color:var(--ng-after-theme-dark-color)!important;background-color:var(--ng-after-theme-dark-bg)!important;
  border-top-color:var(--ng-after-theme-dark-bt)!important;border-right-color:var(--ng-after-theme-dark-br)!important;
  border-bottom-color:var(--ng-after-theme-dark-bb)!important;border-left-color:var(--ng-after-theme-dark-bl)!important;
  outline-color:var(--ng-after-theme-dark-outline)!important;text-decoration-color:var(--ng-after-theme-dark-decoration)!important;
}
html[data-site-mode="light"] [data-ng-after-gradient="1"]::after{background-image:var(--ng-after-theme-light-bg-image)!important}
html[data-site-mode="dark"] [data-ng-after-gradient="1"]::after{background-image:var(--ng-after-theme-dark-bg-image)!important}

/* HERO: the mapping is deliberately explicit because this is a WebGL scene.
   Light = white world / black sand / no shards or pillars.
   Dark  = original black world / metallic sand / original shards + pillars. */
html[data-site-mode="light"].newgen-react-hero #worldCanvas.newgen-world-raw{background:#fff!important}
html[data-site-mode="dark"].newgen-react-hero #worldCanvas.newgen-world-raw{background:#050608!important}

html[data-site-mode="light"].newgen-react-hero .hero__title,
html[data-site-mode="light"].newgen-react-hero .hero__title>span{
  color:#18191a!important;
  -webkit-text-fill-color:#18191a!important;
}
html[data-site-mode="dark"].newgen-react-hero .hero__title,
html[data-site-mode="dark"].newgen-react-hero .hero__title>span{
  color:#f4f5f5!important;
  -webkit-text-fill-color:#f4f5f5!important;
}

html[data-site-mode="light"].newgen-react-hero .topbar,
html[data-site-mode="light"].newgen-react-hero .topbar .brand,
html[data-site-mode="light"].newgen-react-hero .topbar .brand b,
html[data-site-mode="light"].newgen-react-hero .topbar .brand span,
html[data-site-mode="light"].newgen-react-hero .topbar .brand i,
html[data-site-mode="light"].newgen-react-hero .topbar__center,
html[data-site-mode="light"].newgen-react-hero .topbar__center span,
html[data-site-mode="light"].newgen-react-hero .menu-button,
html[data-site-mode="light"].newgen-react-hero .world-chapter,
html[data-site-mode="light"].newgen-react-hero .world-chapter>span,
html[data-site-mode="light"].newgen-react-hero .hero__copy,
html[data-site-mode="light"].newgen-react-hero .hero__status,
html[data-site-mode="light"].newgen-react-hero .hero__progress,
html[data-site-mode="light"].newgen-react-hero .hero__enter,
html[data-site-mode="light"].newgen-react-hero .side-index,
html[data-site-mode="light"].newgen-react-hero .contact-pill,
html[data-site-mode="light"].newgen-react-hero .sound-toggle{
  color:#242628!important;
  -webkit-text-fill-color:currentColor!important;
  mix-blend-mode:normal!important;
}
html[data-site-mode="light"].newgen-react-hero .world-chapter small,
html[data-site-mode="light"].newgen-react-hero .side-index span,
html[data-site-mode="light"].newgen-react-hero .hero__progress>span,
html[data-site-mode="light"].newgen-react-hero .hero__progress>b,
html[data-site-mode="light"].newgen-react-hero .sound-toggle b{
  color:#5b5f62!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-site-mode="light"].newgen-react-hero .menu-button i,
html[data-site-mode="light"].newgen-react-hero .hero__status i,
html[data-site-mode="light"].newgen-react-hero .sound-toggle__signal i{background:#242628!important}
html[data-site-mode="light"].newgen-react-hero .hero__progress em,
html[data-site-mode="light"].newgen-react-hero .contact-pill{border-color:rgba(36,38,40,.45)!important}
html[data-site-mode="light"].newgen-react-hero .hero__progress em>i{background:#242628!important}

/* Dark hero/header remains the authored readable light-on-black treatment. */
html[data-site-mode="dark"].newgen-react-hero .topbar,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand b,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand span,
html[data-site-mode="dark"].newgen-react-hero .topbar .brand i,
html[data-site-mode="dark"].newgen-react-hero .topbar__center,
html[data-site-mode="dark"].newgen-react-hero .topbar__center span,
html[data-site-mode="dark"].newgen-react-hero .menu-button,
html[data-site-mode="dark"].newgen-react-hero .world-chapter,
html[data-site-mode="dark"].newgen-react-hero .world-chapter>span,
html[data-site-mode="dark"].newgen-react-hero .hero__copy,
html[data-site-mode="dark"].newgen-react-hero .hero__status,
html[data-site-mode="dark"].newgen-react-hero .hero__progress,
html[data-site-mode="dark"].newgen-react-hero .hero__enter,
html[data-site-mode="dark"].newgen-react-hero .side-index,
html[data-site-mode="dark"].newgen-react-hero .contact-pill,
html[data-site-mode="dark"].newgen-react-hero .sound-toggle{
  color:#f1f2f2!important;
  -webkit-text-fill-color:currentColor!important;
  mix-blend-mode:normal!important;
}
html[data-site-mode="dark"].newgen-react-hero .world-chapter small,
html[data-site-mode="dark"].newgen-react-hero .side-index span,
html[data-site-mode="dark"].newgen-react-hero .hero__progress>span,
html[data-site-mode="dark"].newgen-react-hero .hero__progress>b,
html[data-site-mode="dark"].newgen-react-hero .sound-toggle b{color:#b9bec2!important;-webkit-text-fill-color:currentColor!important}
html[data-site-mode="dark"].newgen-react-hero .sound-toggle__signal i{background:#f1f2f2!important}

/* Bulb cord itself also follows the same meaning: lit bulb on the white hero,
   unlit bulb on the dark hero, without disappearing into either background. */
html[data-site-mode="light"].newgen-react-hero .theme-bulb{color:#161719!important}
html[data-site-mode="light"].newgen-react-hero .theme-bulb__cord{background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.20))!important}
html[data-site-mode="dark"].newgen-react-hero .theme-bulb{color:#fff!important}
html[data-site-mode="dark"].newgen-react-hero .theme-bulb__cord{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.24))!important}

/* Right-side scroll controls use dark ink on light mode and light ink on dark. */
html[data-site-mode="light"] .tr-scroll{color:#3b3e40!important;mix-blend-mode:normal!important}
html[data-site-mode="light"] .tr-scroll__track{border-left-color:rgba(30,32,34,.72)!important;border-right-color:rgba(30,32,34,.72)!important}
html[data-site-mode="light"] .tr-scroll__track:before{border-top-color:rgba(30,32,34,.32)!important}
html[data-site-mode="light"] .tr-scroll__track i{background:#2b2d2f!important;box-shadow:none!important}
html[data-site-mode="light"] .tr-scroll .tr-top{color:#303234!important;border-color:rgba(30,32,34,.62)!important}
html[data-site-mode="light"] .scroll-meter{background:rgba(0,0,0,.10)!important;mix-blend-mode:normal!important}
html[data-site-mode="light"] .scroll-meter i{background:linear-gradient(180deg,#111,#777)!important;box-shadow:none!important}

/* V81 PARSER-SAFE PREMIUM CIRCULAR THEME REVEAL --------------------------
   The View Transition snapshots do the actual two-theme reveal. The browser
   animates only ::view-transition-new(root) from the bulb centre in
   BulbThemeToggle.tsx. Keeping this CSS intentionally simple avoids the
   Turbopack/PostCSS EOF parser issue seen in V78-V80. */
::view-transition-old(root),
::view-transition-new(root){
  animation:none!important;
  mix-blend-mode:normal!important;
}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* Fallback for browsers without document.startViewTransition(). No labels,
   crossfade, rectangular wipe, media filters or theme text are used. */
.theme-transition-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000;
  pointer-events:none;
  background:var(--ttx-bg,#050607);
  clip-path:circle(0px at var(--ttx-x,100%) var(--ttx-y,0%));
  -webkit-clip-path:circle(0px at var(--ttx-x,100%) var(--ttx-y,0%));
  transition:clip-path 1000ms cubic-bezier(.76,0,.24,1),-webkit-clip-path 1000ms cubic-bezier(.76,0,.24,1);
  opacity:1;
  will-change:clip-path;
}
.theme-transition-overlay.is-active{
  clip-path:circle(var(--ttx-radius,160vmax) at var(--ttx-x,100%) var(--ttx-y,0%));
  -webkit-clip-path:circle(var(--ttx-radius,160vmax) at var(--ttx-x,100%) var(--ttx-y,0%));
}
html[data-theme-transitioning="true"] .theme-bulb{pointer-events:none!important}

@media (prefers-reduced-motion:reduce){
  .theme-transition-overlay{display:none!important}
}

/* V87 admin visual-size editor. These rules are active only for a signed-in admin preview. */
.ng-visual-editor-mode #site-shell{cursor:crosshair!important}.ng-visual-editor-mode #site-shell *{cursor:crosshair!important}.ng-visual-hover{outline:2px dashed #2b6cff!important;outline-offset:3px!important}.ng-visual-selected{outline:3px solid #ff3b30!important;outline-offset:3px!important}#ng-visual-editor-toolbar{position:fixed;z-index:2147483645;left:18px;top:18px;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 36px);padding:10px 14px;border-radius:12px;background:rgba(13,16,24,.94);color:#fff;font:12px/1.35 Arial,sans-serif;box-shadow:0 10px 40px rgba(0,0,0,.25);pointer-events:none}#ng-visual-editor-toolbar b{letter-spacing:.08em;font-size:11px}#ng-visual-editor-toolbar span{opacity:.72}#ng-visual-editor-panel{position:fixed;z-index:2147483646;right:18px;top:18px;width:min(360px,calc(100vw - 36px));padding:16px;border-radius:14px;background:#fff;color:#111;font:13px/1.4 Arial,sans-serif;box-shadow:0 18px 70px rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.12)}#ng-visual-editor-panel[hidden]{display:none!important}.ng-ve-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.ng-ve-head b{font-size:11px;letter-spacing:.1em}.ng-ve-head button{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer}.ng-ve-label{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.ng-ve-current{font-size:11px;opacity:.6;margin-bottom:12px}.ng-ve-fields{display:grid;gap:9px}.ng-ve-fields label{display:grid;gap:5px;font-weight:700}.ng-ve-fields input{min-height:40px;border:1px solid #cfd3dc;border-radius:8px;padding:0 10px;font:13px Arial,sans-serif;color:#111;background:#fff}.ng-ve-fields small{font-size:10px;line-height:1.45;opacity:.58}.ng-ve-status{min-height:18px;margin-top:10px;font-size:11px;font-weight:700}.ng-ve-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}.ng-ve-actions button{border:1px solid #cfd3dc;border-radius:8px;background:#fff;color:#111;padding:9px 11px;font:700 11px Arial,sans-serif;cursor:pointer}.ng-ve-actions button.primary{background:#111;color:#fff;border-color:#111}@media(max-width:640px){#ng-visual-editor-toolbar{right:18px;display:block}#ng-visual-editor-toolbar span{display:block;margin-top:3px}#ng-visual-editor-panel{top:auto;bottom:12px;right:12px;width:calc(100vw - 24px)}}

/* V88 universal image -> video replacement. The original img remains in layout so existing card/scroll animations keep their geometry. */
.ng-media-video{position:absolute!important;margin:0!important;padding:0!important;display:block!important;background:#000;pointer-events:none;overflow:hidden}.ng-visual-editor-mode .ng-media-video{pointer-events:auto!important}.ng-ve-media-box{display:grid;gap:8px;margin-top:5px;padding:11px;border:1px solid #dfe3eb;border-radius:10px;background:#f7f8fb}.ng-ve-media-box>b{font-size:10px;letter-spacing:.12em}.ng-ve-media-box select{min-height:40px;border:1px solid #cfd3dc;border-radius:8px;padding:0 10px;font:13px Arial,sans-serif;color:#111;background:#fff}.ng-ve-media-box input[type=file]{min-height:42px;height:auto;padding:8px;background:#fff}.ng-ve-media-box input[type=file]:disabled{opacity:.45}

/* V89 — universal CMS media slots: every former image slot can render an image,
   animated GIF or muted autoplay/loop video without changing its layout. */
.site-media--video{display:block;object-fit:cover;background:#090909}
.cms-hero__media>.site-media--video,.cms-service-row__media>.site-media--video,.service-benefits__media>.site-media--video,.service-process__media>.site-media--video,.service-experience>div:last-child>.site-media--video,.cms-content-section__image>.site-media--video,.cms-card>div>.site-media--video,.tr-fact-media>.site-media--video,.tr-project__media>.site-media--video,.tr-band-card>.site-media--video,.tr-trip-card>.site-media--video,.tr-ribbon-grid-card [data-cloth-media]>.site-media--video{width:100%;height:100%;object-fit:cover}
.cms-card>div>.site-media--video,.cms-content-section__image>.site-media--video,.cms-service-row__media>.site-media--video,.service-benefits__media>.site-media--video,.tr-project__media>.site-media--video{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.cms-card:hover>div>.site-media--video,.cms-content-section:hover .cms-content-section__image>.site-media--video,.cms-service-row:hover .cms-service-row__media>.site-media--video,.service-benefits__media:hover>.site-media--video,.tr-project:hover .tr-project__media>.site-media--video{transform:scale(1.035)}
.cms-editorial-grid .site-media--video,.cms-people-grid .site-media--video{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:20px;filter:saturate(.92)}
.cms-people-grid .site-media--video{aspect-ratio:4/5}
.hero-awards__list article>.site-media--video{width:28px;height:28px;border-radius:7px;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.tr-fact-media>.site-media--video{filter:grayscale(.32) contrast(1.04);opacity:.78;transform:scale(1.035)}
.tr-band-card>.site-media--video{position:absolute;inset:0}
.tr-trip-card>.site-media--video{position:absolute;inset:0;transform:translateZ(.1px);user-select:none}
.tr-ribbon-grid-card [data-cloth-media]>.site-media--video[data-cloth-fallback]{opacity:calc(1 - var(--cloth-mix));transition:opacity .08s linear;filter:saturate(1.03) contrast(1.04)!important}
.tr-project__media>.site-media--video{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}

/* V90 — visual editor default/current size display + live +/- steppers. */
#ng-visual-editor-panel{width:min(390px,calc(100vw - 36px))}
.ng-ve-current{opacity:.78;line-height:1.55;padding:8px 10px;border-radius:8px;background:#f5f6f8;border:1px solid #e4e7ec}
.ng-ve-current b{opacity:1}
.ng-ve-size-group{display:grid;gap:6px}
.ng-ve-size-label{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ng-ve-size-label>b{font-size:12px}
.ng-ve-size-label>span{font-size:10px;opacity:.58;font-weight:600}
.ng-ve-stepper{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:6px;align-items:center}
.ng-ve-stepper input{width:100%;min-width:0;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.ng-ve-stepper button{height:40px;border:1px solid #cfd3dc;border-radius:8px;background:#f7f8fa;color:#111;font:700 22px/1 Arial,sans-serif;cursor:pointer;user-select:none}
.ng-ve-stepper button:hover{background:#111;color:#fff;border-color:#111}
.ng-ve-stepper button:active{transform:translateY(1px)}
@media(max-width:640px){#ng-visual-editor-panel{width:calc(100vw - 24px)}}

/* V91 editor preview stability. The class is present from first HTML paint,
   before React effects run, so iframe editing never waits on a theme/transition overlay. */
body.ng-visual-editor-boot .theme-transition-overlay{display:none!important}
body.ng-visual-editor-mode{overflow:auto!important}
body.ng-visual-editor-mode #site-shell{min-height:100vh!important}


/* V92 — visual editor form cursor + interaction isolation.
   The public website uses a global robotic cursor (cursor:none!important).
   Inside the admin visual-editor panel we deliberately restore native UI cursors
   so inputs can be selected/edited and every control remains obviously clickable. */
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel,
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel *{
  pointer-events:auto!important;
}
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel{
  cursor:default!important;
  user-select:auto!important;
}
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel input:not([type="file"]),
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel textarea{
  cursor:text!important;
  user-select:text!important;
  caret-color:#111!important;
}
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel button,
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel select,
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel input[type="file"],
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel label[for]{
  cursor:pointer!important;
}
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-panel .ng-ve-stepper input{
  cursor:text!important;
}
html.robotic-cursor-enabled body.ng-visual-editor-mode #ng-visual-editor-toolbar{
  cursor:default!important;
}
body.ng-visual-editor-mode #ng-visual-editor-panel input,
body.ng-visual-editor-mode #ng-visual-editor-panel textarea,
body.ng-visual-editor-mode #ng-visual-editor-panel select,
body.ng-visual-editor-mode #ng-visual-editor-panel button{
  position:relative;
  z-index:1;
  touch-action:manipulation;
}
body.ng-visual-editor-mode .robotic-cursor.is-editor-ui{
  opacity:0!important;
  visibility:hidden!important;
}

/* ================================================================
   V110 SAFE MERGE — preserves V93/V92 homepage geometry/animations.
   Only visual-editor interaction and requested media/text presentation
   overrides are added here; no section heights, pin spacers or global
   transforms are changed.
   ================================================================ */

/* Visual editor: native mouse in editor mode, website cursor stays out of controls. */
html.ng-visual-editor-active,
html.ng-visual-editor-active body{cursor:default!important}
html.ng-visual-editor-active body .robotic-cursor{display:none!important;opacity:0!important;visibility:hidden!important}
html.ng-visual-editor-active body #site-shell,
html.ng-visual-editor-active body #site-shell *{cursor:crosshair!important}
html.ng-visual-editor-active body #ng-visual-editor-panel{z-index:2147483647!important;pointer-events:auto!important;cursor:default!important;user-select:auto!important;touch-action:auto!important}
html.ng-visual-editor-active body #ng-visual-editor-panel *{pointer-events:auto!important}
html.ng-visual-editor-active body #ng-visual-editor-panel input:not([type=file]),
html.ng-visual-editor-active body #ng-visual-editor-panel textarea{cursor:text!important;user-select:text!important;caret-color:#111!important}
html.ng-visual-editor-active body #ng-visual-editor-panel button,
html.ng-visual-editor-active body #ng-visual-editor-panel select,
html.ng-visual-editor-active body #ng-visual-editor-panel input[type=file]{cursor:pointer!important}

/* Homepage media must stay original: no white veil, grayscale, blur or opacity wash. */
.tr-keyfacts .tr-fact-media img,
.tr-keyfacts .tr-fact-media video,
.tr-work .tr-project__media img,
.tr-work .tr-project__media video,
.tr-ribbon-grid-card img,
.tr-ribbon-grid-card video{
  filter:none!important;-webkit-filter:none!important;opacity:1!important;mix-blend-mode:normal!important;
}
.tr-keyfacts .tr-fact-card::after,
.tr-keyfacts .tr-fact-card::before{display:none!important;content:none!important}

/* Key Facts copy: sharp white text directly over media; no text box. */
.tr-keyfacts .tr-fact-card>span,
.tr-keyfacts .tr-fact-card>strong,
.tr-keyfacts .tr-fact-card>strong>sup,
.tr-keyfacts .tr-fact-card>p{
  color:#fff!important;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;
  filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;opacity:1!important;text-shadow:none!important;
}

/* Never blur homepage copy. */
.tr-main h1,.tr-main h2,.tr-main h3,.tr-main h4,.tr-main h5,.tr-main h6,
.tr-main p,.tr-main span,.tr-main small,.tr-main strong,.tr-main b,.tr-main em,.tr-main blockquote,
.tr-main .tr-micro,.tr-main .tr-kicker,.tr-main [data-fluid-ui],
.mfa-ribbon-title,.mfa-ribbon-copy,.mfa-ribbon-selected,.mfa-ribbon-foot-left,.mfa-ribbon-foot-right{
  filter:none!important;-webkit-filter:none!important;
}


/* Liquid effect only while left-button drag is active; cards remain still otherwise. */
.liquid-card{transition:border-radius .22s ease-out,box-shadow .22s ease-out!important}
.liquid-card::before{
  content:""!important;display:block!important;position:absolute!important;inset:-1px!important;z-index:6!important;pointer-events:none!important;
  opacity:calc(var(--liq-pressure,0) * .30)!important;
  background:radial-gradient(170px circle at var(--liquid-pointer-x,50%) var(--liquid-pointer-y,50%),rgba(255,255,255,.30),rgba(165,220,255,.10) 35%,transparent 70%)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;mix-blend-mode:screen!important;transition:opacity .18s ease-out!important;
}
.liquid-card:not(.is-liquid-dragging){--liq-pressure:0!important}
.liquid-card.is-liquid-dragging{box-shadow:0 24px 72px rgba(0,0,0,.12),0 0 36px rgba(145,214,255,.08)!important}

/* V110 YouTube visual-media overlay. */
.ng-media-youtube{position:absolute!important;display:block!important;border:0!important;background:#000!important;pointer-events:none!important;overflow:hidden!important}


/* V115 — homepage Our Services & Work section is services-only and fully clickable. */
.tr-service-card{display:block;color:inherit!important;text-decoration:none!important;cursor:pointer}
.tr-service-card:visited,.tr-service-card:hover,.tr-service-card:focus{color:inherit!important;text-decoration:none!important}
.tr-service-card:focus-visible{outline:1px solid currentColor;outline-offset:8px}


/* V119 CAPABILITIES TEXT PHASE FIX
   Before the capabilities video enters: BLACK.
   From the exact video fade-in tween onward: WHITE.
   No difference/negative blend effect. */
html #capabilities.tr-capabilities .tr-cap-stack,
html #capabilities.tr-capabilities .tr-cap-stack > div,
html #capabilities.tr-capabilities .tr-cap-stack .tr-char,
html[data-site-mode="dark"] #capabilities.tr-capabilities .tr-cap-stack,
html[data-site-mode="dark"] #capabilities.tr-capabilities .tr-cap-stack > div,
html[data-site-mode="dark"] #capabilities.tr-capabilities .tr-cap-stack .tr-char{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  -webkit-filter:none!important;
  text-shadow:none!important;
}

html #capabilities.tr-capabilities.is-video-active .tr-cap-stack,
html #capabilities.tr-capabilities.is-video-active .tr-cap-stack > div,
html #capabilities.tr-capabilities.is-video-active .tr-cap-stack .tr-char,
html[data-site-mode="dark"] #capabilities.tr-capabilities.is-video-active .tr-cap-stack,
html[data-site-mode="dark"] #capabilities.tr-capabilities.is-video-active .tr-cap-stack > div,
html[data-site-mode="dark"] #capabilities.tr-capabilities.is-video-active .tr-cap-stack .tr-char{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  -webkit-filter:none!important;
  text-shadow:0 2px 12px rgba(0,0,0,.22)!important;
}


/* V120 NORMAL SYSTEM CURSOR */
html,body{cursor:auto!important}
a,button,[role="button"],input[type="button"],input[type="submit"],select,label[for]{cursor:pointer!important}
input[type="text"],input[type="email"],input[type="search"],input[type="password"],input[type="number"],textarea,[contenteditable="true"]{cursor:text!important}
.robotic-cursor,.robotic-cursor__hand,.robotic-cursor__tap,.robotic-cursor__spark{display:none!important;pointer-events:none!important}

/* ===================================================================
   V122 — SUPER-SMOOTH RENDERING / RIBBON PERFORMANCE PASS
   Heavy full-canvas CSS filters force an extra offscreen raster every frame.
   Card depth is retained with a cheaper per-card shadow while WebGL canvases
   stay on clean compositor layers.
   =================================================================== */
.mfa-ribbon-canvas,
.tr-ribbon-grid-cloth-canvas{
  filter:none!important;
  -webkit-filter:none!important;
  transform:translateZ(0);
  backface-visibility:hidden;
  contain:paint;
}
.mfa-ribbon-canvas canvas,
.tr-ribbon-grid-cloth-canvas canvas{
  filter:none!important;
  -webkit-filter:none!important;
  backface-visibility:hidden;
}
.tr-ribbon-grid-cloth-canvas{
  transition:none!important;
}
.tr-ribbon-grid-card{
  will-change:transform,opacity!important;
  backface-visibility:hidden;
  box-shadow:0 14px 38px rgba(0,0,0,.105)!important;
}
.tr-ribbon-grid-card>[data-cloth-media] img[data-cloth-fallback],
.tr-ribbon-grid-card>[data-cloth-media] video[data-cloth-fallback],
.tr-ribbon-grid-card:after{
  transition:none!important;
}
@media(max-width:767px){
  .tr-ribbon-grid-card{box-shadow:0 10px 28px rgba(0,0,0,.10)!important}
}
/* Do not keep transparent blend layers alive on every card when liquid-drag is idle. */
.liquid-card:not(.is-liquid-dragging)::before{display:none!important}
.liquid-card.is-liquid-dragging::before{display:block!important}

/* ================================================================
   V125 — CMS rich HTML/media parity with admin editor
   ================================================================ */
.cms-rich figure.media,.cms-rich .ng-rich-media{display:block;width:100%;max-width:100%;margin:clamp(24px,3vw,46px) 0;padding:0}
.cms-rich figure.media>oembed{display:none}
.cms-rich .ng-rich-embed{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#050505;border-radius:12px;box-shadow:0 18px 55px rgba(0,0,0,.18)}
.cms-rich .ng-rich-embed iframe,.cms-rich figure.media iframe{display:block;width:100%;height:100%;min-height:0;border:0;background:#050505}
.cms-rich figure.media iframe{aspect-ratio:16/9;border-radius:12px;box-shadow:0 18px 55px rgba(0,0,0,.18)}
.cms-rich img{max-width:100%;height:auto}.cms-rich video{display:block;width:100%;max-width:100%;height:auto;max-height:80vh;background:#050505;border-radius:12px}
.cms-rich table{width:100%;max-width:100%;border-collapse:collapse;margin:1.5em 0;display:table}.cms-rich th,.cms-rich td{border:1px solid currentColor;padding:.65em .8em;vertical-align:top}.cms-rich th{font-weight:700}
.cms-rich blockquote{margin:1.5em 0;padding:.2em 0 .2em 1.15em;border-left:3px solid currentColor;opacity:.9}.cms-rich pre{overflow:auto;max-width:100%;padding:16px 18px;border-radius:9px;background:#111;color:#f4f4f4;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.cms-rich code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.cms-rich hr{border:0;border-top:1px solid currentColor;opacity:.22;margin:2em 0}
@media(max-width:700px){.cms-rich .ng-rich-embed,.cms-rich figure.media iframe{border-radius:8px}.cms-rich table{display:block;overflow-x:auto;white-space:nowrap}}

/* V127 — never reserve a black 16:9 area for an embed whose media was deleted in Admin. */
.cms-rich .ng-editor-embed:empty,.cms-rich .ng-rich-embed:empty,
.cms-rich figure.media:empty,.cms-rich figure.ng-editor-media:empty{display:none!important;margin:0!important;padding:0!important;min-height:0!important;aspect-ratio:auto!important;background:transparent!important;box-shadow:none!important}