/**
 * Swiper 12.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 27, 2026
 */

:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}
@font-face{font-family:"Delight";src:url("assets/fonts/Delight-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Delight";src:url("assets/fonts/Delight-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Delight";src:url("assets/fonts/Delight-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Delight";src:url("assets/fonts/Delight-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Delight";src:url("assets/fonts/Delight-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --ink:#0b0b0b;
  --muted:#b9b9b9;
  --soft:#d8d8d8;
  --paper:#fff;
  --dark:#000;
  --on-dark:#fff;
  --dim:#8a8a8a;
  --accent:#ff2e88;
  --panel:66vw;
  --gap:clamp(18px,2.2vw,32px);
  --font:"Delight","Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{font-family:var(--font);background:var(--paper);color:var(--ink);overflow:auto;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
html.home-scroll,
html.home-scroll body,
body.home-scroll{height:auto;min-height:100%;overflow:auto}
html.home-scroll #root,
html.home-scroll .app,
body.home-scroll #root,
body.home-scroll .app{height:auto;min-height:100%}
a,button{font:inherit;color:inherit}a{text-decoration:none}button{border:0;background:none;cursor:pointer;padding:0}.app{height:100%;position:relative}.app-error{min-height:100vh;display:grid;place-items:center;padding:32px;font:16px/1.4 var(--font);color:#111;background:#fff}.split{display:grid;grid-template-columns:minmax(560px,66vw) 1fr;height:100vh;min-height:620px}.left{position:relative;background:#fff;padding:22px var(--gap);overflow:hidden}.right{position:relative;background:#111;overflow:hidden}.logo{position:absolute;top:18px;right:28px;width:min(180px,18vw);z-index:4}.logo img{display:block;width:100%;height:auto}.topnav{position:relative;z-index:5;font-size:12px;line-height:1.15;letter-spacing:-.01em}.toprow{display:flex;gap:8px;align-items:baseline}.toprow button{text-decoration:none}.toprow button.active{text-decoration:underline;text-underline-offset:2px}.subnav{display:flex;gap:10px;margin-top:8px;color:#c7c7c7;font-size:11px}.subnav button.active{color:var(--ink);text-decoration:underline;text-underline-offset:2px}.directors{position:absolute;left:var(--gap);top:86px;z-index:4;display:flex;flex-direction:column;align-items:flex-start}.director-link{font-size:clamp(31px,4.12vw,76px);font-weight:900;line-height:.86;letter-spacing:-.075em;text-decoration:none;padding:0;margin:0;transform-origin:left center}.director-link.dim{color:#d1d1d1}.director-link:hover,.director-link:focus-visible{outline:0;color:var(--ink);transform:translateX(8px)}.lower-left{position:absolute;left:var(--gap);bottom:20px;display:flex;gap:30px;color:#bdbdbd;font-size:11px;line-height:1.23;z-index:5}.lower-left strong{display:block;color:#9b9b9b;font-weight:500;margin-bottom:2px}.lower-right{position:absolute;right:28px;bottom:20px;z-index:5;font-size:12px;line-height:1.18}.primary-stack{display:grid;gap:1px;margin-bottom:12px;text-transform:uppercase}.primary-stack button{text-align:left}.social-stack{display:grid;gap:1px;color:#bdbdbd}.about-copy,.contact-copy{position:absolute;left:39%;top:48%;transform:translateY(-50%);width:min(390px,45vw);font-size:clamp(19px,2vw,32px);font-weight:800;line-height:.96;letter-spacing:-.055em;z-index:3}.contact-copy{font-size:clamp(15px,1.55vw,25px);line-height:1.02}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}.contact-grid h4{font-size:11px;line-height:1;margin:0 0 6px;color:#a0a0a0;font-weight:500;text-transform:none}.contact-grid p{margin:0}.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01)}.right:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.32));pointer-events:none}.caption{position:absolute;right:18px;bottom:88px;z-index:4;color:rgba(255,255,255,.76);text-align:right;font-size:12px;line-height:1.16;letter-spacing:-.015em}.close-preview{position:absolute;left:14px;bottom:91px;width:25px;height:25px;border:2px solid var(--accent);border-radius:50%;color:var(--accent);z-index:5;font-size:17px;line-height:20px;display:grid;place-items:center}.close-preview:hover{background:var(--accent);color:white}.projects-page,.director-page,.detail-page{height:100vh;overflow:auto;background:#fff;color:var(--ink);padding:22px var(--gap) 58px}.bar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:42px}.bar h1,.director-title{font-size:clamp(52px,9vw,165px);font-weight:900;letter-spacing:-.095em;line-height:.76;margin:0}.filters{display:flex;gap:12px;font-size:12px;color:#bdbdbd;margin-top:14px}.filters button.active,.primary-stack button.active{color:var(--ink);text-decoration:underline;text-underline-offset:2px}.director-grid{margin-top:24px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 20px}.card{display:block;text-align:left;text-decoration:none;min-width:0}.thumb{position:relative;aspect-ratio:1.75;background:#111;overflow:hidden;margin-bottom:8px}.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.card:hover .thumb img{transform:scale(1.06)}.card-label{font-size:clamp(22px,3.2vw,58px);font-weight:900;letter-spacing:-.082em;line-height:.82}.card-label small{display:block;font-size:.31em;letter-spacing:-.035em;line-height:1.05;color:#9f9f9f;margin-top:3px}.site-footer{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px;margin-top:56px;color:#aaa;font-size:12px;line-height:1.18}.site-footer .copyright{grid-column:1/-1;font-size:10px;color:#777;text-transform:uppercase}.director-head{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:24px}.bio-toggle{text-align:right;font-size:13px;letter-spacing:-.02em}.bio{max-width:720px;font-size:clamp(18px,2.15vw,34px);font-weight:700;letter-spacing:-.055em;line-height:1.02;margin:18px 0 34px auto}.breadcrumb{font-size:12px;text-transform:uppercase;margin-bottom:18px;color:#777}.detail-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:28px;align-items:end;min-height:calc(100vh - 100px)}.detail-title{font-size:clamp(46px,7vw,128px);font-weight:900;letter-spacing:-.09em;line-height:.8;margin:0}.credits{font-size:12px;margin-top:28px}.detail-media{aspect-ratio:1.45;background:#111;overflow:hidden}.detail-media img{width:100%;height:100%;object-fit:cover;}.back{font-size:12px;text-decoration:underline;text-underline-offset:2px}.page-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:34px}.section-nav{display:flex;gap:8px;align-items:baseline;font-size:12px;line-height:1.1;letter-spacing:-.01em}.section-nav button.active{text-decoration:underline;text-underline-offset:2px}.mobile-logo{display:none}.noise{position:fixed;inset:0;pointer-events:none;opacity:.028;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:900px){body{overflow:auto}.split{display:flex;flex-direction:column;min-height:100vh;height:auto}.left{min-height:62vh;padding-bottom:170px}.right{height:38vh}.logo{display:none}.mobile-logo{display:block;width:148px;margin-left:auto}.directors{position:relative;top:auto;left:auto;margin-top:48px}.director-link{font-size:clamp(38px,13vw,72px)}.lower-left,.lower-right{position:static;margin-top:30px}.left-footer{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}.about-copy,.contact-copy{position:relative;left:auto;top:auto;transform:none;width:auto;margin-top:40px}.grid{grid-template-columns:1fr}.bar{display:block}.site-footer,.director-head,.detail-hero{grid-template-columns:1fr}.projects-page,.director-page,.detail-page{height:auto;min-height:100vh}.detail-hero{min-height:auto}.contact-grid{grid-template-columns:1fr}.caption{bottom:24px}.close-preview{bottom:26px}.subnav{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* QA/mobile fixes */
html, body { max-width: 100%; overflow-x: hidden; }
.logo, .mobile-logo { background: transparent; }
.logo img, .mobile-logo img { display: block; width: 100%; height: auto; }
.card, .director-link, .back, .section-nav button, .topnav button, .filters button { -webkit-tap-highlight-color: transparent; }
.card:focus-visible, .director-link:focus-visible, .back:focus-visible, .section-nav button:focus-visible, .topnav button:focus-visible, .filters button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

@media (max-width: 900px) {
  body { overflow-x: hidden; }
  .left { min-height: auto; padding: 18px 18px 28px; }
  .mobile-logo { width: 128px; margin: 0 0 22px auto; overflow: hidden; }
  .mobile-logo img { max-width: 100%; }
  .topnav { font-size: 14px; }
  .toprow button, .section-nav button, .back { min-height: 44px; display: inline-flex; align-items: center; }
  .subnav, .filters { gap: 8px; color: #6f6f6f; font-size: 12px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
  .subnav::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
  .subnav button, .filters button { min-height: 36px; white-space: nowrap; }
  .directors { width: 100%; margin-top: 34px; align-items: stretch; }
  .director-link { width: 100%; text-align: left; color: #111; font-size: clamp(28px, 9.6vw, 42px); line-height: .96; letter-spacing: -0.055em; padding: 5px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .director-link.dim { color: #111; }
  .right { height: 34vh; min-height: 260px; }
  .hero-img { object-position: center; }
  .lower-left { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 42px; color: #8a8a8a; font-size: 11px; }
  .lower-right { margin-top: 24px; font-size: 13px; }
  .primary-stack { display: flex; gap: 18px; margin-bottom: 12px; }
  .social-stack { display: flex; gap: 14px; flex-wrap: wrap; color: #767676; }
  .projects-page, .director-page, .detail-page { padding: 18px 18px 42px; }
  .page-controls { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); margin: -18px -18px 26px; padding: 10px 18px 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
  .section-nav { min-height: 44px; align-items: center; font-size: 13px; }
  .bar { margin-bottom: 30px; }
  .bar h1, .director-title { font-size: clamp(54px, 18vw, 82px); letter-spacing: -0.085em; line-height: .82; }
  .director-head { gap: 18px; margin-bottom: 18px; }
  .bio-toggle { min-height: 44px; text-align: right; }
  .bio { margin: 12px 0 28px; font-size: clamp(20px, 6vw, 28px); }
  .grid { gap: 34px; }
  .card-label { font-size: clamp(36px, 13vw, 60px); }
  .site-footer { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
  .detail-title { font-size: clamp(46px, 15vw, 76px); }
  .detail-media { margin-top: 18px; }
}

@media (max-width: 420px) {
  .page-controls { gap: 10px; }
  .section-nav { gap: 6px; }
  .back { max-width: 46%; text-align: left; }
  .director-link { font-size: clamp(27px, 9vw, 38px); }
}

/* Final contrast/logo polish */
.logo img, .mobile-logo img { filter: invert(1); }
@media (max-width: 900px) {
  .subnav, .filters { color: #555; }
  .lower-left { color: #666; }
  .lower-left strong { color: #333; }
  .social-stack { color: #555; }
  .site-footer { color: #666; font-size: 13px; }
  .site-footer .copyright { color: #555; }
  .director-link { font-size: clamp(26px, 8.4vw, 36px); line-height: 1; padding: 4px 0 6px; }
  .mobile-logo { width: 118px; margin-bottom: 24px; }
}

/* Final QA tightening */
.thumb { background: #f1f1f1; }
@media (max-width: 900px) {
  .director-link, .toprow button.active, .section-nav button.active, .back { color: #050505; }
  .subnav, .filters, .social-stack { color: #333; }
  .lower-left, .site-footer { color: #4a4a4a; }
  .lower-right { color: #111; }
  .thumb { background: #f1f1f1; aspect-ratio: 1.55; }
  .thumb img { object-position: center center; }
  .director-head { grid-template-columns: 1fr; }
  .bio-toggle { text-align: left; justify-content: flex-start; }
}

/* About open-by-default placement */
@media (min-width: 901px) {
  .about-copy {
    left: auto;
    right: 28px;
    top: 52%;
    width: min(310px, 29vw);
    font-size: clamp(18px, 1.55vw, 28px);
    line-height: .98;
    letter-spacing: -0.052em;
    z-index: 6;
  }
  .contact-copy {
    left: auto;
    right: 28px;
    top: 49%;
    width: min(430px, 39vw);
    z-index: 6;
  }
  .directors {
    max-width: calc(100% - 360px);
  }
}

@media (max-width: 900px) {
  .about-copy {
    display: block;
    margin-top: 28px;
    margin-bottom: 10px;
    color: #111;
  }
}

/* About default visibility/readability refinements */
.panel-eyebrow { display: none; }
@media (max-width: 900px) {
  .panel-eyebrow { display: block; font-size: 12px; line-height: 1; letter-spacing: -0.01em; margin-bottom: 10px; color: #111; text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; }
  .about-copy { color: #111; font-size: clamp(18px, 5.6vw, 24px); line-height: 1.02; letter-spacing: -0.045em; margin-top: 26px; margin-bottom: 24px; }
  .directors { margin-top: 22px; }
}
@media (min-width: 901px) {
  .panel-eyebrow { display: none; }
}

/* Desktop about final placement - keep it open, visible and out of the names column */
@media (min-width: 901px) {
  .about-copy {
    left: auto !important;
    right: 34px !important;
    top: 112px !important;
    transform: none !important;
    width: min(340px, 30vw) !important;
    max-width: calc(66vw - 560px);
    min-width: 280px;
    color: #111 !important;
    font-size: clamp(20px, 1.72vw, 31px) !important;
    line-height: .98 !important;
    letter-spacing: -0.058em !important;
    z-index: 12 !important;
    text-align: left;
  }
  .contact-copy {
    left: auto !important;
    right: 34px !important;
    top: 112px !important;
    transform: none !important;
    width: min(420px, 37vw) !important;
    color: #111 !important;
    z-index: 12 !important;
  }
  .directors {
    max-width: calc(100% - 420px) !important;
  }
  .panel-eyebrow {
    display: block !important;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: #111;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
  }
}

/* Desktop contact info stacked vertically */
@media (min-width: 901px) {
  .contact-copy {
    width: min(340px, 30vw) !important;
  }
  .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .contact-grid h4 {
    margin-bottom: 5px;
  }
}

/* Mobile top About/Contact controls */
.mobile-panel-actions { display: none; }
@media (max-width: 900px) {
  .mobile-panel-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
  }
  .mobile-panel-actions button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: #111;
  }
  .mobile-panel-actions button.active {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .lower-right .primary-stack { display: none; }
  .about-copy { margin-top: 14px; }
}

@media (max-width: 900px) {
  .panel-eyebrow { display: none !important; }
}

/* Granola/PDF direction: cinematic home + pink-dot drawer */
.cinematic-home{min-height:170vh;background:#050505;color:white;position:relative;overflow-x:hidden}.cinematic-media{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0}.home-shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.58));z-index:1;pointer-events:none}.cinematic-home .logo{position:fixed;top:24px;left:28px;right:auto;width:180px;z-index:10}.cinematic-home .logo img{filter:none}.home-tagline{position:fixed;left:32px;bottom:30px;z-index:5;font-size:clamp(28px,4.5vw,74px);font-weight:900;letter-spacing:-.075em;line-height:.86;width:min(600px,60vw);text-transform:none}.home-caption{position:fixed;right:28px;bottom:34px;z-index:5;text-align:right;font-size:14px;line-height:1.05}.home-caption span,.home-caption small{display:block}.home-caption small{color:rgba(255,255,255,.62)}.pink-menu{position:fixed;top:28px;right:32px;width:34px;height:34px;border:2px solid var(--accent);border-radius:999px;z-index:50;background:rgba(255,255,255,.02);display:grid;place-items:center}.pink-menu span{width:8px;height:8px;background:var(--accent);border-radius:50%;display:block;transition:.25s}.pink-menu.open span{width:14px;height:2px;border-radius:0;transform:rotate(45deg);position:relative}.pink-menu.open span:after{content:"";position:absolute;inset:0;background:var(--accent);transform:rotate(90deg)}.home-carousel{position:relative;z-index:5;margin-top:100vh;padding:80px 32px 120px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82) 18%,#050505)}.home-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;overscroll-behavior-x:contain;scrollbar-width:thin;cursor:grab}.home-track:active{cursor:grabbing}.home-slide{min-width:32vw;scroll-snap-align:start;text-align:left;color:white}.home-slide img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:10px;opacity:.68}.home-slide.active img{opacity:1}.home-slide span{font-size:clamp(26px,3.3vw,56px);font-weight:900;letter-spacing:-.08em;line-height:.82}.home-dots{display:flex;gap:8px;margin-top:12px}.home-dots button{width:8px;height:8px;border:1px solid white;border-radius:50%}.home-dots button.active{background:white}.go-projects{margin-top:28px;border:1px solid white;color:white;padding:12px 16px;border-radius:999px;font-size:13px;text-transform:uppercase}.drawer-open{overflow:hidden}.menu-drawer{position:fixed;inset:0;z-index:40;background:white;color:#0b0b0b;display:grid;grid-template-columns:66vw 34vw;box-shadow:20px 0 60px rgba(0,0,0,.22)}.drawer-left{position:relative;padding:24px 32px;overflow:auto}.drawer-nav,.drawer-subnav{display:flex;gap:10px;font-size:12px}.drawer-nav .active,.drawer-actions .active{text-decoration:underline;text-underline-offset:2px}.drawer-subnav{margin-top:8px;color:#555}.drawer-directors{display:flex;flex-direction:column;align-items:flex-start;margin-top:48px}.drawer-directors button{font-size:clamp(38px,5.8vw,86px);font-weight:900;letter-spacing:-.08em;line-height:.82;color:#cfcfcf}.drawer-directors button.active,.drawer-directors button:hover{color:#0b0b0b}.drawer-actions{position:absolute;right:32px;bottom:30px;display:flex;gap:18px;font-size:13px}.drawer-panel{position:absolute;right:32px;top:120px;width:min(360px,32vw);font-size:clamp(20px,1.65vw,30px);font-weight:800;line-height:.98;letter-spacing:-.055em}.drawer-panel.contact{font-size:15px;line-height:1.12;font-weight:500;letter-spacing:-.02em}.drawer-panel.contact p{margin:0 0 18px}.drawer-preview{position:relative;background:#111;overflow:hidden}.drawer-preview img{width:100%;height:100%;object-fit:cover;}.drawer-caption{position:absolute;right:18px;bottom:28px;color:rgba(255,255,255,.78);text-align:right;font-size:12px}.drawer-caption span,.drawer-caption small{display:block}.project-catalog .grid{grid-template-columns:repeat(3,1fr)}.featured-project{display:block;width:100%;text-align:left;margin:28px 0 42px}.featured-project img{width:100%;max-height:58vh;object-fit:cover;display:block;margin-bottom:12px}.featured-project span{display:block;font-size:clamp(42px,7vw,120px);font-weight:900;letter-spacing:-.09em;line-height:.78}.featured-project small{font-size:18px;color:#777}.project-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:20;font-size:76px;line-height:1;color:#111}.project-arrow.prev{left:24px}.project-arrow.next{right:24px}.detail-title span{color:#777}.detail-media img{}
@media(max-width:900px){.cinematic-home .logo{display:block;left:18px;top:18px;width:132px}.home-tagline{left:18px;bottom:82px;width:80vw;font-size:42px}.home-caption{right:18px;bottom:24px}.pink-menu{top:20px;right:18px}.home-carousel{padding:60px 18px 90px}.home-slide{min-width:78vw}.menu-drawer{grid-template-columns:1fr;overflow:auto}.drawer-preview{display:none}.drawer-left{padding:18px}.drawer-directors button{font-size:clamp(30px,10vw,44px);line-height:.96;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:left}.drawer-actions{position:static;margin-top:30px}.drawer-panel{position:static;width:auto;margin-top:20px;font-size:24px}.project-catalog .grid{grid-template-columns:1fr}.project-arrow{font-size:48px;top:auto;bottom:22px;background:rgba(255,255,255,.86);border-radius:50%;width:50px;height:50px}.project-arrow.prev{left:18px}.project-arrow.next{right:18px}.featured-project span{font-size:52px}.cinematic-media{position:absolute;height:100vh}}
/* Robust text logo matching the supplied CHUBBY FILMS reference */
.logo{width:auto;text-align:left}
.logo-wordmark{display:block;color:#0b0b0b;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,58px);line-height:.78;letter-spacing:-.085em;text-align:left}
.logo-wordmark span{display:block}
.cinematic-home .logo{width:auto}
.cinematic-home .logo-wordmark{color:#fff;font-size:clamp(34px,4vw,68px)}
.mobile-logo .logo-wordmark{font-size:34px;color:#0b0b0b}
/* Use the supplied reference logo as an image asset on the homepage */
.logo img{display:block;width:100%;height:auto}
.cinematic-home .logo{left:28px;top:24px;width:180px}
.cinematic-home .logo img{filter:none}
@media(max-width:900px){.cinematic-home .logo{left:18px;top:18px;width:132px}}


/* Fullscreen horizontal home: 3 snap slides */
html.home-scroll,
html.home-scroll body,
body.home-scroll {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
html.home-scroll #root,
html.home-scroll .app,
body.home-scroll #root,
body.home-scroll .app {
  height: 100%;
  min-height: 100%;
}
.cinematic-home {
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.cinematic-media { display: none; }
.home-shade {
  background: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.12) 46%, rgba(0,0,0,.55));
}
.home-carousel.fullscreen-horizontal {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 2;
  margin: 0;
  padding: 0;
  background: #050505;
  overflow: hidden;
}
.home-track {
  width: 100vw;
  height: 100vh;
  gap: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: auto;
}
.home-track::-webkit-scrollbar { display: none; }
.home-slide {
  position: relative;
  flex: 0 0 100vw;
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  color: #fff;
  text-align: left;
}
.home-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.55));
  pointer-events: none;
}
.home-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  margin: 0;
  opacity: .82;
  transform: scale(1.015);
  transition: opacity .45s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.home-slide.active img {
  opacity: 1;
  transform: scale(1);
}
.home-slide span {
  position: absolute;
  right: 28px;
  bottom: 84px;
  z-index: 2;
  font-size: clamp(42px, 7.5vw, 128px);
  line-height: .78;
  letter-spacing: -.085em;
  font-weight: 900;
  max-width: 64vw;
  text-align: right;
  text-transform: uppercase;
}
.home-dots {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 8;
}
.go-projects {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 8;
  color: #fff;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 999px;
  padding: 11px 15px 12px;
  backdrop-filter: blur(10px);
}
.home-caption,
.home-tagline,
.cinematic-home .logo,
.pink-menu,
.menu-drawer { z-index: 20; }
.home-caption { bottom: 116px; }
@media(max-width:900px){
  html.home-scroll,
  html.home-scroll body,
  body.home-scroll{height:100%;min-height:100%;overflow:hidden;}
  html.home-scroll #root,
  html.home-scroll .app,
  body.home-scroll #root,
  body.home-scroll .app{height:100%;min-height:100%;}
  .cinematic-home{height:100dvh;min-height:100dvh;overflow:hidden;}
  .home-carousel.fullscreen-horizontal{position:fixed;inset:0;height:100dvh;padding:0;}
  .home-track{height:100dvh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;transform:none!important;}
  .home-slide{height:100dvh;min-width:100vw;flex-basis:100vw;scroll-snap-align:start;scroll-snap-stop:always;}
  .home-slide span{right:18px;bottom:132px;max-width:78vw;font-size:clamp(42px,17vw,78px);}
  .home-tagline{bottom:92px;}
  .home-caption{right:18px;bottom:168px;}
  .home-dots{bottom:24px;}
  .go-projects{right:18px;bottom:58px;}
}

/* Non-home pages must expand normally, otherwise the fixed-height app clips the Projects grid */
html:not(.home-scroll),
body:not(.home-scroll) {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}
body:not(.home-scroll) #root,
body:not(.home-scroll) .app {
  height: auto;
  min-height: 100%;
  overflow: visible;
}
body:not(.home-scroll) .projects-page,
body:not(.home-scroll) .director-page,
body:not(.home-scroll) .detail-page {
  height: auto !important;
  min-height: 100vh;
  overflow: visible;
}
body:not(.home-scroll) .noise { position: fixed; }

/* Vimeo embed on detail view */
/* Center the play button with flexbox rather than absolute 50%/50%: Safari does not
   treat a position:relative <button> as the containing block for absolutely positioned
   children, so the old approach centered the button against .detail-media-wrap and drifted
   off-center. The poster fills via inset:0; the play badge is a centered flex item. */
.vimeo-facade{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}
.vimeo-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vimeo-play{position:relative;flex:0 0 auto;width:74px;height:74px;border-radius:50%;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.85);transition:.25s}
.vimeo-play:after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.vimeo-facade:hover .vimeo-play{background:var(--accent);border-color:var(--accent)}
.vimeo-frame{width:100%;height:100%;border:0;display:block}

/* ============ v3 redesign — Home (authoritative, overrides earlier cruft) ============ */
.cinematic-home{height:100vh;min-height:100vh;width:100vw;overflow:hidden;background:#000;color:#fff;position:relative;font-weight:500}
.cinematic-media{display:block!important;position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0}
.cinematic-home .home-shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0) 30%,rgba(0,0,0,.15) 72%,rgba(0,0,0,.55))}
/* logo + tagline, bottom-left */
.home-brand{position:fixed;left:var(--gap);top:50%;transform:translateY(-50%);z-index:20;display:flex;align-items:flex-end;gap:22px}
.cinematic-home .logo{position:static;width:clamp(120px,11vw,168px);inset:auto}
.cinematic-home .logo img{width:100%;height:auto;filter:brightness(0) invert(1)}
.home-tagline{font-size:clamp(14px,1.05vw,17px);font-weight:500;letter-spacing:-.01em;line-height:1.18;color:#fff;width:auto;position:static;padding-bottom:2px}
/* NEWEST caption, bottom-right */
.home-caption{position:fixed;right:var(--gap);top:50%;bottom:auto;transform:translateY(-50%);z-index:20;text-align:right;line-height:1.14;display:flex;flex-direction:column;align-items:flex-end}
.home-newest{font-size:11px;letter-spacing:.08em;color:#fff;margin-bottom:4px}
.home-work{font-size:clamp(17px,1.5vw,24px);font-weight:500;letter-spacing:-.01em;color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:2px}
.home-work:hover{text-decoration-color:#fff}
.home-caption small{font-size:clamp(17px,1.5vw,24px);font-weight:500;letter-spacing:-.01em;color:#fff}
.home-dots{position:static;transform:none;display:flex;gap:8px;margin-top:12px}
.home-dots button{width:9px;height:9px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:transparent;padding:0}
.home-dots button.active{background:#fff;border-color:#fff}
/* solid pink circle */
.pink-menu{position:fixed;top:24px;right:var(--gap);width:34px;height:34px;border:0;border-radius:50%;background:var(--accent);z-index:50;display:grid;place-items:center;transition:transform .2s}
.pink-menu:hover{transform:scale(1.08)}
.pink-menu span{display:none}
@media(max-width:900px){
  /* Mobile home: stacked and centred */
  .home-brand{left:20px;right:20px;top:44%;transform:translateY(-50%);gap:14px;flex-direction:column;align-items:flex-start}
  .home-brand .logo{width:132px}
  .home-tagline{font-size:15px}
  .home-caption{left:20px;right:auto;top:auto;bottom:8%;transform:none;text-align:left;align-items:flex-start}
  .home-work,.home-caption small{font-size:20px}
  .pink-menu{top:18px;right:18px}
}

/* ============ v3 redesign — Menu drawer ============ */
.menu-drawer{grid-template-columns:1fr 32vw;background:#fff;color:#0b0b0b}
.drawer-logo{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:clamp(108px,9.5vw,148px);z-index:30;padding:0}
.drawer-logo img{width:100%;height:auto;filter:brightness(0)}
.drawer-left{position:relative;padding:22px var(--gap);height:100vh;overflow:hidden}
.drawer-nav{position:relative;z-index:6;display:flex;gap:8px;align-items:baseline;font-size:15px;font-weight:500}
.drawer-nav button,.drawer-nav span{color:#0b0b0b}
.drawer-nav .active{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:2px}
.drawer-directors{position:relative;z-index:6;margin-top:5.5vh;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.drawer-directors button{font-size:clamp(23px,3.3vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.16;color:#0b0b0b;padding:0 8px;border-radius:5px;transition:background .16s,color .16s}
.drawer-directors button.active{background:var(--accent);color:#fff}
.drawer-directors sup{font-size:.3em;font-weight:500;vertical-align:super;letter-spacing:0;margin-left:.12em}
.drawer-hover-preview{position:absolute;left:54%;top:45%;transform:translate(-50%,-50%);width:min(40vw,460px);aspect-ratio:16/9;z-index:3;pointer-events:none;background:#111;overflow:hidden}
.drawer-hover-preview img{width:100%;height:100%;object-fit:cover}
.drawer-info{position:absolute;right:var(--gap);top:38%;width:min(300px,32%);text-align:right;z-index:9}
.drawer-actions{position:static;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.drawer-actions button{font-size:15px;font-weight:500;letter-spacing:.01em;color:#0b0b0b;padding:2px 8px;border-radius:4px}
.drawer-actions button.active{background:var(--accent);color:#fff}
.drawer-panel{position:static;width:auto;margin-top:16px;color:var(--accent);text-align:right;font-size:clamp(15px,1.35vw,22px);font-weight:500;line-height:1.16;letter-spacing:-.01em}
.drawer-panel.contact{font-size:14px;line-height:1.3;font-weight:500}
.drawer-panel.contact p{margin:0 0 14px}
.drawer-panel.contact strong{font-weight:600}
.drawer-panel a{color:var(--accent)}
.drawer-addresses{position:absolute;left:var(--gap);bottom:26px;display:flex;gap:40px;color:#9a9a9a;font-size:12px;line-height:1.4;z-index:6}
.drawer-addresses span{display:block}
.drawer-preview{position:relative;background:#0b0b0b;overflow:hidden}
.drawer-preview{position:relative;background:#0b0b0b;overflow:hidden}
.drawer-preview .drawer-bg{width:100%;height:100%;object-fit:cover;opacity:1;filter:blur(9px) brightness(.62);transform:scale(1.14)}
.drawer-preview::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);pointer-events:none}
.drawer-close{position:absolute;left:-19px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:2px solid var(--accent);border-radius:50%;background:#000;display:grid;place-items:center;z-index:8;padding:0}
.drawer-close span{position:relative;width:14px;height:14px;display:block}
.drawer-close span:before,.drawer-close span:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--accent);border-radius:2px}
.drawer-close span:before{transform:translate(-50%,-50%) rotate(45deg)}
.drawer-close span:after{transform:translate(-50%,-50%) rotate(-45deg)}
.drawer-close:hover{background:var(--accent)}
.drawer-close:hover span:before,.drawer-close:hover span:after{background:#fff}
@media(max-width:900px){
  .menu-drawer{grid-template-columns:1fr;overflow:auto}
  .drawer-preview{display:none}
  .drawer-logo{left:auto;right:var(--gap);transform:none;width:110px}
  .drawer-left{height:auto;min-height:100vh;padding-bottom:120px}
  .drawer-directors button{font-size:clamp(30px,9vw,44px)}
  .drawer-hover-preview{display:none}
  .drawer-info{position:static;width:auto;text-align:left;margin-top:36px}
  .drawer-actions{align-items:flex-start}
  .drawer-panel{text-align:left}
  .drawer-addresses{position:static;margin-top:36px}
}

/* ============ v3 redesign — Projects / Director / Detail (dark) ============ */
.app-dark{background:#000}
.projects-page,.director-page,.detail-page{background:#000;color:#fff;padding:104px var(--gap) 44px;height:100vh;overflow:auto}
.inner-logo{position:fixed;top:22px;left:var(--gap);width:clamp(104px,9vw,146px);z-index:30;padding:0}
.inner-logo img{width:100%;height:auto;filter:brightness(0) invert(1)}
/* Projects */
.bar{display:block;margin-bottom:34px}
.bar h1{font-size:clamp(44px,7.5vw,120px);font-weight:500;letter-spacing:-.03em;line-height:.95;color:#fff;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px;font-size:14px;font-weight:500;color:#8a8a8a}
.filters button{color:#8a8a8a}
.filters button.active{color:#fff;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 24px}
.thumb{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;margin-bottom:12px}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .thumb img{transform:scale(1.05)}
.card-label{font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1.4;color:#fff;text-transform:uppercase}
.card-label small{display:block;font-size:12px;font-weight:400;letter-spacing:.03em;color:#9a9a9a;margin-top:1px}
/* Footer (dark) */
.site-footer{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:24px;margin-top:80px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);color:#9a9a9a;font-size:13px;line-height:1.45}
.site-footer strong{color:#fff;font-weight:600}
.site-footer a{color:#9a9a9a}
.site-footer a:hover{color:#fff}
.foot-brand{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.foot-social{display:flex;gap:16px}
.foot-social a{color:#fff}
.foot-brand p{margin:0;color:#fff}
.site-footer .copyright{grid-column:1/-1;margin-top:22px;font-size:11px;color:#6a6a6a;text-transform:uppercase;text-align:right;letter-spacing:.02em}
/* Director */
.director-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:26px}
.breadcrumb{color:#8a8a8a;font-size:12px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px}
.director-title{font-size:clamp(44px,7.5vw,120px);font-weight:500;letter-spacing:-.03em;line-height:.95;color:#fff;margin:0}
.director-head .filters{margin-top:14px}
.bio-toggle{color:#fff;font-size:14px;font-weight:600;text-align:right;white-space:nowrap;letter-spacing:.02em}
.bio{color:#d8d8d8;font-size:clamp(14px,1.15vw,17px);font-weight:400;line-height:1.42;letter-spacing:0;max-width:600px;margin:0 0 30px auto;text-align:left}
.director-grid{margin-top:6px}
/* Detail */
.detail-page{display:flex;flex-direction:column}
.detail-crumb{margin-bottom:18px}
.detail-media{aspect-ratio:16/9;max-height:62vh;width:100%;background:#111;overflow:hidden;margin:0}
.detail-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:26px}
.detail-title{font-size:clamp(30px,5vw,78px);font-weight:500;letter-spacing:-.03em;line-height:1.02;color:#fff;margin:0}
.credits{color:#fff;font-size:12px;letter-spacing:.03em;line-height:1.6;text-align:left;border-top:1px solid rgba(255,255,255,.5);padding-top:8px;min-width:210px}
.project-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:25;font-size:clamp(40px,4vw,64px);line-height:1;color:var(--accent);background:none}
.project-arrow.prev{left:16px}
.project-arrow.next{right:16px}
@media(max-width:900px){
  .projects-page,.director-page{padding:88px 18px 40px;height:auto;min-height:100vh}
  /* Projects & director stay vertical (one column) on mobile */
  .grid{grid-template-columns:1fr;gap:24px}
  .site-footer{grid-template-columns:1fr 1fr}
  .director-head{flex-direction:column}
  .detail-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .project-arrow{font-size:44px}
  .filters{font-size:13px;gap:14px}
  /* Detail (project open): no vertical scroll — swipe horizontally instead */
  .detail-page{padding:80px 18px 16px;height:100dvh;overflow:hidden}
  .detail-media{max-height:44vh}
  .detail-title{font-size:clamp(26px,7vw,40px)}
  .detail-page .site-footer{display:none}
}

/* Hide detail nav arrows while the menu drawer is open (avoid z-index bleed) */
body.drawer-open .project-arrow{display:none}

.grid-empty{color:#8a8a8a;font-size:14px;margin-top:16px}

/* ============ v3.2 drawer — live frosted panel + bottom info + chrome fixes ============ */
/* Drawer slides via `left` (not transform) so backdrop-filter stays live for bg videos */
.menu-drawer{background:transparent;right:auto;width:100vw;box-shadow:none;overflow:visible}
.drawer-left{background:#fff;z-index:2;box-shadow:26px 0 70px rgba(0,0,0,.18)}
.drawer-preview{position:relative;background:rgba(12,12,14,.30);backdrop-filter:blur(22px) saturate(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.05);overflow:hidden}
/* black logo, aligned right within the white menu area */
.drawer-logo{position:absolute;top:22px;right:var(--gap);left:auto;transform:none;width:clamp(100px,8.5vw,138px);z-index:20;padding:0}
.drawer-logo img{width:100%;height:auto;filter:brightness(0)}
/* hover preview opens at the director's height (clamped via inline `top`) */
.drawer-hover-preview{position:absolute;left:40%;top:auto;width:min(34vw,410px);aspect-ratio:16/9;transform:translateY(-50%);z-index:4;background:#111;overflow:hidden}
.drawer-hover-preview img{width:100%;height:100%;object-fit:cover}
/* ABOUT/CONTACT + socials pinned to the bottom; panel expands upward above the buttons */
.drawer-info{position:absolute;right:var(--gap);bottom:26px;top:auto;width:min(320px,36%);text-align:right;z-index:9;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.drawer-actions{position:static;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.drawer-panel{position:static;width:auto;max-width:300px;margin:0}
.drawer-social{display:flex;gap:16px;font-size:15px;font-weight:500}
.drawer-social a{color:#0b0b0b}
.drawer-social a:hover{color:var(--accent)}
/* close button on the panel boundary, fully visible (not clipped) */
.drawer-close{position:absolute;top:50%;right:calc(32vw - 19px);left:auto;transform:translateY(-50%);width:38px;height:38px;border:2px solid var(--accent);border-radius:50%;background:#0b0b0b;display:grid;place-items:center;z-index:20;padding:0}
/* hide page chrome while the menu is open */
body.drawer-open .inner-logo{display:none}
body.drawer-open .pink-menu{display:none}
@media(max-width:900px){
  .drawer-preview{display:none}
  .drawer-close{right:18px}
  .drawer-hover-preview{display:none}
  .drawer-info{position:static;width:auto;text-align:left;align-items:flex-start;margin-top:30px}
  .drawer-social{color:#0b0b0b}
}

/* Detail: horizontal swipe area (touch keeps vertical for page, horizontal for nav) */
.detail-media{touch-action:pan-y}
.detail-page .site-footer{margin-top:52px}

/* Detail nav: edge arrows on desktop; a compact prev/next row under the title on mobile */
.detail-foot-main{display:flex;flex-direction:column;gap:12px}
.detail-nav-inline{display:none}
@media(max-width:900px){
  /* Lock the single-project view: no vertical scroll — swipe left/right to page projects.
     Same selector as the `body:not(.home-scroll) .detail-page{height:auto!important}` rule
     above so this later, equal-specificity !important wins. */
  body:not(.home-scroll) .detail-page{height:100dvh!important;min-height:0!important;overflow:hidden!important;padding:76px 18px 20px}
  .detail-media{max-height:42vh}
  .project-arrow{display:none}
  .detail-foot{margin-top:20px}
  .detail-nav-inline{display:flex;gap:22px;margin-top:2px}
  .detail-nav-inline button{font-size:34px;line-height:1;color:var(--accent);background:none}
}

/* ============ v3.3 fixes — close button, mobile home swipe, mobile menu scroll ============ */
/* Desktop close: PINK by default with a dark X, flips to BLACK on hover; sits just
   outside the white menu's right edge (menu is 1fr, frosted panel 32vw). */
@media(min-width:901px){
  .drawer-close{right:calc(32vw - 44px);left:auto;background:var(--accent);border-color:var(--accent)}
  .drawer-close span:before,.drawer-close span:after{background:#0b0b0b}
  .drawer-close:hover{background:#0b0b0b;border-color:#0b0b0b}
  .drawer-close:hover span:before,.drawer-close:hover span:after{background:var(--accent)}
}

/* Mobile home: let the GSAP Observer capture swipes (both axes) to change slides */
@media(max-width:900px){
  .cinematic-home{touch-action:none}
}

/* Mobile menu: the earlier `.menu-drawer{overflow:visible}` clipped the stacked
   content off-screen with no scroll. Make the drawer scroll and let its content grow. */
@media(max-width:900px){
  .menu-drawer{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .drawer-left{height:auto;min-height:100dvh;overflow:visible;padding-bottom:48px}
  .drawer-directors{margin-top:4vh}
  .drawer-addresses{margin-top:32px}
  .drawer-info{margin-top:28px}
  /* keep close reachable while the drawer scrolls: middle of the screen, on the right */
  .drawer-close{position:fixed;top:50%;right:16px;left:auto;transform:translateY(-50%);background:var(--accent);border-color:var(--accent)}
  .drawer-close span:before,.drawer-close span:after{background:#0b0b0b}
}

/* Prevent iOS Safari from auto-inflating text sizes (kept everything oversized on phones) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ============ Menu open: slide feel (à la prettybird) ============ */
/* The drawer slides via Framer with duration .8s / cubic-bezier(.4,0,.2,1) (set in script.jsx).
   The home stays full-bleed behind it — no scale-down (which left white borders). */

/* ============ Swiper hero (fullscreen cross-fade slides) ============ */
.hero-swiper{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
.hero-swiper .swiper-slide{position:relative;height:100%;overflow:hidden}
.hero-slide-img{width:100%;height:100%;object-fit:cover;display:block}
/* Vimeo background video, scaled 16:9 to cover the viewport (object-fit:cover equivalent),
   layered over its poster image. pointer-events:none so it never eats caption/menu clicks. */
.hero-slide-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;pointer-events:none;z-index:1}

/* ============ v3.4 — mobile drawer sizing so the whole menu fits a phone ============ */
@media(max-width:900px){
  /* director names were clamp(30px,9vw,44px) — 10 of them filled the screen and pushed
     ABOUT/CONTACT/socials off the bottom. Scale them down to fit. */
  .drawer-directors{margin-top:3vh;gap:0}
  .drawer-directors button{font-size:clamp(19px,5.4vw,24px);line-height:1.26;padding:1px 6px}
  /* keep each address line intact ("7 Ifield Road" was breaking after "7" — iOS was
     auto-linking it; addresses are now explicit block spans, disabled via meta too) */
  .drawer-addresses{margin-top:24px;gap:26px;font-size:12px}
  .drawer-addresses div{white-space:nowrap;flex-shrink:0}
  .drawer-info{margin-top:22px}
  .drawer-actions button{font-size:15px}
  .drawer-left{padding-bottom:32px}
  /* On mobile there's no frosted side panel, so paint the whole (fixed, viewport-sized)
     drawer white. The white then always fills the screen behind the scrolling content, so
     long panels (e.g. CONTACT) can never spill past the white and reveal the homepage. */
  .menu-drawer{background:#fff}
  /* Drop drawer-left's separator shadow on mobile — with no frosted panel it just casts a
     shadow line where drawer-left ends (at viewport height) onto the white extension below. */
  .drawer-left{box-shadow:none}
}

/* ================================================================================
   v4 — MOBILE MOCKUP ALIGNMENT (MOCKUP SITO_MOBILE_v1.pdf)
   Authoritative mobile layout: home / menu / projects / director / detail.
   Kept last in the file so equal-specificity rules win. Desktop (>=901px) is
   left untouched except for the shared accordion/credits/icon primitives below.
   ================================================================================ */

/* --- shared primitives (all viewports) --- */
.social-icons{display:inline-flex;align-items:center;gap:16px}
.social-icons a{display:inline-flex;color:inherit;line-height:0;transition:color .2s}
.social-icons a:hover{color:var(--accent)}
.social-icons svg{display:block}
.foot-social-icons{display:none}            /* desktop footers keep the text links */

/* ABOUT/CONTACT accordion: on desktop the open panel floats above the toggles
   (as the old drawer did); on mobile it flows inline under its toggle. */
.drawer-accordion{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.acc-toggle{font-size:15px;font-weight:500;letter-spacing:.01em;color:#0b0b0b;padding:2px 8px;border-radius:4px;text-transform:uppercase}
.acc-toggle.active{background:var(--accent);color:#fff}
.contact-people{display:flex;flex-direction:column;gap:14px}
.contact-people p{margin:0}
.contact-people strong{font-weight:600}
@media(min-width:901px){
  /* the open panel floats above the ABOUT/CONTACT toggles (flex order), matching the
     drawer's original desktop behaviour */
  .drawer-accordion .drawer-panel{order:-1;text-align:right;margin:0 0 12px}
  .drawer-accordion .acc-toggle{order:1}
  .drawer-accordion .drawer-panel.about{width:min(300px,30vw)}
  .drawer-accordion .drawer-panel.contact{width:min(320px,32vw)}
  .drawer-foot{display:none}
}

/* CREDITS accordion (detail): collapsed with a chevron on mobile, always open
   with no chevron on desktop so the dark detail page is unchanged there. */
.credits-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.credits .chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .3s;flex:0 0 auto;margin-bottom:3px}
.credits.open .chev{transform:rotate(-135deg);margin-bottom:-3px}
.credits-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .3s ease;color:#fff;font-size:12px;line-height:1.6;letter-spacing:.03em;display:flex;flex-direction:column}
.credits.open .credits-body{max-height:600px;opacity:1;padding-top:8px}
.credits-col{list-style:none;margin:0;padding:0}
@media(min-width:901px){
  /* Desktop: collapsed by default too (chevron toggle). When open, the two credit
     columns sit side by side — deterministic markup, no CSS multicol, so Safari
     renders it the same as Chrome — and the block widens leftward to stay short.
     The project title stays anchored at the top as the panel expands downward. */
  .detail-foot{align-items:flex-start}
  .credits-toggle{justify-content:flex-start;width:auto;cursor:pointer}
  .credits.open{width:min(560px,44vw)}
  .credits.open .credits-body{flex-direction:row;gap:44px;align-items:flex-start}
  .credits-col{flex:1 1 0;min-width:0}
}

/* director head (all viewports): breadcrumb, then title + READ BIO on one row, filters
   below. Replaces the old single-row flex so the restructured markup lays out cleanly. */
.director-head{display:block}
.director-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.director-head .filters{margin-top:14px}
/* the split copyright still reads as one line on the wide (right-aligned) footer */
.site-footer .copyright{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------------------------- MOBILE ---- */
@media(max-width:900px){

  /* ===== HOME: logo top-left, no tagline, NEWEST + dots bottom-left ===== */
  .home-brand{left:20px;right:auto;top:20px;bottom:auto;transform:none;flex-direction:column;align-items:flex-start;gap:0}
  .home-brand .logo{width:122px}
  .home-tagline{display:none}
  .home-caption{left:20px;right:auto;top:auto;bottom:34px;transform:none;text-align:left;align-items:flex-start}
  .home-newest{font-size:12px;letter-spacing:.06em;margin-bottom:6px}
  .home-work,.home-caption small{font-size:22px;line-height:1.16}
  .home-dots{margin-top:16px}

  /* ===== MENU DRAWER ===== */
  .drawer-left{padding:20px 20px 56px;height:auto;min-height:100dvh}
  /* logo top-left, close X top-right (pink outline circle) */
  .drawer-logo{position:absolute;top:20px;left:20px;right:auto;transform:none;width:120px}
  .menu-drawer .drawer-close{position:fixed;top:16px;right:16px;left:auto;bottom:auto;transform:none;width:40px;height:40px;border:2px solid var(--accent);border-radius:50%;background:#fff;z-index:60}
  .menu-drawer .drawer-close span:before,.menu-drawer .drawer-close span:after{background:var(--accent)}
  .menu-drawer .drawer-close:hover{background:var(--accent)}
  .menu-drawer .drawer-close:hover span:before,.menu-drawer .drawer-close:hover span:after{background:#fff}
  /* Directors / Projects tabs sit under the logo */
  .drawer-nav{margin-top:50px;font-size:16px}
  /* bigger director names, matching the mockup */
  .drawer-directors{margin-top:24px;gap:2px}
  .drawer-directors button{font-size:clamp(28px,8vw,40px);line-height:1.16;font-weight:600;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:left;border-radius:0}
  .drawer-directors button.active{background:none;color:var(--accent)}
  .drawer-directors sup{font-size:.34em;margin-left:.15em}

  /* ABOUT open by default, pink highlight + pink copy, CONTACT below */
  .drawer-info{position:static;width:auto;text-align:left;align-items:flex-start;margin-top:30px;gap:0}
  .drawer-accordion{align-items:flex-start;width:100%;gap:4px}
  .acc-toggle{padding:2px 8px;margin-left:-8px;font-size:15px}
  .drawer-accordion .drawer-panel{position:static;text-align:left;margin:6px 0 18px;max-width:none;width:100%}
  .drawer-panel.about{color:var(--accent);font-size:clamp(16px,4.6vw,20px);line-height:1.2;font-weight:500}
  .drawer-panel.contact{font-size:13px;line-height:1.34}
  .contact-people{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  /* hide the desktop bottom-left addresses + text socials; the mobile footer replaces them */
  .drawer-addresses{display:none}
  .drawer-social{display:none}

  /* mobile drawer footer: Follow+icons | ITA | UK, then copyright / policy */
  .drawer-foot{display:grid;grid-template-columns:auto 1fr 1fr;gap:24px 16px;margin-top:44px;color:#8a8a8a;font-size:13px;line-height:1.42}
  .drawer-foot .foot-label{display:block;margin-bottom:10px;color:#8a8a8a;font-size:15px}
  .drawer-foot .social-icons{color:#0b0b0b;gap:18px}
  .drawer-foot .dfa strong{display:block;color:#3a3a3a;font-weight:600;margin-bottom:2px}
  .drawer-foot-copy{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:10px;letter-spacing:.02em;color:#9a9a9a;text-transform:uppercase}

  /* ===== PROJECTS ===== */
  .projects-page .bar h1{font-size:clamp(42px,13vw,56px);letter-spacing:-.04em}
  .projects-page .filters{font-size:15px;gap:16px;margin-top:14px}

  /* ===== DIRECTOR: breadcrumb, then title + READ BIO on one row, no filters ===== */
  .director-head{display:block}
  .director-head-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  .director-head-row .director-title{font-size:clamp(38px,11vw,60px)}
  .director-head-row .bio-toggle{white-space:nowrap;font-size:14px;text-align:right}
  .director-page .director-head .filters{display:none}

  /* ===== DETAIL: scrollable, side arrows on the media, footer visible ===== */
  body:not(.home-scroll) .detail-page{height:auto!important;min-height:100vh!important;overflow:visible!important;padding:88px 18px 40px}
  .detail-page{display:flex;flex-direction:column}
  .detail-media-wrap{position:relative}
  .detail-media{max-height:46vh}
  .detail-page .project-arrow{display:flex;position:absolute;top:50%;bottom:auto;transform:translateY(-50%);align-items:center;justify-content:center;width:auto;height:auto;background:none;border-radius:0;font-size:40px;line-height:1;color:var(--accent);z-index:5}
  .detail-page .project-arrow.prev{left:-14px}
  .detail-page .project-arrow.next{right:-14px}
  .detail-foot{flex-direction:column;align-items:stretch;gap:18px;margin-top:24px}
  .detail-title{font-size:clamp(28px,7.5vw,44px)}
  .credits{width:100%}
  .detail-page .site-footer{display:grid!important;margin-top:48px}

  /* ===== SHARED DARK FOOTER (projects / director / detail) ===== */
  .site-footer{grid-template-columns:1fr 1fr auto;grid-template-areas:
      "ita uk brand"
      "inq work work"
      "copy copy copy";
    gap:26px 16px;margin-top:56px;align-items:start}
  .foot-a-brand{grid-area:brand;justify-self:end}
  .foot-a-brand .foot-social > a{display:none}                         /* hide text links */
  .foot-a-brand .foot-social{gap:0}
  .foot-a-brand p{display:none}                                        /* hide tagline */
  .foot-social-icons{display:inline-flex;color:#fff}
  .foot-a-ita{grid-area:ita}
  .foot-a-uk{grid-area:uk}
  .foot-a-inq{grid-area:inq}
  .foot-a-work{grid-area:work}
  .site-footer .copyright{grid-area:copy;display:flex;justify-content:space-between;gap:12px;margin-top:6px;text-align:left}
  .site-footer .copyright .c-policy{text-align:right}
}

/* ============ Desktop drawer: frosted blur only after the slide-in finishes ============ */
/* The blur is expensive/distracting while the panel is still travelling, so the
   backdrop-filter is held off until Framer flags the drawer ready (`.drawer-ready`,
   set on onAnimationComplete). Mobile has no frosted panel, so this is desktop-only. */
/* Nothing on the frosted panel shows until the drawer has finished sliding in — not the
   blur, not the dark tint, not the veil overlay — so the content behind stays sharp during
   the slide and the frost fades in only once the menu is open. */
/* The transition lives on the OPEN (.drawer-ready) state, so the frost fades in gently once
   the menu is open, but snaps OFF instantly when closing — so the close slide is frost-free
   too (symmetric with the open slide). */
.drawer-preview{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.drawer-preview::after{opacity:0}
body.menu-ready .drawer-preview{background:rgba(12,12,14,.30);backdrop-filter:blur(22px) saturate(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.05);transition:backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease,background .45s ease}
body.menu-ready .drawer-preview::after{opacity:1;transition:opacity .45s ease}

/* ================================================================================
   v5 — CLIENT FEEDBACK (Modifiche_Sito_Chubby 2026-07-14) — group ① quick fixes
   ================================================================================ */

/* Titles smaller (Projects + director name) on desktop — mobile keeps its own sizes */
.bar h1,.director-title{font-size:clamp(38px,4.6vw,72px);letter-spacing:-.03em}

/* Detail title: brand BOLD on top, project normal weight below (all views) */
.detail-title{display:flex;flex-direction:column;gap:2px;line-height:1.04}
.detail-title .dt-brand{font-weight:700}
.detail-title .dt-project{font-weight:400}

/* READ BIO aligned to the director name's baseline (desktop) */
.director-head-row{align-items:baseline}

/* Prev/next arrows: straightened, outside the video, centered on the media (all views) */
.detail-media-wrap{position:relative}
.detail-page .project-arrow{position:absolute;top:50%;left:auto;right:auto;bottom:auto;transform:translateY(-50%);width:auto;height:auto;background:none;border-radius:0;color:var(--accent);line-height:1;z-index:25;display:flex;align-items:center;justify-content:center;font-size:clamp(30px,3vw,52px)}
@media(min-width:901px){
  .detail-page{padding-left:clamp(52px,5vw,92px);padding-right:clamp(52px,5vw,92px)}
  .detail-page .project-arrow.prev{left:calc(-1 * clamp(42px,4.4vw,78px))}
  .detail-page .project-arrow.next{right:calc(-1 * clamp(42px,4.4vw,78px))}
}

/* Home (desktop): tagline on the same vertical axis as the logo */
@media(min-width:901px){ .home-brand{align-items:center} }

/* Menu: bigger top logo */
.drawer-logo{width:clamp(120px,10vw,170px)}

/* Pink dot sized to the CHUBBY cap height of the logo */
.pink-menu{width:clamp(34px,3.4vw,46px);height:clamp(34px,3.4vw,46px)}

/* Menu nav: Directors (active) larger than Projects */
.drawer-nav{align-items:baseline}
.drawer-nav button,.drawer-nav span{font-size:16px}
.drawer-nav .active{font-size:26px;font-weight:600}

/* AI badge more legible (still a superscript) */
.drawer-directors sup{font-size:.4em;vertical-align:super;font-weight:500;margin-left:.14em;letter-spacing:0}

/* Instagram/Linkedin stacked + right-aligned, same column as ABOUT/CONTACT (desktop) */
@media(min-width:901px){ .drawer-social{flex-direction:column;align-items:flex-end;gap:2px} }

/* Privacy/Cookies line in the menu footer (desktop only; mobile uses .drawer-foot) */
.drawer-policy{display:none}
@media(min-width:901px){
  .drawer-policy{display:block;position:absolute;left:var(--gap);bottom:8px;font-size:10px;letter-spacing:.02em;color:#9a9a9a;text-transform:uppercase;z-index:6}
  .drawer-addresses{bottom:38px}
}

/* X close button: pink OUTLINE (not filled) on desktop, like the mockup */
@media(min-width:901px){
  .drawer-close{background:transparent;border:2px solid var(--accent)}
  .drawer-close span:before,.drawer-close span:after{background:var(--accent)}
  .drawer-close:hover{background:var(--accent);border-color:var(--accent)}
  .drawer-close:hover span:before,.drawer-close:hover span:after{background:#fff}
}

/* Tablet + mobile (<=900px) tweaks */
@media(max-width:900px){
  .drawer-directors button{font-weight:500}          /* names not bold */
  .director-head-row{align-items:flex-end}           /* READ BIO on the wrapped name's 2nd line */
  .projects-page .bar h1{margin-bottom:2px}          /* tighter title↔filters gap */
  .projects-page .filters{margin-top:8px}
  .foot-co,.foot-cc{display:none}                    /* concise footer address */
  .detail-page .project-arrow.prev{left:-10px}
  .detail-page .project-arrow.next{right:-10px}
}

/* v5.1 — mobile refinements after review */
@media(max-width:900px){
  /* Home NEWEST: left-aligned, smaller so brand/project fit one line */
  .home-caption{align-items:flex-start;text-align:left}
  .home-work{text-align:left}
  .home-work,.home-caption small{font-size:15px;line-height:1.26}
  /* Projects: tighter title↔filters gap; keep filters on one line (scroll if needed) */
  .projects-page .bar{margin-bottom:16px}
  .projects-page .bar h1{margin-bottom:0}
  .projects-page .filters{margin-top:4px;font-size:13px;gap:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .projects-page .filters::-webkit-scrollbar{display:none}
  /* Detail: arrows fully visible at the video edges (no clipping); title fits */
  .detail-page .project-arrow{text-shadow:0 1px 6px rgba(0,0,0,.55)}
  .detail-page .project-arrow.prev{left:2px}
  .detail-page .project-arrow.next{right:2px}
  .detail-title{font-size:clamp(22px,6vw,36px)}
}

/* Extra menu-footer contacts show on tablet only (the phone mockup omits them) */
.dfa-extra{display:none}

/* v5.2 — TABLET (601–900px) */
@media(min-width:601px) and (max-width:900px){
  /* Home: raise + enlarge the NEWEST block, slightly bigger logo + dot */
  .home-caption{bottom:9%}
  .home-work,.home-caption small{font-size:21px;line-height:1.24}
  .home-brand .logo{width:154px}
  .pink-menu{width:44px;height:44px}
  /* Menu: more breathing room between the logo and Directors/Projects; footer anchored to
     the bottom of the viewport with the full contact set (General Enquiries + Work with us) */
  .drawer-nav{margin-top:70px}
  .drawer-left{display:flex;flex-direction:column;min-height:100dvh}
  .drawer-foot{margin-top:auto;grid-template-columns:auto repeat(4,1fr)}
  .dfa-extra{display:block}
}

/* ================================================================================
   v6 — CLIENT FEEDBACK ② — director bio (no reflow) + featured director grid
   ================================================================================ */
.director-head{position:relative}

/* Bio: desktop = overlay in the empty top-right (the grid does NOT move); tablet/mobile
   = full-width block that opens between the name and the first video. */
@media(min-width:901px){
  .director-head .bio{position:absolute;right:0;top:52px;width:min(46%,600px);margin:0;text-align:left;z-index:6}
}
@media(max-width:900px){
  .director-head .bio{margin:16px 0 4px;max-width:none;width:100%;text-align:left;font-size:clamp(15px,2.4vw,18px);line-height:1.42}
}

/* Featured grid (desktop only): first project large on the left, the next ones stacked
   small on the right; the rest flow into the uniform 3-col grid below. */
@media(min-width:901px){
  .director-grid{grid-template-columns:repeat(3,1fr)}
  .director-grid .card:first-child{grid-column:1 / span 2;grid-row:1 / span 2;display:flex;flex-direction:column}
  .director-grid .card:first-child .thumb{aspect-ratio:auto;flex:1 1 auto;min-height:0}
}

/* ================================================================================
   v7 — CLIENT FEEDBACK ③ — initial loader (animated Chubby logo, fades out)
   ================================================================================ */
#preloader{position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center;opacity:1;transition:opacity .6s ease}
#preloader img{width:clamp(140px,16vw,200px);height:auto;filter:brightness(0) invert(1);animation:cf-pulse 1.25s ease-in-out infinite}
#preloader.hide{opacity:0;pointer-events:none}
@keyframes cf-pulse{0%,100%{opacity:.42;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#preloader img{animation:none;opacity:1}}

/* ================================================================================
   v8 — CLIENT FEEDBACK ③ — Vimeo hover-preview on grid thumbnails
   ================================================================================ */
.thumb-video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;z-index:1;background:#111}

/* ================================================================================
   v9 — CLIENT FEEDBACK ③ — global +15% uplift (desktop, min-width:901px).
   Enlarges the general UI ~15% starting from the Home. Mobile/tablet keep their own
   tuned sizes; the intentionally-reduced display titles are left as-is.
   ================================================================================ */
@media(min-width:901px){
  /* ---- Home ---- */
  .home-brand{gap:26px}
  .cinematic-home .logo{width:clamp(138px,12.6vw,193px)}
  .home-tagline{font-size:clamp(16px,1.2vw,20px)}
  .home-newest{font-size:13px}
  .home-work,.home-caption small{font-size:clamp(20px,1.72vw,28px)}
  .home-dots{gap:9px}
  .home-dots button{width:10px;height:10px}
  .pink-menu{width:clamp(39px,3.9vw,53px);height:clamp(39px,3.9vw,53px)}
}

/* v9 (cont.) — +15% desktop uplift on inner-page general text/logos. The reduced Projects
   and director titles, and the mockup-sized menu names/nav, are intentionally left alone. */
@media(min-width:901px){
  .inner-logo{width:clamp(120px,10.3vw,168px)}
  .breadcrumb{font-size:14px}
  .filters{font-size:16px}
  .card-label,.card-label small{font-size:14px}
  .site-footer{font-size:15px}
  .bio{font-size:clamp(16px,1.3vw,20px)}
  .credits-toggle{font-size:15px}
  .credits-body{font-size:14px}
  .acc-toggle{font-size:17px}
  .drawer-social{font-size:17px}
  .drawer-addresses{font-size:13px}
}

/* Clickable breadcrumb segments (detail + director). Links inherit the muted crumb colour
   and go accent on hover; the current page stays plain text. Accent reads on both the dark
   detail page and the light director page. */
.breadcrumb .crumb-link{cursor:pointer;color:inherit;transition:color .2s}
.breadcrumb .crumb-link:hover,.breadcrumb .crumb-link:focus-visible{outline:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.breadcrumb .crumb-sep{opacity:.55}
.breadcrumb .crumb-current{color:inherit}

/* ================================================================================
   Project detail media — big full-width background poster + smaller centred player
   The poster is a full-width background (moderate height via --media-h, not full-screen);
   the play button is centred over it. On play a smaller 16:9 player opens centred on top of
   the poster, which stays at full brightness (no dim). Clicking the poster around the player
   closes it. --media-h tweaks the background height.
   ================================================================================ */
.detail-media{--media-h:74vh;position:relative;aspect-ratio:auto;width:100%;height:var(--media-h);max-height:none;margin:0;background:#111;overflow:hidden}
.detail-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vimeo-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer;background:none}
.vimeo-play-btn:hover .vimeo-play{background:var(--accent);border-color:var(--accent)}
/* Cinema-style: strongly dim the background poster while the video plays (also closes on click). */
.vimeo-catch{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.85);cursor:pointer}
.vimeo-player{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(860px,58vw);max-height:82%;aspect-ratio:16/9;z-index:3;background:#000;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.vimeo-player .vimeo-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Mobile: keep the player narrow so it sits BETWEEN the prev/next arrows (which flank it
   at the media edges), leaving a tappable gap on each side to page projects left/right. */
@media(max-width:900px){ .detail-media{--media-h:44vh} .vimeo-player{width:calc(100% - 96px);max-height:74%} }

/* ================================================================================
   v5.3 — CLIENT FEEDBACK: detail title + credits proportions
   ================================================================================ */

/* Title: a step smaller (it read as oversized), and BOTH lines white — the project
   ("titolo opera") line was still picking up the old `.detail-title span{color:#777}`
   grey, which flattened its importance. Weight keeps brand vs project distinct. */
.detail-title{font-size:clamp(26px,3.4vw,54px)}
.detail-title .dt-brand,.detail-title .dt-project{color:#fff}

/* Credits: smaller type (~-3px) across viewports. */
.credits-toggle{font-size:12px}
.credits-body{font-size:11px;line-height:1.65}

@media(min-width:901px){
  /* Fixed two-column grid instead of space-between: the credits column keeps the same
     width and the same gap from the title regardless of how long the title is or
     whether the panel is open, so the CREDITS rule never shifts or resizes. */
  .detail-foot{display:grid;grid-template-columns:1fr clamp(320px,32vw,460px);column-gap:56px;align-items:start}
  .detail-foot-main{min-width:0}
  .credits,.credits.open{width:100%;min-width:0}
  .credits-toggle{font-size:12px}
  .credits-body{font-size:11px}
  .credits.open .credits-body{gap:32px}
}

/* Menu hover preview: optional muted Vimeo clip layered over the director's still
   (CMS: Directors → "Menu hover video"). The still stays visible underneath while the
   player loads, so the box is never empty. */
.drawer-preview-video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;z-index:1;background:#111}

/* Vimeo previews fade in only once the player is really rendering frames (`.ready`). No spinner:
   the still simply holds until the clip is ready and crossfades in — the client does not want a
   loading wheel on hover. The opacity gate still matters, or a black iframe flashes over the
   still. Same treatment for the home hero, so the sequence there is preloader → video. */
.hero-slide-video,.thumb-video,.drawer-preview-video{opacity:0;transition:opacity .4s ease}
.hero-slide-video.ready,.thumb-video.ready,.drawer-preview-video.ready{opacity:1}

/* Hero slide loader: a smaller bouncing Chubby logo shown over the home hero until the
   active slide's background video is actually running. Same handshake as #preloader
   (useClipPlaying), so paging between slides never drops to a bare still frame.
   The filter chain must stay identical to #preloader img: the logo was a pattern-filled
   SVG wrapping a raster (now logo.webp, the same raster at 800px), and appending drop-shadow() to brightness(0) invert(1) makes
   WebKit (iOS Safari + iOS Chrome) render it solid black. Contrast comes from a radial
   scrim on the container instead — background, so no filter involved. */
.hero-loader{position:fixed;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none;opacity:1;transition:opacity .3s ease;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.26) 22%,rgba(0,0,0,0) 48%)}
.hero-loader.done{opacity:0}
.hero-loader img{width:clamp(74px,7vw,110px);height:auto;filter:brightness(0) invert(1);animation:cf-bounce 1s cubic-bezier(.3,.05,.3,1) infinite}
@keyframes cf-bounce{0%,100%{transform:translateY(0);opacity:.82}45%{transform:translateY(-18px);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-loader img{animation:cf-pulse 1.6s ease-in-out infinite}}

/* Fade the hero clip in faster than the preloader's 400ms floor, so it is fully opaque before
   the black starts lifting — no sliver of the layer beneath during the hand-off. */
.hero-slide-video{transition:opacity .25s ease}

/* Detail player: clicking the dimmed surround pauses/resumes rather than closing — losing the
   video to a stray click was too easy. There is no close button: Escape closes it, and any
   navigation unmounts it, since the player sits inside the media block, not in a modal. */
.vimeo-catch.is-paused{background:rgba(0,0,0,.7)}

/* ================================================================================
   v9 — CLIENT FEEDBACK 09/2026 — fase 1 (punti indipendenti)
   ================================================================================ */

/* 1. The tagline sits beside the logo and was centring on the whole artwork. In the logo
      CHUBBY occupies 6.1%–72.5% of the height and FILMS 81.7%–96.2%, so CHUBBY's centre is
      at 39.3% while the block's is at 50% — a 10.7% drop that reads as crooked. The artwork
      is 80/243 as tall as it is wide, so shifting the tagline up by 0.107 x 0.329 = 3.52%
      of the logo width lines it up with CHUBBY alone. */
@media(min-width:901px){
  .home-brand .home-tagline{transform:translateY(calc(clamp(138px,12.6vw,193px) * -0.0352))}
}

/* 2. Pink menu badge, 25% smaller at every breakpoint. */
.pink-menu{width:clamp(26px,2.55vw,35px);height:clamp(26px,2.55vw,35px)}
@media(min-width:601px) and (max-width:900px){.pink-menu{width:33px;height:33px}}
@media(min-width:901px){.pink-menu{width:clamp(29px,2.93vw,40px);height:clamp(29px,2.93vw,40px)}}

/* 5. Black sliver under the menu hover preview: the still was a plain inline image inside an
      aspect-ratio box, so line-box rounding left a row of the #111 backdrop showing. Taking it
      out of flow makes it fill the box exactly. */
.drawer-hover-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* 15 + 22. Much more black between the header and the first content block, on the director
      page and on the works index. */
@media(min-width:901px){
  .director-page,.projects-page{padding-top:172px}
}

/* 16. READ BIO / CLOSE BIO larger. */
.bio-toggle{font-size:18px}
@media(min-width:901px){.director-head-row .bio-toggle{font-size:18px}}

/* 19. Bio copy 10% smaller. */
.bio{font-size:clamp(13px,1.04vw,15px)}
@media(min-width:901px){.bio{font-size:clamp(14px,1.17vw,18px)}}

/* ================================================================================
   v9 — fase 2: il menu (punti 3, 4, 6, 7, 8, 9, 10, 11, 12, 13)
   ================================================================================ */

/* 13. Drawer 10% narrower: the white panel was 1fr against a 32vw preview, i.e. 68vw.
       61.2vw is that minus 10%; the close button hangs off the preview edge, so it moves too. */
.menu-drawer{grid-template-columns:1fr 38.8vw}
@media(min-width:901px){.drawer-close{right:calc(38.8vw - 44px)}}

/* 9. Toggle and list sit below the logo, which is absolutely positioned at the top right. */
@media(min-width:901px){.drawer-nav{margin-top:72px}}

/* 8. Both toggle entries the same size: active black with a pink underline, inactive grey.
      (The previous rule made the active one 26px and the other 16px.) */
.drawer-nav button,.drawer-nav span{font-size:clamp(17px,1.6vw,22px);font-weight:500;color:#b5b5b5}
.drawer-nav .active{font-size:clamp(17px,1.6vw,22px);font-weight:500;color:#0b0b0b;
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:2px}
.drawer-nav span{color:#b5b5b5}

/* 4. Selected Projects: brand large with the title inline and smaller, in a scrollable wheel.
      The fade only shows while there is more below — `.faded` is dropped at the end of the
      scroll, so the last rows never stay greyed out. */
.drawer-latest{position:relative;z-index:6;margin-top:5.5vh;display:flex;flex-direction:column;align-items:flex-start}
.drawer-projects{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;
  max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.drawer-projects::-webkit-scrollbar{display:none}
.drawer-projects.faded{-webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)}
.drawer-projects button{display:block;text-align:left;max-width:100%;flex:0 0 auto;
  font-size:clamp(23px,3.3vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.16;color:#0b0b0b;
  padding:0 8px;border-radius:5px;transition:background .16s,color .16s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-projects button.active{background:var(--accent);color:#fff}
.dp-title{font-size:.45em;letter-spacing:0}

/* 6. Sits under the wheel rather than inside it, so it stays reachable and never fades out. */
.drawer-discover{margin-top:18px;padding:0 8px;font-size:clamp(13px,1.1vw,16px);font-weight:500;
  color:#0b0b0b;text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:5px;text-decoration-thickness:2px}
.drawer-discover:hover{color:var(--accent)}

/* 10 + 11. WORKS joins ABOUT and CONTACT in the same right-aligned column. The social links
      had no horizontal padding while `.acc-toggle` has 8px, which is what threw the right edge
      out of line — matching the padding lines all five up. */
.acc-link{text-transform:uppercase}
.acc-link:hover{color:var(--accent)}
@media(min-width:901px){.drawer-accordion .acc-link{order:1}}
.drawer-social a{padding-right:8px}

/* 12. Instagram and LinkedIn grey, like the addresses already are. */
.drawer-social a{color:#9a9a9a}
.drawer-social a:hover{color:var(--accent)}

/* ================================================================================
   v9 — fase 3: bio in flusso (17-18) e Enquire (20)
   ================================================================================ */

/* 17 + 18. The bio was absolutely positioned, which is why it covered the grid. It now sits
   in a right-hand column under its own toggle and animates its height, so the header grows
   and pushes everything below down, then lets it rise back on close. The column runs from
   just past halfway to the right margin, which with the smaller type (point 19) lands the
   copy at about five lines instead of seven. */
.director-head .bio,.bio{position:static;width:100%;max-width:none;margin:10px 0 0;text-align:left}
.director-bio-col{display:flex;flex-direction:column;align-items:flex-end;width:min(46%,640px);flex:0 0 auto}
.bio-wrap{overflow:hidden;width:100%}
@media(max-width:900px){
  .director-bio-col{width:100%;align-items:flex-start}
}

/* 20. Enquiry link in place of the credits block, in the same right-hand column of the
   project footer. */
.enquire{display:inline-block;align-self:start;padding:11px 20px;border:2px solid var(--accent);
  border-radius:999px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;transition:background .2s,color .2s;white-space:nowrap}
.enquire:hover{background:var(--accent);color:#fff}
@media(max-width:900px){.enquire{width:100%;text-align:center}}

/* ================================================================================
   v9 — fase 4: menu mobile a scorrimento (punto 23)
   ================================================================================ */

/* Desktop keeps hover and never renders the stack. */
.drawer-mobile-previews{display:none}

@media(max-width:900px){
  /* The name list stays pinned at the top while the previews scroll under it. It gets its own
     scroller because Selected Projects is a long list — pinning all of them would fill the screen. */
  .drawer-directors,.drawer-projects{position:sticky;top:0;z-index:7;background:#fff;
    max-height:30vh;overflow-y:auto;scrollbar-width:none;padding-bottom:10px}
  .drawer-directors::-webkit-scrollbar,.drawer-projects::-webkit-scrollbar{display:none}
  /* No fade here: the wheel effect belongs to the desktop drawer. */
  .drawer-projects.faded{-webkit-mask-image:none;mask-image:none}
  /* Active name black, the rest light grey. */
  .drawer-directors button,.drawer-projects button{color:#c9c9c9;background:none}
  .drawer-directors button.active,.drawer-projects button.active{color:#0b0b0b;background:none}

  .drawer-mobile-previews{display:flex;flex-direction:column;gap:18px;margin-top:18px}
  .dmp-card{display:block;width:100%;text-align:left;padding:0}
  .dmp-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#ededed}
  .dmp-label{display:block;margin-top:7px;font-size:15px;font-weight:600;color:#0b0b0b;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dmp-label small{font-size:.86em;font-weight:400;color:#8a8a8a}
  /* Discover all projects moves below the stack on mobile. */
  .drawer-latest{display:contents}
  .drawer-discover{order:2;margin:20px 0 0}
}

/* Mobile drawer scrolling. `.menu-drawer` is a fixed, full-height grid, so its single row was
   pinned to the viewport and `.drawer-left` stretched to exactly that: the preview stack
   overflowed visibly without ever extending the scrollable area, and the drawer stopped
   scrolling a few hundred px in. Plain block flow on mobile lets the content set the height. */
@media(max-width:900px){
  .menu-drawer{display:block;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .drawer-left{height:auto;min-height:0;overflow:visible}
}

/* ================================================================================
   v9 — menu mobile: header fisso e scorrimento a scatti
   ================================================================================ */
@media(max-width:900px){
  /* 1. Logo and toggle pin to the top and stay visible. The logo was absolutely
     positioned, so it took no flow space and the nav compensated with a margin; both
     are in flow now and stick, one under the other, with the name strip below them. */
  .drawer-logo{position:sticky;top:0;left:auto;right:auto;bottom:auto;transform:none;
    display:block;width:120px;padding:14px 0 8px;background:#fff;z-index:30}
  .drawer-nav{position:sticky;top:66px;margin-top:0;padding:4px 0 10px;background:#fff;z-index:20}
  .drawer-directors,.drawer-projects{top:102px;margin-top:0}

  /* 2. One card at a time. `scroll-snap-stop:always` is what makes a fling advance by a
     single card instead of flying past several; the padding keeps the snapped card clear
     of the pinned header and the name strip above it. */
  .menu-drawer{scroll-snap-type:y mandatory;scroll-padding-top:calc(102px + 30vh)}
  .dmp-card{scroll-snap-align:start;scroll-snap-stop:always}

  /* Everything but the current card sits back, mirroring the grey names above. */
  .dmp-card{filter:grayscale(.75);opacity:.6;transition:filter .3s ease,opacity .3s ease}
  .dmp-card.active{filter:none;opacity:1}
}

/* Pinned header must be opaque edge to edge, or the cards show through while scrolling.
   The logo button was only as wide as the logo itself, leaving everything to its right
   uncovered, and all three bands started inside the 20px page gutter, so the sides leaked
   too. Negative margins pull them across the gutter and the padding puts the content back
   where it was. */
@media(max-width:900px){
  .drawer-logo{display:block;box-sizing:border-box;width:calc(100% + 40px);padding:14px 20px 8px;margin:0 -20px;text-align:left}
  .drawer-logo img{width:120px}
  .drawer-nav{margin:0 -20px;padding:4px 20px 10px}
  .drawer-directors,.drawer-projects{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;
    padding-left:20px;padding-right:20px}
}

/* Opening the menu must not resize the button. The pink badge is 26px on a phone since the
   25% reduction, while the close button was still 40px at a different offset, so it jumped
   on open. Same box, same position now — the circle stays put and only the dot becomes an X.
   The glyph shrinks with it, and an invisible inset keeps the tap target finger-sized. */
@media(max-width:900px){
  .menu-drawer .drawer-close{width:clamp(26px,2.55vw,35px);height:clamp(26px,2.55vw,35px);
    top:18px;right:18px}
  .menu-drawer .drawer-close span{width:10px;height:10px}
  .menu-drawer .drawer-close span:before,.menu-drawer .drawer-close span:after{width:10px}
  .menu-drawer .drawer-close::after{content:"";position:absolute;inset:-10px;border-radius:50%}
}
@media(min-width:601px) and (max-width:900px){
  .menu-drawer .drawer-close{width:33px;height:33px}
  .menu-drawer .drawer-close span{width:12px;height:12px}
  .menu-drawer .drawer-close span:before,.menu-drawer .drawer-close span:after{width:12px}
}

/* Menu toggle: the pink rule is an element, not text-decoration, so it can animate. Leaving
   a tab it wipes away to the right (origin right, scaleX→0); arriving it grows back from the
   left, delayed by the wipe, so the rule travels ahead of the list dissolve underneath. */
.drawer-nav button{position:relative}
.drawer-nav .active{text-decoration:none}
.drawer-nav button::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .26s cubic-bezier(.4,0,.2,1)}
.drawer-nav button.active::after{transform:scaleX(1);transform-origin:0 50%;transition-delay:.26s}

/* Tab cross-fade. The list and the mobile cards fade out and back in over the same .26s as
   each half of the underline wipe; the content is swapped while they sit at opacity 0. */
.drawer-directors,.drawer-latest,.drawer-mobile-previews{transition:opacity .26s ease-in-out}
.drawer-directors.tab-fading,.drawer-latest.tab-fading,.drawer-mobile-previews.tab-fading{opacity:0}

/* Selected Projects opens the panel wider, and the preview stops following the pointer: it
   holds one position in the space the widening frees up. Directors is unchanged. */
@media(min-width:901px){
  .menu-drawer{transition:grid-template-columns .52s cubic-bezier(.4,0,.2,1)}
  .menu-drawer.drawer-wide{grid-template-columns:1fr 21vw}
  .drawer-close{transition:right .52s cubic-bezier(.4,0,.2,1)}
  .menu-drawer.drawer-wide .drawer-close{right:calc(21vw - 44px)}
  .menu-drawer.drawer-wide .drawer-hover-preview{left:56%;top:27vh;width:min(31.5vw,640px)}
}

/* Mobile: the card the scroll settles on plays its clip over the still. */
@media(max-width:900px){
  .dmp-media{position:relative;display:block}
  .dmp-video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;
    z-index:1;background:#111;opacity:0;transition:opacity .4s ease}
  .dmp-video.ready{opacity:1}
}

/* More air around the name strip on mobile: the first name sat flush against the
   Directors / Selected Projects toggle and the last one flush against the card below.
   The top gap is white padding on the toggle band (not padding inside the strip, which
   scrolls away with the wheel), so the strip's pinned offset moves down with it; the
   bottom gap rides on scroll-padding-top, which is what decides where a card snaps. */
@media(max-width:900px){
  .drawer-nav{padding-bottom:28px}
  .drawer-directors,.drawer-projects{top:120px}
  .menu-drawer{scroll-padding-top:calc(120px + 30vh + 20px)}
  .drawer-mobile-previews{margin-top:32px}
}

/* 2. A little more air between the X and the edge of the open panel (6px → 16px). */
@media(min-width:901px){
  .drawer-close{right:calc(38.8vw - 54px)}
  .menu-drawer.drawer-wide .drawer-close{right:calc(21vw - 54px)}
}

/* 3. On hover the X goes see-through: the circle fills pink and the X is punched out of
   it, so whatever is behind the button shows through the two strokes. CSS cannot make a
   child erase its parent (there is no destination-out blend mode), so the fill is a
   pseudo-element masked by "whole circle minus two diagonal bars" via mask-composite.
   The 10px mask box makes each bar 14px long and 2px thick — the same X as at rest, only
   the colour changes. The two bars are unioned first and the circle subtracts the union:
   subtracting them one after the other would cancel at the crossing and leave a pink dot
   in the middle of the X. */
@media(min-width:901px){
  .drawer-close::before{content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--accent);opacity:0;transition:opacity .2s ease;
    -webkit-mask-image:linear-gradient(#000,#000),
      linear-gradient(45deg,transparent 42.85%,#000 42.85%,#000 57.15%,transparent 57.15%),
      linear-gradient(-45deg,transparent 42.85%,#000 42.85%,#000 57.15%,transparent 57.15%);
    -webkit-mask-size:100% 100%,10px 10px,10px 10px;
    -webkit-mask-position:center,center,center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-composite:source-out,source-over,source-over;
    mask-image:linear-gradient(#000,#000),
      linear-gradient(45deg,transparent 42.85%,#000 42.85%,#000 57.15%,transparent 57.15%),
      linear-gradient(-45deg,transparent 42.85%,#000 42.85%,#000 57.15%,transparent 57.15%);
    mask-size:100% 100%,10px 10px,10px 10px;
    mask-position:center,center,center;
    mask-repeat:no-repeat;
    mask-composite:subtract,add,add}
  .drawer-close:hover{background:transparent}
  .drawer-close:hover::before{opacity:1}
  .drawer-close:hover span{opacity:0}
}

/* 5. Mobile: READ BIO sits under the name, and the bio opens below it, full width. */
@media(max-width:900px){
  .director-head-row{display:block}
  .director-head-row .bio-toggle{text-align:left;margin-top:14px}
  .director-bio-col{width:100%;align-items:flex-start}
}

/* 4. Enquire and the credits share one column so the credits hang right under the button.
   As separate grid items they landed in the next row, whose top is set by the tall title
   in the left column — over 100px of gap. */
.detail-foot-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.detail-foot-side .credits{margin-top:0}

/* ABOUT and CONTACT pick up the same pink hover WORKS already had. Not while open: an
   active toggle is white on pink, and pink on pink would disappear. */
.acc-toggle:not(.active):hover{color:var(--accent)}

/* The DIRECTORS segment on a director's own page is plain text, not a link. */
.breadcrumb .crumb-static{color:inherit;cursor:default}

/* Enquire sits centred in its column instead of hard against its left edge — halfway
   between the title and the right margin. Desktop only; on a phone the footer is a single
   left-aligned column. */
@media(min-width:901px){
  .detail-foot-side .enquire{align-self:center}
}

/* ================================================================================
   Enquire form — a popup over the project page
   ================================================================================ */
body.enquiry-open{overflow:hidden}
.eq-backdrop{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:24px}
.eq-panel{position:relative;width:min(760px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;
  background:#0b0b0b;border:1px solid rgba(255,255,255,.14);border-radius:6px;
  color:#fff;padding:34px clamp(22px,3.4vw,44px) 30px}
.eq-title{margin:0 0 22px;font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.eq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.eq-grid .eq-wide{grid-column:1/-1}   /* Timing: the placeholder needs the full width */
.eq-form > .eq-field{margin-top:18px}   /* the message field, the only one outside the grid */
.eq-label{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8f8f8f}
.eq-field input,.eq-field textarea{width:100%;background:transparent;color:#fff;font:inherit;font-size:15px;
  border:0;border-bottom:1px solid rgba(255,255,255,.26);border-radius:0;padding:7px 0;
  transition:border-color .2s;resize:vertical}
.eq-field textarea{min-height:96px;line-height:1.45}
.eq-field input:focus,.eq-field textarea:focus{outline:0;border-bottom-color:var(--accent)}
.eq-field input::placeholder,.eq-field textarea::placeholder{color:#6a6a6a}
.eq-field.invalid input,.eq-field.invalid textarea{border-bottom-color:var(--accent)}
.eq-locked input{color:#cfcfcf;cursor:default}
.eq-locked input:focus{border-bottom-color:rgba(255,255,255,.26)}
/* Off-screen rather than display:none — a bot filling forms reads the DOM, not the CSS. */
.eq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eq-note{margin:18px 0 0;color:var(--accent);font-size:13px;line-height:1.4}
.eq-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.eq-submit{align-self:auto}
.eq-submit[disabled]{opacity:.55;cursor:default}
.eq-privacy{margin:0;font-size:11px;color:#7d7d7d;letter-spacing:.02em}
.eq-done{padding:16px 0 6px}
.eq-done h2{margin:0 0 10px;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em}
.eq-done p{margin:0 0 24px;color:#b4b4b4;font-size:15px;line-height:1.45}
.eq-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:2px solid var(--accent);
  border-radius:50%;background:transparent;display:grid;place-items:center;z-index:2;padding:0}
.eq-close span{position:relative;display:block;width:11px;height:11px}
.eq-close span:before,.eq-close span:after{content:"";position:absolute;top:50%;left:0;width:11px;height:2px;
  background:var(--accent)}
.eq-close span:before{transform:rotate(45deg)}
.eq-close span:after{transform:rotate(-45deg)}
.eq-close:hover{background:var(--accent)}
.eq-close:hover span:before,.eq-close:hover span:after{background:#0b0b0b}
@media(max-width:700px){
  .eq-backdrop{padding:0;place-items:stretch}
  .eq-panel{width:100%;max-height:100dvh;border:0;border-radius:0;padding:64px 20px 28px}
  .eq-grid{grid-template-columns:1fr;gap:16px}
  .eq-actions{flex-direction:column;align-items:stretch;gap:12px}
  .eq-privacy{text-align:center}
}

/* Selects in the form: native control, styled like the text fields. `color-scheme:dark`
   is what makes the browser draw the dropdown list dark too. */
.eq-panel{color-scheme:dark}
.eq-select{position:relative;display:block}
.eq-select select{width:100%;background:transparent;color:#fff;font:inherit;font-size:15px;
  border:0;border-bottom:1px solid rgba(255,255,255,.26);border-radius:0;padding:7px 22px 7px 0;
  appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s}
.eq-select select:focus{outline:0;border-bottom-color:var(--accent)}
.eq-select:after{content:"";position:absolute;right:4px;top:44%;width:7px;height:7px;
  border-right:2px solid #8f8f8f;border-bottom:2px solid #8f8f8f;transform:translateY(-50%) rotate(45deg);
  pointer-events:none}
.eq-field.invalid .eq-select select{border-bottom-color:var(--accent)}

/* Mobile menu, two faults that only showed once the roster reached seven names.
   1. The name strip is a flex column inside a 30vh box. Six names fitted; the seventh
      pushed the content past the box and flex shrank every button below its own
      line-height, slicing the descenders off. The buttons keep their height and the
      strip scrolls instead, which is what the wheel was always meant to do.
   2. With `scroll-snap-type: y mandatory` the container may only come to rest on a snap
      point, and the last one is the last card — so the info block and the footer under it
      could not be reached (the scroll sprang back 87px short of the end). Giving the info
      block its own snap point lets the browser clamp to the true bottom. */
@media(max-width:900px){
  .drawer-directors button{flex:0 0 auto}
  .drawer-info{scroll-snap-align:start}
}

/* Headroom for a longer roster. On desktop the names sat in the panel with no limit and
   the panel does not scroll (overflow:hidden), so past about a dozen the last names were
   simply cut off and unreachable — measured at 1440x900: the 13th onwards, overlapping the
   addresses. The names now use the same wheel as Selected Projects, down to the same
   height and the same fade that lifts at the end. Inert at today's seven: nothing scrolls
   until the names would have overflowed anyway. */
@media(min-width:901px){
  .drawer-directors{max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
  .drawer-directors::-webkit-scrollbar{display:none}
  .drawer-directors.faded{-webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)}
  .drawer-directors button{flex:0 0 auto}
}

/* The player fills the poster it replaces, instead of opening as a smaller window inside it.
   Height, not width: the media block is much wider than 16:9 (2.38:1 at 1512x764), so a box
   stretched to the full width would only add black bars either side of a video that stays the
   same size. Matching the height makes the picture as large as it can be with no bars and no
   crop — 1004x565 against the poster's 1346x565, where it was 860x464.
   Mobile keeps its narrower player on purpose: the gap either side is what you tap to page
   between projects, and there the player is already as wide as that gap allows. */
@media(min-width:901px){
  /* Width driven off the block's own height (--media-h) rather than height:100%: with a
     definite height the aspect-ratio loses to max-width in a portrait window and the box
     stretches out of shape. This way the picture is always 16:9 and never wider than the
     block. */
  .vimeo-player{width:min(100%,calc(var(--media-h) * 16 / 9));height:auto;max-height:100%}
}

/* ---- Pipeline previews (<video>, src/app.jsx ClipVideo): same slots as the Vimeo iframes ---- */
video.thumb-video,video.drawer-preview-video,video.dmp-video{object-fit:cover}
video.hero-slide-video{top:0;left:0;transform:none;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover}

/* ---- Custom player (src/player.jsx): Video.js behaviour, our look ---- */
.vimeo-player .cp{position:absolute;inset:0;background:#000;overflow:hidden;font-family:inherit}
.cp video{display:block;width:100%;height:100%;object-fit:contain}
.cp-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;transition:opacity .3s}
.cp-big:hover .vimeo-play{background:var(--accent);border-color:var(--accent)}
.cp-big[data-hide]{opacity:0;pointer-events:none}
.cp-buffer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cp-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cp-spin{width:36px;height:36px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;animation:cp-spin .8s linear infinite}
@keyframes cp-spin{to{transform:rotate(360deg)}}
.cp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:18px 20px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);transition:opacity .3s}
.cp-bar:not([data-visible]){opacity:0;pointer-events:none}
.cp-btn{flex:0 0 auto;width:24px;height:24px;padding:0;background:none;border:0;color:#fff;cursor:pointer;transition:color .2s}
.cp-btn:hover{color:var(--accent)}
.cp-btn svg{display:block;width:100%;height:100%}
.cp-time{flex:0 0 auto;min-width:36px;font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#fff}
.cp-slider{position:relative;flex:1;height:20px;display:flex;align-items:center;cursor:pointer}
.cp-track{position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.25);transition:height .15s}
.cp-slider[data-interactive] .cp-track{height:4px}
.cp-buf{position:absolute;top:0;left:0;height:100%;width:var(--media-slider-buffer);background:rgba(255,255,255,.35)}
.cp-fill{position:absolute;top:0;left:0;height:100%;width:var(--media-slider-fill);background:var(--accent)}
.cp-thumb{position:absolute;left:var(--media-slider-fill);width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .15s}
.cp-slider[data-interactive] .cp-thumb{opacity:1}
/* Fullscreen: the container fills the screen, the picture keeps its proportions. */
.cp:fullscreen{width:100%;height:100%}
/* Phones: smaller round button so it clears the control bar; tighter bar. */
@media(max-width:900px){
  .cp-big .vimeo-play{width:54px;height:54px}
  .cp-big .vimeo-play:after{border-width:9px 0 9px 15px}
  .cp-bar{gap:10px;padding:10px 12px}
  .cp-time{font-size:11px;min-width:30px}
  .cp-btn{width:22px;height:22px}
}
/* Background clips never show the browser's own controls — notably the big play button iOS
   (and Chrome on iPhone, which is WebKit) draws over a video that could not autoplay. The still
   underneath stays the picture instead. */
video.hero-slide-video::-webkit-media-controls,video.thumb-video::-webkit-media-controls,video.drawer-preview-video::-webkit-media-controls,video.dmp-video::-webkit-media-controls,
video.hero-slide-video::-webkit-media-controls-panel,video.thumb-video::-webkit-media-controls-panel,video.drawer-preview-video::-webkit-media-controls-panel,video.dmp-video::-webkit-media-controls-panel,
video.hero-slide-video::-webkit-media-controls-start-playback-button,video.thumb-video::-webkit-media-controls-start-playback-button,video.drawer-preview-video::-webkit-media-controls-start-playback-button,video.dmp-video::-webkit-media-controls-start-playback-button,
video.hero-slide-video::-webkit-media-controls-overlay-play-button,video.thumb-video::-webkit-media-controls-overlay-play-button,video.drawer-preview-video::-webkit-media-controls-overlay-play-button,video.dmp-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0!important}
/* Pipeline clips are visible from the start (the still is their poster): phones only autoplay a
   video they can see. Overrides the opacity-0-until-ready rule the Vimeo iframes share, and
   their #111 backdrop — visible now, it flashed grey before the first frame. Transparent, the
   still underneath shows until the clip paints. */
video.clip-video,video.clip-video.ready{opacity:1;transition:none;background:transparent}
/* A clip the phone refused to autoplay (iOS Low Power Mode) is hidden until the first touch:
   otherwise iOS draws its own play button over it. The still underneath is the picture. */
video.clip-video.clip-refused{opacity:0!important}

/* ================================================================================
   21. Privacy / Cookie policy pages, footer policy links, cookie banner.
   ================================================================================ */
.legal-page{background:#000;color:#fff;padding:104px var(--gap) 44px;height:100vh;overflow:auto}
.legal-body{max-width:760px;font-size:15px;line-height:1.55;color:#cfcfcf}
.legal-body h1{font-size:clamp(40px,6vw,96px);font-weight:500;letter-spacing:-.03em;line-height:.95;color:#fff;margin:0 0 14px}
.legal-updated{font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:#777;margin:0 0 36px}
.legal-body h2{font-size:20px;font-weight:600;letter-spacing:-.01em;color:#fff;margin:40px 0 10px}
.legal-body h3{font-size:15px;font-weight:600;color:#fff;margin:22px 0 6px}
.legal-body p,.legal-body ul{margin:0 0 12px}
.legal-body ul{padding-left:20px}
.legal-body li{margin-bottom:6px}
.legal-body strong{color:#fff;font-weight:600}
.legal-body a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.legal-body a:hover{color:var(--accent)}
.legal-body table{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 16px;display:block;overflow-x:auto}
.legal-body th,.legal-body td{text-align:left;vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid #2a2a2a}
.legal-body th{color:#888;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.legal-settings{margin-top:8px}
@media(max-width:900px){.legal-page{height:auto;min-height:100vh}.legal-body{font-size:14px}}

/* the policy links sit inside the small uppercase copyright lines */
.c-policy a,.drawer-policy a,.drawer-foot-copy a,.policy-settings{color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit}
.c-policy a:hover,.drawer-policy a:hover,.drawer-foot-copy a:hover,.policy-settings:hover{color:var(--accent)}
.eq-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.cookie-banner{position:fixed;left:var(--gap);bottom:20px;z-index:110;max-width:460px;padding:18px 20px;
  background:#0b0b0b;color:#cfcfcf;border:1px solid #2a2a2a;border-radius:14px;font-size:13px;line-height:1.45;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}
.cookie-banner p{margin:0 0 14px}
.cookie-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;gap:10px}
.cookie-actions button{flex:1;padding:10px 16px;border:2px solid var(--accent);border-radius:999px;color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;transition:background .2s}
.cookie-actions button:hover{background:var(--accent)}
.cookie-more{display:block;margin:12px auto 0;color:#9a9a9a;font-size:12px;text-decoration:underline;text-underline-offset:2px}
.cookie-more:hover{color:#fff}
.cookie-cats{margin:0 0 14px;border-top:1px solid #2a2a2a}
.cookie-cat{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #2a2a2a;cursor:pointer}
.cookie-cat b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
.cookie-always{flex:none;color:#888;font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.cookie-switch{flex:none;appearance:none;-webkit-appearance:none;width:38px;height:22px;margin:0;border-radius:999px;
  background:#333;position:relative;cursor:pointer;transition:background .2s}
.cookie-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.cookie-switch:checked{background:var(--accent)}
.cookie-switch:checked::after{transform:translateX(16px)}
.cookie-switch:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:900px){.cookie-banner{left:12px;right:12px;bottom:12px;max-width:none}}

/* 22. Mobile project player: the film takes the full width of the block (it was squeezed to
   leave a tap gap for the arrows, ~258px of 354). The arrows shrink and move out into the
   page gutter beside the block, so they no longer sit over the picture; paging by swipe is
   unchanged. */
@media(max-width:900px){
  .vimeo-player{width:100%;max-height:100%}
  /* the glyph sits in the gutter; the tap area (40x56) reaches a little over the block's edge */
  .detail-page .project-arrow{font-size:28px;width:40px;height:56px;padding:0 4px}
  .detail-page .project-arrow.prev{left:-18px;justify-content:flex-start}
  .detail-page .project-arrow.next{right:-18px;justify-content:flex-end}
}

/* 23. Project description (CMS `description`, optional) under the title. */
.detail-head{min-width:0}
.detail-desc{max-width:620px;margin:16px 0 0;font-size:16px;line-height:1.5;color:#bdbdbd;white-space:pre-line}
@media(max-width:900px){.detail-desc{font-size:15px;margin-top:12px}}

/* 24. "Work with us" form (JobsModal): the enquiry popup's look plus a CV picker. */
.eq-form > .eq-file{margin-top:18px}
.eq-file-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:38px}
.eq-file-btn{position:relative;display:inline-flex;align-items:center;border:2px solid var(--accent);border-radius:999px;
  padding:7px 16px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;cursor:pointer}
.eq-file-btn:hover,.eq-file-btn:focus-within{background:var(--accent);color:#0b0b0b}
.eq-file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.eq-file-name{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#cfcfcf;min-width:0;word-break:break-all}
.eq-file-name button{color:#8f8f8f;font-size:18px;line-height:1;padding:0 4px}
.eq-file-name button:hover{color:var(--accent)}
.eq-file.invalid .eq-file-btn{background:rgba(239,65,114,.15)}