@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(../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}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:#000;color:#fff;font:13px/1.65em Montserrat,Helvetica,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{border:0;max-width:100%;height:auto}
ul{list-style:none;margin:0;padding:0}
h1,h2,h4{margin:0;font-weight:400}

/* ---------- header ---------- */
#header{position:absolute;top:0;left:0;width:100%;height:89px;z-index:100;background:transparent}
.logo{position:absolute;left:50px;top:0;display:block;width:88px;height:88px}
.logo img{display:block;width:88px;height:88px}
.main-nav{position:absolute;right:50px;top:0}
#menu{display:flex}
#menu>li.top{position:relative}
#menu>li.top>a{display:block;height:88px;line-height:88px;padding:0 13px;position:relative}
.t{font-size:13px;font-weight:600;letter-spacing:4.55px;transition:opacity .2s}
.fx{position:absolute;left:10%;width:80%;bottom:20px;height:2px;background:#fff;opacity:0;visibility:hidden;transition:opacity .2s}
#menu>li.top:hover .fx{opacity:1;visibility:visible}
#menu>li.top:hover .t{opacity:.7}
.sub-menu{position:absolute;top:88px;left:0;width:208px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
#menu>li.top:hover>.sub-menu,#menu>li.top:focus-within>.sub-menu{opacity:1;visibility:visible}
.sub-menu li{height:28px;line-height:30px}
.sub-menu a{display:block;font-size:12px;line-height:20px;padding:4px 15px;white-space:nowrap;transition:opacity .2s}
.sub-menu a:hover{opacity:.7}
.burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative;width:100%;background:#000}
.hero video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}

/* ---------- kansas strip ---------- */
.kansas{background:#000;width:100%}
.kansas-desktop{padding:15px 0}
.kansas-title{display:block;padding:4px 0 4px 4vw;color:#fff;font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-size:calc(3.7vw - 1px);font-weight:700;line-height:.92;letter-spacing:.004em;text-transform:uppercase;white-space:nowrap}
.kansas-mobile{display:none}

/* ---------- tiles ---------- */
.work{display:grid;grid-template-columns:1fr 1fr;background:#000}
.col{min-width:0}
.tile{position:relative;aspect-ratio:16/9;height:round(down,28.125vw,1px);overflow:hidden;container-type:inline-size;background:#000}
.tile-bg,.tile-video,.play{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.tile-bg{object-fit:cover;transform:scale(1);transform-origin:50% 50%}
.tile-video{background:#000;z-index:1}
.tile-video[hidden]{display:none}
video.tile-video{object-fit:contain}
.play{z-index:3;padding:0;margin:0;background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.play::after{content:"";position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;background:url(../icons/skin.png) -300px -150px;transition:none}
.tile:hover .play::after,.play:focus-visible::after{background-position:-375px -150px}
.tile.playing .play{display:none}
.tile h1,.tile h4{position:absolute;left:1.562cqw;margin:0;color:#fff;font-family:Arial,sans-serif;font-weight:400;line-height:normal;white-space:nowrap;pointer-events:none;z-index:4}
.tile h1{top:.781cqw;font-size:3.281cqw}
.tile h4{top:4.68cqw;font-size:2.188cqw}
/* entrance (first scroll into view) */
.js .tile:not(.in) .tile-bg{transform:scale(1.2)}
.js .tile:not(.in) .play,.js .tile:not(.in) h1,.js .tile:not(.in) h4{opacity:0}
.tile .tile-bg{transition:transform 1.6s ease-out}
.tile .play,.tile h1,.tile h4{transition:opacity .8s ease .3s}

/* ---------- footer ---------- */
#footer{background:#000;color:#fff;padding:10.6px 50px 0;font-family:LimerickSerial,Montserrat,Arial,sans-serif;overflow:hidden}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;min-height:29px}
.footer-links p{margin:0}
.footer-links a{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.footer-links a:hover{opacity:.75}
.footer-links span{display:inline-block;position:relative;margin-left:3px;font:900 20px/1 "Arial Black",Arial,sans-serif;-webkit-text-stroke:.35px currentColor;transform:rotate(-14deg);transition:transform .2s ease}
.footer-links a:hover span{transform:translateX(4px) rotate(-14deg)}
.footer-contact-grid{display:grid;grid-template-columns:max-content max-content max-content;justify-content:space-between;column-gap:28px;row-gap:18px;width:77%;margin-top:23.4px}
.footer-contact{white-space:nowrap}
.footer-contact:last-child{justify-self:end}
.footer-contact div{font-size:13px;font-weight:600;line-height:1.55}
.footer-contact a{display:inline-block;font-size:13px;font-style:italic;font-weight:600;line-height:1.4}
.footer-contact a:hover{opacity:.75}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-start;height:180px;margin-top:24px}
.footer-wordmark{position:relative;left:-20px;margin-top:-13px;transform:translateY(24px);color:#fff;font-size:clamp(58px,12.65vw,208px);font-weight:800;line-height:.78;letter-spacing:-.055em;white-space:nowrap}
.footer-zebra{display:block;width:180px;height:180px;margin-right:60px;flex:none;object-fit:contain}

/* ---------- scroll to top ---------- */
#scroll-top{position:fixed;right:30px;bottom:30px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:200}
#scroll-top svg{fill:#fff;stroke:#fff}
#scroll-top.show{opacity:1;visibility:visible}

/* ---------- tablet & mobile (<990) ---------- */
@media (max-width:989px){
 #header{position:relative;height:81px;background:#000}
 .logo{left:30px;width:80px;height:80px}.logo img{width:80px;height:80px}
 .burger{display:block;position:absolute;right:30px;top:0;width:55px;height:80px;background:none;border:0;padding:0;cursor:pointer}
 .burger span{position:absolute;right:0;width:35px;height:2px;background:#fff;transition:transform .3s,opacity .2s}
 .burger span:nth-child(1){top:32px}.burger span:nth-child(2){top:41px}.burger span:nth-child(3){top:50px}
 .burger[aria-expanded=true] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
 .burger[aria-expanded=true] span:nth-child(2){opacity:0}
 .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
 .main-nav{position:fixed;top:0;right:0;width:min(82vw,320px);height:100%;background:#000;padding:90px 0 30px;overflow-y:auto;transform:translateX(100%);transition:transform .35s ease;z-index:150}
 .menu-open .main-nav{transform:none}
 #menu{display:block}
 #menu>li.top>a{height:auto;line-height:1.4;padding:14px 30px}
 .fx{display:none}
 .sub-menu{position:static;width:auto;opacity:1;visibility:visible;display:none;padding:0 0 8px}
 #menu>li.top.open>.sub-menu{display:block}
 #menu>li.top:hover>.sub-menu{opacity:1}
 .sub-menu li{height:auto}
 .sub-menu a{padding:6px 45px;line-height:20px}
 .hero video{aspect-ratio:1280/900}
 .kansas-desktop{display:none}
 .kansas-mobile{display:block;padding:15px 30px}
 .kansas-mobile h2{margin:9.8px 0;color:#fff;font-size:28px;font-weight:700;line-height:30.8px;letter-spacing:1px;text-align:center;text-transform:uppercase}
 .work{grid-template-columns:1fr}
 .tile{height:auto}
 #footer{padding:0 30px}
 .footer-links{min-height:52px;gap:10px 16px}
 .footer-links a{font-size:10px}
 .footer-links span{top:2px;font-size:17px;-webkit-text-stroke:.25px currentColor}
 .footer-contact-grid{grid-template-columns:1fr;row-gap:22px;width:100% !important;margin-top:48px;justify-content:normal}
 .footer-contact:last-child{justify-self:start}
 .footer-contact div,.footer-contact a{font-size:12px}
 .footer-bottom{display:block;height:auto;margin-top:49px}
 .footer-wordmark{position:static;transform:none;margin:0;font-size:clamp(42px,14vw,68px);line-height:.82}
 .footer-zebra{margin:25px 0 0}
}
@media (min-width:768px) and (max-width:989px){
 .footer-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-wordmark{font-size:clamp(58px,12.65vw,208px)}
}

/* ======================================================================
   STICKY HEADER + SCROLL PROGRESS  (added for static build)
   Header is fixed. Transparent at the top of the page; once the page has
   scrolled it gets a black background. White text throughout.
   ====================================================================== */
#header{position:fixed;transition:background-color .3s ease,box-shadow .3s ease}
#header.stuck{background:#000}
#header.stuck .sub-menu{background:#000}
.sub-menu{padding:0 0 10px}
#progress{position:fixed;left:0;top:89px;width:100%;height:3px;z-index:99;pointer-events:none;background:transparent}
#progress i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
body.has-js-progress #progress i{transition:transform .08s linear}

/* ---------- director / photographer page ---------- */
.dir-banner{position:relative;width:100%;margin:0;aspect-ratio:1280/400;overflow:hidden;background:#000}
.dir-banner video,.dir-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dir-banner h1{position:absolute;left:0;right:0;bottom:8.6%;margin:0;text-align:center;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:clamp(26px,5.08vw,65px);font-weight:400;line-height:1.1;text-transform:uppercase;z-index:2;padding:0 20px}
.dir-bio{width:100%;max-width:60%;margin:0 auto;padding:40px 20px 36px;text-align:center}
.dir-bio p{margin:0 0 1.65em}
.dir-bio a{color:#fff}
.dir-bio .ig{margin:0 0 0;font-weight:600;letter-spacing:.1em}
.dir-bio .ig a:hover{opacity:.7}
.bio-mobile{display:none}
.bio-more{margin:0 0 1em;text-align:left}
.bio-more summary{cursor:pointer;list-style:none;font-weight:600;letter-spacing:.1em;padding:12px 0;border-top:1px solid #333;border-bottom:1px solid #333;display:flex;justify-content:space-between}
.bio-more summary::-webkit-details-marker{display:none}
.bio-more summary::after{content:"+";font-size:20px;line-height:1}
.bio-more[open] summary::after{content:"\2212"}
.bio-more div{padding-top:1em}
.dir-work{display:grid;grid-template-columns:1fr 1fr;background:#000}
@media (max-width:989px){
 #header{height:81px;background:#000;position:fixed}
 #progress{top:81px}
 main{padding-top:81px}
 .burger{z-index:160}
 .dir-bio{max-width:100%}
}
@media (max-width:767px){
 .bio-desktop{display:none}.bio-mobile{display:block}
 .dir-work{grid-template-columns:1fr}
 .dir-banner{aspect-ratio:960/400}
 .dir-banner h1{bottom:9%;font-size:clamp(22px,7.5vw,44px)}
}
@media (prefers-reduced-motion:reduce){#header{transition:none}body.has-js-progress #progress i{transition:none}}

/* Limerick Serial Heavy (SoftMaker) - Fontspring webfont licence; licensee: Bravo Zulu. Web use only, do not redistribute. */
@font-face{font-family:LimerickSerial;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/limerick_serial-heavy-webfont.woff2) format("woff2"),url(../fonts/limerick_serial-heavy-webfont.woff) format("woff")}
/* ---------- footer: BRAVO ZULU wordmark + zebra (zebra = cap height of the wordmark, bottom-right) ---------- */
@font-face{font-family:MontserratHeavy;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-latin-800.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}
:root{--f:clamp(26px,calc((100vw - 100px)/7.9),190px)}
#footer .footer-bottom{gap:calc(var(--f)*.3);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;height:auto;margin-top:24px;padding-bottom:28px}
#footer .footer-wordmark{position:static;transform:none;margin:0;font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:900;font-size:calc(var(--f)*.92);line-height:.72;height:calc(var(--f)*.66);letter-spacing:-.02em;white-space:nowrap;text-transform:uppercase;display:block}
#footer .footer-zebra{display:block;flex:none;height:calc(var(--f)*.762);width:calc(var(--f)*.762);margin:0;object-fit:contain}

/* footer, tablet & mobile: wordmark and zebra sit together (no gap), sized to fill the row */
@media (max-width:989px){
 :root{--f:clamp(26px,calc((100vw - 60px)/7.7),120px)}
 #footer .footer-bottom{justify-content:flex-start;gap:calc(var(--f)*.1)}
}

/* footer, phones + tablets (client reference): one line, edge to edge, zebra at the right, taller than the caps and centred on them */
@media (max-width:989px){
 :root{--f:clamp(26px,calc((100vw - 20px)/7.6),190px)}
 #footer .footer-bottom{justify-content:space-between;align-items:center;gap:calc(var(--f)*.12);margin-left:-20px;margin-right:-20px}
 #footer .footer-wordmark{font-size:calc(var(--f)*.92);height:calc(var(--f)*.66);line-height:.72;white-space:nowrap;letter-spacing:-.035em}
 #footer .footer-zebra{height:calc(var(--f)*1.2);width:calc(var(--f)*1.2);transform:none}
}

/* footer: Instagram icon on the right of the contact text; Produk.Studio link removed */
#footer{position:relative}
#footer .footer-contact-grid{margin-top:40px}
#footer .footer-ig{position:absolute;right:50px;top:50px;display:block;width:28px;height:28px;color:#fff;transition:opacity .2s}
#footer .footer-ig:hover{opacity:.7}
#footer .footer-ig svg{display:block}
@media (max-width:989px){
 #footer .footer-contact-grid{margin-top:40px}
 #footer .footer-ig{right:30px;top:40px}
}

/* ======================================================================
   NO-JAVASCRIPT FALLBACKS (html gets .js from a one-line script in <head>)
   ====================================================================== */
html:not(.js) #header{background:#000}
html:not(.js) .sub-menu{background:#000}
html:not(.js) #progress{display:none}
html:not(.js) .play{display:block}
@media (max-width:989px){
 html:not(.js) .burger{display:none}
 html:not(.js) #header{position:relative;height:auto;padding-top:81px;padding-bottom:10px}
 html:not(.js) .main-nav{position:static;width:auto;height:auto;transform:none;padding:0;overflow:visible}
 html:not(.js) .sub-menu{display:block}
 html:not(.js) main{padding-top:0}
}

/* ---------- 404 ---------- */
.nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:140px 30px 80px;background:#000;color:#fff}
.nf .code{font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:800;font-size:clamp(90px,22vw,260px);line-height:.9;letter-spacing:-.03em;margin:0}
.nf h1{font-size:clamp(18px,2.4vw,28px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:18px 0 10px}
.nf p{margin:0 0 28px;opacity:.75;max-width:46ch}
.nf ul{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
.nf li a{font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid #fff;display:inline-block}
.nf li a:hover{opacity:.7}

html:not(.js) #hero-video{display:none}

/* ---------- directors landing page ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.dir-index{display:grid;grid-template-columns:1fr 1fr;padding-top:89px;background:#000}
.dtile{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;container-type:inline-size;background:#000;color:#fff}
.dtile .tile-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform 1.6s ease-out}
.dtile h2{position:absolute;left:1.67cqw;top:.83cqw;margin:0;z-index:2;font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:3.5cqw;line-height:1.2;color:#fff;text-transform:uppercase;text-shadow:0 0 12px rgba(0,0,0,.25)}
.dtile:hover .tile-bg,.dtile:focus-visible .tile-bg{transform:scale(1.04)}
.dtile:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.js .dtile:not(.in) .tile-bg{transform:scale(1.2)}
.js .dtile:not(.in) h2{opacity:0}
.dtile h2{transition:opacity .8s ease .3s}
@media (max-width:989px){.dir-index{padding-top:0}}
@media (max-width:767px){.dir-index{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dtile .tile-bg,.dtile h2{transition:none}}

/* ---------- home: banner shrinks so the black strip is always on screen at load ---------- */
.landing{display:flex;flex-direction:column;max-height:100vh;max-height:100svh}
.landing>.kansas{flex:none}
.landing>.hero{flex:0 1 auto;width:100%;min-height:0;aspect-ratio:16/9;overflow:hidden}
.landing .hero video,.landing .hero img{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;background:#000}
@media (max-width:989px){.landing{max-height:calc(100vh - 81px);max-height:calc(100svh - 81px)}}
@media (max-width:767px){.landing>.hero{aspect-ratio:1280/900}}

/* ---------- photographer pages: banner image, masonry gallery (laid out at build time), lightbox ---------- */
.ph-gallery{display:flex;align-items:flex-start;gap:15px;padding:0 50px 80px;background:#000}
.ph-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:15px}
.ph-item{display:block;background:#0b0b0b;overflow:hidden}
.ph-item img,.ph-item video{display:block;width:100%;height:auto}
a.ph-item{cursor:zoom-in}
a.ph-item:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:767px){.ph-gallery{flex-direction:column;padding:0 29px 50px}.ph-col{display:contents}.ph-item{order:var(--o)}}
/* balanced galleries: each item carries its own aspect-ratio (trimmed a few percent) so all three columns end on one line;
   the last item in each column stretches to take up any few pixels left over from the gaps */
.ph-fit{align-items:stretch}
.ph-fit .ph-item{position:relative}
.ph-fit .ph-item img,.ph-fit .ph-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-fit .ph-col>.ph-item:last-child{flex:1 0 auto}
@media (max-width:767px){.ph-fit .ph-item{aspect-ratio:auto!important;position:static}.ph-fit .ph-item img,.ph-fit .ph-item video{position:static;height:auto}.ph-fit .ph-col>.ph-item:last-child{flex:none}}
.lb{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:90vh;width:auto;height:auto;display:block}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font:inherit;padding:16px;opacity:.75}
.lb button:hover,.lb button:focus-visible{opacity:1}
.lb .x{top:6px;right:10px;font-size:36px;line-height:1}
.lb .p,.lb .n{top:50%;transform:translateY(-50%);font-size:44px;line-height:1}
.lb .p{left:6px}.lb .n{right:6px}
body.lb-open{overflow:hidden}

/* ---------- about us (text page) ---------- */
.about{width:60%;max-width:772px;margin:0 auto;padding:113px 0 120px;text-align:center}
.about h1{font-size:5.55vw;font-weight:600;line-height:1.15;text-transform:uppercase;margin:0 0 .22em}
.about p{margin:11px 0}
.about blockquote{margin:30px 0 0;padding:0}
.about blockquote p{margin:0;font-size:20px;line-height:22px;font-weight:700}
.about blockquote .q{font-style:italic}
@media (max-width:767px){.about{width:auto;max-width:none;padding:0 29px 80px}.about h1{font-size:28px;line-height:30.8px;font-weight:700;letter-spacing:1px;margin:0 0 10px}}
.about p a{text-decoration:underline}
.about p a.b{font-weight:700}
.about p a:hover{opacity:.7}
/* contact us */
.about.contact{padding-bottom:100px}
.c-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:0;row-gap:50px;align-items:center;max-width:740px;margin:80px auto 0}
.c-grid .c{padding:0 10px}
.c-grid .c p{margin:11px 0}
.c-grid .c h2{margin:22px 0 0;font-size:34px;line-height:37.4px;font-weight:700}
.c-grid .c .r+h2{margin-top:11px}
.c-grid .c a{text-decoration:underline}
.c-grid .c-3 h2{margin-top:0}
@media (max-width:767px){.c-grid{display:flex;flex-direction:column;gap:0;margin:20px 0 0}.c-grid .c{padding:0 12%;margin-bottom:20px}.c-1{order:1}.c-3{order:2}.c-2{order:3}.c-4{order:4}.c-grid .c-2{margin-top:12px}.c-grid .c-4{margin-top:24px}.c-grid .c-3 h2{margin-top:0}.c-grid .c .r+h2{margin-top:22px}.c-grid .c a{text-decoration:none}.c-grid .c-4 a{text-decoration:underline}.c-grid .c-4{padding:0}}

/* ---------- director & photographer pages: name in the site's heavy Montserrat; no BRAVO ZULU wordmark footer ---------- */
.dir-banner h1{font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:800;letter-spacing:-.02em;white-space:nowrap}

/* ---------- mobile home, full-screen banner with the Kansas strip pinned to the bottom ---------- */
@media (max-width:767px){
 html.fullhero #header{background:transparent}
 html.fullhero #header.stuck{background:#000}
 html.fullhero main{padding-top:0}
 html.fullhero .landing{height:100vh;height:100svh;max-height:none}
 html.fullhero .landing>.hero{flex:1 1 auto;aspect-ratio:auto;min-height:0}
 html.fullhero .landing .hero video{object-position:50% 35%}
 html.fullhero .kansas-mobile{padding:16px 16px 26px}
 html.fullhero .kansas-mobile h2{margin:0;font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:800;font-size:clamp(28px,9.4vw,44px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
}

/* ---------- director pages: mobile banner video bleeds under the menu like desktop (body.dir-bleed) ---------- */
@media (max-width:767px){
 body.dir-bleed #header{background:transparent}
 body.dir-bleed #header.stuck{background:#000}
 body.dir-bleed main{padding-top:0}
 body.dir-bleed .dir-banner{aspect-ratio:auto;height:calc(41.67vw + 81px);min-height:calc(81px + 150px)}
}

/* ======================================================================
   NAV (Oct 2026): WORK (Motion + Stills, always shown) and SERVICE
   ====================================================================== */
body[data-section="directors"] #menu>li.nav-directors .fx,
body[data-section="photographers"] #menu>li.nav-photographers .fx,
body[data-section="about"] #menu>li.nav-about .fx,
body[data-section="service"] #menu>li.nav-service .fx,
body[data-section="stills"] #menu>li.nav-work .fx{opacity:1;visibility:visible}
#work{scroll-margin-top:89px}
@media (min-width:990px){
 body[data-section="stills"] .work-sub .ws-stills{text-decoration:underline;text-underline-offset:5px}
}
@media (max-width:989px){
 #work{scroll-margin-top:81px}
 #menu>li.nav-work>.sub-menu{display:block}
 body[data-section="stills"] .work-sub .ws-stills{text-decoration:underline;text-underline-offset:5px}
 /* menu panel slides in from the right, see-through, page dimmed behind it */
 .main-nav{background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
 .menu-open #header::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.35)}
}

/* ======================================================================
   STILLS PAGE
   ====================================================================== */
.stills{padding:130px 50px 90px;background:#000}
.stills-hint{display:none}
.stills-list{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:0;list-style:none}
.stills-list li{max-width:100%}
.stills-name{display:block;margin:0;padding:0;border:0;background:none;color:#fff;cursor:pointer;font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:800;font-size:calc((100vw - 120px) / 7.6);line-height:.86;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;text-align:left;transition:opacity .2s}
.stills-list.hovering .stills-name{opacity:.22}
.stills-list.hovering .stills-name.on{opacity:1}
.stills-name:focus-visible{outline:2px solid #fff;outline-offset:4px}
.stills-pv{position:fixed;left:0;top:0;z-index:30;width:min(24vw,340px);aspect-ratio:4/5;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .2s;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.stills-pv.show{opacity:1}
/* carousel pop-up */
.sc{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;--iw:min(32vw,calc(min(68vh,760px) * .8))}
.sc[hidden],.sc-track[hidden]{display:none}
.sc-box{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.sc-top{display:flex;justify-content:space-between;align-items:baseline;width:var(--iw)}
.sc-title{margin:0;font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:800;font-size:30px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase}
.sc-count{margin:0;font-size:13px;letter-spacing:.16em;color:#bdbdbd}
.sc-track{position:relative;width:100%;display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:8px calc(50% - var(--iw) / 2);box-sizing:border-box;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.sc-track::-webkit-scrollbar{display:none}
.sc-i{flex:none;width:var(--iw);aspect-ratio:4/5;scroll-snap-align:center;margin:0;padding:0;border:0;background:#111;cursor:pointer;transform:scale(.84);opacity:.38;transition:transform .45s ease,opacity .45s ease}
.sc-i:hover{opacity:.6}
.sc-i.on{transform:none;opacity:1;cursor:grab}
.sc-i img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.sc-bar{width:var(--iw)}
.sc-rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}
.sc-rng::-webkit-slider-runnable-track{height:2px;background:#4a4a4a}
.sc-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:72px;height:6px;margin-top:-2px;border-radius:3px;background:#fff;cursor:grab}
.sc-rng::-moz-range-track{height:2px;background:#4a4a4a}
.sc-rng::-moz-range-thumb{width:72px;height:6px;border:0;border-radius:3px;background:#fff;cursor:grab}
.sc-rng:focus-visible{outline:2px solid #fff;outline-offset:4px}
.sc-x{position:absolute;top:24px;right:28px;z-index:2;width:48px;height:48px;padding:0;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.sc-x:hover{opacity:.7}
body.sc-open{overflow:hidden}
@media (max-width:989px){
 .stills{padding:101px 30px 60px}
 .stills-hint{display:block;margin:0 0 14px;font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#a9a9a9}
 .stills-name{font-size:calc((100vw - 60px) / 7.6);line-height:.9}
 .stills-pv{display:none}
 .sc{--iw:78vw;align-items:flex-start;padding-top:72px}
 .sc-title{font-size:22px}
 .sc-x{top:12px;right:16px}
 .sc-track{cursor:auto}
}

/* ======================================================================
   SERVICE PAGE
   ====================================================================== */
.svc-hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.svc-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.svc-intro{max-width:1100px;margin:0 auto;padding:72px 50px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.svc-h1{margin:0;font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:800;font-size:clamp(64px,15vw,280px);line-height:.82;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.svc-copy{max-width:760px;margin-top:48px}
.svc-copy p{margin:0 0 20px;font-size:20px;line-height:1.55;color:#ececec}
.svc-copy .ph{color:#9a9a9a}
.svc-cta{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:14px}
.svc-btn{display:inline-flex;align-items:center;justify-content:center;min-width:210px;height:52px;padding:0 34px;border-radius:999px;background:#fff;color:#000;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.svc-btn:hover{background:#d9d9d9}
.svc-alt{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font-size:13px;color:#bdbdbd}
.svc-alt a{color:#fff}
.svc-copybtn{height:32px;padding:0 14px;border:1px solid #555;border-radius:999px;background:none;color:#fff;font:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer}
.svc-copybtn:hover{border-color:#fff}
.svc-tst{max-width:1240px;margin:0 auto;padding:72px 50px 104px}
.svc-tst h2{margin:0 0 40px;font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:800;font-size:clamp(30px,4vw,56px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;text-align:center}
.svc-tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
.svc-t{margin:0;padding:30px 0 34px;border-top:1px solid #333}
.svc-t blockquote{margin:0;font-size:19px;line-height:1.5;color:#9a9a9a}
.svc-t figcaption{margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#bdbdbd}
@media (max-width:989px){
 body.svc-bleed #header{background:transparent}
 body.svc-bleed #header.stuck,body.svc-bleed.menu-open #header{background:#000}
 body.svc-bleed main{padding-top:0}
 .svc-intro{padding:48px 30px 24px}
 .svc-copy{margin-top:32px}
 .svc-copy p{font-size:17px}
 .svc-cta{width:100%}
 .svc-btn{width:100%;box-sizing:border-box}
 .svc-tst{padding:48px 30px 72px}
 .svc-tst h2{margin-bottom:24px}
 .svc-tgrid{grid-template-columns:1fr}
 .svc-t{padding:24px 0 26px}
 .svc-t blockquote{font-size:17px}
}
/* footer wordmark in Limerick Serial: natural spacing (the negative tracking was only there to mimic it with Montserrat) */
#footer .footer-wordmark{letter-spacing:0 !important}
/* footer wordmark: kerning off; A spacing is done per letter by _partials/space_a.py (.ka spans) */
#footer .footer-wordmark{font-kerning:none}
/* ---------- Limerick Serial Heavy across the site's display type (client, 20 Oct 2026) ---------- */
.kansas-title,.kansas-mobile h2,.dir-banner h1,.about h1,.svc-h1,.svc-tst h2,.stills-name,.sc-title{font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif !important;font-weight:900 !important;font-kerning:none;letter-spacing:.01em !important}
/* mobile Kansas strip: slight negative tracking + 9vw keeps it on 3 lines in Limerick with the A spacing */
.kansas-mobile h2{letter-spacing:-.01em !important;font-size:clamp(28px,9vw,44px) !important}
.ka{display:inline}

/* ---- stills: click the focused photo for the whole uncropped image (desktop) -- EXPERIMENT Oct 2026 ---- */
@media (hover:hover) and (pointer:fine) and (min-width:990px){.sc-i.on[data-full]{cursor:zoom-in}}
.sc-full{position:fixed;inset:0;z-index:5;background:#000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.sc-full[hidden]{display:none}
.sc-full img{max-width:94vw;max-height:92vh;width:auto;height:auto;display:block}
.sc-fx{position:absolute;top:24px;right:28px;width:48px;height:48px;padding:0;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.sc-fx:hover{opacity:.7}

/* Christina Poku: wide banner shown smaller on mobile so more of the face fits (Oct 2026) */
@media (max-width:767px){
 body.dir-bleed .dir-banner.ban-wide{height:calc(30vw + 81px);min-height:0}
 .dir-banner.ban-wide>img{object-position:45% 50%}
 .dir-banner.ban-wide.ban-right>img{object-position:96% 50%}
 .dir-banner.ban-wide.ban-frances>img{object-position:55% 50%}
}

/* Contact page: footer contact blocks hidden (they repeat the page) */
body.page-contact #footer .footer-contact-grid{display:none}
body.page-contact #footer{padding-top:64px}
body.page-contact #footer .footer-ig{top:20px}
body.page-contact .about.contact{padding-bottom:40px}
@media (max-width:767px){body.page-contact #footer{padding-top:48px}body.page-contact #footer .footer-ig{top:8px}body.page-contact .about.contact{padding-bottom:16px}}

/* Service page OPTION (Oct 2026): upper-case SERVICE heading with a plain white arrow. To go back: remove class svc-lc from the h1 and the svg in service/index.html */
.svc-h1.svc-lc{display:inline-flex;align-items:flex-start;gap:.04em}
.svc-h1.svc-lc .svc-arrow{width:.5em;height:.5em;flex:none;margin-top:.04em;color:#fff}
.svc-h1.svc-lc .svc-pls{text-transform:lowercase}
@media (max-width:767px){.svc-h1.svc-lc{font-size:11.5vw}}
@media (min-width:768px){.svc-h1.svc-lc{font-size:clamp(64px,11vw,210px)}}

/* Stills carousel: a square slide (Gillette Venus) is shown whole, centred, without bars */
.sc-i.sq{aspect-ratio:1/1;align-self:center}
body.page-contact #footer .footer-ig{left:50%;right:auto;transform:translateX(-50%)}

/* ---- Limerick Serial (client licence) on the HOME page first (Oct 2026). Other pages unchanged until approved. ---- */
@font-face{font-family:LimerickSerial;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/limerick_serial-regular-webfont.woff2) format("woff2")}
@font-face{font-family:LimerickSerial;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/limerick_serial-medium-webfont.woff2) format("woff2")}
@font-face{font-family:LimerickSerial;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/limerick_serial-bold-webfont.woff2) format("woff2")}
@font-face{font-family:LimerickSerial;font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/limerick_serial-italic-webfont.woff2) format("woff2")}
body[data-section="home"]{font-family:LimerickSerial,Montserrat,Helvetica,Arial,sans-serif}
body[data-section="home"] #menu>li.top>a,body[data-section="home"] #menu .sub-menu a{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}
body[data-section="home"] .tile h1{font-family:LimerickSerial,Arial,sans-serif;font-weight:700}
body[data-section="home"] .tile h4{font-family:LimerickSerial,Arial,sans-serif;font-weight:400}
body[data-section="home"] .footer-contact div{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}
body[data-section="home"] .footer-contact a{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:400;font-style:italic}
/* smoother letter edges for the Limerick Serial headings and home page text */
body[data-section="home"],.kansas-title,.kansas-mobile h2,.dir-banner h1,.about h1,.svc-h1,.svc-tst h2,.stills-name,.sc-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
.kansas-title,.kansas-mobile h2{will-change:auto}
/* ---- Limerick Serial on the SERVICE page (Oct 2026) ---- */
body[data-section="service"]{font-family:LimerickSerial,Montserrat,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
body[data-section="service"] #menu>li.top>a,body[data-section="service"] #menu .sub-menu a{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}
body[data-section="service"] .footer-contact div{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}
body[data-section="service"] .footer-contact a{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:400;font-style:italic}
body[data-section="service"] .svc-copy p{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:400}
body[data-section="service"] .svc-btn{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}
body[data-section="service"] .svc-t blockquote{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:400;font-style:italic}
body[data-section="service"] .svc-t figcaption{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}

/* ---- Limerick Serial site wide (client approved 22 Oct 2026). Weights: 400 text, 500 menu/buttons/names, 700 bold, 900 display headings, italic quotes. Montserrat stays only as fallback. ---- */
body{font-family:LimerickSerial,Montserrat,Helvetica,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
button,input,textarea,select{font-family:inherit}
#menu>li.top>a,#menu .sub-menu a{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}
.footer-contact div{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:500}
.footer-contact a{font-family:LimerickSerial,Montserrat,Arial,sans-serif;font-weight:400;font-style:italic}
#menu .sub-menu a.nav-produk{display:flex;align-items:center;gap:.4em;text-transform:uppercase}
#menu .sub-menu a.nav-produk svg{width:.85em;height:.85em;flex:none}
body .svc-copy p.svc-lead{font-size:30px;line-height:1.25;font-weight:500;margin:0 0 1em;color:#fff}
@media(max-width:767px){body .svc-copy p.svc-lead{font-size:23px}}
.dir-bio .bio-kw{margin:0 0 1.1em;font-size:12px;font-weight:500;letter-spacing:.16em;line-height:1.7;text-transform:uppercase;opacity:.75}
.dir-bio .bio-tag{margin:0 0 1em;font-size:clamp(22px,2.4vw,34px);font-weight:700;line-height:1.2}
.dir-bio p:not(.bio-kw):not(.bio-tag):not(.ig){font-size:15px;line-height:1.7}
/* PRODUK STUDIO: shown inside the About Us dropdown on desktop, as its own menu item on mobile */
#menu>li.nav-produk-top>a{display:flex;align-items:center;gap:.2em;font-weight:700}#menu>li.nav-produk-top svg{width:.95em;height:.95em;flex:none}
/* ad / project names on the video tiles: Limerick Serial on every page (Home already had it) */
.tile h1{font-family:LimerickSerial,Arial,sans-serif;font-weight:700}
.tile h4{font-family:LimerickSerial,Arial,sans-serif;font-weight:400}
.dtile h2{font-family:LimerickSerial,Arial,sans-serif;font-weight:700}
/* client tweaks 22 Oct: Service body text 3px smaller, About paragraphs 3px larger, Produk arrow tighter and heavier */
body .svc-copy p{font-size:17px}
body .svc-copy p.svc-lead{font-size:27px}
@media(max-width:767px){body .svc-copy p{font-size:14px}body .svc-copy p.svc-lead{font-size:21px}}
.about p{font-size:16px;line-height:1.6}
#menu .sub-menu a.nav-produk{gap:.15em}
#menu>li.nav-produk-top>a{gap:.2em}
#menu .sub-menu a.nav-produk svg,#menu>li.nav-produk-top svg{stroke-width:4}

/* nav (22 Oct): no About dropdown (Sustainability and Contact pages dropped); PRODUK STUDIO is a main item, bold */
#menu>li.top.nav-produk-top>a{font-weight:700}
#menu>li.top.nav-produk-top>a,#menu>li.top.nav-produk-top>a .t{font-weight:900}
#menu>li.top.nav-produk-top>a{letter-spacing:.03em}#menu>li.top.nav-produk-top>a .t{letter-spacing:.03em}
#menu>li.top.nav-produk-top>a,#menu>li.top.nav-produk-top>a .t{letter-spacing:.11em}
.about .about-sub{margin:56px 0 .5em;font-family:LimerickSerial,MontserratHeavy,Montserrat,Arial,sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,48px);line-height:1.1;text-transform:uppercase;letter-spacing:.01em}
@media(max-width:767px){.about .about-sub{margin-top:40px;font-size:26px}}
.about .about-sub{font-size:clamp(24px,2.95vw,42px)}
@media(max-width:767px){.about .about-sub{font-size:22px}}
.about .about-sub{font-size:clamp(22px,2.5vw,36px)}
@media(max-width:767px){.about .about-sub{font-size:19px}}
.about .about-sub{font-size:clamp(20px,2.1vw,30px)}
@media(max-width:767px){.about .about-sub{font-size:16px}}
/* footer: the big BRAVO ZULU letters were sitting over the email links and swallowing the clicks */
#footer .footer-wordmark,#footer .footer-wordmark *{pointer-events:none}
#footer .footer-contact{position:relative;z-index:3}
#footer .footer-ig{z-index:5}
#footer .footer-contact a{text-decoration:underline;text-underline-offset:3px}