:root{--cream:#F5FAE8;--pale:#E1F5C4;--lemon:#EDE574;--yellow:#F9D423;--amber:#FC913A;--red:#FF4E50;--navy:#121110;--orange:#FF4E50;--carbon:#121110;--hair:rgba(18,17,16,.20);--hairD:rgba(245,250,232,.26);--ink:rgba(18,17,16,.70);--inkD:rgba(245,250,232,.70);--gradsoft:radial-gradient(120% 105% at 6% 4%,#E1F5C4 0%,rgba(225,245,196,0) 52%),radial-gradient(95% 95% at 80% 8%,#EDE574 0%,rgba(237,229,116,0) 58%),radial-gradient(115% 105% at 96% 56%,#F9D423 0%,rgba(249,212,35,0) 54%),radial-gradient(105% 105% at 26% 96%,#FC913A 0%,rgba(252,145,58,0) 58%),linear-gradient(150deg,#FF4E50,#FF4E50);--gradhot:linear-gradient(168deg,#F9D423 0%,#FC913A 46%,#FF4E50 100%);--gut:76px;--disp:"League Spartan","Haettenschweiler",Impact,sans-serif;--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--brand:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,"SF Mono",monospace}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--serif);font-size:20px;line-height:1.55;text-wrap:pretty;overflow-x:hidden}
.disp{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--orange)}
a:hover{color:var(--orange)}
.onNavy a{color:var(--cream)}
.onNavy a:hover{color:var(--orange)}

/* ---------- margin device ---------- */
.sec{display:grid;grid-template-columns:var(--gut) 1fr;position:relative}
.gut{border-right:2px solid var(--navy);padding:30px 0 44px;display:flex;flex-direction:column;align-items:center;gap:22px;position:relative;z-index:2}
.onNavy .gut{border-right-color:var(--cream)}
.gnum{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;background:var(--orange);color:var(--carbon);padding:4px 7px;line-height:1}
.gnote{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.onNavy .gnote{color:var(--inkD)}
.dots{width:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.dots i{display:block;aspect-ratio:1;border-radius:50%;background:var(--orange)}
.pad{padding:60px 64px 84px 44px;position:relative;z-index:2}
.meas{max-width:66ch}

/* ---------- pixel cursor ---------- */
.cur{display:block;shape-rendering:crispEdges;flex:none}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:30;background:var(--navy);color:var(--cream)}
header a{border-bottom:none;color:var(--cream)}
header a:hover{color:var(--orange)}
.navrow{display:grid;grid-template-columns:var(--gut) 1fr;align-items:stretch}
.navrow .gut{padding:0;justify-content:center;gap:0;border-right-color:var(--cream)}
.navin{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:18px 28px 18px 44px}
.lock{display:flex;align-items:center;gap:13px}
.lockname{font-family:var(--brand);font-weight:600;font-size:17px;letter-spacing:-.024em;line-height:1}
nav a,.lede,.sub,.step p,.crew,.fitcol p{font-family:var(--serif)}
nav{display:flex;align-items:center;gap:32px}
nav a{font-size:15px;font-weight:500}
.cta{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;background:var(--orange);color:var(--carbon)!important;padding:12px 18px}
.cta:hover{background:var(--cream);color:var(--navy)!important}

/* ---------- hero ---------- */
.hero{overflow:hidden}
.hero .pad{padding:76px 64px 78px 44px}
.hfig .harc{position:absolute;left:0;bottom:0;width:min(680px,62%);height:340px;background:var(--orange);border-radius:340px 340px 0 0;z-index:0}
.hcurs{position:absolute;right:8%;bottom:40px;display:flex;flex-direction:column;gap:20px;align-items:flex-end;z-index:3}
.hbars{position:absolute;top:64px;right:0;width:300px;display:flex;flex-direction:column;gap:16px;z-index:1}
.hbars i{display:block;height:26px;background:var(--navy)}
.hbars i:last-child{width:74%}
.hdots{position:absolute;top:78px;left:44px;width:120px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;z-index:1}
.hdots i{display:block;aspect-ratio:1;border-radius:50%;background:var(--orange)}
h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(42px,7.2vw,116px);line-height:.92;letter-spacing:-.03em;margin:150px 0 0;position:relative;z-index:3}
h1 span{display:inline-block;transform:skewX(-7deg)}
h1 em{font-style:normal;color:var(--orange)}
.sub{font-size:23px;line-height:1.45;max-width:31ch;margin:36px 0 0;font-weight:400;position:relative;z-index:3}
.btns{display:flex;gap:14px;margin:44px 0 0;flex-wrap:wrap;align-items:center;position:relative;z-index:3}
.btn{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:16px 24px;background:var(--navy);color:var(--cream)!important;border-bottom:none}
.btn:hover{background:var(--orange);color:var(--carbon)!important}
.btn.alt{background:var(--cream);color:var(--navy)!important;box-shadow:inset 0 0 0 2px var(--navy)}
.btn.alt:hover{background:var(--navy);color:var(--cream)!important}
.hfig{position:relative;z-index:2;margin:56px 0 0;height:420px}
.hfig .ph{position:absolute;left:70px;bottom:0;width:min(480px,50%);height:420px;z-index:1}

/* ---------- proof strip ---------- */
.strip{background:var(--navy);color:var(--cream)}
.strip .pad{padding:24px 64px 24px 44px}
.strip .gut{padding:24px 0;border-right-color:var(--cream)}
.proof{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center}
.proof b{color:var(--orange);font-weight:500}

/* ---------- section heads ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin:0 0 22px}
h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(29px,3.5vw,52px);line-height:.96;letter-spacing:-.022em;margin:0}
h2 em{font-style:normal;color:var(--orange)}
.lede{font-size:22px;line-height:1.5;margin:26px 0 0}
.rule{height:6px;background:var(--navy);margin:0}
.onNavy .rule{background:var(--cream)}

/* ---------- work cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.card{display:block;border-bottom:none}
.cwrap{position:absolute;inset:0;z-index:0}
.card .phwrap{position:relative;padding-top:46px}
.card .arc{position:absolute;top:0;left:6%;right:6%;height:190px;background:var(--orange);border-radius:220px 220px 0 0;z-index:0}
.card .ph{position:relative;z-index:1;aspect-ratio:4/3}
.slate{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding-top:12px;border-top:2px solid var(--navy);margin-top:14px}
.slate b{font-weight:500;color:var(--navy)}
.ctitle{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:-.015em;line-height:1;margin:14px 0 0}
.card:hover .ctitle{color:var(--orange)}
.ph{background:repeating-linear-gradient(135deg,#c9c9c9 0 7px,#b4b4b4 7px 14px);position:relative;overflow:hidden;filter:grayscale(1)}
.ph .tag{position:absolute;top:9px;left:11px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#2b2b2b;background:rgba(255,255,255,.72);padding:3px 6px}
.ph .tag.b{top:auto;bottom:9px;left:auto;right:11px}
.crew{margin-top:46px;padding-top:24px;border-top:2px solid var(--navy);font-size:20px;max-width:60ch;display:flex;gap:16px;align-items:flex-start}

/* ---------- method ---------- */
.method{background:var(--navy);color:var(--cream);overflow:hidden}
.marc{position:absolute;right:-90px;top:60px;width:420px;height:210px;background:var(--orange);border-radius:210px 210px 0 0;transform:rotate(180deg);z-index:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.step{background:var(--cream);color:var(--navy);padding:26px 24px 30px}
.stepn{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;background:var(--orange);color:var(--carbon);padding:4px 7px}
.step h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:23px;letter-spacing:-.015em;line-height:1;margin:18px 0 12px}
.step p{margin:0;font-size:18px;line-height:1.5}

/* ---------- bio ---------- */
.bio{display:grid;grid-template-columns:330px 1fr;gap:56px;align-items:start}
.portwrap{position:relative;padding-top:34px}
.portwrap .arc{position:absolute;top:0;left:0;right:0;height:170px;background:var(--orange);border-radius:180px 180px 0 0;z-index:0}
.portwrap .ph{position:relative;z-index:1;aspect-ratio:4/5}
.creds{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:2.1;margin-top:30px;border-top:2px solid var(--navy);padding-top:18px}

/* ---------- fit ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.fitcol{padding:26px 26px 30px;background:var(--navy);color:var(--cream)}
.fitcol+.fitcol{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.fitlab{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:10px}
.fitcol p{font-size:25px;line-height:1.32;letter-spacing:0;margin:16px 0 0;max-width:26ch}

/* ---------- contact ---------- */
.contact{background:var(--orange);color:var(--carbon);overflow:hidden}
.contact .gut{border-right-color:var(--carbon)}
.contact .gnum{background:var(--navy);color:var(--cream)}
.contact .gnote{color:rgba(18,17,16,.68)}
.contact .dots i{background:var(--navy)}
.contact .eyebrow{color:var(--navy)}
.contact .pad{padding:80px 64px 60px 44px}
.cbars{position:absolute;top:80px;right:0;width:280px;display:flex;flex-direction:column;gap:14px;z-index:1}
.cbars i{display:block;height:24px;background:var(--navy)}
.cbars i:last-child{width:70%}
.cbig{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(29px,3.9vw,58px);line-height:.95;letter-spacing:-.022em;margin:0;max-width:17ch;position:relative;z-index:3}
.crow{display:flex;gap:32px;flex-wrap:wrap;align-items:center;margin-top:44px;position:relative;z-index:3}
.contact .btn{background:var(--navy);color:var(--cream)!important}
.contact .btn:hover{background:var(--carbon)}
.mailto{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--navy)}
footer{display:grid;grid-template-columns:var(--gut) 1fr;background:var(--navy);color:var(--inkD)}
footer .gut{padding:0;border-right-color:var(--cream)}
.fin{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 64px 26px 44px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- load motion ---------- */
@keyframes drawdown{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes setin{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.hero .gut{overflow:hidden}
.hero .gut::before{content:"";position:absolute;top:0;right:-2px;width:2px;height:100%;background:var(--cream);transform-origin:top;animation:drawdown .5s cubic-bezier(.6,0,.2,1) both}
.hero .gnum,.hero .gnote,.hero .dots{animation:setin .4s ease .44s both}
h1{animation:rise .6s cubic-bezier(.2,.7,.2,1) .28s both}
.hero .sub{animation:rise .58s cubic-bezier(.2,.7,.2,1) .5s both}
.hero .btns{animation:rise .58s cubic-bezier(.2,.7,.2,1) .62s both}
.harc,.hbars,.hdots{animation:pop .7s cubic-bezier(.2,.8,.2,1) .16s both}
.rv{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.rv.armed{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.rv.armed{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:900px){
:root{--gut:0px}
.sec,.navrow,footer{grid-template-columns:1fr}
.gut{border-right:none;border-bottom:2px solid var(--navy);flex-direction:row;justify-content:flex-start;padding:12px 20px;gap:14px}
.onNavy .gut,.strip .gut,footer .gut{border-bottom-color:var(--cream)}
.contact .gut{border-bottom-color:var(--carbon)}
.navrow .gut{display:none}
.gnote{writing-mode:horizontal-tb;transform:none}
.dots{width:26px;gap:4px}
.pad,.contact .pad,.strip .pad{padding:40px 20px 52px}
.navin{padding:15px 20px}
nav{display:none}
.hero .pad{padding:44px 20px 52px}
h1{font-size:clamp(34px,10.5vw,60px);margin-top:96px}
.hfig .harc{left:0;width:88%;height:230px;border-radius:230px 230px 0 0}
.hcurs{right:2%;bottom:16px;gap:12px}
.hcurs svg:first-child{width:34px;height:41px}
.hcurs svg:nth-child(2){width:22px;height:26px}
.hcurs svg:nth-child(3){display:none}
.hbars{width:150px;top:40px;gap:10px}
.hbars i{height:16px}
.hdots{width:74px;gap:11px;top:48px;left:20px}
.sub{font-size:19px;max-width:none}
.hfig{height:280px;margin-top:36px}
.hfig .ph{width:70%;left:26px;height:280px}
.proof{flex-direction:column;align-items:flex-start;gap:8px;font-size:11px}
.cards{grid-template-columns:1fr;gap:38px}
.steps,.fit,.bio{grid-template-columns:1fr}
.fitcol p{font-size:22px;max-width:none}
.bio{gap:30px}
.marc{width:230px;height:115px;right:-60px;border-radius:115px 115px 0 0}
.cbars{width:140px;top:44px;gap:10px}
.cbars i{height:16px}
.fin{padding:20px}
.band .ph{aspect-ratio:4/3}
.hero .gut::before{display:none}
}

/* ---------- palette v3: gradients + grain ---------- */
.hero{background:var(--gradsoft);position:relative}
.hero::after{content:"";position:absolute;inset:0;background:url("grain.png") repeat;background-size:128px 128px;opacity:.10;pointer-events:none;z-index:1}
.hero h1 em{color:var(--navy)}
.hero h1 em span{background:var(--pale);padding:0 .1em .04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hfig .harc{background:var(--gradhot)}
.hbars i{background:var(--carbon)}
.hdots i,.dots i{background:var(--red)}
.gnum{background:var(--yellow);color:var(--carbon)}
.strip{background:var(--navy)}
.proof b{color:var(--yellow)}
.onNavy .eyebrow{color:var(--yellow)}
.card .arc{background:var(--gradhot)}
.portwrap .arc{background:var(--gradhot)}
.card:hover .ctitle{color:var(--red)}
.method{background:var(--navy)}
.marc{background:var(--gradhot)}
.method h2 em{color:var(--yellow)}
.step{background:var(--pale)}
.stepn{background:var(--red);color:var(--cream)}
.fitcol{background:var(--gradhot);color:var(--carbon)}
.fitcol .fitlab{color:var(--carbon)}
.fitcol .dots i{background:var(--carbon)}
.fitcol+.fitcol{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.contact{background:var(--gradsoft);color:var(--carbon);position:relative}
.contact::after{content:"";position:absolute;inset:0;background:url("grain.png") repeat;background-size:128px 128px;opacity:.10;pointer-events:none;z-index:1}
.contact .eyebrow{color:var(--navy)}
.contact .cbars i{background:var(--carbon)}
.contact .dots i{background:var(--carbon)}
.contact .gnum{background:var(--carbon);color:var(--cream)}
.contact .btn{background:var(--carbon);color:var(--cream)!important}
.contact .btn:hover{background:var(--cream);color:var(--carbon)!important}
.contact .mailto{border-bottom-color:var(--carbon);color:var(--carbon)}
.contact .mailto:hover{color:var(--carbon);border-bottom-width:4px}
a:focus-visible,.btn:focus-visible,.cta:focus-visible,.card:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.onNavy a:focus-visible,.strip a:focus-visible,header a:focus-visible,.method a:focus-visible{outline-color:var(--yellow)}
footer{background:var(--navy)}

/* ---------- photography: duotone treatment ---------- */
.ph.duo{background:var(--navy);filter:none}
.ph.duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph.duo .tag{z-index:3;background:rgba(18,17,16,.72);color:var(--cream)}
.hfig .ph.duo{filter:none}
.portwrap .ph.duo img{object-position:50% 18%}
.band .ph.duo img{object-position:50% 0}
.band{margin:44px 0 0;position:relative}
.band .ph{aspect-ratio:16/10}
.setgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:58px}
.setgrid .ph{aspect-ratio:1/1}
.setcap{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.7;margin-top:14px}
@media(max-width:820px){.setgrid{grid-template-columns:repeat(2,1fr);gap:10px}}
.card .ph.duo img{object-position:50% 12%}
.playmark{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:rgba(18,17,16,.6);border:2px solid var(--cream);display:grid;place-items:center;transition:background .2s,transform .2s}
.playmark::after{content:"";width:0;height:0;border-left:16px solid var(--cream);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.card:hover .playmark{background:var(--red);transform:translate(-50%,-50%) scale(1.06)}
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,8,10,.92);display:none;place-items:center;padding:32px}
.lb[open]{display:grid}
.lb .frame{width:min(1100px,100%);aspect-ratio:16/9;position:relative;background:#000}
.lb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb .x{position:absolute;top:-40px;right:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:none;border:0;cursor:pointer;padding:6px}
.lb .x:hover{color:var(--yellow)}
.band figcaption{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-top:12px;border-top:2px solid var(--navy);margin-top:14px}

/* ---------- constellation grounds ---------- */
.strip,.method,footer{position:relative}
.strip>*,.method>*,footer>*{position:relative;z-index:2}
.strip::before,.method::before,footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:cover}
.strip::before{background-image:url("constellation-cream.png");opacity:.34;background-position:70% 50%}
.method::before{background-image:url("constellation-cream.png");opacity:.34;background-position:20% 40%}
footer::before{background-image:url("constellation-cream.png");opacity:.26;background-position:40% 60%}
.contact::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url("constellation-ink.png") no-repeat center/cover;opacity:.22}

/* ============================================================
   MULTI-PAGE ADDITIONS
   Everything above is the v4 home design, recoloured to #121110.
   ============================================================ */

/* ---------- mobile nav ---------- */
.navtoggle{display:none;background:none;border:0;padding:10px;cursor:pointer;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.navtoggle i{display:block;width:20px;height:2px;background:var(--cream);position:relative}
.navtoggle i::before,.navtoggle i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--cream);transition:transform .22s ease,top .22s ease}
.navtoggle i::before{top:-6px}.navtoggle i::after{top:6px}
.navtoggle[aria-expanded="true"] i{background:transparent}
.navtoggle[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
nav a[aria-current="page"]{color:var(--orange)}

/* ---------- interior page hero ---------- */
.phero{background:var(--gradsoft);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:url("grain.png") repeat;background-size:128px 128px;opacity:.10;pointer-events:none;z-index:1}
.phero .pad{padding:72px 64px 64px 44px}
.phero h1{font-size:clamp(33px,5.3vw,73px);margin:0;animation:rise .6s cubic-bezier(.2,.7,.2,1) .1s both}
.phero h1 em{font-style:normal;color:var(--navy)}
.phero h1 em span{background:var(--pale);padding:0 .1em .04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.phero .sub{animation:rise .58s cubic-bezier(.2,.7,.2,1) .26s both}
.phero .eyebrow{color:var(--navy)}
.crumb{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px;position:relative;z-index:3}
.crumb a{border-bottom:2px solid var(--navy)}

/* ---------- generic prose block ---------- */
.prose{max-width:66ch}
.prose p{font-size:20px;line-height:1.55;margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
.onNavy .prose{color:var(--cream)}

/* ---------- logline ---------- */
.logline{font-size:26px;line-height:1.35;max-width:34ch;margin:26px 0 0;position:relative;z-index:3}
.onNavy .logline{color:var(--cream)}

/* ---------- video grid / facade ---------- */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:44px}
.vidcard{display:block;border-bottom:none}
.vidshot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.vidshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vidcard .vtitle{font-family:var(--serif);font-size:18px;line-height:1.35;margin:14px 0 0;padding-top:12px;border-top:2px solid var(--navy)}
.onNavy .vidcard .vtitle{border-top-color:var(--cream);color:var(--cream)}
.vidcard:hover .vtitle{color:var(--red)}
.vmeta{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:6px 0 0}
.onNavy .vmeta{color:var(--inkD)}
.vidfeature{margin-top:44px}
.vidfeature .vidshot{aspect-ratio:16/9}

/* ---------- cast & crew ---------- */
.castgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin-top:44px}
.castcard{position:relative}
.castshot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy)}
.castshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.castshot.contain{background:var(--navy);display:grid;place-items:center}
.castshot.contain img{position:relative;width:76%;height:auto;object-fit:contain}
.castrole{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:14px 0 0;padding-top:12px;border-top:2px solid var(--navy)}
.onNavy .castrole{border-top-color:var(--cream)}
.castname{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:-.015em;line-height:1;margin:8px 0 0}
.castbio{font-size:17px;line-height:1.45;margin:10px 0 0}
.onNavy .castbio{color:var(--cream)}
.castlink{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;display:inline-block;margin-top:10px}

/* ---------- credits table (other work) ---------- */
.credits{margin-top:40px;border-top:2px solid var(--navy)}
.crow2{display:grid;grid-template-columns:2.2fr 1fr 1.1fr auto;gap:10px 24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--hair)}
.crow2:hover{background:rgba(18,17,16,.04)}
.cproj{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:-.015em;line-height:1.05}
.cyear{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink);display:block;margin-top:5px;text-transform:uppercase}
.ctype,.crole{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.crole{color:var(--navy)}
.clink{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.chead{display:grid;grid-template-columns:2.2fr 1fr 1.1fr auto;gap:24px;padding:12px 0;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--navy)}

/* ---------- services ---------- */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:46px}
.svc{padding:28px 26px 32px;box-shadow:inset 0 0 0 2px var(--navy)}
.svc.hot{background:var(--gradhot);color:var(--carbon);box-shadow:none}
.svc h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:-.015em;line-height:1;margin:16px 0 12px}
.svc p{font-size:18px;line-height:1.5;margin:0}
.svcn{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;background:var(--red);color:var(--cream);padding:4px 7px}
.svc.hot .svcn{background:var(--carbon);color:var(--cream)}
.svclist{margin:18px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:2}
.svclist li{padding-left:16px;position:relative}
.svclist li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.svc.hot .svclist li::before{background:var(--carbon)}

/* ---------- spec / fact list ---------- */
.spec{margin-top:40px;border-top:2px solid var(--navy)}
.onNavy .spec{border-top-color:var(--cream)}
.specrow{display:grid;grid-template-columns:200px 1fr;gap:16px 28px;padding:16px 0;border-bottom:1px solid var(--hair)}
.onNavy .specrow{border-bottom-color:var(--hairD)}
.speck{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.onNavy .speck{color:var(--inkD)}
.specv{font-size:19px;line-height:1.45}

/* ---------- contact details ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:44px}
.cblock{padding:26px 24px 30px;box-shadow:inset 0 0 0 2px var(--carbon)}
.cblock h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:-.015em;line-height:1;margin:14px 0 10px}
.cblock p{margin:0;font-size:18px;line-height:1.5}
.cblock .gnum{display:inline-block}

/* ---------- section nav to other projects ---------- */
.nextgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:44px}
.nextcard{display:block;padding:24px 24px 28px;box-shadow:inset 0 0 0 2px var(--navy);border-bottom:none}
.nextcard:hover{background:var(--gradhot);box-shadow:none}
.nextlab{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.nextt{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:-.015em;line-height:1;margin:10px 0 0}

/* ---------- responsive for new blocks ---------- */
@media(max-width:900px){
.phero .pad{padding:40px 20px 44px}
.phero h1{font-size:clamp(28px,8vw,46px)}
.navtoggle{display:flex}
nav{display:none}
header nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--navy);padding:8px 20px 20px;border-top:2px solid var(--cream);z-index:40}
header nav.open a{padding:13px 0;font-size:17px;width:100%;border-bottom:1px solid var(--hairD)}
.navin{position:relative}
.crow2,.chead{grid-template-columns:1fr;gap:6px}
.chead{display:none}
.crow2{padding:22px 0}
.cproj{font-size:21px}
.specrow{grid-template-columns:1fr;gap:6px}
.logline{font-size:22px;max-width:none}
.prose p{font-size:19px}
.vidgrid,.castgrid,.svcgrid,.cgrid,.nextgrid{grid-template-columns:1fr}
}

/* mobile-only CTA inside the drawer */
.mobonly{display:none}
@media(max-width:900px){
.navin>.cta{display:none}
header nav.open .mobonly{display:inline-block;margin-top:16px;border-bottom:none;width:auto;padding:14px 20px}
}

/* guard: a lone card in an auto-fit grid must not stretch to full width */
.castgrid:has(> .castcard:only-child){grid-template-columns:minmax(0,300px)}
.vidgrid:has(> .vidcard:only-child){grid-template-columns:minmax(0,640px)}
.castlink{border-bottom:2px solid var(--red)}
.castlink.pending{color:var(--navy);border-bottom:2px solid var(--red);cursor:default}

/* ---------- hero: portrait sits up beside the copy, not below it ---------- */
.herorow{display:grid;grid-template-columns:minmax(0,248px) minmax(0,1fr);gap:46px;align-items:start;margin:40px 0 0;position:relative;z-index:3}
.hportrait{position:relative;padding-top:28px;animation:pop .7s cubic-bezier(.2,.8,.2,1) .34s both}
.hportrait .harc{position:absolute;top:0;left:0;right:0;height:140px;background:var(--gradhot);border-radius:150px 150px 0 0;z-index:0}
.hportrait .ph{position:relative;z-index:1;aspect-ratio:4/5}
.hportrait .ph.duo img{object-position:50% 18%}
.herotext{padding-top:6px}
.herotext .sub{margin-top:0}
.herocurs{display:flex;gap:16px;align-items:flex-end;margin:40px 0 0}
@media(max-width:900px){
.herorow{grid-template-columns:1fr;gap:30px;margin-top:32px}
.hportrait{max-width:230px;padding-top:22px}
.hportrait .harc{height:110px;border-radius:120px 120px 0 0}
.herotext{padding-top:0}
.herocurs{margin-top:26px}
.herocurs svg:nth-child(3){display:none}
}