/* FABC — shared navigation, based on the supplied black/white split reference. */
#menuOv.agency-menu{position:fixed;inset:0;z-index:1100!important;display:grid!important;grid-template-columns:51% 49%;gap:0!important;align-items:stretch!important;justify-content:normal!important;padding:0!important;background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:hidden!important;opacity:0;transition:opacity .24s ease;isolation:isolate;box-sizing:border-box}
#menuOv.agency-menu[hidden]{display:none!important}
body.menu-open #menuOv.agency-menu{opacity:1}
.agency-menu *, .agency-menu *::before,.agency-menu *::after{box-sizing:border-box}
.agency-left{min-width:0;display:grid;place-items:center;background:#000;overflow:hidden}
.agency-preview{display:block;width:57%;aspect-ratio:1.1;margin:0;position:relative;overflow:hidden;background:#d5d5d5}
.agency-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .3s ease}
.agency-preview img.is-active{opacity:1}
.agency-brand{position:absolute;left:2.8vw;top:30px;z-index:2;color:#fff!important;font-size:clamp(32px,3.1vw,64px);font-weight:400;letter-spacing:-.045em;line-height:1;text-decoration:none;display:inline-block;padding:8px 12px}
.agency-brand svg{position:absolute;inset:-10% -7%;width:114%;height:127%;overflow:visible;pointer-events:none}
.agency-brand path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.agency-right{min-width:0;background:#fff;color:#000;padding:15vh 4.4vw 13vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow-y:auto;overscroll-behavior:contain}
.agency-links{display:grid;gap:4.3vh;margin:0;padding:0;width:100%;min-width:0}
.agency-link{display:block;width:max-content;max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:#000!important;-webkit-text-fill-color:#000;font-size:clamp(38px,5.2vw,120px);font-weight:400;line-height:1.12;letter-spacing:-.04em;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;transition:font-weight .22s ease;animation:none!important;text-shadow:none!important;filter:none!important;transform:none!important}
.agency-link.is-active,.agency-link:hover,.agency-link:focus-visible{font-weight:700}
.agency-link:focus-visible,.agency-contact a:focus-visible,.agency-secondary a:focus-visible,.agency-brand:focus-visible{outline:2px solid currentColor;outline-offset:7px}
.agency-contact-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;min-width:0}
.agency-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.5em;padding-bottom:.2em;font-size:clamp(13px,1.1vw,23px);font-weight:400;line-height:1.25;letter-spacing:-.015em;white-space:nowrap}
.agency-contact a,.agency-secondary a{color:#000;text-decoration:none}
.agency-contact a:hover,.agency-secondary a:hover{text-decoration:underline;text-underline-offset:.2em}
.agency-contact .agency-brief{margin-bottom:.15em}
.agency-secondary{position:absolute;bottom:4.5vh;left:4.4vw;display:flex;gap:24px;font-size:clamp(13px,.9vw,18px);font-weight:400;line-height:1.4}
/* Keep the closed header black over every film chapter; only Contact uses white. */
body{--fabc-header-ink:#000}
body.fabc-header-contact:not(.menu-open){--fabc-header-ink:#fff}
html body .fabc-site-header,html body .fabc-site-header .n-name,html body .fabc-site-header .n-name *,html body .fabc-site-header .home,html body .fabc-site-header .cw-name,html body .fabc-site-header .brand,html body .fabc-site-header .logo,html body .fabc-site-header .marker,html body .fabc-site-header .menu-btn,html body>.marker{color:var(--fabc-header-ink)!important}
html body .fabc-site-header .marker path,html body>.marker path{stroke:var(--fabc-header-ink)!important}
.fabc-site-header{z-index:1101!important}
html body.menu-open .fabc-site-header{background:none!important;border-color:transparent!important;backdrop-filter:none!important}
html body.menu-open .fabc-site-header .n-name,html body.menu-open .fabc-site-header .home,html body.menu-open .fabc-site-header .cw-name,html body.menu-open .fabc-site-header .brand,html body.menu-open .fabc-site-header .marker,html body.menu-open>.marker{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
html body .fabc-site-header #menuBtn{position:absolute;right:var(--gutter,5vw);top:28px!important;display:flex;align-items:center;justify-content:center;min-width:44px!important;min-height:44px!important;width:auto;height:44px!important;margin:0;padding:0!important;border:0!important;background:transparent!important;border-radius:0;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;animation:none!important;filter:none!important;cursor:pointer;line-height:1}
html body.menu-open .fabc-site-header #menuBtn{color:#000!important}
html body .fabc-site-header #menuTxt{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
html body .fabc-site-header #menuBtn .bars{display:block;position:relative;width:clamp(26px,2.5vw,48px)!important;height:30px!important}
html body .fabc-site-header #menuBtn .bars::before,html body .fabc-site-header #menuBtn .bars::after{content:'';position:absolute;left:0;right:0;top:9px;height:2px!important;border-radius:0!important;background:currentColor!important;transition:transform .24s ease,top .24s ease}
html body .fabc-site-header #menuBtn .bars::after{top:20px}
html body.menu-open .fabc-site-header #menuBtn .bars::before{top:14px!important;transform:rotate(45deg)}
html body.menu-open .fabc-site-header #menuBtn .bars::after{top:14px!important;transform:rotate(-45deg)}
html.fabc-menu-open{overflow:hidden!important}
@media(min-width:761px){.fabc-site-header.cw-top{padding-right:calc(var(--gutter,5vw) + 60px)}}
@media(max-width:1100px) and (min-width:761px){.agency-right{padding-left:3.8vw;padding-right:3vw}.agency-secondary{left:3.8vw}.agency-contact-row{grid-template-columns:1fr;gap:16px}.agency-contact{flex-direction:row;flex-wrap:wrap;gap:8px 18px}.agency-links{gap:3.8vh}.agency-contact .agency-brief{flex-basis:100%;margin:0}}
@media(max-width:760px){
 #menuOv.agency-menu{grid-template-columns:1fr}
 .agency-left{display:none}
 .agency-brand{color:#000!important;left:20px;top:21px;font-size:34px}
 .agency-right{padding:110px 7vw 90px;justify-content:center;min-height:100%;height:100dvh}
 .agency-links{gap:clamp(20px,4vh,42px)}
 .agency-link{font-size:clamp(37px,10.8vw,72px);line-height:1.1}
 .agency-contact-row{grid-template-columns:1fr;gap:22px}
 .agency-contact{font-size:16px;gap:8px}
 .agency-contact .agency-brief{margin-bottom:8px}
 .agency-secondary{left:7vw;bottom:28px;font-size:14px}
 html body .fabc-site-header #menuBtn{right:6vw;top:20px!important}
}
@media(max-height:620px){.agency-right{justify-content:flex-start;padding-top:100px;padding-bottom:90px}.agency-links{gap:20px}.agency-link{font-size:clamp(32px,4.6vw,66px)}.agency-secondary{position:static;margin-top:30px}.agency-brand{top:20px}.agency-preview{max-height:62vh;width:65%}}
@media(prefers-reduced-motion:reduce){#menuOv.agency-menu,.agency-preview img,.agency-link,.fabc-site-header #menuBtn .bars::before,.fabc-site-header #menuBtn .bars::after{transition:none!important}}

/* Motion from the supplied menu: 500ms opposing panels and a 250ms vertical reel. */
#menuOv.agency-menu { background: transparent !important; opacity: 1; transition: none; }
.agency-left { transform: translateX(-100%); }
.agency-right { transform: translateX(100%); }
.agency-left,.agency-right { transition: transform .5s cubic-bezier(.3,0,.3,1); will-change: transform; }
body.menu-open .agency-left,body.menu-open .agency-right { transform: translateX(0); }
body.menu-open #menuOv.is-closing .agency-left { transform: translateX(-100%); }
body.menu-open #menuOv.is-closing .agency-right { transform: translateX(100%); }
.agency-brand { transform: translateX(-55vw); transition: transform .5s cubic-bezier(.3,0,.3,1); }
body.menu-open .agency-brand { transform: translateX(0); }
body.menu-open #menuOv.is-closing .agency-brand { transform: translateX(-55vw); }
.agency-preview { border-radius: clamp(18px,2vw,36px); }
.agency-preview-track { position: absolute; inset: 0; transition: transform .25s ease; will-change: transform; }
.agency-preview .agency-preview-track img { position: relative; inset: auto; display: block; width: 100%; height: 100%; opacity: 1; transition: none; }
.agency-link { display: flex; align-items: center; gap: clamp(12px,1.1vw,24px); font-size: clamp(38px,4.7vw,110px); }
.agency-number { display: block; flex: 0 0 1.6em; overflow: hidden; font-size: .23em; font-weight: 400; letter-spacing: 0; line-height: 1.25; }
.agency-number span { display: block; transform: translateY(-110%); transition: transform .25s ease; }
.agency-link.is-active .agency-number span,.agency-link:focus-visible .agency-number span { transform: translateY(0); }
.agency-label { display: block; transition: transform .25s ease; }
.agency-link.is-active .agency-label { transform: translateX(10px); }
@media (max-width:760px) {
 .agency-link { font-size: clamp(37px,10.8vw,72px); }
 .agency-brand { transform: translateX(100vw); }
 body.menu-open #menuOv.is-closing .agency-brand { transform: translateX(100vw); }
}
@media (prefers-reduced-motion:reduce) {
 .agency-left,.agency-right,.agency-brand,.agency-preview-track,.agency-number span,.agency-label { transition: none !important; }
}

/* Brand green and white panels; their grain stays behind the content. */
.agency-left{background:#4dff88}
.agency-right{background:#fff;color:#000}
.agency-brand{color:#000!important}
.agency-link{--menu-colour:#c98bff;color:var(--menu-colour)!important;-webkit-text-fill-color:var(--menu-colour)}
.agency-link[data-agency-preview="portfolio"]{--menu-colour:#c98bff}
.agency-link[data-agency-preview="whatido"]{--menu-colour:#ff6ee0}
.agency-link[data-agency-preview="about"]{--menu-colour:#66d9ff}
.agency-link[data-agency-preview="contact"]{--menu-colour:#ecd2ff}
.agency-contact a{color:#000}
.agency-contact .agency-brief{color:#4dff88}
.agency-secondary a{color:#c98bff}
.agency-secondary a:last-child{color:#ff6ee0}
html body.menu-open .fabc-site-header #menuBtn{color:#000!important}
@media(max-width:760px){
 .agency-right{border-top:90px solid #4dff88;padding-top:30px;box-sizing:border-box}
 html body.menu-open .fabc-site-header #menuBtn{color:#000!important}
}

/* Each panel owns its grain. Images, labels, numbers and the brand sit above it. */
.agency-left,.agency-right{position:relative;isolation:isolate}
.agency-left::before,.agency-right::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url("grain.png") repeat;background-size:180px 180px;opacity:.12}
.agency-preview,.agency-links,.agency-secondary{z-index:1}
.agency-links{position:relative}
@media(max-width:760px){.agency-right{border-top:0;background:linear-gradient(#4dff88 0 90px,#fff 90px);padding-top:120px}}