:root{--carbon:#101114;--ivory:#f3f1eb;--sage:#b5c9a7;--slate:#777d83;--copper:#c68b63;--gutter:clamp(20px,5.2vw,90px);--mono:ui-monospace,SFMono-Regular,Consolas,monospace;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--carbon);color:var(--ivory);font:16px/1.5 "Helvetica Neue",Arial,sans-serif}
h1,h2,p,ol,ul{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer;color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}
[hidden]{display:none!important}
.shell{width:min(100% - var(--gutter) * 2,1440px);margin-inline:auto}
.skip{position:fixed;z-index:10;left:12px;top:12px;padding:12px;background:var(--sage);color:var(--carbon);translate:0 -160%}
.skip:focus{translate:0}
.header{position:relative;z-index:2;border-bottom:1px solid #ffffff20}
.bar{height:75px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px}
.brand{font-size:clamp(1.05rem,1.55vw,1.45rem);font-weight:900;letter-spacing:-.07em;white-space:nowrap;width:fit-content;line-height:1.05}
.brand{display:block}
.bar,.footer-identity{--brand-line-gap:4px}
.brand-word{display:block}
.brand-subtitle{display:flex;justify-content:space-between;margin-top:var(--brand-line-gap);color:var(--ivory);font-size:.55em;font-weight:650;letter-spacing:normal}
.brand-space{width:.35em}
.nav,.utilities,.languages{display:flex;align-items:center}
.nav{gap:clamp(20px,3vw,50px)}
.nav a,.head-contact{font-size:.86rem;font-weight:650}
.nav a:hover,.back:hover,.languages a:hover{color:var(--sage)}
.utilities{justify-self:end;gap:clamp(13px,2.4vw,32px)}
.languages{gap:8px;font: .72rem var(--mono);color:#b4b7b8;white-space:nowrap}
.languages a{padding-block:14px}
.languages [aria-current]{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:5px}
.head-contact{display:flex;align-items:center;gap:14px;border:1px solid #ffffff40;padding:9px 13px;white-space:nowrap}
.head-contact:hover{background:var(--sage);color:var(--carbon)}
.menu{display:none}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-image{object-fit:cover;object-position:58% center}
.hero-shade{z-index:-1;background:linear-gradient(90deg,#101114ee 0%,#1011149e 49%,#10111415 100%),linear-gradient(0deg,#101114b8,transparent 30%)}
.hero-inner{position:relative;min-height:clamp(560px,calc(87svh - 76px),780px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:60px 0 102px}
.eyebrow,.micro,.number,.marker{font:600 .69rem/1.5 var(--mono);letter-spacing:.105em;text-transform:uppercase}
.hero-location{display:flex;gap:10px;align-items:center;color:var(--sage);margin-bottom:29px}
.signal{width:7px;height:7px;border-radius:50%;background:var(--sage);flex:none}
h1,h2{font-weight:760;letter-spacing:-.068em;line-height:.97;text-wrap:balance}
h1{font-size:clamp(3rem,6.4vw,7rem);max-width:1100px;text-wrap:initial}
.hero-intro{color:#e4e4dd;max-width:46ch;font-size:clamp(.98rem,1.45vw,1.22rem);margin:25px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;gap:18px;align-items:center;justify-content:space-between;border:1px solid transparent;min-height:47px;padding:11px 16px;font-size:.85rem;font-weight:730;background:transparent}
.primary{background:var(--sage);color:var(--carbon)}
.primary:hover{background:var(--ivory);color:var(--carbon)}
.play{border-color:#ffffff66;color:var(--ivory)}
.play:hover{background:var(--ivory);color:var(--carbon)}
.play-icon{font-size:.64rem}
.hero-caption{position:absolute;bottom:31px;left:0;right:0;display:flex;justify-content:space-between;gap:12px;color:#e3e3da}
.viewfinder{position:absolute;inset:19px -14px;pointer-events:none}
.viewfinder i{position:absolute;width:12px;height:12px;border:solid #f3f1eb66;border-width:0}
.viewfinder i:nth-child(1){inset:0 auto auto 0;border-top-width:1px;border-left-width:1px}
.viewfinder i:nth-child(2){inset:0 0 auto auto;border-top-width:1px;border-right-width:1px}
.viewfinder i:nth-child(3){inset:auto auto 0 0;border-bottom-width:1px;border-left-width:1px}
.viewfinder i:nth-child(4){inset:auto 0 0 auto;border-bottom-width:1px;border-right-width:1px}
.clients{background:#181a1c;border-top:1px solid #ffffff20}
.clients-inner{padding:25px 0 20px;display:grid;grid-template-columns:minmax(155px,.23fr) minmax(0,1fr);gap:12px 4vw;align-items:center}
.clients h2{color:var(--sage)}
.brands{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px}
.brands li{font-weight:700;font-size:clamp(.86rem,1.35vw,1.17rem);letter-spacing:-.04em}
.client-note{grid-column:2;color:#b4b7b8;font-size:.74rem}
.section{padding:clamp(60px,8.5vw,132px) 0}
.light{background:var(--ivory);color:var(--carbon);color-scheme:light}
.section-index{margin-bottom:23px}
.light .section-index{color:#464d46}
h2{font-size:clamp(2.75rem,5.5vw,6rem)}
.section-heading{display:grid;grid-template-columns:1fr minmax(220px,.41fr);gap:24px 6vw;align-items:end;margin-bottom:38px}
.section-heading p{max-width:40ch;color:#44484a}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:39px 22px}
.project-open{display:block;width:100%;border:0;background:none;padding:0;text-align:left}
.frame{display:block;position:relative;aspect-ratio:14/9;overflow:hidden;background:#2e3735;color:var(--ivory);isolation:isolate}
.frame::before{content:"";position:absolute;inset:0;z-index:-1;background:url("work.svg") 0 0/200% 200% no-repeat;transition:transform .35s ease}
.frame-1::before{background-position:100% 0}
.frame-2::before{background-position:0 100%}
.frame-3::before{background-position:100% 100%}
.project-open:hover .frame::before{transform:scale(1.035)}
.marker{position:absolute;padding:5px 8px;background:var(--carbon)}
.marker{bottom:12px;left:12px}
.project-meta{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid #10111430}
.project-meta strong{display:block;font-size:clamp(1.15rem,2.1vw,1.8rem);letter-spacing:-.047em}
.project-meta small{display:block;color:#494e50;margin-top:2px}
.arrow{align-self:center;border:1px solid #10111444;border-radius:50%;display:grid;place-items:center;width:40px;height:40px;flex:none}
.project-open:hover .arrow{background:var(--carbon);color:var(--ivory)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.dark .section-index,.number{color:var(--sage)}
.service-list{border-top:1px solid var(--slate);align-self:end}
details{border-bottom:1px solid #ffffff37}
summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px 1fr 24px;align-items:center;gap:11px;padding:20px 0}
summary::-webkit-details-marker{display:none}
summary strong{font-size:clamp(1.12rem,2vw,1.65rem);line-height:1.2;letter-spacing:-.035em}
summary:hover strong{color:var(--sage)}
.plus{width:15px;height:15px;position:relative;justify-self:center}
.plus::before,.plus::after{content:"";position:absolute;top:7px;width:15px;height:1px;background:currentColor}
.plus::after{rotate:90deg}
details[open] .plus::after{display:none}
details p{margin:0 24px 20px 39px;color:#c3c6c5;max-width:49ch}
.steps{padding:0;display:grid;grid-template-columns:repeat(3,1fr);list-style:none;gap:22px}
.steps li{border-top:1px solid #10111445;padding-top:17px}
.steps .number{color:#474e46}
.steps strong{display:block;margin-top:16px;font-size:clamp(1.2rem,2.25vw,1.8rem);letter-spacing:-.04em}
.steps p{margin-top:5px;color:#44484a}
.contact{background:var(--sage);color:var(--carbon);color-scheme:light}
.contact-grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:26px}
.contact h2{max-width:15ch}
.contact p:not(.section-index){margin-top:20px}
.contact-button{background:var(--carbon);color:var(--ivory)}
.contact-button:hover{background:#343839}
footer{border-top:2px solid var(--copper)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:39px 0 48px}
.footer-identity{width:max-content}
.footer-cities{display:flex;justify-content:space-between;width:0;min-width:100%;margin-top:var(--brand-line-gap);color:#bec0bf;font-size:.64rem;line-height:1.05;white-space:nowrap}
.back{padding:8px 0;font-size:.84rem;white-space:nowrap}
dialog{width:min(690px,100% - 32px);max-height:calc(100% - 32px);overflow:auto;background:var(--carbon);color:var(--ivory);border:1px solid var(--slate);padding:clamp(16px,3vw,28px)}
dialog::backdrop{background:#08090bdd}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}
.dialog-head h2{font-size:clamp(1.6rem,4vw,2.5rem);text-wrap:initial}
.close,.dialog-controls button{background:transparent;border:1px solid var(--slate);min-width:44px;min-height:44px}
.close{font-size:1.5rem}
dialog .frame{aspect-ratio:16/9}
dialog p{margin-top:12px}
.dialog-controls{display:flex;gap:10px;margin-top:12px}
.dialog-controls button{padding:7px 12px}
.dialog-note,#brief-note{color:#c6c7c5;font-size:.88rem}
dialog video{width:100%;max-height:65vh}
dialog:has(video) .demo-reel{display:none}
#brief-form{display:grid;gap:13px;margin-top:18px}
#brief-form label{display:grid;gap:5px}
#brief-form input,#brief-form textarea{width:100%;color:var(--ivory);background:#1d1f22;border:1px solid var(--slate);padding:10px}
#brief-form button{justify-self:start}
#brief-status:empty{display:none}
@media(max-width:900px){
 .clients-inner{grid-template-columns:1fr;gap:11px}
 .client-note{grid-column:1}
}
@media(max-width:720px){
 .bar{height:64px;display:flex;justify-content:space-between;gap:12px}
 .head-contact{display:none}
 .menu{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:none;border:0;padding:0 0 0 8px;font-size:.8rem}
 .menu span{font-size:1.13rem}
 .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carbon);border-bottom:1px solid var(--slate);padding:5px var(--gutter) 17px}
 .nav.is-open{display:grid;gap:0}
 .nav a{display:block;padding:12px 0;border-bottom:1px solid #ffffff25}
 .hero-inner{min-height:530px;padding:56px 0 78px}
 .hero-image{object-position:63% center}
 .hero-shade{background:linear-gradient(90deg,#101114cf,#10111465),linear-gradient(0deg,#101114ba,transparent 45%)}
 .hero-location{margin-bottom:19px}
 h1{font-size:clamp(2.65rem,9vw,4.3rem);letter-spacing:-.065em}
 .hero-intro{margin:19px 0 25px}
 .hero-caption{bottom:26px;font-size:.57rem}
 .viewfinder{inset:13px -8px}
 .brands{grid-template-columns:1fr 1fr}
 .section-heading,.split,.contact-grid{grid-template-columns:1fr}
 .section-heading{margin-bottom:25px;gap:14px}
 .split{gap:28px}
 .projects{grid-template-columns:1fr;gap:22px}
 .steps{grid-template-columns:1fr;gap:16px}
 .steps strong{margin-top:4px}
 .contact-button{justify-self:start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
/* Keep long bilingual headings and service names within narrow grid tracks. */
h2,summary strong{overflow-wrap:anywhere}
.section-heading>*,.split>*,.contact-grid>*{min-width:0}
@media(max-width:720px){
 .section-heading,.split,.contact-grid{grid-template-columns:minmax(0,1fr)}
}

.creator-inner{border-top:1px solid #ffffff25}
.creator-inner h2{color:#dadbd5}
.creator-inner .brands li{font-size:.9rem;font-weight:550}

.direct-brands{grid-auto-flow:column;grid-template-rows:repeat(var(--direct-rows-desktop),auto)}
@media(max-width:720px){
 .direct-brands{grid-template-rows:repeat(var(--direct-rows-mobile),auto)}
}

.hero-motion{opacity:0}
.hero-motion.is-playing{opacity:1}
.hero-caption{align-items:center;flex-wrap:wrap}
.motion-control{padding:5px 8px;border:1px solid #ffffff66;background:var(--carbon);font:inherit;text-transform:inherit}
.hero:has(.hero-motion) .hero-shade{background:linear-gradient(90deg,#101114ed,#101114b5 47%,#10111435),linear-gradient(0deg,#101114c9,transparent 32%)}
.film-credit{font-size:.85rem;color:#c6c7c5}
#reel:not(:has(video)) .film-credit{display:none}
@media(max-width:720px){
 .hero:has(.hero-motion) .hero-shade{background:linear-gradient(90deg,#101114df,#10111485),linear-gradient(0deg,#101114c9,transparent 44%)}
 .hero-caption{bottom:23px;gap:6px 12px}
 .motion-control{min-height:28px}
}

.project-cover::before{display:none}
.project-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.project-open:hover .project-cover img{transform:scale(1.035)}
.project-title{display:block;margin-top:8px;color:#363a3b;font-size:.88rem}
#case{width:min(850px,100% - 32px)}
.case-category{color:var(--sage)}
#case-content h3{margin:5px 0 0;font-size:clamp(1.25rem,4vw,2.1rem);line-height:1.1;letter-spacing:-.035em}
.case-description{max-width:64ch;color:#e0e1d9}
#case-content video,.case-gallery{margin-top:18px}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.case-gallery img{display:block;width:100%;height:auto}
@media(max-width:540px){.case-gallery{grid-template-columns:1fr}}

.project-featured{grid-column:1/-1}
@media(min-width:721px){
 .project-featured .frame{aspect-ratio:2.4/1}
}

.case-gallery-subaru img:first-child,
.case-gallery-mitsubishi img:nth-child(9){grid-column:1/-1}

@media(min-width:541px){
 .case-gallery-gubelin{grid-template-columns:repeat(6,minmax(0,1fr))}
 .case-gallery-gubelin img{grid-column:span 3}
 .case-gallery-gubelin img:nth-child(n+3):nth-child(-n+5),
 .case-gallery-gubelin img:nth-child(n+7):nth-child(-n+9),
 .case-gallery-gubelin img:nth-child(n+11){grid-column:span 2}
 .case-gallery-gubelin img:nth-child(6),
 .case-gallery-gubelin img:nth-child(10){grid-column:1/-1}
}

.footer-phone{display:block;width:fit-content;margin-top:10px;color:var(--ivory);font-size:.73rem;white-space:nowrap}
.footer-phone:hover{text-decoration:underline}