/* site.css
   Every inline style from the Claude Design export, transcribed to classes in the
   same order the template declares them. Values are unchanged. The only additions
   are the mobile rules at the bottom, the lightbox/facade JS states, and focus rings. */

/* ---- self-hosted Montserrat (one variable file covers 400–800) ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- the export's own <style> block ------------------------------------ */
html,body{margin:0;padding:0;background:#ffffff !important;color:#141414;-webkit-font-smoothing:antialiased}
body.nr-home-lock,html.nr-home-lock{overflow:hidden !important;height:100vh !important}
body{font-family:"Montserrat",system-ui,-apple-system,sans-serif}
a{color:#141414;text-decoration:none}
a:hover{color:#141414;text-decoration:none}
header a,header a:hover,header button{text-decoration:none}
img{display:block;max-width:100%}
*{box-sizing:border-box}
@keyframes nrFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- infrastructure ------------------------------------------------------ */
[hidden]{display:none !important}
picture{display:contents}
/* every <img> carries width/height attributes so grids reserve space; keep the height fluid */
img{height:auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100px;left:16px;z-index:100;padding:10px 16px;background:#141414;color:#fff;font-size:14px}
.skip-link:focus{top:12px;color:#fff;outline:2px solid #fff;outline-offset:2px}
:focus-visible{outline:2px solid #141414;outline-offset:3px}
.main:focus{outline:none}

/* ---- page frame ---------------------------------------------------------- */
.page{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.main{flex:1;max-width:1400px;width:100%;margin:0 auto;padding:146px 40px 96px;overflow:visible}
.main--home{max-width:none;padding:96px 0 0;overflow:hidden}

/* ---- header -------------------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.site-header__inner{max-width:1400px;margin:0 auto;padding:0 40px;height:96px;display:flex;align-items:center;gap:48px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap;text-decoration:none}
.brand__name{font-family:'Montserrat',system-ui,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.7px;color:#141414;line-height:1.05}
.brand__tagline{font-size:14px;font-weight:400;letter-spacing:.1px;color:#9a9a9a}

.nav--wide{display:flex;align-items:center;gap:34px;font-size:14px;letter-spacing:-.05px}
.nav--wide>a{padding:6px 0}
.nav--wide>a:hover{opacity:.55}
.nav__work{position:relative;display:flex;align-items:center;padding:28px 0;margin:-28px 0}
.nav__work-btn{font:inherit;font-family:inherit;color:#141414;background:none;border:0;padding:6px 0;cursor:pointer}
.nav__work-btn:hover{opacity:.55}
.nav__menu{position:absolute;top:100%;left:-18px;margin-top:0;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:rgba(0,0,0,.12) 0 6px 28px;padding:10px 0;min-width:200px;animation:nrFade .18s cubic-bezier(.4,0,.6,1)}
.nav__menu a{display:block;padding:10px 22px;font-size:15px;color:#141414}
.nav__menu a:hover,.nav__menu a:focus-visible{background:#f5f5f7;outline:none}

.nav-toggle{display:none;margin-left:auto;width:48px;height:48px;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;cursor:pointer;padding:0 12px}
.nav-toggle span{display:block;height:1.5px;background:#141414}

.nav--mobile{border-top:1px solid rgba(0,0,0,.08);padding:14px 28px 26px;display:flex;flex-direction:column;gap:2px;background:#fff;animation:nrFade .18s cubic-bezier(.4,0,.6,1)}
.nav--mobile__label{font-size:12px;letter-spacing:.9px;text-transform:uppercase;color:#8a8a8a;padding:14px 0 8px}
.nav--mobile a{padding:13px 0;font-size:18px}
.nav--mobile__rule{height:1px;background:rgba(0,0,0,.08);margin:16px 0}

/* ---- home hero ----------------------------------------------------------- */
.hero{animation:nrFade .22s cubic-bezier(.4,0,.6,1);position:relative;height:calc(100vh - 96px);background:#141414;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero__img.is-active{opacity:1}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.32),rgba(0,0,0,.42))}
.hero__link{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 24px;text-decoration:none;cursor:pointer}
.hero__title{margin:0;font-family:'Montserrat',system-ui,sans-serif;font-weight:800;font-size:clamp(44px,8vw,108px);line-height:1.02;letter-spacing:-1.5px;color:#fff;text-transform:uppercase}
.hero__by{margin:0;font-size:clamp(16px,1.8vw,22px);font-weight:500;letter-spacing:.3px;color:rgba(255,255,255,.88)}
.hero__link:focus-visible{outline:2px solid #fff;outline-offset:-6px}

/* ---- branded content / music video rows ---------------------------------- */
.rows{animation:nrFade .22s cubic-bezier(.4,0,.6,1);display:flex;flex-direction:column}
.row{display:flex;gap:48px;align-items:stretch;padding:0 0 12px;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:40px}
.row__video{flex:0 0 clamp(220px,32vw,380px);width:clamp(220px,32vw,380px);aspect-ratio:1/1;background:#f0f0f2;overflow:hidden;position:relative}
.row__body{flex:1;display:flex;flex-direction:column;gap:28px}
.row__top{display:flex;align-items:stretch;gap:80px;padding-top:6px}
.row__credits{display:flex;flex-direction:column;gap:10px;justify-content:center}
.row__credits p{margin:0;font-size:15px;color:#141414;line-height:1.6}
.row__k{color:#8a8a8a}
.row__v{font-weight:700}
.row__logo{width:96px;height:96px;border-radius:50%;background:#f5f5f7;display:flex;align-items:center;justify-content:center;flex:0 0 96px;align-self:center;overflow:hidden}
.row__logo-img{width:100%;height:100%;object-fit:cover;border:0}
.row__logo--empty{border:1px dashed #c9c9cd}
.row__logo-ph{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#8a8a8a;text-align:center;padding:0 8px}
.row__stills{flex:1;min-height:0;display:flex;gap:20px;justify-content:flex-start}
.row__still{aspect-ratio:1/1;max-height:100%;max-width:calc((100% - 40px)/3);flex:0 0 auto;background:#f5f5f7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.row__still img{width:100%;height:100%;object-fit:cover;border:0}

/* ---- video facade (thumbnail + play button; iframe injected on click) ---- */
.facade{position:absolute;inset:0;display:block}
.facade__img{width:100%;height:100%;object-fit:cover;display:block}
.facade__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.facade__play{width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;transition:background .18s cubic-bezier(.4,0,.6,1)}
.facade:hover .facade__play,.facade:focus-visible .facade__play{background:rgba(0,0,0,.72)}
.facade__tri{display:block;width:0;height:0;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}
.facade__play--sm{width:56px;height:56px}
.facade__tri--sm{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:4px}
.facade__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* ---- poster grid --------------------------------------------------------- */
.grid-section{animation:nrFade .22s cubic-bezier(.4,0,.6,1)}
.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,30vw,300px),1fr));gap:36px 26px;align-items:start}
.tile{display:block;transition:transform .18s cubic-bezier(.4,0,.6,1)}
.tile:hover{transform:translateY(-3px)}
.tile__poster{position:relative;width:100%;aspect-ratio:2/3;background:#f0f0f2;overflow:hidden}
.tile__poster img{width:100%;height:100%;object-fit:cover}
.tile__overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;opacity:0;transition:opacity .18s cubic-bezier(.4,0,.6,1);background:linear-gradient(to top,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 68%)}
.tile:hover .tile__overlay,.tile:focus-visible .tile__overlay{opacity:1}
.tile__title{font-size:15px;font-weight:600;letter-spacing:-.2px;color:#141414;line-height:1.25;text-wrap:pretty}

/* ---- project page -------------------------------------------------------- */
.project{animation:nrFade .22s cubic-bezier(.4,0,.6,1)}
.project__head{max-width:900px;margin:0 auto 40px}
.project__title{font-family:'Montserrat',system-ui,sans-serif;font-weight:800;font-size:clamp(32px,5vw,64px);letter-spacing:-1.4px;line-height:1.06;text-align:center;margin:0 0 8px;text-wrap:balance;color:#141414}
.project__subtitle{margin:0;text-align:center;font-size:32px;font-weight:500;color:#9a9a9a}
.project__cols{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}

.project__meta{flex:1 1 190px;min-width:190px}
.back{display:inline-block;font-size:14px;color:#6b6b6b;margin-bottom:28px}
.back:hover{color:#141414}
.meta{margin:0}
.meta__row{border-top:1px solid rgba(0,0,0,.1);padding:14px 0}
.meta dt{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:#8a8a8a;margin-bottom:6px}
.meta dd{margin:0;font-size:15px;line-height:1.45;color:#141414}
.meta__links{display:flex;flex-direction:column;gap:5px}
.meta__links a{border-bottom:1px solid rgba(0,0,0,.22);padding-bottom:1px}
.meta__links a:hover{border-bottom-color:#141414}

.project__center{flex:3 1 460px;min-width:280px}
.trailer{position:relative;width:100%;aspect-ratio:16/9;background:#f0f0f2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.trailer__ph{display:flex;flex-direction:column;align-items:center;gap:18px}
.trailer__ph-circle{width:66px;height:66px;border-radius:999px;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center}
.trailer__ph-tri{display:block;width:0;height:0;border-left:16px solid #6b6b6b;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.trailer__ph-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#8a8a8a}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid rgba(0,0,0,.1);margin-top:0}
.strip__cell{padding:18px 0}
.strip__label{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:#8a8a8a;margin-bottom:6px}
.strip__value{font-size:15px;color:#141414;line-height:1.4}
.strip__note{font-size:12.5px;color:#9a9a9a;margin-top:2px;font-style:italic}

.project__side{flex:1.4 1 250px;min-width:230px;display:flex;flex-direction:column;gap:32px}
.side__label{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:#8a8a8a;margin-bottom:10px}
.logline{margin:0;font-size:15px;line-height:1.6;color:#141414;text-wrap:pretty}
.press{margin:0;border:1px solid rgba(0,0,0,.1);padding:20px;font-size:15px;line-height:1.55;color:#141414;text-wrap:pretty}
.press a{font-weight:700;border-bottom:1px solid rgba(0,0,0,.22);padding-bottom:1px}
.press a:hover{border-bottom-color:#141414}
.press__outlet{font-weight:700}
.watch{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 22px;background:#141414;border:1px solid #141414;font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:#ffffff;transition:opacity .18s cubic-bezier(.4,0,.6,1)}
.watch:hover{opacity:.78;color:#ffffff}
.watch__logo{height:15px;width:auto;display:block}
.watch__logo--invert{filter:invert(1)}
.watch__chip{display:inline-flex;align-items:center;justify-content:center;background:#ffffff;padding:3px 7px;border-radius:4px}
.watch__logo--chip{height:13px}
.watch:focus-visible{outline-color:#141414}

.gallery{margin-top:32px}
.gallery__heading{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8a8a8a;font-weight:400;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.1)}
.gallery__columns{columns:3 300px;column-gap:16px}
.gallery__item{display:block;width:100%;break-inside:avoid;margin:0 0 16px;padding:0;border:0;background:#f5f5f7;cursor:zoom-in;position:relative;overflow:hidden}
.gallery__item img{width:100%;height:100%;object-fit:cover;border:0}

/* ---- about --------------------------------------------------------------- */
.about{animation:nrFade .22s cubic-bezier(.4,0,.6,1)}
.about__top{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;justify-content:center}
.about__text{flex:1 1 420px;display:flex;flex-direction:column;height:340px}
.about__bio{margin:0;font-size:14px;line-height:1.7;color:#141414;text-wrap:pretty}
.about__thumbs{margin-top:28px;flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.about__thumb{width:100%;height:100%;background:#f5f5f7;overflow:hidden}
.about__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.about__family{flex:0 0 340px;width:340px;max-width:100%;aspect-ratio:1/1;object-fit:cover}
.about__flyer{margin-top:88px;padding-top:56px;border-top:1px solid rgba(0,0,0,.1);display:flex;justify-content:center}
.about__flyer-img{max-width:100%;width:480px;height:auto}

/* ---- contact ------------------------------------------------------------- */
.contact{animation:nrFade .22s cubic-bezier(.4,0,.6,1);max-width:900px}
.contact__top{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;padding-bottom:40px;border-bottom:1px solid rgba(0,0,0,.1)}
.resume{display:inline-flex;align-items:center;min-height:44px;padding:14px 26px;background:#141414;color:#ffffff;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;transition:opacity .18s cubic-bezier(.4,0,.6,1)}
.resume:hover{opacity:.78;color:#ffffff}
.form{margin-top:48px;display:flex;flex-direction:column;gap:40px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:21px;letter-spacing:-.3px;color:#141414}
.field__req{font-size:15px;color:#8a8a8a}
.field input{height:52px;padding:0 14px;font:inherit;font-size:16px;color:#141414;background:#fafafa;border:1px solid #b9b9bd;border-radius:0;outline-offset:2px}
.field textarea{padding:14px;font:inherit;font-size:16px;line-height:1.55;color:#141414;background:#fafafa;border:1px solid #b9b9bd;border-radius:0;outline-offset:2px;resize:vertical}
.field [aria-invalid="true"]{border-color:#b3261e}
.field__error{margin:0;font-size:14px;color:#b3261e}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.form__submit{min-height:52px;padding:16px 34px;background:#141414;color:#ffffff;border:0;font:inherit;font-size:13px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;cursor:pointer;transition:opacity .18s cubic-bezier(.4,0,.6,1)}
.form__submit:hover{opacity:.78}
.form__submit[disabled]{opacity:.5;cursor:default}
.form__status{font-size:15px;color:#6b6b6b}
.form__status--error{color:#b3261e}

/* ---- 404 ----------------------------------------------------------------- */
.not-found{animation:nrFade .22s cubic-bezier(.4,0,.6,1);text-align:center}
.not-found__text{margin-top:28px}

/* ---- footer -------------------------------------------------------------- */
.site-footer{border-top:1px solid rgba(0,0,0,.08)}
.site-footer__inner{max-width:1400px;margin:0 auto;padding:26px 40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:13px;color:#6b6b6b}
.site-footer a{color:#6b6b6b}
.site-footer a:hover{color:#141414}

/* ---- lightbox ------------------------------------------------------------ */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);display:flex;flex-direction:column;animation:nrFade .18s cubic-bezier(.4,0,.6,1)}
.lightbox__bar{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:#8a8a8a}
.lightbox__close{width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:22px;color:#141414;line-height:1;font-family:inherit}
.lightbox__body{flex:1;min-height:0;display:flex;align-items:center;gap:12px;padding:0 20px 44px}
.lightbox__nav{width:56px;height:56px;flex:none;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;font-size:20px;color:#141414;font-family:inherit}
.lightbox__stage{flex:1;height:100%;min-width:0;background:#f5f5f7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lightbox__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:0}
body.lightbox-open{overflow:hidden}

/* ---- responsive ---------------------------------------------------------- */
/* The export collapses the nav to the two-line menu button at 833px and below. */
@media (max-width: 833px) {
  .nav--wide{display:none}
  .nav-toggle{display:flex}
  .site-header__inner{padding:0 20px}
  .main{padding:130px 20px 64px}
  .main--home{padding:96px 0 0}
  .hero{height:calc(100dvh - 96px)}
  body.nr-home-lock,html.nr-home-lock{height:100dvh !important}
  /* poster grid: always two projects wide on phones */
  .poster-grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .project__cols{gap:40px}
  .project__side,.project__meta{flex-basis:100%;min-width:0}
  .about__text{height:auto}
  .about__thumbs{gap:10px}
  .about__thumb{aspect-ratio:1/1;height:auto}
  .about__flyer{margin-top:56px;padding-top:40px}
  .lightbox__bar{padding:16px 12px}
  .lightbox__body{gap:8px;padding:0 12px 24px}
  .lightbox__nav{width:44px;height:44px}
  .site-footer__inner{padding:26px 20px}
}
/* The branded-content row has no wrap rule in the export; stack it on phones. */
@media (max-width: 733px) {
  .row{flex-direction:column;gap:24px;padding-bottom:32px}
  .row__video{flex:0 0 auto;width:100%}
  .row__top{gap:24px;justify-content:space-between}
  .row__stills{flex:0 0 auto;min-height:auto}
  .row__still{flex:1 1 0;max-width:none;max-height:none}
  .row__stills{gap:12px}
  .row__still{max-width:calc((100% - 24px)/3)}
}
@media (prefers-reduced-motion: reduce) {
  .hero__img{transition:none}
  .tile{transition:none}
}