@font-face{font-family:'CALIFORNIA';src:url('/fonts/CALIFORNIA.ttf') format('truetype');font-display:swap}
:root{
  --bg:#f7f7f7; --ink:#111; --muted:#686868; --coral:#f26964; --dark:#1e1e1d;
  --title:'CALIFORNIA',sans-serif; --body:'Jost','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
@media (max-width:1100px){html{font-size:16px}}
@media (max-width:700px){html{font-size:15px}}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-weight:300;line-height:1.45;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
figure{margin:0}

/* header */
.hdr{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:1.7rem 3.2rem 0;pointer-events:none}
.hdr>*{pointer-events:auto}
.logo img{width:3.4rem;height:auto;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover img{transform:rotate(-12deg) scale(1.08)}
.nav{display:flex;gap:2.2rem;font-family:var(--title);font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;padding-top:.6rem}
.nav a{position:relative;padding:.2rem 0}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-.1rem;height:2px;background:currentColor;transition:right .35s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.home .hdr,.proj .hdr{color:#fff;mix-blend-mode:difference}
.home .hdr .logo img,.proj .hdr .logo img{filter:invert(1)}
.burger{display:none;color:inherit;background:none;border:0;width:2.4rem;height:2rem;padding:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
@media (max-width:820px){
  .hdr{padding:1.1rem 1.1rem 0}
  .logo img{width:2.8rem}
  .burger{display:flex}
  .nav{position:fixed;inset:0;background:var(--bg);color:var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:2rem;font-size:1.7rem;transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);padding:0}
  body.menu-open .nav{transform:none}
  body.menu-open .hdr{mix-blend-mode:normal;color:var(--ink)}
  body.menu-open .burger span:nth-child(1){transform:translateY(.9rem) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-.9rem) rotate(-45deg)}
  body.menu-open .logo img{filter:none!important}
}

/* home cover */
.cover{position:relative;height:100vh;min-height:36rem;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cover-vid{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;opacity:.4;will-change:transform}
.cover-text{position:relative;z-index:2;padding:0 11rem;text-align:center;color:#fff}
.cover-text p{font-family:var(--title);font-size:4.05rem;line-height:1.1;margin:0;text-transform:uppercase;text-wrap:balance}
@media (max-width:1100px){.cover-text{padding:0 3rem}.cover-text p{font-size:3.2rem}}
@media (max-width:700px){.cover-text{padding:0 1.2rem}.cover-text p{font-size:2.3rem}}
.arrow{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);width:3rem;color:#fff;z-index:2;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,.5rem)}}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:calc(100vw * 9 / 16 / 6);grid-auto-flow:dense;gap:0;background:var(--bg)}
.tile{position:relative;grid-column:span 4;grid-row:span 2;overflow:hidden;background:#111;display:block}
.tile.w8{grid-column:span 8;grid-row:span 4}.tile.w6{grid-column:span 6;grid-row:span 3}.tile.w4{grid-column:span 4;grid-row:span 2}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile video{opacity:0;transition:opacity .4s}
.tile.playing video{opacity:1}
.tile::after{content:'';position:absolute;inset:0;background:#000;opacity:0;transition:opacity .4s}
.tile:hover::after,.tile.playing::after{opacity:.35}
.tile .meta{position:absolute;left:0;bottom:0;z-index:2;padding:2.2rem;display:flex;flex-direction:column;gap:.15rem;transform:translateX(-1.2rem);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.tile:hover .meta,.tile.playing .meta{transform:none;opacity:1}
.tile .t{font-family:var(--title);font-size:1.67rem;color:#fff;line-height:1.05}
.tile .c{font-size:1.1rem;color:var(--coral);font-weight:400}
@media (max-width:820px){
  .grid{grid-auto-rows:calc(100vw * 9 / 16 / 2)}
  .tile,.tile.w8,.tile.w6,.tile.w4{grid-column:span 6;grid-row:span 1}
}
@media (max-width:560px){
  .grid{grid-auto-rows:calc(100vw * 9 / 16)}
  .tile,.tile.w8,.tile.w6,.tile.w4{grid-column:span 12;grid-row:span 1}
  .tile .meta{opacity:1;transform:none;padding:1.2rem}
  .tile::after{opacity:.25;background:linear-gradient(transparent 40%,rgba(0,0,0,.7))}
}

/* project pages */
.project{padding-top:6rem}
.sec{width:100%}
.sec.grid-sec{padding-left:3.9rem;padding-right:3.9rem}
.row{display:flex;flex-wrap:wrap;width:100%}
.col{flex:0 0 100%;max-width:100%;min-width:0}
.col.w10{flex-basis:83.333%;max-width:83.333%}
.col.w8{flex-basis:66.666%;max-width:66.666%}
.col.w6{flex-basis:50%;max-width:50%}
.col.w4{flex-basis:33.333%;max-width:33.333%}
.col.w3{flex-basis:25%;max-width:25%}
.vid{width:100%;background:#000;aspect-ratio:16/9;overflow:hidden}
.vid video{width:100%;height:100%;object-fit:cover}
.ptitle{font-family:var(--title);font-weight:400;font-size:3.9rem;line-height:1;margin:0 0 1.2rem;text-transform:uppercase}
.stitle{font-family:var(--title);font-weight:400;font-size:1.67rem;line-height:1.2;margin:0;text-transform:uppercase}
.body{font-size:1.11rem;line-height:1.5;margin:0 0 .8rem;max-width:62rem}
.credits{font-size:.9rem;line-height:1.7;color:var(--muted);text-align:center;margin:3rem 0 0;font-weight:400}
.social{display:flex;justify-content:center;gap:.6rem;padding:1.2rem 0}
.social a{width:1.7rem;height:1.7rem;padding:.25rem;color:var(--muted);transition:color .3s}
.social a:hover{color:var(--coral)}
.social svg{width:100%;height:100%;fill:currentColor}
.ggrid{display:grid;gap:0}
.ggrid.cols2{grid-template-columns:repeat(2,1fr)}
.ggrid.cols3{grid-template-columns:repeat(3,1fr)}
.ggrid.cols4{grid-template-columns:repeat(4,1fr)}
.ggrid.gap{gap:.6rem}
.ggrid figure{overflow:hidden;background:#e9e9e9;aspect-ratio:16/9}
.ggrid img,.ggrid video{width:100%;height:100%;object-fit:cover}
figure.loop video{width:100%;height:auto;display:block}
.img img{width:100%}
.pn{display:flex;justify-content:space-between;padding:3rem 3.9rem 4rem;font-family:var(--title);font-size:1.2rem;text-transform:uppercase}
.pn a{transition:color .3s}.pn a:hover{color:var(--coral)}
@media (max-width:820px){
  .project{padding-top:4.5rem}
  .sec.grid-sec{padding-left:1.2rem;padding-right:1.2rem}
  .col.w10,.col.w8,.col.w6,.col.w4,.col.w3{flex-basis:100%;max-width:100%}
  .ptitle{font-size:2.6rem}
  .ggrid.cols3,.ggrid.cols4{grid-template-columns:repeat(2,1fr)}
  .pn{padding:2rem 1.2rem 3rem;font-size:1rem}
}
@media (max-width:560px){.ggrid.cols2,.ggrid.cols3,.ggrid.cols4{grid-template-columns:1fr}}

/* slider */
.slider{position:relative;overflow:hidden;background:#000}
.slider .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slider .track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start}
.slide img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.sbtn{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#111;font-size:1.8rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .3s}
.slider:hover .sbtn{opacity:1}
.sbtn.prev{left:1rem}.sbtn.next{right:1rem}

/* before / after */
.ba{position:relative;overflow:hidden;user-select:none;aspect-ratio:16/9;background:#000}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;width:50%;overflow:hidden}
.ba-before img{width:100vw;max-width:none}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;pointer-events:none;z-index:2}
.ba-handle::after{content:'‹ ›';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-size:1.1rem;letter-spacing:-.1em}

/* design page */
.design{padding-top:6rem}
.dhero{display:flex}.dhero .col{flex:0 0 50%;max-width:50%}
.dhero .vid{aspect-ratio:16/9}
.dintro{display:flex;gap:3rem;align-items:flex-start;padding:2.8rem 4.2rem 2.2rem}
.dintro h1{flex:0 0 50%;font-family:var(--title);font-weight:400;font-size:3rem;line-height:1;margin:0;text-transform:uppercase}
.dintro p{flex:1;font-size:1.35rem;line-height:1.45;margin:.2rem 0 0}
.dgrid{padding-top:1rem}
@media (max-width:820px){
  .design{padding-top:4.5rem}
  .dhero{flex-wrap:wrap}.dhero .col{flex-basis:100%;max-width:100%}
  .dintro{flex-direction:column;gap:1rem;padding:2rem 1.2rem 1.5rem}
  .dintro h1{font-size:2.2rem}.dintro p{font-size:1.1rem}
}

/* about */
.about{padding-top:6rem;min-height:80vh}
.arow{display:flex;padding:1.1rem 1.5rem 3rem;gap:2rem;align-items:flex-start}
.arow .col{flex:0 0 50%;max-width:50%}
.atext{padding:1rem 2.5rem 0 0}
.atext h1{font-family:var(--title);font-weight:400;font-size:3.2rem;line-height:1;margin:0 0 1.4rem;text-transform:uppercase}
.atext p{font-size:1.11rem;line-height:1.55;margin:0 0 1.1rem;max-width:40rem}
.atext a{border-bottom:1px solid var(--coral);transition:color .3s}
.atext a:hover{color:var(--coral)}
.atext .email{font-family:var(--body);font-weight:400;font-size:1.2rem;margin-top:1.8rem}
.atext .email a{border:0}
@media (max-width:820px){
  .about{padding-top:4.5rem}
  .arow{flex-wrap:wrap;padding:.5rem 1.2rem 2rem}
  .arow .col{flex-basis:100%;max-width:100%}
  .atext{padding:1.2rem 0 0}
}

/* footer */
.ftr{position:relative;padding:2.5rem 0 3rem}
.totop{position:absolute;right:2rem;bottom:2.4rem;width:2.4rem;color:var(--muted)}
.totop:hover{color:var(--coral)}

/* motion */
.reveal{opacity:0;transform:translateY(1.6rem);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .cover-vid{transform:none!important}
  .arrow{animation:none}
}