:root {
  --red: #e30613; --black: #111317; --gray: #66686d; --soft: #f3f3f1;
  --line: #d8d8d5; --white: #fff;
  font-family: Arial, Helvetica, sans-serif; color: var(--black); background: var(--white); scroll-behavior: smooth;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--white); color: var(--black); }
img { display: block; width: 100%; }
a { color: inherit; }
button { font: inherit; }
:is(a, button):focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 14px clamp(24px,4vw,64px); border-bottom: 1px solid rgba(17,19,23,.12); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.brand img { width: clamp(180px,18vw,235px); height: auto; }
.site-header nav, footer nav { display: flex; align-items: center; gap: clamp(20px,3vw,42px); }
.site-header nav a, footer nav a { text-decoration: none; font-size: .75rem; letter-spacing: .04em; }
.site-header nav a:hover, .site-header nav a:focus-visible, footer nav a:hover { color: var(--red); }
.menu-toggle { display: none; border: 0; background: none; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
main, footer { width: min(1540px,100%); margin: 0 auto; }
.hero { display: grid; grid-template-columns: 41% 59%; min-height: min(760px,calc(100vh - 74px)); border-bottom: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(60px,7vw,112px) clamp(24px,4vw,64px); }
.kicker, .section-bar p, .clients > p { margin: 0; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
.kicker span, .section-bar p span, .clients > p span { display: inline-block; width: 26px; height: 2px; margin-right: 13px; background: var(--red); vertical-align: middle; }
h1 { margin: 34px 0 22px; font-size: clamp(3.8rem,6.3vw,7.25rem); line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
h1 em, .studio-statement h2 em { color: var(--red); font-style: normal; }
.disciplines { margin: 0 0 25px; color: var(--gray); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.disciplines b { margin: 0 .65em; color: var(--red); }
.hero-intro { max-width: 480px; margin: 0 0 34px; color: var(--gray); font-size: 1rem; line-height: 1.55; }
.arrow-link, .section-bar a { width: max-content; padding-bottom: 8px; border-bottom: 1px solid; text-decoration: none; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.arrow-link span, .section-bar a span { margin-left: 16px; color: var(--red); font-size: 1rem; }
.hero-visual { min-height: 520px; margin: 0; overflow: hidden; background: #e7e6e2; }
.hero-visual img { height: 100%; object-fit: cover; object-position: 52% center; }
.work { padding: 0 clamp(24px,3vw,48px) clamp(80px,8vw,130px); }
.section-bar { display: flex; justify-content: space-between; align-items: center; min-height: 72px; border-bottom: 1px solid var(--line); }
.section-bar a { border-bottom: 0; }
.case-row { display: grid; grid-template-columns: 28% 72%; min-height: 390px; border-bottom: 8px solid var(--white); background: var(--soft); }
.case-copy { position: relative; display: flex; flex-direction: column; padding: 28px 30px 22px 22px; }
.case-copy small { color: var(--red); font-size: .72rem; }
.case-copy h3 { margin: 4px 0 5px; font-size: clamp(2.2rem,4.1vw,4.2rem); line-height: .95; letter-spacing: -.055em; }
.case-meta { margin: 0 0 20px; color: var(--gray); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.case-copy > p:not(.case-meta) { max-width: 290px; margin: 0; color: var(--gray); font-size: .9rem; line-height: 1.45; }
.case-link { margin-top: auto; padding: 0; border: 0; background: transparent; text-align: left; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.case-link span { margin-left: 14px; color: var(--red); font-size: 1rem; }
.case-media { display: grid; grid-template-columns: 1fr 1fr; min-height: 390px; padding: 0; border: 0; overflow: hidden; background: #ddd; cursor: pointer; }
.case-media img { height: 100%; min-height: 390px; object-fit: cover; transition: transform .45s ease; }
.case-media:hover img { transform: scale(1.018); }
.sony-composition { position: relative; display: block; background: radial-gradient(circle at 28% 20%,#daf5f5 0,#9cd3d4 40%,#6ba8ad 100%); }
.sony-composition::before { content: "∞"; position: absolute; right: 3%; top: -16%; color: rgba(255,255,255,.16); font-size: clamp(18rem,34vw,35rem); font-weight: 700; line-height: 1; }
.sony-composition img { position: absolute; min-height: 0; object-fit: contain; box-shadow: 0 24px 55px rgba(23,61,64,.24); }
.sony-composition .sony-interface { z-index: 2; left: 6%; top: 6%; width: 88%; height: 84%; transform: rotate(-.5deg); }
.sony-composition:hover .sony-interface { transform: rotate(-.5deg) translateY(-4px); }
.project-tag { position: absolute; z-index: 4; left: 4%; bottom: 5%; padding: 9px 12px; color: #fff; background: var(--red); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.cordis-media { position: relative; gap: 10px; padding: 18px; background: linear-gradient(135deg,#ece8ec,#d9e6f0); }
.cordis-media img { min-height: 354px; border: 1px solid rgba(17,19,23,.08); object-fit: cover; object-position: center; box-shadow: 0 12px 28px rgba(17,19,23,.12); }
.cordis-media img:nth-child(1) { transform: translateY(18px) rotate(-1deg); }
.cordis-media img:nth-child(2) { transform: translateY(-8px) rotate(.7deg); object-position: center 70%; }
.cordis-media img:nth-child(3) { transform: translateY(12px) rotate(-.5deg); }
.cordis-media:hover img:nth-child(1) { transform: translateY(14px) rotate(-1deg); }
.cordis-media:hover img:nth-child(2) { transform: translateY(-12px) rotate(.7deg); }
.cordis-media:hover img:nth-child(3) { transform: translateY(8px) rotate(-.5deg); }
.media-label { position: absolute; right: 22px; bottom: 22px; padding-left: 18px; border-left: 1px solid rgba(17,19,23,.45); font-size: .6rem; line-height: 1.5; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.media-three { grid-template-columns: 1fr 1.15fr .85fr; }
.media-three img { object-position: center; }
.disney-media { gap: 2px; background: #101319; }
.disney-media img:nth-child(2) { transform: scale(1.03); }
.disney-media:hover img:nth-child(2) { transform: scale(1.055); }
.more-work { padding-top: clamp(70px,8vw,120px); }
.more-work-heading { display: grid; grid-template-columns: 28% 72%; align-items: end; padding-bottom: 28px; }
.more-work-heading h2 { max-width: 760px; margin: 0; font-size: clamp(2.4rem,5vw,5rem); line-height: .94; letter-spacing: -.055em; }
.more-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.project-card { background: var(--soft); }
.project-card-media { width: 100%; height: clamp(300px,36vw,520px); padding: 0; border: 0; overflow: hidden; background: #e8e8e6; cursor: pointer; }
.project-card-media img { height: 100%; object-fit: cover; transition: transform .4s ease; }
.project-card-media:hover img { transform: scale(1.018); }
.baxter-card .project-card-media { background: #f4f4f2; }
.baxter-card .project-card-media img { padding: clamp(18px,3vw,48px); object-fit: contain; }
.project-card-copy { padding: 23px 24px 28px; }
.project-card-copy p { margin: 0 0 4px; color: var(--red); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; }
.project-card-copy h3 { margin: 0 0 9px; font-size: clamp(1.5rem,2.5vw,2.7rem); line-height: 1; letter-spacing: -.04em; }
.project-card-copy small { color: var(--gray); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; }
.studio { padding: 0 clamp(24px,3vw,48px) clamp(55px,7vw,105px); }
.studio-label { justify-content: flex-start; }
.studio-grid { display: grid; grid-template-columns: 36% 36% 28%; align-items: stretch; }
.studio-image { margin: 0; min-height: 430px; overflow: hidden; }
.studio-image img { height: 100%; object-fit: cover; object-position: 64% center; }
.studio-statement { padding: 24px clamp(26px,3.5vw,56px); }
.studio-statement h2 { margin: 0 0 28px; font-size: clamp(3rem,5vw,5.7rem); line-height: .88; letter-spacing: -.065em; }
.studio-statement p { max-width: 470px; margin: 0 0 28px; color: var(--gray); font-size: .93rem; line-height: 1.55; }
.services { margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--line); list-style: none; }
.services li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.services li > span { color: var(--gray); font-size: .65rem; }
.services strong, .services small { display: block; }
.services strong { margin-bottom: 5px; font-size: .83rem; }
.services small { color: var(--gray); font-size: .68rem; line-height: 1.4; }
.clients { display: grid; grid-template-columns: 20% 80%; align-items: center; min-height: 120px; padding: 22px clamp(24px,4vw,64px); border-top: 1px solid var(--line); }
.client-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; gap: 28px 34px; color: #929397; }
.client-list strong { font-size: clamp(.85rem,1.45vw,1.35rem); font-weight: 700; letter-spacing: -.02em; text-align: center; }
.contact { position: relative; display: grid; grid-template-columns: 1fr auto; min-height: 360px; padding: clamp(54px,6vw,90px) clamp(24px,5vw,74px); overflow: hidden; color: var(--white); background: #090a0c; }
.contact::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,transparent 35%,rgba(227,6,19,.15) 58%,transparent 59%),linear-gradient(165deg,transparent 56%,rgba(227,6,19,.45) 56.2%,rgba(227,6,19,.05) 57%,transparent 70%); pointer-events: none; }
.contact-copy, .contact address { position: relative; z-index: 1; }
.contact h2 { margin: 24px 0 32px; font-size: clamp(3rem,6vw,6.7rem); line-height: .88; letter-spacing: -.065em; }
.contact h2 em { color: #8b8d92; font-style: normal; }
.contact-link { display: inline-block; color: var(--white); text-decoration: none; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.contact-link span { margin-left: 15px; color: var(--red); }
.contact address { align-self: end; min-width: 165px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.3); font-size: .72rem; font-style: normal; line-height: 1.55; letter-spacing: .04em; text-transform: uppercase; }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 78px; padding: 18px clamp(24px,4vw,64px); }
footer > img { width: 140px; }
footer p { margin: 0; color: var(--gray); font-size: .67rem; }
footer nav { justify-self: end; }
.lightbox { width: min(1220px,94vw); max-height: 94vh; padding: 52px 22px 22px; border: 0; background: var(--white); }
.lightbox::backdrop { background: rgba(0,0,0,.86); }
.lightbox-stage { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr) 46px; align-items: center; min-height: min(70vh,760px); background: #f2f2f0; }
.lightbox img { width: 100%; max-height: 72vh; object-fit: contain; }
.lightbox-nav { height: 52px; border: 0; color: var(--black); background: transparent; font-size: 1.4rem; cursor: pointer; }
.lightbox-nav:disabled { opacity: .2; cursor: default; }
.lightbox-meta { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.lightbox h2 { margin: 18px 0 0; font-size: clamp(1.5rem,3vw,3rem); letter-spacing: -.04em; }
.lightbox-count { margin: 0 5px 5px 0; color: var(--gray); font-size: .7rem; letter-spacing: .12em; }
.lightbox-close { position: absolute; top: 8px; right: 15px; padding: 0; border: 0; background: transparent; font-size: 2rem; cursor: pointer; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; } .hero-visual { min-height: 440px; }
  .case-row { grid-template-columns: 1fr; } .case-copy { min-height: 280px; }
  .more-work-heading { grid-template-columns: 1fr; gap: 25px; }
  .studio-grid { grid-template-columns: 1fr 1fr; }
  .services { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; padding: 25px 0 0; border-left: 0; }
  .services li { margin-right: 22px; } .clients { grid-template-columns: 1fr; gap: 24px; }
  .client-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
  footer { grid-template-columns: 1fr 1fr; } footer p { order: 3; grid-column: span 2; }
}
@media (max-width: 640px) {
  .site-header { min-height: 68px; } .brand img { width: 170px; } .menu-toggle { display: block; }
  .site-header nav { position: absolute; top: 67px; left: 0; right: 0; display: none; flex-direction: column; align-items: flex-start; padding: 28px; border-bottom: 1px solid var(--line); background: var(--white); }
  .site-header nav.open { display: flex; }
  .hero-copy { min-height: 580px; } h1 { font-size: clamp(3.5rem,18vw,5.5rem); } .hero-visual { min-height: 360px; }
  .section-bar a { display: none; } .case-media, .media-three { grid-template-columns: 1fr; } .case-media img { min-height: 230px; }
  .sony-composition { min-height: 420px; }
  .sony-composition img { min-height: 0; }
  .sony-composition .sony-interface { left: 4%; top: 7%; width: 92%; height: 78%; }
  .project-tag { bottom: 4%; }
  .cordis-media { grid-template-columns: 1fr 1fr; padding: 12px; }
  .cordis-media img { min-height: 260px; }
  .media-two img:nth-child(2), .media-three img:nth-child(3) { display: none; }
  .more-work-grid { grid-template-columns: 1fr; }
  .studio-grid { grid-template-columns: 1fr; } .studio-image { min-height: 360px; } .services { grid-column: auto; grid-template-columns: 1fr; }
  .clients { padding-block: 38px; } .client-list { grid-template-columns: 1fr 1fr; justify-items: start; }
  .contact { grid-template-columns: 1fr; gap: 54px; } .contact address { align-self: auto; }
  footer { grid-template-columns: 1fr; } footer nav { justify-self: start; } footer p { order: initial; grid-column: auto; }
  .lightbox { padding: 48px 10px 14px; }
  .lightbox-stage { grid-template-columns: 36px minmax(0,1fr) 36px; min-height: 56vh; }
  .lightbox-meta { align-items: start; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } .case-media img { transition: none; } }