:root{
  --cream:#f1ece1;
  --coral:#f0918b;
  --ink:#141414;
  --mono:'IBM Plex Mono',monospace;
  --rule:2px solid var(--ink);
  --pad:clamp(20px,4vw,56px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--coral)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.meta{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
nav{position:sticky;top:0;z-index:100;background:var(--cream);display:flex;justify-content:space-between;align-items:center;padding:26px var(--pad)}
.wordmark{font-size:15px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
nav ul{display:flex;gap:clamp(18px,3vw,44px);list-style:none;align-items:center}
nav ul a{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .2s}
nav ul a:hover{border-color:var(--ink)}
nav ul a .arr{display:inline-block;margin-left:6px;transition:transform .2s}
nav ul a:hover .arr{transform:translate(2px,-2px)}
header.hero{background:var(--coral);border-top:var(--rule);border-bottom:var(--rule);padding:clamp(70px,12vh,130px) var(--pad) clamp(40px,7vh,70px);display:flex;flex-direction:column;justify-content:space-between;min-height:min(88svh,900px)}
h1.home{font-weight:500;text-transform:uppercase;font-size:clamp(34px,6.4vw,96px);line-height:1.22;letter-spacing:.04em;max-width:18ch}
h1 .line{display:block;overflow:hidden}
h1 .line span{display:block;transform:translateY(110%);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
h1 .line:nth-child(2) span{animation-delay:.1s}
h1 .line:nth-child(3) span{animation-delay:.2s}
@keyframes rise{to{transform:translateY(0)}}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(48px,9vh,90px)}
.hero-meta .left{display:flex;flex-direction:column;gap:6px}
section{padding:clamp(70px,10vh,120px) var(--pad)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(30px,5vh,54px)}
h2{font-size:clamp(24px,3.6vw,44px);font-weight:600;text-transform:uppercase;letter-spacing:.08em;line-height:1.1}
.count{font-size:12px;letter-spacing:.2em}
.work-list{border-top:var(--rule)}
.work-row{display:grid;grid-template-columns:44px minmax(110px,190px) 1fr auto;gap:clamp(12px,2.6vw,36px);align-items:baseline;padding:clamp(18px,3vh,26px) 10px;border-bottom:var(--rule);transition:background .18s}
.work-row:hover{background:var(--coral)}
.work-row .idx{font-size:12px;letter-spacing:.1em}
.work-row .client{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.work-row .title{font-size:clamp(17px,2.3vw,27px);font-weight:500;text-transform:uppercase;letter-spacing:.05em;line-height:1.25}
.work-row .type{font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-align:right}
.clients{border-top:var(--rule);border-bottom:var(--rule);overflow:hidden;padding:16px 0;background:var(--cream)}
.ticker{display:flex;width:max-content;animation:scroll 36s linear infinite}
.ticker span{font-size:13px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;padding:0 30px;white-space:nowrap}
.ticker span::after{content:"+";margin-left:60px;color:var(--coral);-webkit-text-stroke:.5px var(--ink)}
@keyframes scroll{to{transform:translateX(-50%)}}
.studio-grid{display:grid;grid-template-columns:minmax(280px,1fr) 1.4fr;border:var(--rule)}
.studio-def{background:var(--coral);padding:clamp(28px,4vw,54px);border-right:var(--rule);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.studio-def .word{font-size:clamp(28px,3.6vw,44px);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.studio-def .pron{font-style:italic;font-size:14px;margin-top:8px}
.studio-def .meaning{font-size:14px;margin-top:18px;max-width:34ch}
.studio-copy{padding:clamp(28px,4vw,54px)}
.studio-copy .lead{font-size:clamp(17px,2vw,23px);font-weight:500;line-height:1.5;text-transform:uppercase;letter-spacing:.04em;margin-bottom:26px}
.studio-copy p{max-width:58ch;margin-bottom:18px}
.studio-copy p strong{font-weight:600}
.quote{background:var(--coral);border-top:var(--rule);border-bottom:var(--rule)}
blockquote{font-size:clamp(17px,2.4vw,26px);line-height:1.55;max-width:44ch;font-weight:400}
blockquote::before{content:"\201C  ";font-weight:600}
blockquote::after{content:" \201D";font-weight:600}
.quote cite{display:block;margin-top:30px;font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:2}
.quote cite b{font-weight:600}
.contact h2{font-size:clamp(34px,7vw,92px);letter-spacing:.05em;line-height:1.15;margin-bottom:clamp(30px,6vh,60px);max-width:16ch}
.email-link{display:inline-block;font-size:clamp(15px,2vw,22px);font-weight:500;letter-spacing:.06em;border-bottom:2px solid var(--ink);padding-bottom:4px;transition:background .18s}
.email-link:hover{background:var(--coral)}
footer{border-top:var(--rule);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:24px var(--pad)}
footer .small{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
footer .socials{display:flex;gap:26px}
footer .socials a{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid transparent;transition:border-color .2s}
footer .socials a:hover{border-color:var(--ink)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===== project pages ===== */
header.project{background:var(--coral);border-top:var(--rule);border-bottom:var(--rule);padding:clamp(56px,9vh,100px) var(--pad) clamp(36px,6vh,60px)}
.crumb{display:flex;justify-content:space-between;margin-bottom:clamp(30px,6vh,60px)}
.crumb a{border-bottom:2px solid transparent}
.crumb a:hover{border-color:var(--ink)}
h1.project-title{font-weight:500;text-transform:uppercase;font-size:clamp(32px,5.6vw,84px);line-height:1.15;letter-spacing:.04em;max-width:16ch}
.project-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(36px,7vh,70px)}
.film{padding:clamp(50px,8vh,90px) var(--pad)}
.film-frame{border:var(--rule);aspect-ratio:16/9;position:relative;background:var(--ink);overflow:hidden}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-frame .placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--cream);text-align:center;padding:20px}
.film-frame .placeholder .meta{color:var(--coral)}
.film-frame .placeholder p{font-size:12px;letter-spacing:.06em;max-width:44ch;opacity:.75}
.case{padding-top:0}
.case .lead{font-size:clamp(18px,2.4vw,26px);font-weight:500;line-height:1.5;letter-spacing:.02em;max-width:36ch;margin-bottom:clamp(40px,7vh,70px)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);border:var(--rule)}
.case-cell{padding:clamp(24px,3.4vw,44px)}
.case-cell + .case-cell{border-left:var(--rule)}
.case-cell .meta{display:block;margin-bottom:18px;color:var(--ink)}
.case-cell .meta::before{content:"";display:inline-block;width:10px;height:10px;background:var(--coral);border:2px solid var(--ink);margin-right:10px;vertical-align:baseline}
.case-cell p{font-size:14px}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule)}
.pn a{padding:clamp(24px,4vh,40px) var(--pad);transition:background .18s}
.pn a:hover{background:var(--coral)}
.pn a .meta{display:block;margin-bottom:10px}
.pn a .pn-title{font-size:clamp(16px,2vw,24px);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.pn a.next{text-align:right;border-left:var(--rule)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}h1 .line span{transform:none}.reveal{opacity:1;transform:none}}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}.case-cell + .case-cell{border-left:none;border-top:var(--rule)}}
@media(max-width:820px){.studio-grid{grid-template-columns:1fr}.studio-def{border-right:none;border-bottom:var(--rule)}}
@media(max-width:700px){
  .work-row{grid-template-columns:34px 1fr auto;grid-template-areas:"idx client type" "idx title title"}
  .work-row .idx{grid-area:idx}.work-row .client{grid-area:client}.work-row .title{grid-area:title}.work-row .type{grid-area:type}
  .hero-meta,.project-meta{flex-direction:column;align-items:flex-start;gap:14px}
  nav ul li:nth-child(2){display:none}
  .pn{grid-template-columns:1fr}.pn a.next{text-align:left;border-left:none;border-top:var(--rule)}
}

/* ===== expanded case studies ===== */
.case-section{padding-top:0}
.case-section + .case-section{padding-top:clamp(30px,5vh,60px)}
.case-intro{display:grid;grid-template-columns:minmax(220px,.55fr) 1.45fr;gap:clamp(28px,6vw,90px);align-items:start;margin-bottom:clamp(34px,6vh,64px)}
.case-intro h2{font-size:clamp(21px,3vw,38px)}
.case-intro p{max-width:62ch;font-size:clamp(15px,1.4vw,18px)}
.image-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:var(--rule);border-left:var(--rule)}
.image-grid figure{border-right:var(--rule);border-bottom:var(--rule);background:var(--ink);overflow:hidden}
.image-grid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.image-grid figure:hover img{transform:scale(1.015)}
.image-grid .wide{grid-column:1/-1}
.image-grid .wide img{aspect-ratio:2.25/1}
.case-note{max-width:72ch;margin-top:clamp(28px,4vh,44px);font-size:14px}
.case-note .meta{display:block;margin-bottom:12px}
.credits{padding-top:0}
.credits-grid{display:grid;grid-template-columns:repeat(3,1fr);border:var(--rule)}
.credit-col{padding:clamp(24px,3vw,40px)}
.credit-col + .credit-col{border-left:var(--rule)}
.credit-col p{font-size:13px;margin-bottom:13px}
.credit-col p:last-child{margin-bottom:0}
.credit-col strong{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:2px}
.press-link{display:inline-block;margin-top:20px;border-bottom:2px solid var(--ink);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:900px){.case-intro{grid-template-columns:1fr}.credits-grid{grid-template-columns:1fr}.credit-col + .credit-col{border-left:none;border-top:var(--rule)}}
@media(max-width:700px){.image-grid{grid-template-columns:1fr}.image-grid .wide{grid-column:auto}.image-grid .wide img{aspect-ratio:16/9}}
.capabilities{padding-top:0}
.capabilities-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule);border-left:var(--rule)}
.capabilities-grid span{display:flex;align-items:center;min-height:96px;padding:clamp(20px,3vw,34px);border-right:var(--rule);border-bottom:var(--rule);font-size:clamp(14px,1.35vw,18px)}
@media(max-width:900px){.capabilities-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.capabilities-grid{grid-template-columns:1fr}.capabilities-grid span{min-height:74px}}

/* ===== Honda final-pixel composites ===== */
.final-pixel-composites{grid-template-columns:1fr}
.final-pixel-composites figure{aspect-ratio:auto}
.final-pixel-composites img{width:100%;height:auto;aspect-ratio:2240/624;object-fit:contain}