/* Brand-led case presentations with shared site typography and scoped client faces. */
@font-face{font-family:'Heineken Serif';src:url('_preview-gameplan/assets/fonts/heineken-serif-18-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Heineken Serif';src:url('_preview-gameplan/assets/fonts/heineken-serif-18-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@view-transition{navigation:auto}
.wordmark,.intro h1,.case-heading h1,.closing h2{font-family:var(--site-font);font-weight:700;letter-spacing:-.03em}
.wordmark{font-size:32px;letter-spacing:0}
.intro h1{font-size:clamp(48px,6.5vw,96px);line-height:1.02}
.closing h2{font-size:clamp(42px,5vw,72px);font-weight:700}
.brand-world{--ink:var(--world-ink);--paper:var(--world-base);--muted:color-mix(in srgb,var(--world-ink) 72%,var(--world-base));--line:color-mix(in srgb,var(--world-ink) 24%,transparent);--dark:var(--world-surface);--mint:var(--world-accent);background:var(--world-base);color:var(--world-ink)}
html:has(.brand-world){background:var(--world-base)}
.brand-world::before{content:"";position:absolute;inset:0 0 auto;height:950px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 80% 10%,var(--world-glow),transparent 70%)}
.brand-world .wrap{width:min(1440px,calc(100% - 112px))}
.brand-world .nav{height:94px;border-color:var(--line)}
.brand-world .contact{border-color:var(--line)}
.brand-world .breadcrumb{margin-top:38px;opacity:.8}
.brand-world .case-heading{grid-template-columns:1.4fr 1fr;gap:8%;align-items:end;padding:64px 0 52px}
.brand-world .case-heading h1{font-size:clamp(90px,12vw,174px);line-height:1.02;margin-top:30px;max-width:850px;text-wrap:balance}
.brand-world .case-heading p{font-size:15px;line-height:1.75;max-width:480px}
.brand-world .case-heading .eyebrow{color:var(--world-accent)}
.brand-world[data-brand=boulevard] .case-heading .eyebrow,.brand-world[data-brand=luthuli] .case-heading .eyebrow{color:var(--ink)}
.brand-world .surface-tags{gap:7px;margin-top:24px}
.brand-world .surface-tags span{border-color:var(--line);border-radius:0;padding:7px 9px;line-height:1.35}
.brand-world .recognition-list{color:var(--world-accent)}
.case-sections{display:flex;gap:32px;align-items:center;border-top:1px solid var(--line);padding:21px 0 28px;font-size:11px}
.case-sections a{opacity:.75}.case-sections a:hover{opacity:1}.case-sections>span{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.55}
.brand-world section[id],.brand-world #applications,.brand-world #credits{scroll-margin-top:28px}
.brand-world .bleed{margin-inline:calc((min(1440px,100vw - 112px) - 100vw)/2);padding-inline:max(56px,calc((100vw - 1440px)/2))}
.logo-suite{background:var(--world-surface);color:#fff6e8;margin-top:0;padding-block:48px 64px;position:relative}
.suite-heading{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:1}
.suite-heading .eyebrow{grid-column:1/-1;color:var(--world-accent)}
.suite-heading h2{font-family:var(--site-font);font-size:clamp(35px,4vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0}
.suite-count{font-size:10px;text-transform:uppercase;letter-spacing:.1em;align-self:end;text-align:right;opacity:.6}
.suite-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 4%;padding-top:18px}
.suite-mark{margin:0;min-width:0;background:var(--suite-card,transparent);color:var(--suite-label,#fff6e8);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px 22px;min-height:260px}
.suite-mark a{display:flex;align-items:center;justify-content:center;width:100%;min-height:210px}
.suite-mark img{width:min(100%,var(--suite-width));height:var(--suite-height);object-fit:contain;transition:transform .35s}
.suite-mark a:hover img{transform:scale(1.035)}
.suite-mark figcaption{font-size:9px;letter-spacing:.09em;text-transform:uppercase;opacity:.65;text-align:center;margin-top:26px;line-height:1.5}
.suite-primary{grid-column:1/-1;min-height:350px;padding-block:20px 38px}
.suite-primary a{min-height:300px}
.suite-primary img{width:min(85%,calc(var(--suite-width)*2));height:320px;max-height:340px}
.suite-primary figcaption{margin-top:10px}
.brand-world[data-brand=virtual-tours] .logo-suite{background:radial-gradient(ellipse at 55% 35%,#4d216e 0%,#181051 60%,#120d44 100%)}
.brand-world[data-brand=fashion-fix] .logo-suite{background:radial-gradient(ellipse at 60% 30%,#43331c,#1b1711 72%)}
.brand-world[data-brand=luthuli] .suite-layout{grid-template-columns:repeat(5,minmax(0,1fr))}
.brand-world[data-brand=luthuli] .suite-mark{padding-inline:12px}.brand-world[data-brand=luthuli] .suite-mark img{max-height:175px}.brand-world[data-brand=luthuli] .suite-primary img{max-height:340px}
.brand-world[data-brand=eskom-green] .suite-layout{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.brand-world[data-brand=eskom-green] .suite-primary{grid-column:auto;min-height:260px;padding:30px 20px 22px}
.brand-world[data-brand=eskom-green] .suite-primary a{min-height:210px}
.brand-world[data-brand=eskom-green] .suite-primary img{width:min(100%,var(--suite-width));height:var(--suite-height)}
.brand-world[data-brand=eskom-green] .suite-primary figcaption{margin-top:26px}
.brand-world{--artwork-height:min(40svh,320px);--hero-height:min(48svh,400px)}
.brand-world .case-hero{max-width:760px;margin:0 auto 48px;--artwork-height:var(--hero-height)}
.brand-world .evidence-figure img,.brand-world .gallery .evidence-figure img,.brand-world .gallery figure:last-child:nth-child(odd) img{width:auto;max-width:100%;height:auto;max-height:var(--artwork-height);aspect-ratio:auto;object-fit:contain;background:transparent}
.brand-world .caption{color:var(--muted);font-size:11px;gap:28px;margin:14px 0 0}
.brand-world .caption span:first-child{max-width:70%}.brand-world .caption span:last-child{text-align:right;font-size:8px;max-width:38%;line-height:1.7}
.brand-world .identity-row{margin:80px 0;gap:6%;align-items:center;min-height:0}
.brand-world .identity-copy{padding:0}
.brand-world .identity-copy h2{font-family:var(--site-font);font-size:clamp(38px,4.5vw,65px);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:25px 0}
.brand-world .identity-copy p{color:var(--muted);font-size:15px;line-height:1.8}
.brand-world .has-suite{display:block;margin:62px 0 80px}
.brand-world .has-suite .identity-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 9%;align-items:center}
.brand-world .has-suite .identity-copy>.eyebrow{grid-column:1/-1}
.brand-world .has-suite .identity-copy h2{grid-row:2/4;margin-bottom:0}
.brand-world .has-suite .identity-copy p{margin-top:28px;max-width:530px}
.brand-world .swatches i{width:60px;height:5px;border:0}.brand-world .swatches{margin-top:25px}
.brand-world .mark-stage{background:var(--world-surface);min-height:390px;padding:60px}
.brand-world .mark-stage img{max-height:280px;width:min(90%,calc(var(--mark-width,160px)*2.4));height:calc(var(--mark-height,110px)*2.4)}
.brand-world .digital-experience{margin:30px 0 80px}
.brand-world .experience-bar{padding:20px 0;border-color:var(--line)}
.brand-world .experience-frame{border-radius:0;background:var(--world-surface);height:760px}
.brand-world .section-head{margin:100px 0 38px}
.brand-world .section-head h2{font-family:var(--site-font);font-size:clamp(38px,4vw,60px);font-weight:700;letter-spacing:-.03em}
.brand-world .evidence-gallery,.brand-world .gallery,.editorial-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:55px 36px;align-items:start}
.brand-world .gallery>figure,.brand-world .evidence-gallery>figure,.editorial-gallery>figure{grid-column:span 6;min-width:0}
.brand-world .gallery>figure:last-child:nth-child(odd){grid-column:span 6}
.artwork-link{cursor:zoom-in;display:block}
.brand-chapter{margin-top:110px}
.chapter-intro{display:grid;grid-template-columns:1fr 1fr;gap:25px 9%;align-items:end;margin-bottom:40px}
.chapter-intro .eyebrow{grid-column:1/-1;color:var(--world-accent)}
.chapter-intro h2{font-family:var(--site-font);font-size:clamp(48px,5.3vw,80px);font-weight:700;line-height:1.02;letter-spacing:-.03em;margin:0}
.chapter-intro p{max-width:430px;font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.brand-world .scene-disclosure{margin-top:70px;border-color:var(--line)}
.brand-world .scene-disclosure summary{font-size:20px;padding:28px 0}
.brand-world .scene-disclosure>p{color:var(--muted)}
.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px;padding:18px 0 35px}
.guide-grid img{aspect-ratio:1.6;object-fit:contain}.guide-grid a>span{display:block;font-size:10px;margin-top:10px;color:var(--muted)}
.brand-world .live-site{background:var(--world-surface);color:#fff6e8;border-left:3px solid var(--world-accent);padding:30px}
.brand-world .live-site p{color:inherit;opacity:.7}.brand-world .live-site>a{background:var(--world-accent);color:var(--world-surface)}
.brand-world .evidence{max-width:920px;margin-top:95px;border-color:var(--line);padding-top:32px;line-height:1.85}
.brand-world .next{background:var(--next-bg);color:var(--next-ink);border:0;padding:45px 48px;margin-top:65px;min-height:230px}
.brand-world .next h2{font-family:var(--site-font);font-size:clamp(38px,5vw,74px);line-height:1.02;margin-top:23px}
.brand-world .next>img{width:145px;height:145px;object-fit:contain;margin-left:auto}.brand-world .next>span{font-size:30px}
.brand-world .closing{background:var(--world-surface);color:#fff7e7;margin-top:0;padding:80px 0}
.brand-world .closing .pill{background:var(--world-accent);color:var(--world-surface)}
.brand-world .foot{color:var(--muted);padding-block:30px}
.artwork-viewer{padding:20px 30px;background:#111b16;color:#f7f1e7;border:1px solid #ffffff24;width:calc(100vw - 36px);height:calc(100dvh - 36px);max-width:1800px;max-height:none;overflow:hidden}
.artwork-viewer::backdrop{background:#000d;backdrop-filter:blur(10px)}
.artwork-viewer[open]{display:flex;flex-direction:column;gap:15px}
.viewer-open{overflow:hidden}
.viewer-toolbar,.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}
.viewer-kind{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.artwork-viewer button{background:transparent;border:1px solid #ffffff44;color:inherit;cursor:pointer;padding:12px 18px;font:inherit;font-size:12px}
.viewer-image{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--world-surface,#111b16)}
.viewer-image img{width:100%;height:100%;object-fit:contain}
.viewer-label{font-size:12px;line-height:1.5;text-align:center}.viewer-prev,.viewer-next{font-size:20px!important}
@media(min-width:1700px){.brand-world .wrap{width:1440px}}
@media(max-width:1000px){
 .brand-world .wrap{width:calc(100% - 64px)}
 .brand-world .bleed{margin-inline:-32px;padding-inline:32px}
 .brand-world .case-heading{gap:5%;grid-template-columns:1.15fr 1fr}.brand-world .case-heading h1{font-size:clamp(76px,10vw,126px)}
 .suite-layout{gap:20px 10px}.suite-mark{padding-inline:12px}
 .brand-world[data-brand=luthuli] .suite-layout{grid-template-columns:repeat(3,minmax(0,1fr))}
 .brand-world[data-brand=luthuli] .suite-mark:last-child{grid-column:span 2}
 .brand-world .gallery,.brand-world .evidence-gallery,.editorial-gallery{gap:38px 24px}
 .chapter-intro{gap:20px 5%}.chapter-intro h2{font-size:55px}
}
@media(max-width:700px){
 .wordmark{font-size:24px}.intro h1{font-size:55px;letter-spacing:-.03em}
 .brand-world .wrap{width:calc(100% - 40px)}.brand-world .nav{height:80px}.brand-world .wordmark{font-size:23px}.wordmark small{font-size:8px;letter-spacing:1.3px}
 .brand-world .bleed{margin-inline:-20px;padding-inline:20px}
 .brand-world .breadcrumb{margin-top:27px}.brand-world .case-heading{display:block;padding:40px 0 30px}
 .brand-world .case-heading h1{font-size:clamp(80px,20vw,112px);margin:25px 0 30px;line-height:1.02}
 .brand-world .case-heading p{font-size:14px}.brand-world .case-heading .eyebrow{font-size:9px;line-height:1.7}
 .case-sections{font-size:10px;gap:24px;padding:20px 0 24px}.case-sections>span{display:none}
 .logo-suite{padding-block:32px 36px}.suite-heading{gap:12px}.suite-heading h2{font-size:36px}.suite-count{font-size:8px;line-height:1.6}
 .suite-layout,.brand-world[data-brand=eskom-green] .suite-layout,.brand-world[data-brand=luthuli] .suite-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}
 .suite-mark{padding:18px 10px;min-height:170px}.suite-mark a{min-height:145px}.suite-mark img{max-width:100%;height:145px;max-height:145px}
 .suite-mark figcaption{font-size:8px;margin-top:16px}.suite-primary{padding-block:14px 24px;min-height:300px}.suite-primary a{min-height:260px}.suite-primary img{height:260px;max-height:280px}
 .suite-mark:last-child:nth-child(even){grid-column:1/-1}
 .brand-world[data-brand=luthuli] .suite-mark:last-child{grid-column:auto}.brand-world[data-brand=luthuli] .suite-primary img{max-height:280px}
 .brand-world[data-brand=eskom-green] .suite-mark{min-height:145px}.brand-world[data-brand=eskom-green] .suite-mark:last-child{grid-column:auto}.brand-world[data-brand=eskom-green] .suite-mark a{min-height:120px}.brand-world[data-brand=eskom-green] .suite-mark img{height:110px;max-height:110px}.brand-world[data-brand=eskom-green] .suite-primary{padding:18px 10px}
 .brand-world .case-hero{margin-bottom:35px}.brand-world .case-hero .caption{padding:0}
 .brand-world .identity-row,.brand-world .has-suite{margin:48px 0;display:block}.brand-world .identity-copy{margin-top:28px}
 .brand-world .has-suite .identity-copy{display:block}.brand-world .has-suite .identity-copy p{margin-top:24px}
 .brand-world .identity-copy h2{font-size:42px}.brand-world .identity-copy p{font-size:14px}.brand-world .mark-stage{min-height:290px;padding:40px}.brand-world .mark-stage img{max-height:210px}
 .brand-world .digital-experience{margin:30px 0 50px}.brand-world .experience-frame{height:730px}
 .brand-world .gallery,.brand-world .evidence-gallery,.editorial-gallery{display:block}
 .brand-world .gallery>figure,.brand-world .evidence-gallery>figure,.editorial-gallery>figure{margin:0 0 32px!important}
 .brand-world .section-head{margin:60px 0 25px}.brand-world .section-head h2{font-size:40px}
 .brand-world .caption{font-size:10px;gap:18px}.brand-world .caption span:last-child{font-size:7px}
 .brand-chapter{margin-top:65px}.chapter-intro{display:block;margin-bottom:28px}.chapter-intro .eyebrow{font-size:9px}.chapter-intro h2{font-size:46px;margin-top:22px}.chapter-intro p{font-size:13px;margin-top:23px}
 .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
 .brand-world .scene-disclosure summary{font-size:16px}.brand-world .scene-disclosure summary span{font-size:9px}
 .brand-world .next{padding:30px 25px;min-height:195px;gap:15px}.brand-world .next h2{font-size:38px}.brand-world .next>img{width:70px;height:95px}.brand-world .next>span{display:none}.brand-world .next .eyebrow{font-size:8px}
 .brand-world .closing{padding:50px 0}.brand-world .closing h2{font-size:42px}.brand-world .foot{font-size:9px}
 .artwork-viewer{width:calc(100vw - 16px);height:calc(100dvh - 16px);padding:14px}.viewer-kind{font-size:8px;max-width:65%;line-height:1.5}.viewer-label{font-size:10px}.artwork-viewer button{padding:10px 12px;font-size:10px}
}
@media(prefers-reduced-motion:no-preference){.brand-world #case{animation:world-arrive .5s ease-out both}@keyframes world-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}

.brand-world[data-brand=dees] .logo-suite{background:#383838}.brand-world[data-brand=dees] .suite-mark{--suite-label:#fff6e8!important}

.case-shell:not(.brand-world){background:#0c1812;color:#f3f2ea;min-height:100vh}.brand-world .next>img{padding:10px}

/* The collection uses navy and ice blue; individual identities keep their own palettes. */
body:has(#projects){--paper:#0b1730;--ink:#f3f6ff;--muted:#a9b9d3;--line:#b9d4ff33;--dark:#071124;--mint:#b9d4ff;background:var(--paper);color:var(--ink)}
html:has(#projects){background:#0b1730}
body:has(#projects) .intro h1 span{color:var(--mint)}
body:has(#projects) .filter-list button[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:var(--dark)}
body:has(#projects) .closing{color:var(--ink)}
body:has(#projects) ::selection{background:var(--mint);color:var(--dark)}
.logo-suite .suite-heading .eyebrow{color:#fff6e8;opacity:.65}

.viewer-actions{display:flex;gap:8px;flex-shrink:0}.viewer-image.is-zoomed{display:block;overflow:auto;overscroll-behavior:contain}.viewer-image.is-zoomed img{width:max(1100px,100%);height:auto;max-width:none;max-height:none}.viewer-zoom[aria-pressed=true]{background:#fff2}

html:has(.brand-world){scroll-behavior:auto}

/* Campaign worlds and browsable development boards. */
.campaign-collaboration{display:grid;grid-template-columns:1fr 1.1fr;gap:30px 7%;align-items:center;margin-top:32px;padding:42px;background:#ffd238;color:#3e1010}
.campaign-collaboration h3{font:600 clamp(32px,3.5vw,52px)/1.08 var(--site-font);letter-spacing:-.02em;margin:22px 0 16px}
.campaign-collaboration p{font-size:12px;line-height:1.65;max-width:350px}
.collaboration-marks{display:flex;align-items:center;gap:26px}.collaboration-marks img{width:calc((100% - 52px)/3);height:92px;object-fit:contain}
.collaboration-cta{font-size:11px;border-top:1px solid #3e101038;padding-top:22px;grid-column:1/-1}
.client-marks{background:#ffd238;color:#44131a;padding:36px 45px;margin:0 0 60px}
.client-marks>div{display:flex;align-items:center;justify-content:center;gap:9%;padding:30px 0}
.client-marks img{width:23%;max-width:240px;height:110px;object-fit:contain}.client-marks p{font-size:10px;opacity:.7;text-align:center;margin:0}
.craft-section{margin:90px 0 110px;scroll-margin-top:30px}
.craft-deck{border:1px solid var(--line);background:color-mix(in srgb,var(--world-surface) 70%,transparent);padding:24px}
.craft-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--world-accent) transparent}
.craft-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:inherit;font:500 11px/1.4 var(--site-font);text-align:left;padding:10px 22px 17px;min-width:130px;flex:1;cursor:pointer;opacity:.6}
.craft-tabs button>span{display:block;font-size:9px;letter-spacing:.1em;margin-bottom:10px;opacity:.55}
.craft-tabs button[aria-selected=true]{border-bottom-color:var(--world-accent);opacity:1;background:color-mix(in srgb,var(--world-ink) 4%,transparent)}
.craft-tabs button:focus-visible,.craft-controls button:focus-visible{outline:2px solid var(--world-accent);outline-offset:-2px}
.craft-panel[hidden]{display:none}.craft-panel .evidence-figure{margin:0}
.craft-panel .artwork-link{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--craft-bg)}
.brand-world .craft-panel .evidence-figure img{width:100%;height:100%;max-height:700px;object-fit:contain}
.brand-world .craft-panel.is-mark .evidence-figure img{width:58%;height:75%;max-height:360px}
.craft-note{font-size:13px;line-height:1.75;color:var(--muted);max-width:780px;margin:22px 0 5px;min-height:46px}
.craft-controls{border-top:1px solid var(--line);padding-top:20px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.craft-controls button{width:46px;height:42px;background:transparent;color:inherit;border:1px solid var(--line);font-size:20px;cursor:pointer}.craft-controls button:hover{background:var(--world-ink);color:var(--world-base)}
.craft-position{font-size:10px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.editorial-gallery.layout-triptych{grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px}
.editorial-gallery.layout-triptych>figure:nth-child(n){grid-column:auto;margin-top:0}
.brand-world .layout-triptych .artwork-link{aspect-ratio:3/4;display:flex;background:#ffc937;align-items:center;justify-content:center;padding:16px}
.brand-world .layout-triptych img{width:100%;height:100%;object-fit:contain}
.editorial-gallery.layout-wide>figure:nth-child(n){grid-column:1/-1;margin-top:0}
.editorial-gallery.layout-pair{grid-template-columns:1fr 1fr;align-items:center}
.editorial-gallery.layout-pair>figure:nth-child(n){grid-column:auto;margin-top:0}
.brand-world[data-brand=delightful-boost] .case-heading h1{max-width:760px}
.brand-world[data-brand=delightful-boost] .case-hero .artwork-link{box-shadow:0 30px 80px #51061233}
.brand-world[data-brand=delightful-boost] #new-explorations{background:var(--world-surface);margin-inline:-40px;padding:50px 40px 35px}
.case-sections{flex-wrap:wrap;row-gap:16px}
@media(max-width:700px){
 .campaign-collaboration{grid-template-columns:1fr;padding:28px 23px;gap:22px}.campaign-collaboration h3{font-size:45px}.campaign-collaboration .eyebrow{font-size:8px;line-height:1.7}.collaboration-marks{gap:15px}.collaboration-marks img{width:calc((100% - 30px)/3);height:74px}
 .client-marks{padding:26px 20px;margin-bottom:40px}.client-marks>div{gap:6%;padding:23px 0}.client-marks img{width:29%;height:66px}.client-marks .eyebrow{font-size:8px}.client-marks p{font-size:8px;line-height:1.7}
 .craft-section{margin:65px 0}.craft-deck{padding:12px}.craft-tabs{margin-bottom:12px}.craft-tabs button{padding:9px 12px 13px;min-width:117px;font-size:10px}.craft-tabs button>span{margin-bottom:7px}.craft-note{font-size:12px;min-height:65px}.craft-controls{padding-top:14px;margin-top:14px}
 .brand-world .craft-panel.is-mark .evidence-figure img{height:75%;width:62%;max-height:220px}
 .brand-world .craft-panel .caption{flex-wrap:wrap;gap:5px}.brand-world .craft-panel .caption span:first-child{max-width:100%}.brand-world .craft-panel .caption span:last-child{max-width:100%;text-align:left}
 .editorial-gallery.layout-triptych{display:grid;grid-template-columns:1fr 1fr;gap:25px 15px}.editorial-gallery.layout-triptych>figure:nth-child(n){margin:0!important}.editorial-gallery.layout-triptych .caption{display:block}.editorial-gallery.layout-triptych .caption span{display:block;max-width:100%;text-align:left}.editorial-gallery.layout-triptych .caption span:last-child{margin-top:6px}
 .brand-world .layout-triptych .artwork-link{padding:6px}
 .brand-world[data-brand=delightful-boost] #new-explorations{margin-inline:-20px;padding:35px 20px 15px}
 .case-sections{column-gap:22px}
}
/* Exact original logos remain separate from generated photographic plates. */
.scene-canvas{display:block;position:relative;isolation:isolate;overflow:hidden}
.brand-world .scene-canvas .scene-base{display:block;width:100%;height:auto}
.brand-world .scene-canvas .scene-logo,.artwork-viewer .scene-logo{position:absolute;max-width:none;max-height:none;object-fit:contain;aspect-ratio:auto;mix-blend-mode:normal;pointer-events:none}
.brand-world .case-hero .scene-canvas{box-shadow:0 28px 80px #0002}
.viewer-canvas{position:relative;width:min(100%,calc((100dvh - 210px) * var(--viewer-ratio,1.5)));flex-shrink:0}
.viewer-image .viewer-base{display:block;width:100%;height:auto;object-fit:contain}
.viewer-overlays{position:absolute;inset:0;pointer-events:none}
.viewer-image.is-zoomed .viewer-canvas{width:max(100%,1200px);align-self:flex-start}
.viewer-image.is-zoomed .viewer-base{max-width:none;width:100%;height:auto}
.motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}.motion-grid figure{margin:0;min-width:0}
.motion-grid video{display:block;width:100%;aspect-ratio:1;background:#f9edf0;object-fit:contain}
.brand-world[data-brand=luthuli] #event-apparel{background:var(--world-surface);color:#fff4d9;margin-inline:-40px;padding:55px 40px 35px}
.brand-world[data-brand=luthuli] #event-apparel .chapter-intro .eyebrow,.brand-world[data-brand=luthuli] #event-apparel .chapter-intro p,.brand-world[data-brand=luthuli] #event-apparel .caption{color:#eee0ba}
.brand-world[data-brand=luthuli] #event-apparel .artwork-link{padding:24px 12%;background:#ffffff06}
.brand-world[data-brand=luthuli] #beyond-the-route .editorial-gallery>figure:nth-child(2) .artwork-link{max-width:220px;margin-inline:auto}
.brand-world[data-brand=luthuli] .motion-grid{grid-template-columns:1fr;gap:40px;max-width:1200px}
.brand-world[data-brand=luthuli] .motion-grid video{height:auto;background:#123f52}
.brand-world[data-brand=luthuli] .craft-deck{--ink:#fff4d9;--muted:#eee0ba;--line:#fff4d940;--world-accent:#dbb856;background:#123f52;color:var(--ink)}
.brand-world[data-brand=luthuli] .closing .pill{background:#dbb856;color:#123f52}
/* These craft boards keep every original asset independent and inspectable. */
.craft-composition{display:grid;gap:clamp(16px,2.5vw,32px);padding:clamp(18px,3vw,40px);background:#0e3344;color:#fff4d9}
.composition-item{margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px}
.craft-panel .craft-composition .artwork-link{aspect-ratio:auto;background:transparent;flex:1;min-height:0;min-width:0}
.craft-composition .artwork-link img{width:100%;height:100%;object-fit:contain;transition:transform .25s}
.craft-composition .artwork-link:hover img{transform:scale(1.025)}
.composition-item figcaption{text-align:center;font-size:9px;line-height:1.5;letter-spacing:.06em;color:#e2d6b7}
.composition-identity-family{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:130px 160px 160px;grid-template-areas:"portrait wordmark wordmark" "portrait reversed seal" "portrait outline goldline";gap:30px 40px}
.composition-identity-family .slot-portrait{grid-area:portrait;border-right:1px solid #dbb85640;padding-right:40px}
.composition-identity-family .slot-wordmark{grid-area:wordmark;max-width:300px;width:100%;justify-self:center;padding-bottom:12px}
.composition-identity-family .slot-reversed{grid-area:reversed}.composition-identity-family .slot-seal{grid-area:seal}
.composition-identity-family .slot-outline{grid-area:outline}.composition-identity-family .slot-goldline{grid-area:goldline}
.composition-application-system{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,200px);grid-template-areas:"mark mark gold gold white white" "phone vests gold gold collateral collateral" "phone safety vehicle vehicle publication publication";gap:22px 16px}
.composition-application-system .slot-mark{grid-area:mark;padding:20px}
.composition-application-system .slot-gold{grid-area:gold}.composition-application-system .slot-white{grid-area:white}
.composition-application-system .slot-phone{grid-area:phone}.composition-application-system .slot-vests{grid-area:vests}
.composition-application-system .slot-collateral{grid-area:collateral}.composition-application-system .slot-safety{grid-area:safety}
.composition-application-system .slot-vehicle{grid-area:vehicle}.composition-application-system .slot-publication{grid-area:publication}
@media(max-width:900px){
 .composition-identity-family{grid-template-rows:100px 135px 135px;gap:25px}
 .composition-identity-family .slot-portrait{padding-right:25px}
 .composition-application-system{grid-template-rows:repeat(3,160px)}
}
@media(max-width:700px){
 .craft-composition{padding:20px 12px;gap:30px 16px}
 .composition-identity-family{grid-template-columns:1fr 1fr;grid-template-rows:280px 105px 145px 145px;grid-template-areas:"portrait portrait" "wordmark wordmark" "reversed seal" "outline goldline"}
 .composition-identity-family .slot-portrait{border-right:0;border-bottom:1px solid #dbb85640;padding:0 24px 25px}
 .composition-identity-family .slot-wordmark{padding:0 12px}
 .composition-item figcaption{font-size:8px;letter-spacing:.025em}
 .composition-application-system{grid-template-columns:1fr 1fr;grid-template-rows:125px 270px 200px 215px 130px 180px;grid-template-areas:"mark mark" "phone gold" "vests white" "collateral collateral" "safety publication" "vehicle vehicle"}
 .composition-application-system .slot-mark{padding:0 18px 10px}
}
@media(max-width:700px){.brand-world[data-brand=luthuli] #event-apparel{margin-inline:-20px;padding:40px 20px 20px}.brand-world[data-brand=luthuli] #event-apparel .artwork-link{padding:20px 12%}}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.related-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}.related-grid .eyebrow{display:block;margin-top:22px;font-size:9px}.related-grid h3{font-size:24px;margin-top:12px}
.brand-world .editorial-gallery.layout-format-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:center}.brand-world .layout-format-strip>figure:nth-child(n){grid-column:auto;margin:0}.brand-world .layout-format-strip>figure:last-child{grid-column:1/-1;max-width:620px;justify-self:center;margin-top:28px}
.brand-world[data-brand=absa] .logo-suite{background:#390b21}.brand-world[data-brand=absa] .suite-primary{grid-column:auto;min-height:260px}.brand-world[data-brand=absa] .suite-primary img{width:240px;height:180px}.brand-world[data-brand=absa] .suite-primary a{min-height:210px}.brand-world[data-brand=absa] .client-marks{background:#f8ecef}.brand-world[data-brand=absa] .client-marks img{max-width:125px}
.brand-world[data-brand=absa] #jazz{background:#160f13;margin-inline:-40px;padding:70px 40px}.brand-world[data-brand=absa] #jazz h2{color:#ffd5b6}
.brand-world[data-brand=absa] .suite-mark:last-child{grid-column:auto}
@media(max-width:700px){.motion-grid,.related-grid{grid-template-columns:1fr;gap:32px}.brand-world .editorial-gallery.layout-format-strip{grid-template-columns:1fr 1fr;gap:20px}.brand-world .layout-format-strip>figure:first-child{grid-column:1/-1}.brand-world .layout-format-strip>figure:last-child{grid-column:auto}.brand-world[data-brand=absa] #jazz{margin-inline:-20px;padding:45px 20px}.brand-world[data-brand=absa] .suite-primary{min-height:170px}.brand-world[data-brand=absa] .suite-primary img{max-width:100%;height:145px}.brand-world[data-brand=absa] .suite-primary a{min-height:145px}.viewer-canvas{width:min(100%,calc((100dvh - 235px) * var(--viewer-ratio,1.5)))} }

.campaign-collaboration[data-brand=absa]{background:#f8ecef;color:#400c23}
.collaboration-marks:has(>img:only-child){justify-content:center}.collaboration-marks>img:only-child{width:180px;height:130px}

/* Individual draft details stay large enough to read on a phone. */
@media(max-width:700px){.craft-panel.is-detail .artwork-link{aspect-ratio:1}}

.brand-world[data-brand=game-plan] .suite-layout{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Original Trophy Tour artwork keeps its full composition at every breakpoint. */
.brand-world[data-brand=trophy-tour] .case-heading h1{font-size:clamp(80px,11vw,164px)}
.brand-world[data-brand=trophy-tour] .logo-suite{background:#041126}
.brand-world[data-brand=trophy-tour] .suite-layout{grid-template-columns:repeat(3,minmax(0,1fr))}
.brand-world[data-brand=trophy-tour] .suite-primary{grid-column:auto;min-height:235px;padding:28px 15px}
.brand-world[data-brand=trophy-tour] .suite-mark a{min-height:150px}
.brand-world[data-brand=trophy-tour] .suite-mark img{width:min(100%,var(--suite-width));height:140px;max-height:140px}
.brand-world[data-brand=trophy-tour] .suite-mark:last-child{grid-column:auto}
.brand-world .editorial-gallery.layout-venue-panels{display:grid;grid-template-columns:1fr 3.2fr 1fr;align-items:center;gap:10px}
.brand-world .layout-venue-panels>figure:nth-child(n){grid-column:auto;margin:0}
.layout-venue-panels .caption{font-size:9px;display:block;line-height:1.6}
.layout-venue-panels .caption span{display:block}
.brand-world .editorial-gallery.layout-tour-dates{display:grid;grid-template-columns:1fr 1fr;max-width:760px;margin:0 auto;gap:clamp(35px,8vw,125px);align-items:start}
.brand-world .layout-tour-dates>figure:nth-child(n){grid-column:auto;margin:0}
.brand-world[data-brand=trophy-tour] #venue-world{background:#041126;margin-inline:-40px;padding:65px 40px}
.brand-world[data-brand=trophy-tour] .craft-panel.is-mark img{max-height:620px}
.brand-world[data-brand=trophy-tour] .related-grid{grid-template-columns:minmax(0,600px)}
@media(max-width:700px){
 .brand-world[data-brand=trophy-tour] .case-heading h1{font-size:82px}
 .brand-world[data-brand=trophy-tour] .suite-layout{grid-template-columns:1fr 1fr}
 .brand-world[data-brand=trophy-tour] .suite-primary{min-height:160px;padding:18px 10px}
 .brand-world[data-brand=trophy-tour] .suite-mark a{min-height:105px}
 .brand-world[data-brand=trophy-tour] .suite-mark img{height:105px;max-height:105px}
 .brand-world[data-brand=trophy-tour] #venue-world{margin-inline:-20px;padding:45px 20px}
 .brand-world .editorial-gallery.layout-venue-panels{grid-template-columns:1fr 1fr;gap:24px 35px}
 .brand-world .layout-venue-panels>figure:nth-child(2){grid-column:1/-1;grid-row:1}
 .brand-world .layout-venue-panels>figure:nth-child(1),.brand-world .layout-venue-panels>figure:nth-child(3){max-width:180px;justify-self:center}
 .brand-world .editorial-gallery.layout-tour-dates{gap:35px}
 .brand-world .layout-venue-panels>figure:nth-child(n),.brand-world .layout-tour-dates>figure:nth-child(n){margin:0!important}
}

/* Original lettering leads each case. Display settings never alter logo paths. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.brand-world .case-heading{align-items:center}
.brand-world .case-heading>div{min-width:0}
.brand-world .case-heading .brand-lockup,.brand-world .next .brand-lockup{display:block;width:min(100%,var(--lockup-width));max-width:100%;margin:32px 0 8px;padding:var(--lockup-padding);background:var(--lockup-bg);font-size:0;line-height:0;box-sizing:border-box}
.brand-lockup img{display:block;width:100%;height:auto;max-height:var(--lockup-height);object-fit:contain;object-position:left center}
.brand-world .next{justify-content:space-between;gap:40px}
.brand-world .next>div{min-width:0;flex:1}
.brand-world .next .brand-lockup{width:min(100%,var(--lockup-width),300px);margin:24px 0 0;padding:min(var(--lockup-padding),18px)}
.brand-world .next .brand-lockup img{max-height:145px}
/* Cloud Nine: matte studio greys, with the two supplied logo versions. */
.brand-world[data-brand=cloud-nine]::before{background:radial-gradient(ellipse at 80% 10%,#4b4b4840,transparent 70%)}
.brand-world[data-brand=cloud-nine] .logo-suite{background:#2e2e2d;color:#f2f1ed;border-block:1px solid #f2f1ed26}
.brand-world[data-brand=cloud-nine] .suite-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:36px}
.brand-world[data-brand=cloud-nine] .suite-mark{min-height:290px;border:1px solid #f2f1ed26;padding:32px 22px 24px}
.brand-world[data-brand=cloud-nine] .suite-primary{grid-column:auto;background:#383837}
.brand-world[data-brand=cloud-nine] .suite-mark a{min-height:190px}
.brand-world[data-brand=cloud-nine] .suite-mark img{width:min(100%,320px);height:161px;max-height:161px}
.brand-world[data-brand=cloud-nine] .suite-mark figcaption{margin-top:26px}
.brand-world[data-brand=cloud-nine] .suite-mark:last-child{--suite-label:#292928!important}
.brand-world[data-brand=cloud-nine] .closing,.brand-world[data-brand=cloud-nine] .logo-suite .eyebrow{color:#f2f1ed}
.brand-world[data-brand=cloud-nine] .artwork-viewer{background:#262625;color:#f2f1ed}
@media(max-width:700px){
 .brand-world[data-brand=cloud-nine] .suite-layout{grid-template-columns:1fr;gap:16px;padding-top:26px}
 .brand-world[data-brand=cloud-nine] .suite-mark{grid-column:auto;min-height:230px;padding:24px 22px}
 .brand-world[data-brand=cloud-nine] .suite-mark a{min-height:150px}
 .brand-world[data-brand=cloud-nine] .suite-mark img{width:min(100%,290px);height:145px;max-height:145px}
 .brand-world[data-brand=cloud-nine] .suite-mark figcaption{margin-top:18px}
}
/* Verified faces for Heineken and Eskom. Other editorial copy uses a quiet
   supporting sans; the original lockup supplies the brand's own lettering. */
.brand-world{--case-heading-font:var(--site-font);--case-heading-weight:700}
.brand-world[data-typography=heineken]{--case-heading-font:'Heineken Serif',Georgia,serif;--case-heading-weight:400}
.brand-world[data-typography=eskom]{--case-heading-font:'Gill Sans','Gill Sans MT',Arial,sans-serif;--case-heading-weight:600}
.brand-world .suite-heading h2,.brand-world .identity-copy h2,.brand-world .section-head h2,.brand-world .chapter-intro h2{font-family:var(--case-heading-font);font-weight:var(--case-heading-weight);font-size:clamp(32px,3.6vw,56px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
.brand-world .chapter-intro h2{font-size:clamp(36px,4.2vw,64px)}
.brand-world[data-typography=heineken] .suite-heading h2,.brand-world[data-typography=heineken] .identity-copy h2,.brand-world[data-typography=heineken] .section-head h2,.brand-world[data-typography=heineken] .chapter-intro h2{letter-spacing:-.03em}
@media(max-width:700px){
 .brand-world .case-heading .brand-lockup{width:min(100%,var(--lockup-width),390px);margin:28px 0 35px}
 .brand-world .case-heading .brand-lockup img{max-height:min(var(--lockup-height),240px)}
 .brand-world .next .brand-lockup{width:min(100%,var(--lockup-width),260px)}
 .brand-world .suite-heading h2,.brand-world .identity-copy h2,.brand-world .section-head h2{font-size:32px}
 .brand-world .chapter-intro h2{font-size:36px}
}

/* Responsive shared typography; brand artwork keeps its own lettering. */
.wordmark{font-size:25px;font-weight:650;letter-spacing:-.055em;line-height:1.08}
.intro h1{font-size:clamp(44px,6.1vw,88px);line-height:1.02}
.closing h2{font-size:clamp(36px,4.5vw,64px);font-weight:700;line-height:1.02}
@media(max-width:700px){
 .wordmark,.brand-world .wordmark{font-size:19px}
 .wordmark small{font-size:8px;letter-spacing:1px}
 .intro h1{font-size:clamp(38px,10.5vw,55px);letter-spacing:-.03em}
 .closing h2,.brand-world .closing h2{font-size:clamp(30px,8vw,40px)}
 .campaign-collaboration h3{font-size:34px}
}

/* Transparent pack renders sit on their own flavour colour; original posters need no frame. */
.brand-world[data-brand=delightful-boost] #flavours .evidence-figure:nth-child(n+4) .artwork-link{background:transparent;aspect-ratio:auto;padding:0}
.brand-world[data-brand=delightful-boost] #flavours .evidence-figure:nth-child(n+4) img{height:auto}

/* The three supplied campaign lockups share a compact, proportionate presentation. */
@media(min-width:701px){
 .brand-world[data-brand=delightful-boost] .suite-primary{grid-column:auto;min-height:260px;padding:30px 20px 22px}
 .brand-world[data-brand=delightful-boost] .suite-primary a{min-height:210px}
 .brand-world[data-brand=delightful-boost] .suite-primary img{width:min(100%,var(--suite-width));height:var(--suite-height)}
 .brand-world[data-brand=delightful-boost] .suite-primary figcaption{margin-top:26px}
}

/* Lead campaign entries with their recognisable client identities. */
.parent-marks{display:flex;align-items:center;justify-content:center;gap:16px}
.parent-marks>span{flex-shrink:0;font-size:16px;font-weight:300;opacity:.55}
.parent-marks-heading{justify-content:flex-start;width:min(100%,420px);margin-bottom:28px;gap:25px}
.parent-marks-heading img{width:calc((100% - 68px)/2);height:90px;object-fit:contain}
.brand-world[data-brand=delightful-boost] .parent-marks-heading{background:#ffd238;color:#251711;padding:20px 24px;margin-bottom:22px}
.brand-world[data-brand=delightful-boost] .parent-marks-heading img{height:72px}
.logo-tile.has-parent-marks .logo-cell{flex-direction:column;gap:15px;padding:22px 18px}
.logo-tile.has-parent-marks .parent-marks-grid{width:100%;gap:10px}
.logo-tile.has-parent-marks .parent-marks-grid img{width:calc((100% - 28px)/2);height:65px;max-height:65px;object-fit:contain}
.logo-tile.has-parent-marks .parent-marks-grid>span{font-size:12px}
.logo-tile.has-parent-marks .logo-cell>.campaign-mark{height:46px;width:100px;max-height:46px;object-fit:contain}
.logo-tile.has-parent-marks[data-brand=every-fan] .logo-cell>.campaign-mark{height:49px;max-height:49px;width:60px}
body:has(#projects) .campaign-collaboration[data-brand=absa],.brand-world[data-brand=absa] .client-marks{background:#dc0037;color:#fff}
.campaign-collaboration[data-brand=absa] .collaboration-cta{border-color:#ffffff44}
.campaign-collaboration[data-brand=absa] .collaboration-marks img{width:180px;height:180px}
.campaign-collaboration[data-brand=every-fan],.brand-world[data-brand=every-fan] .client-marks{background:#062b54;color:#fff}
.campaign-collaboration[data-brand=every-fan] .collaboration-cta{border-color:#ffffff44}
.campaign-collaboration[data-brand=every-fan] .collaboration-marks img{width:calc((100% - 26px)/2);height:110px}
@media(max-width:700px){.logo-tile.has-parent-marks .logo-cell{padding:18px 12px;gap:12px}.logo-tile.has-parent-marks .parent-marks-grid{gap:7px}.logo-tile.has-parent-marks .parent-marks-grid img{width:calc((100% - 20px)/2);height:50px;max-height:50px}.logo-tile.has-parent-marks .logo-cell>.campaign-mark{height:38px;width:80px;max-height:38px}.logo-tile.has-parent-marks[data-brand=every-fan] .logo-cell>.campaign-mark{height:42px;max-height:42px}.parent-marks-heading{max-width:340px;gap:20px}.parent-marks-heading img{height:75px}.campaign-collaboration[data-brand=absa] .collaboration-marks img{width:100px;height:100px}}

/* King Kong: original crest, full character, and live campaign compositions. */
.brand-world[data-brand=king-kong-chest-pound] .suite-layout{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.brand-world[data-brand=king-kong-chest-pound] .suite-mark{padding:24px;background:var(--suite-card);min-height:260px}
.brand-world[data-brand=king-kong-chest-pound] .suite-primary{grid-column:auto}
.brand-world[data-brand=king-kong-chest-pound] .suite-mark a{min-height:190px}
.brand-world[data-brand=king-kong-chest-pound] .suite-mark img{max-height:210px;height:210px;width:100%;object-fit:contain}
.brand-world[data-brand=king-kong-chest-pound] .suite-mark figcaption{color:#05122a;font-size:10px}
.brand-world[data-brand=king-kong-chest-pound] .suite-mark:nth-child(-n+2) figcaption,.brand-world[data-brand=king-kong-chest-pound] .suite-mark:nth-child(4) figcaption,.brand-world[data-brand=king-kong-chest-pound] .suite-mark:nth-child(5) figcaption{color:#e5efff}
.campaign-board-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.campaign-board{position:relative;overflow:hidden;aspect-ratio:4/5;padding:30px;isolation:isolate;display:flex;flex-direction:column}
.campaign-board.board-character{background:#080d25;color:#f1f5fc}.campaign-board.board-dark{background:#080d25;color:#00bdff}
.board-topline{display:flex;justify-content:space-between;gap:30px;font-size:9px;line-height:1.4;letter-spacing:.04em;font-weight:650}
.board-topline span:last-child{max-width:105px;text-align:right;font-size:7px;font-weight:500}
.campaign-board img{position:absolute;right:-7%;top:17%;width:74%;height:72%;object-fit:contain;z-index:-1}
.campaign-board h3{font-size:clamp(40px,5.8vw,84px);line-height:.92;letter-spacing:-.06em;margin:auto 0 45px;font-weight:900;max-width:85%;text-shadow:0 2px 0 #edf0f5}
.board-dark h3{text-shadow:0 2px 0 #080d25}.board-dark img{opacity:.17;right:-10%;top:10%;width:92%;height:86%}
.board-character img{right:-2%;width:70%}.board-character h3{font-size:clamp(40px,5.2vw,76px);text-shadow:0 2px 0 #080d25}
.board-footnote{font-size:7px;letter-spacing:.15em;position:absolute;bottom:25px;left:30px}
@media(max-width:1000px){.brand-world[data-brand=king-kong-chest-pound] .suite-layout{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.brand-world[data-brand=king-kong-chest-pound] .suite-mark{padding:14px;min-height:210px}.brand-world[data-brand=king-kong-chest-pound] .suite-mark a{min-height:150px}.brand-world[data-brand=king-kong-chest-pound] .suite-mark img{height:150px;max-height:150px}.campaign-board-grid{grid-template-columns:1fr}.campaign-board{padding:22px}.campaign-board h3,.board-character h3{font-size:clamp(52px,13vw,80px)}.board-footnote{left:22px}.board-topline{font-size:8px}}
.brand-world[data-brand=king-kong-chest-pound] .suite-mark:last-child{grid-column:auto}
.brand-world[data-brand=delightful-boost] .case-heading{--line:#25171133;background:#ffd238;color:#251711;margin:38px -40px 0;padding:40px;align-items:center}
.brand-world[data-brand=delightful-boost] .case-heading .eyebrow{color:#684111}
.brand-world[data-brand=delightful-boost] .case-heading .parent-marks-heading{background:transparent;padding:0;margin-bottom:32px;max-width:340px}
.brand-world[data-brand=delightful-boost] .case-heading .brand-lockup{padding:0;background:transparent;margin-top:24px;margin-bottom:0}
@media(max-width:700px){.brand-world[data-brand=delightful-boost] .case-heading{margin:28px -20px 0;padding:30px 20px}.brand-world[data-brand=delightful-boost] .case-heading .brand-lockup{margin-bottom:30px}}

/* Thumbnail-only client hierarchy and a quiet-to-colour logo reveal. */
.logo-tile.has-parent-marks .parent-marks-grid img:only-child{width:115px;max-width:80%;height:58px;max-height:58px}
.logo-tile.has-parent-marks[data-brand=every-fan] .parent-marks-grid img:only-child{height:38px;max-height:38px}
.logo-tile.has-parent-marks[data-brand=delightful-boost] .logo-cell>.campaign-mark{width:132px;height:58px;max-height:58px}
.logo-tile .logo-cell img{filter:grayscale(1);transition:filter .3s ease,transform .35s ease}
/* These older source crops contain their blue backdrop: desaturate the whole tile
   so the artwork doesn't acquire a grey rectangle inside a coloured surround. */
.logo-tile.archive-tile{filter:grayscale(1);transition:filter .3s ease,box-shadow .2s,transform .2s}
.logo-tile.archive-tile .logo-cell img{filter:none}
.logo-tile:focus-visible .logo-cell img,.logo-tile:active .logo-cell img{filter:none}
.logo-tile.archive-tile:focus-visible,.logo-tile.archive-tile:active{filter:saturate(.25)}
@media(hover:hover){.logo-tile:hover .logo-cell img{filter:none}.logo-tile.archive-tile:hover{filter:saturate(.25)}}
@media(prefers-reduced-motion:reduce){.logo-tile,.logo-tile .logo-cell img{transition:none}}
@media(max-width:700px){.logo-tile.has-parent-marks .parent-marks-grid img:only-child{width:100px;height:48px;max-height:48px}.logo-tile.has-parent-marks[data-brand=every-fan] .parent-marks-grid img:only-child{height:32px;max-height:32px}.logo-tile.has-parent-marks[data-brand=delightful-boost] .logo-cell>.campaign-mark{height:45px;max-height:45px;width:105px}}

/* Match SuperSport's visible height to the wide DStv signature, not its width. */
.campaign-collaboration[data-brand=every-fan] .collaboration-marks img[alt="SuperSport"],
.brand-world[data-brand=every-fan] .parent-marks-heading img[alt="SuperSport"],
.brand-world[data-brand=every-fan] .client-marks img[alt="SuperSport"]{height:auto;aspect-ratio:5/1;object-fit:contain}

/* A curated collection: square canvases, optical sizing and original mono variants. */
body:has(#projects) .logo-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
body:has(#projects) .logo-tile{background:var(--tile);transition:background-color .3s ease,box-shadow .3s ease}
body:has(#projects) .logo-tile .logo-cell{position:relative;display:block;width:100%;height:auto;aspect-ratio:1;padding:0}
.logo-tile .tile-mark{position:absolute;left:50%;top:50%;width:var(--logo-w,65%);height:var(--logo-h,65%);transform:translate(-50%,-50%)}
.logo-tile .tile-mark img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform:none;transition:opacity .3s ease,filter .3s ease}
.logo-tile .tile-mark .mark-mono{filter:var(--mono-filter,grayscale(1))}
.logo-tile .tile-mark .mark-colour{opacity:0;filter:none;top:50%;height:var(--colour-h,100%);transform:translateY(-50%)}
.logo-tile.has-parent-marks .parent-marks-grid{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:56%;height:25%;gap:0}
.logo-tile.has-parent-marks .parent-marks-grid img:only-child{width:100%;height:100%;max-width:100%;max-height:none;object-fit:contain;transform:none}
.logo-tile.has-parent-marks .tile-mark{top:65%}
.logo-tile.has-parent-marks[data-brand=every-fan] .parent-marks-grid{top:16%;width:42%;height:9%}
.logo-tile.has-parent-marks[data-brand=every-fan] .parent-marks-grid img:only-child{height:100%;max-height:none}
.logo-tile.has-parent-marks[data-brand=every-fan] .tile-mark{top:60%;}
.logo-tile .logo-cell .tile-art{position:absolute;left:50%;top:5%;width:50%;height:55%;clip-path:inset(0 0 30%);max-width:none;max-height:none;object-fit:contain;transform:translateX(-50%);filter:grayscale(1);transition:filter .3s ease}
.logo-tile.has-grid-art .tile-mark{top:71%}
body:has(#projects) .logo-tile:focus-visible{background:var(--tile-hover);outline-color:#e8efff}
.logo-tile:focus-visible .tile-mark .mark-mono{filter:none}
.logo-tile.has-colour-variant:focus-visible .mark-mono{opacity:0}
.logo-tile.has-colour-variant:focus-visible .mark-colour{opacity:1}
.logo-tile:focus-visible .logo-cell .tile-art{filter:none}
@media(hover:hover){
 body:has(#projects) .logo-tile:hover{background:var(--tile-hover)}
 .logo-tile:hover .tile-mark .mark-mono{filter:none}
 .logo-tile.has-colour-variant:hover .mark-mono{opacity:0}
 .logo-tile.has-colour-variant:hover .mark-colour{opacity:1}
 .logo-tile:hover .logo-cell .tile-art{filter:none}
}
@media(max-width:1279px){body:has(#projects) .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){body:has(#projects) .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}}
@media(prefers-reduced-motion:reduce){body:has(#projects) .logo-tile,.logo-tile .tile-mark img,.logo-tile .logo-cell .tile-art{transition:none}}

/* Keep the entire user-selected drawing visible in the collection preview. */
.context-card[href$="brand=hounds"] img{object-fit:contain;background:#f5f3ed}

/* Heart Beat Records: a white, compact gallery for the supplied logo artwork. */
.brand-world[data-brand=heart-beat-records]::before{display:none}
.brand-world[data-brand=heart-beat-records] .wrap{width:min(1080px,calc(100% - 64px))}
.brand-world[data-brand=heart-beat-records] .case-heading{padding:28px 0;gap:48px}
.brand-world[data-brand=heart-beat-records] .case-heading .brand-lockup{margin:18px 0 0}
.brand-world[data-brand=heart-beat-records] .case-hero{max-width:620px;margin:0 auto 36px}
.brand-world[data-brand=heart-beat-records] .case-hero .artwork-link{height:min(42svh,360px);display:flex;align-items:center;justify-content:center}
.brand-world[data-brand=heart-beat-records] .evidence-figure img{width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;margin-inline:auto}
.brand-world[data-brand=heart-beat-records] .identity-row{margin:40px 0;gap:40px}
.brand-world[data-brand=heart-beat-records] .mark-stage{min-height:0;padding:12px}
.brand-world[data-brand=heart-beat-records] .mark-stage img{width:min(100%,180px);height:180px;max-height:180px}
.brand-world[data-brand=heart-beat-records] .identity-copy h2{font-size:30px;margin:14px 0}
.brand-world[data-brand=heart-beat-records] .brand-chapter{margin-top:56px}
.brand-world[data-brand=heart-beat-records] .chapter-intro{margin-bottom:24px;gap:12px 36px}
.brand-world[data-brand=heart-beat-records] .chapter-intro h2{font-size:clamp(26px,3vw,38px);margin:8px 0}
.brand-world[data-brand=heart-beat-records] .editorial-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;align-items:start}
.brand-world[data-brand=heart-beat-records] .editorial-gallery.layout-compact-marks{grid-template-columns:repeat(3,minmax(0,1fr))}
.brand-world[data-brand=heart-beat-records] .editorial-gallery>figure:nth-child(n){grid-column:auto;margin:0!important}
.brand-world[data-brand=heart-beat-records] .editorial-gallery .artwork-link{height:min(36svh,280px);display:flex;align-items:center;justify-content:center}
.brand-world[data-brand=heart-beat-records] .layout-compact-marks .artwork-link{height:min(30svh,230px)}
.brand-world[data-brand=heart-beat-records] .caption{gap:7px;margin-top:12px;display:block}
.brand-world[data-brand=heart-beat-records] .caption span{display:block;max-width:none;text-align:left}
.brand-world[data-brand=heart-beat-records] .caption span:last-child{margin-top:4px}
.brand-world[data-brand=heart-beat-records] .evidence{margin-top:56px}
.brand-world[data-brand=heart-beat-records] .artwork-viewer{background:#fff;color:#202124;border-color:#d8d8d8}
.brand-world[data-brand=heart-beat-records] .artwork-viewer button{border-color:#b6b6b6}
@media(max-width:700px){
 .brand-world[data-brand=heart-beat-records] .wrap{width:calc(100% - 36px)}
 .brand-world[data-brand=heart-beat-records] .case-heading{padding:24px 0}
 .brand-world[data-brand=heart-beat-records] .case-heading .brand-lockup{margin-bottom:22px}
 .brand-world[data-brand=heart-beat-records] .identity-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;align-items:start}
 .brand-world[data-brand=heart-beat-records] .mark-stage{padding:0}
 .brand-world[data-brand=heart-beat-records] .mark-stage img{width:110px;height:110px}
 .brand-world[data-brand=heart-beat-records] .identity-copy{margin-top:0}
 .brand-world[data-brand=heart-beat-records] .identity-copy h2{font-size:25px}
 .brand-world[data-brand=heart-beat-records] .chapter-intro p{margin-top:12px}
 .brand-world[data-brand=heart-beat-records] .editorial-gallery.layout-compact-marks{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
 .brand-world[data-brand=heart-beat-records] .editorial-gallery .artwork-link{height:min(27svh,185px)}
 .brand-world[data-brand=heart-beat-records] .case-sections{gap:20px;flex-wrap:wrap}
}

/* Full supplied logo families stay compact enough to compare at a glance. */
.brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-layout{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:28px}
.brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-mark{grid-column:auto;min-height:240px;padding:20px 14px}
.brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-mark a{min-height:170px}
.brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-mark img{width:100%;height:170px;max-width:230px;max-height:170px}
.brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-mark figcaption{margin-top:16px;opacity:1;letter-spacing:.035em}
@media(max-width:900px){
 .brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-mark{min-height:205px;padding:18px 12px}
 .brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-mark a{min-height:135px}
 .brand-world:is([data-brand=nyx],[data-brand=game-plan]) .suite-mark img{height:135px;max-height:135px}
}

/* Inline artwork is a complete, compact preview. The viewer provides detail. */
.brand-world .evidence-figure>.artwork-link{height:var(--artwork-height);aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.brand-world .evidence-figure>.artwork-link>.scene-base{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.brand-world .case-hero>.artwork-link{height:auto}
.brand-world .case-hero>.artwork-link>.scene-base{height:auto;max-height:var(--hero-height)}
/* Scale photographic plates and their original logo overlays as one canvas. */
.brand-world .evidence-figure .scene-canvas{width:min(100%,calc(var(--artwork-height) * var(--artwork-ratio,1.5)));flex:none}
.brand-world .evidence-figure .scene-canvas .scene-base{width:100%;height:auto;max-height:none}
.brand-world .craft-composition img{max-height:var(--artwork-height)}
.brand-world .motion-grid video{max-height:var(--artwork-height);object-fit:contain}
.brand-world .campaign-board-grid{max-width:720px;margin-inline:auto}
.brand-world .campaign-board{width:100%;max-width:320px;justify-self:center;padding:22px}
.brand-world .campaign-board h3{font-size:clamp(32px,3vw,44px)}
.brand-world .campaign-board .board-footnote{left:22px}
/* Matched poster canvases stay side by side, including on a phone. */
.brand-world .editorial-gallery.layout-compact-posters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px;margin-inline:auto;gap:28px;align-items:start}
.brand-world .layout-compact-posters>figure:nth-child(n){grid-column:auto;margin:0!important}
.brand-world .layout-compact-posters .caption{display:block}
.brand-world .layout-compact-posters .caption span{display:block;max-width:none;text-align:left}
.brand-world .layout-compact-posters .caption span:last-child{margin-top:5px}
@media(min-width:701px) and (max-width:1000px){
 .brand-world[data-brand=luthuli] #event-apparel,
 .brand-world[data-brand=trophy-tour] #venue-world,
 .brand-world[data-brand=delightful-boost] #new-explorations,
 .brand-world[data-brand=delightful-boost] .case-heading{margin-inline:-32px}
}
@media(max-width:700px){
 .brand-world{--artwork-height:min(36svh,280px);--hero-height:min(42svh,340px)}
 .brand-world .editorial-gallery.layout-compact-posters{gap:16px;--artwork-height:min(30svh,230px)}
}