/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --bg:#000; --fg:#fff;
  --dim:rgba(255,255,255,.62);
  --faint:rgba(255,255,255,.32);
  --line:rgba(255,255,255,.15);

  --font-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"Zalando Sans SemiExpanded","DM Sans","Helvetica Neue",Arial,sans-serif;
  --font-accent:"Bitcount Grid Single",ui-monospace,monospace;

  --root-size:clamp(13px,12.4px + .2vw,16px);
  --t-2xs:clamp(.6875rem,.66rem + .14vw,.75rem);
  --t-xs:clamp(.75rem,.72rem + .22vw,.85rem);
  --t-base:clamp(.9375rem,.9rem + .28vw,1.05rem);

  --track-meta:.12em;
  --track-wide:.1em;

  --thumb-w:120px;
  --line-base-h:15px;

  --menu-bg:#efe6d8;
  --menu-fg:#171411;
  --menu-accent:#c89a45;
  --menu-rule:rgba(23,20,17,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--root-size);scroll-behavior:auto;overscroll-behavior-y:none;background:#000}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:var(--t-base);
  overflow-x:hidden;overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
canvas{display:block}
::selection{background:#fff;color:#000}
body::-webkit-scrollbar{width:6px}
body::-webkit-scrollbar-track{background:#000}
body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

/* ==========================================================================
   SCROLL TRACK — the hero→curtain→cube act plays inside one sticky viewport
   ========================================================================== */
.scroll-track{
  height:600vh;position:relative;touch-action:pan-y;
  transform:translate3d(0,0,0);backface-visibility:hidden;
}
.sticky-container{
  position:sticky;top:0;left:0;width:100vw;height:100vh;
  transform:translateZ(0);will-change:transform;
}

/* ==========================================================================
   1 — HERO / WEBGL SLIDESHOW
   ========================================================================== */
.hero-section{
  position:absolute;inset:0;width:100vw;height:100vh;
  overflow:hidden;background:#000;z-index:1;isolation:isolate;
}
#webgl-container{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  transform:translateZ(0);backface-visibility:hidden;contain:strict;
}

.overlay-ui{
  position:absolute;inset:0;z-index:500;padding:2.5vw 3vw;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:none;color:#fff;mix-blend-mode:difference;
}
.overlay-ui a{pointer-events:auto;color:#fff}

.top-header{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;margin-bottom:6vh;position:relative;z-index:2;
}
.huge-text{
  font-family:var(--font-display);font-stretch:semi-expanded;
  font-size:clamp(4rem,15vw,11.5rem);font-weight:600;
  line-height:.88;letter-spacing:-.02em;
}
.small-tag{font-size:var(--t-xs);font-weight:500;white-space:nowrap;letter-spacing:.05em;padding-left:15px}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:100%}
.col-right{grid-column:4;display:flex;flex-direction:column;align-items:flex-end}

.services-list{font-size:var(--t-xs);letter-spacing:var(--track-wide);line-height:1.7;color:rgba(255,255,255,.9)}
.services-list_en{letter-spacing:0}
.services-list.bordered li{
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px;margin-bottom:4px;min-width:100px;
  text-align:right;white-space:nowrap;
}
.services-list.bordered li:first-child{border-top:1px solid rgba(255,255,255,.3);padding-top:4px}

.brand-core-video-row{position:absolute;right:3vw;bottom:22vh;z-index:600;pointer-events:auto}
.brand-core-video{
  width:clamp(180px,14vw,240px);aspect-ratio:16/9;overflow:hidden;
  border-radius:2px;background:rgba(0,0,0,.4);cursor:pointer;
}
.brand-core-video i{display:block;width:100%;height:100%;background-size:cover;background-position:center}

.grid-section{position:relative;margin-bottom:30vh}
.hero-quick-links-row{align-items:center;margin-bottom:.85rem}
.hero-quick-links{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(36px,4.6vw,92px)}
.hero-quick-links a{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);transition:opacity .25s ease;
}
.hero-quick-links a:hover{opacity:.7}

.border-top-line{border-top:1px solid rgba(255,255,255,.15);padding-top:1rem}
.grid-section .grid-4 div{font-size:var(--t-xs);color:rgba(255,255,255,.9);letter-spacing:var(--track-wide)}
.grid-section .border-top-line>div:nth-child(2),
.grid-section .border-top-line>div:nth-child(3){text-align:center}
.grid-section .border-top-line>div:nth-child(4){text-align:right}

.bottom-footer{font-size:var(--t-2xs);line-height:1.6;color:rgba(255,255,255,.85);align-items:end}
.footer-links a{
  display:block;width:fit-content;margin-left:auto;margin-bottom:6px;padding-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s;
}
.footer-links a:hover{border-color:#fff}

/* slideshow controls */
.bottom-ui-container{
  position:absolute;bottom:12vh;left:50%;transform:translateX(-50%);
  width:720px;max-width:100%;z-index:600;
  display:flex;flex-direction:column;align-items:center;
}
.slide-counter{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;font-size:.825rem;margin-bottom:24px;
}
.counter-display{display:flex;align-items:center;gap:10px}
.counter-nav{width:20px;text-align:center;cursor:pointer;opacity:.7;transition:opacity .3s;pointer-events:auto}
.counter-nav:hover{opacity:1}
.counter-divider{opacity:.6;font-size:.8rem}

.slide-title-container{width:100%;text-align:center;height:30px;overflow:hidden;margin-bottom:16px;position:relative}
.slide-title{
  position:absolute;left:0;width:100%;font-size:1rem;opacity:.8;
  transition:transform .5s ease,opacity .5s ease;
}
.slide-title.exit-up{transform:translateY(-30px);opacity:0}
.slide-title.enter-up{transform:translateY(30px);opacity:0}

.drag-indicator{width:100%;height:50px;margin-bottom:8px;pointer-events:none}
.lines-container{display:flex;height:100%;width:100%;align-items:flex-end;justify-content:space-between}
.drag-line{
  width:2px;background:rgba(255,255,255,.3);height:var(--line-base-h);
  transform-origin:bottom center;
  transition:height .6s cubic-bezier(.25,.1,.25,1),background-color .6s cubic-bezier(.25,.1,.25,1);
}

.thumbs-container{width:100%;background:rgba(0,0,0,.5);overflow:hidden;pointer-events:auto}
.slide-thumbs{display:flex;position:relative}
.slide-thumb{
  width:var(--thumb-w);height:60px;background-size:cover;background-position:center;
  cursor:pointer;opacity:.5;transition:opacity .3s;position:relative;
}
.slide-thumb:hover{opacity:.8}
.slide-thumb.active{opacity:1}
.slides{display:none}

/* ==========================================================================
   2 — CURTAIN + CUBE ACT
   ========================================================================== */
.dark-wrapper-mask{
  position:absolute;left:0;bottom:0;width:100vw;height:100vh;z-index:10;overflow:hidden;
  clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0);
  will-change:clip-path;contain:layout paint style;
}
.dark-wrapper{
  position:absolute;left:0;bottom:0;width:100vw;height:100vh;
  background:#030303;overflow:hidden;transform:translateZ(0);contain:layout paint;
}
.dw-bg{position:absolute;inset:0;z-index:0;opacity:.42;background-size:cover;background-position:center}
#dw-black-overlay{position:absolute;inset:0;background:#000;z-index:9;pointer-events:none;opacity:0}

.glow-a,.glow-b{position:absolute;z-index:0;filter:blur(60px);pointer-events:none}
.glow-a{bottom:-20vh;left:-10vw;width:70vw;height:70vh;
  background:radial-gradient(circle,rgba(200,210,215,.15),transparent 60%)}
.glow-b{top:20vh;left:20vw;width:50vw;height:50vh;
  background:radial-gradient(circle,rgba(120,160,160,.1),transparent 60%)}

.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:10;display:flex}
.si-block{display:flex;flex-direction:column;align-items:center;gap:2px}
.si-arrow{width:clamp(1.6rem,1.8vw,2.2rem);padding-bottom:10px}
.si-label{font-size:var(--t-2xs);font-weight:500;letter-spacing:.08em;line-height:1}

.intro-panel{
  position:absolute;inset:0;z-index:16;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;isolation:isolate;
}
.wave-wrapper{display:flex;width:90%;position:relative;gap:25vw}
.wave-column{
  flex:1;display:flex;flex-direction:column;gap:clamp(.7rem,1.7vh,1.25rem);
  font-size:clamp(1.3rem,2.5vw,2.35rem);line-height:1;position:relative;z-index:100;
}
.wave-column-left{align-items:flex-start}
.wave-column-right{align-items:flex-end}
.wave-item{
  width:max-content;color:rgba(255,255,255,.25);text-transform:uppercase;
  transition:color .3s ease-out;user-select:none;
}
.wave-item.focused{color:#fff}
.flip-wrap{display:block;position:relative;clip-path:inset(-.25em -9999px)}
.at-en,.at-zh{display:block;transition:transform .25s cubic-bezier(.4,0,.2,1);will-change:transform}
.at-zh{position:absolute;top:0;left:0;transform:translateY(130%);white-space:nowrap}
.wave-item.focused .at-en{transform:translateY(-130%)}
.wave-item.focused .at-zh{transform:translateY(0)}

.thumb-wrapper{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;z-index:10;pointer-events:none;display:flex;justify-content:center;
}
.thumb-row{display:flex;align-items:center;width:100%}
.thumb-line{flex:1;height:1px;background:rgba(255,255,255,.18)}
.wave-thumb{
  width:clamp(140px,15vw,230px);aspect-ratio:2/1;flex-shrink:0;
  background-size:cover;background-position:center;
}
.ip-chapter{
  position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);
  font-size:1rem;z-index:120;pointer-events:none;mix-blend-mode:difference;white-space:nowrap;
}

.section-2-content{
  position:absolute;inset:0;z-index:15;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;padding-top:50px;
}
.marquee-wrapper{display:block;width:100%;overflow:hidden;mix-blend-mode:difference}
.marquee-outer{overflow:hidden;width:100%}
.marquee-inner{display:flex;align-items:center;transform:translateZ(0)}
.marquee-set{display:flex;align-items:center;flex-shrink:0}
.marquee-block{display:inline-flex;align-items:baseline;flex-shrink:0}
.huge-title{
  font-family:var(--font-accent);font-size:10vw;font-weight:400;
  line-height:1;color:#fff;white-space:nowrap;
}
.marquee-item{white-space:nowrap;flex-shrink:0}
.marquee-label{
  font-size:clamp(.875rem,1vw,1.2rem);white-space:nowrap;
  letter-spacing:.05em;line-height:1;padding:.35em 0;align-self:center;flex-shrink:0;
}
.title-reveal-wrap{overflow:hidden;display:block}

.new-text-group{
  position:absolute;inset:0;z-index:31;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding-top:50px;pointer-events:none;opacity:0;overflow:hidden;
}
.new-text-group .subtitle{font-size:.95rem;color:#ddd;letter-spacing:.1em;margin-bottom:15px}
.new-text-group .desc{font-size:14px;color:#ccc;max-width:400px;text-align:center;line-height:1.8;margin-top:30px}

.scene-wrapper{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);z-index:20;will-change:transform;
}
.scene{
  --scene-size:160px;--scene-depth:80px;
  width:var(--scene-size);height:var(--scene-size);
  perspective:calc(var(--scene-size) * 5);
}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;will-change:transform}
.face{
  position:absolute;width:var(--scene-size);height:var(--scene-size);
  background:#080808 center/cover;border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 0 40px rgba(0,0,0,1);
  overflow:hidden;user-select:none;backface-visibility:hidden;
}
.face.front {transform:rotateY(0deg)   translateZ(var(--scene-depth))}
.face.back  {transform:rotateY(180deg) translateZ(var(--scene-depth))}
.face.right {transform:rotateY(90deg)  translateZ(var(--scene-depth))}
.face.left  {transform:rotateY(-90deg) translateZ(var(--scene-depth))}
.face.top   {transform:rotateX(90deg)  translateZ(var(--scene-depth))}
.face.bottom{transform:rotateX(-90deg) translateZ(var(--scene-depth))}

/* ==========================================================================
   3 — STM TERM FIELD
   ========================================================================== */
.stm-section{
  position:relative;overflow:visible;pointer-events:none;z-index:25;
  padding-bottom:clamp(10vh,calc(241.2vh - 2265px),800px);
}
.stm-section::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40vh;z-index:0;
  background:linear-gradient(to bottom,transparent,#000);pointer-events:none;
}
.stm-content{position:relative;z-index:25;padding:10vh 1.5rem 15vh;contain:paint}
.stm-group{display:flex;flex-direction:column;margin-bottom:10vh}
.stm-el{
  white-space:nowrap;text-transform:uppercase;opacity:.6;
  font-size:13px;color:#fff;mix-blend-mode:difference;will-change:transform;
}
.stm-el--xl{font-size:clamp(2rem,20vw,15rem);opacity:1;font-family:var(--font-accent);font-weight:400}
.stm-pos-1{margin-left:0}
.stm-pos-2{margin-left:25vw}
.stm-pos-3{margin-left:70vw}
.stm-pos-4{margin-left:auto}
.stm-caret{display:inline-block;animation:stm-blink .7s steps(1) infinite}
@keyframes stm-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* The ring gallery's still fallback - see RingGallery.createStill(). Dimmed
   and behind the copy, so the headline sitting on top of it stays readable
   without the vignette pass the shader would normally provide. */
.ring-still{
  position:absolute;inset:0;display:grid;gap:2px;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);
  opacity:.34;filter:grayscale(.25);
}
.ring-still i{display:block;background-size:cover;background-position:center}
@media (max-width:900px){
  .ring-still{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}
}

.stm-logo{
  position:fixed;inset:0;height:100vh;z-index:40;display:grid;place-items:center;
  pointer-events:none;opacity:0;transition:opacity .5s;
}
.stm-logo span{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,6vw,4.5rem);letter-spacing:.2em}
.stm-logo.is-visible{opacity:1}

/* ==========================================================================
   4 — RING GALLERY
   ========================================================================== */
.ccap-section{position:relative;overflow:hidden;background:var(--bg);height:100vh;z-index:30}
.ring-gallery-sticky{
  position:sticky;top:0;width:100vw;height:100vh;overflow:hidden;
  background:var(--bg);isolation:isolate;
}
.ring-gallery-sticky::before,.ring-gallery-sticky::after{
  content:"";position:absolute;left:0;width:100%;
  height:clamp(96px,18vh,220px);pointer-events:none;z-index:3;
}
.ring-gallery-sticky::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.72) 38%,transparent)}
.ring-gallery-sticky::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.98),rgba(0,0,0,.78) 36%,transparent)}
.ccap-side-fade{position:absolute;top:0;bottom:0;width:clamp(72px,10vw,180px);pointer-events:none;z-index:3}
.ccap-side-fade-l{left:0;background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.68) 36%,transparent)}
.ccap-side-fade-r{right:0;background:linear-gradient(270deg,rgba(0,0,0,.96),rgba(0,0,0,.68) 36%,transparent)}
.ccap-exit-overlay{position:absolute;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none}
#sketch{position:absolute;inset:0;width:100vw;height:100vh;background:var(--bg)}
#sketch canvas{width:100%;height:100%;opacity:.7}

.hero-dom{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,48px);pointer-events:none;opacity:0;
}
.ccap-section main{
  position:relative;width:min(100%,1400px);min-height:100vh;margin:0 auto;
  padding:clamp(24px,4vw,48px) 4vw;
  display:flex;flex-direction:column;justify-content:center;transform-origin:50% 50%;
}
.reveal-wrap{overflow:hidden;display:inline-flex;vertical-align:top}
.reveal-inner{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.ccap-section .top-nav{
  display:grid;grid-template-columns:1fr auto 1fr;padding:1vw 0;margin-bottom:2vw;
  align-items:start;font-size:.75rem;letter-spacing:.05em;color:#a0a0a0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav-left{justify-self:start;line-height:1.6}
.nav-center{justify-self:center}
.nav-right{justify-self:end}
.ccap-section .giant-title{
  text-align:center;font-family:var(--font-display);
  font-size:clamp(2.5rem,1.35rem + 2.875vw,5rem);font-weight:700;
  line-height:1;letter-spacing:.02em;white-space:nowrap;
}
.ccap-section .sub-title{text-align:center;font-size:.85rem;line-height:1.6;margin:2vw 0 1vw}
.media-gallery{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:3vw}
.center-divider{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:clamp(96px,10vw,160px)}
.center-mark{width:96px;aspect-ratio:1/1;clip-path:inset(100% 0 0 0)}
.center-mark svg{width:100%;height:100%}
.text1vw,.text1vw .reveal-inner{
  font-size:clamp(.875rem,1vw,1.2rem);color:#fff;white-space:nowrap;letter-spacing:.05em;line-height:1;
}
.ccap-section .service-tags{
  display:flex;justify-content:center;gap:1.5vw;
  font-size:.85rem;color:#a0a0a0;margin-bottom:2vw;letter-spacing:.05em;
}

/* ==========================================================================
   5 — WORK GRID
   ========================================================================== */
.s3-gallery-section{position:relative;background:#000;isolation:isolate;z-index:3}
.s3-gallery-section::before,.s3-gallery-section::after{
  content:"";position:absolute;left:0;width:100%;
  height:clamp(96px,18vh,220px);pointer-events:none;z-index:4;
}
.s3-gallery-section::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.72) 38%,transparent)}
.s3-gallery-section::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.98),rgba(0,0,0,.78) 36%,transparent)}
.gallery-header{
  position:sticky;top:0;z-index:1;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 4vw;background:#000;
}
.gallery-header-bg{position:absolute;inset:0;z-index:0;opacity:.4;background-size:cover;background-position:center}
.gallery-header-label{
  position:relative;z-index:2;font-size:clamp(10px,1vw,13px);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:3vh;
}
.gallery-header-title{
  position:relative;z-index:2;font-family:var(--font-display);
  font-size:clamp(2.5rem,1.35rem + 2.875vw,5rem);font-weight:700;
  margin:0 0 1.5rem;line-height:1.05;text-transform:uppercase;
}
.gh-line{display:block}

.pg-gallery{
  position:relative;z-index:2;width:100%;padding:0 4vw 22vh;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:2vw;row-gap:12vw;
}
.pg-item{position:relative;display:flex;flex-direction:column}
.pg-img-wrap{position:relative;width:100%;flex:1;overflow:hidden;background:#0d0d0d;border-radius:2px}
html.pg-anim-ready .pg-img-wrap{clip-path:inset(100% 0% 0% 0%)}
.pg-img-wrap i{
  position:absolute;top:-20%;left:0;width:100%;height:140%;display:block;
  background-size:cover;background-position:center;will-change:transform;
}
.pg-meta{
  display:flex;justify-content:space-between;gap:12px;padding-top:12px;
  font-size:var(--t-2xs);letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--faint);
}
.pg-meta b{color:#fff;font-weight:500}
.pg-item-1{grid-column:1/6;grid-row:1;height:27.9vw}
.pg-item-2{grid-column:7/13;grid-row:2;height:33.75vw}
.pg-item-3{grid-column:4/10;grid-row:3;height:33.75vw}
.pg-item-4{grid-column:1/6;grid-row:4;height:27.9vw}
.pg-item-5{grid-column:7/13;grid-row:5;height:33.75vw}
.pg-item-6{grid-column:4/10;grid-row:6;height:33.75vw}

/* ==========================================================================
   6 — FOOTER
   ========================================================================== */
.site-footer{position:relative;overflow:visible;background:#000}
.footer-top{padding:3vw 2.5vw;position:relative;z-index:5;background:#000}
.footer-info-line{height:1px;background:#222;transform-origin:left center;margin-bottom:18px;will-change:transform}
.footer-info-bar{
  display:flex;justify-content:space-between;padding-top:30px;margin-bottom:40px;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--track-meta);
}
.frev-wrap{overflow:hidden;display:inline-block;vertical-align:bottom}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr}
.footer-description{font-size:var(--t-xs);line-height:1.7;color:#888;max-width:450px;margin-bottom:32px}
.footer-contact a{display:block;font-size:clamp(20px,3.5vw,50px);margin-bottom:4px;transition:opacity .2s}
.footer-contact a:hover{opacity:.6}
.footer-contact span{font-size:clamp(18px,2.5vw,30px)}
.footer-addr{color:#888;font-size:14px;margin-top:8px}
.footer-nav-links{display:flex;gap:28px;margin-top:38px;flex-wrap:wrap}
.footer-nav-links a{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--track-meta);transition:opacity .2s}
.footer-nav-links a:hover{opacity:.5}
.footer-right{display:flex;flex-direction:column;align-items:flex-end}
.footer-thumb{
  width:100%;max-width:340px;aspect-ratio:16/9;overflow:hidden;position:relative;
  background-size:cover;background-position:center;
}
.footer-video-cover{position:absolute;inset:0;background:#0a0a0a;z-index:2;pointer-events:none;transform-origin:right center}
.footer-c-bridge{
  position:absolute;bottom:0;right:6%;
  width:clamp(90px,10vw,148px);height:clamp(90px,10vw,148px);
  display:flex;align-items:center;justify-content:center;transform:translateY(50%);z-index:20;
}
.footer-c-bridge span{font-family:var(--font-display);font-size:clamp(6rem,12vw,11.25rem);font-weight:600;line-height:1}
.footer-parallax-section{height:50vh;width:100%;overflow:hidden;position:relative;z-index:1}
.footer-parallax-bg{position:absolute;inset:0;background-size:cover;background-position:bottom;mix-blend-mode:luminosity}
.footer-parallax-copy{
  position:absolute;top:30px;left:40px;z-index:3;
  color:rgba(255,255,255,.65);font-size:12px;letter-spacing:.06em;line-height:1.7;pointer-events:none;
}

/* ==========================================================================
   CHROME
   ========================================================================== */
#scroll-progress{
  position:fixed;top:0;left:0;height:1.5px;width:100%;
  background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.3);
  z-index:99997;pointer-events:none;transform-origin:left;transform:scaleX(0);
}
#fixed-logo{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);
  z-index:9999;mix-blend-mode:difference;opacity:0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:.24em;
}
.show-nav-scroll #fixed-logo{transform:translateX(-50%) scaleY(0)!important;opacity:0!important;pointer-events:none!important}

#nav_scroll_container{
  position:fixed;top:30px;left:50%;z-index:10000;
  display:flex;flex-direction:column;
  width:min(500px,calc(100vw - 80px));height:64px;
  background:#141414;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.22);
  overflow:hidden;opacity:0;transform:translateX(-50%);
  will-change:transform,opacity;pointer-events:none;
}
#nav_scroll{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  flex:0 0 64px;width:100%;min-height:64px;padding:0 24px;border-radius:inherit;
}
#nav_scroll_container.is-menu-open #nav_scroll{border-bottom:1px solid var(--menu-rule)}
#nav_scroll_container.is-menu-open .ns-icon svg{stroke:var(--menu-fg)}
#nav_scroll_container.is-menu-open .ns-logo{color:var(--menu-fg)}
.ns-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;cursor:pointer}
.ns-icon:hover{opacity:.7}
.ns-icon svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.ns-logo{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.2em;color:#fff}
.ns-ham-svg{overflow:visible}
.ns-ham-svg line{transition:transform .22s cubic-bezier(.4,0,.2,1);transform-origin:12px 12px;transform-box:view-box}
#nav_scroll_container.is-menu-open .ns-ham-svg line{transition:transform .45s cubic-bezier(.76,0,.24,1)}
#nav_scroll_container.is-menu-open .ns-ham-l1{transform:rotate(45deg)}
#nav_scroll_container.is-menu-open .ns-ham-l2{transform:rotate(-45deg)}

.ns-dropdown{
  position:relative;flex:1 1 auto;width:100%;overflow:auto;
  opacity:0;transform:translateY(24px);pointer-events:none;
  overscroll-behavior:contain;scrollbar-width:none;
}
.ns-dropdown::-webkit-scrollbar{display:none}
.ns-menu-stage{
  position:relative;display:flex;flex-direction:column;min-height:100%;
  background:var(--menu-bg);color:var(--menu-fg);
}
.ns-menu-topline{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
  min-height:48px;padding:0 28px;border-bottom:1px solid var(--menu-rule);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.ns-menu-rows{flex:1 1 auto;display:grid;grid-template-rows:repeat(5,minmax(92px,1fr))}
.ns-showcase-row{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:92px;border-bottom:1px solid var(--menu-rule);
  color:var(--menu-fg);overflow:hidden;transition:background-color .45s cubic-bezier(.16,1,.3,1);
}
.ns-showcase-row:hover{background:rgba(23,20,17,.035)}
.ns-showcase-row.is-previewed{color:var(--menu-accent)}
.ns-row-index{
  position:absolute;bottom:15%;left:calc(50% - min(16vw,250px));
  font-size:11px;font-weight:600;letter-spacing:.08em;
}
.ns-row-title{
  position:relative;z-index:2;display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(56px,7vw,90px);line-height:.92;letter-spacing:-.04em;
  text-transform:uppercase;overflow:hidden;
}
.ns-title-track{position:relative;display:block;overflow:hidden;padding:0 .06em .1em}
.ns-title-layer{display:block}
.ns-title-layer.is-accent{position:absolute;inset:0;color:var(--menu-accent)}
.ns-thumb{
  position:absolute;top:50%;z-index:1;
  width:clamp(138px,18vh,208px);aspect-ratio:3/2;overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(-50%);
  box-shadow:0 24px 54px rgba(23,20,17,.18);
  background-size:cover;background-position:center;
}
.ns-thumb.is-left{left:calc(50% - min(23vw,390px));clip-path:inset(0% 0% 0% 100%)}
.ns-thumb.is-right{left:calc(50% + min(10vw,188px));clip-path:inset(0% 100% 0% 0%)}

#cursor-dot,#cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99998}
#cursor-dot{width:6px;height:6px;background:#fff;border-radius:50%;margin:-3px 0 0 -3px;mix-blend-mode:difference}
#cursor-ring{
  --ring-size:68px;--ring-rest:.53;
  width:var(--ring-size);height:var(--ring-size);border-radius:50%;
  margin:calc(var(--ring-size) / -2) 0 0 calc(var(--ring-size) / -2);mix-blend-mode:difference;
}
#cursor-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(255,255,255,0);transform:scale(var(--ring-rest));
  transition:transform .24s cubic-bezier(.23,1,.32,1),background-color .24s ease;
}
#cursor-ring.is-link::before{transform:scale(1);background:#fff}
#cursor-ring::after{
  content:attr(data-cursor-label);
  position:absolute;top:50%;left:50%;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  color:#000;font-size:10px;font-weight:800;line-height:1;
  text-align:center;text-transform:uppercase;overflow-wrap:anywhere;
  opacity:0;transform:translate(-50%,-50%);transition:opacity .12s ease;
}
#cursor-ring.is-link::after{opacity:1}
#cursor-dot.is-link{opacity:0}
.trail-block{position:fixed;border-radius:2px;opacity:0;pointer-events:none;z-index:99999;will-change:transform,opacity}
@media (max-width:1024px),(hover:none),(pointer:coarse){
  #cursor-dot,#cursor-ring,.trail-block{display:none}
}

#loader{position:fixed;inset:0;z-index:99999;overflow:hidden}
#loader .ld-mask{
  position:absolute;top:50%;left:50%;width:0;height:0;
  transform:translate(-50%,-50%);box-shadow:0 0 0 150vmax #080808;
}
#loader .ld-logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:3;display:flex;align-items:center;gap:28px;
}
#loader .ld-letter{
  font-family:var(--font-display);font-size:clamp(44px,8vw,104px);
  font-weight:600;letter-spacing:-.02em;line-height:1;opacity:0;
}
#loader .ld-icon{width:clamp(44px,8vw,104px);height:clamp(44px,8vw,104px)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:1730px){ .huge-text{font-size:clamp(9rem,10vw,11.5rem)} .small-tag{font-size:.75rem} }
@media (min-width:1560px) and (max-width:1730px){ .huge-text{font-size:10rem} .small-tag{padding-top:10px} }
@media (min-width:1280px) and (max-width:1560px){ .huge-text{font-size:9rem} .small-tag{padding-top:30px} }
@media (min-width:1024px) and (max-width:1280px){ .huge-text{font-size:7rem} #fixed-logo{top:50px} .small-tag{padding-top:30px} }
@media (min-width:768px)  and (max-width:1024px){ .huge-text{font-size:5rem} #fixed-logo{top:30px} .small-tag{padding-top:30px} }

@media (max-width:1024px){ .footer-c-bridge,.footer-parallax-section{display:none!important} }

@media (max-width:900px){
  .ccap-section .top-nav{grid-template-columns:1fr 1fr;gap:1rem}
  .nav-center{display:none}
  .ccap-section .giant-title{font-size:10vw;white-space:normal;margin-top:5vw}
  .ccap-section .service-tags{flex-direction:column;align-items:center;gap:1rem}
  .hero-quick-links{gap:20px 30px}
}

@media (max-width:768px){
  .footer-main{grid-template-columns:1fr}
  .footer-right{align-items:flex-start;margin-top:40px}
  .footer-info-bar{display:none}
  .footer-top{padding:1.5rem}
  .pg-gallery{display:flex;flex-direction:column;gap:15vw;padding:10vw}
  .pg-item{height:70vw!important}
  .gallery-header{position:relative;height:auto;padding:22vh 4vw 12vh}
  .ns-menu-rows{grid-template-rows:repeat(5,minmax(76px,1fr))}
  .ns-showcase-row{min-height:76px}
  .ns-row-title{font-size:clamp(38px,11vw,56px)}
  .ns-row-index{left:18px}
  .ns-thumb{display:none}
  .huge-title{font-size:20vw}
}

@media (max-width:767px){
  .scroll-track{height:auto}
  .sticky-container{position:relative;height:auto;overflow:visible}
  .hero-section{position:relative;height:90vh}
  .dark-wrapper-mask{display:none!important}
  .top-header,.grid-section,#fixed-logo,.brand-core-video-row{display:none}
  .overlay-ui{padding:90px 20px 20px}
  .stm-section,.stm-logo{display:none!important}
  .bottom-footer .footer-col:nth-child(1){display:none}
  .bottom-footer .footer-col:nth-child(2){grid-column:1}
  .bottom-footer .footer-col:nth-child(3){grid-column:4}
  .bottom-ui-container{bottom:6vh}

  /* a 4-col grid leaves ~85px per column at 375px, which wraps every service
     label onto two lines — give each list half the width instead */
  .overlay-top .grid-4{grid-template-columns:1fr 1fr}
  .overlay-top .col-right{grid-column:2}
  /* and keep the contact block clear of the slideshow controls it sits under */
  .overlay-ui{padding-bottom:210px}
  #nav_scroll_container{
    top:16px;width:calc(100vw - 24px);
    opacity:1!important;pointer-events:auto!important;transform:translateX(-50%)!important;
  }
  #nav_scroll{padding:0 20px}
  .mobile-cube-section{display:grid!important}
}

.mobile-cube-section{
  display:none;place-items:center;position:relative;
  min-height:clamp(360px,62svh,520px);padding:90px 0 48px;
  background:#000;z-index:2;isolation:isolate;text-align:center;
}
.mcube-bg{position:absolute;inset:0;z-index:1;opacity:.34;background-size:cover;background-position:center}
.mcube-title{
  position:absolute;top:60px;left:0;width:100%;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
.mcube-eye{font-size:clamp(.6rem,2.8vw,.75rem);letter-spacing:.18em;color:rgba(255,255,255,.45);text-transform:uppercase}
.mcube-line{font-family:var(--font-display);font-size:10vw;font-weight:700;line-height:1;text-transform:uppercase}
.mcube-scene{
  position:relative;z-index:3;width:clamp(150px,48vw,210px);aspect-ratio:1/1;
  perspective:calc(clamp(150px,48vw,210px) * 5);padding-top:80px;touch-action:pan-y;
}
.mcube{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.mcube-face{
  position:absolute;width:100%;height:100%;background:#080808 center/cover;
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 34px rgba(0,0,0,.88);
  backface-visibility:hidden;
}
.mcube-copy{
  position:relative;z-index:4;padding:150px 28px 0;
  font-size:clamp(.78rem,3.6vw,.95rem);line-height:1.75;color:rgba(255,255,255,.62);
}

@media (prefers-reduced-motion:reduce){
  /* html.force-motion is the ?motion review flag - see kinetic.js. */
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html:not(.force-motion) .glow-a,
  html:not(.force-motion) .glow-b{filter:none}
}