@font-face{font-family:Roboto;src:url('/fonts/roboto-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url('/fonts/roboto-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url('/fonts/roboto-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--bg:#191919;--ink:#171715;--fg:#f5f3ee;--muted:#b3b2ad;--accent:#f4e409;--line:#393937;--gutter:clamp(20px,4vw,76px);--mono:"Courier New",monospace;--sans:Roboto,Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.hero a:focus-visible{outline-color:var(--ink)}
.wrap{max-width:1760px;margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;z-index:10;top:8px;left:8px;background:var(--accent);color:var(--ink);padding:12px;transform:translateY(-150%)}
.skip:focus{transform:none}
.header{height:78px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{width:59px;height:auto}
.header nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);font-size:14px;letter-spacing:-.018em}
.header nav a{display:inline-flex;align-items:center;gap:9px;min-height:43px;transition:color .18s}
.header nav .active,.header nav a:hover{color:var(--accent)}
.header nav .active:before{content:"";height:6px;width:6px;background:var(--accent);border-radius:100%}
.header nav .nav-contact{border:1px solid #71716b;border-radius:99px;padding:0 18px;min-height:37px}
.header .nav-contact svg{width:13px;height:13px}
.hero{height:clamp(510px,70svh,740px);isolation:isolate;position:relative;overflow:hidden;border-radius:18px;background:#c4b4aa url('/media/studio.webp') center/100% 100%;color:var(--ink)}
.portrait-stage{position:absolute;z-index:-1;height:100%;aspect-ratio:836/471;left:73%;top:0;transform:translateX(-50%);pointer-events:none}
.portrait-stage img{height:100%;width:100%;max-width:none;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 90%,transparent)}
.orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.figure-label,.eyeline,.label,.project-no,.count,.film-caption,.crumb>span,.gizmo,.views,.back-all,.gallery-shot figcaption,.project-pager small,.bio dt small,.footer-name span{font-family:var(--mono)}
.figure-label{position:absolute;right:3%;top:5.8%;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:600}
.figure-label i{width:8px;height:8px;border:1px solid currentColor;border-radius:50%;display:block;position:relative}
.figure-label i:after{content:"";position:absolute;inset:2px;background:currentColor;border-radius:50%}
.gizmo{position:absolute;right:2.8%;bottom:5.5%;width:48px;color:#423e38}
.hero-copy{position:relative;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(32px,4vw,76px);width:56%;pointer-events:none}
.hero-copy a{pointer-events:auto}
.eyeline{display:flex;align-items:center;gap:9px;font-size:clamp(10px,.82vw,13px);text-transform:uppercase;letter-spacing:.075em;font-weight:700}
.role-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px #403d3740}
.eyeline-slash{color:#60574f;padding:0 1px}
.hero h1{font-weight:700;letter-spacing:-.079em;line-height:.85;margin:clamp(16px,3.5vh,43px) 0 clamp(18px,2.9vh,34px)}
.greeting{display:block;font-size:clamp(30px,3.1vw,56px);font-weight:500;letter-spacing:-.065em;line-height:1;margin-bottom:.19em}
.name{display:block;font-size:clamp(76px,min(8.15vw,13.7svh),147px)}
.specialties{display:flex;flex-wrap:wrap;max-width:398px;gap:3px 0;line-height:1.43;font-size:clamp(14px,1.12vw,19px);font-weight:500;letter-spacing:-.025em;list-style:none;padding:0;text-wrap:pretty}
.specialties li{white-space:nowrap}
.specialties li:not(:last-child):after{content:'·';padding-inline:.5em;opacity:.77}
.explore{display:inline-flex;align-items:center;gap:13px;margin-top:clamp(23px,3.9vh,43px);font-size:14px;font-weight:600;letter-spacing:-.018em}
.circle{display:grid;place-items:center;background:var(--accent);color:var(--ink);border-radius:50%;width:41px;height:41px;transition:transform .2s}
.explore:hover .circle{transform:translateY(3px)}
.gallery{padding-block:clamp(38px,5.1vw,82px) clamp(54px,6vw,95px);scroll-margin-top:5px}
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:clamp(21px,2.25vw,39px)}
.gallery h2{font-size:clamp(38px,4.15vw,75px);letter-spacing:-.069em;font-weight:500;line-height:1.05}
.count{font-size:clamp(11px,.9vw,15px);font-weight:500;letter-spacing:-.04em;display:inline-block;vertical-align:top;margin:.5em 0 0 .65em;color:var(--accent)}
.views{display:flex;gap:3px;border:1px solid #444440;padding:3px;border-radius:24px}
.views[hidden]{display:none}
.views button{cursor:pointer;border:none;display:grid;place-items:center;border-radius:50%;width:35px;height:35px;background:transparent;color:#c6c6c0}
.views button[aria-pressed=true]{background:var(--accent);color:#171715}
.views button:focus-visible{outline-offset:1px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3.25vw,56px) clamp(14px,1.7vw,30px);padding:0;list-style:none}
.card{display:block;border-radius:12px}
.thumb{position:relative;isolation:isolate;overflow:hidden;border-radius:13px;aspect-ratio:1.38;background:#242422}
.thumb>img,.thumb>video{width:100%;height:100%;object-fit:cover;object-position:50% 8%;transition:transform .45s cubic-bezier(.22,.65,.32,1)}
.thumb-o2>img{object-position:76% 50%}
.thumb>video{position:absolute;inset:0;opacity:0}
.thumb>video.playing{opacity:1}
.hover-detail{position:absolute;inset:auto 0 0;color:white;background:linear-gradient(transparent,rgba(0,0,0,.85));padding:28px 18px 16px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;font-weight:600;font-size:18px}
.hover-detail small{display:block;font-size:12px;margin-top:4px;font-weight:400}
@media(hover:hover){.card:hover .thumb>img{transform:scale(1.025)}.card:hover .hover-detail{opacity:1;transform:none}}
.card:focus-visible .hover-detail{opacity:1;transform:none}
.caption{display:flex;gap:11px;align-items:flex-start;padding:16px 1px 0}
.project-no{margin-top:4px;color:var(--muted);font-size:10px}
.caption h3{font-size:clamp(16px,1.42vw,26px);font-weight:500;letter-spacing:-.045em;line-height:1.18}
.caption p{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.4}
.card-arrow{color:#cecec8;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex:none}
.card-arrow svg{width:17px;height:17px}
.card:hover .card-arrow{color:var(--accent)}
.cards.list{display:block}
.cards.list li{border-top:1px solid var(--line)}
.cards.list .card{border-radius:0;display:flex;gap:clamp(15px,2vw,32px);align-items:center;padding:15px 0}
.cards.list .thumb{width:clamp(75px,9vw,130px);flex:none;aspect-ratio:1.7;border-radius:6px}
.cards.list .caption{flex:1;padding:0;align-items:center}
.cards.list .hover-detail{display:none}
footer.wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:25px 36px;position:relative}
footer.wrap:before{content:"";height:1px;background:var(--line);position:absolute;left:var(--gutter);right:var(--gutter);top:0}
.footer-name,.to-top{display:inline-flex;align-items:center;min-height:44px;gap:10px;font-size:14px}
.footer-name{font-weight:600;letter-spacing:-.03em}
.footer-name span{font-weight:400;letter-spacing:0;color:var(--muted);font-size:10px}
.to-top{color:var(--muted);font-size:12px}.to-top svg{width:14px}
.interior{padding-block:clamp(22px,3vw,58px) clamp(52px,6vw,95px)}
.crumb,.film-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted)}
.crumb a,.back-all,.text-link{display:inline-flex;align-items:center;gap:9px;min-height:44px}
.crumb a:hover,.text-link:hover,.back-all:hover,.project-pager a:hover{color:var(--accent)}
.crumb svg{width:16px}.crumb>span{font-size:12px}
.project-title{padding:clamp(30px,4.5vw,76px) 0 clamp(26px,3vw,48px)}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent)}
.interior h1{font-size:clamp(52px,7.6vw,128px);font-weight:500;line-height:.96;letter-spacing:-.075em;overflow-wrap:break-word}
.project-title h1{margin-top:14px}
.movie{border-radius:13px;background:#101010;overflow:hidden}
.movie video{object-fit:contain;width:100%;height:auto;max-height:78svh}
.film-caption{font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding-top:12px}
.project-notes{display:grid;grid-template-columns:1fr 2fr;gap:32px;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,90px);padding-top:clamp(28px,4vw,52px)}
.client-name{font-size:clamp(19px,2.2vw,34px);letter-spacing:-.045em;margin-top:10px}
.interior h2{font-size:clamp(30px,3.2vw,52px);font-weight:500;line-height:1.04;letter-spacing:-.055em}
.lede,.bio p,.bio dd,.notes-copy>p{font-size:clamp(17px,1.45vw,23px);line-height:1.53;letter-spacing:-.018em;color:#cfcec8}
.notes-copy{max-width:840px}.notes-copy h3{margin:31px 0 8px;font-size:20px;font-weight:500;letter-spacing:-.035em}
.notes-copy>p.lede{margin-top:15px;font-size:clamp(20px,1.8vw,30px);color:var(--fg)}
.project-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start;gap:24px;margin-block:clamp(40px,5.5vw,80px)}
.gallery-shot img,.gallery-shot video{width:100%;height:auto;max-height:78svh;object-fit:contain;border-radius:10px;background:#141414}
.gallery-shot figcaption{color:var(--muted);font-size:12px;margin-top:10px}
.project-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-block:1px solid var(--line)}
.project-pager a{display:grid;gap:11px;align-content:center;padding:clamp(20px,3vw,48px) 0}
.project-pager a:last-child{text-align:right;padding-left:16px}
.project-pager small{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.055em;font-size:10px;color:var(--muted)}
.project-pager small svg{width:16px}
.project-pager a:last-child small{justify-content:flex-end}
.project-pager strong{font-size:clamp(20px,2.1vw,38px);font-weight:500;letter-spacing:-.047em}
.back-all{font-size:13px;padding:0;margin-top:16px}
.yellow{color:var(--accent)}
.personal-hero{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:8%;padding-block:20px 58px}
.personal-intro h1,.contact h1{margin:20px 0 26px}
.about-portrait{max-height:530px;border-radius:16px;overflow:hidden}.about-portrait img{width:100%;height:100%;object-fit:contain}
.bio section{display:grid;grid-template-columns:1fr 2fr;gap:20px 48px;padding-block:clamp(24px,3.5vw,55px);border-top:1px solid var(--line)}
.bio dl,.bio p{max-width:810px}
.bio dt{font-size:clamp(18px,1.65vw,28px);letter-spacing:-.035em;margin:24px 0 7px}
.bio dt:first-child{margin-top:0}
.bio dt small{display:inline-block;margin-left:.7em;vertical-align:middle;font-size:11px;letter-spacing:.015em;color:var(--accent)}
.bio dd{font-size:clamp(16px,1.2vw,20px)}
.bio-specialties{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.bio-specialties li{border:1px solid var(--line);border-radius:50px;padding:7px 14px}
.bio .text-link{grid-column:2;color:var(--accent);width:fit-content}
.contact{min-height:calc(100svh - 183px);padding-top:clamp(50px,7vw,110px)}
.contact .lede{max-width:640px}
.contact-links{margin-top:clamp(32px,4vw,72px);border-bottom:1px solid var(--line)}
.contact-row{display:flex;gap:20px;align-items:center;padding:25px 0;border-top:1px solid var(--line)}
.contact-row strong{font-size:clamp(24px,3vw,50px);font-weight:500;letter-spacing:-.05em;flex:1}
.contact-row span{font-size:14px;color:var(--muted)}
.contact-row:not(.pending):hover strong{color:var(--accent)}
.pending{color:var(--muted)}
@media(max-width:980px){
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero{height:clamp(470px,66svh,610px)} .hero-copy{padding:4.4vw;width:61%}
 .name{font-size:clamp(68px,9.3vw,98px)}.specialties{max-width:330px}
 .portrait-stage{left:75%}.figure-label{top:18px;right:20px;font-size:8px}.gizmo{width:36px}
}
@media(max-width:640px){
 :root{--gutter:16px}html{scroll-padding-top:12px}.header{height:66px}.brand img{width:47px}.header nav{gap:17px;font-size:13px}.header nav .nav-contact{padding:0 11px;gap:4px;min-height:33px}
 .hero{height:clamp(620px,85svh,780px);border-radius:13px}
 .portrait-stage{top:auto;bottom:0;height:55%;left:63%;mask-image:linear-gradient(0deg,#000 97%,transparent 100%)}
 .figure-label{top:auto;bottom:18px;right:auto;left:22px;font-size:8px}.gizmo{width:29px;right:15px;bottom:15px}
 .hero-copy{justify-content:flex-start;padding:26px 22px;width:100%}
 .eyeline{font-size:9px}.hero h1{margin:20px 0 11px}.greeting{font-size:30px}.name{font-size:clamp(60px,12.3vw,79px);line-height:.88}
 .specialties{font-size:13px;max-width:295px;line-height:1.35}.explore{margin-top:15px;font-size:12px;gap:8px}.circle{height:32px;width:32px}.circle svg{width:17px}
 .gallery{padding-top:34px}.gallery-head{margin-bottom:21px}.gallery h2{font-size:40px}.count{font-size:11px}
 .cards{grid-template-columns:1fr;gap:30px}.caption h3{font-size:20px}.caption{padding-top:12px}
 .views button{height:30px;width:30px}.thumb{border-radius:11px}
 .personal-hero,.bio section,.project-notes{grid-template-columns:1fr;gap:19px}.personal-hero{padding:10px 0 32px}.about-portrait{max-height:none}.about-portrait img{max-height:420px;object-fit:contain;background:#c9b9af}
 .bio .text-link{grid-column:1}.project-notes{gap:27px}.project-gallery{grid-template-columns:1fr}
 .contact-row{flex-wrap:wrap;gap:10px}.contact-row span{font-size:12px}
}
@media(max-width:360px){.header nav{gap:12px}.hero-copy{padding-inline:18px}.figure-label{left:16px}.hero{height:630px}.footer-name,.to-top{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* McDonald’s × Stranger Things */
body:has(.st-case){background:#161616}
body:has(.st-case) .header{position:relative;z-index:1}
.st-case{--story-width:1120px;margin-top:-78px}
.st-hero{min-height:clamp(480px,64svh,720px);display:grid;align-items:center;text-align:center;padding:128px max(24px,5vw) 65px;background:linear-gradient(180deg,#100000b0,#14000380 55%,#16000095),url('/media/mcdonalds-wide.webp') center center/cover}
.st-hero>div{max-width:850px;margin:auto}
.st-hero h1{font-size:clamp(52px,6.5vw,110px);line-height:.97;letter-spacing:-.061em;color:var(--accent);margin-bottom:32px}
.st-case h2{color:var(--accent);font-size:clamp(16px,1.32vw,22px);line-height:1.2;letter-spacing:-.025em;text-transform:uppercase;margin-bottom:13px}
.st-case section p{font-size:clamp(16px,1.18vw,20px);line-height:1.55;text-wrap:pretty}
.st-body{max-width:calc(var(--story-width) + 2 * var(--gutter));margin:auto;padding:0 var(--gutter) 58px}
.st-body figure img,.st-body figure video{width:100%;height:auto;border-radius:7px}
.st-body figcaption{margin-top:10px;color:#d0ccc7;font-size:13px;line-height:1.4}
.st-role{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(36px,5vw,83px)}
.st-role figure{width:min(100%,415px);justify-self:center}
.st-role figure figcaption{text-align:center;color:var(--accent)}
.st-case section p+p{margin-top:14px}
.st-role .st-credit{margin-top:32px}.st-credit strong{color:var(--accent)}
.st-pair{display:grid;grid-template-columns:810fr 1677fr;gap:12px;align-items:start}
.st-screen{border-block:1px solid #393936;margin-top:26px}
.st-screen summary{cursor:pointer;padding:16px 2px;color:var(--accent);font-size:14px}
.st-screen summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.st-screen video{width:min(100%,385px);margin:0 auto 22px}
.st-rule{max-width:765px;margin:clamp(44px,6vw,90px) auto;text-align:center}
.st-rule:before{content:"";display:block;margin:0 auto clamp(28px,4vw,58px);height:2px;width:min(100%,620px);background:repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 20px)}
.st-process figure{max-width:585px;margin:clamp(28px,4vw,64px) auto 0}
.st-close p{max-width:680px;margin:auto}
@media(max-width:640px){
 .st-case{margin-top:-66px}.st-hero{min-height:475px;padding:110px 20px 42px;background-position:63% center}.st-hero h1{font-size:clamp(43px,10vw,61px);margin-bottom:21px}
 .st-role,.st-pair{grid-template-columns:1fr;gap:28px}.st-role figure{max-width:345px}
 .st-case section p{line-height:1.48}.st-role .st-credit{margin-top:20px}.st-pair figure:first-child{width:min(100%,345px);margin:auto}
 .contact-row{overflow-wrap:anywhere}
}

.language-switch{appearance:none;border:0;border-left:1px solid #ffffff40;background:transparent;color:#e6e5de;padding:0 0 0 15px;min-height:32px;display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--mono);cursor:pointer}
.language-switch[hidden]{display:none}
.language-switch span[aria-hidden]{opacity:.52}
html[lang=en] .language-switch [lang=en],html[lang=es] .language-switch [lang=es]{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.language-switch:hover{color:white}
html[lang=es] .specialties{max-width:435px}
@media(max-width:640px){.header nav{gap:12px}.language-switch{padding-left:8px;min-height:40px}.header nav .nav-contact{padding-inline:9px}.header .nav-contact svg{display:none}.header nav .active{gap:4px}}
@media(max-width:380px){.header nav{gap:8px;font-size:12px}.brand img{width:36px}.header nav .nav-contact{padding-inline:6px}.language-switch{gap:2px;padding-left:6px}.gallery h2{font-size:34px}}
body:has(.o2-case){background:#202020}
body:has(.o2-case) .header{position:relative;z-index:1}
.o2-case{margin-top:-78px}.o2-intro{background:linear-gradient(90deg,#020c27e8,#020c2740),url('/media/o2-wide.webp') center/cover;padding:140px var(--gutter) 100px}.o2-copy{max-width:700px;margin:auto}.o2-copy h1{text-align:center;color:var(--accent);font-size:80px;margin-bottom:40px}.o2-case h2{text-transform:uppercase;font-size:17px;color:var(--accent);margin:24px 0 14px}.o2-case p{font-size:17px;line-height:1.5;margin:12px 0}.o2-body{max-width:1160px;padding:0 var(--gutter) 60px;margin:auto}.o2-body>figure:first-child{margin-top:-35px;position:relative}.o2-body video{width:100%;height:auto;border-radius:8px}.o2-body figcaption{color:var(--muted);font-size:12px;margin-top:9px}.o2-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;padding:55px 0}.o2-row img{max-height:450px;width:auto;margin:auto}
@media(max-width:640px){.o2-case{margin-top:-66px}.o2-intro{padding-top:105px}.o2-row{grid-template-columns:1fr;gap:18px;padding:32px 0}.o2-case p{font-size:16px}}
body:has(.hik-case){background:#111}
body:has(.hik-case) .header{position:relative;z-index:1}
.hik-case{margin-top:-78px}.hik-intro{background:linear-gradient(#0007,#0007),url('/media/hikvision-wide.webp') center/cover;padding:140px var(--gutter) 100px;text-align:center}.hik-intro>div{max-width:760px;margin:auto}.hik-intro h1{color:var(--accent);font-size:clamp(44px,5vw,80px);letter-spacing:-.05em;margin-bottom:32px}.hik-case h2{font-size:18px;line-height:1.3;color:var(--accent);margin:18px 0 13px}.hik-case p{font-size:17px;line-height:1.5;margin:12px 0}.hik-body{max-width:1200px;margin:auto;padding:0 var(--gutter) 60px}.hik-body>figure{position:relative;margin-top:-35px}.hik-body video{width:100%;height:auto;border-radius:8px}.hik-body figcaption{color:var(--muted);font-size:12px;margin-top:10px}.hik-row{padding:60px 0;border-top:1px dashed var(--accent);margin-top:45px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px}.hik-row:nth-of-type(even)>div{order:2}.hik-row video{max-height:640px;object-fit:contain}.hik-row:nth-of-type(even)>video{order:1}
@media(max-width:640px){.hik-case{margin-top:-66px}.hik-intro{padding-top:110px}.hik-row{grid-template-columns:1fr;padding:28px 0;gap:20px}.hik-row:nth-of-type(even)>div,.hik-row:nth-of-type(even)>video{order:initial}}
body:has(.moeve-case){background:#111}body:has(.moeve-case) .header{position:relative;z-index:1}
.moeve-case{margin-top:-78px}.moeve-intro{padding:135px var(--gutter) 110px;text-align:center;background:linear-gradient(90deg,#064456bb,#06445655),url('/media/moeve-background.webp') center/cover}.moeve-intro>div{max-width:750px;margin:auto}.moeve-intro h1{font-size:clamp(58px,6vw,95px);color:var(--accent);letter-spacing:-.06em;margin-bottom:18px}.moeve-case h2{font-size:18px;color:var(--accent);line-height:1.3;margin-bottom:17px}.moeve-intro h2{margin-bottom:40px}.moeve-case p{font-size:17px;line-height:1.5;margin:13px 0}.moeve-body{max-width:1200px;padding:0 var(--gutter) 60px;margin:auto}.moeve-body video{width:100%;height:auto;border-radius:8px}.moeve-location{max-width:420px;margin:-55px auto 60px;position:relative}.moeve-row{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;border-top:1px dashed var(--accent);padding:55px 0;margin-top:40px}.moeve-copy{max-width:750px;margin:55px auto;text-align:center}.moeve-body>.project-pager{margin-top:60px}
@media(max-width:640px){.moeve-case{margin-top:-66px}.moeve-intro{padding-top:110px;background-position:65% center}.moeve-row{grid-template-columns:1fr;gap:22px}.moeve-location{width:85%}.moeve-case p{font-size:16px}}
body:has(.campaign-case){background:#151515}
body:has(.campaign-case) .header{position:relative;z-index:1}
.campaign-case{margin-top:-78px;--campaign-image:url('/media/skoda-wide.webp')}
.campaign-aquarius{--campaign-image:url('/media/aquarius-wide.webp')}
.campaign-coca-cola{--campaign-image:url('/media/coca-cola-wide.webp')}
.campaign-dorminatur{--campaign-image:url('/media/dorminatur-alternate.webp')}
.campaign-hero{background:linear-gradient(90deg,#08090cc9,#08090c65),var(--campaign-image) center/cover;padding:140px var(--gutter) 100px;text-align:center}
.campaign-hero>div{max-width:760px;margin:auto}.campaign-hero h1{font-size:clamp(56px,6vw,96px);line-height:1;letter-spacing:-.065em;color:var(--accent);margin:0 0 32px}
.campaign-case h2{font-size:18px;color:var(--accent);line-height:1.3;margin:0 0 15px}
.campaign-case p{font-size:17px;line-height:1.55;margin:12px 0}
.campaign-body{max-width:1200px;padding:0 var(--gutter) 60px;margin:auto}
.campaign-body>figure:first-child{position:relative;margin-top:-35px}.campaign-body video{width:100%;height:auto;border-radius:9px}.campaign-body figcaption{font:11px/1.5 var(--mono);color:var(--muted);margin-top:12px}
.campaign-process{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(25px,5vw,80px);align-items:center;padding:65px 0}.campaign-process section+section{margin-top:28px}.campaign-process figure{max-width:100%}.campaign-aquarius .campaign-process figure{max-width:340px;justify-self:end}
.campaign-dorminatur .campaign-process{grid-template-columns:1fr 1fr}
.campaign-text{max-width:760px;margin:55px auto}.campaign-body>.project-pager{margin-top:50px}
.campaign-coca-cola .campaign-hero{text-align:left;padding-bottom:65px;background:linear-gradient(90deg,#50000bea,#50000b65),var(--campaign-image) center/cover}
.campaign-coca-cola .campaign-hero>div{max-width:1080px}
.campaign-coca-cola .campaign-hero p{max-width:630px}
.cola-layout{position:relative;display:grid;grid-template-columns:1fr minmax(170px,270px);gap:clamp(35px,8vw,125px);align-items:start;margin:0 -20px;padding:60px clamp(24px,5vw,72px);background:radial-gradient(ellipse at 90% 20%,#50000b99,transparent 65%),#1e1718;border:1px solid #ffffff14;border-radius:20px}
.cola-notes{position:sticky;top:40px;padding-block:20px;max-width:500px}.cola-notes .label{margin-bottom:38px;font-size:11px}.cola-notes section+section{margin-top:35px}
.cola-film{min-width:0}.cola-film video{width:100%;height:auto;box-shadow:0 20px 80px #0006;border-radius:5px}
.campaign-location{margin:65px auto 20px}
@media(max-width:640px){.campaign-case{margin-top:-66px}.campaign-hero{padding-top:110px;padding-bottom:80px}.campaign-process,.campaign-dorminatur .campaign-process{grid-template-columns:1fr;padding:35px 0}.campaign-aquarius .campaign-process figure{justify-self:center;max-width:300px}.cola-layout{grid-template-columns:1fr;margin:0;padding:24px;gap:25px;border-radius:14px}.cola-notes{position:static;padding:0}.cola-film{width:min(100%,250px);margin:auto}.campaign-coca-cola .campaign-hero{padding-bottom:50px}.campaign-case p{font-size:16px}}
body:has(.monopoly-case){background:#11141d}
body:has(.monopoly-case) .header{position:relative;z-index:1}
.monopoly-case{margin-top:-78px}
.monopoly-hero{min-height:690px;display:flex;align-items:center;padding:140px var(--gutter) 85px;background:linear-gradient(90deg,#041725e8 0%,#041725b5 36%,#04172505 75%),url('/media/monopoly-background.webp') 65% center/cover}
.monopoly-hero>div{max-width:570px;margin-left:max(0px,calc((100vw - 1200px)/2))}
.monopoly-hero h1{font-size:clamp(52px,5.4vw,88px);letter-spacing:-.065em;line-height:1;margin:25px 0;color:var(--fg)}
.monopoly-hero h1 span{color:var(--accent)}
.monopoly-case p{font-size:17px;line-height:1.55;margin:15px 0;color:#dfdfe0}
.monopoly-case .label{font-size:11px;color:var(--accent)}
.monopoly-case p.monopoly-lede{font-size:23px;line-height:1.4;color:white}
.monopoly-watch{display:inline-flex;align-items:center;gap:15px;color:var(--accent);font-size:14px;margin-top:20px;min-height:44px}
.monopoly-body{max-width:1200px;padding:0 var(--gutter) 60px;margin:auto}
.monopoly-copy{max-width:800px;margin:0 auto 35px}
.monopoly-case h2{font-size:clamp(28px,3.2vw,46px);font-weight:500;line-height:1.1;letter-spacing:-.05em;margin-bottom:24px;color:var(--accent)}
.monopoly-art,.monopoly-film{padding-top:70px;margin-bottom:65px}
.monopoly-art img{width:100%;height:auto;border-radius:8px}
.monopoly-board-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:25px}
.board-link{display:block;border-radius:8px;transition:opacity .2s}.board-link:hover{opacity:.88}
.monopoly-case figcaption{font:11px/1.5 var(--mono);color:var(--muted);margin-top:12px}
.monopoly-film{border-top:1px dashed #f4e40988}
.monopoly-film video{width:100%;height:auto;border-radius:10px;background:#0a0d12}
.thumb-monopoly{aspect-ratio:1}.thumb-monopoly>img{object-fit:contain}
@media(max-width:640px){.monopoly-case{margin-top:-66px}.monopoly-hero{min-height:690px;padding-top:110px;background-position:63% center;background-image:linear-gradient(90deg,#041725e8,#041725b5),url('/media/monopoly-background.webp')}.monopoly-hero>div{margin:0}.monopoly-hero h1{font-size:52px}.monopoly-case p{font-size:16px}.monopoly-case p.monopoly-lede{font-size:21px}.monopoly-board-grid{grid-template-columns:1fr}.monopoly-art,.monopoly-film{padding-top:40px;margin-bottom:40px}}
.monopoly-film video{max-height:80svh;object-fit:contain}
body:has(.phantom-case){background:#18161d}
body:has(.phantom-case) .header{position:relative;z-index:1}
.phantom-case{margin-top:-78px}
.phantom-hero{min-height:670px;display:flex;align-items:center;padding:135px var(--gutter) 85px;background:linear-gradient(90deg,#f8f2ff 0%,#f8f2ffcc 35%,transparent 70%),url('/media/phantom-background.webp') 60% center/cover;color:#2b1e40}
.phantom-hero>div{max-width:540px;margin-left:max(0px,calc((100vw - 1200px)/2))}
.phantom-kicker{font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.phantom-hero h1{font-size:clamp(60px,6vw,95px);letter-spacing:-.065em;line-height:1;margin:23px 0}
.phantom-hero h1 span{display:block;font-size:clamp(31px,3vw,45px);letter-spacing:-.05em;line-height:1.1;margin-top:18px}
.phantom-case p{font-size:17px;line-height:1.55;margin:15px 0}
.phantom-case p.phantom-lede{font-size:22px;line-height:1.4}
.phantom-body{max-width:1260px;margin:auto;padding:0 var(--gutter) 60px}
.phantom-approach,.phantom-finals{padding-top:65px;margin-bottom:65px}
.phantom-copy{max-width:800px;margin:0 auto 35px}
.phantom-case h2{font-size:clamp(29px,3.2vw,46px);letter-spacing:-.05em;line-height:1.12;font-weight:500;margin-bottom:25px;color:var(--accent)}
.phantom-objects,.phantom-studies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-block:40px 55px;align-items:start}
.phantom-objects img,.phantom-studies img,.phantom-final-grid img{width:100%;height:auto;border-radius:7px}
.phantom-objects{background:#f4f2ee;border-radius:12px;padding:24px;color:#312b35}.phantom-objects figcaption{color:#4b424d}
.phantom-case figcaption{font:11px/1.5 var(--mono);margin-top:10px}
.phantom-finals{border-top:1px solid #ffffff25}
.phantom-final-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.thumb-phantom{aspect-ratio:1}.thumb-phantom>img{object-fit:contain}
@media(max-width:640px){.phantom-case{margin-top:-66px}.phantom-hero{padding-top:110px;min-height:690px;background-image:linear-gradient(90deg,#f8f2fff0,#f8f2ffcc),url('/media/phantom-background.webp')}.phantom-hero>div{margin:0}.phantom-case p{font-size:16px}.phantom-objects{gap:10px;padding:12px}.phantom-studies,.phantom-final-grid{grid-template-columns:1fr}.phantom-studies figure{max-width:400px;margin:auto}.phantom-approach,.phantom-finals{padding-top:40px}}
body:has(.phantom-case) .header{background:#201829f5;border-radius:0 0 12px 12px}
body:has(.visual-case){background:#1d1b19}
body:has(.visual-case) .header{position:relative;z-index:1;background:#24201cfa;border-radius:0 0 12px 12px}
.visual-case{margin-top:-78px}
.visual-hero{display:flex;align-items:center;min-height:680px;padding:140px var(--gutter) 80px;color:#302a23;background:linear-gradient(90deg,#e6dbcbf5,#e6dbcbc0 36%,transparent 75%),url('/media/visual-studies-background.webp') center/cover}
.visual-hero>div{max-width:560px;margin-left:max(0px,calc((100vw - 1200px)/2))}
.visual-hero h1{font-size:clamp(55px,5.8vw,90px);letter-spacing:-.065em;line-height:1;margin-bottom:30px}
.visual-hero h1 span{display:block;font-size:clamp(28px,2.8vw,43px);line-height:1.15;letter-spacing:-.04em;margin-top:20px}
.visual-case p{font-size:17px;line-height:1.55;margin:15px 0}.visual-case p.visual-lede{font-size:22px;line-height:1.4}
.visual-body{max-width:1200px;padding:0 var(--gutter) 60px;margin:auto}
.visual-reel{max-width:560px;margin:55px auto}
.visual-case video{width:100%;height:auto;max-height:80svh;object-fit:contain;background:#131211;border-radius:9px}
.visual-copy{max-width:800px;margin:0 auto 35px}
.visual-case h2{font-weight:500;font-size:clamp(29px,3.2vw,46px);letter-spacing:-.05em;line-height:1.12;color:var(--accent);margin-bottom:25px}
.visual-sculptures,.visual-products{padding-top:55px;margin-bottom:65px;border-top:1px solid #ffffff25}
.visual-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.visual-stills img{width:100%;height:auto;border-radius:7px}
.visual-product-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:35px}.visual-product-grid figure:first-child{max-width:380px;justify-self:center}
.visual-case h3{font-size:22px;font-weight:500;letter-spacing:-.03em;margin:0 0 15px}
.visual-case figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin-top:12px}
.thumb-visual-studies{aspect-ratio:1}.thumb-visual-studies>img{object-fit:contain}
@media(max-width:640px){.visual-case{margin-top:-66px}.visual-hero{min-height:690px;padding-top:110px;background-image:linear-gradient(90deg,#e6dbcbf0,#e6dbcbcb),url('/media/visual-studies-background.webp')}.visual-hero>div{margin:0}.visual-case p{font-size:16px}.visual-stills,.visual-product-grid{grid-template-columns:1fr}.visual-stills figure{max-width:400px;margin:auto}.visual-product-grid{gap:35px}.visual-reel{margin:35px auto}}

/* Shared proportions across the complete project collection. */
.cards .thumb{aspect-ratio:342/267;border-radius:clamp(18px,2.1vw,34px)}
.cards .thumb>img{object-fit:cover;object-position:center 10%}
.cards .thumb-o2>img{object-position:70% center}
.cards.list .thumb{width:clamp(75px,9vw,130px);aspect-ratio:342/267;border-radius:8px}
.about-portrait{max-height:none}
.about-portrait img{width:100%;height:auto;object-fit:contain}
:is(.st-case,.o2-case,.hik-case,.moeve-case,.campaign-case,.monopoly-case,.phantom-case,.visual-case){--project-copy:760px;--project-gap:clamp(36px,5vw,70px)}
:is(.st-hero,.o2-intro,.hik-intro,.moeve-intro,.campaign-hero,.monopoly-hero,.phantom-hero,.visual-hero){min-height:560px;padding-block:130px 75px}
:is(.st-hero,.o2-intro,.hik-intro,.moeve-intro,.campaign-hero,.monopoly-hero,.phantom-hero,.visual-hero) h1{font-size:clamp(48px,5.1vw,78px);line-height:1.02;letter-spacing:-.06em;margin:0 0 28px}
:is(.monopoly-hero,.phantom-hero,.visual-hero) h1 span{font-size:clamp(29px,3vw,45px);line-height:1.12;margin-top:12px}
:is(.st-body,.o2-body,.hik-body,.moeve-body,.campaign-body,.monopoly-body,.phantom-body,.visual-body){max-width:1200px;padding-inline:var(--gutter)}
:is(.st-case,.o2-case,.hik-case,.moeve-case,.campaign-case,.monopoly-case,.phantom-case,.visual-case) p{font-size:16px;line-height:1.55}
:is(.monopoly-case,.phantom-case,.visual-case) p:is(.monopoly-lede,.phantom-lede,.visual-lede){font-size:20px;line-height:1.45}
:is(.st-case,.o2-case,.hik-case,.moeve-case,.campaign-case,.monopoly-case,.phantom-case,.visual-case) h2{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.02em;text-transform:none;margin-bottom:16px}
:is(.st-body,.o2-body,.hik-body,.moeve-body,.campaign-body,.monopoly-body,.phantom-body,.visual-body) :is(img,video){border-radius:9px}
:is(.monopoly-copy,.phantom-copy,.visual-copy,.campaign-text,.moeve-copy){max-width:var(--project-copy)}
:is(.monopoly-art,.monopoly-film,.phantom-approach,.phantom-finals,.visual-sculptures,.visual-products){padding-top:var(--project-gap);margin-bottom:var(--project-gap)}
:is(.monopoly-film,.phantom-finals,.visual-sculptures,.visual-products){border-top:1px dashed #f4e40988}
.phantom-hero h2,.visual-hero h2{color:inherit}
@media(max-width:640px){
 :is(.st-hero,.o2-intro,.hik-intro,.moeve-intro,.campaign-hero,.monopoly-hero,.phantom-hero,.visual-hero){min-height:480px;padding-block:110px 60px}
 .hero .name{font-size:clamp(60px,12.3vw,79px)}
 .cards .thumb{border-radius:24px}
 .monopoly-board-grid,.phantom-final-grid,.visual-stills{gap:22px}
}

/* Fade each project backdrop into its own page colour. */
.st-case{--case-base:#161616}
.o2-case{--case-base:#202020}
.hik-case,.moeve-case{--case-base:#111111}
.campaign-case{--case-base:#151515}
.monopoly-case{--case-base:#11141d}
.phantom-case{--case-base:#18161d}
.visual-case{--case-base:#1d1b19}
:is(.st-hero,.o2-intro,.hik-intro,.moeve-intro,.campaign-hero,.monopoly-hero,.phantom-hero,.visual-hero){position:relative;isolation:isolate;padding-bottom:clamp(150px,16vw,210px)}
:is(.st-hero,.o2-intro,.hik-intro,.moeve-intro,.campaign-hero,.monopoly-hero,.phantom-hero,.visual-hero)::after{content:"";position:absolute;inset:auto 0 0;height:clamp(130px,15vw,190px);background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--case-base) 18%,transparent) 20%,color-mix(in srgb,var(--case-base) 55%,transparent) 48%,color-mix(in srgb,var(--case-base) 88%,transparent) 76%,var(--case-base) 100%);pointer-events:none;z-index:-1}
@media(max-width:640px){:is(.st-hero,.o2-intro,.hik-intro,.moeve-intro,.campaign-hero,.monopoly-hero,.phantom-hero,.visual-hero){padding-bottom:150px}}

/* Mobile art direction trial: dedicated visual, then readable copy. */
@media(max-width:640px){
 :is(.o2-case,.phantom-case,.monopoly-case){margin-top:0;--gutter:20px}
 :is(.o2-intro,.phantom-hero,.monopoly-hero){display:block;min-height:0;padding:0 20px 28px;background:none;color:var(--fg);text-align:left;isolation:isolate}
 :is(.o2-intro,.phantom-hero,.monopoly-hero)::before{content:"";display:block;height:320px;margin:0 -20px 0;background-size:cover;background-repeat:no-repeat}
 .o2-intro::before{background-image:url('/media/o2-cover.webp');background-position:70% center}
 .phantom-hero::before{background-image:url('/media/phantom-cover.webp');background-position:center 44%}
 .monopoly-hero::before{background-image:url('/media/monopoly-cover.webp');background-position:center 40%}
 :is(.o2-intro,.phantom-hero,.monopoly-hero)::after{top:220px;bottom:auto;height:100px;z-index:0;background:linear-gradient(transparent,var(--case-base))}
 :is(.o2-copy,.phantom-hero>div,.monopoly-hero>div){position:relative;z-index:1;max-width:none;margin:0}
 :is(.o2-intro,.phantom-hero,.monopoly-hero) h1{position:relative;margin:-62px 0 24px;font-size:46px;text-align:left;color:var(--accent);text-shadow:0 2px 20px #000b;line-height:1.04}
 :is(.phantom-hero,.monopoly-hero) h1 span{font-size:28px;line-height:1.16;margin-top:8px}
 .phantom-kicker,.monopoly-hero .label{margin:20px 0 12px;font-size:10px;color:var(--muted)}
 .phantom-hero>div,.monopoly-hero>div{display:flex;flex-direction:column}
 :is(.phantom-hero,.monopoly-hero) h1{order:-1}
 :is(.phantom-case,.monopoly-case) p:is(.phantom-lede,.monopoly-lede){font-size:19px;line-height:1.45;margin-top:0}
 :is(.o2-copy,.phantom-hero,.monopoly-hero) p{font-size:16px;line-height:1.6}
 .o2-body>figure:first-child{margin-top:0}
 :is(.o2-body,.phantom-body,.monopoly-body){padding-inline:20px}
 :is(.o2-row,.phantom-approach,.phantom-finals,.monopoly-art,.monopoly-film){padding-top:30px;margin-bottom:30px}
 .o2-row{gap:20px;padding-bottom:20px}
 .phantom-copy,.monopoly-copy{margin-bottom:24px}
 .phantom-objects{grid-template-columns:1fr;gap:24px;padding:20px;margin:26px 0}
 .phantom-objects figure{max-width:280px;margin:auto}
 .monopoly-watch{align-self:flex-start;margin-top:12px}
}

/* Continuous menu-to-artwork transition on every project. */
body:has(.st-case){--nav-base:#161616}
body:has(.o2-case){--nav-base:#202020}
body:has(.hik-case,.moeve-case){--nav-base:#111111}
body:has(.campaign-case){--nav-base:#151515}
body:has(.monopoly-case){--nav-base:#11141d}
body:has(.phantom-case){--nav-base:#18161d}
body:has(.visual-case){--nav-base:#1d1b19}
body:has(:is(.st-case,.o2-case,.hik-case,.moeve-case,.campaign-case,.monopoly-case,.phantom-case,.visual-case)) .header{position:relative;z-index:3;isolation:isolate;background:transparent;border-radius:0}
body:has(:is(.st-case,.o2-case,.hik-case,.moeve-case,.campaign-case,.monopoly-case,.phantom-case,.visual-case)) .header::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;left:calc(50% - 50vw);width:100vw;height:190px;background:linear-gradient(to bottom,var(--nav-base) 0%,color-mix(in srgb,var(--nav-base) 96%,transparent) 28%,color-mix(in srgb,var(--nav-base) 74%,transparent) 48%,color-mix(in srgb,var(--nav-base) 30%,transparent) 72%,transparent 100%)}
@media(max-width:640px){body:has(:is(.st-case,.o2-case,.hik-case,.moeve-case,.campaign-case,.monopoly-case,.phantom-case,.visual-case)) .header::before{height:160px}}

.portrait-stage .avatar-idle{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;opacity:0;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 90%,transparent)}
.portrait-stage .avatar-idle.ready{opacity:1}
.avatar-toggle{position:absolute;right:24px;bottom:22px;z-index:2;width:34px;height:34px;border:1px solid #30261d60;border-radius:50%;background:#e7ddd1b3;color:#30261d;cursor:pointer;font:14px/1 var(--sans)}
.avatar-toggle[hidden]{display:none}
.avatar-toggle:focus-visible{outline:2px solid #30261d;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.portrait-stage .avatar-idle,.avatar-toggle{display:none}}

/* Give the subtle generated performance a visible, gentle breathing cycle. */
.avatar-idle.ready{transform-origin:50% 90%;animation:avatar-breathe 4.8s ease-in-out infinite}
.avatar-idle.motion-paused{animation-play-state:paused}
@keyframes avatar-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.006,1.014)}}
@media(prefers-reduced-motion:reduce){.avatar-idle.ready{animation:none}}

/* Project palettes sampled from the hero artwork, darkened for reading. */
body:has(.st-case){--project-base:#34080e;--nav-base:#34080e;--muted:#d3cbd0;background:var(--project-base)}
.st-case{--case-base:#34080e}
body:has(.o2-case){--project-base:#071735;--nav-base:#071735;--muted:#d3cbd0;background:var(--project-base)}
.o2-case{--case-base:#071735}
body:has(.hik-case){--project-base:#302214;--nav-base:#302214;--muted:#d3cbd0;background:var(--project-base)}
.hik-case{--case-base:#302214}
body:has(.moeve-case){--project-base:#063443;--nav-base:#063443;--muted:#d3cbd0;background:var(--project-base)}
.moeve-case{--case-base:#063443}
body:has(.campaign-aquarius){--project-base:#07215a;--nav-base:#07215a;--muted:#d3cbd0;background:var(--project-base)}
.campaign-aquarius{--case-base:#07215a}
body:has(.campaign-skoda){--project-base:#302313;--nav-base:#302313;--muted:#d3cbd0;background:var(--project-base)}
.campaign-skoda{--case-base:#302313}
body:has(.campaign-coca-cola){--project-base:#420817;--nav-base:#420817;--muted:#d3cbd0;background:var(--project-base)}
.campaign-coca-cola{--case-base:#420817}
body:has(.campaign-dorminatur){--project-base:#0c2050;--nav-base:#0c2050;--muted:#d3cbd0;background:var(--project-base)}
.campaign-dorminatur{--case-base:#0c2050}
body:has(.monopoly-case){--project-base:#092b37;--nav-base:#092b37;--muted:#d3cbd0;background:var(--project-base)}
.monopoly-case{--case-base:#092b37}
body:has(.phantom-case){--project-base:#282034;--nav-base:#282034;--muted:#d3cbd0;background:var(--project-base)}
.phantom-case{--case-base:#282034}
body:has(.visual-case){--project-base:#30291f;--nav-base:#30291f;--muted:#d3cbd0;background:var(--project-base)}
.visual-case{--case-base:#30291f}

.project-contact{max-width:1120px;margin:45px auto 65px;padding:clamp(28px,5vw,60px);border:1px solid #f4e40950;border-radius:22px;background:linear-gradient(120deg,#f4e4090b,transparent 70%)}
.project-contact h2{font-size:clamp(32px,4.5vw,54px);letter-spacing:-.045em;line-height:1.1;margin:14px 0 18px}
.project-contact p:not(.label){max-width:520px;color:var(--muted)}
.project-contact-link{display:inline-flex;align-items:center;gap:20px;margin-top:24px;padding:14px 24px;border-radius:99px;background:var(--accent);color:#191919;font-weight:600}
.project-contact-link:hover{background:#fff16a}
@media(max-width:640px){.project-contact{margin:25px 20px 40px;padding:28px 22px}.project-contact-link{min-height:48px}}

/* Transparent GIF portrait over the original pastel colour. */
.hero{background:#c4b4aa}
.portrait-stage .avatar-gif{object-fit:contain;object-position:center bottom;mask-image:none}

.contact-new{padding-top:clamp(32px,5vw,72px)}
.contact-intro{display:grid;grid-template-columns:1.5fr .65fr;gap:7%;align-items:center}
.contact-new h1{font-size:clamp(45px,5.6vw,82px);line-height:1.04;letter-spacing:-.065em}
.contact-new .lede{font-size:19px;line-height:1.5;max-width:560px}
.contact-location{font:11px/1.7 var(--mono);margin-top:30px;color:var(--muted)}
.contact-portrait{transform:rotate(3deg);max-width:320px;margin:0 auto}
.contact-portrait img{width:100%;border-radius:24px;aspect-ratio:4/5;object-fit:cover;object-position:center}
.contact-portrait figcaption{font:10px/1.6 var(--mono);margin-top:12px;color:var(--muted)}
.contact-options{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin:60px 0}
.contact-email,.contact-social{border:1px solid #ffffff26;border-radius:22px;padding:clamp(24px,3vw,38px);background:#ffffff03}
.contact-address{display:block;font-size:clamp(18px,2.1vw,29px);letter-spacing:-.025em;overflow-wrap:anywhere;margin:20px 0}
.contact-address svg{width:18px}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.contact-send,.copy-email{display:inline-flex;align-items:center;gap:16px;border-radius:99px;padding:13px 20px;min-height:46px;font:500 14px/1.3 var(--sans);cursor:pointer}
.contact-send{background:var(--accent);color:#191919}
.copy-email{border:1px solid #ffffff55;color:var(--fg);background:transparent}
.copy-status{min-height:1.5em;color:var(--accent);font-size:13px;margin:12px 0 0}
.contact-social{display:flex;flex-direction:column;justify-content:center;gap:22px}
.contact-social strong{font-size:clamp(23px,2.5vw,34px);line-height:1.1;font-weight:500;letter-spacing:-.04em}
.contact-social>span:last-child{display:flex;gap:18px;align-items:center;font-size:14px;color:var(--muted)}
.contact-social:hover{border-color:var(--accent)}
.image-zoom{display:block;background:transparent;border:0;padding:0;margin:0;cursor:zoom-in;width:100%;color:inherit}
.image-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:9px}
.image-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:20px;border:0;background:#121216f5;color:#fff;overflow:hidden}
.image-viewer::backdrop{background:#000d}
.image-viewer[open]{display:flex;flex-direction:column}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:48px}
.viewer-bar button,.viewer-nav button{border:1px solid #ffffff55;background:#222;color:white;border-radius:99px;min-height:44px;min-width:48px;padding:10px 18px;font:14px var(--sans);cursor:pointer}
.viewer-stage{flex:1;min-height:0;display:grid;place-items:center;padding:18px 0}
.viewer-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;touch-action:pan-y}
.viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px}
.viewer-caption{font-size:14px;color:#ccc;max-width:75ch;line-height:1.4}
.viewer-nav{display:flex;gap:10px;flex-shrink:0}
@media(max-width:640px){.contact-intro{grid-template-columns:1fr;gap:32px}.contact-portrait{max-width:230px;justify-self:end;margin-right:10px}.contact-new h1{font-size:clamp(42px,10vw,61px)}.contact-options{grid-template-columns:1fr;margin:36px 0}.contact-location{margin-top:22px}.image-viewer{padding:12px}.viewer-footer{align-items:flex-start;flex-direction:column;gap:10px}.viewer-nav{align-self:center}.viewer-caption{font-size:12px}.viewer-stage{padding:12px 0}}

/* A visual introduction, followed by the existing verified career details. */
.about-visual{padding-top:clamp(28px,5vw,65px)}
.about-opening{display:grid;grid-template-columns:1.1fr .85fr;gap:9%;align-items:center;padding-bottom:65px}
.about-heading h1{font-size:clamp(65px,8vw,116px);line-height:.94;letter-spacing:-.07em;margin:28px 0}
.about-statement{font-size:clamp(24px,2.7vw,38px);line-height:1.15;letter-spacing:-.04em;margin:30px 0 22px}
.about-heading .lede{font-size:17px;line-height:1.6;max-width:510px;color:var(--muted)}
.about-jump{display:inline-flex;align-items:center;gap:22px;margin-top:26px;font-size:14px;border-bottom:1px solid var(--accent);padding-bottom:10px}
.about-photo{position:relative;margin:0 8px 0 0;isolation:isolate}
.about-photo::before{content:"";position:absolute;inset:18px -18px 18px 18px;border:1px solid var(--accent);border-radius:28px;z-index:-1}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:24px}
.about-photo figcaption{display:flex;justify-content:space-between;gap:10px;font:10px/1.5 var(--mono);margin-top:18px;color:var(--muted)}
.about-photo-mark{position:absolute;bottom:48px;left:-24px;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#191919;font-size:29px;font-weight:700;letter-spacing:-.09em;transform:rotate(-10deg)}
.about-collaborations{display:grid;grid-template-columns:1fr 1.8fr 1fr;align-items:center;gap:24px;border-block:1px solid var(--line);padding:28px 0}
.about-collaborations>div{display:flex;flex-wrap:wrap;gap:18px 32px;font-size:clamp(20px,2.5vw,30px);letter-spacing:-.04em}
.about-collaborations>p:last-child{font-size:13px;color:var(--muted);line-height:1.5}
.about-craft{padding-block:70px}
.about-section-head h2,.about-brands h2,.about-invite h2{font-size:clamp(29px,3.8vw,49px);line-height:1.1;letter-spacing:-.05em;font-weight:500;margin:16px 0 30px}
.about-craft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.craft-card{position:relative;border:1px solid var(--line);border-radius:18px;padding:14px 14px 26px;overflow:hidden}
.craft-card>div{overflow:hidden;border-radius:11px;aspect-ratio:1.3}
.craft-card img{height:100%;width:100%;object-fit:cover}
.craft-card>.label{margin-top:22px;font-size:10px}
.craft-card h3{font-size:24px;line-height:1.15;letter-spacing:-.035em;font-weight:500;max-width:90%;margin:14px 0}
.craft-card>p:last-of-type{font-size:14px;line-height:1.5;color:var(--muted);max-width:90%}
.craft-arrow{position:absolute;right:16px;bottom:24px;color:var(--accent);font-size:25px}
.about-brands{padding:40px 0 60px;border-top:1px solid var(--line)}
.about-brands h2{max-width:650px}
.about-brands ul{list-style:none;padding:0;margin:30px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.about-brands li{border:1px solid var(--line);padding:14px 21px;border-radius:99px;font-size:clamp(17px,2vw,24px);letter-spacing:-.03em}
.about-visual .bio{gap:0;border-top:1px solid var(--line)}
.about-visual .bio section{padding:34px 0;border-bottom:1px solid var(--line)}
.about-visual .bio dl{position:relative;padding-left:24px;border-left:1px solid #f4e40977}
.about-visual .bio dt{position:relative}
.about-visual .bio dt::before{content:"";position:absolute;left:-29px;top:8px;width:9px;height:9px;background:var(--accent);border-radius:50%}
.about-invite{margin:65px 0 20px;padding:clamp(26px,5vw,60px);background:#f4e40909;border:1px solid #f4e40950;border-radius:24px}
.about-invite h2{max-width:690px;margin-bottom:8px}
/* Small tactile responses; the gallery remains still imagery. */
a,button{-webkit-tap-highlight-color:#f4e40930}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.card,.craft-card{transition:transform .22s ease,border-color .22s ease}
.card-arrow svg,.text-link svg,.project-contact-link svg,.contact-send svg,.about-jump svg{transition:transform .22s ease}
.project-contact-link,.contact-send,.copy-email,.viewer-nav button,.viewer-close{transition:background-color .2s ease,transform .2s ease,border-color .2s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .card:hover,.craft-card:hover{transform:translateY(-4px)}
 .craft-card:hover{border-color:var(--accent)}
 .card:hover .card-arrow svg,.text-link:hover svg,.project-contact-link:hover svg,.contact-send:hover svg{transform:translate(3px,-2px)}
 .about-jump:hover svg{transform:translateY(4px)}
 .project-contact-link:hover,.contact-send:hover,.copy-email:hover{transform:translateY(-2px)}
}
button:active,.project-contact-link:active,.contact-send:active{transform:scale(.98)}
@media(max-width:640px){
 .about-opening{grid-template-columns:1fr;gap:35px;padding-bottom:40px}
 .about-heading h1{font-size:clamp(66px,17vw,92px)}
 .about-photo{max-width:370px;width:calc(100% - 20px);justify-self:center;margin:0}
 .about-photo-mark{left:-8px;width:56px;height:56px;font-size:23px}
 .about-collaborations{grid-template-columns:1fr;gap:12px;padding:24px 0}
 .about-collaborations p{margin:0}.about-collaborations>div{gap:24px}
 .about-craft{padding-block:42px}.about-craft-grid{grid-template-columns:1fr;gap:22px}
 .craft-card>div{aspect-ratio:1.6}.craft-card h3{max-width:85%}
 .about-brands{padding:30px 0 38px}.about-brands ul{gap:10px}.about-brands li{padding:11px 15px;font-size:18px}
 .about-invite{margin-top:40px}.about-visual .bio section{padding:26px 0}
}
@media(prefers-reduced-motion:reduce){.card,.craft-card,.project-contact-link,.contact-send,.copy-email{transition:none;transform:none!important}}

body:has(.campaign-iberdrola){--project-base:#081b2a;--nav-base:#081b2a;background:var(--project-base)}
.campaign-iberdrola{--case-base:#081b2a;--campaign-image:url('/media/iberdrola-background.webp')}
.campaign-iberdrola .campaign-hero{text-align:left;background-position:65% center;padding-bottom:190px}
.campaign-iberdrola .campaign-hero>div{margin-left:max(0px,calc((100vw - 1200px)/2));max-width:570px}
.campaign-iberdrola .campaign-hero p{max-width:520px}
.campaign-iberdrola .campaign-hero h2{font-size:22px;line-height:1.3}
.iberdrola-overview{display:grid;grid-template-columns:1fr 2fr;gap:36px;padding:55px 0}
.iberdrola-detail{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;padding:45px 0;border-top:1px dashed #f4e40970}
.iberdrola-detail img{width:100%;height:auto;border-radius:9px}
.iberdrola-formats{padding:40px 0 50px;max-width:800px}
.iberdrola-format-list{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.iberdrola-format-list span{border:1px solid #ffffff35;border-radius:99px;padding:10px 22px;font-size:14px}
.iberdrola-story{grid-template-columns:.7fr 1.3fr}
.iberdrola-story figure{max-width:340px;justify-self:center}
.iberdrola-body .label{color:var(--accent)}
@media(max-width:640px){
 .campaign-iberdrola{margin-top:0}
 .campaign-iberdrola .campaign-hero{padding:0 20px 28px;min-height:0;background:none;position:relative;isolation:isolate}
 .campaign-iberdrola .campaign-hero::before{content:"";display:block;height:300px;margin:0 -20px;background:url('/media/iberdrola-background.webp') 75% center/cover}
 .campaign-iberdrola .campaign-hero::after{top:200px;bottom:auto;height:100px;z-index:0;background:linear-gradient(transparent,var(--case-base))}
 .campaign-iberdrola .campaign-hero>div{position:relative;z-index:1;margin:0;max-width:none}
 .campaign-iberdrola .campaign-hero h1{margin-top:12px}
 .campaign-iberdrola .campaign-hero h2{font-size:20px}
 .iberdrola-overview,.iberdrola-detail,.iberdrola-story{grid-template-columns:1fr;gap:20px;padding:30px 0}
 .iberdrola-film{margin-top:0!important}
 .iberdrola-story figure{order:2;max-width:300px}
}

/* Iberdrola branded cover and original transparent render sequence. */
.thumb-iberdrola .iberdrola-cover-logo{position:absolute;z-index:2;top:7%;left:7%;width:67%;padding:0;background:transparent;border-radius:0;pointer-events:none}
.thumb-iberdrola .iberdrola-cover-logo img{display:block;width:100%;height:auto;object-fit:contain;transform:none!important}
.iberdrola-detail .iberdrola-mupi{width:100%;max-width:440px;max-height:680px;object-fit:contain;border-radius:0;background:transparent}
.iberdrola-detail:has(.iberdrola-mupi) figure{display:flex;align-items:center;flex-direction:column;background:transparent}
.iberdrola-formats.iberdrola-detail{max-width:none}
.iberdrola-fooh-video{width:min(100%,340px);justify-self:center}
.iberdrola-fooh-video video{width:100%;height:auto;display:block;border-radius:9px}
@media(max-width:640px){.iberdrola-detail .iberdrola-mupi{max-height:540px}.iberdrola-fooh-video{max-width:320px}}

.iberdrola-detail h3{margin-top:28px;color:var(--accent);font-size:20px;line-height:1.3}
@media(max-width:640px){.iberdrola-story figure{order:0}.iberdrola-story>div{order:1}}

/* Eucerin — silver product, blue light, two scales. */
body:has(.eucerin-case){background:#061421;--nav-base:#061421}
.eucerin-case{--case-base:#061421;--muted:#b9c7d4;color:#edf2f7}
.eucerin-hero{position:relative;isolation:isolate;min-height:660px;padding:180px max(var(--gutter),calc((100vw - 1070px)/2)) 140px;background:linear-gradient(90deg,#061421c9,transparent 65%),url('/media/eucerin-background.webp') 65% center/cover}
.eucerin-hero::after{content:"";position:absolute;inset:auto 0 0;height:150px;z-index:-1;background:linear-gradient(transparent,#061421)}
.eucerin-hero-copy{max-width:490px}
.eucerin-case .label{color:#94cce8}
.eucerin-hero h1{font-size:clamp(58px,6.5vw,96px);line-height:.95;letter-spacing:-.06em;font-weight:500;color:white;margin:22px 0}
.eucerin-hero h1 span{display:block;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.04em;line-height:1.1;margin-top:22px;max-width:380px}
.eucerin-hero .eucerin-lede{font-size:19px;max-width:350px;color:#d3dfe9}
.eucerin-discover{display:inline-flex;align-items:center;gap:24px;padding:12px 0;margin-top:20px;border-bottom:2px solid #bf2350;font-size:14px}
.eucerin-body{padding-bottom:50px}
.eucerin-introduction{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:45px 0 65px;border-bottom:1px solid #b8d5e62b}
.eucerin-introduction>div{max-width:700px}
.eucerin-skills{padding:0;list-style:none;display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:26px;font:12px/1.4 var(--mono);color:#a7cde4}
.eucerin-skills li::before{content:'+';margin-right:7px;color:#e24b71}
.eucerin-product{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:75px 0;scroll-margin-top:35px}
.eucerin-product figure{border:1px solid #aac7dc35;border-radius:12px;overflow:hidden;padding:10px;background:#dce3e90c}
.eucerin-product figure video{display:block;border-radius:5px}
.eucerin-product figcaption{padding:0 6px 8px}
.eucerin-product-copy{position:relative}
.eucerin-number{display:block;font-size:100px;line-height:1;color:#8aabc533;letter-spacing:-.08em;margin-bottom:20px}
.eucerin-case .eucerin-product h2{font-size:clamp(25px,3vw,39px);line-height:1.1;font-weight:500;letter-spacing:-.04em;color:#ecf4fb}
.eucerin-fooh{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:70px;padding:60px 60px;margin:20px 0 75px;background:radial-gradient(ellipse at 90% 40%,#153d5b85,transparent 70%);border-block:1px solid #b8d5e62b}
.eucerin-fooh>div{max-width:480px;border-left:2px solid #b8244c;padding-left:32px}
.eucerin-case .eucerin-fooh h2{font-size:clamp(38px,5.5vw,72px);font-weight:500;line-height:1;letter-spacing:-.06em;color:white;margin:25px 0}
.eucerin-fooh h3{font-size:18px;color:#a6d4f1;line-height:1.3;margin-bottom:18px}
.eucerin-fooh figure{max-width:320px;width:100%;justify-self:center;transform:rotate(2deg)}
.eucerin-fooh video{display:block;box-shadow:0 20px 55px #0005}
.eucerin-case .eucerin-location{font:12px/1.5 var(--mono);color:#a4bbcb;margin-top:30px}
.thumb-eucerin .eucerin-cover-logo{position:absolute;z-index:2;top:7%;left:7%;width:37%;pointer-events:none}
.thumb-eucerin .eucerin-cover-logo img{display:block;width:100%;height:auto;object-fit:contain;transform:none!important}
@media(max-width:800px){.eucerin-product{gap:30px}.eucerin-fooh{padding:45px 10px;gap:35px}.eucerin-fooh>div{padding-left:20px}}
@media(max-width:640px){
 .eucerin-hero{padding:0 20px 25px;min-height:0;background:none}
 .eucerin-hero::before{content:"";display:block;height:340px;margin:0 -20px;background:linear-gradient(0deg,#061421,transparent 38%),url('/media/eucerin-background.webp') 88% center/cover}
 .eucerin-hero::after{display:none}
 .eucerin-hero-copy{margin-top:-10px;position:relative;max-width:none}
 .eucerin-hero h1{font-size:62px}.eucerin-hero h1 span{font-size:33px;max-width:none;margin-top:15px}
 .eucerin-hero .eucerin-lede{font-size:17px;max-width:none}
 .eucerin-introduction{grid-template-columns:1fr;gap:10px;padding:25px 0 35px}
 .eucerin-product{grid-template-columns:1fr;padding:35px 0;gap:25px}
 .eucerin-product-copy{order:-1}.eucerin-number{font-size:60px;margin-bottom:10px}
 .eucerin-fooh{grid-template-columns:1fr;padding:35px 0;margin:15px 0 40px;gap:35px}
 .eucerin-fooh figure{max-width:300px;transform:none}
}

.eucerin-body>.eucerin-showcase:first-child{margin-top:0;margin-bottom:0}.eucerin-showcase video{display:block;aspect-ratio:16/9;background:#061421}.eucerin-showcase figcaption{margin-bottom:20px}

/* Related case studies: one editorial rhythm, three content structures. */
.case-editorial{--editorial-space:clamp(40px,6vw,78px);--editorial-line:#ffffff26}
.case-editorial .editorial-section{padding-block:var(--editorial-space);border-top:1px solid var(--editorial-line)}
.case-editorial .case-index{display:block;font:12px/1.4 var(--mono);letter-spacing:.12em;color:var(--accent);margin-bottom:18px}
.case-editorial :is(.st-body,.o2-body,.hik-body) h2{font-size:clamp(23px,2.5vw,34px);font-weight:500;line-height:1.14;letter-spacing:-.035em;text-transform:none;margin:0 0 22px}
.case-editorial :is(.st-body,.o2-body,.hik-body) p{line-height:1.65}
.case-editorial :is(.st-body,.o2-body,.hik-body) figcaption{font:11px/1.5 var(--mono);color:var(--muted);margin-top:12px}
/* McDonald's: narrative and upright film, installation spread, print atelier. */
.st-case.case-editorial .st-hero{text-align:left;min-height:660px;padding:160px max(var(--gutter),calc((100vw - 1070px)/2)) 150px;background-image:linear-gradient(90deg,#34080ee8,#34080e45 80%),url('/media/mcdonalds-wide.webp');background-position:65% center}
.st-case.case-editorial .st-hero>div{max-width:700px;margin:0}
.st-case.case-editorial .st-hero h1{font-size:clamp(48px,5.5vw,80px);max-width:700px}
.st-case.case-editorial .st-hero p{max-width:620px}
.st-case.case-editorial .st-role{grid-template-columns:1.4fr .8fr;gap:clamp(40px,7vw,100px);padding-top:20px;border-top:0}
.st-case.case-editorial .st-role>div{max-width:640px}
.st-case.case-editorial .st-role figure{width:100%;max-width:310px;justify-self:end;padding:10px;border:1px solid var(--editorial-line);border-radius:13px;background:#ffffff05}
.st-case.case-editorial .st-role figure video{display:block}
.st-case.case-editorial .st-role figcaption{text-align:left;padding:0 5px 5px}
.st-case.case-editorial .st-pair{grid-template-columns:.78fr 1.55fr;align-items:center;gap:clamp(24px,5vw,65px);padding:var(--editorial-space) 0;border-block:1px solid var(--editorial-line)}
.st-case.case-editorial .st-pair figure:first-child{max-width:320px;justify-self:start}
.st-case.case-editorial .st-screen{margin-top:0;border-top:0;border-color:var(--editorial-line)}
.st-case.case-editorial .st-process{display:grid;grid-template-columns:1.2fr .85fr;gap:clamp(35px,7vw,100px);align-items:center;max-width:none;margin:0;text-align:left;border-top:0}
.st-case.case-editorial .st-process::before{display:none}
.st-case.case-editorial .st-process figure{max-width:400px;margin:0;justify-self:end}
.st-case.case-editorial .st-close{max-width:none;margin:0 0 30px;text-align:left;display:grid;grid-template-columns:70px .9fr 1.2fr;gap:30px}
.st-case.case-editorial .st-close p{max-width:none;margin:0}
/* O2: a clear hero, broadcast premiere and a two-column animation notebook. */
.o2-case.case-editorial .o2-intro{min-height:570px;padding:160px max(var(--gutter),calc((100vw - 1070px)/2)) 170px;text-align:left;background-image:linear-gradient(90deg,#071735ed,#07173575 60%,#07173520),url('/media/o2-wide.webp');background-position:70% center}
.o2-case.case-editorial .o2-copy{max-width:550px;margin:0}
.o2-case.case-editorial .o2-copy h1{text-align:left;font-size:clamp(70px,8vw,115px);margin:0 0 25px}
.o2-case.case-editorial .o2-copy h2{font-size:clamp(24px,3vw,38px);font-weight:500;text-transform:none;line-height:1.12;letter-spacing:-.04em}
.o2-case.case-editorial .o2-production{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,80px);margin-top:45px}
.o2-case.case-editorial .o2-production>div{max-width:570px}
.o2-case.case-editorial .o2-production>div:first-child{padding-top:32px}
.o2-case.case-editorial .o2-lab{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:10px 0 40px}
.o2-case.case-editorial .o2-lab .o2-row{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:24px;padding:0}
.o2-case.case-editorial .o2-lab .o2-row>figure{order:-1;margin:0}
.o2-case.case-editorial .o2-lab video{display:block;aspect-ratio:2.1;object-fit:contain;background:#071226}
.o2-case.case-editorial .o2-lab h2{font-size:26px}
.o2-case.case-editorial .o2-third-test{margin:20px 0 0;padding-bottom:var(--editorial-space)}
.o2-case.case-editorial .o2-beyond{grid-template-columns:1fr 1.1fr;gap:60px}
.o2-case.case-editorial .o2-beyond>picture{grid-column:1;grid-row:1;justify-self:center;max-width:350px}
.o2-case.case-editorial .o2-beyond>div{grid-column:2;grid-row:1}
.o2-case.case-editorial .o2-beyond img{display:block;width:100%;height:auto;object-fit:contain}
/* Hikvision: gallery modules follow the native proportions of each screen. */
.hik-case.case-editorial .hik-intro{min-height:570px;text-align:left;display:flex;align-items:flex-end;padding:165px max(var(--gutter),calc((100vw - 1070px)/2)) 155px;background-image:linear-gradient(90deg,#302214c9,#30221425),url('/media/hikvision-wide.webp')}
.hik-case.case-editorial .hik-intro>div{margin:0;max-width:700px}
.hik-case.case-editorial .hik-intro h1{font-size:clamp(48px,6.7vw,96px);margin-bottom:20px}
.hik-case.case-editorial .hik-intro h2{max-width:450px;font-size:clamp(24px,3vw,38px);font-weight:500;line-height:1.12;letter-spacing:-.04em}
.hik-case.case-editorial .hik-summary{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;margin-top:45px}
.hik-case.case-editorial .hik-summary p{margin:0}
.hik-case.case-editorial .hik-studio{display:grid;grid-template-columns:1.4fr .85fr;gap:60px 70px}
.hik-case.case-editorial .hik-row{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:0;border:0;margin:0}
.hik-case.case-editorial .hik-row>div{order:1}
.hik-case.case-editorial .hik-row>video{order:0;max-height:none;display:block;width:100%;height:auto}
.hik-case.case-editorial .hik-module-1{align-self:center}
.hik-case.case-editorial .hik-module-2{padding-left:25px;border-left:1px solid var(--editorial-line)}
.hik-case.case-editorial .hik-module-2 video{max-height:650px}
.hik-case.case-editorial .hik-module-3{grid-column:1/-1;padding-block:var(--editorial-space);border-block:1px solid var(--editorial-line)}
.hik-case.case-editorial .hik-module-3>div{display:grid;grid-template-columns:.8fr 1.6fr;gap:22px 70px}
.hik-case.case-editorial .hik-module-3 h2,.hik-case.case-editorial .hik-module-3 p{margin:0}
.hik-case.case-editorial .hik-module-3 .case-index{grid-column:1/-1;margin:0}
.hik-case.case-editorial .hik-module-4{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.4fr;gap:60px;align-items:center;padding-bottom:var(--editorial-space)}
.hik-case.case-editorial .hik-module-4>div{order:0}
.hik-case.case-editorial .hik-module-4>video{order:1}
@media(max-width:800px){
 .st-case.case-editorial .st-role{gap:35px}.st-case.case-editorial .st-close{grid-template-columns:45px 1fr}.st-case.case-editorial .st-close p{grid-column:2}
 .hik-case.case-editorial .hik-studio{gap:45px 35px}.o2-case.case-editorial .o2-lab{gap:25px}
}
@media(max-width:640px){
 .case-editorial{--editorial-space:38px}
 .case-editorial :is(.st-body,.o2-body,.hik-body) h2{font-size:26px}
 .st-case.case-editorial .st-hero{min-height:600px;padding:120px 20px 130px;background-position:63% center}
 .st-case.case-editorial .st-hero h1{font-size:45px}
 .st-case.case-editorial .st-role,.st-case.case-editorial .st-process{grid-template-columns:1fr;gap:28px}
 .st-case.case-editorial .st-role figure{max-width:310px;justify-self:center}
 .st-case.case-editorial .st-pair{grid-template-columns:1fr;gap:32px}
 .st-case.case-editorial .st-pair figure:first-child{max-width:310px;justify-self:center}
 .st-case.case-editorial .st-process figure{max-width:340px;justify-self:center}
 .st-case.case-editorial .st-close{grid-template-columns:1fr;gap:12px}.st-case.case-editorial .st-close p{grid-column:auto}.st-case.case-editorial .st-close h2{margin-bottom:4px}
 .o2-case.case-editorial .o2-intro{min-height:0;padding:0 20px 35px;background:none}
 .o2-case.case-editorial .o2-copy{max-width:none}
 .o2-case.case-editorial .o2-copy h1{margin:0 0 15px;font-size:64px}
 .o2-case.case-editorial .o2-copy h2{font-size:29px;margin:0 0 18px}
 .o2-case.case-editorial .o2-production,.o2-case.case-editorial .o2-lab{grid-template-columns:1fr;gap:32px}
 .o2-case.case-editorial .o2-production{margin-top:30px}.o2-case.case-editorial .o2-production>div:first-child{padding:0}
 .o2-case.case-editorial .o2-lab{gap:40px}.o2-case.case-editorial .o2-lab .o2-row{gap:20px}
 .o2-case.case-editorial .o2-beyond{display:flex;flex-direction:column;gap:25px}
 .o2-case.case-editorial .o2-beyond>picture{order:1;max-width:290px}
 .hik-case.case-editorial .hik-intro{min-height:510px;padding:125px 20px 130px}
 .hik-case.case-editorial .hik-intro h1{font-size:46px}.hik-case.case-editorial .hik-intro h2{font-size:28px}
 .hik-case.case-editorial .hik-summary{grid-template-columns:1fr;gap:20px;margin-top:30px}
 .hik-case.case-editorial .hik-studio{grid-template-columns:1fr;gap:40px}
 .hik-case.case-editorial .hik-module-2{border:0;padding:0;max-width:340px;justify-self:center}
 .hik-case.case-editorial .hik-module-3>div{grid-template-columns:1fr;gap:16px}
 .hik-case.case-editorial .hik-module-3 h2:not(:first-child){margin-top:12px}
 .hik-case.case-editorial .hik-module-4{grid-template-columns:1fr;gap:20px}
}
@media(min-width:641px){.o2-case.case-editorial .o2-intro{background-color:#071735;background-size:cover,auto 82%;background-position:center,right 110px;background-repeat:no-repeat}}

/* O2 — vivid blue fur, lighter backdrop and a petrol reading surface. */
body:has(.o2-case){--project-base:#123341;--nav-base:#123341;--muted:#c2d5dc;background:var(--project-base)}
.o2-case{--case-base:#123341}
.o2-case.case-editorial .o2-intro{background-color:#123341;background-image:linear-gradient(90deg,#12334140,transparent 68%),url('/media/o2-fur-background.webp');background-size:cover;background-position:70% top;background-repeat:no-repeat;min-height:680px}
.o2-case.case-editorial .o2-copy{max-width:510px}
.o2-case.case-editorial .o2-beyond{grid-template-columns:1.1fr 1fr}
.o2-case.case-editorial .o2-beyond>div{grid-column:1;grid-row:1}
.o2-case.case-editorial .o2-beyond>picture{grid-column:2;grid-row:1}
.o2-cover-mark{position:absolute;z-index:2;left:10%;top:13%;color:white;font:400 clamp(48px,5.8vw,82px)/1 Arial,sans-serif;letter-spacing:-.06em;pointer-events:none}
.o2-cover-mark sub{font-size:.45em;position:relative;bottom:-.06em;margin-left:.01em;vertical-align:baseline}
.cards.list .o2-cover-mark{font-size:clamp(20px,3vw,32px)}
.cards .thumb-o2>img{object-position:center}
@media(max-width:640px){
 .o2-case.case-editorial .o2-intro{min-height:0;padding:0 20px 35px;background:none}
 .o2-case.case-editorial .o2-intro::before{height:335px;background-image:url('/media/o2-fur-background.webp');background-position:right top;background-size:auto 100%;background-color:#123341}
 .o2-case.case-editorial .o2-intro::after{top:235px;height:100px;background:linear-gradient(transparent,#123341)}
 .o2-case.case-editorial .o2-copy{max-width:none}
 .o2-case.case-editorial .o2-lab video{background:#123341}
 .o2-cover-mark{font-size:78px}
}

/* Moeve and Aquarius: artwork-led headers with copy below the image. */
.moeve-case.case-editorial .moeve-intro{min-height:650px;text-align:left;padding:175px max(var(--gutter),calc((100vw - 1070px)/2)) 145px;background-color:#063443;background-image:linear-gradient(90deg,#063443 0%,#063443 42%,#063443ee 52%,transparent 77%),url('/media/moeve-background.webp');background-size:cover,auto 100%;background-position:center,right 45px;background-repeat:no-repeat}
.moeve-case.case-editorial .moeve-intro>div{max-width:460px;margin:0}
.moeve-case.case-editorial .moeve-intro h1{font-size:clamp(62px,7vw,100px);margin-bottom:24px}
.moeve-case.case-editorial .moeve-intro h2{font-size:clamp(27px,3.3vw,43px);font-weight:500;line-height:1.12;letter-spacing:-.04em;max-width:380px}
.moeve-summary{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.moeve-case.case-editorial .moeve-summary{border-top:0;padding-top:15px}
.moeve-summary p{margin:0}
.moeve-lead{display:grid;grid-template-columns:1.4fr .8fr;align-items:center;gap:75px}
.moeve-case.case-editorial .moeve-location{width:100%;max-width:300px;justify-self:end;margin:0}
.moeve-location video{display:block}
.moeve-case.case-editorial .moeve-making{display:grid;grid-template-columns:.8fr 1.4fr;gap:60px;align-items:center}
.moeve-panorama{padding:0 0 55px}
.moeve-main-film{max-width:870px;margin:0 auto 65px}
.moeve-tennis{display:grid;grid-template-columns:.9fr 1.3fr;align-items:center;gap:60px}
.moeve-case.case-editorial :is(.moeve-lead,.moeve-making,.moeve-tennis) h2{font-size:clamp(25px,2.5vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.campaign-aquarius.case-editorial .campaign-hero{min-height:650px;padding:185px max(var(--gutter),calc((100vw - 1070px)/2)) 150px;text-align:left;background-image:linear-gradient(90deg,#07215a55,transparent 48%),url('/media/aquarius-wide.webp');background-size:cover;background-position:center top}
.campaign-aquarius.case-editorial .campaign-hero>div{max-width:420px;margin:0}
.campaign-aquarius.case-editorial .campaign-hero h1{font-size:clamp(58px,6.6vw,96px);margin-bottom:22px}
.campaign-aquarius.case-editorial .campaign-hero h2{max-width:320px;font-size:clamp(27px,3.3vw,43px);font-weight:500;line-height:1.12;letter-spacing:-.04em}
.campaign-aquarius.case-editorial .aquarius-summary{border-top:0;padding-top:15px}
.aquarius-summary p{max-width:820px;margin:0;font-size:19px!important}
.aquarius-location{margin:0 0 65px}
.aquarius-build{display:grid;grid-template-columns:1.35fr .75fr;gap:85px;align-items:center}
.aquarius-build>div{max-width:620px}
.aquarius-build>div section+section{margin-top:35px}
.aquarius-build>figure{width:100%;max-width:310px;justify-self:end}
.campaign-aquarius.case-editorial .aquarius-body h2{font-size:clamp(25px,2.5vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.aquarius-editions-heading{max-width:700px;margin-bottom:30px}
.aquarius-red{margin-bottom:55px}
.aquarius-red video{display:block;aspect-ratio:1800/576;object-fit:contain}
.aquarius-finish{display:grid;grid-template-columns:1.4fr 1fr;gap:55px;align-items:start}
.aquarius-finish>div section+section{margin-top:32px}
.aquarius-finish video{display:block}
@media(max-width:800px){.moeve-lead,.moeve-case.case-editorial .moeve-making,.moeve-tennis,.aquarius-build,.aquarius-finish{gap:35px}.moeve-summary{gap:35px}}
@media(max-width:640px){
 .moeve-case.case-editorial .moeve-intro{padding:0 20px 35px;min-height:0;background:none}
 .moeve-case.case-editorial .moeve-intro::before{content:"";display:block;height:350px;margin:0 -20px;background:linear-gradient(0deg,#063443,transparent 40%),url('/media/moeve-background.webp') center 20%/cover}
 .moeve-case.case-editorial .moeve-intro::after{display:none}
 .moeve-case.case-editorial .moeve-intro>div{max-width:none;position:relative;margin-top:5px}
 .moeve-case.case-editorial .moeve-intro h1{font-size:60px;margin-bottom:15px}
 .moeve-case.case-editorial .moeve-intro h2{font-size:30px;max-width:none;margin-bottom:0}
 .moeve-summary,.moeve-lead,.moeve-case.case-editorial .moeve-making,.moeve-tennis{grid-template-columns:1fr;gap:25px}
 .moeve-case.case-editorial .moeve-location{max-width:290px;justify-self:center}
 .moeve-case.case-editorial .moeve-summary{padding-top:0}
 .moeve-main-film{margin-bottom:35px}.moeve-panorama{padding-bottom:35px}
 .campaign-aquarius.case-editorial .campaign-hero{min-height:0;padding:0 20px 35px;background:none}
 .campaign-aquarius.case-editorial .campaign-hero::before{content:"";display:block;height:345px;margin:0 -20px;background:linear-gradient(0deg,#07215a,transparent 35%),url('/media/aquarius-wide.webp') 85% center/cover}
 .campaign-aquarius.case-editorial .campaign-hero::after{display:none}
 .campaign-aquarius.case-editorial .campaign-hero>div{position:relative;max-width:none;margin:5px 0 0}
 .campaign-aquarius.case-editorial .campaign-hero h1{font-size:58px;margin-bottom:15px}
 .campaign-aquarius.case-editorial .campaign-hero h2{font-size:30px;max-width:none;margin-bottom:0}
 .campaign-aquarius.case-editorial .aquarius-summary{padding-top:0}
 .aquarius-summary p{font-size:17px!important}
 .aquarius-location{margin-bottom:35px}
 .aquarius-build,.aquarius-finish{grid-template-columns:1fr;gap:28px}
 .aquarius-build>figure{max-width:290px;justify-self:center}
 .aquarius-red{margin-bottom:35px}
}

/* Ánima / Lea & Pop — character performance in a playful mint world. */
body:has(.anima-case){background:#123a39;--nav-base:#123a39;--muted:#c1d9d3}
.anima-case{--case-base:#123a39;color:#eef5ef}
.anima-hero{position:relative;isolation:isolate;min-height:660px;padding:180px max(var(--gutter),calc((100vw - 1070px)/2)) 155px;background:linear-gradient(90deg,#123a39eb 0%,#123a39a0 30%,transparent 62%),url('/media/anima-background.webp') 75% top/cover}
.anima-hero::after{content:"";position:absolute;inset:auto 0 0;height:160px;z-index:-1;background:linear-gradient(transparent,#123a39)}
.anima-hero>div{max-width:450px}
.anima-hero .label{color:#c8e4d8}
.anima-hero h1{font-size:clamp(56px,6.5vw,92px);font-weight:500;line-height:1;letter-spacing:-.065em;color:var(--accent);margin:25px 0}
.anima-case .anima-hero h2{font-size:clamp(27px,3.2vw,42px);font-weight:500;line-height:1.12;letter-spacing:-.035em;color:#f6faf6;max-width:390px}
.anima-hero p:last-child{max-width:370px}
.anima-intro{display:grid;grid-template-columns:.6fr 1.5fr;gap:65px}
.anima-case .anima-intro{border:0;padding-top:15px}
.anima-intro p{margin:0}
.anima-case .anima-body h2{font-size:clamp(25px,2.7vw,36px);font-weight:500;line-height:1.14;letter-spacing:-.035em;color:var(--accent)}
.anima-case .anima-selection{margin-top:0!important;margin-bottom:65px}
.anima-performance{display:grid;grid-template-columns:.9fr 1.4fr;align-items:center;gap:65px}
.anima-expression{display:grid;grid-template-columns:1.3fr .9fr;align-items:center;gap:65px}
.anima-props-copy{max-width:720px;margin-bottom:32px}
.anima-props-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.anima-body video{display:block;background:#102c2c}
.anima-credit{font-size:12px!important;color:var(--muted);max-width:760px;margin-bottom:50px!important}
.anima-cover-title{position:absolute;z-index:2;left:7%;top:8%;display:flex;flex-direction:column;gap:9px;color:#123a39;font-size:clamp(24px,3vw,40px);font-weight:650;line-height:1;letter-spacing:-.05em;pointer-events:none;max-width:50%}
.anima-cover-title small{font:11px/1 var(--mono);letter-spacing:.15em}
.cards.list .anima-cover-title{font-size:14px}.cards.list .anima-cover-title small{display:none}
@media(max-width:800px){.anima-performance,.anima-expression{gap:30px}.anima-intro{gap:35px}}
@media(max-width:640px){
 .anima-hero{min-height:0;padding:0 20px 35px;background:none}
 .anima-hero::before{content:"";display:block;height:330px;margin:0 -20px;background:linear-gradient(0deg,#123a39,transparent 35%),url('/media/anima-background.webp') right top/auto 100%}
 .anima-hero::after{display:none}
 .anima-hero>div{max-width:none;position:relative}
 .anima-hero h1{font-size:58px;margin:20px 0}
 .anima-case .anima-hero h2{font-size:31px;max-width:none}
 .anima-hero p:last-child{max-width:none}
 .anima-intro,.anima-performance,.anima-expression,.anima-props-grid{grid-template-columns:1fr;gap:25px}
 .anima-case .anima-intro{padding-top:0}
 .anima-case .anima-selection{margin-bottom:35px}
 .anima-expression>div{order:-1}
 .anima-cover-title{font-size:35px}
}

/* Art direction pass: complete wide artwork, transparent navigation, consistent image stages. */
body:has(main.art-directed) .header::before{display:none!important}
.header .brand img{filter:drop-shadow(0 2px 4px #0006)}
.header nav a,.header .language-switch{text-shadow:0 1px 3px #0009,0 3px 12px #0005}
.header .nav-contact{box-shadow:0 2px 7px #0002}
.art-directed{--hero-focus:75% center;--hero-mobile-focus:80% center;--trace-color:#b3cbd1}
.st-case.art-directed{--trace-color:#d3897d;--hero-focus:center}
.o2-case.art-directed{--trace-color:#86d2e6;--hero-focus:right center;--hero-mobile-focus:88% center}
.hik-case.art-directed{--trace-color:#d9b26b;--hero-mobile-focus:75% center}
.moeve-case.art-directed{--trace-color:#6fd3d5;--hero-mobile-focus:85% center}
.campaign-aquarius.art-directed{--trace-color:#f1bb57;--hero-mobile-focus:85% center}
.campaign-skoda.art-directed{--trace-color:#c4c087}
.campaign-coca-cola.art-directed{--trace-color:#ec9292}
.campaign-dorminatur.art-directed{--trace-color:#88c5c8}
.monopoly-case.art-directed{--trace-color:#c5b2df;--hero-mobile-focus:68% center}
.phantom-case.art-directed{--trace-color:#beadd8;--hero-focus:center;--hero-mobile-focus:center}
.visual-case.art-directed{--trace-color:#d0b578;--hero-focus:center;--hero-mobile-focus:67% center}
.campaign-iberdrola.art-directed{--trace-color:#80c8d5;--hero-mobile-focus:78% center}
.eucerin-case.art-directed{--trace-color:#cba9b7;--hero-mobile-focus:85% center}
.anima-case.art-directed{--trace-color:#8fcbb2;--hero-mobile-focus:85% center}
.art-directed .project-hero.project-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(610px,56.25vw,900px);padding:145px max(var(--gutter),calc((100vw - 1070px)/2)) 120px;text-align:left;background:none!important}
.art-directed .project-hero::before,.art-directed .project-hero::after{display:none!important}
.project-hero .project-hero-art{position:absolute;inset:0;display:block;z-index:-1;overflow:hidden;background:var(--case-base)}
.project-hero .project-hero-art img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:var(--hero-focus);border-radius:0}
.project-hero .project-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--case-base),transparent 24%),linear-gradient(90deg,color-mix(in srgb,var(--case-base) 82%,transparent),transparent 62%)}
.art-directed .project-hero.project-hero>div{position:relative;z-index:1;max-width:510px;margin:0}
.art-directed .project-hero.project-hero h1{font-size:clamp(48px,5.7vw,86px);line-height:1.03;margin:0 0 25px;text-align:left;overflow-wrap:normal}
.art-directed .project-hero.project-hero h2{max-width:460px}
.art-directed .project-hero.project-hero p{max-width:500px}
.art-directed .project-hero.project-hero>div::after{content:"";display:block;width:96px;height:1px;margin-top:28px;background:linear-gradient(90deg,var(--trace-color) 0 70%,transparent 70% 77%,var(--trace-color) 77%);opacity:.75}
.project-flourish{display:flex;justify-content:flex-end;max-width:1200px;margin:12px auto 28px;color:var(--trace-color);opacity:.55;pointer-events:none}
.project-flourish svg{display:block;width:clamp(140px,20vw,215px);height:32px;overflow:visible}
.anima-cover-logo{position:absolute;z-index:2;left:7%;top:8%;width:39%;pointer-events:none;filter:drop-shadow(0 2px 5px #123a3970)}
.thumb-anima .anima-cover-logo img{display:block;width:100%;height:auto;object-fit:contain;transform:none!important}
@media(min-width:641px){
 .art-directed .project-hero.project-hero .o2-copy{max-width:500px}
 .st-case.art-directed .project-hero.project-hero>div{max-width:680px}
 .st-case.art-directed .project-hero.project-hero p{max-width:620px}
 .monopoly-case.art-directed .project-hero.project-hero{min-height:760px}
 .art-directed .project-hero.project-hero .o2-copy h1{font-size:100px}
}
@media(max-width:640px){
 main.art-directed{margin-top:0!important}
 .art-directed .project-hero.project-hero{display:block;min-height:0;padding:0 20px 38px}
 .project-hero .project-hero-art{position:relative;inset:auto;z-index:0;width:calc(100% + 40px);height:clamp(240px,66vw,330px);margin:0 -20px 25px;background:var(--case-base)}
 .project-hero .project-hero-art img{object-fit:cover;object-position:var(--hero-mobile-focus)}
 .project-hero .project-hero-art::after{background:linear-gradient(0deg,var(--case-base),transparent 30%)}
 .phantom-case .project-hero .project-hero-art::before{content:"";position:absolute;inset:0 0 auto;height:70px;z-index:1;background:linear-gradient(var(--case-base),transparent);pointer-events:none}
 .art-directed .project-hero.project-hero>div{max-width:none;margin:0}
 .art-directed .project-hero.project-hero h1{font-size:clamp(40px,11vw,56px);line-height:1.05;margin:0 0 20px;text-shadow:none}
 .art-directed .project-hero.project-hero h2{max-width:none}
 .art-directed .project-hero.project-hero p{max-width:none}
 .art-directed .project-hero.project-hero>div::after{margin-top:24px;width:72px}
 .project-flourish{margin-top:5px;margin-bottom:18px}
}

/* Soft side edges on wide screens; retain the clear upper artwork. */
@media(min-width:641px){
 .project-hero .project-hero-art img{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
 .project-hero .project-hero-art::after{background:linear-gradient(0deg,var(--case-base),transparent 24%),linear-gradient(90deg,color-mix(in srgb,var(--case-base) 72%,transparent),transparent 58%)}
}
/* Fine rules follow content blocks: dividers, margin ticks and open corners. */
.art-directed .trace-section{position:relative}
.art-directed .trace-section::before{content:"";position:absolute;pointer-events:none;color:var(--trace-color);opacity:.42}
.art-directed .trace-horizontal::before{top:0;left:0;width:clamp(65px,17%,190px);height:1px;background:linear-gradient(90deg,currentColor 0 76%,transparent 76% 82%,currentColor 82%);transform:translateY(-16px)}
.art-directed .trace-vertical::before{top:24px;bottom:24px;left:-18px;width:1px;max-height:160px;background:linear-gradient(currentColor 0 66%,transparent 66% 71%,currentColor 71%);opacity:.3}
.art-directed .trace-corner::before{top:-16px;right:0;width:64px;height:24px;border-top:1px solid;border-right:1px solid}
/* A compact, scrollable index instead of the previous/next pair. */
.art-directed .project-browser{clear:both;min-width:0;max-width:100%;margin:55px 0 18px;padding:28px 0 14px;border-top:1px solid color-mix(in srgb,var(--trace-color) 35%,transparent)}
.project-browser-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.art-directed .project-browser-head .label{font:10px/1.4 var(--mono);letter-spacing:.12em;margin:0 0 8px;color:var(--muted)}
.art-directed .project-browser-head h2{font:500 clamp(23px,3vw,32px)/1.1 var(--sans);letter-spacing:-.035em;margin:0;color:inherit}
.project-browser-controls{display:flex;gap:8px}
.project-browser-controls button{display:grid;place-items:center;width:38px;height:38px;border:1px solid color-mix(in srgb,var(--trace-color) 55%,transparent);border-radius:50%;color:inherit;background:transparent;cursor:pointer;transition:background .2s,border-color .2s}
.project-browser-controls button:hover:not(:disabled){background:color-mix(in srgb,var(--trace-color) 15%,transparent);border-color:var(--trace-color)}
.project-browser-controls button:disabled{opacity:.25;cursor:default}
.project-browser .project-strip{display:flex;gap:16px;list-style:none;padding:4px 3px 16px;margin:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:3px;scrollbar-width:thin;scrollbar-color:var(--trace-color) transparent}
.project-strip>li{flex:0 0 128px;min-width:0;scroll-snap-align:start}
.project-strip a{display:block;text-decoration:none;color:inherit}
.project-strip .project-mini{position:relative;display:block;aspect-ratio:1.25;overflow:hidden;border-radius:8px;outline:1px solid #ffffff18;outline-offset:0;background:#0002;transition:transform .2s,outline-color .2s}
.project-browser .project-mini img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .3s}
.project-mini::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#0007);pointer-events:none}
.project-mini-index{position:absolute;left:9px;bottom:8px;z-index:1;color:white;font:10px/1 var(--mono);text-shadow:0 1px 3px #0008}
.project-mini-current{position:absolute;right:10px;bottom:10px;width:7px;height:7px;background:var(--accent);border-radius:50%;z-index:1;box-shadow:0 0 0 3px #0004}
.project-mini-name{display:block;padding-top:11px;font-size:12px;line-height:1.35;letter-spacing:0;overflow-wrap:break-word}
.project-strip a[aria-current="page"] .project-mini{outline:2px solid var(--accent)}
.project-strip a[aria-current="page"] .project-mini-name{color:var(--accent)}
.project-strip a:hover .project-mini img{transform:scale(1.045)}
.project-browser a:focus-visible,.project-browser button:focus-visible,.project-strip:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:640px){
 .art-directed .trace-vertical::before{left:-10px;max-height:100px;opacity:.25}
 .art-directed .trace-corner::before{width:42px;height:17px}
 .art-directed .trace-horizontal::before{width:78px}
 .art-directed .project-browser{margin-top:38px;padding-top:24px}
 .project-browser .project-strip{gap:13px}
 .project-strip>li{flex-basis:112px}
 .project-browser-controls button{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.project-browser *{transition:none!important}}

/* Requested portrait clearance, official branding and readable case headings. */
.o2-cover-mark{width:19%;font-size:inherit;filter:drop-shadow(0 2px 5px #003b5a50)}
.thumb-o2 .o2-cover-mark img,.project-mini .o2-cover-mark img{width:100%;height:auto;object-fit:contain;transform:none!important;border-radius:0}
.project-mini .o2-cover-mark{left:9%;top:10%;width:21%}
.visual-case.art-directed .visual-hero{color:#fff}
.visual-case.art-directed .visual-hero h1{color:#f4e409}
.visual-case.art-directed .visual-hero h1 span{color:#fff}
.visual-case.art-directed .visual-hero>div{text-shadow:0 2px 15px #0007}
@media(max-width:640px){
 .phantom-case.art-directed .project-hero-art{height:auto;aspect-ratio:16/11}
 .phantom-case.art-directed .project-hero-art img{object-position:100% center}
 .phantom-case.art-directed .project-hero-art::before{height:42px}
 .phantom-case.art-directed .project-hero-art::after{background:linear-gradient(0deg,var(--case-base),transparent 23%)}
 .visual-case.art-directed .visual-hero>div{text-shadow:none}
}

@media(min-width:641px){
 .visual-case.art-directed .project-hero-art::after{background:linear-gradient(0deg,var(--case-base),transparent 24%),linear-gradient(90deg,#30291fe8 0%,#30291fc2 40%,transparent 67%)}
}

/* A shared oversized closing invitation, separate from the legal footer. */
.closing-contact{padding-block:clamp(65px,9vw,145px) clamp(50px,7vw,100px);color:var(--fg)}
.closing-inner{border-top:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-top:28px}
.closing-contact .label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.closing-contact h2{font-weight:500;margin:22px 0 28px}
.closing-title{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--accent);font-size:clamp(68px,12.8vw,204px);line-height:.95;letter-spacing:-.065em}
.closing-title>span{white-space:nowrap}
.closing-title svg{width:clamp(48px,9vw,135px);height:auto;flex:none;transition:transform .25s ease}
.closing-details{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:clamp(14px,1.3vw,18px);line-height:1.5}
.closing-details p{color:var(--muted)}
.closing-email{text-decoration:underline;text-decoration-color:#ffffff55;text-underline-offset:6px;overflow-wrap:anywhere}
@media(hover:hover){.closing-title:hover svg{transform:translate(6px,-6px)}.closing-email:hover{color:var(--accent)}}
.closing-title:active svg{transform:translate(3px,-3px)}
@media(max-width:640px){
 .closing-title{font-size:clamp(43px,11.2vw,72px);gap:8px}
 .closing-title svg{width:clamp(30px,9vw,48px)}
 .closing-details{align-items:flex-start;flex-direction:column;gap:12px}
 .closing-contact h2{margin:25px 0}
}
/* Progressive enhancement: motion is only armed by a working observer. */
@media(prefers-reduced-motion:no-preference){
 .scroll-reveal{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
 .scroll-reveal.reveal-pending{opacity:0;transform:translateY(18px)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}
 .closing-title svg{transition:none;transform:none!important}
}

/* Full-bleed desktop artwork: no empty side bands inside the image stage. */
@media(min-width:641px){
 .art-directed .project-hero .project-hero-art img{object-fit:cover;object-position:var(--hero-focus);mask-image:none;-webkit-mask-image:none}
 .art-directed .project-hero .project-hero-art::after{background:linear-gradient(0deg,var(--case-base),transparent 28%),linear-gradient(90deg,var(--case-base) 0%,transparent 15%,transparent 85%,var(--case-base) 100%),linear-gradient(90deg,color-mix(in srgb,var(--case-base) 78%,transparent),transparent 60%)}
 .visual-case.art-directed .project-hero-art::after{background:linear-gradient(0deg,var(--case-base),transparent 28%),linear-gradient(90deg,var(--case-base) 0%,transparent 15%,transparent 85%,var(--case-base) 100%),linear-gradient(90deg,#30291fe8 0%,#30291fc2 40%,transparent 67%)}
}

/* Neighbouring projects: anchored beside the opening text, with touch-sized controls. */
.project-side-nav{position:absolute;inset:50% 0 auto;z-index:2;display:flex;justify-content:space-between;padding-inline:clamp(12px,2vw,38px);pointer-events:none}
.project-side-nav a{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--trace-color) 55%,transparent);border-radius:50%;background:color-mix(in srgb,var(--case-base) 75%,transparent);color:var(--fg);pointer-events:auto;transition:background-color .2s,color .2s,transform .2s}
.project-side-nav svg{width:22px;height:22px}
.project-side-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:hover){.project-side-nav a:hover{background:var(--accent);border-color:var(--accent);color:#191919}.project-side-prev:hover{transform:translateX(-3px)}.project-side-next:hover{transform:translateX(3px)}}
@media(min-width:641px){
 .art-directed .project-hero.project-hero{padding-inline:max(76px,calc((100vw - 1070px)/2))}
 .o2-case.art-directed .project-hero .project-hero-art{inset:88px 0 0}
 .o2-case.art-directed .project-hero .project-hero-art img{object-position:right top}
 .o2-case.art-directed .project-hero .project-hero-art::before{content:"";display:block;position:absolute;inset:0 0 auto;height:65px;z-index:1;pointer-events:none;background:linear-gradient(var(--case-base),transparent)}
}
@media(max-width:640px){
 .project-side-nav{position:relative;inset:auto;padding:0;margin:-8px 0 22px}
 .project-side-nav a{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.project-side-nav a{transition:none;transform:none!important}}

/* A few production notes and physical stages, using the original transparent renders. */
main .studio-note{position:relative;display:flex;align-items:center;gap:10px;width:100%;margin:0 0 18px;font:10px/1.5 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--trace-color)}
.studio-note::before{content:"";width:5px;height:5px;border:1px solid currentColor;border-radius:50%;flex:none}
.studio-note::after{content:"";height:18px;width:clamp(35px,6vw,70px);border-top:1px solid currentColor;border-right:1px solid currentColor;transform:skewX(-25deg) translateY(9px);opacity:.6;flex:none;margin-left:2px}
.annotated-study{padding-top:10px}
.cutout-display{position:relative;isolation:isolate;overflow:visible;padding:0 16px 24px;align-self:center}
.cutout-display::before{content:"";position:absolute;inset:22% 0 10%;z-index:-1;border:1px solid color-mix(in srgb,var(--trace-color) 35%,transparent);border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--trace-color) 9%,transparent),transparent 80%);pointer-events:none}
.cutout-display::after{content:"";position:absolute;right:12px;bottom:calc(10% - 5px);width:44px;height:10px;background:var(--case-base);border-block:1px solid var(--trace-color);opacity:.65;pointer-events:none;z-index:-1}
.cutout-display>picture{display:block;position:relative;width:100%}
.o2-case.case-editorial .o2-beyond>.o2-object{grid-column:2;grid-row:1;max-width:390px;width:100%;justify-self:center}
.o2-case.case-editorial .o2-object img{width:100%;height:auto;filter:drop-shadow(0 15px 12px #0002)}
.iberdrola-detail .mupi-object{width:100%;padding-top:0;padding-bottom:30px}
.iberdrola-detail .mupi-object .image-zoom{width:100%;position:relative}
.iberdrola-detail .mupi-object .iberdrola-mupi{margin-inline:auto;filter:drop-shadow(0 15px 12px #0003)}
.mupi-object figcaption{position:relative;z-index:1;max-width:90%;text-align:center}
.iberdrola-fooh-video .studio-note{margin-bottom:20px}
@media(max-width:640px){
 .o2-case.case-editorial .o2-beyond>.o2-object{max-width:310px;margin:15px auto 0}
 .cutout-display{padding-inline:12px}
 main .studio-note{font-size:9px!important;letter-spacing:.04em}
 .studio-note::after{width:35px;height:14px}
}
/* Brief native cross-document fades between projects. No interception of links. */
::view-transition-old(root){animation:project-departure .17s ease both}
::view-transition-new(root){animation:project-arrival .23s ease both}
@keyframes project-departure{to{opacity:0}}
@keyframes project-arrival{from{opacity:0}to{opacity:1}}
@supports not (view-transition-name:none){
 @media(prefers-reduced-motion:no-preference){body:has(main.art-directed) main{animation:project-arrival .23s ease both}}
}
@media(prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Phantom uses the portfolio's yellow heading and white introductory copy. */
.phantom-case.art-directed .phantom-hero{color:#fff}
.phantom-case.art-directed .phantom-hero h1{color:var(--accent)}
.phantom-case.art-directed .phantom-hero h1 span,.phantom-case.art-directed .phantom-hero p{color:#fff}
@media(min-width:641px){
 .phantom-case.art-directed .project-hero-art::after{background:linear-gradient(0deg,var(--case-base),transparent 28%),linear-gradient(90deg,var(--case-base) 0%,transparent 15%,transparent 85%,var(--case-base) 100%),linear-gradient(90deg,#282034ed 0%,#282034bd 40%,transparent 72%)}
}