/* Shared styles for the Work and About pages — matches the home page brand */
:root{
  --ink:#000;--slate:#293237;--slate-lift:#39454B;
  --flare:#FF3D00;--cream:#F2EFEA;--cream-dim:rgba(242,239,234,.62);
  --display:'Big Shoulders Display',sans-serif;--body:'Montserrat',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-weight:300;line-height:1.7;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 6vw}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,61,0,.15)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:38px}
.brand .n{font-weight:600;font-size:14px;letter-spacing:.14em;display:block}
.brand .n i{font-style:normal;color:var(--flare)}
.brand .s{display:block;font-size:7px;letter-spacing:.42em;color:var(--cream-dim);margin-top:2px}
.site-nav{display:flex;gap:28px}
.site-nav a{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-dim);transition:color .3s}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--flare)}
@media (max-width:640px){
  .site-head .wrap{height:62px}.brand img{width:30px}.brand .n{font-size:11px}.brand .s{font-size:5.5px}
  .site-nav{gap:16px}.site-nav a{font-size:9.5px;letter-spacing:.2em}
}

/* page intro */
.intro{padding-top:12vh;padding-bottom:8vh}
.eyebrow{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--flare);margin-bottom:18px;font-weight:500}
h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.6rem);line-height:.95;letter-spacing:.005em}
h1 i{font-style:normal;color:var(--flare)}
.lede{margin-top:26px;max-width:62ch;font-size:clamp(1rem,1.6vw,1.12rem);color:rgba(242,239,234,.8)}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:.02em;line-height:1.05}
h3{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:.04em}
section{padding:8vh 0}
section + section{border-top:1px solid rgba(242,239,234,.08)}
p + p{margin-top:14px}
.muted{color:var(--cream-dim)}

/* projects */
.project{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;padding:7vh 0;border-top:1px solid rgba(242,239,234,.08)}
.project:first-of-type{border-top:0}
.film{position:relative}
.film .watch{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.6);border:1px solid rgba(255,61,0,.6);color:var(--cream);font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:11px 16px;cursor:pointer;backdrop-filter:blur(4px);transition:background .3s,color .3s}
.film .watch:hover{background:var(--flare);color:#000}
.project video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:linear-gradient(150deg,var(--slate-lift),var(--slate));
  border:1px solid rgba(255,61,0,.25)}
.project .tag{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--flare);margin-bottom:12px;font-weight:500}
.project h2{margin-bottom:14px}
.project p{color:rgba(242,239,234,.8)}
.project dl{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.85rem}
.project dt{color:var(--cream-dim);letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;padding-top:3px}
@media (max-width:860px){.project{grid-template-columns:1fr;gap:26px}}

/* stills grid */
.stills{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:36px}
.stills figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--slate);border:1px solid rgba(242,239,234,.08)}
.stills img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.stills figure:hover img{transform:scale(1.05)}
.stills figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.9))}
.stills figcaption b{display:block;font-family:var(--display);font-size:1.1rem;letter-spacing:.05em;font-weight:700}
.stills figcaption span{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--flare)}

/* about blocks */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px;margin-top:36px}
.cols h3{margin-bottom:10px}
.cols h3 i{font-style:normal;color:var(--flare);margin-right:8px}
.cols p{color:rgba(242,239,234,.8);font-size:.96rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips span{border:1px solid rgba(255,61,0,.35);border-radius:999px;padding:7px 16px;font-size:.78rem;letter-spacing:.08em}
.faq{margin-top:30px}
.faq details{border-bottom:1px solid rgba(242,239,234,.1);padding:20px 0}
.faq summary{cursor:pointer;font-weight:500;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--flare);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:rgba(242,239,234,.78);max-width:72ch}

/* call to action */
.cta{text-align:center;padding:14vh 0}
.cta h2{font-size:clamp(2.2rem,6vw,4.4rem)}
.cta h2 em{font-style:normal;color:var(--flare)}
.btns{margin-top:40px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.btn{font-size:12px;letter-spacing:.28em;text-transform:uppercase;padding:17px 36px;border:1px solid var(--flare);transition:background .3s,color .3s}
.btn.primary{background:var(--flare);color:#000;font-weight:500}
.btn.primary:hover{background:transparent;color:var(--flare)}
.btn.ghost{color:var(--flare)}
.btn.ghost:hover{background:var(--flare);color:#000}

/* footer */
.site-foot{padding:50px 0;border-top:1px solid rgba(255,61,0,.15);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
.site-foot nav{display:flex;flex-wrap:wrap;gap:24px}
.site-foot a{color:var(--cream)}
.site-foot a:hover{color:var(--flare)}
.site-foot .mail{color:var(--flare);text-transform:none;letter-spacing:.05em;font-size:14px}