/* Approved Movies proposal, extended to the complete portfolio. */
:root{--paper:#f5f3ef;--ink:#243037;--soft-ink:#627078;--line:#d8d7d3;--accent:#b44e21;--gutter:4vw;--slate:var(--paper)}
body,body.info-page,body.credits-page{background:var(--paper);color:var(--ink)}
a:focus-visible,button:focus-visible{outline-color:var(--accent)}
.site-header,.site-footer,.home-main,.portfolio-main,.project-main,.credits-main{width:92%;max-width:1660px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.site-header{height:auto;min-height:112px;padding-top:26px;padding-bottom:24px;justify-content:space-between;border-bottom:1px solid var(--line);background:transparent;gap:30px}
.brand{width:210px;flex-shrink:0}
.site-navigation{display:flex;align-items:center;gap:30px;font-size:15px}
.site-navigation a{padding:7px 0;border-bottom:1px solid transparent}
.site-navigation a[aria-current=page],.site-navigation a:hover{border-bottom-color:var(--ink)}
.site-header>.menu-toggle{display:none;color:var(--ink);position:static;transform:none;flex-shrink:0}
.portfolio-menu{background:var(--paper);color:var(--ink)}.portfolio-menu::backdrop{background:var(--paper)}
.menu-header{background:var(--paper);width:92%;margin:auto;justify-content:flex-start;border-bottom:1px solid var(--line)}
.menu-close{right:0;color:var(--ink)}.menu-bottom{color:var(--soft-ink)}
.menu-items a,.menu-items a:hover,.menu-items a[aria-current=page]{color:var(--ink)}
.home-main,.portfolio-main--overview{padding-top:0;padding-bottom:12px}
.editorial-heading,.portfolio-main--overview .editorial-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;padding:32px 0 24px;margin:0}
.editorial-eyebrow{font-size:11px;font-weight:600;line-height:1.5;text-transform:uppercase;letter-spacing:.16em;margin:0 0 7px}
.editorial-heading h1,.portfolio-main--overview .editorial-heading h1{font-size:clamp(35px,4vw,62px);line-height:1.04;letter-spacing:-.035em;font-weight:350;margin:0}
.editorial-description{margin:0 0 3px;color:var(--soft-ink);font-size:15px;line-height:1.45;text-align:right}
.home-reel-stage,.portfolio-feature .card-media{aspect-ratio:3.1;height:auto;min-height:0;max-height:540px}
.home-reel-stage video{position:absolute;inset:0;object-position:50% 55%}
.portfolio-feature .card-media>img{position:absolute;inset:0;object-position:50% 55%}
.portfolio-feature--packaging .card-media>img{object-position:50% 0}
.portfolio-feature-label,.home-reel-label{font-size:11px;letter-spacing:.14em;top:23px;left:26px}
.portfolio-card{background:transparent}
.portfolio-feature .card-caption,.portfolio-grid .card-caption{position:static;inset:auto;opacity:1;background:none!important;color:var(--ink);padding:15px 0 0;display:block}
.portfolio-feature .card-caption h2,.portfolio-main--overview .portfolio-grid .card-caption h2{font-size:23px;line-height:1.15;font-weight:450;letter-spacing:-.018em;color:var(--ink);margin:0}
.portfolio-feature .card-caption p,.portfolio-grid .card-caption p,.portfolio-feature-arrow{display:none}
.card-credits{font-size:11px;line-height:1.45;color:var(--soft-ink);margin-top:8px}.card-credits span{display:block}
.portfolio-feature .card-credits{margin-top:7px}
.portfolio-feature .portfolio-card{overflow:visible}
.portfolio-feature .film-play{top:16px;right:20px}
.portfolio-feature[hidden],.portfolio-card[hidden]{display:none!important}
.portfolio-tools{margin:40px 0 22px;min-height:62px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:25px}
.portfolio-tools h2{font-size:13px;color:var(--soft-ink)}
.preview-toggle{font-size:13px;color:var(--soft-ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.preview-toggle::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:100%;flex-shrink:0}
.preview-toggle:hover{text-decoration:underline;text-underline-offset:4px}
.film-filters{display:flex;align-items:center;flex-wrap:wrap;gap:26px}
.film-filters button{border:0;background:none;min-height:44px;padding:0;color:var(--soft-ink);font-size:13px}
.film-filters button[aria-pressed=true]{color:var(--ink);font-weight:600}
.portfolio-grid.portfolio-grid--movies,.no-js .portfolio-grid.portfolio-grid--movies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:46px 22px;align-items:start;columns:auto}
.portfolio-grid--movies .card-media{height:auto;aspect-ratio:16/9}
.portfolio-grid--movies .card-media>img{position:absolute;inset:0}
.portfolio-grid--movies .portfolio-card{grid-row-end:auto}
.portfolio-grid--movies .film-play{width:40px;height:40px}
.portfolio-grid:not(.portfolio-grid--movies){column-gap:22px;row-gap:16px}
.portfolio-grid:not(.portfolio-grid--movies) .card-caption{padding:12px 0 16px}
.portfolio-main--overview .portfolio-grid:not(.portfolio-grid--movies) .card-caption h2{font-size:20px}
.portfolio-mix .card-caption{background:linear-gradient(transparent 50%,#000b);color:#fff}
.portfolio-mix .card-caption h2{color:#fff;font-weight:400}
.mix-count{color:var(--soft-ink);font-size:13px}
.mix-pagination{margin-top:32px}
.home-intro h2{font-weight:350}
.home-intro-copy p{color:var(--soft-ink)}
.home-portfolio-link,.portfolio-main--overview .mix-show-more{background:var(--ink);color:var(--paper)}
.home-portfolio-link:hover,.portfolio-main--overview .mix-show-more:hover{background:#3b4951}
.home-secondary-links a{color:var(--ink);text-decoration-color:var(--line)}
.home-music-credit{color:var(--soft-ink)}
.home-reel-progress{background:var(--line)}.home-reel-progress span{background:var(--ink)}
.portfolio-intro{border-color:var(--line);margin-top:64px}
/* A single invitation in the footer keeps collection endings concise. */
.portfolio-intro .home-portfolio-link{display:none}.portfolio-intro .home-intro-copy p{margin-bottom:0}
.site-footer{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 40px;border-top:1px solid var(--line);padding-top:36px;padding-bottom:40px;margin-top:50px;color:var(--ink)}
.footer-invitation{grid-column:1/-1}
.footer-invitation p{font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 7px}
.footer-invitation>a{font-size:clamp(25px,3vw,42px);line-height:1.15;letter-spacing:-.025em;font-weight:350}
.site-footer .contact-links,.site-footer .footer-navigation,.site-footer .footer-links,.credits-page .site-footer,.info-page .site-footer{color:var(--soft-ink);font-size:12px}
.footer-navigation,.footer-links{gap:20px}
/* Project, About and References pages inherit the same paper and type scale. */
.project-main{padding-top:32px;padding-bottom:35px}
.project-topline h1{font-size:clamp(30px,3vw,46px);font-weight:350;line-height:1.1;letter-spacing:-.025em}
.project-topline p,.back-link{color:var(--soft-ink)}
.project-topline{margin-bottom:30px}.project-content{max-width:1280px}
.project-content figcaption{color:var(--soft-ink)}
.page-main{width:92%;max-width:1000px;margin:40px auto 60px}
.info-page .page-main{color:var(--ink)}
.page-main h1{font-size:clamp(35px,4vw,62px);line-height:1.05;letter-spacing:-.035em;font-weight:350;text-transform:none;margin-bottom:36px}
.about-page .page-main{max-width:1080px;margin-top:40px}
.about-page .page-main h1{font-size:clamp(35px,4vw,62px);letter-spacing:-.035em}
.about-page .page-content{font-size:clamp(19px,1.6vw,23px);line-height:1.65}
.credits-main{padding-top:32px;padding-bottom:16px}
.credits-heading{margin-bottom:24px}
.credits-heading h1{font-size:clamp(35px,4vw,62px);font-weight:350;line-height:1.05;letter-spacing:-.035em;text-transform:none}
.credits-controls button,.credits-end,.credits-end span,.credits-intro{color:var(--ink)}
.credits-content .reference-list--logos{gap:38px 46px}
.reference-logo-caption,.credits-content .reference-list--logos .reference-name{color:var(--soft-ink)}
/* Siemens and Orkla use dark lettering on the new light surface. */
.reference-logo img.reference-logo-image--white{filter:brightness(0) saturate(0);opacity:.87}
.reference-logo img.reference-logo-image--raster.reference-logo-image--white{filter:url(#ng-reference-raster-sharpen) brightness(0) saturate(0);opacity:.87}
.lightbox{background:#12171a;color:#fff}.lightbox::backdrop{background:#0a1016ed}
.lightbox .project-link,.lightbox .vimeo-stop,.lightbox .vimeo-direct,.lightbox-close{color:#fff}
.vimeo-notice{color:var(--soft-ink);background:transparent}
@media(min-width:1800px){.home-reel-stage,.portfolio-feature .card-media{max-height:540px}}
@media(max-width:1000px){.site-navigation{gap:20px;font-size:14px}.brand{width:185px}}
@media(max-width:850px){
 .site-header{min-height:94px;padding:20px 0}.site-navigation{display:none}.site-header>.menu-toggle{display:grid}
 .brand{width:175px}.editorial-description{font-size:13px;max-width:190px}
 .home-reel-stage,.portfolio-feature .card-media{aspect-ratio:2.15}
 .portfolio-grid.portfolio-grid--movies{gap:32px 16px}
 .site-footer{grid-template-columns:1fr}
 .portfolio-feature .card-caption h2,.portfolio-main--overview .portfolio-grid .card-caption h2{font-size:21px}
}
@media(max-width:700px){
 .editorial-heading,.portfolio-main--overview .editorial-heading{display:flex;padding:26px 0 20px;margin:0;align-items:flex-end;gap:18px}
 .editorial-heading h1,.portfolio-main--overview .editorial-heading h1{font-size:clamp(35px,6vw,46px);margin:0}
 .editorial-eyebrow{font-size:10px;letter-spacing:.11em;margin-bottom:8px}
 .portfolio-feature .card-caption{padding:12px 0 0;background:none!important}
 .portfolio-feature .card-caption p{display:none}
 .portfolio-feature .film-play{width:38px;height:38px;top:12px;right:12px}
 .portfolio-feature .film-play--vimeo{width:auto}
 .portfolio-feature .card-credits{font-size:11px}
 .home-reel-controls{color:var(--ink)}
 .home-intro{padding-top:40px}
 .portfolio-tools{margin-top:28px;min-height:62px}
 .credits-heading{align-items:flex-start;flex-direction:column;gap:14px}
 .credits-controls{justify-content:flex-start}
 .credits-content .reference-list--logos{gap:24px 26px}
 .site-footer{margin-top:36px}
}
@media(max-width:520px){
 .brand{width:158px}.site-header{min-height:88px;padding:18px 0}
 .editorial-description{display:none}
 .home-reel-stage,.portfolio-feature .card-media{aspect-ratio:16/10}
 .portfolio-feature-label,.home-reel-label{font-size:9px;left:14px;top:14px}
 .portfolio-feature .card-caption h2{font-size:22px}
 .portfolio-grid.portfolio-grid--movies,.no-js .portfolio-grid.portfolio-grid--movies{grid-template-columns:1fr;gap:30px}
 .portfolio-grid--movies .card-media{height:auto;aspect-ratio:16/9}
 .portfolio-tools{gap:16px;flex-wrap:wrap;padding:10px 0}
 .film-filters{gap:19px}.film-filters button,.preview-toggle{font-size:13px}
 .portfolio-tools:has(.film-filters) .preview-toggle{margin-left:auto;min-height:32px;padding:0}
 .portfolio-intro{margin-top:40px}
 .credits-heading h1{font-size:35px}
 .page-main h1,.about-page .page-main h1{font-size:38px}
 .footer-navigation,.footer-links{gap:12px 18px}
 .home-reel-buttons{gap:15px}
}
@media(prefers-reduced-motion:reduce){.card-preview{transition:none}}

.lightbox .card-credits{color:#bcc6cc;max-width:100%;text-align:center;margin:5px 0;font-size:12px;flex-shrink:0}
.no-js .film-filters{display:none}
.editorial-heading h1{text-transform:none}

/* White wordmarks need dark ink; mixed-colour reversed artwork keeps a dark backing. */
.reference-logo img[src$="/logo-14-b.webp"]{filter:url(#ng-reference-raster-sharpen) brightness(0);opacity:.86}
.reference-logo img[src$="/logo-15-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-21-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-25-b.webp"]{background:#243037;padding:9px 12px}
.reference-logo img[src$="/logo-42-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-46-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-67-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-85-round3.webp"]{filter:url(#ng-reference-raster-sharpen) brightness(0);opacity:.86}
.reference-logo img[src$="/logo-101-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-124-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-136-b-hires-vector.svg"]{filter:brightness(0);opacity:.86}
.reference-logo img[src$="/logo-144-b.webp"]{background:#243037;padding:9px 12px}
.reference-logo img[src$="/logo-224-round4.webp"]{background:#243037;padding:9px 12px}
.reference-logo img[src$="/logo-72-b-hires.webp"]{filter:url(#ng-reference-raster-sharpen) brightness(0);opacity:.86}
.reference-logo img[src$="/logo-lotao-original-final4.webp"]{filter:url(#ng-reference-raster-sharpen) brightness(0);opacity:.86}
.reference-logo img[src$="/logo-billa-final4-vector.svg"]{filter:brightness(0);opacity:.86}

/* Keep the brand and navigation visible while the portfolio scrolls. */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);isolation:isolate}
.site-header::before{content:'';position:absolute;z-index:-1;inset:0 calc((100% - 100vw)/2);background:inherit;pointer-events:none}
html{scroll-padding-top:130px}
body.admin-bar .site-header{top:32px}
@media(max-width:850px){html{scroll-padding-top:110px}}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:600px){#wpadminbar{position:fixed}}
