/* A small utility control, separate from the three navigation destinations. */
.brand-controls{display:flex;align-items:center;gap:20px;flex-shrink:0}
.theme-toggle{display:grid;place-items:center;position:relative;width:40px;height:40px;padding:0;flex-shrink:0;border:0;border-radius:50%;background:#080c1370;color:#e4e8f0;backdrop-filter:blur(12px);transition:color .25s,background .25s}
.theme-toggle:hover{color:var(--blue);}
.switching-theme .site-header nav,.switching-theme .theme-toggle{transition:none}
.theme-toggle svg{grid-area:1/1;transition:opacity .25s,transform .45s cubic-bezier(.22,1,.36,1)}
.theme-moon{opacity:0;transform:rotate(-35deg) scale(.6)}
[data-theme=light] .theme-sun{opacity:0;transform:rotate(35deg) scale(.6)}
[data-theme=light] .theme-moon{opacity:1;transform:none}

/* Cool paper, ink and the same blue. Colours switch without touching layout or scroll. */
:root[data-theme=light]{--bg:#f7f8fa;--white:#111824;--muted:#58616f;--blue:#205dcc;--line:rgba(22,37,61,.19);color-scheme:light}
[data-theme=light] body{background:radial-gradient(ellipse at 90% 20%,#dce5f433,transparent 35%),var(--bg)}
[data-theme=light] .theme-toggle{background:#f1f2f4b8;color:#24344d}
[data-theme=light] .theme-toggle:hover{color:var(--blue);}
[data-theme=light] .site-header nav>a:not(.button){color:#263345}
[data-theme=light] .site-header nav>a:not(.button):hover{color:var(--blue)}
[data-theme=light] .site-header.scrolled{background:linear-gradient(#f7f8faeb,transparent)}
[data-theme=light] .site-header.scrolled nav{background:#e6eaf0b8;}

/* The cinematic landing stays dark: screen blending needs a dark surface. */
[data-theme=light] .hero{--bg:#030405;--blue:#3b82f6;color:#f4f4f5;color-scheme:dark}
[data-theme=light] .site-header:not(.scrolled){--blue:#3b82f6;color:#f4f4f5}
[data-theme=light] .site-header:not(.scrolled) nav>a:not(.button){color:#d7d9de}
[data-theme=light] .site-header:not(.scrolled) .theme-toggle{background:#080c1370;color:#e4e8f0}

/* Use supplied light logos unchanged; retain screen blending for the original neon. */
.brand-logos img,.social-screen img{filter:none;opacity:1}
.brand-logos img:is([alt="Absa"],[alt="DStv"],[alt="Tiger Brands"]){transform:scale(.75);transform-origin:center}
.hero-ideas{mix-blend-mode:screen;filter:none}
.closing-art{background:transparent}
.closing-art img{mix-blend-mode:normal;filter:none}

[data-theme=light] :is(.trust-foot,.project-category,.project-credit,.reel-frame-label,.reel-panel .eyebrow,.field label small,.footer-bottom){color:var(--muted)}
[data-theme=light] :is(.trust-foot b,.service-row>div>p:first-child,.field label){color:#354154}
[data-theme=light] .how{background:radial-gradient(ellipse at 15% 50%,#205dcc09,transparent 58%)}
[data-theme=light] .reel-panel{background:radial-gradient(ellipse at 15% 50%,#205dcc0b,transparent 70%)}
[data-theme=light] .service-row:hover h3{color:var(--blue)}
[data-theme=light] .collective{background:transparent}
.portrait{background:#0c1421}
.portrait img{mix-blend-mode:screen}
[data-theme=light] .portrait{background:#edf2f8}
[data-theme=light] .portrait img{mix-blend-mode:multiply}
.portrait img,.team-member:hover .portrait img{filter:none}
.team-member figcaption .memorial{color:#5b6d86}
[data-theme=light] .team-member figcaption .memorial{color:#9baac0}
[data-theme=light] .award-list article>span{color:var(--blue)}
[data-theme=light] .contact{background:radial-gradient(ellipse at 0% 60%,#205dcc0c,transparent 56%)}
[data-theme=light] .contact-copy>p{color:#49566a}
[data-theme=light] .field input,[data-theme=light] .field textarea{color:var(--white);background:#e9edf2;}
[data-theme=light] .field input::placeholder,[data-theme=light] .field textarea::placeholder{color:#626d7b}
[data-theme=light] .field input:focus,[data-theme=light] .field textarea:focus{background:#dde7f7;}
[data-theme=light] .form-status{background:#e3eafa;color:#243f72}
[data-theme=light] .form-status.error{background:#f5e4e1;color:#85392e}
[data-theme=light] dialog{background:#f1f2f4;}
[data-theme=light] .film-selector button{color:var(--muted)}
[data-theme=light] .film-selector button[aria-pressed=true]{color:var(--white)}

/* Keep the utility thumb-sized without squeezing the three destinations. */
@media(max-width:700px){.brand-controls{gap:9px}.theme-toggle{width:36px;height:36px}.site-header{gap:8px}.site-header nav{gap:10px}.site-header nav>a:not(.button){margin-left:2px}.button-small{gap:8px;padding-inline:12px}}
@media(max-width:370px){.brand-controls{gap:5px}.theme-toggle{width:32px;height:36px}.theme-toggle svg{width:17px;height:17px}.site-header{padding-inline:10px;gap:5px}.site-header nav{gap:8px;padding:4px}.site-header nav>a:not(.button){margin-left:0}.button-small{padding-inline:9px}.logo{font-size:15px}}
@media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle svg{transition:none}}

:root[data-theme=light]{--focus-fill:#205dcc1c;--field-focus:#dde7f7;--utility-fill:#d9e0ec99}
[data-theme=light] .outline{color:#727e8f}
[data-theme=light] .ghost-number{color:#205dcc4d}
[data-theme=light] .theme-toggle{background:#dfe5ed99}
[data-theme=light] .theme-toggle:hover{background:#d1dbeacc}
[data-theme=light] .button{background:rgb(26 84 219 / 84%)}
[data-theme=light] .button:hover{background:rgb(26 84 219 / 91%)}
[data-theme=light] .button:focus-visible{background:rgb(20 65 166 / 92%)}

/* Quiet chapter washes run edge to edge, without adding lines or changing layout. */
:root{--chapter-paper:#030405;--chapter-grey:#090c12;--chapter-blue:#07111e;--chapter-portraits:#090b0f;--chapter-fade:clamp(48px,6vw,88px)}
:root[data-theme=light]{--chapter-paper:#f7f8fa;--chapter-grey:#f0f2f6;--chapter-blue:#edf2f9;--chapter-portraits:#f7f8fa}
main{overflow-x:clip}
main>section.section,main>.trust{position:relative;isolation:isolate;background:none}
main>section:not(.hero)::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:var(--chapter-start,0px) calc((100% - 100vw) / 2) 0;
  background:linear-gradient(to bottom,var(--chapter-previous),var(--chapter-current) var(--chapter-fade));
}
.trust{--chapter-previous:var(--chapter-grey);--chapter-current:var(--chapter-grey)}
.work{--chapter-previous:var(--chapter-grey);--chapter-current:var(--chapter-paper)}
.how{--chapter-previous:var(--chapter-paper);--chapter-current:var(--chapter-blue)}
.services{--chapter-previous:var(--chapter-blue);--chapter-current:var(--chapter-grey)}
.collective{--chapter-previous:var(--chapter-grey);--chapter-current:var(--chapter-portraits)}
.awards{--chapter-previous:var(--chapter-portraits);--chapter-current:var(--chapter-blue)}
.contact{--chapter-previous:var(--chapter-blue);--chapter-current:var(--chapter-paper)}
.how,.services,.contact{--chapter-start:calc(var(--section-breath) / -2)}

/* Soft media frames in both lighting modes; supplied logo silhouettes stay intact. */
:root{--media-radius:clamp(16px,2vw,24px)}
.project-image,.portrait,.closing-art img,#film-player,.reel-panel{border-radius:var(--media-radius)}
.project-image,.portrait{overflow:hidden;isolation:isolate}
#film-player{overflow:hidden}
.hero{border-radius:0 0 var(--media-radius) var(--media-radius)}
dialog{border-radius:calc(var(--media-radius) + 8px)}
.image-index{border-radius:6px}
.form-status{border-radius:12px}