:root {
  --black:#0a0a0a;
  --muted:#666;
  --line:#d8d8d8;
  --pad:clamp(24px,5vw,82px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--black);
  background:#fff;
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,video{width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.rule{border-top:1px solid var(--line)}

header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  height:80px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{width:58px;height:58px;object-fit:contain;mix-blend-mode:multiply}
.back{font-size:11px;letter-spacing:.14em;text-transform:uppercase}

.hero{
  min-height:82vh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:clamp(72px,9vw,138px);
  padding-bottom:48px;
}
.hero h1{
  max-width:1200px;
  margin:18px 0 0;
  font-size:clamp(58px,9.3vw,146px);
  line-height:.95;
  letter-spacing:-.03em;
  font-weight:800;
}
.hero-bottom{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:64px;
  align-items:end;
  margin-top:92px;
}
.hero-lead{
  max-width:850px;
  font-size:clamp(22px,2.3vw,34px);
  line-height:1.36;
}
.hero-meta{
  justify-self:end;
  text-align:right;
  font-size:12px;
  line-height:1.9;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.about{
  padding-top:110px;
  padding-bottom:110px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:88px;
}
.about h2,.what h2,.media-copy h2,.film-copy h2{
  margin:14px 0 0;
  font-size:clamp(42px,5.1vw,80px);
  line-height:1;
  letter-spacing:-.025em;
}
.about p,.what p,.media-copy p,.film-copy p{
  margin:0;
  font-size:19px;
  line-height:1.75;
  color:#3d3d3d;
}

.visual{
  padding:0 var(--pad) 120px;
}
.visual img{
  border:1px solid #ececec;
}

.what{
  padding-top:110px;
  padding-bottom:110px;
}
.what-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:88px;
  margin-bottom:64px;
}
.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--black);
  border-left:1px solid var(--black);
}
.service{
  min-height:180px;
  padding:28px;
  border-right:1px solid var(--black);
  border-bottom:1px solid var(--black);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.service .n{font-size:11px;letter-spacing:.15em}
.service h3{font-size:23px;line-height:1.15;margin:0;font-weight:600}

.media-section{
  padding-top:110px;
  padding-bottom:110px;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:72px;
  align-items:start;
}
.media-visual img{border:1px solid #ececec}

.film{
  padding-top:110px;
  padding-bottom:110px;
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:72px;
  align-items:start;
}
.video-wrap{border:1px solid var(--black);background:#000}

.outcome{
  background:var(--black);
  color:#fff;
  padding:116px var(--pad);
}
.outcome h2{
  max-width:1120px;
  margin:16px 0 0;
  font-size:clamp(56px,7vw,108px);
  line-height:.96;
  letter-spacing:-.03em;
}
.outcome p{
  max-width:760px;
  margin:36px 0 0;
  font-size:20px;
  line-height:1.65;
  color:#ddd;
}
footer{
  background:var(--black);
  color:#fff;
  border-top:1px solid #252525;
  padding:28px var(--pad);
  display:flex;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media(max-width:900px){
  .hero-bottom,.about,.what-head,.media-section,.film{grid-template-columns:1fr}
  .hero-meta{justify-self:start;text-align:left}
  .services{grid-template-columns:1fr 1fr}
  .hero{min-height:auto}
}
@media(max-width:560px){
  .services{grid-template-columns:1fr}
}

html{scroll-padding-top:100px}
:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:#0a0a0a;color:#fff;padding:14px;font-size:14px}
.skip-link:focus{top:12px}
.claim-note{font-size:12px;color:#666;line-height:1.6;margin-top:20px}
.services.count-2{grid-template-columns:repeat(2,1fr)}
.services.count-3{grid-template-columns:repeat(3,1fr)}
.service .service-detail{font-size:14px;line-height:1.65;color:#666;margin:18px 0 0}
.service h3{margin-top:25px}
.visual img,.media-visual img,video{filter:grayscale(1)}
.visual figcaption,.media-visual figcaption,.film figcaption{font-size:11px;color:#666;line-height:1.6;margin-top:16px}
figure{margin:0}
.outcome .contact-row{display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:65px}
.outcome .contact-row p{font-size:20px;margin:0;max-width:700px}
.case-contact{font-size:28px;border-bottom:1px solid #fff;padding-bottom:6px;white-space:nowrap}
footer a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.services.count-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
 .services.count-2,.services.count-3{grid-template-columns:1fr}
 .hero h1{font-size:clamp(48px,10.5vw,58px)}
 .hero-bottom{margin-top:55px;gap:30px}
 .outcome{padding-block:80px}
 .outcome h2{font-size:clamp(43px,10.5vw,58px)}
 .about,.what,.media-section,.film{padding-top:75px;padding-bottom:75px;gap:35px}
 .visual{padding-bottom:75px}
 footer{gap:22px;flex-wrap:wrap;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}