/* =========================================================
   HOME — explore-the-building hero, 3D project cube, two doors
   ========================================================= */

/* ---------------- HEADINGS: elegant serif caps ---------------- */
:root{--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif}
.hero__title,.room__title,.cta__card h3{font-family:var(--serif)!important;font-weight:300!important;text-transform:uppercase;letter-spacing:.01em!important;line-height:1!important}
.hero__title{font-size:clamp(46px,5.4vw,96px)!important}
.hero__title em{display:block;font-style:italic;text-transform:none;font-size:.52em;letter-spacing:.01em;color:rgba(255,255,255,.78);margin-top:.35em}
.room__title{font-size:clamp(44px,5.6vw,100px)!important}
.cta__card h3{font-size:clamp(34px,3.6vw,64px)!important}
.face__word b{font-family:var(--serif)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.02em!important}
.view__title{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.04em}

/* ---------------- HERO ---------------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#05070b;isolation:isolate}
.hero__stage{position:absolute;inset:0;transform-origin:var(--zx,50%) var(--zy,50%);transition:transform 1.35s var(--ease),filter 1.35s var(--ease)}
.is-loading .hero__stage{transform:scale(1.28);filter:blur(10px) brightness(.4)}
.hero:not(.is-zooming) .hero__stage{transition-delay:.15s}
.is-zooming .hero__stage{transform:scale(7);filter:blur(5px) brightness(1.25)}
.hero__cam{position:absolute;inset:0;transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .9s var(--ease-out)}

.hero__bg{position:absolute;inset:-6%}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(34px) brightness(.62) saturate(1.1);transform:scale(1.15)}
.hero__bldg{position:absolute;top:0;bottom:0;left:56%;aspect-ratio:4/5;translate:-50% 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  animation:breathe 22s ease-in-out infinite alternate}
@keyframes breathe{from{scale:1}to{scale:1.045}}
.hero__bldg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease)}
.hero__slide.is-on{opacity:1}
.is-night{opacity:0;transition:opacity 1.6s var(--ease)}
.hero[data-mode=night] .is-night{opacity:1}
.hero[data-mode=night] .hero__bldg img.is-night{filter:brightness(.9) contrast(1.05)}

.hero__sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%);background-size:260% 100%;mix-blend-mode:soft-light;animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.hero[data-mode=night] .hero__sweep{opacity:0}
.beacon{position:absolute;left:51.6%;top:7.6%;width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 10px 3px rgba(255,0,0,.8);opacity:0;transition:opacity 1s}
.hero[data-mode=night] .beacon{opacity:1;animation:beacon 1.6s steps(1) infinite}
@keyframes beacon{50%{opacity:.15}}
.hero__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.hero__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,7,11,.82) 0%,rgba(5,7,11,.45) 30%,rgba(5,7,11,0) 50%),
  linear-gradient(180deg,rgba(5,7,11,.55) 0%,rgba(5,7,11,0) 20%,rgba(5,7,11,0) 70%,rgba(5,7,11,.7) 100%)}

/* hotspots */
.hs{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2;opacity:0;transition:opacity .6s var(--dl)}
body:not(.is-loading) .hs{opacity:1}
.hs::before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px}
.hs__core{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25),0 0 18px rgba(255,255,255,.8);transition:transform .4s var(--ease-out),background .3s}
.hs__pulse{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.8);animation:hsPulse 2.4s var(--ease-out) infinite}
@keyframes hsPulse{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.6);opacity:0}}
.hs__label{position:absolute;top:-11px;left:22px;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:5px 12px 5px 5px;border-radius:999px;font-size:12px;color:#fff;background:rgba(20,20,22,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);transform-origin:left center;transition:transform .5s var(--ease-out),background .3s}
.hs__label small{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);font-size:9.5px}
.hs[data-side=left] .hs__label{left:auto;right:22px;transform-origin:right center;flex-direction:row-reverse;padding:5px 5px 5px 12px}
.hs:hover .hs__core,.hs:focus-visible .hs__core{transform:scale(1.35);background:var(--red)}
.hs:hover .hs__label,.hs:focus-visible .hs__label{background:var(--red);transform:scale(1.06)}
.hs:hover .hs__label small{background:rgba(0,0,0,.2)}

/* copy */
.hero__ui{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity .5s}
.hero__ui>*{pointer-events:auto}
.is-zooming .hero__ui{opacity:0;pointer-events:none}
.is-zooming .hero__ui>*{pointer-events:none}
.hero__copy{position:absolute;left:var(--pad);bottom:13vh;max-width:min(560px,40vw)}
.hero__kicker{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.8)}
.live{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,0,0,.7);animation:live 1.8s infinite;flex:0 0 auto}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(255,0,0,0)}100%{box-shadow:0 0 0 0 rgba(255,0,0,0)}}
.hero__title{font-family:"Inter Tight",sans-serif;font-weight:200;font-size:clamp(64px,8.4vw,150px);line-height:.88;letter-spacing:-.055em;margin:18px 0 22px;color:#fff}
.ht-line{display:block;overflow:hidden;padding-bottom:.06em}
/* "Stretch In Each Line": every line snaps open from a squashed sliver, one after the other (user) */
.ht-in{display:inline-block;transform-origin:0% 60%;
  transition:transform 1.15s cubic-bezier(.16,1.02,.24,1) calc(var(--i) * 150ms + .85s),
             opacity .55s ease calc(var(--i) * 150ms + .85s),
             filter .8s ease calc(var(--i) * 150ms + .85s)}
.is-loading .ht-in{transform:scaleX(.06) scaleY(1.55) translateY(8%);opacity:0;filter:blur(3px)}
.hero__title em{font-style:italic;font-weight:300;color:rgba(255,255,255,.72)}
.rot{display:inline-block;height:.9em;overflow:hidden;vertical-align:bottom;line-height:.9}
.rot__in{display:flex;flex-direction:column;animation:rot 7s var(--ease) infinite 2.6s}
.rot__in b{font-weight:500;letter-spacing:-.06em;display:block;height:.9em}
.rot__in b::first-letter{color:inherit}
@keyframes rot{0%,40%{transform:translateY(0)}50%,90%{transform:translateY(-33.333%)}100%{transform:translateY(-66.666%)}}
.hero__sub{max-width:380px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.78)}
.hero__spots{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.hero__spots button{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;font-size:12.5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .3s,border-color .3s}
.hero__spots button small{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);font-size:9.5px}
.hero__spots button:hover{background:var(--red);border-color:var(--red)}

/* scene widget */
.w-scene{position:absolute;right:var(--pad);top:108px;display:flex;align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:22px}
.w-scene__side p{font-size:13px;margin-bottom:8px}
.w-scene__side small{display:block;font-size:10px;color:var(--muted);margin-bottom:7px}
.toggle{position:relative;display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.1)}
.toggle button{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.7);transition:color .4s}
.toggle button[aria-checked=true]{color:#fff}
.toggle .ico{width:14px;height:14px}
.toggle__knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--red);box-shadow:0 0 20px rgba(255,0,0,.45);transition:transform .6s var(--ease)}
.hero[data-mode=night] .toggle__knob{transform:translateX(100%)}

.hero__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero__scroll{display:flex;align-items:center;gap:10px}
.hero__scroll span{width:1px;height:32px;background:linear-gradient(rgba(255,255,255,0),#fff);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* the room you step into */
.room{position:absolute;inset:0;z-index:6;visibility:hidden;pointer-events:none;background:#000;
  clip-path:circle(0px at var(--zx,50%) var(--zy,50%));transition:clip-path 1.05s var(--ease),visibility 0s linear 1.05s}
.is-room .room{visibility:visible;pointer-events:auto;clip-path:circle(160vmax at var(--zx,50%) var(--zy,50%));transition:clip-path 1.15s var(--ease),visibility 0s}
.room__media{position:absolute;inset:0;overflow:hidden}
.room-open{overflow:hidden}
.room__media img,.room__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.35);transition:transform 2.2s var(--ease-out),opacity .8s}
.room__media .is-on{opacity:1}
.is-room .room__media img,.is-room .room__media video{transform:scale(1.02);animation:roomDrift 16s ease-in-out 2.2s infinite alternate}
@keyframes roomDrift{to{transform:scale(1.1) translateX(-2%)}}
.hero[data-mode=night] .room__media img{filter:brightness(.78) sepia(.18) saturate(1.1)}
.room__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,0) 55%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 60%,rgba(0,0,0,.6))}
.room__back{position:absolute;left:var(--pad);top:100px;z-index:2}
.room__txt{position:absolute;left:var(--pad);bottom:13vh;max-width:620px}
.room__txt>*{transition:opacity .8s var(--ease-out),transform 1s var(--ease-out),filter .9s}
.room:not(.is-shown) .room__txt>*{opacity:0;transform:translateY(26px);filter:blur(8px)}
.room__txt>:nth-child(2){transition-delay:.1s}
.room__txt>:nth-child(3){transition-delay:.2s}
.room__txt>:nth-child(4){transition-delay:.3s}
.room__idx{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.room__idx b{color:var(--red);font-weight:500}
.room__title{font-family:"Inter Tight",sans-serif;font-weight:200;font-size:clamp(52px,7vw,124px);line-height:.9;letter-spacing:-.055em;margin:14px 0 18px}
.room__sub{max-width:400px;color:rgba(255,255,255,.85);font-size:15px}
.room__note{display:block;margin-top:14px;font-size:10.5px;color:rgba(255,255,255,.45)}
.room__nav{position:absolute;right:var(--pad);bottom:28px;display:flex;gap:8px}
.room__nav button{position:relative;width:120px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.2);opacity:.7;transition:opacity .3s,transform .4s var(--ease-out),border-color .3s}
.room__nav button img{width:100%;height:100%;object-fit:cover}
.room__nav button span{position:absolute;left:8px;bottom:6px;font-size:11px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.room__nav button:hover{opacity:1;transform:translateY(-4px)}
.room__nav button.is-active{opacity:1;border-color:var(--red)}

/* ---------------- PROJECTS CUBE ---------------- */
.strip__bar{flex:1;max-width:340px;height:1px;background:var(--hair);position:relative;overflow:hidden}
.strip__bar i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(var(--p,0))}
.cube{position:relative;background:var(--shade-2);transition:background .9s var(--ease)}
.cube .sticky{position:relative;background:var(--shade-2);transition:background .9s var(--ease)}
.cube__ctrl{display:flex;gap:6px}
.cube .sticky{cursor:s-resize}
.cube__stage,.cube__head,.ticker{cursor:pointer}
.cube__hint{position:absolute;left:50%;top:calc(46% + min(31vw,520px,54vh) / 2.15 + 18px);translate:-50% 0;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.45);white-space:nowrap;pointer-events:none}
.cube__arrow{width:40px;height:40px;padding:0;justify-content:center}
.strip__bar i{transition:transform .9s var(--ease)}
.face{background:linear-gradient(145deg,#2e2f34,#232428)!important}
.cube__head{position:absolute;left:var(--pad);right:var(--pad);top:12vh;display:flex;justify-content:space-between;align-items:center}
.cube__head .eyebrow span{margin-right:10px}
.frame{position:absolute;top:22vh;bottom:31vh;width:40px;border:1.5px solid var(--line)}
.frame--l{left:var(--pad);border-right:0}
.frame--r{right:var(--pad);border-left:0}
.cube__stage{position:absolute;left:50%;top:46%;width:min(62vw,1040px,108vh);aspect-ratio:2.15/1;display:grid;grid-template-columns:1fr 1fr;
  transform:perspective(1700px) translate(-50%,-50%) scale(calc(.84 + .16 * var(--enter,1))) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d;opacity:calc(.3 + .7 * var(--enter,1))}
.cube__word{position:relative;perspective:1500px}
.prism{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(-1 * var(--hz,200px)));transition:transform .9s var(--ease)}
.face{position:absolute;inset:0;background:linear-gradient(145deg,#2c2c2e,#1f1f20);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;overflow:hidden;
  transform:rotateY(0deg) translateZ(var(--hz,200px))}
.face--b{transform:rotateY(90deg) translateZ(var(--hz,200px))}
.face__word{position:relative;display:flex;flex-direction:column;align-items:center}
.face__word b{font-family:"Inter Tight";font-weight:300;letter-spacing:-.055em;line-height:.95;white-space:nowrap;color:var(--red);font-size:60px}
.face__word i{display:none}
.face__idx,.face__st,.face__area,.face__size{position:absolute;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.face__idx{left:18px;top:16px}
.face__st{right:18px;top:16px;display:flex;align-items:center;gap:7px;color:#fff}
.face__st i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.face__area{left:18px;bottom:16px}
.face__size{right:18px;bottom:16px}
.cube__view{position:relative;overflow:hidden;background:#111}
.view__imgs{position:absolute;inset:0}
.view__img{position:absolute;inset:0;clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--ease)}
.cube__view[data-dir=prev] .view__img{clip-path:inset(0 100% 0 0)}
.cube__view .view__img.is-active{clip-path:inset(0 0 0 0);z-index:2}
.cube__view .view__img.is-prev{clip-path:inset(0 0 0 0);z-index:1;transition:none}
.view__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.82);transform:scale(1.18);transition:transform 1.6s var(--ease)}
.view__img.is-active img{transform:scale(1)}
.view__shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45))}
.view__ui{position:absolute;inset:0;z-index:4}
.view__title{position:absolute;left:16px;top:13px;font-family:"Inter Tight";font-weight:300;font-size:clamp(15px,1.45vw,22px);letter-spacing:-.02em}
.view__chips{position:absolute;left:16px;right:16px;top:clamp(46px,4.6vw,64px);display:flex;gap:6px;flex-wrap:wrap}
.mini{padding:7px 11px;border-radius:12px;font-size:10px;line-height:1.25;color:var(--muted)}
.mini b{display:block;font-weight:500;font-size:11.5px;color:#fff}
.view__key{position:absolute;left:16px;bottom:16px;width:42px;height:42px;display:grid;place-items:center;color:#fff;transition:color .3s}
.view__key:hover{color:var(--red);--c:var(--red)}
.view__gal{position:absolute;right:12px;bottom:12px;padding:8px;border-radius:14px}
.view__gal small{display:flex;align-items:center;gap:6px;font-size:10px;color:#fff;margin:0 0 6px 2px}
.view__gal small .ico{width:12px;height:12px}
.thumbs{display:flex;gap:5px}
.thumbs img{width:clamp(44px,3.9vw,64px);aspect-ratio:1.2;object-fit:cover;border-radius:7px}
.swap.is-swap{animation:swapIn .7s var(--ease-out) both}
@keyframes swapIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ticker{position:absolute;left:0;right:0;bottom:15.5vh;overflow:hidden}
.ticker__track{display:flex;width:max-content;transition:transform 1s var(--ease);will-change:transform}
.ticker a{flex:0 0 auto;width:16vw;min-width:140px;text-align:center;font-family:"Inter Tight";font-size:15px;letter-spacing:-.01em;text-transform:uppercase;color:rgba(255,255,255,.82);padding:6px 0;transition:color .5s}
.ticker a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.ticker a.is-active{color:var(--red)}
/* project names are links */
a.face__word{cursor:pointer}
a.face__word i{transition:width .5s var(--ease)}
a.face__word:hover i{width:70%}
.view__title a{display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid transparent;transition:border-color .3s}
.view__title a:hover{border-color:#fff}
.view__title .ico{width:.8em;height:.8em;transition:transform .4s var(--ease-out)}
.view__title a:hover .ico{transform:translate(2px,-2px)}

/* ---------------- TWO DOORS ---------------- */
/* the cards fly in from both sides, so the section clips what is still off-stage */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14vh var(--pad);overflow:hidden;
  background:var(--light-2);transition:background .9s var(--ease)}
.cta__card{position:relative;height:74vh;min-height:460px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;isolation:isolate}
.cta__card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.6) saturate(.85);transition:transform 1.4s var(--ease)}
.cta__card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.75))}
.cta__card:hover>img{transform:scale(1.06)}
.cta__card h3{font-size:clamp(40px,4.4vw,78px);margin:14px 0 14px}
.cta__card>p:last-child{max-width:400px;color:rgba(255,255,255,.8)}
.cta__go{position:absolute;right:26px;top:26px;width:56px;height:56px;display:grid;place-items:center;--s:10px;transition:color .3s,transform .7s var(--ease-out)}
.cta__card:hover .cta__go{color:var(--red);--c:var(--red);transform:rotate(45deg)}

/* ---------------- DAY = WHITE BACKGROUND ---------------- */
.hero{transition:background-color 1.2s var(--ease)}
.hero__bg{transition:opacity 1.2s var(--ease)}
/* day = white, night = pure black (no blurred image behind the building) */
.hero,.hero[data-mode=night]{background-color:#000}
.hero__bg{display:none}
.hero[data-mode=day]{background-color:var(--sky,#0F141B)}
.hero__shade{background:none!important}
.hero__shade::before,.hero__shade::after{content:"";position:absolute;inset:0;transition:opacity 1.2s var(--ease)}
.hero__shade::before{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.85) 26%,rgba(0,0,0,0) 46%),linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 84%,rgba(0,0,0,.85) 100%)}
.hero__shade::after{opacity:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 26%,rgba(255,255,255,.4) 40%,rgba(255,255,255,0) 50%),linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 78%,rgba(255,255,255,.85) 100%)}
.hero[data-mode=day] .hero__shade::before{opacity:0}
.hero[data-mode=day] .hero__shade::after{opacity:1}
.hero__title,.hero__title em,.hero__kicker,.hero__sub,.hero__foot,.hero__spots button,.w-scene,.toggle button{transition:color .9s var(--ease),background-color .9s var(--ease),border-color .9s var(--ease)}
.hero[data-mode=day] .hero__title{color:#0B0B0B;text-shadow:0 2px 26px rgba(255,255,255,.85)}
.hero[data-mode=day] .hero__sub,.hero[data-mode=day] .hero__kicker{text-shadow:0 1px 14px rgba(255,255,255,.9)}
.hero[data-mode=day] .hero__title em{color:rgba(11,11,11,.8)}
.hero[data-mode=day] .hero__kicker,.hero[data-mode=day] .hero__sub{color:rgba(11,11,11,.9)}
.hero[data-mode=day] .hero__foot{color:rgba(11,11,11,.75)}
.hero[data-mode=day] .hero__scroll span{background:linear-gradient(rgba(11,11,11,0),#0B0B0B)}
.hero[data-mode=day] .hero__spots button{color:#0B0B0B;background:rgba(255,255,255,.72);border-color:rgba(11,11,11,.22)}
.hero[data-mode=day] .hero__spots button small{background:rgba(11,11,11,.08)}
.hero[data-mode=day] .hero__spots button:hover{color:#fff;background:var(--red);border-color:var(--red)}
.hero[data-mode=day] .w-scene{color:#0B0B0B;background:rgba(255,255,255,.72);border-color:rgba(11,11,11,.08);box-shadow:0 24px 60px rgba(0,0,0,.08)}
.hero[data-mode=day] .w-scene .ring__track{stroke:rgba(11,11,11,.12)}
.hero[data-mode=day] .w-scene .ring__prog{stroke:#0B0B0B}
.hero[data-mode=day] .w-scene small,.hero[data-mode=day] .ring__txt small{color:rgba(11,11,11,.55)}
.hero[data-mode=day] .toggle{background:rgba(11,11,11,.07)}
.hero[data-mode=day] .toggle button{color:rgba(11,11,11,.65)}
.hero[data-mode=day] .toggle button[aria-checked=true]{color:#fff}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1100px){
  .hero__bldg{left:62%}
  .hero__copy{max-width:52vw}
}
@media (max-width:900px){
  .hero__bldg{left:50%;top:6vh;bottom:auto;height:70vh}
  .hero__shade{background:linear-gradient(180deg,rgba(5,7,11,.5),rgba(5,7,11,0) 20%,rgba(5,7,11,.2) 55%,rgba(5,7,11,.95) 82%)}
  .hero__copy{max-width:none;right:var(--pad);bottom:9vh}
  .hero__title{font-size:17vw}
  .hero__sub{display:none}
  .w-scene{top:auto;bottom:calc(9vh + 250px);right:var(--pad);padding:8px 10px 8px 8px}
  .w-scene .ring{display:none}
  .hs__label{display:none}
  .hero__foot span{display:none}
  .room__nav button{width:74px}
  .room__txt{bottom:22vh;right:var(--pad)}
  .frame{display:none}
  .cube__head{top:10vh}
  .cube__stage{width:90vw;height:58vh;aspect-ratio:auto;grid-template-columns:1fr;grid-template-rows:36% 64%;top:48%}
  .view__gal{display:none}
  .ticker{bottom:12vh}
  .ticker a{width:38vw;min-width:0}
  .cube__hint{display:none}
  .strip__bar{display:none}
  .cta{grid-template-columns:1fr}
  .cta__card{height:62vh}
}

/* ---------------------------------------------------------------- NIGHT SCENE */
/* the hero's Day / Night switch flips the whole page: black turns white, white turns black (user) */
body[data-scene=night] .cube,body[data-scene=night] .cube .sticky{background:var(--light-3);color:var(--ink)}
body[data-scene=night] .cube .eyebrow{color:rgba(11,11,11,.58)}
body[data-scene=night] .cube .chip{background:rgba(255,255,255,.72);border-color:rgba(11,11,11,.14);color:var(--ink)}
body[data-scene=night] .cube .chip:hover{background:#fff}
body[data-scene=night] .cube__hint{color:rgba(11,11,11,.5)}
body[data-scene=night] .cube .frame{border-color:rgba(11,11,11,.2)}
body[data-scene=night] .ticker a{color:rgba(11,11,11,.66)}
body[data-scene=night] .ticker a:hover{color:var(--ink)}
body[data-scene=night] .ticker a.is-active{color:var(--red)}
body[data-scene=night] .cube .strip{color:rgba(11,11,11,.62)}
body[data-scene=night] .cta{background:var(--ink)}
/* the footer flips with the rest of the night scene (user) */
.footer{transition:background .9s var(--ease),color .9s var(--ease)}
.footer__brand .logo-on-light{display:none}

/* day: the spot labels sit on solid ink so the white text stays readable over a bright building (user) */
.hero[data-mode=day] .hs__label{background:rgba(11,11,11,.82);border-color:rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero[data-mode=day] .hs__label small{background:rgba(255,255,255,.2)}

/* day: a soft white pad behind the hero copy keeps it readable without washing the building (user) */
.hero__copy{isolation:isolate}
.hero__copy::before{content:"";position:absolute;z-index:-1;inset:-40px -30px -34px -60px;opacity:0;pointer-events:none;
  background:radial-gradient(120% 92% at 0% 50%,rgba(255,255,255,.97) 0%,rgba(255,255,255,.88) 46%,rgba(255,255,255,.55) 68%,rgba(255,255,255,0) 88%);
  transition:opacity .9s var(--ease)}
.hero[data-mode=day] .hero__copy::before{opacity:1}
.hero[data-mode=day] .hero__spots button{background:rgba(255,255,255,.9);border-color:rgba(11,11,11,.28);color:#0B0B0B}
.hero[data-mode=day] .hero__spots button small{background:rgba(11,11,11,.12);color:#0B0B0B}

/* the name card flips with the band: white card on the black band, pure black card on the light one (user) */
.face{background:linear-gradient(145deg,#FFFFFF,#F1F0EC)!important;color:#0B0B0B;transition:background .9s var(--ease),color .9s var(--ease)}
.face__idx,.face__area,.face__size{color:rgba(11,11,11,.5)}
.face__st{color:#0B0B0B}
body[data-scene=night] .face{background:linear-gradient(145deg,#111113,#000000)!important;color:#fff}
body[data-scene=night] .face__idx,body[data-scene=night] .face__area,body[data-scene=night] .face__size{color:rgba(255,255,255,.55)}
body[data-scene=night] .face__st{color:#fff}

/* the name card keeps its dimension at rest: it tilts with the cursor, floats when idle,
   and carries a lit edge + sheen so it never reads flat (user) */
.cube__stage{transition:transform .5s var(--ease-out)}
.cube__stage.is-idle{animation:cubeIdle 9s ease-in-out infinite}
@keyframes cubeIdle{0%,100%{--tx:1.8deg;--ty:-4.5deg}50%{--tx:-1.8deg;--ty:4.5deg}}
@property --tx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ty{syntax:'<angle>';inherits:false;initial-value:0deg}
.face{border-radius:3px;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.25)}
.face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 64%,rgba(0,0,0,.35) 100%)}
body[data-scene=night] .face{box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){ .cube__stage.is-idle{animation:none} }

/* the small step counters need the extra half point (and tabular figures) to stay readable (user) */
.hero__spots button small,.hs__label small{font-family:"Inter Tight","Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums lining-nums;font-size:10.5px;letter-spacing:.02em}

/* ---------------------------------------------------- DAY SCENE, DRESSED UP */
/* warm paper ground, a sun wash from the top right, film grain and a vignette (user) */
.hero__paper{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.hero[data-mode=day] .hero__paper{opacity:1}
.hero__paper::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 55% at 88% 6%,rgba(255,214,150,.42),rgba(255,214,150,0) 62%),
             radial-gradient(60% 50% at 6% 92%,rgba(140,160,200,.16),rgba(140,160,200,0) 70%),
             radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 58%,rgba(60,50,40,.13) 100%)}
.hero__paper::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  background-size:160px 160px}
/* the tower sits on the page instead of floating */
.hero__bldg::after{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:9%;z-index:-1;opacity:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(40,35,28,.4),rgba(40,35,28,0) 70%);filter:blur(6px);
  transition:opacity 1s var(--ease)}
.hero[data-mode=day] .hero__bldg::after{opacity:1}


/* Day = blue sky + greenery behind the tower, the way the render looks (user) */
.hero[data-mode=day] .hero__bg img{filter:blur(30px) brightness(1.04) saturate(1.3) contrast(1.02);transform:scale(1.18)}
/* the white wash pulls back so the sky fills the frame; the copy keeps its own soft pad */
.hero[data-mode=day] .hero__shade::after{opacity:.3}
.hero[data-mode=day] .hero__paper::before{
  background:radial-gradient(70% 55% at 88% 6%,rgba(255,236,190,.5),rgba(255,236,190,0) 60%),
             radial-gradient(90% 70% at 12% 100%,rgba(70,130,80,.18),rgba(70,130,80,0) 66%),
             radial-gradient(120% 95% at 50% 45%,rgba(0,0,0,0) 62%,rgba(20,40,60,.14) 100%)}
.hero[data-mode=day] .hero__paper::after{opacity:.3}
/* the pad had a visible oval edge — make it a full-height wash that runs off-screen, so it blends (user) */
.hero[data-mode=day] .hero__copy::before{inset:-120vh -6% -120vh -100vw;
  background:linear-gradient(90deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.66) 62%,rgba(255,255,255,.42) 82%,rgba(255,255,255,0) 100%)}
.hero[data-mode=day] .hero__shade::after{background:
  linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.26) 26%,rgba(255,255,255,0) 52%),
  linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 80%,rgba(255,255,255,.4) 100%)}

/* night keeps the render's own sky too, just deeper */
.hero[data-mode=night]{background-color:#05070d}

/* the scene change sweeps across with a red line (same idea as the gallery flip) */
.hero__line{position:absolute;top:0;bottom:0;left:0;width:3px;z-index:6;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,0,0,0),var(--red) 12%,var(--red) 88%,rgba(255,0,0,0));
  box-shadow:0 0 26px 6px rgba(255,0,0,.45)}
.hero.is-wipe .is-night{opacity:1!important;transition:none!important}


/* the render's own sky fades into the page colour at the edges, so there is no visible photo box */
.hero__bldg{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),
  linear-gradient(180deg,#000 0,#000 78%,rgba(0,0,0,.35) 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),
  linear-gradient(180deg,#000 0,#000 78%,rgba(0,0,0,.35) 94%,transparent 100%);mask-composite:intersect}

/* ------------------------------------------------ DAY, BUT DARK (user) */
/* the render stays a day render; the page around it is deep charcoal, not white or blue */
.hero[data-mode=day] .hero__shade::after{opacity:0}
.hero[data-mode=day] .hero__shade::before{opacity:1}
.hero[data-mode=day] .hero__paper{opacity:.5}
.hero[data-mode=day] .hero__paper::before{
  background:radial-gradient(70% 55% at 86% 8%,rgba(255,190,120,.18),rgba(255,190,120,0) 62%),
             radial-gradient(120% 95% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.hero[data-mode=day] .hero__paper::after{opacity:.18}
.hero[data-mode=day] .hero__copy::before{background:linear-gradient(90deg,rgba(7,10,14,.82) 0%,rgba(7,10,14,.6) 55%,rgba(7,10,14,0) 100%)}
.hero[data-mode=day] .hero__title{color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.5)}
.hero[data-mode=day] .hero__title em{color:rgba(255,255,255,.76)}
.hero[data-mode=day] .hero__kicker,.hero[data-mode=day] .hero__sub{color:rgba(255,255,255,.84);text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero[data-mode=day] .hero__foot{color:rgba(255,255,255,.6)}
.hero[data-mode=day] .hero__scroll span{background:linear-gradient(rgba(255,255,255,0),#fff)}
.hero[data-mode=day] .hero__spots button{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.hero[data-mode=day] .hero__spots button small{background:rgba(255,255,255,.16);color:#fff}
.hero[data-mode=day] .w-scene{color:#fff;background:rgba(20,22,28,.6);border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.hero[data-mode=day] .w-scene .ring__track{stroke:rgba(255,255,255,.18)}
.hero[data-mode=day] .w-scene .ring__prog{stroke:#fff}
.hero[data-mode=day] .w-scene small,.hero[data-mode=day] .ring__txt small{color:rgba(255,255,255,.6)}
.hero[data-mode=day] .toggle{background:rgba(255,255,255,.1)}
.hero[data-mode=day] .toggle button{color:rgba(255,255,255,.7)}
.hero[data-mode=day] .toggle button[aria-checked=true]{color:#fff}
.hero[data-mode=day] .hs__label{background:rgba(11,11,11,.72);border-color:rgba(255,255,255,.18)}

/* =========================================================== POSTER HERO */
/* One scene only: the tower is cut from its render and stands on a dark ground,
   with the rooms floating beside it (user's reference). */
.hero{background-color:#0B0F14}
.hero__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(68% 52% at 62% 16%,rgba(120,160,215,.28),rgba(120,160,215,0) 62%),
             radial-gradient(60% 45% at 18% 88%,rgba(255,90,60,.12),rgba(255,90,60,0) 66%),
             radial-gradient(130% 100% at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.72) 100%)}
/* the photo now fills the whole hero — no panel, so there is no edge to blend at all (user) */
.hero__bldg{inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;
  aspect-ratio:auto!important;translate:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;filter:none}
.hero__bldg::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,11,16,.92) 0%,rgba(8,11,16,.72) 32%,rgba(8,11,16,.28) 58%,rgba(8,11,16,.55) 100%),
             linear-gradient(180deg,rgba(8,11,16,.75) 0%,rgba(8,11,16,0) 26%,rgba(8,11,16,0) 62%,rgba(8,11,16,.85) 100%)}
.hero__bldg::after{display:none}
.hero__glow{background:radial-gradient(60% 45% at 74% 18%,rgba(120,160,215,.18),rgba(120,160,215,0) 62%),
            radial-gradient(130% 100% at 50% 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%)}

/* the four rooms float around the tower and lift on hover */
.hero__cards{position:absolute;inset:0;pointer-events:none;z-index:6}
.rcard{position:absolute;left:0;top:0;translate:var(--x,0px) var(--y,0px);width:clamp(170px,15vw,232px);padding:10px 10px 12px;border-radius:14px;pointer-events:auto;
  background:rgba(18,22,28,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 50px rgba(0,0,0,.45);text-align:left;color:#fff;cursor:pointer;
  opacity:0;transform:translateY(26px) scale(.96);
  animation:rcardIn .9s var(--ease-out) calc(1.5s + var(--i) * .16s) forwards;
  transition:translate 1.3s var(--ease-out),transform .55s var(--ease-out),box-shadow .45s,border-color .45s}
.rcard:hover{transform:translateY(-8px) scale(1.03);border-color:rgba(255,255,255,.35);box-shadow:0 34px 70px rgba(0,0,0,.6)}
@keyframes rcardIn{to{opacity:1;transform:none}}
.rcard__img{display:block;border-radius:9px;overflow:hidden;aspect-ratio:4/3}
.rcard__img{position:relative}
.rcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.09);
  transition:opacity .85s var(--ease),transform 1.6s var(--ease-out)}
.rcard__img img.is-on{opacity:1;transform:scale(1)}
.rcard:hover .rcard__img img.is-on{transform:scale(1.07)}
.rcard__t{display:block;padding:10px 4px 0}
.rcard__t b{display:block;font-family:"Inter Tight","Inter",sans-serif;font-weight:400;font-size:16.5px;letter-spacing:-.01em}
.rcard__t small{display:block;margin-top:2px;font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.62)}
@media (max-width:900px){
  .hero__bldg{left:50%;height:52vh}
  /* the copy sits at the foot on a phone, so the picture darkens top-to-bottom,
     not left-to-right — no more black half */
  .hero__bldg::before{background:linear-gradient(180deg,rgba(8,11,16,.72) 0%,rgba(8,11,16,.18) 20%,
    rgba(8,11,16,.08) 44%,rgba(8,11,16,.6) 74%,rgba(8,11,16,.95) 100%) !important}
  .hero__bldg img{object-position:58% center}
  /* these two washed the left edge black on a phone — they run downwards now */
  .hero__shade::before{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%,
    rgba(0,0,0,0) 56%,rgba(0,0,0,.6) 82%,rgba(0,0,0,.85) 100%) !important}
  .hero__copy::before{background:linear-gradient(180deg,rgba(7,10,14,0) 0%,rgba(7,10,14,.5) 38%,
    rgba(7,10,14,.82) 100%) !important}
  .hero__glow{background:radial-gradient(120% 90% at 50% 40%,rgba(120,160,215,.14),rgba(120,160,215,0) 70%)}
  .hero__copy{bottom:6vh}
  .hero__spots{display:none}
  /* on a phone all four rooms are visible at once — no swiping needed (user) */
  .hero__cards{inset:auto 0 30vh 0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 var(--pad)}
  .rcard{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%;padding:7px 7px 9px;border-radius:12px}
  .rcard__img{aspect-ratio:16/9;border-radius:8px}
  .rcard__t small{display:none}
  .rcard__t{padding:7px 2px 0}
  .rcard__t b{font-size:14px}
  .rcard__t small{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){ .rcard{animation:none;opacity:1;transform:none} }

/* which tower is showing — tap a dot, or swipe the hero (mobile) */
.hero__dots{position:absolute;left:50%;bottom:calc(24vh + 92px);translate:-50% 0;z-index:7;display:none;gap:8px}
.hero__dots button{width:26px;height:4px;border-radius:99px;background:rgba(255,255,255,.3);transition:background .35s,width .35s}
.hero__dots button.is-on{background:#fff;width:40px}
.hero__cards{scroll-snap-type:x mandatory}
.rcard{scroll-snap-align:center}
@media (max-width:900px){ .hero__dots{display:flex;bottom:calc(30vh + 152px)} }

/* the tower swap gets the same red-line sweep the scene change used */
.hero__bldg .hero__slide{transition:opacity .9s var(--ease)}
.hero__bldg .hero__slide.is-wiping{opacity:1!important;transition:none!important}

/* the clock card sits under the nav on a phone, clear of the room grid (user) */
@media (max-width:900px){
  .w-scene{top:calc(env(safe-area-inset-top,0px) + 86px)!important;bottom:auto!important;right:var(--pad)!important;z-index:7}
}
/* the card's own transition says enough — no red line on top of it (user) */

/* on a phone the grid keeps its own order — no free positions there */
@media (max-width:900px){ .rcard{translate:none!important} }

/* --------------------------------------------- TRANSITION PACK (user ref: mixkit) */
/* web takes on four of the Premiere transitions: zoom, sideways zoom, static, swipe burn */
.rcard__img{overflow:hidden}
.rcard.fx-zoom .rcard__img img.is-on{animation:fxZoom 1s var(--ease-out) both}
@keyframes fxZoom{from{transform:scale(1.28);filter:blur(7px);opacity:0}60%{opacity:1}to{transform:scale(1);filter:none;opacity:1}}
.rcard.fx-side .rcard__img img.is-on{animation:fxSide .95s var(--ease-out) both}
@keyframes fxSide{from{transform:translateX(38%) scale(1.14);filter:blur(6px);opacity:0}to{transform:none;filter:none;opacity:1}}
.rcard.fx-glitch .rcard__img img.is-on{animation:fxGlitch .8s steps(1,end) both}
@keyframes fxGlitch{
  0%{opacity:0;transform:translateX(-6px) scale(1.08);filter:contrast(1.6) saturate(1.5) hue-rotate(-12deg)}
  15%{opacity:1;transform:translateX(7px) scale(1.06)}
  30%{transform:translateX(-4px) scale(1.04);filter:contrast(1.2) saturate(1.2)}
  45%{transform:translateX(3px) scale(1.02)}
  60%{transform:none;filter:none}
  100%{opacity:1;transform:none;filter:none}}
.rcard.fx-burn .rcard__img img.is-on{animation:fxBurn 1s var(--ease) both}
@keyframes fxBurn{from{opacity:0;filter:brightness(2.1) saturate(.5) blur(3px)}35%{opacity:1}to{opacity:1;filter:none}}
.rcard.fx-burn .rcard__img::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 50%,rgba(255,180,90,.55),rgba(255,90,40,0) 70%);
  animation:fxBurnGlow .9s var(--ease) both}
@keyframes fxBurnGlow{0%{opacity:.9}100%{opacity:0}}
/* Diagonal multicolor: the new picture is revealed behind a slanted colour band (user ref) */
.rcard.fx-diag .rcard__img img.is-on{animation:fxDiag 1s var(--ease) both}
@keyframes fxDiag{
  from{clip-path:polygon(0 0,0 0,-32% 100%,-32% 100%);transform:scale(1.06)}
  to{clip-path:polygon(0 0,145% 0,113% 100%,0 100%);transform:scale(1)}}
.rcard.fx-diag .rcard__img::before{content:"";position:absolute;inset:-25%;z-index:3;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 36%,var(--red) 43%,#ff8a3d 48%,#ffd166 53%,#7dd3fc 58%,#ffffff 63%,rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;transform:translateX(-130%);animation:fxDiagBand 1s var(--ease) both}
@keyframes fxDiagBand{to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){ .rcard[class*=fx-] .rcard__img img.is-on{animation:none} .rcard.fx-diag .rcard__img::before{display:none} }

/* ------------------------------------------------ ROOM COLUMN (never stops) */
.hero__cards{position:absolute;left:auto;right:5.5%;top:calc(26vh + 76px);bottom:11vh;width:clamp(190px,17vw,250px);overflow:hidden;z-index:6;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.rcol__track{display:flex;flex-direction:column;gap:var(--rgap,14px);animation:rcolRun 34s linear infinite;will-change:transform}
@keyframes rcolRun{to{transform:translate3d(0,calc(-1 * var(--rloop,50%)),0)}}
.hero__cards .rcard{position:relative;left:auto;top:auto;translate:none;width:100%;animation:none;opacity:1;transform:none}
.hero__cards .rcard:hover{transform:translateY(-4px) scale(1.02)}
@media (max-width:900px){
  .hero__cards{position:absolute;left:0;right:0;top:auto;bottom:31vh;width:auto;height:auto;overflow:hidden;
    -webkit-mask-image:none;mask-image:none;padding:0 var(--pad)}
  .rcol__track{flex-direction:row;gap:8px;animation:rcolRunX 30s linear infinite}
  @keyframes rcolRunX{to{transform:translate3d(-50%,0,0)}}
  .hero__cards .rcard{flex:0 0 46%;width:46%}
}
@media (prefers-reduced-motion:reduce){ .rcol__track{animation:none} }

/* Scale Bounce on the hero line — a long sentence, so the letters follow each other quickly (user) */
.hero__sub[data-anim=bounce].is-in .ch{animation-duration:.7s;animation-delay:calc(var(--i) * 14ms + 1.45s)}

/* the room name hops in letter by letter every time the card turns over (user) */
.rcard__t .jch{display:inline-block;will-change:transform}
.rcard.is-jump .rcard__t b .jch{animation:bounceUp .62s cubic-bezier(.22,.9,.28,1) both;animation-delay:calc(var(--i) * 26ms)}
.rcard.is-jump .rcard__t small .jch{animation:bounceUp .54s cubic-bezier(.22,.9,.28,1) both;animation-delay:calc(var(--i) * 14ms + .18s)}
@keyframes loopOnOff{
  0%{opacity:0}
  7%{opacity:1;text-shadow:0 0 14px rgba(255,255,255,.55)}
  12%{opacity:0}
  18%{opacity:1}
  24%{opacity:.12}
  30%{opacity:1;text-shadow:0 0 18px rgba(255,255,255,.65)}
  38%{opacity:.35}
  46%{opacity:1}
  100%{opacity:1;text-shadow:none}}
@media (prefers-reduced-motion:reduce){ .rcard .jch{animation:none!important} }

/* the chips take turns going red — one at a time, round and round (user) */
.hero__spots button{opacity:0;animation:chipIn .5s var(--ease-out) both,chipRed 6.4s linear infinite}
.hero__spots button:nth-child(1){animation-delay:1.95s,2.4s}
.hero__spots button:nth-child(2){animation-delay:2.1s,4s}
.hero__spots button:nth-child(3){animation-delay:2.25s,5.6s}
.hero__spots button:nth-child(4){animation-delay:2.4s,7.2s}
@keyframes chipIn{to{opacity:1}}
@keyframes chipRed{
  0%{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 22px rgba(255,0,0,.45)}
  18%{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 22px rgba(255,0,0,.45)}
  26%,100%{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}}
.hero__spots button:hover{animation-play-state:paused;background:var(--red);border-color:var(--red)}
@media (prefers-reduced-motion:reduce){ .hero__spots button{animation:none;opacity:1} }

/* <picture> wrappers must fill the hero like the plain <img> did */
.hero__bldg img{object-position:50% 42%}
@media (max-width:900px){ .hero__bldg img{object-position:56% 46%} }

/* ------------------------------------------------- CARD HERO (user reference) */
/* a rounded panel carries the headline; the building photo sits beside it and
   breaks out over its top edge, the way the reference layout does. */
@media (min-width:901px){
  .hero{--hpad:max(clamp(24px,3vw,56px),(var(--vw,100vw) - var(--maxw)) / 2);background:#0B0F14}
  .hero__stage{inset:12vh var(--hpad) 13vh auto!important;width:min(52%,760px)!important;
    border-radius:28px;overflow:visible;z-index:2}
  /* the picture card starts below the header buttons, not behind them (user) */
  .hero__bldg{inset:0!important;width:100%!important;height:auto!important;border-radius:28px;overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.55)}
  .hero__bldg::before{background:linear-gradient(180deg,rgba(8,11,16,.25) 0%,rgba(8,11,16,0) 35%,rgba(8,11,16,.35) 100%)}
  .hero__glow{opacity:.5}
  .hero__ui{padding:0!important}
  .hero__copy{left:var(--hpad);right:auto;bottom:13vh;top:12vh;width:min(46%,620px);max-width:none;
    display:flex;flex-direction:column;justify-content:center;gap:2px;
    padding:clamp(28px,3.4vw,56px);border-radius:28px;isolation:isolate;
    background:linear-gradient(160deg,#16202c 0%,#0d151d 60%,#0b0f14 100%);
    border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px rgba(0,0,0,.45)}
  .hero__copy::before{inset:0!important;border-radius:28px;background:none!important}
  /* the column runs exactly as tall as the copy panel on the left, so their
     tops and bottoms line up (user) */
  .hero__cards{right:calc(var(--hpad) + 22px);top:var(--rtop,12vh);bottom:13vh;height:auto;
    width:var(--rcw,clamp(150px,11.5vw,182px))}
  .hero__cards .rcard{padding:8px 8px 10px}
  .hero__cards .rcard__img{aspect-ratio:16/9}
  .hero__cards .rcard__t{padding:7px 3px 0}
  .hero__cards .rcard__t b{font-size:15px}
  .hero__cards .rcard__t small{font-size:10.5px;margin-top:1px}
  /* the clock sits well below the header buttons, left of the card column (user) */
  .w-scene{top:calc(var(--hpad) + 108px)!important;
    right:calc(var(--hpad) + 40px + var(--rcw,170px))!important}
  .hero__foot{left:calc(var(--hpad) + 4px);right:calc(var(--hpad) + 4px)}
}

/* ============================================================
   BUILT TOGETHER — services on a ring around one picture
   (from the user's ZAREA reference, in Nemcon's own language)
   ============================================================ */
.bt{position:relative;padding:clamp(48px,5.4vw,80px) var(--pad) clamp(40px,4.6vw,68px);
  background:radial-gradient(120% 70% at 50% 0%,#16171b 0%,#0d0e11 52%,var(--shade-1) 100%);overflow:hidden}
.bt .eyebrow{justify-content:center}
.bt__h{text-align:center;margin-top:14px;font-size:clamp(30px,4.4vw,62px);line-height:1.04}
.bt__h b{font-weight:inherit;color:var(--red)}
.bt__sub{max-width:52ch;margin:12px auto 0;text-align:center;font-size:clamp(14px,1.1vw,16px);line-height:1.7;color:var(--muted)}

.bt__ring{--R:clamp(190px,22vw,300px);--cx:60%;position:relative;height:calc(var(--R) * 2.02);
  margin:clamp(40px,5vw,72px) auto 0;max-width:1100px}
.bt__arcs{position:absolute;left:var(--cx);top:50%;width:calc(var(--R) * 2.08);height:calc(var(--R) * 2.08);
  transform:translate(-50%,-50%);overflow:visible}
.bt__arcs .a{stroke:rgba(255,255,255,.14);stroke-width:1.2;transition:stroke .45s,stroke-width .45s;stroke-dasharray:700;stroke-dashoffset:700;
  animation:btDraw 1.5s var(--ease-out) forwards;animation-delay:calc(var(--i) * 140ms)}
.bt__ring:not(.is-in) .bt__arcs .a{animation-play-state:paused}
@keyframes btDraw{to{stroke-dashoffset:0}}
.bt__arcs .a.is-on{stroke:rgba(255,0,0,.62);stroke-width:2}
.bt__orbit{stroke:rgba(255,0,0,.35);stroke-width:1;stroke-dasharray:3 14;
  animation:btSpin 34s linear infinite;transform-origin:200px 200px}
@keyframes btSpin{to{transform:rotate(360deg)}}

/* the picture in the middle changes with whichever service you point at */
.bt__core{position:absolute;left:var(--cx);top:50%;width:calc(var(--R) * .92);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 12px rgba(255,255,255,.02),0 40px 90px rgba(0,0,0,.6)}
.bt__core img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);
  transition:opacity .8s var(--ease-out),transform 1.4s var(--ease-out)}
.bt__core img.is-on{opacity:1;transform:none}
.bt__ray{position:absolute;inset:0;background:linear-gradient(200deg,rgba(255,255,255,.16),transparent 45%);
  mix-blend-mode:screen;pointer-events:none}

.bt__labs{position:absolute;inset:0;pointer-events:none}
.bt__lab{position:absolute;top:calc(50% + var(--R) * var(--sin));left:calc(var(--cx) - var(--R) * var(--cos));
  transform:translate(-100%,-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;pointer-events:auto;
  padding:9px 14px 9px 9px;border-radius:999px;border:1px solid transparent;background:transparent;
  opacity:0;animation:btLab .7s var(--ease-out) forwards;animation-delay:calc(.35s + var(--i) * 90ms);
  transition:border-color .35s,background .35s,transform .5s var(--ease-out)}
.bt__ring:not(.is-in) .bt__lab{animation-play-state:paused}
@keyframes btLab{from{opacity:0;transform:translate(-100%,-50%) translateX(-14px)}
  to{opacity:1;transform:translate(-100%,-50%)}}
.bt__lab .bt__txt{font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.76);transition:color .3s}
.bt__ic{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);transition:background .35s,border-color .35s}
.bt__ic .ico,.bt__ic svg{width:15px;height:15px}
.bt__lab:hover,.bt__lab.is-on{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.bt__lab:hover .bt__txt,.bt__lab.is-on .bt__txt{color:#fff}
.bt__lab:hover .bt__ic,.bt__lab.is-on .bt__ic{background:var(--red);border-color:var(--red)}

.bt__pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,34px);
  max-width:1100px;margin:clamp(44px,5vw,78px) auto 0}
.bt__p{text-align:center;padding:0 6px}
.bt__p .bt__ic{margin:0 auto 14px;width:44px;height:44px}
.bt__p .bt__ic .ico,.bt__p .bt__ic svg{width:18px;height:18px}
.bt__p b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.bt__p small{display:block;margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--muted)}

@media (max-width:1100px){ .bt__ring{--R:clamp(180px,26vw,240px);--cx:62%} .bt__lab .bt__txt{font-size:12px} }
@media (max-width:900px){
  /* on a phone the picture sits on its own and the services read as a list under it */
  .bt__ring{height:auto;display:block;margin-top:34px}
  .bt__arcs{display:none}
  .bt__core{position:relative;left:auto;top:auto;transform:none;margin:0 auto;width:min(62vw,270px);
    box-shadow:0 0 0 10px rgba(255,255,255,.03),0 26px 60px rgba(0,0,0,.6)}
  .bt__labs{position:static;display:block;margin-top:28px;pointer-events:auto}
  .bt__lab{position:static;transform:none;animation:none;opacity:1;justify-content:flex-start;width:100%;
    padding:11px 8px;border-bottom:1px solid var(--hair);border-radius:0}
  .bt__lab:first-child{border-top:1px solid var(--hair)}
  .bt__pillars{grid-template-columns:repeat(2,1fr);text-align:left}
  .bt__p{text-align:left}
  .bt__p .bt__ic{margin:0 0 12px}
}
@media (prefers-reduced-motion:reduce){
  .bt__arcs .a{animation:none;stroke-dashoffset:0} .bt__orbit{animation:none} .bt__lab{animation:none;opacity:1}
}


/* ============================================================
   PROJECTS BOARD — the six projects wired to one dashboard
   (board backdrop rendered in Blender: assets/img/hero/board-bg.jpg)
   ============================================================ */

.pb{position:relative;overflow:hidden;background:var(--light-2);color:var(--ink)}
.pb__bg{position:absolute;inset:0;background:url(assets/img/hero/board-bg-light.jpg) center/cover no-repeat;opacity:1}
.pb__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(54% 48% at 50% 50%,rgba(246,245,241,.95) 0%,rgba(246,245,241,.6) 48%,transparent 80%)}
.pb::before{content:"";position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 40%,rgba(226,35,26,.02),transparent 76%)}
/* the board itself: thick pipes far away, sharp traces up close */
.pb__far,.pb__far path{fill:none;stroke:rgba(255,255,255,.1);stroke-width:14;stroke-linecap:round}
.pb__far path.r{stroke:rgba(226,35,26,.22);stroke-width:18}
@keyframes v7flow{to{stroke-dashoffset:-280}}
.pb__dot{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(226,35,26,.5),transparent 70%);filter:blur(6px)}

.pb__plate{position:relative;z-index:3;width:max-content;margin:0 auto;padding:13px 30px;border-radius:12px;
  border:1px solid rgba(226,35,26,.5);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--red);background:rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(11,11,11,.06)}
.pb__plate::before,.pb__plate::after{content:"";position:absolute;top:-5px;bottom:-5px;width:16px;
  border:1px solid rgba(226,35,26,.8)}
.pb__plate::before{left:-5px;border-right:0;border-radius:6px 0 0 6px}
.pb__plate::after{right:-5px;border-left:0;border-radius:0 6px 6px 0}

.pb__board{position:relative;z-index:2;max-width:1240px;margin:clamp(26px,3.4vw,50px) auto 0;aspect-ratio:16/11;
  perspective:1400px}

/* the dashboard in the middle */
.pb__mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;z-index:4;
  border-radius:20px;overflow:hidden;border:1px solid rgba(11,11,11,.08);background:#fff;
  box-shadow:0 40px 90px rgba(11,11,11,.16),0 4px 14px rgba(11,11,11,.06)}
.pb__mid figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--light-3)}
.pb__mid figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.03);
  transition:opacity .7s var(--ease),transform 1.6s var(--ease)}
.pb__mid figure img.on{opacity:1;transform:none}
.pb__mid figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.06) 0%,transparent 30%,transparent 100%)}
.pb__tag{position:absolute;z-index:2;left:12px;top:12px;display:flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(11,11,11,.08);color:var(--ink);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.pb__tag s{width:6px;height:6px;border-radius:50%;background:var(--red);text-decoration:none;
  box-shadow:0 0 10px rgba(226,35,26,.9);animation:v7blink 2.4s ease-in-out infinite}
@keyframes v7blink{50%{opacity:.35}}
.pb__mid__b{padding:16px 18px 20px}
.pb__mid h3{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(22px,2vw,29px);line-height:1.05}
.pb__mid .ar{display:block;margin-top:4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.pb__tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
.pb__t{padding:10px 11px;border-radius:11px;border:1px solid var(--ink-hair);background:var(--light-3)}
.pb__t span{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
.pb__t b{display:block;margin-top:5px;font-size:14px;font-weight:400}
.pb__foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.pb__foot a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--ink-hair);letter-spacing:.1em;transition:background .3s,border-color .3s,color .3s}
.pb__foot a:hover{background:var(--red);border-color:var(--red);color:#fff}

/* the six project chips floating over the board */
.pbn{position:absolute;width:16%;padding:9px;border-radius:15px;cursor:pointer;z-index:3;
  border:1px solid rgba(11,11,11,.07);background:#fff;
  box-shadow:0 20px 44px rgba(11,11,11,.13),0 2px 8px rgba(11,11,11,.05);
  animation:v7float 7s ease-in-out infinite;animation-delay:calc(var(--k) * -1.1s);
  transition:border-color .4s,box-shadow .5s}
@keyframes v7float{50%{translate:0 -9px}}
/* the float only starts once the chip has arrived */
.pbn{animation-play-state:paused}
.pbn.is-in{animation-play-state:running}
.pbn:hover,.pbn.on{border-color:rgba(226,35,26,.65);
  box-shadow:0 26px 58px rgba(11,11,11,.18),0 0 0 3px rgba(226,35,26,.08)}
.pbn figure{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--light-3)}
.pbn figure img{width:100%;height:100%;object-fit:contain}
.pbn figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.14) 0%,transparent 26%)}
.pbn em{position:absolute;z-index:2;right:8px;top:7px;font-style:normal;font-size:9px;letter-spacing:.18em;
  color:rgba(255,255,255,.95)}
.pbn b{display:block;margin-top:9px;font-size:12.5px;font-weight:400}
.pbn i{display:block;margin-top:2px;font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted)}
.pbn[data-pb="0"]{left:1.5%;top:0}
.pbn[data-pb="1"]{left:1.5%;top:50%;margin-top:-13%}
.pbn[data-pb="2"]{left:1.5%;bottom:0}
.pbn[data-pb="3"]{right:1.5%;top:0}
.pbn[data-pb="4"]{right:1.5%;top:50%;margin-top:-13%}
.pbn[data-pb="5"]{right:1.5%;bottom:0}

@media (max-width:900px){
  .pb__board{aspect-ratio:auto;display:grid;gap:12px;grid-template-columns:1fr 1fr;perspective:none}
    .pb{padding-bottom:calc(clamp(64px,7vw,110px) + 78px)}
  .pb__mid{position:static;transform:none;width:auto;grid-column:1 / -1;order:-1}
  .pb__mid figure{aspect-ratio:4/3}
  .pbn{position:static !important;width:auto;margin:0 !important;animation:none}
  /* the plate has to fit the screen, so it reads smaller and may wrap */
  .pb__plate{max-width:100%;white-space:normal;text-align:center;padding:10px 18px;
    font-size:10px;letter-spacing:.16em;line-height:1.5}
}
@media (max-width:420px){
  .pb__plate{font-size:9px;letter-spacing:.11em;padding:9px 13px}
}
@media (prefers-reduced-motion:reduce){
  .pbn{animation:none}
}

/* the card numbers and captions read dark on the light board */
.pbn b{color:var(--ink)}
.pbn em{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pb__mid h3{color:var(--ink)}
.pb__t b{color:var(--ink)}
/* the section needs the site's own rhythm around it */
.pb{padding:clamp(70px,8vw,120px) var(--pad) clamp(64px,7vw,110px)}
.pb__board{max-width:min(1240px,100%)}


/* ============================================================
   HOW IT WORKS — the section pins while the three steps arrive in turn
   ============================================================ */
.hw{position:relative;height:500vh;background:#151515}
.hw__stick{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto 1fr auto;
  gap:clamp(10px,2vh,22px);padding:clamp(74px,10vh,120px) var(--pad) clamp(30px,5vh,56px);overflow:hidden}
.hw__top{text-align:center}
.hw__h{font-size:clamp(30px,4.6vw,62px);line-height:1.02;color:#fff}
.hw__sub{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.6)}

.hw__stage{position:relative;min-height:0}
.hw__photo{position:absolute;left:50%;top:0;height:100%;width:min(52%,560px);transform:translateX(-50%);
  border-radius:18px;overflow:hidden;margin:0}
/* the pictures stack; a new one falls in from above over the old one */
.hw__photo img{position:absolute;left:0;top:0;width:100%;height:115%;object-fit:cover;
  translate:0 calc(var(--p,0) * -12%);will-change:transform}
.hw__photo img.hw-drop{z-index:2;animation:hwDrop .78s cubic-bezier(.2,1.12,.3,1) both}
@keyframes hwDrop{from{transform:translateY(-106%)}to{transform:translateY(0)}}

/* the six step cards are dropped in from above, one at a time, and settle
   with a small bounce — the way the reference film lands them */
.hw__c{position:absolute;width:min(300px,27%);padding:clamp(14px,1.3vw,19px);border-radius:18px;
  background:#fff;color:var(--ink);box-shadow:0 26px 60px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-150%) rotate(var(--spin,-12deg));
  transition:opacity .35s var(--ease-out)}
.hw__c--1{left:1.5%;top:6%;--tilt:-5deg;--spin:-16deg;background:var(--red);color:#fff}
.hw__c--2{right:1.5%;top:10%;--tilt:4deg;--spin:14deg}
.hw__c--3{left:2%;top:36%;--tilt:3deg;--spin:12deg}
.hw__c--4{right:3%;top:40%;--tilt:-4deg;--spin:-13deg}
.hw__c--5{left:3%;bottom:4%;--tilt:-2deg;--spin:10deg}
.hw__c--6{right:3%;bottom:4%;--tilt:3deg;--spin:-11deg}
.hw__c.is-on{opacity:1;animation:hwFall .95s cubic-bezier(.22,.9,.28,1) both}
.hw__c.is-past{opacity:.5}
@keyframes hwFall{
  0%{transform:translateY(-150%) rotate(var(--spin,-12deg)) scale(1.04)}
  58%{transform:translateY(4%) rotate(calc(var(--tilt,0deg) * 1.5)) scale(.99)}
  74%{transform:translateY(-4%) rotate(calc(var(--tilt,0deg) * .6)) scale(1.01)}
  88%{transform:translateY(1.5%) rotate(calc(var(--tilt,0deg) * 1.12)) scale(1)}
  100%{transform:translateY(0) rotate(var(--tilt,0deg)) scale(1)}
}
.hw__c h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(19px,2vw,26px);line-height:1.1}
.hw__c p{margin-top:8px;font-size:12px;line-height:1.6;color:rgba(11,11,11,.62)}
.hw__c--1 p{color:rgba(255,255,255,.85)}
.hw__c a{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:12.5px;font-weight:500}
.hw__c a .ico,.hw__c a svg{width:13px;height:13px}
.hw__rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12)}
.hw__rail i{display:block;height:100%;width:0;background:var(--red);transition:width .4s var(--ease-out)}

@media (max-width:900px){
  /* on a phone the picture stays put while the steps drop in below it */
  .hw{height:auto}
  .hw__stick{position:static;height:auto;padding:60px var(--pad) 40px;overflow:visible}
  /* one step per screen: a tall gap keeps a single card under the picture */
  .hw__stage{position:static;display:flex;flex-direction:column;gap:clamp(200px,34vh,340px);margin-top:20px}
  .hw__c:last-child{margin-bottom:6vh}
  .hw__photo{position:sticky;left:auto;transform:none;top:72px;z-index:3;width:100%;height:30vh;min-height:200px;
    border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45)}
  .hw__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;translate:none}
  .hw__c{position:static;z-index:1;width:100%;opacity:0;transform:none}
  .hw__c.is-on{opacity:1;animation:hwFallM .8s cubic-bezier(.22,.9,.28,1) both}
  .hw__c.is-past{opacity:1}
  .hw__rail{display:none}
}
@keyframes hwFallM{
  0%{opacity:0;transform:translateY(-70px) rotate(var(--spin,-8deg)) scale(1.02)}
  62%{opacity:1;transform:translateY(5px) rotate(calc(var(--tilt,0deg) * .7))}
  84%{transform:translateY(-2px) rotate(calc(var(--tilt,0deg) * .3))}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hw__c{opacity:1;transform:none !important;animation:none !important} .hw__pulse{animation:none}
  .hw__photo img.hw-drop{animation:none}
}

/* ============================================================
   THE FUTURE — the word runs on forever behind the pill photo,
   and the photo grows a little as the section comes up (new design)
   ============================================================ */
.fut{position:relative;padding:clamp(70px,11vh,120px) var(--pad) clamp(56px,8vh,90px);
  background:var(--light-1);color:var(--ink);overflow:hidden;transition:background .9s var(--ease)}
.fut__top{display:flex;gap:clamp(24px,5vw,70px);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.fut__h{flex:1 1 420px;max-width:19ch;font-size:clamp(30px,4.4vw,62px);letter-spacing:-.03em;line-height:1.04}
.fut__side{flex:0 1 380px;max-width:38ch}
.fut__side p{font-size:13px;line-height:1.75;color:var(--ink-muted)}
.fut__btn{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:13px 24px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:13px;transition:background .3s,transform .4s var(--ease-out),box-shadow .4s}
.fut__btn:hover{background:var(--red);transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,0,0,.28)}
.fut__btn .ico{width:14px;height:14px}

/* the stage is tall enough for the whole pill, so nothing gets clipped */
.fut__stage{position:relative;margin-top:clamp(34px,5vh,64px);display:grid;place-items:center;
  min-height:clamp(290px,29vw,400px)}
.fut__marq{display:flex;width:100%;grid-area:1/1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fut__track{display:flex;flex:0 0 auto;align-items:center;animation:futRun 26s linear infinite}
/* the running word is the footer's wordmark, with the footer's own life:
   the letters fill in behind a red line that sweeps left and right */
.fut__mark{position:relative;display:inline-block;white-space:nowrap;
  font-family:"Nemcon N","Saira Extra Condensed","Agency FB","Inter Tight",sans-serif;font-weight:800;
  font-size:clamp(54px,9.5vw,118px);line-height:.8;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.6px rgba(11,11,11,.4);
  animation:futFill 7s ease-in-out infinite}
.fut__mark::after{content:attr(data-text);position:absolute;inset:0;color:var(--ink);-webkit-text-stroke:0;
  clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0)}
.fut__mark::before{content:"";position:absolute;left:var(--fill,6%);top:6%;bottom:6%;width:2px;
  background:var(--red);box-shadow:0 0 18px rgba(255,0,0,.55)}
@keyframes futFill{0%{--fill:4%}50%{--fill:97%}100%{--fill:4%}}
/* each word starts a beat later, so the sweep travels along the line */
.fut__track span:nth-of-type(2){animation-delay:-1.15s}
.fut__track span:nth-of-type(3){animation-delay:-2.3s}
.fut__track span:nth-of-type(4){animation-delay:-3.45s}
.fut__track span:nth-of-type(5){animation-delay:-4.6s}
.fut__track span:nth-of-type(6){animation-delay:-5.75s}
.fut__track i{display:block;width:clamp(30px,4vw,62px)}
@keyframes futRun{to{transform:translateX(-100%)}}

/* three pills sit over the word and ease up to full size while you scroll in —
   each one can be pushed around with the cursor, like the clock in the hero */
.fut__pill{position:absolute;left:50%;top:50%;width:clamp(196px,18vw,262px);margin:0;z-index:2;
  border-radius:999px;box-shadow:0 30px 70px rgba(11,11,11,.28);
  transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) + var(--urot,0deg)))
            scale(calc((.88 + var(--fp,0) * .12) * var(--uscale,1)))}
.fut__pill img{width:100%;height:clamp(250px,27vw,360px);object-fit:cover;pointer-events:none;
  border-radius:999px}
/* the next picture fades in over the one showing */
.fut__pill .fut__fade{position:absolute;left:0;top:0;z-index:2;opacity:0;scale:1.06;
  transition:opacity .6s var(--ease-out),scale .8s var(--ease-out)}
.fut__pill .fut__fade.is-on{opacity:1;scale:1}
/* four cards, spread across the word with alternating heights */
.fut__pill--a{left:40%}
.fut__pill--b{left:12%;top:32%;--rot:-7deg;width:clamp(112px,9.8vw,146px);z-index:3}
.fut__pill--d{left:66%;top:26%;--rot:5deg;width:clamp(112px,9.8vw,146px);z-index:3}
.fut__pill--c{left:88%;top:70%;--rot:-6deg;width:clamp(112px,9.8vw,146px);z-index:3}
.fut__pill--b img,.fut__pill--c img,.fut__pill--d img{height:clamp(146px,14.4vw,200px)}

@media (max-width:760px){
  .fut__h{max-width:none}
  .fut__pill{width:min(56%,210px)}
  .fut__pill img{height:250px}
  .fut__pill--a{left:46%}
  .fut__pill--b{left:14%;top:20%;width:88px}
  .fut__pill--d{left:80%;top:26%;width:88px}
  .fut__pill--c{left:26%;top:82%;width:88px}
  .fut__pill--b img,.fut__pill--c img,.fut__pill--d img{height:116px}
}
@media (prefers-reduced-motion:reduce){
  .fut__track{animation:none}
  .fut__pill{transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) + var(--urot,0deg))) scale(var(--uscale,1))}
}

/* ============================================================
   PROJECT SHEETS — the 2nd section: six launch sheets drifting from
   right to left, each set like a printed sheet — the picture, the
   ribbon, the fact bar and the visiting-hours strip.
   ============================================================ */
.ps{position:relative;padding:clamp(64px,8vh,112px) 0 clamp(56px,7vh,96px);
  background:var(--light-2);color:var(--ink);overflow:hidden}
.ps__head,.ps__foot{padding:0 var(--pad)}
.ps__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(20px,3vh,34px)}
.ps .eyebrow{color:rgba(11,11,11,.55)}
.ps__note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,11,.42)}

/* ---- the moving rail ---- */
.ps__rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ps__track{display:flex;width:max-content;animation:psRun 64s linear infinite}
/* It does NOT stop under the cursor (user). The rail used to pause on
   hover so a card could be clicked standing still; she wants the drift
   unbroken, so the pause is gone. Each card is still a link and still
   clickable while it moves; only prefers-reduced-motion stops the rail,
   further down. */
.ps__set{--gap:clamp(14px,1.8vw,26px);display:flex;gap:var(--gap);padding-right:var(--gap)}
@keyframes psRun{to{transform:translateX(-50%)}}

.ps__poster{position:relative;flex:0 0 auto;container-type:inline-size;display:flex;flex-direction:column;
  /* three across the standard column, so three sheets are in view at once */
  width:clamp(240px,calc((min(var(--vw,100vw),var(--maxw)) - 2 * var(--gap,20px)) / 3),440px);
  border-radius:clamp(16px,1.5vw,22px);overflow:hidden;
  background:#0b0b0b;color:#fff;outline:1px solid rgba(255,255,255,.07);outline-offset:-1px;
  box-shadow:0 1px 2px rgba(11,11,11,.3),0 14px 30px rgba(11,11,11,.18),0 40px 80px rgba(11,11,11,.22);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.ps__poster:hover{transform:translateY(-9px);
  box-shadow:0 2px 4px rgba(11,11,11,.34),0 20px 44px rgba(11,11,11,.24),0 60px 120px rgba(11,11,11,.3)}
/* the light a printed sheet catches along its top edge */
.ps__poster::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 18%)}

/* ---- the picture ---- */
.ps__stage{position:relative;flex:0 0 auto;aspect-ratio:1/1;overflow:hidden;background:#0b0b0b}
/* the whole building shows on a plain dark panel — nothing blurred at the sides */
.ps__stage::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#191a1e,#0b0b0c)}
.ps__pic{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transition:scale 1.4s var(--ease-out),filter .6s var(--ease-out)}
.ps__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,20,.34),rgba(6,10,20,0) 30%,rgba(6,10,20,0) 62%,rgba(6,10,20,.4))}
.ps__poster:hover .ps__pic{scale:1.04;filter:blur(3.5px) brightness(.8) saturate(.96)}

/* the corner tab, as on the reference sheet */
.ps__tab{position:absolute;left:0;top:0;z-index:4;display:flex;flex-direction:column;gap:2px;
  padding:9px 16px 11px 14px;background:#fff;border-radius:0 0 16px 0;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.ps__tab small{font-size:7.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(11,11,11,.45)}
.ps__tab img{height:clamp(16px,1.7vw,22px);width:auto}

/* ---- ribbon, fact bar, strip ---- */
/* the red band reads like a ticker — the line keeps running across it */
.ps__ribbon{position:relative;display:flex;overflow:hidden;padding:8px 0;
  background:linear-gradient(180deg,#ff2b21,#d60000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25)}
.ps__tick{display:flex;flex:0 0 auto;animation:psTick 16s linear infinite}
.ps__ribbon b{flex:0 0 auto;padding:0 1.6em;white-space:nowrap;
  font-size:clamp(8.5px,2.2cqw,10.5px);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff}
@keyframes psTick{to{transform:translateX(-50%)}}
.ps__poster:hover .ps__tick{animation-play-state:paused}
.ps__bar{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;
  flex:1 1 auto;align-content:center;padding:clamp(11px,1.3vw,15px) clamp(13px,1.6vw,18px);
  background:linear-gradient(180deg,#131315,#0a0a0b)}
.ps__id{flex:1 1 100%;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.1)}
.ps__id small{display:block;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ps__id b{display:block;margin-top:2px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(17px,1.5vw,23px);line-height:1.05}
.ps__facts{display:grid;flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(10px,1.2vw,16px)}
.ps__facts dt{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ps__facts dd{margin-top:4px;font-size:clamp(11px,.95vw,13px);line-height:1.3;
  font-variant-numeric:tabular-nums lining-nums}
.ps__go{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:11px;
  letter-spacing:.04em;white-space:nowrap;transition:background .3s,border-color .3s,letter-spacing .4s var(--ease-out)}
.ps__poster:hover .ps__go{letter-spacing:.09em}
.ps__go:hover{background:var(--red);border-color:var(--red)}
.ps__go .ico{width:12px;height:12px}
.ps__strip{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 12px;
  background:#08080a;border-top:1px solid rgba(255,255,255,.07);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ps__strip span{color:var(--red)}

/* the caption wakes up under the cursor */
.ps__poster:hover .ps__id small{animation:psUp .5s var(--ease-out) both}
.ps__poster:hover .ps__id b{animation:psUp .55s var(--ease-out) .05s both}
.ps__poster:hover .ps__facts div:nth-child(1){animation:psUp .5s var(--ease-out) .12s both}
.ps__poster:hover .ps__facts div:nth-child(2){animation:psUp .5s var(--ease-out) .18s both}
@keyframes psUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* a narrow sheet lays its bar out in two rows */
@container (max-width:470px){
  .ps__bar{gap:9px 12px}
  .ps__facts{flex:1 1 100%}
  .ps__go{flex:1 1 100%;justify-content:center}
  .ps__strip{font-size:8.5px;letter-spacing:.12em}
}

/* ---- footer line ---- */
.ps__foot{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;
  margin-top:clamp(18px,2.6vh,30px)}
.ps__no{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,11,.5)}
.ps__no b{font-size:15px;color:var(--ink)}
.ps__all{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(11,11,11,.7);transition:color .3s}
.ps__all:hover{color:var(--red)}
.ps__all .ico{width:14px;height:14px}

@media (max-width:760px){
  .ps__poster{width:min(62vw,258px)}
}
@media (prefers-reduced-motion:reduce){
  .ps__track,.ps__tick{animation:none}
  .ps__rail{overflow-x:auto}
  .ps__poster:hover .ps__id small,.ps__poster:hover .ps__id b,
  .ps__poster:hover .ps__facts div{animation:none}
}

/* ── credential plates in the trust row ─────────────────────────────
   The REHAB mark is striped blue and would disappear on this black, so
   it sits on a white plate in its own colours rather than being
   recoloured. RAJUK has no membership mark — the emblem on rajuk.gov.bd
   is the national emblem of Bangladesh, which is not ours to borrow — so
   it is set in the site's own type at the same size. */
.bt__plate{display:inline-flex;align-items:center;justify-content:center;
  height:44px;min-width:44px;padding:0 13px;margin:0 auto 14px;
  border-radius:12px;background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .4s var(--ease-out),box-shadow .4s}
.bt__plate img{display:block;height:20px;width:auto}
.bt__plate--word{font-family:"Inter Tight",Inter,sans-serif;font-weight:600;
  font-size:15px;letter-spacing:.14em;color:var(--red)}
.bt__p:hover .bt__plate{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.45)}
@media (max-width:900px){ .bt__plate{margin:0 0 12px} }

/* REHAB's full logo is a solid blue block with its own white type, so it
   needs no white plate behind it — the block itself is the plate. */
.bt__plate--logo{background:none;padding:0;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.bt__plate--logo img{height:44px}
/* RAJUK: the round official emblem plus the name, on the white plate. */
.bt__plate--rajuk{gap:8px;padding:0 14px 0 4px}
.bt__plate--rajuk img{height:40px}
.bt__plate--rajuk span{font-family:"Inter Tight",Inter,sans-serif;font-weight:600;font-size:15px;letter-spacing:.14em;color:#0b6b3a}