/* Studio page. Tokens, nav/burger, buttons and the footer live in base.css. */
body.page-template-template-studio{background:var(--ink);color:#fff}

.top{position:sticky;top:0;z-index:60;background:var(--ink);padding:22px 0}

.h1{font-size:clamp(2.7rem,7vw,6rem);line-height:.93;letter-spacing:-.025em;margin:0;font-variation-settings:"wdth" 112,"wght" 800}
.h2{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.03;letter-spacing:-.02em;margin:0;font-variation-settings:"wdth" 108,"wght" 700}

/* opening */
.open{padding-top:clamp(46px,8vw,110px);padding-bottom:clamp(60px,9vw,120px)}
.open .h1{max-width:12ch}
.open-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);margin-top:clamp(34px,5vw,64px);align-items:start}
.open-grid p{margin:0 0 1.1rem;font-size:1.1rem;line-height:1.6;color:var(--mist);max-width:48ch}
.open-grid p strong{color:#fff;font-variation-settings:"wght" 600}
.facts{display:flex;flex-wrap:wrap;border-top:1px solid var(--hair);margin-top:2rem}
.facts div{padding:20px 34px 20px 0;border-right:1px solid var(--hair);margin-right:34px}
.facts div:last-child{border-right:0;margin-right:0;padding-right:0}
.facts b{display:block;font-size:2rem;line-height:1;font-variation-settings:"wdth" 108,"wght" 750}
.facts span{font-size:.9rem;color:var(--mist)}

/* how we work */
.how{background:var(--core);padding:clamp(72px,10vw,140px) 0}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px);margin-top:clamp(34px,5vw,64px)}
.how-grid section{border-top:1px solid var(--hair);padding-top:22px}
.how-grid h3{margin:0 0 12px;font-size:1.28rem;line-height:1.2;font-variation-settings:"wdth" 104,"wght" 700}
.how-grid p{margin:0;color:var(--mist)}

/* team */
.team{background:var(--paper);color:var(--ink);padding:clamp(72px,10vw,140px) 0}
.team p.sub{max-width:46ch;font-size:1.08rem;margin:1.1rem 0 0;color:rgba(6,6,74,.7)}
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,3.6vw,58px);margin-top:clamp(38px,5vw,68px)}
.person{transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s ease,opacity .5s ease}
.person img{width:100%;max-width:230px;aspect-ratio:1;height:auto;border-radius:50%;object-fit:cover;background:rgba(6,6,74,.1)}

/* rack focus: hovering one face pulls the others out of focus. Pure CSS. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .people:hover .person{filter:blur(3px) saturate(.7);opacity:.4;transform:scale(.96)}
  .people:hover .person:hover{filter:none;opacity:1;transform:scale(1.05)}
  .person span{transition:color .5s ease}
  .people:hover .person:hover span{color:var(--core)}
}
.person h3{margin:22px 0 4px;font-size:1.22rem;font-variation-settings:"wdth" 102,"wght" 700}
.person span{font-size:1rem;color:rgba(6,6,74,.62)}
.crew{margin-top:clamp(44px,6vw,80px);border-top:1px solid rgba(6,6,74,.18);padding-top:28px;max-width:62ch}
.crew h3{margin:0 0 10px;font-size:1.08rem;font-variation-settings:"wght" 700}
.crew p{margin:0;color:rgba(6,6,74,.7)}

/* wrai strip */
.strip{background:var(--deep);padding:clamp(66px,9vw,120px) 0;position:relative;overflow:hidden}
.strip::before{content:"";position:absolute;top:-40%;right:-10%;width:56vw;height:56vw;background:radial-gradient(circle,rgba(91,120,255,.45),transparent 62%);pointer-events:none}
.strip-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.strip p{color:var(--mist);max-width:44ch;margin:1.2rem 0 0;font-size:1.08rem}
.strip .btn-solid{margin-top:1.8rem}

.strip-video .player{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);border-radius:2px}
.strip-video .player img{width:100%;height:100%;object-fit:cover}
.strip-video .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.strip-video .go{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(72px,8vw,104px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),background .2s;
}
.strip-video .go:hover{transform:translate(-50%,-50%) scale(1.09);background:#fff;color:var(--ink)}
.strip-video .tri{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* join + cta */
.join{padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(72px,10vw,140px)}
.join-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.join p{color:var(--mist);max-width:44ch;font-size:1.08rem}
.mailto{display:inline-block;margin-top:1.6rem;font-size:clamp(1.1rem,2.2vw,1.7rem);text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:6px;font-variation-settings:"wdth" 102,"wght" 600;transition:color .2s}
.mailto:hover{color:var(--signal)}

@media (max-width:1000px){
  .open-grid,.strip-in,.join-in{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .people{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .facts div{border-right:0;margin-right:0;padding-right:0;width:50%}
}