:root {
  color-scheme: light;
  --paper: #eff1f5;
  --ink: #142132;
  --muted: #526176;
  --line: #c8ced8;
  --blue: #124dff;
  --night: #102032;
  --side: clamp(18px, 4vw, 76px);
  --wide: 1600px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.45 Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
h2 { font-size: clamp(40px, 5.25vw, 88px); line-height: 1.01; letter-spacing: -.05em; }
h3 { font-size: clamp(28px, 3vw, 47px); line-height: 1.06; letter-spacing: -.052em; }
h4 { font-size: clamp(23px, 2.45vw, 40px); letter-spacing: -.048em; line-height: 1.12; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.icon { display:inline-block; flex:none; vertical-align:middle; pointer-events:none; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.wrap { width: min(calc(100% - var(--side) * 2), var(--wide)); margin-inline: auto; }
:focus-visible { outline: 3px solid #6497ff; outline-offset: 5px; }
.skip { position: fixed; top: 6px; left: 8px; z-index: 100; background: white; padding: 12px; border-radius: 4px; transform: translateY(-150%); }
.skip:focus { transform: translateY(0); }
.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; }
.header { background: rgba(239, 241, 245, .97); border-bottom: 1px solid var(--line); z-index: 20; }
.bar { min-height: 80px; display: flex; align-items: center; gap: clamp(20px, 3.5vw, 65px); }
.partners, .brand { display: inline-flex; align-items: center; }
.partners { gap: clamp(11px, 1.6vw, 24px); margin-right: auto; }
.brand { gap: 9px; }
.brand img { width: clamp(78px, 7.2vw, 112px); height: auto; }
.brand span { color: var(--blue); font-size: clamp(10px, .78vw, 13px); text-transform: uppercase; letter-spacing: .065em; }
.client-logo { height: auto; width: clamp(82px, 7.3vw, 117px); }
.partner-sep { color: #778493; width:14px; height:14px; }
.nav { display: flex; gap: clamp(15px, 1.8vw, 30px); }
.nav a, .contact-link { font-size: 14px; }
.nav a:hover { color: var(--blue); }
.contact-link { padding: 11px 17px; border-radius: 40px; border: 1px solid var(--line); white-space: nowrap; }
.contact-link:hover { color: white; border-color: var(--blue); background: var(--blue); }
.contact-link .icon { width:15px; height:15px; margin-left:7px; vertical-align:-.15em; }
.hero { isolation: isolate; position: relative; padding: clamp(24px,3.4vw,57px); margin-top: clamp(14px,1.7vw,30px); height: clamp(540px,72svh,850px); max-height: 860px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border-radius: 20px; background: var(--night); color: white; }
.hero::before { content:""; z-index:-1; position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,19,31,.52), transparent 74%), linear-gradient(0deg,rgba(5,16,28,.75),transparent 63%,rgba(8,19,31,.22)); }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-top, .hero-bottom { display:flex; justify-content:space-between; align-items:center; gap:22px; }
.hero-top { font-size:14px; font-weight:500; letter-spacing:.015em; }
.hero-label { display:inline-flex; align-items:center; gap:10px; }
.hero-label i { width:8px; height:8px; background:#8eaeff; border-radius:50%; }
.hero-bottom { align-items:flex-end; }
h1 { font-size:clamp(84px,9.6vw,160px); line-height:.89; letter-spacing:-.06em; padding-bottom:.08em; }
.hero p { font-size:clamp(18px,1.65vw,28px); letter-spacing:-.018em; line-height:1.25; max-width:520px; margin-top:24px; }
.hero-cta, .blue-button { display:inline-flex; align-items:center; justify-content:center; gap:28px; border-radius:44px; padding:15px 23px; font-size:15px; white-space:nowrap; transition:background .2s,color .2s; }
.hero-cta { color:var(--ink); background:white; }
.hero-cta:hover, .blue-button { color:white; background:var(--blue); }
.hero-cta .icon, .blue-button .icon { width:20px; height:20px; }
.eyebrow, .meta { display:block; font-size:13px; line-height:1.25; letter-spacing:.018em; }
.eyebrow { color:var(--muted); margin-bottom:22px; }
.intro { padding-block:clamp(72px,7.7vw,133px); display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(48px,9vw,150px); }
.intro .text { max-width:590px; margin-top:25px; }
.text, figcaption p, .social-case-copy p, .contact-copy p { font-size:clamp(16px,1.25vw,21px); line-height:1.46; color:var(--muted); text-wrap:pretty; }
.format-list { display:flex; flex-direction:column; align-self:center; border-top:1px solid var(--line); }
.format-list a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(12px,1.2vw,20px) 0; border-bottom:1px solid var(--line); font-size:clamp(18px,1.6vw,25px); letter-spacing:-.025em; }
.format-list .icon { color:var(--blue); }
.format-list a:hover { color:var(--blue); }
.dark { background:var(--night); color:#f7f8fa; --muted:#bdc7d4; --line:#435160; }
.dark .eyebrow { color:#a7b8cd; }
.films,.social,.visual,.interior { padding-block:clamp(66px,6vw,108px); }
.section-head { margin-bottom:clamp(34px,4vw,64px); }
.film-block { border-top:1px solid var(--line); padding-top:clamp(19px,2vw,32px); }
.film-block+.film-block { margin-top:clamp(54px,5vw,83px); }
.feature-line { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:clamp(20px,2vw,33px); }
.feature-line>span { flex-shrink:0; color:#b6c6d9; font-size:13px; font-weight:600; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.8vw,48px); }
.pair>* { min-width:0; }
.player, .zoom { position:relative; display:block; overflow:hidden; width:100%; aspect-ratio:16 / 9; border-radius:12px; }
.player { background:#07121c; isolation:isolate; }
.player video { width:100%; height:100%; object-fit:contain; }
.play { display:grid; place-items:center; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:62px; height:62px; padding:0; border:1px solid rgba(255,255,255,.76); border-radius:50%; background:rgba(10,20,30,.61); color:white; transition:background .2s; }
.play-icon { margin-left:2px; }
.play:hover { background:var(--blue); }
.zoom { background:#d5d9df; cursor:zoom-in; }
.zoom img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease-out; }
.zoom-symbol { display:grid; place-items:center; position:absolute; bottom:13px; right:13px; width:35px; height:35px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(0,0,0,.55); color:white; font-size:24px; line-height:1; }
@media (hover:hover) { .zoom:hover img { transform:scale(1.025); } }
figcaption, .social-case-copy { padding-top:20px; }
.meta { color:var(--muted); margin-bottom:10px; }
.meta.idea { color:var(--blue); }
.dark .meta.idea { color:#a3bdff; }
figcaption p, .social-case-copy p { margin-top:13px; max-width:55ch; }
.tablist { display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:33px; }
.tablist a { border:1px solid var(--line); border-radius:30px; padding:10px 18px; font-size:14px; background:transparent; }
.tablist a[aria-selected=true] { color:white; background:var(--ink); border-color:var(--ink); }
.tablist a:hover { border-color:var(--blue); }
.social-panel { display:grid; grid-template-columns:.92fr 1.15fr; gap:clamp(30px,5.5vw,88px); }
.social-panel+.social-panel { margin-top:40px; }
.tabs-ready .social-panel { margin-top:0; }
.social-case { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:clamp(17px,1.65vw,28px); }
.vertical { aspect-ratio:9 / 16; }
.social-case-copy { padding-top:3px; }
.social-case-copy h3 { font-size:clamp(25px,2.1vw,36px); }
.social-case-copy p { font-size:clamp(16px,1.15vw,19px); }
.social-idea .zoom { aspect-ratio:16 / 9; }
.visual { background:white; }
.static-heading { display:grid; grid-template-columns:1fr .76fr; align-items:end; gap:40px; margin-bottom:clamp(28px,3vw,49px); }
.static-heading .text { max-width:530px; justify-self:end; }
.art { aspect-ratio:2.2; }
.art img { object-position:50% 50%; }
.plain-caption { padding-top:13px; color:var(--muted); font-size:14px; }
.compare { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1.66; background:#d4d5d4; isolation:isolate; }
.compare>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .before { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.comp-label { position:absolute; top:18px; border-radius:22px; background:rgba(16,32,50,.83); color:white; padding:8px 13px; font-size:13px; }
.comp-label.left { left:18px; }
.comp-label.right { right:18px; }
.divider { position:absolute; inset:0 auto 0 var(--split); width:2px; background:white; transform:translateX(-50%); }
.divider span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; color:var(--ink); background:white; border:1px solid #d6dce2; width:52px; height:52px; font-size:24px; border-radius:50%; box-shadow:0 3px 15px #0003; }
.compare input { appearance:none; -webkit-appearance:none; touch-action:pan-y; position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.compare input::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:52px; }
.compare input::-moz-range-thumb { width:24px; height:52px; }
.compare:focus-within .divider span { outline:3px solid var(--blue); outline-offset:2px; }
footer { padding-block:clamp(60px,6vw,110px) 25px; }
.contact-main { display:grid; align-items:end; grid-template-columns:1.2fr 1fr; gap:clamp(32px,7vw,130px); }
.contact-copy { max-width:520px; }
.blue-button { margin-top:24px; }
.blue-button:hover { background:#315fff; }
.footer-bar { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:23px; margin-top:clamp(56px,6vw,100px); border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.footer-bar a .icon, .viewer-close .icon { width:1em; height:1em; margin-left:.18em; vertical-align:-.13em; }
.footer-bar a:hover { color:white; }
.viewer { position:fixed; width:100vw; max-width:none; height:100dvh; max-height:none; padding:0; border:0; margin:0; background:rgba(8,17,29,.98); color:white; }
.viewer::backdrop { background:#08111d; }
.viewer-inner { width:100%; height:100%; padding:12px clamp(12px,3vw,46px) 22px; display:flex; flex-direction:column; }
.viewer-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:54px; padding-bottom:9px; }
.viewer-close { font-size:14px; background:#203246; color:white; border:1px solid #566575; padding:8px 13px; border-radius:25px; }
.viewer-img { width:100%; height:0; min-height:0; flex:1; object-fit:contain; }
body:has(.viewer[open]) { overflow:hidden; }
@media(max-width:1000px) {
  .bar { min-height:68px; }
  .nav { display:none; }
  .social-panel { grid-template-columns:.8fr 1fr; gap:28px; }
  .social-case { display:flex; flex-direction:column; gap:0; }
  .social-case .vertical { max-width:235px; }
  .social-case-copy { padding-top:20px; }
  .static-heading { grid-template-columns:1fr 1fr; }
}
@media(max-width:680px) {
  html { scroll-padding-top:16px; }
  .bar { min-height:61px; gap:10px; }
  .partners { gap:9px; }
  .brand { gap:4px; }
  .brand img { width:64px; }
  .brand span { font-size:8px; }
  .partner-sep { width:11px; height:11px; }
  .client-logo { width:69px; }
  .contact-link { font-size:11px; padding:8px 10px; }
  .contact-link .icon { width:12px; height:12px; margin-left:2px; }
  .hero { height:clamp(485px,72svh,650px); padding:23px 19px; border-radius:13px; }
  .hero-photo { object-position:60% center; }
  .hero::before { background:linear-gradient(0deg,rgba(4,15,28,.87),rgba(5,18,29,.11) 83%,rgba(8,19,31,.28)); }
  .hero-top { font-size:12px; }
  .hero-bottom { flex-direction:column; align-items:flex-start; gap:22px; }
  h1 { font-size:clamp(76px,19vw,118px); }
  .hero p { margin-top:16px; max-width:340px; font-size:18px; }
  .hero-cta, .blue-button { padding:12px 17px; font-size:14px; }
  .intro, .static-heading, .contact-main { grid-template-columns:1fr; gap:26px; }
  .intro, .films, .social, .visual, .interior { padding-block:55px; }
  .eyebrow { margin-bottom:15px; }
  .intro .text { margin-top:18px; }
  .format-list a { padding:13px 0; }
  .pair, .social-panel { grid-template-columns:1fr; gap:31px; }
  .pair .case { margin-bottom:3px; }
  figcaption { padding-top:14px; }
  .meta { font-size:12px; margin-bottom:7px; }
  figcaption p, .social-case-copy p { margin-top:9px; }
  .player, .zoom { border-radius:9px; }
  .play { width:49px; height:49px; }
  .social-case { display:grid; grid-template-columns:minmax(116px,.72fr) 1fr; gap:16px; }
  .social-case-copy { padding-top:2px; }
  .social-case-copy h3 { font-size:24px; }
  .social-case-copy p { font-size:15px; line-height:1.39; }
  .tabs-ready .tablist { display:flex; flex-wrap:nowrap; overflow-x:auto; margin-right:calc(-1 * var(--side)); padding:4px var(--side) 14px 2px; margin-bottom:23px; }
  .tablist a { flex:none; font-size:13px; padding:8px 12px; }
  .art { aspect-ratio:1.6; }
  .compare { aspect-ratio:1.4; }
  .comp-label { top:10px; font-size:11px; padding:6px 9px; }
  .comp-label.left { left:9px; }
  .comp-label.right { right:9px; }
  .divider span { width:40px; height:40px; }
  .footer-bar { flex-wrap:wrap; font-size:13px; }
  .footer-bar a:nth-child(2) { order:3; width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}