/* Shared header: the reference's full-width, quiet navigation and compact brand. */
.masthead,.masthead.scrolled{top:0;left:0;right:0;width:100%;padding:0;display:block;border:0;border-bottom:1px solid transparent;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .7s,border-color .7s,box-shadow .7s}
.masthead-inner{height:88px;max-width:1600px;margin:auto;padding:0 48px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.masthead.scrolled{background:#0b0b0ae6;border-bottom-color:#efebe21a;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.masthead:hover,.masthead:focus-within,.masthead.scrolled:hover{background:#15140ff2;border-color:#ffd00059;box-shadow:0 8px 45px #ffd0000b}
.masthead nav{gap:36px;font-size:12.48px;letter-spacing:.14em;font-weight:600}
.masthead nav a{color:#efebe299;transition:color .4s}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--color-bone)}
.masthead nav a[aria-current]:after{transform:scaleX(1)}
.masthead nav .nav-cta{color:var(--color-bone);border:1px solid #efebe240;padding:10px 20px;font-size:11.52px;border-radius:40px;white-space:nowrap}
.masthead nav .nav-cta:after{display:none}.masthead nav .nav-cta:hover{color:var(--color-void)}
.brand,.brand.original-brand{display:inline-flex;align-items:center;gap:12px;padding:0;background:none;color:var(--color-bone);flex-shrink:0}
.brand .brand-mark{height:34px;width:24.48px;overflow:visible;flex-shrink:0}
.brand-mark path{fill:var(--color-bone);transition:fill .5s ease}
.brand:hover .mark-yellow,.brand:focus-visible .mark-yellow{fill:var(--color-yellow)}
.brand:hover .mark-coral,.brand:focus-visible .mark-coral{fill:var(--color-coral)}
.brand-wordmark{display:flex;flex-direction:column;gap:7px;line-height:1}
.brand .brand-wordmark strong{font-family:var(--label);font-size:16px;font-weight:400;letter-spacing:.3em;line-height:1}
.brand .brand-wordmark small{font-family:var(--label);font-size:6px;font-weight:400;letter-spacing:.18em;line-height:1;margin:0;color:#efebe299}
.site-footer .brand{margin:0 0 10px}.site-footer .brand-mark{height:45px;width:32.4px}
.site-footer .brand-wordmark strong{font-size:20px}.site-footer .brand-wordmark small{font-size:7px}
.site-menu{padding-top:130px}
.menu-toggle{font-family:var(--label);font-size:10px;letter-spacing:.15em}
.hero-cinema[data-project=grand-central-mall] .hero-layer>img{object-position:58% center}
.hero-cinema[data-project=grand-central-mall]:before{content:'';position:absolute;inset:0 0 auto;height:190px;background:linear-gradient(#0b0b0a99,transparent);z-index:2;pointer-events:none}
.hero-cinema[data-project=grand-central-mall] .hero-layer:after{background:linear-gradient(90deg,#0b0b0ab8 0%,#0b0b0a42 44%,#0b0b0a05 80%),linear-gradient(0deg,#0b0b0a 0%,transparent 40%)}
body[data-page=about] .hero-cinema{height:82svh;min-height:600px}
body[data-page=about] .team-intro{padding-block:85px}

/* The founders form a single pinned scene. Without motion, the same content is a
   readable series of three complete profiles. Each wheel or touch gesture completes one scene. */
.founder-experience{position:relative;background:var(--color-void);color:var(--color-bone);isolation:isolate}
.founder-pin{position:relative;isolation:isolate;overflow:hidden}
.founder-scene{position:relative;isolation:isolate;min-height:850px;height:100svh;overflow:hidden}
.founder-backdrop{position:absolute;inset:0;z-index:-2;background:#242321;overflow:hidden}
.founder-backdrop img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:saturate(.7);object-position:center}
.founder-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0a12 0%,#0b0b0a14 38%,#0b0b0a80 59%,#0b0b0acd 100%),linear-gradient(0deg,#0b0b0abf,transparent 40%)}
.founder-frame{position:absolute;z-index:1;left:2.4vw;top:19%;width:47.5%;height:59%;background:#111310;clip-path:polygon(0 0,100% 0,100% 75%,var(--notch,64%) 75%,var(--notch,64%) 100%,0 100%);pointer-events:none}
.founder-frame>span:first-child{position:absolute;top:26px;left:28px;font-family:var(--label);font-size:10px;letter-spacing:.15em;line-height:1.8;text-transform:uppercase;color:#efebe2b3;z-index:1}
.founder-track{position:absolute;left:28px;right:28px;top:67%;height:1px;background:#efebe233}
.founder-track i{display:block;height:100%;background:var(--color-bone);transform:scaleX(0);transform-origin:left}
.founder-frame-index{position:absolute;bottom:28%;left:28px;font-family:var(--label);font-size:10px;letter-spacing:.13em}
.founder-cutout{position:absolute;z-index:2;left:0;bottom:-3%;width:56%;height:84%;transform-origin:center bottom;pointer-events:none}
.founder-cutout img{height:100%;width:100%;max-width:none;object-fit:contain;object-position:center bottom;filter:grayscale(1) drop-shadow(0 12px 28px #0004);transition:filter .85s;pointer-events:auto}
.founder-cutout:hover img,.founder-scene:focus-within .founder-cutout img{filter:grayscale(0) drop-shadow(0 12px 28px #0004)}
.founder-narrative{position:absolute;z-index:3;left:59%;right:5%;top:30%;max-width:640px}
.founder-discipline.kicker{color:var(--color-coral);font-size:10px;letter-spacing:.15em;margin-bottom:24px}
.founder-name{font-size:clamp(36px,4vw,72px);line-height:1.05;max-width:600px;margin:0 0 20px;text-wrap:balance}
.founder-position{font-size:12px;color:#efebe2a6;line-height:1.65;max-width:340px;margin-bottom:30px}
.founder-intro{font-size:clamp(15px,1.24vw,19px);line-height:1.75;max-width:460px;color:#efebe2e6}
.founder-actions{display:flex;gap:24px;align-items:center;margin-top:28px;flex-wrap:wrap}
.founder-actions button{background:none;border:0;border-bottom:1px solid #efebe259;color:inherit;padding:8px 0;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.founder-actions .link-line{font-size:10px;letter-spacing:.08em}
.founder-scene-note{position:absolute;z-index:3;bottom:115px;left:59%;right:5%;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#efebe266;pointer-events:none}
.founder-switcher{position:absolute;z-index:5;left:59%;right:5%;bottom:37px;display:flex;gap:16px;border-top:1px solid #efebe240;padding-top:18px}
.founder-switcher button{display:flex;flex-direction:column;gap:6px;text-align:left;background:none;border:0;padding:3px 0;color:#efebe280;flex:1;font-size:10px;line-height:1.45;transition:color .3s;min-height:44px}
.founder-switcher button>span:first-child{font-family:var(--label);font-size:10px;letter-spacing:.16em}
.founder-switcher button[aria-pressed=true],.founder-switcher button:hover{color:var(--color-yellow)}
.founder-skip{position:absolute;left:3.7vw;bottom:36px;z-index:5;font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:20px;padding:10px 0;text-shadow:0 1px 6px #000}
.founder-skip span{font-size:20px}.founder-scroll-hint{position:absolute;z-index:5;left:59%;top:125px;font-family:var(--label);font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:#efebe299}
.founder-dialog{pointer-events:auto;color:var(--color-bone);background:#15140f;border:1px solid #efebe240;padding:60px;width:min(760px,90vw);max-height:85svh;overflow-y:auto;overscroll-behavior:contain}
.founder-dialog::backdrop{background:#0b0b0acc;backdrop-filter:blur(12px)}
.founder-dialog h2{font-size:clamp(28px,3vw,48px);margin:30px 0}
.founder-dialog>p:not(.kicker){font-size:16px;line-height:1.85;color:#efebe2bf}
.founder-dialog-close{display:block;margin:0 0 35px auto;border:0;border-bottom:1px solid #efebe266;background:none;color:inherit;font-size:12px;padding:5px 0 7px}
.founder-dialog-close span{font-size:20px;margin-left:25px}
.founders-animated{height:440svh}
.founders-animated .founder-pin{position:sticky;top:0;height:100svh;min-height:650px}
.founders-animated .founder-scenes,.founders-animated .founder-scene{position:absolute;inset:0;height:100%;min-height:0}
.founders-animated .founder-scene{overflow:visible;isolation:auto;pointer-events:none}
.founders-animated .founder-backdrop{z-index:0}

.founders-animated .founder-narrative{pointer-events:none}
.founders-animated .founder-scene.is-current .founder-narrative{pointer-events:auto}
.founders-animated .founder-scene:not(.is-current) .founder-cutout img{pointer-events:none}

.founder-experience:not(.founders-animated) .founder-frame,.founder-experience:not(.founders-animated) .founder-switcher,.founder-experience:not(.founders-animated) .founder-scroll-hint,.founder-experience:not(.founders-animated) .founder-skip{display:none}
.founder-experience:not(.founders-animated) .founder-scene:before{content:'';position:absolute;left:2.4vw;top:19%;width:47.5%;height:59%;background:#111310;z-index:-1;clip-path:polygon(0 0,100% 0,100% 75%,64% 75%,64% 100%,0 100%)}
.brand-signature{background:#151512;color:#fff;padding:90px 6vw;display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:12vw}
.brand-signature .kicker{color:#ffffffb3;font-size:9px;margin-bottom:35px}
.brand-signature .kicker:before{background:var(--color-coral)}
.signature-logo{position:relative}
.brand-signature img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
.signature-logo:after{content:'';position:absolute;inset:0;background:url('/assets/buildx-colour-signature.png') center/100% 100% no-repeat;clip-path:inset(0 72% 0 0);pointer-events:none}
.signature-logo:has([data-edited]) img{filter:none}
.signature-logo:has([data-edited]):after{display:none}
.brand-signature>p{font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 600;font-size:clamp(19px,2.1vw,34px);line-height:1.35;text-transform:uppercase}
.brand-signature>p>span{display:block;font-family:Manrope,sans-serif;font-size:13px;margin-top:23px;text-transform:none;font-variation-settings:normal;color:#ffffffb3}
@media(min-width:1600px){.masthead-inner{padding-inline:64px}.founder-narrative{right:7%}}
@media(max-width:1100px){.masthead-inner{padding-inline:32px;gap:20px}.masthead nav{gap:22px;font-size:11px;letter-spacing:.1em}.masthead nav .nav-cta{font-size:10px;padding:10px 16px}.founder-name{font-size:3.6vw}.founder-narrative{left:58%;right:4%}.founder-position{margin-bottom:20px}.founder-actions{gap:12px}.founder-scene-note,.founder-switcher,.founder-scroll-hint{left:58%;right:4%}.founder-actions .link-line{font-size:9px}}
@media(max-width:1023px){.masthead nav{display:none}.menu-toggle{display:block}.masthead-inner{height:76px}.brand .brand-mark{height:30px;width:21.6px}.brand .brand-wordmark strong{font-size:14px}.brand .brand-wordmark small{font-size:5px}}
@media(max-width:760px){
 .masthead-inner{height:76px;padding:0 6vw}.brand .brand-wordmark strong{font-size:14px}.brand .brand-wordmark small{font-size:5px;letter-spacing:.12em}
 .menu-toggle{font-size:9px}.menu-toggle span{font-size:19px;margin-left:12px}
 body[data-page=about] .hero-cinema{height:80svh;min-height:590px}body[data-page=about] .team-intro{padding-block:60px}
 .hero-cinema[data-project=grand-central-mall] .hero-layer>img{object-position:55% center}
 .hero-cinema[data-project=grand-central-mall] .hero-layer:after{background:linear-gradient(90deg,#0b0b0a88,#0b0b0a22),linear-gradient(0deg,#0b0b0a,transparent 65%)}
 .founders-animated{height:400svh}.founders-animated .founder-pin{min-height:0}
 .founder-scene{min-height:850px;height:110svh}
 .founder-backdrop:after{background:linear-gradient(0deg,#0b0b0af5 0%,#0b0b0acf 36%,#0b0b0a05 73%,#0b0b0a66)}
 .founder-frame{left:5vw;top:14%;width:77%;height:38%;clip-path:polygon(0 0,100% 0,100% 73%,var(--notch,64%) 73%,var(--notch,64%) 100%,0 100%)}
 .founder-frame>span:first-child{top:15px;left:17px;font-size:7px;letter-spacing:.12em}
 .founder-track{left:17px;right:17px;top:64%}.founder-frame-index{left:17px;font-size:8px;bottom:30%}
 .founder-cutout{left:14%;width:80%;height:47%;bottom:45%;mask-image:linear-gradient(#000 89%,transparent)}
 .founder-cutout img{object-position:center bottom}
 .founder-narrative{left:6vw;right:6vw;top:54%;max-width:none}
 .founder-discipline.kicker{font-size:8px;letter-spacing:.14em;margin-bottom:12px}
 .founder-name{font-size:7.3vw;line-height:1.05;margin-bottom:11px;text-wrap:initial}
 .founder-position{font-size:10px;line-height:1.45;margin-bottom:15px;max-width:100%}
 .founder-intro{font-size:13px;line-height:1.65;max-width:100%}
 .founder-actions{margin-top:15px;gap:22px}.founder-actions .link-line{font-size:9px;letter-spacing:.07em;padding:6px 0}
 .founder-scene-note{display:none}.founder-scroll-hint{top:92px;left:6vw;right:6vw;font-size:7px}
 .founder-switcher{left:6vw;right:6vw;bottom:18px;gap:15px;padding-top:12px}
 .founder-switcher button{font-size:8px;gap:5px}.founder-switcher button>span:first-child{font-size:8px}
 .founder-skip{top:91px;bottom:auto;left:auto;right:6vw;font-size:7px;gap:10px;padding:0}
 .founder-skip span{font-size:13px}.founder-scroll-hint{max-width:50%}
 .founder-dialog{padding:26px;width:91vw;max-height:86svh}.founder-dialog h2{font-size:27px}.founder-dialog>p:not(.kicker){font-size:14px}
 .founder-experience:not(.founders-animated) .founder-scene:before{left:5vw;top:12%;width:77%;height:38%}
 .founder-experience:not(.founders-animated) .founder-narrative{top:54%}
 .brand-signature{padding:55px 7vw;grid-template-columns:1fr;gap:35px}.brand-signature .kicker{font-size:8px;margin-bottom:20px}.brand-signature>p{font-size:21px}
}
@media(max-width:760px) and (max-height:760px){
 .founder-scroll-hint,.founder-skip{top:86px}.founder-frame{top:17%;height:32%}.founder-cutout{height:40%;bottom:48%}
 .founder-narrative{top:51%}.founder-name{font-size:6.5vw;margin-bottom:9px}.founder-discipline.kicker{margin-bottom:9px}.founder-position{margin-bottom:11px;font-size:9px}
 .founder-intro{font-size:12px;line-height:1.55}.founder-actions{margin-top:10px}.founder-switcher{bottom:10px;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.brand-mark path,.founder-cutout img{transition:none}.founder-cutout img{filter:none}.founder-experience{height:auto}.founder-pin{position:relative;height:auto}}

/* Stable layers: only opacity and small transforms animate. Never swap stacking mid-flight. */
.founders-animated .founder-scene{visibility:hidden}
.founders-animated .founder-scene.is-current,.founders-animated .founder-scene.is-incoming{visibility:visible}
.founders-animated .founder-backdrop,.founders-animated .founder-cutout,.founders-animated .founder-narrative{opacity:0}
.founders-animated .is-current .founder-backdrop,.founders-animated .is-current .founder-cutout,.founders-animated .is-current .founder-narrative{opacity:1}
.founders-animated .founder-cutout{z-index:2}
.founders-animated .is-incoming .founder-cutout{z-index:3}
.founders-animated .founder-narrative{z-index:4}
.founders-animated .founder-scene-note{visibility:hidden}
.founders-animated .is-current .founder-scene-note{visibility:visible}
.founders-animated.is-transitioning .founder-scene-note{visibility:hidden}
.founders-animated.is-transitioning .founder-cutout img,.founders-animated.is-transitioning .founder-narrative{pointer-events:none}
.founders-animated.is-transitioning .founder-backdrop,.founders-animated.is-transitioning .founder-cutout,.founders-animated.is-transitioning .founder-narrative{will-change:transform,opacity}
.founders-animated .founder-cutout img{filter:grayscale(1);transition:filter .6s}
.founders-animated .founder-cutout:hover img,.founders-animated .founder-scene:focus-within .founder-cutout img{filter:grayscale(0)}
.founders-animated.is-transitioning .founder-cutout img{filter:grayscale(1);transition:none}
.founders-animated .founder-track i{transition:transform .4s ease}

/* Real staff portraits in the wider-team grid (replaced the placeholder slots). */
.slot-portrait .team-member-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;z-index:1;filter:grayscale(1);transition:filter .6s ease}
.team-slot:hover .slot-portrait .team-member-image,.team-slot:focus-within .slot-portrait .team-member-image{filter:grayscale(0)}
@media (prefers-reduced-motion:reduce){.slot-portrait .team-member-image{transition:none}}

/* ---- Founders: portrait rises, then the copy reveals line by line. ------- */
/* Only in the stacked layout; the pinned sequence drives its own scenes.     */
.founder-experience:not(.founders-animated) .founder-cutout.reveal-ready{opacity:0;transform:translateY(58px) scale(.985);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.founder-experience:not(.founders-animated) .founder-cutout.reveal-ready.is-visible{opacity:1;transform:none}
.founder-experience:not(.founders-animated) .founder-narrative .reveal-ready{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .95s var(--ease)}
.founder-experience:not(.founders-animated) .founder-narrative .reveal-ready.is-visible{opacity:1;transform:none}
.founder-experience:not(.founders-animated) .founder-discipline.reveal-ready{transition-delay:.28s}
.founder-experience:not(.founders-animated) .founder-name.reveal-ready{transition-delay:.38s}
.founder-experience:not(.founders-animated) .founder-position.reveal-ready{transition-delay:.48s}
.founder-experience:not(.founders-animated) .founder-intro.reveal-ready{transition-delay:.58s}
.founder-experience:not(.founders-animated) .founder-actions.reveal-ready{transition-delay:.70s}
/* Never hold a scene back while the pinned sequence is in charge. */
.founders-animated .founder-cutout.reveal-ready,.founders-animated .founder-narrative .reveal-ready{opacity:1;transform:none;transition:none;transition-delay:0s}

/* ---- Founders: scenes hold still and are wiped away (Likova reference). --- */
/* Earlier founders stack on top and lose height from the bottom edge as the   */
/* page scrolls, uncovering the next one. Scrolling back restores them.        */
.founders-animated .founder-scene{visibility:visible;will-change:clip-path;transform:none}
.founders-animated .founder-backdrop{opacity:1}
.founders-animated .founder-pin{overflow:hidden}

/* The clip reveal needs every founder fully painted: the scene above is wiped
   away to uncover the one beneath, so a hidden neighbour would reveal nothing. */
.founders-animated .founder-narrative,.founders-animated .founder-cutout{opacity:1}

/* The black panel must sit behind the founder, never over them. Giving the
   scene its own stacking context pins the order: backdrop 0, panel 1,
   cut-out 2, copy 4 - instead of letting z-index:-1 escape behind the image. */
.founders-animated .founder-scene{isolation:isolate}
.founders-animated .founder-scene:before{z-index:1}
.founders-animated .founder-backdrop{z-index:0}
.founders-animated .founder-cutout{z-index:2}
.founders-animated .founder-narrative{z-index:4}

/* The black panel belongs to each founder and sits behind them, rather than
   being one shared panel floating over the whole stage. The shared frame keeps
   the label, progress track and counter, but stops painting a box of its own
   and rides above every scene so the counter is never buried. */
.founders-animated .founder-frame{background:transparent;z-index:5}
.founders-animated .founder-scene:before{content:'';position:absolute;z-index:1;left:2.4vw;top:19%;width:47.5%;height:59%;background:#111310;clip-path:polygon(0 0,100% 0,100% 75%,var(--notch,64%) 75%,var(--notch,64%) 100%,0 100%);pointer-events:none}
@media(max-width:760px){.founders-animated .founder-scene:before{left:5vw;top:14%;width:77%;height:38%;clip-path:polygon(0 0,100% 0,100% 73%,var(--notch,64%) 73%,var(--notch,64%) 100%,0 100%)}}
@media(max-width:760px) and (max-height:760px){.founders-animated .founder-scene:before{top:17%;height:32%}}

/* The progress line and counter belong at the foot of the panel, not across
   its middle. They sit inside the solid lower-left block, so the panel's notch
   trims the line where the shape steps in. */
.founders-animated .founder-track{top:auto;bottom:58px}
.founders-animated .founder-frame-index{bottom:26px}
@media(max-width:760px){
  .founders-animated .founder-track{top:auto;bottom:38px}
  .founders-animated .founder-frame-index{bottom:16px}
}
@media(max-width:760px) and (max-height:760px){
  .founders-animated .founder-track{bottom:32px}
  .founders-animated .founder-frame-index{bottom:13px}
}

/* The progress line lives inside each founder's scene and sits behind them,
   so the person passes in front of it instead of being crossed by it. One
   element carries both the faint track and the filled portion via a hard
   gradient stop, driven by --fill from the scroll position. */
.founders-animated .founder-track{display:none}
.founders-animated .founder-scene:after{content:'';position:absolute;z-index:1;left:28px;right:28px;bottom:58px;height:1px;pointer-events:none;background:linear-gradient(90deg,var(--color-bone) 0 var(--fill,0%),#efebe233 var(--fill,0%) 100%)}
@media(max-width:760px){.founders-animated .founder-scene:after{left:17px;right:17px;bottom:38px}}
@media(max-width:760px) and (max-height:760px){.founders-animated .founder-scene:after{bottom:32px}}

/* Build credit in the footer's bottom row. */
.footer-credit{white-space:nowrap}