/* Front view: one immersive scene, based on the supplied composition. */
.front-reference{background:#0e100f}
.front-reference .site-nav{color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);border-color:transparent}
.front-reference .site-nav.nav-scrolled{background:rgba(12,14,13,.8);border-color:rgba(255,255,255,.14)}
.front-reference .nav-brand img{filter:invert(1)}
.front-reference .desktop-nav a{color:rgba(255,255,255,.72)}
.front-reference .desktop-nav a:hover,.front-reference .desktop-nav a.is-active{color:#fff}
.front-reference .desktop-nav a::after{background:#fff}
.front-reference .nav-contact{border-color:rgba(255,255,255,.38);color:#fff}
.front-reference .nav-contact:hover{background:#fff;color:#111}
.front-reference .nav-menu span{background:#fff}
.front-reference .hero{display:block;min-height:100dvh;padding:0;background:#111;isolation:isolate;overflow:hidden}
.front-reference .hero-reel{position:absolute;inset:0;width:auto;height:auto;min-height:0;border-radius:0!important;box-shadow:none;background:#0b0d0c}
.front-reference .hero-reel::before{border:0;background:linear-gradient(90deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,.2) 42%,rgba(0,0,0,.36) 100%)}
.front-reference .hero-slide::after{background:linear-gradient(180deg,rgba(2,4,3,.4) 0%,transparent 29%,rgba(0,0,0,.42) 100%)}
.front-reference .hero-slide img{filter:saturate(.58) brightness(.74) contrast(1.12);transform:scale(1.035)}
.front-reference .hero-slide.is-active img{filter:saturate(.7) brightness(.8) contrast(1.1);transform:scale(1)}
.front-reference .hero-glow,.front-reference .hero-wordmark,.front-reference .hero-overlay{display:none}
.front-reference .hero-copy{position:absolute;z-index:5;top:clamp(158px,18vh,228px);right:clamp(52px,8vw,152px);bottom:auto;left:auto;width:min(40vw,620px);max-width:none;color:#fff;text-align:left}
.front-reference .hero .eyebrow{margin:0 0 22px;color:rgba(255,255,255,.72);font-size:10px}
.front-reference .hero h1{max-width:7ch;font-size:clamp(66px,6.9vw,104px);font-weight:600;line-height:.94;letter-spacing:-.04em;text-shadow:0 3px 34px rgba(0,0,0,.28)}
.front-reference .hero h1 em{color:#fff;font-weight:600;letter-spacing:-.04em}
.front-reference .hero-intro{max-width:26ch;margin-top:24px;color:rgba(255,255,255,.78);font-size:clamp(17px,1.35vw,21px);line-height:1.22}
.front-reference .hero-copy>.primary-link{display:none}
.front-reference .hero-progress{position:absolute;z-index:5;right:clamp(52px,8vw,152px);bottom:clamp(228px,26vh,285px);display:grid;width:min(40vw,620px);grid-template-columns:auto 1fr auto;gap:13px;align-items:center;color:#fff;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.03em;text-shadow:0 2px 18px rgba(0,0,0,.42)}
.front-reference .hero-progress i{height:1px;background:rgba(255,255,255,.68)}
.front-reference .hero-controls{z-index:6;top:auto;right:clamp(52px,8vw,152px);bottom:clamp(193px,22vh,244px);gap:8px}
.front-reference .hero-controls button{width:32px;height:32px;border-color:rgba(255,255,255,.62);color:#fff}
.front-reference .hero-controls button.is-active,.front-reference .hero-controls button:hover,.front-reference .hero-controls button:focus-visible{background:#fff;color:#121312;transform:scale(1.05)}
.front-reference .hero-project-card{position:absolute;z-index:5;right:clamp(52px,8vw,152px);bottom:clamp(40px,5vh,76px);display:grid;width:min(40vw,620px);grid-template-columns:clamp(128px,12vw,178px) minmax(0,1fr) 42px;gap:16px;align-items:center;padding:11px 14px 11px 11px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(38,44,41,.74);color:#fff;box-shadow:0 22px 48px rgba(0,0,0,.28);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);transition:transform 220ms cubic-bezier(.23,1,.32,1),background-color 180ms ease}
.front-reference .hero-project-card:hover{background:rgba(32,36,33,.88);transform:translateY(-3px)}
.front-reference .hero-project-card:focus-visible{outline:2px solid #fff;outline-offset:4px}
.front-reference .hero-project-card img{width:100%;height:112px;border-radius:10px;object-fit:cover}
.front-reference .hero-project-card__copy{display:grid;gap:7px;min-width:0}
.front-reference .hero-project-card small{color:rgba(255,255,255,.72);font-family:var(--sans);font-size:8px;font-weight:800;letter-spacing:.08em}
.front-reference .hero-project-card strong{font-size:clamp(22px,2vw,30px);font-weight:650;line-height:.9;letter-spacing:-.04em}
.front-reference .hero-project-card em{color:rgba(255,255,255,.74);font-size:12px;font-style:normal;line-height:1.2}
.front-reference .hero-project-card>b{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:#fff;color:#111;font-size:19px;font-weight:400;transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.front-reference .hero-project-card:hover>b{transform:translate(2px,-2px)}
.front-reference .hero-meta{z-index:5;right:auto;bottom:clamp(36px,5vh,70px);left:clamp(32px,5vw,74px);width:auto;color:rgba(255,255,255,.63)}
.front-reference .hero-meta span:last-child{display:none}
.front-reference .work-card--featured figure>figcaption{opacity:0;transform:translateY(10px)}
.front-reference .work-card:hover figure>figcaption,.front-reference .work-card:focus-visible figure>figcaption{opacity:1;transform:none}
.front-reference .work{min-height:100dvh;padding-top:clamp(70px,7vw,108px)!important;padding-bottom:clamp(62px,7vw,110px)!important}
.front-reference .work-header{max-width:min(52vw,720px)!important;margin-bottom:clamp(30px,4vw,58px)!important}
.front-reference .work-header h2{font-size:clamp(68px,6.6vw,112px)!important;line-height:.78!important;letter-spacing:-.04em!important}
.front-reference .work-header>p:last-child{font-size:16px!important;line-height:1.25!important}
.front-reference .work-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:minmax(430px,calc(100dvh - 410px))!important;gap:10px!important;align-items:stretch!important}
.front-reference .work-card,.front-reference .work-card--featured,.front-reference .work-card--tower,.front-reference .work-card--middle,.front-reference .work-card--edge,.front-reference .work-card--wide{grid-column:auto!important;grid-row:auto!important}
.front-reference .work-card figure,.front-reference .work-card:not(.work-card--featured):not(.work-card--wide) figure{height:100%!important;min-height:0!important}
.front-reference .work-card figure>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.front-reference .work-card,.front-reference .hero-project-card,.front-reference .hero-controls button{transition-duration:.42s!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important}
.front-reference .work-card figure img{transition-duration:1.4s!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important}
@media (max-width:850px){
  .front-reference .site-nav{background:linear-gradient(180deg,rgba(0,0,0,.56),transparent)!important;height:68px!important}
  .front-reference .site-nav.nav-scrolled{height:62px!important;background:rgba(12,14,13,.82)!important}
  .front-reference .hero{display:block!important;position:relative!important;min-height:max(720px,100dvh)!important;overflow:hidden!important;padding:0!important}
  .front-reference .hero-reel{position:absolute!important;inset:0!important;order:initial!important;width:auto!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;border-radius:0!important}
  .front-reference .hero-reel::before{background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,.32) 36%,rgba(0,0,0,.78) 100%)}
  .front-reference .hero-copy{position:absolute!important;inset:auto!important;top:max(116px,calc(env(safe-area-inset-top) + 88px))!important;right:20px!important;bottom:auto!important;left:20px!important;order:initial!important;width:auto!important;padding:0!important;color:#fff}
  .front-reference .hero .eyebrow{margin-bottom:15px;color:rgba(255,255,255,.78);font-size:11px;line-height:1.2}
  .front-reference .hero h1{max-width:7ch;font-size:clamp(46px,13.8vw,60px);line-height:.91;letter-spacing:-.04em}
  .front-reference .hero h1 span,.front-reference .hero h1 em{color:#fff!important;opacity:1!important;letter-spacing:-.04em}
  .front-reference .hero-intro{max-width:25ch;margin-top:16px;padding:12px 14px;border-left:1px solid rgba(255,55,40,.84);border-radius:12px;background:rgba(12,14,13,.34);color:rgba(255,255,255,.9)!important;font-size:16px;line-height:1.22;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
  .front-reference .hero .eyebrow,.front-reference .hero-progress{display:none!important}
  .front-reference .hero-controls{top:auto!important;right:20px!important;bottom:145px!important;left:auto!important;gap:8px!important}
  .front-reference .hero-controls button{width:35px!important;height:35px!important;font-size:11px}
  .front-reference .hero-project-card{right:14px;bottom:max(16px,calc(12px + env(safe-area-inset-bottom)));left:14px;width:auto;grid-template-columns:102px minmax(0,1fr) 36px;gap:12px;padding:9px;border-radius:14px;background:rgba(17,19,18,.86)}
  .front-reference .hero-project-card img{height:94px;border-radius:9px}
  .front-reference .hero-project-card__copy{gap:5px}
  .front-reference .hero-project-card small{font-size:11px;line-height:1.1}
  .front-reference .hero-project-card strong{font-size:21px;line-height:.92}
  .front-reference .hero-project-card em{font-size:10px;line-height:1.16}
  .front-reference .hero-project-card>b{width:34px;height:34px;font-size:17px}
  .front-reference .hero-meta{display:none}
  .front-reference .work-card figure::after{z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.2) 38%,rgba(0,0,0,.52) 100%)!important;opacity:1!important}
  .front-reference .work-number{display:none!important}
  .front-reference .work-card figure>figcaption,.front-reference .work-card:not(.work-card--featured) figure>figcaption{position:absolute!important;z-index:4!important;right:10px!important;bottom:10px!important;left:10px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important;min-height:112px!important;padding:16px 16px 15px!important;align-content:end!important;background:linear-gradient(180deg,rgba(14,15,14,.82),rgba(14,15,14,.68))!important;color:#fff!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:0 18px 45px rgba(0,0,0,.22)!important;backdrop-filter:blur(18px) saturate(124%)!important;-webkit-backdrop-filter:blur(18px) saturate(124%)!important}
  .front-reference .work-card figure>figcaption small{grid-column:1/-1!important;color:rgba(255,255,255,.7)!important;font-size:11px!important;line-height:1.22!important;letter-spacing:.04em!important}
  .front-reference .work-card figure>figcaption h3{grid-column:1!important;margin:0!important;color:#fff!important;font-size:clamp(34px,10.2vw,43px)!important;font-weight:700!important;line-height:.82!important;letter-spacing:-.04em!important;text-shadow:0 3px 20px rgba(0,0,0,.34)!important}
  .front-reference .work-card figure>figcaption b{grid-column:2!important;grid-row:2!important;display:grid!important;width:38px!important;height:38px!important;place-items:center!important;align-self:end!important;border-radius:50%!important;background:rgba(255,255,255,.92)!important;color:#111!important;font-size:19px!important;line-height:1!important}
  .front-reference .work-card:active figure>figcaption{transform:scale(.985)!important}
  .front-reference .work{min-height:auto!important;padding-top:74px!important;padding-bottom:84px!important}
  .front-reference .work-header{max-width:none!important;margin-bottom:28px!important}
  .front-reference .work-header h2{font-size:clamp(46px,13.6vw,60px)!important;letter-spacing:-.04em!important}
  .front-reference .work-grid{grid-template-columns:1fr!important;grid-template-rows:none!important;gap:18px!important}
  .front-reference .work-card,.front-reference .work-card--featured,.front-reference .work-card--tower,.front-reference .work-card--middle,.front-reference .work-card--edge,.front-reference .work-card--wide{grid-column:1!important;grid-row:auto!important}
  .front-reference .work-card figure,.front-reference .work-card:not(.work-card--featured):not(.work-card--wide) figure{height:auto!important;min-height:0!important;aspect-ratio:4/5!important}
}
@media (max-width:380px){
  .front-reference .hero h1{font-size:clamp(44px,13.5vw,52px)}
  .front-reference .hero-intro{font-size:15px}
  .front-reference .hero-project-card{grid-template-columns:84px minmax(0,1fr) 32px}
  .front-reference .hero-project-card img{height:88px}
  .front-reference .hero-project-card strong{font-size:18px}
  .front-reference .hero-project-card em{font-size:9px}
  .front-reference .hero-project-card>b{width:30px;height:30px}
}
@media (hover:none),(pointer:coarse){.front-reference .hero-project-card:hover{transform:none;background:rgba(22,26,24,.78)}.front-reference .hero-project-card:active{transform:scale(.985);background:rgba(32,36,33,.88)}}
@media (prefers-reduced-motion:reduce){.front-reference .hero-project-card{transition:none}.front-reference .hero-slide img{transform:none!important}}