/* RED YAK — shared styles for every page */
:root{--bg:#0B0B0A;--fg:#EDEAE3;--muted:#8E8A82;--dim:#726E66;--line:#2A2926;--surface:#161614;--red:#BB2626}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Instrument Sans','Helvetica Neue',Helvetica,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--fg);text-decoration:none}a:hover{color:#fff}
img{max-width:100%}
.wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.tc{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;font-variant-numeric:tabular-nums}
.display{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase}
.statement{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:500}
.h1{margin:0;font-size:clamp(44px,6vw,96px);line-height:1}
.h2{margin:0;font-size:clamp(32px,4vw,56px);line-height:1}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Header — solid on inner pages; transparent over the hero on Home */
header.site{position:sticky;top:0;z-index:10;background:rgba(11,11,10,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .3s}
header.site.overlay{position:fixed;left:0;right:0;background:linear-gradient(rgba(11,11,10,.7),rgba(11,11,10,0));backdrop-filter:none;border-bottom-color:transparent}
header.site.overlay.solid{background:rgba(11,11,10,.9);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
header.site nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:26px;width:auto;display:block}
.navlinks{display:flex;gap:32px;align-items:center}
.navlink{font-size:15px;padding:12px 4px}
.navlink:hover,.navlink.on{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:600;font-size:15px;background:var(--red);color:#fff;border:0;cursor:pointer;font-family:inherit}
.btn:hover{opacity:.88;color:#fff}
.btn.sm{padding:12px 22px}

/* Placeholders (shown until real images are added) */
.ph{position:relative;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph>span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Vimeo background loops */
.bgvid{position:absolute;inset:0;overflow:hidden;background:var(--surface);pointer-events:none}
.bgvid iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;width:101%;height:101%}

/* Hero */
.hero{position:relative;height:88vh;min-height:560px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.hero .bgvid iframe{width:max(100vw,calc(max(88vh,560px) * var(--ar,1.7778)));height:max(calc(100vw / var(--ar,1.7778)),88vh,560px)}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,10,.85) 0%,rgba(11,11,10,.25) 45%,rgba(11,11,10,.35) 100%)}
.heroGrid{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start;padding-block:56px}
.proj{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(237,234,227,.25);color:var(--muted)}
.proj:first-of-type{color:var(--fg)}
.proj:hover{color:var(--fg)}
.rec{color:var(--red)}
.dot{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}

/* Brands */
.brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brand{display:flex;align-items:center;justify-content:center;aspect-ratio:5/2;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);transition:color .2s}
.brand span{font-family:'Anton',Impact,sans-serif;font-size:clamp(20px,2vw,30px);letter-spacing:.04em;text-transform:uppercase}
.brand:hover{color:var(--fg)}
.brand img{max-width:60%;max-height:40%;opacity:.7;filter:grayscale(1) brightness(1.6)}
.brand:hover img{opacity:1}

/* Project cards */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 24px}
.card{display:flex;flex-direction:column;gap:16px}
.thumb{position:relative;aspect-ratio:16/9}
.cardmeta{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.ct{font-size:20px;font-weight:500}
.card:hover .ct{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
.chip{font-family:inherit;font-size:14px;padding:10px 18px;min-height:44px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* Services */
.svcGrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
.svc{display:flex;align-items:baseline;gap:20px;width:100%;padding:18px 0;background:none;border:0;border-top:1px solid var(--line);cursor:pointer;text-align:left;color:var(--dim);font:400 clamp(26px,3vw,44px)/1 'Anton',Impact,sans-serif;text-transform:uppercase}
.svc .tc{color:var(--muted)}
.svc.on{color:var(--fg)}.svc.on .tc{color:var(--red)}
.svcRow{display:grid;grid-template-columns:80px minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding-block:28px;border-top:1px solid var(--line);align-items:baseline}
.svcRow .n{color:var(--red)}

/* Testimonials */
.testi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;border-top:1px solid var(--line);padding-top:56px}
.tfade{transition:opacity .45s ease}
.tfade.out{opacity:0}
.tdot{width:28px;height:44px;border:0;background:none;cursor:pointer;padding:0;display:flex;align-items:center}
.tdot::before{content:"";display:block;width:100%;height:2px;background:var(--line);transition:background .3s}
.tdot[aria-selected="true"]::before{background:var(--red)}
.tnav{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;font-size:18px}
.tnav:hover{border-color:var(--fg)}

/* Let's talk band */
.cta{position:relative;min-height:420px;display:flex;align-items:center;border-block:1px solid var(--line)}
.cta .ph{position:absolute;inset:0;border:0}
.cta .shade{position:absolute;inset:0;background:rgba(11,11,10,.45)}
.cta .wrap{position:relative;width:100%;display:flex;justify-content:center;padding-block:96px}

/* About */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column;gap:6px;padding:24px 16px 0 0}
.facts b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1;text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps div{display:flex;flex-direction:column;gap:14px;padding-top:20px;border-top:2px solid var(--red)}

/* Project page */
.player{position:relative;aspect-ratio:16/9;background:var(--surface);border:1px solid var(--line)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.meta div{display:flex;flex-direction:column;gap:6px;padding:20px 16px 0 0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.credit{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-top:1px solid var(--line)}
.next:hover .nextTitle{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:8px}

/* Footer */
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:40px}
.col{display:flex;flex-direction:column;gap:10px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;color:var(--muted);font-size:14px}

/* Contact form */
.cf-back{position:fixed;inset:0;z-index:100;background:rgba(5,5,5,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px}
.cf-back[hidden]{display:none}
.cf{width:100%;max-width:640px;max-height:calc(100vh - 32px);overflow:auto;background:#121211;border:1px solid var(--line);padding:clamp(24px,4vw,44px);position:relative}
.cf h2{margin:0 0 6px;font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(32px,4vw,48px);line-height:1}
.cf .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:none;color:var(--fg);font-size:26px;cursor:pointer}
.cf form{display:flex;flex-direction:column;gap:24px;margin-top:28px}
.cf .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cf label{display:flex;flex-direction:column;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cf input,.cf select,.cf textarea{font:17px 'Instrument Sans',sans-serif;color:var(--fg);background:transparent;border:0;border-bottom:1px solid #3A3934;padding:10px 0;min-height:44px;border-radius:0;color-scheme:dark;text-transform:none;letter-spacing:0}
.cf textarea{resize:vertical;min-height:110px}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-bottom-color:var(--red)}
.cf .send{align-self:flex-start}
.cf .note{color:var(--muted);font-size:14px;margin:0}
.cf .err{color:#E06A5E;font-size:14px;margin:0}

@media (max-width:900px){
  .navlinks .navlink{display:none}
  .heroGrid,.works,.svcGrid,.testi,.two,.svcRow,.g2,.g3{grid-template-columns:minmax(0,1fr)}
  .svcMedia{display:none!important}
  .facts,.steps,.meta,.foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svcRow{gap:12px}
}
@media (max-width:600px){.cf .pair{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}.tfade{transition:none}}