/* =========================================================
   HOME — arcade, deep indigo
   ========================================================= */
#p-home .hero{padding:clamp(70px,11vw,132px) 0 clamp(50px,7vw,86px);position:relative}
#p-home .hero::before{content:"";position:absolute;top:-30%;right:-14%;width:62vw;height:62vw;
  background:radial-gradient(circle,rgba(185,9,189,.24),transparent 62%);pointer-events:none}
#p-home h1{font-size:clamp(2.5rem,8.4vw,6.2rem)}
#p-home .hero-in{position:relative;max-width:920px}
#p-home .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
#p-home .three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#p-home .three .frame{padding:clamp(26px,3.4vw,40px)}
#p-home .three h3{font-family:var(--display);font-weight:800;
  font-size:1.3rem;text-transform:uppercase;letter-spacing:-.015em;margin:0 0 12px}
#p-home .three p{color:var(--dim);font-size:.94rem;line-height:1.62;margin:0}
#p-home .band{background:var(--soft);border-block:1px solid var(--line);text-align:center}
#p-home h2{font-size:clamp(1.9rem,4.8vw,3.2rem)}
/* who the studio is for */
#p-home .forgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(28px,3.4vw,40px)}
#p-home .forcard{--fill:#F7F4EA;color:#041E4B;border-color:rgba(4,30,75,.16);
  padding:21px 16px;display:flex;align-items:center;justify-content:center;min-height:77px;
  transition:border-color .25s ease,transform .3s ease,box-shadow .3s ease}
#p-home .forcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(0,0,0,.85)}
#p-home .forcard b{font-family:var(--display);font-weight:800;color:#041E4B;
  font-size:clamp(1rem,1.6vw,1.2rem);text-transform:uppercase;letter-spacing:-.01em;line-height:1.12}
#p-home .endcap{padding:clamp(64px,9vw,110px) 0 clamp(80px,10vw,120px);text-align:center}
#p-home .endcap .lede{margin:22px auto 30px}
@media(max-width:900px){
  #p-home .three{grid-template-columns:1fr}
  #p-home .forgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){#p-home .forgrid{grid-template-columns:1fr}}


/* the two gradient words sit on their own lines — split the ramp so it reads as one run */
#p-home .hero h1 em:first-of-type{background-image:linear-gradient(96deg,#6A68F0 0%,#B909BD 100%)}
#p-home .hero h1 em:last-of-type{background-image:linear-gradient(96deg,#B909BD 0%,#EC4BEF 100%)}

@media (max-width:560px){
  #p-home .forcard{min-height:62px;padding:16px 14px}
}