@font-face{font-family:"Adventor";src:url(../assets/fonts/adventor-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Adventor";src:url(../assets/fonts/adventor-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sauce";src:url(../assets/fonts/open-sauce-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sauce";src:url(../assets/fonts/open-sauce-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
.scr-q { font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.1; letter-spacing: -.025em; }
.scr-fig { display: block; font-family: var(--f-display); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scr-cap { font-weight: 700; font-size: var(--t-small); line-height: 1.35; }
.scr-dsc { margin: 0; color: var(--fg-3); font-size: var(--t-small); line-height: 1.5; max-width: 44ch; text-wrap: pretty; }
.scr-case { color: var(--fg-3); font-size: var(--t-xs); }
.scr-img { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--navy); }
.scr-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scr-figs { display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 2vw, 36px); }
.scr-one { display: grid; gap: 10px; align-content: start; }
.scr-btn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.scr__rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 1120px); gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); padding-inline: var(--m); margin-inline: calc(-1 * var(--m)); scrollbar-width: none; overscroll-behavior-x: contain; }
.scr__rail::-webkit-scrollbar { display: none; }
@media (pointer: fine) {
.scr__rail { -webkit-user-select: none; user-select: none; }
.scr__rail .scr__panel { cursor: grab; }
.scr__rail.is-drag, .scr__rail.is-drag .scr__panel { cursor: grabbing; }
}
.scr__rail.is-drag { scroll-snap-type: none; scroll-behavior: auto; }
.scr__panel img { -webkit-user-drag: none; }
.scr__panel { position: relative; scroll-snap-align: start; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--night); color: #fff; }
.scr__panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scr__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 12, .6) 0%, rgba(5, 6, 12, 0) 30%, rgba(5, 6, 12, 0) 42%, rgba(5, 6, 12, .9) 100%); }
.scr__panel:not(.is-on) { cursor: pointer; }
.scr__ov { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(20px, 2.4vw, 40px); }
.scr__top { display: grid; gap: 8px; }
.scr .label { color: rgba(255, 255, 255, .88); }
.scr .scr-q { font-size: var(--t-d3); }
.scr__bot { grid-row: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px clamp(24px, 3vw, 56px); align-items: end; }
.scr .scr-fig { font-size: var(--t-score); }
.scr__txt { display: grid; gap: 8px; max-width: 46ch; justify-self: end; }
.scr .scr-dsc { color: rgba(255, 255, 255, .86); }
.scr .scr-case { color: rgba(255, 255, 255, .76); }
.scr__ctl { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.scr__nav { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .3s var(--e-std), color .3s var(--e-std), opacity .3s; }
.scr__nav svg { width: 14px; height: 14px; }
.scr__nav:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.scr__nav:disabled { opacity: .35; cursor: default; }
.scr__count { min-width: 3.6em; margin-left: 8px; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.scr__bar { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--line-2); }
.scr__fill { position: absolute; inset: 0; background: var(--fg); transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--e-l); }
@media (max-width: 759px) {
.scr__rail { grid-auto-columns: 88%; }
.scr__panel { aspect-ratio: 4 / 5; }
.scr__bot { grid-template-columns: minmax(0, 1fr); }
.scr__txt { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
.scr__fill { transition: none; }
}
:root {
  color-scheme: dark;
  --black: #000000;
  --night: #07080c;          
  --navy: #0d1322;           
  --navy-2: #161d36;         
  --indigo: #17176a;         
  --powder: #c8d5ff;         
  --powder-2: #e2e9ff;
  --mist: #f1f4ff;
  --white: #ffffff;
  --error: #ffb4b4;
  --navy-ink: var(--navy);   
  --navy-3: var(--indigo);   
  --f-display: "Adventor", "URW Gothic", "ITC Avant Garde Gothic", "Century Gothic", "Futura", ui-sans-serif, sans-serif;
  --f-text: "Open Sauce", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero: calc((100vw - 2 * var(--m)) / 7.62);
  --t-d1: clamp(42px, 7vw, 132px);
  --t-d2: clamp(36px, 4.5vw, 84px);
  --t-d3: clamp(26px, 2.6vw, 48px);
  --t-d4: clamp(19px, 1.6vw, 28px);
  --t-lead: clamp(17px, 1.25vw, 21px);
  --t-body: 16px;
  --t-ui: 15px;
  --t-small: 13px;
  --t-xs: 13px;
  --t-label: 11px;
  --t-label-s: 10.5px;
  --ls-label: .24em;
  --ls-d: -.04em;
  --t-score: clamp(52px, 5.2vw, 96px);   
  --m: max(20px, 5vw);
  --g: max(12px, 2vw);
  --hd: 80px;
  --sec: clamp(96px, 10.5vw, 188px);
  --block: clamp(56px, 6vw, 112px);
  --r: clamp(18px, 2.2vw, 34px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --r-pill: 999px;
  --r-media: clamp(12px, 1.2vw, 20px);
  --ctl: 48px;
  --ctl-s: 42px;
  --z-cur: 45; --z-menu: 55; --z-hd: 60;
  --e-out: cubic-bezier(0, .202, .204, 1);   
  --e-io: cubic-bezier(.496, .004, 0, 1);    
  --e-in: cubic-bezier(.198, 0, 1, .1);      
  --e-line: cubic-bezier(.76, 0, .24, 1);    
  --e-rise: cubic-bezier(.22, 1, .36, 1);    
  --e-wipe: cubic-bezier(.22, 1, .36, 1);    
  --e-ui: cubic-bezier(.4, 0, .1, 1);        
  --e-l: cubic-bezier(.35, 0, 0, 1);         
  --e-expo: cubic-bezier(.19, 1, .22, 1);    
  --e-draw: cubic-bezier(.22, .31, 0, 1);    
  --e-std: cubic-bezier(.4, 0, .2, 1);       
  --e-curtain: cubic-bezier(.25, 1, .5, 1);  
  --e-dim: cubic-bezier(.33, 1, .68, 1);     
  --e-quart: cubic-bezier(.165, .84, .44, 1); 
  --e-link: cubic-bezier(1, 0, 0, 1);        
  --e-back: cubic-bezier(.68, -.55, .265, 1.55); 
  --e-fade: cubic-bezier(.333, .667, .667, 1); 
  --d-1: .2s; --d-2: .4s; --d-3: .6s; --d-4: .8s; --d-5: 1s; --d-6: 1.5s;
}
@media (max-width: 759px) {
:root { --hd: 64px; --t-hero: calc((100vw - 2 * var(--m)) / 4.12); --t-body: 15px; --ctl: 46px; }
}
.hd, .menu, #measurement, #credits, .ft {
  --t-label: 12px; --ls-label: .2em; --t-small: 14px; --t-xs: 13px; --t-ui: 15px; --g: max(12px, 1.6vw);
}
#measurement {
  --t-d1: clamp(46px, 7.2vw, 132px); --t-d2: clamp(34px, 4.4vw, 80px); --t-d3: clamp(26px, 2.6vw, 46px); --t-d4: clamp(20px, 1.55vw, 27px);
  --t-lead: clamp(17px, 1.22vw, 21px);
}
#credits {
  --t-d1: clamp(44px, 6.6vw, 124px); --t-d2: clamp(34px, 4.3vw, 78px); --t-d3: clamp(25px, 2.45vw, 42px); --t-d4: clamp(19px, 1.45vw, 25px);
  --t-lead: clamp(17px, 1.2vw, 20px); --block: clamp(48px, 5vw, 96px);
}
[data-theme] {
  --fg: var(--white);
  --accent: var(--powder);
  --panel: var(--night);
  --btn-bg: var(--white);
  --btn-fg: var(--navy);
  --flood: var(--powder);
  --flood-fg: var(--navy);
  --focus: var(--powder);
  --fg-2: color-mix(in srgb, var(--fg) 80%, transparent);
  --fg-3: color-mix(in srgb, var(--fg) 66%, transparent);
  --line: color-mix(in srgb, var(--fg) 16%, transparent);
  --line-2: color-mix(in srgb, var(--fg) 34%, transparent);
  --mute: color-mix(in srgb, var(--fg) 46%, transparent);   
}
[data-theme="black"] { --bg: var(--black); --panel: var(--night); }
[data-theme="navy"] { --bg: var(--navy); --panel: var(--navy-2); }
[data-theme="powder"] {
  --bg: var(--powder); --panel: var(--powder-2); --fg: var(--navy); --accent: var(--indigo);
  --btn-bg: var(--navy); --btn-fg: var(--white); --flood: color-mix(in srgb, var(--indigo) 82%, var(--powder)); --flood-fg: var(--white); --focus: var(--indigo);
}
[data-theme="paper"] {
  --bg: var(--white); --panel: var(--mist); --fg: var(--navy); --accent: var(--indigo);
  --btn-bg: var(--navy); --btn-fg: var(--white); --flood: color-mix(in srgb, var(--indigo) 82%, var(--powder)); --flood-fg: var(--white); --focus: var(--indigo);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); -webkit-text-size-adjust: 100%; }
html.lock { overflow: hidden; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--powder); color: var(--navy); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus, var(--powder)); outline-offset: 3px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; background: var(--white); color: var(--navy); padding: 10px 16px; border-radius: 999px; transform: translateY(-160%); transition: transform .3s var(--e-ui); font-size: 14px; text-decoration: none; }
.skip:focus { transform: none; }
.label, .credit__k, .fdd__name, .ledger__year, .box__tag, .cr__brand, .ins__brand, .svc__count, .svc__ix,
.field label, .form__chips legend, .details dt, .qv__facets dt, .arc__b {
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); line-height: 1.4;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.label { margin: 0; color: var(--accent); }
.h-d1, .h-d2, .h-d3, .h-d4 { margin: 0; font-family: var(--f-display); font-weight: 400; text-wrap: balance; }
.h-d1 { font-size: var(--t-d1); line-height: .94; letter-spacing: -.045em; }
.h-d2 { font-size: var(--t-d2); line-height: 1; letter-spacing: -.04em; }
.h-d3 { font-size: var(--t-d3); line-height: 1.04; letter-spacing: -.035em; }
.h-d4 { font-size: var(--t-d4); line-height: 1.18; letter-spacing: -.02em; }
.tone { color: var(--accent); }
.lead { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); max-width: 46ch; }
.body { margin: 0; color: var(--fg-2); max-width: 52ch; }
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: block; }
.x { color: var(--accent); }
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 26px 0 22px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-text); font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none;
  overflow: hidden; transition: color .45s var(--e-l);
}
.btn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--flood)); flex: none; transition: transform .55s var(--e-l), background-color .3s var(--e-l); }
[data-theme="powder"] .btn, [data-theme="paper"] .btn { --dot: var(--powder); }
.btn__txt { position: relative; z-index: 1; }
.btn__arr { position: relative; z-index: 1; width: 14px; height: 14px; margin-left: -26px; opacity: 0; transform: translateX(-10px); transition: transform .45s var(--e-ui), opacity .3s, margin .45s var(--e-l); }
.btn:hover, .btn:focus-visible { color: var(--flood-fg); }
.btn:hover .btn__dot, .btn:focus-visible .btn__dot { transform: scale(96); background: var(--flood); }
.btn:hover .btn__arr, .btn:focus-visible .btn__arr { opacity: 1; transform: none; margin-left: 0; }
.btn--sm { height: 42px; padding: 0 20px 0 16px; font-size: 14px; gap: 10px; }
.link {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding-block: 4px;
  font-size: 15px; color: var(--fg); text-decoration: none;
}
.link::before, .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.link::before { display: none; }
.link::after { background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .6s var(--e-l); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link > svg { width: 14px; height: 14px; flex: none; transition: transform .6s var(--e-l); }
.link:hover > svg { transform: translateX(4px); }
.cyc.cyc--r > svg.ext + svg.ext { transform: translateX(-100%); }
:is(a, .feat):is(:hover, :focus-visible) .cyc.cyc--r > svg.ext:first-child { transform: translateX(100%); }
:is(a, .feat):is(:hover, :focus-visible) .cyc.cyc--r > svg.ext + svg.ext { transform: none; }
.cyc { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; overflow: hidden; }
.cyc > svg.ext { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--e-quart); }
.cyc > svg.ext + svg.ext { transform: translate(-100%, 100%); }
:is(a, .feat):is(:hover, :focus-visible) .cyc > svg.ext:first-child { transform: translate(100%, -100%); }
:is(a, .feat):is(:hover, :focus-visible) .cyc > svg.ext + svg.ext { transform: none; }
.feat:has(.feat__link:focus-visible) .cyc > svg.ext:first-child { transform: translate(100%, -100%); }
.feat:has(.feat__link:focus-visible) .cyc > svg.ext + svg.ext { transform: none; }
.play { --ico: 34px; --ico-x: 7px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 22px 0 var(--ico-x); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--fg); transition: box-shadow .5s var(--e-std), color .45s var(--e-l); white-space: nowrap; }
.play__ico { display: grid; place-items: center; width: var(--ico); height: var(--ico); border-radius: 50%; background: var(--fg); color: var(--bg); transition: transform .5s var(--e-l), background-color .45s var(--e-l), color .45s var(--e-l); }
.play__ico svg { width: 11px; height: 11px; margin-left: 2px; }
.play__t { color: var(--fg-3); font-variant-numeric: tabular-nums; transition: color .45s var(--e-l); }
.play--sm { --ico: 30px; height: var(--ctl-s); padding-right: 18px; gap: 12px; }
.play::before, .arc__toggle::before { content: ""; position: absolute; z-index: -1; left: var(--ico-x); top: 50%; width: var(--ico); height: var(--ico); margin-top: calc(var(--ico) / -2); border-radius: 50%; background: var(--flood); transform: scale(0); transition: transform .6s var(--e-l); }
.play:is(:hover, :focus-visible), .arc__toggle:is(:hover, :focus-visible) { color: var(--flood-fg); box-shadow: inset 0 0 0 1px var(--flood); }
.play:is(:hover, :focus-visible)::before, .arc__toggle:is(:hover, :focus-visible)::before { transform: scale(18); }
.play:is(:hover, :focus-visible) .play__ico { background: var(--flood-fg); color: var(--flood); }
.play:is(:hover, :focus-visible) .play__t { color: color-mix(in srgb, var(--flood-fg) 66%, transparent); }
.ctrl { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); transition: box-shadow .5s var(--e-std), background-color .5s var(--e-std); }
.ctrl:hover, .ctrl:focus-visible { box-shadow: inset 0 0 0 1px var(--fg); background-color: color-mix(in srgb, var(--fg) 10%, transparent); }
.ctrl svg { width: 12px; height: 12px; }
.copy { display: inline-grid; place-items: center; min-width: 6.4em; font-size: 12px; color: var(--fg-2); height: 28px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s, color .3s, background-color .3s; }
.copy:hover, .copy:focus-visible { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); background-color: color-mix(in srgb, var(--fg) 10%, transparent); }
.vf { display: none !important; position: absolute; inset: clamp(10px, 1.1vw, 18px); pointer-events: none; z-index: 2; transition: opacity .6s var(--e-l); }
.vf i { position: absolute; width: clamp(14px, 1.4vw, 22px); height: clamp(14px, 1.4vw, 22px); border: 0 solid rgba(255, 255, 255, .92); }
.vf i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.vf i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.vf i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.vf i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.credit { --cf: 15px; display: flex; align-items: center; gap: 18px; margin: 0; min-width: 0; white-space: nowrap; }
.credit__k { color: var(--accent); flex: none; translate: 0 .23em; }
.credit__body { display: flex; align-items: center; gap: calc(var(--cf) * .9); min-width: 0; }
.credit__b, .credit__t, .credit__n { display: inline-flex; align-items: center; flex: none; height: calc(var(--cf) * 3); font-size: var(--cf); }
.credit__logo { display: block; width: auto; max-width: none; }
.credit__b:not(.is-logo), .credit__t:not(.is-logo) { font-family: var(--f-display); font-size: calc(var(--cf) * 1.1); letter-spacing: -.01em; color: var(--fg); }
.credit__x { flex: none; font-family: var(--f-display); font-size: calc(var(--cf) * 1.7); font-weight: 400; line-height: 1; letter-spacing: 0; }
.credit__n { position: relative; margin-left: calc(var(--cf) * .25); padding-left: calc(var(--cf) * 1.15); }
.credit__n::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: calc(var(--cf) * 1.9); translate: 0 -50%; background: var(--line-2); }
.credit__n:not(.is-logo) { font-size: 12px; color: var(--fg-3); }
.credit__body > * { transition: opacity .55s var(--e-out), transform .8s var(--e-out); }
.credit__body > :nth-child(2) { transition-delay: .06s; }
.credit__body > :nth-child(3) { transition-delay: .12s; }
.credit__body > :nth-child(4) { transition-delay: .18s; }
.credit__body > :nth-child(5) { transition-delay: .24s; }
.credit.is-swap .credit__body > * { opacity: 0; transform: translateY(8px); transition: opacity .18s linear, transform 0s .18s; }
.hero .credit { --cf: 16px; }
.svc__text .credit { --cf: 17px; gap: 24px; padding-top: 6px; }
.svc__text .credit__body { gap: calc(var(--cf) * 1.15); }
@media (max-width: 599px) {
.svc__text .credit { --cf: 12px; }
}
.sec { position: relative; isolation: isolate; background: var(--bg); color: var(--fg); padding-block: var(--sec); }
.sheet { border-radius: 0; margin-top: calc(-1 * var(--r)); }
:where(#measurement) :is(figure, blockquote, dl, dd) { margin: 0; }
.odo { display: inline-flex; white-space: nowrap; --lh: 1.08em; line-height: var(--lh); }
.o { display: inline-block; height: var(--lh); overflow: hidden; vertical-align: top; }
.o__i { display: block; line-height: var(--lh); }
.js:not(.rm) .odo.is-pre .o__i { transform: translateY(200%); }
.js:not(.rm) .odo.is-pre.is-in .o__i { transform: none; transition: transform .6s var(--e-l) calc(var(--oi, 0) * .05s); }
[data-rules] > li { position: relative; }
[data-rules] > li::before, [data-rules] > li:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule, var(--line)); transform-origin: right; pointer-events: none; transition: transform 1.2s var(--e-expo); }
[data-rules] > li::before { top: 0; }
[data-rules] > li:last-child::after { bottom: 0; transition-delay: .2s; }
.js:not(.rm) [data-rules] > li.is-pending::before, .js:not(.rm) [data-rules] > li.is-pending:last-child::after { transform: scaleX(0); }
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-hd);
  height: calc(var(--hd) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--m) 0;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); color: var(--fg); background: transparent;
  transition: transform .5s var(--e-std), background-color .5s, color .5s;
}
.hd::after { content: ""; position: absolute; inset: auto var(--m) 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .5s; }
.hd.is-solid { background-color: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.hd.is-solid::after { opacity: 1; }
.hd.is-hidden { transform: translateY(-101%); }
.hd__logo { display: flex; align-items: flex-start; gap: 11px; width: auto; color: var(--fg); flex: none; }
.hd__word { display: block; width: 190px; }
.hd__mark { display: block; width: 46px; flex: none; }
.hd__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.hd__word { display: block; }
.hd__logo svg { display: block; width: 100%; height: auto; }
.hd__scrim { position: fixed; inset: 0; z-index: calc(var(--z-hd) - 1); pointer-events: none; opacity: 0; background: rgba(5, 6, 12, .55); transition: opacity .35s var(--e-std); }
body:has(.hd__dd:hover) .hd__scrim, body:has(.hd__dd :focus-visible) .hd__scrim { opacity: 1; transition-duration: .6s; }
.hd__dd { position: relative; display: flex; }
.hd__dd > a { gap: 7px; padding-right: 12px; }
.hd__chev { width: 12px; height: 12px; flex: none; transition: transform .45s var(--e-std); }
.hd__dd:hover .hd__chev, .hd__dd:has(:focus-visible) .hd__chev { transform: rotate(180deg); }
.hd__ddm { position: absolute; left: 50%; top: 100%; width: max-content; translate: -50% 0; z-index: 5; padding-top: 14px; pointer-events: none; }
.hd__dd:hover .hd__ddm, .hd__dd:has(:focus-visible) .hd__ddm { pointer-events: auto; }
.hd__panel { display: grid; grid-template-columns: 236px 272px; gap: 28px; padding: 24px 24px 24px 28px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 34px 90px -24px rgba(0, 0, 0, .6); clip-path: inset(0 0 100% 0 round 20px); transition: clip-path .45s var(--e-draw); }
.hd__dd:hover .hd__panel, .hd__dd:has(:focus-visible) .hd__panel { clip-path: inset(0 0 0 0 round 20px); transition-duration: .7s; }
.hd__list { list-style: none; margin: -8px 0; padding: 0; display: grid; align-content: space-between; }
.hd__list li { opacity: 0; transform: translateY(10px); transition: opacity .2s linear, transform 0s .2s; }
.hd__dd:hover .hd__list li, .hd__dd:has(:focus-visible) .hd__list li { opacity: 1; transform: none; transition: opacity .5s var(--e-l), transform .8s var(--e-out); }
.hd__dd:hover .hd__list li:nth-child(1), .hd__dd:has(:focus-visible) .hd__list li:nth-child(1) { transition-delay: .12s; }
.hd__dd:hover .hd__list li:nth-child(2), .hd__dd:has(:focus-visible) .hd__list li:nth-child(2) { transition-delay: .18s; }
.hd__dd:hover .hd__list li:nth-child(3), .hd__dd:has(:focus-visible) .hd__list li:nth-child(3) { transition-delay: .24s; }
.hd__dd:hover .hd__list li:nth-child(4), .hd__dd:has(:focus-visible) .hd__list li:nth-child(4) { transition-delay: .30s; }
.hd__dd:hover .hd__list li:nth-child(5), .hd__dd:has(:focus-visible) .hd__list li:nth-child(5) { transition-delay: .36s; }
.hd__nav .hd__opt { display: flex; height: auto; padding: 8px 0; border-radius: 0; font-family: var(--f-display); font-size: 23px; line-height: 1.15; letter-spacing: -.025em; color: var(--fg); white-space: nowrap; transition: color .4s var(--e-std); }
.hd__list:hover .hd__opt, .hd__list:focus-within .hd__opt { color: var(--fg-3); }
.hd__nav .hd__list .hd__opt { transition: color .4s var(--e-std), transform .5s var(--e-out); }
.hd__nav .hd__opt::before { content: ""; position: absolute; left: -20px; top: 50%; width: 8px; height: 8px; margin-top: -4.5px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .4s var(--e-std); }
.hd__nav .hd__list .hd__opt:hover, .hd__nav .hd__list .hd__opt:focus-visible { transform: translateX(20px); }
.hd__nav .hd__opt:hover::before, .hd__nav .hd__opt:focus-visible::before { transform: scale(1); }
.hd__nav .hd__list .hd__opt:hover, .hd__nav .hd__list .hd__opt:focus-visible { color: var(--fg); }
.hd__pv { display: grid; gap: 14px; align-content: start; opacity: 0; transition: opacity .2s linear; }
.hd__dd:hover .hd__pv, .hd__dd:has(:focus-visible) .hd__pv { opacity: 1; transition: opacity .6s var(--e-l) .2s; }
.hd__pvf { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: #000; }
.hd__pvi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hd__pvi.is-on { opacity: 1; z-index: 1; }
.hd__pvi.is-in { z-index: 2; animation: swapIn 1s var(--e-out) both; }
.hd__pvds { display: grid; }
.hd__pvd { grid-area: 1 / 1; margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; opacity: 0; transition: opacity .35s linear; }
.hd__pvd.is-on { opacity: 1; }
.hd.is-hidden .hd__ddm { visibility: hidden; opacity: 0; transition: opacity .25s linear, visibility 0s .25s; }
body:has(.hd.is-hidden) .hd__scrim { opacity: 0; }
/* Mega menu: the four sections of the sitemap report, each with its pages */
.hd__panel--work { grid-template-columns: 262px 272px; }
.hd__panel--svc { grid-template-columns: 236px 164px 272px; }
.hd__panel--about { grid-template-columns: 252px 272px; }
.hd__panel--ins { grid-template-columns: 210px 272px; }
.hd__panel { gap: 34px; padding: 22px 24px 24px 28px; }
.hd__col { display: flex; flex-direction: column; min-width: 0; }
.hd__k { margin: 0 0 10px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.hd__col .hd__list { margin: 0; flex: 1; align-content: start; }
.hd__nav .hd__opt--s { padding: 6px 0; font-family: var(--f-text); font-size: 15px; letter-spacing: 0; line-height: 1.3; color: var(--fg-2); }
.hd__nav .hd__opt--s::before { left: -16px; width: 6px; height: 6px; margin-top: -3px; }
.hd__nav .hd__list .hd__opt--s:hover, .hd__nav .hd__list .hd__opt--s:focus-visible { transform: translateX(14px); }
.hd__subs { display: flex; gap: 16px; margin: -4px 0 6px; }
.hd__nav .hd__subs a, .hd__nav .hd__more { height: auto; padding: 0; border-radius: 0; font-size: var(--t-small); color: var(--fg-3); transition: color .3s var(--e-std); }
.hd__nav .hd__subs a:hover, .hd__nav .hd__subs a:focus-visible, .hd__nav .hd__more:hover, .hd__nav .hd__more:focus-visible { color: var(--fg); }
.hd__nav .hd__more { align-self: flex-start; gap: 8px; margin-top: 18px; padding-top: 14px; color: var(--fg-2); }
.hd__more::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--line); }
.hd__arr { width: 12px; height: 12px; flex: none; transition: transform .45s var(--e-out); }
.hd__more:hover .hd__arr, .hd__more:focus-visible .hd__arr { transform: translateX(4px); }
.hd__dd:hover .hd__list li:nth-child(6), .hd__dd:has(:focus-visible) .hd__list li:nth-child(6) { transition-delay: .42s; }
.hd__pv { padding-top: 24px; }
.hd__cards { display: grid; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--white); color: var(--navy); }
.hd__card { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 18px 20px 20px; opacity: 0; transition: opacity .35s linear; }
.hd__card.is-on { opacity: 1; }
.hd__note { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.hd__card-k { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--indigo); }
.hd__card-t { margin: auto 0 8px; font-family: var(--f-display); font-size: 24px; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.hd__card-d { margin: 0; font-size: var(--t-small); line-height: 1.4; color: color-mix(in srgb, var(--navy) 78%, transparent); text-wrap: pretty; }
.hd__nav.is-shut .hd__ddm { visibility: hidden; opacity: 0; pointer-events: none; }
body:has(.hd__nav.is-shut) .hd__scrim { opacity: 0; }
.hd__nav { position: relative; display: flex; gap: 2px; margin-left: auto; }
.hd__nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--t-small); text-decoration: none; }
.hd__pill { position: absolute; left: 0; top: 0; width: 0; height: 40px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 11%, transparent); opacity: 0; pointer-events: none; transition: left var(--d-1) var(--e-std), width var(--d-1) var(--e-std), opacity .15s ease; }
.hd__nav.is-hover .hd__pill { opacity: 1; }
.hd__nav a::after { content: ""; position: absolute; left: 50%; bottom: var(--s-1); width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform var(--d-2) var(--e-std); }
.hd__nav a::after { display: none; }
.fl-c { display: inline-block; white-space: pre; }
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
.roll > span { display: block; transition: transform .4s var(--e-ui); }
.roll > span + span { position: absolute; left: 0; top: 0; transform: translateY(100%); }
a:is(:hover, :focus-visible) .roll > span:first-child { transform: translateY(-100%); }
a:is(:hover, :focus-visible) .roll > span + span { transform: none; }
.rm .roll > span + span { display: none; }
.rm a:is(:hover, :focus-visible) .roll > span:first-child { transform: none; }
.hd__tools { display: flex; align-items: center; gap: var(--s-3); }
.wave { display: grid; place-items: center; width: var(--ctl-s); height: var(--ctl-s); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); transition: box-shadow .5s var(--e-std); flex: none; }
.wave:hover, .wave:focus-visible { box-shadow: inset 0 0 0 1px var(--fg); }
.wave__svg { width: 20px; height: 20px; overflow: visible; }
.hd__menu { display: none; height: var(--ctl-s); padding: 0 18px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--t-small); align-items: center; gap: 10px; }
.hd__menu i { display: grid; gap: 4px; width: 16px; }
.hd__menu i::before, .hd__menu i::after { content: ""; height: 1.5px; background: currentColor; transition: transform var(--d-2) var(--e-std); }
.hd__menu[aria-expanded="true"] i::before { transform: translateY(2.75px) rotate(45deg); }
.hd__menu[aria-expanded="true"] i::after { transform: translateY(-2.75px) rotate(-45deg); }
@media (max-width: 1099px) {
.hd__nav { display: none; }
.hd__tools { margin-left: auto; }
.hd__menu { display: inline-flex; }
}
@media (max-width: 759px) {
.hd { gap: var(--s-3); }
.hd__word { width: 146px; }
.hd__mark { width: 36px; }
.hd__tools { gap: var(--s-2); }
.hd__cta { padding: 0 16px 0 14px; }
.hd__menu { width: var(--ctl-s); padding: 0; justify-content: center; }
.hd__menu-t { display: none; }
.hd__word { width: 128px; }
.hd__tools > .wave { display: none; }
}
@media (max-width: 379px) {
.hd__word { width: 108px; }
.hd__mark { width: 26px; }
.hd__logo { gap: 8px; }
.hd__cta .btn__dot { display: none; }
}
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--navy); color: var(--white);
  padding: calc(var(--hd) + var(--s-7) + env(safe-area-inset-top, 0px)) var(--m) calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7);
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path var(--d-5) var(--e-curtain), visibility 0s var(--d-5); overflow-y: auto;
}
.menu.is-open { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path var(--d-5) var(--e-curtain), visibility 0s; }
.menu__body { position: relative; display: grid; grid-template-columns: 1px minmax(0, 1fr); column-gap: clamp(20px, 4vw, 40px); }
.menu__rail { position: relative; width: 1px; background: color-mix(in srgb, var(--white) 16%, transparent); transform: scaleY(0); transform-origin: top; transition: transform .25s var(--e-std); }
.menu.is-open .menu__rail { transform: none; transition: transform .75s var(--e-std) .5s; }
.menu__marker { position: absolute; left: -1px; top: 0; width: 3px; height: var(--row, 64px); background: var(--white); opacity: 0; transform: translateY(var(--y, 0)); transition: transform .5s var(--e-std), opacity .3s; }
.menu__links { list-style: none; margin: 0; padding: 0; display: grid; }
.menu__links > li { position: relative; }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; }
.menu__top { display: block; min-width: 0; font-family: var(--f-display); font-size: clamp(40px, 10.5vw, 84px); line-height: 1.12; letter-spacing: -.045em; text-decoration: none; transition: opacity .5s var(--e-std); }
@media (hover: hover) {
.menu__links:has(.menu__top:hover) .menu__top:not(:hover) { opacity: .4; }
}
.menu__top > span { display: block; transform: translateY(110%) rotate(7deg); transform-origin: left top; transition: transform var(--d-5) var(--e-out); }
.menu.is-open .menu__top > span { transform: none; transition-delay: calc(.3s + var(--i) * .1s); }
.menu__foot { display: grid; gap: 14px; justify-items: start; }
.menu__tg { flex: none; display: grid; place-items: center; width: var(--ctl); height: var(--ctl); border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 26%, transparent); color: var(--white); opacity: 0; transition: opacity .3s, box-shadow .3s var(--e-std); }
.menu.is-open .menu__tg { opacity: 1; transition: opacity .6s var(--e-l) calc(.55s + var(--i) * .1s), box-shadow .3s var(--e-std); }
.menu__tg:hover, .menu__tg:focus-visible, .menu__tg[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--white); }
.menu__tg svg { width: 14px; height: 14px; transition: transform .5s var(--e-std); }
.menu__tg[aria-expanded="true"] svg { transform: rotate(45deg); }
.menu__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .55s var(--e-std), visibility 0s .55s; }
.menu__sub.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--e-std), visibility 0s; }
.menu__subin { min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: clamp(20px, 4vw, 48px); }
.menu__grp { padding: 6px 0 26px; }
.menu__grp .label { margin-bottom: 8px; color: color-mix(in srgb, var(--white) 56%, transparent); }
.menu__grp ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu__grp a { display: inline-block; padding: 6px 0; font-size: 19px; line-height: 1.3; color: color-mix(in srgb, var(--white) 84%, transparent); text-decoration: none; transition: color .3s; }
.menu__grp a:hover, .menu__grp a:focus-visible { color: var(--white); }
.menu__subl a { padding: 3px 0 5px 18px; font-size: 16px; color: color-mix(in srgb, var(--white) 62%, transparent); }
@media (max-width: 759px) {
.menu__tg { width: var(--ctl-s); height: var(--ctl-s); }
.menu__grp a { font-size: 18px; }
}
.pre { display: none; }
.is-loading .pre, .pre.is-on {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: var(--black); color: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.is-loading .pre, .pre.is-on { animation: preFailsafe .01s linear 4.4s forwards; }
.pre { cursor: pointer; }
.pre__logo { position: relative; width: clamp(200px, 18vw, 290px); opacity: 0; transition: opacity .3s; }
.pre__logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.pre.is-on .pre__logo { opacity: 1; }
.pre__m { fill: transparent; stroke: currentColor; stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pre__w, .pre__s { opacity: 0; transform: translateY(26px); transform-box: fill-box; }
.pre.is-on .pre__m { animation: preDraw .95s var(--e-io) forwards, preFill .45s ease .7s forwards; }
.pre.is-on .pre__w { animation: preRise .7s var(--e-out) calc(.5s + var(--i) * .028s) forwards; }
.pre.is-on .pre__s { animation: preRise .7s var(--e-out) calc(.78s + var(--i) * .018s) forwards; }
.pre__line { position: absolute; left: 50%; top: calc(50% + clamp(90px, 8vw, 140px)); width: clamp(200px, 18vw, 290px); height: 1px; margin-left: calc(clamp(200px, 18vw, 290px) / -2); background: #c8d5ff; transform: scaleX(0); transform-origin: left center; }
.pre.is-on .pre__line { animation: preLine 1.1s var(--e-io) .3s forwards; }
.pre.is-out { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 1s var(--e-io); }
.pre.is-out .pre__logo { transform: translateY(-48px) scale(.96); opacity: 0; transition: transform 1s var(--e-io), opacity .6s; }
.pre.is-out .pre__line { opacity: 0; transition: opacity .3s; }
.pre.is-fly { background: transparent; transition: background-color .9s var(--e-io) .15s; pointer-events: none; }
.pre.is-fly .pre__gs, .pre.is-fly .pre__line { opacity: 0; transition: opacity .35s; }
.pre.is-fly .pre__gm, .pre.is-fly .pre__gw { transform-box: fill-box; transform-origin: 0 0; transition: transform 1.05s cubic-bezier(.76, 0, .24, 1); }
@keyframes preDraw { to { stroke-dashoffset: 0; } }
@keyframes preFill { to { fill: currentColor; stroke-width: 0; } }
@keyframes preRise { to { opacity: 1; transform: none; } }
@keyframes preLine { 0% { transform: scaleX(0); transform-origin: left center; } 55% { transform: scaleX(1); transform-origin: left center; } 56% { transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } }
@keyframes preFailsafe { to { visibility: hidden; opacity: 0; } }
.hero { position: relative; isolation: isolate; height: 240vh; height: 240svh; background: var(--bg); color: var(--fg); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; padding-top: calc(var(--hd) + env(safe-area-inset-top, 0px)); }
.hero__top { padding-top: clamp(14px, 2.2vw, 34px); will-change: transform, opacity; }
.hero__h1 { margin: 0; font-weight: 400; display: grid; gap: clamp(14px, 1.5vw, 22px); }
.hero__title { display: block; font-family: var(--f-display); font-size: var(--t-hero); line-height: .9; letter-spacing: -.045em; white-space: nowrap; margin-left: -.035em; }
.hero__title .ln { display: inline-block; vertical-align: top; padding-top: .14em; margin-top: -.14em; }
.hero__meta { position: absolute; right: var(--m); top: calc(var(--hd) + clamp(14px, 2.2vw, 34px)); margin: 0; }
.hero__slot { flex: 1 1 auto; min-height: 0; display: flex; padding-top: clamp(18px, 2.2vw, 34px); padding-bottom: clamp(22px, 2.4vw, 40px); }
.hero__ph { position: relative; flex: 1 1 auto; min-height: 180px; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; background: var(--night); cursor: pointer; z-index: 3; }
.hero__frame video, .hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bar { padding-bottom: clamp(24px, 2.6vw, 48px); }
.hero__in { display: inline-flex; align-items: center; gap: inherit; transition: opacity 1.2s var(--e-rise) var(--delay, .2s), transform 1.2s var(--e-rise) var(--delay, .2s); }
.hero__bar-in { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: clamp(20px, 2.4vw, 40px); }
.hero__ctrls { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.hero__cta { flex: none; }
@media (max-width: 1099px) {
.hero .credit { display: none; }
}
.hero__title .ln > span { transition: transform 1s var(--e-out) calc(var(--i, 0) * .1s); }
.intro-pending .hero__title .ln > span { transform: translateY(105%) rotate(7deg); transform-origin: left top; }
#reelFrame { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--e-io) .28s; }
.intro-pending #reelFrame { clip-path: inset(50% 0 50% 0); }
.intro-pending .hero__in { opacity: 0; transform: translateY(10px); }
@media (max-width: 759px) {
.hero__title { white-space: normal; }
.hero__title .ln { display: block; }
.hero__meta, .hero .credit { display: none; }
.hero__ctrls { margin-left: 0; width: 100%; justify-content: space-between; flex-direction: row-reverse; }
.hero__bar-in { flex-wrap: wrap; gap: 12px; }
.hero__cta { order: 2; flex: 1 0 100%; justify-content: center; }
.play { padding-right: 16px; }
}
.rm .hero, .no-expand .hero { height: auto; }
.rm .hero__stage, .no-expand .hero__stage { position: relative; height: auto; min-height: 100svh; }
.rm .hero__ph, .no-expand .hero__ph { min-height: 56vh; }
.intro__label { grid-column: 1 / -1; }
.intro__statement { grid-column: 1 / span 11; margin: clamp(24px, 2.6vw, 40px) 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 5.4vw, 104px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.intro__statement .fl {
  display: block;
  background: linear-gradient(90deg, var(--fg) 0 50%, color-mix(in srgb, var(--fg) 24%, transparent) 50% 100%);
  background-size: 200% 100%; background-position-x: 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: .12em; margin-bottom: -.12em;
}
.intro__about { grid-column: 7 / span 6; grid-row: 3; margin-top: var(--block); display: grid; gap: 20px; align-content: start; justify-items: start; }
.intro__about .body { max-width: 50ch; }
.intro__rec { grid-column: 1 / span 5; grid-row: 3; margin-top: var(--block); display: grid; gap: 14px; align-content: start; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.ledger__row:last-child { border-bottom: 1px solid var(--line); }
.ledger__year { color: var(--accent); padding-top: .5em; font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--ls-label); }
.ledger__name { font-family: var(--f-display); font-size: clamp(17px, 1.35vw, 22px); letter-spacing: -.02em; line-height: 1.2; }
.ledger__what { grid-column: 2; color: var(--fg-2); font-size: 14px; }
.screen { position: relative; isolation: isolate; margin: var(--block) 0 0; overflow: hidden; border-radius: var(--r); clip-path: inset(0 round var(--r)); -webkit-mask-image: -webkit-radial-gradient(white, black); background: var(--black); color: var(--white); padding: clamp(72px, 7vw, 112px) clamp(20px, 3.4vw, 56px) clamp(20px, 2.4vw, 36px); }
.screen__video { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; z-index: 0; filter: brightness(1.18) saturate(.85) contrast(.88); }
.screen__knock { position: absolute; inset: 0; z-index: 1; padding: inherit; background: var(--black); mix-blend-mode: multiply; pointer-events: none; }
.screen__copy { position: relative; z-index: 2; margin: 0; }
.screen__rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(20px, 3vw, 56px); }
.screen__row { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; padding-top: clamp(22px, 2.2vw, 38px); }
.screen__copy .screen__row + .screen__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in srgb, var(--white) 16%, transparent); transform-origin: left; transition: transform 1.4s var(--e-draw) calc(.2s + var(--i, 0) * .12s); }
.screen__n { grid-column: 1; grid-row: 1; margin: -.06em 0 0; display: block; overflow: hidden; padding: .2em 0 .04em; font-family: var(--f-display); font-weight: 700; font-size: clamp(68px, 17.6vw, 340px); line-height: .82; letter-spacing: -.055em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.screen__n > span { display: block; transition: transform 1s var(--e-line) calc(var(--i, 0) * 80ms); }
@media (min-width: 700px) {
.screen__l { white-space: nowrap; }
}
.screen__l { grid-column: 2; grid-row: 1; max-width: none; padding-bottom: 1.3em; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.35; }
.screen__row:nth-child(2) { --i: 1; }
.screen__row:nth-child(3) { --i: 2; }
.screen__knock .screen__n { color: var(--white); }
.screen__knock .screen__l { visibility: hidden; }
.screen__copy .screen__n { color: color-mix(in srgb, var(--white) 16%, transparent); -webkit-text-stroke: 1px color-mix(in srgb, var(--white) 46%, transparent); }
.screen__copy .screen__l { color: var(--white); }
.screen__cap { position: absolute; left: clamp(20px, 3.4vw, 56px); top: clamp(28px, 2.8vw, 44px); z-index: 3; margin: 0; color: var(--powder); }
.screen .vf { z-index: 3; }
.js:not(.rm) .screen.is-pending .screen__n > span { transform: translateY(105%); }
.js:not(.rm) .screen.is-pending .screen__row::before { transform: scaleX(0); }
@media (max-width: 899px) {
.intro__statement, .intro__about, .intro__rec { grid-column: 1 / -1; grid-row: auto; }
.intro__rec { margin-top: clamp(40px, 9vw, 64px); }
}
@media (max-width: 759px) {
.screen__rows { grid-template-columns: minmax(0, 1fr); }
.screen__row { row-gap: 6px; padding-top: 14px; }
.screen__n { font-size: clamp(64px, 23vw, 140px); }
.screen__l { grid-column: 1; grid-row: 2; padding-bottom: 14px; font-size: 14px; }
}
.work { overflow-x: clip; }
.work__head { row-gap: 26px; align-items: end; }
.work__head .label { grid-column: 1 / -1; }
.work__title { grid-column: 1 / span 8; }
.work__lead { grid-column: 9 / span 4; }
.filters { position: relative; z-index: 5; margin-top: var(--block); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.filters__k { color: var(--fg-3); margin-right: 6px; }
.fdd { position: relative; }
.fdd__btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--fg); transition: box-shadow .5s var(--e-std), background-color .4s var(--e-std), color .4s var(--e-std); }
.fdd__btn:hover, .fdd__btn:focus-visible, .fdd__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--fg); background-color: color-mix(in srgb, var(--fg) 10%, transparent); }
.fdd__name { color: var(--fg-3); font-size: var(--t-label-s); transition: color .4s var(--e-std); }
.fdd__chev { width: 12px; height: 12px; transition: transform .45s var(--e-std); }
.fdd__btn[aria-expanded="true"] .fdd__chev { transform: rotate(180deg); }
.fdd.is-set .fdd__btn { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.fdd.is-set .fdd__name { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.fdd__menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 4; min-width: 240px; padding: 8px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .45); clip-path: inset(0 0 100% 0 round 16px); transition: clip-path .45s var(--e-draw); }
.fdd.is-open .fdd__menu { clip-path: inset(0 0 0 0 round 16px); transition-duration: .6s; }
.fdd__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fdd__menu li { opacity: 0; transition: opacity 0s linear; }
.fdd.is-open .fdd__menu li { opacity: 1; }
.fdd.is-open .fdd__menu li:nth-child(2) { transition-delay: 75ms; }
.fdd.is-open .fdd__menu li:nth-child(3) { transition-delay: 150ms; }
.fdd.is-open .fdd__menu li:nth-child(4) { transition-delay: 225ms; }
.fdd__opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 42px; padding: 0 14px; border-radius: 10px; font-size: 14.5px; color: var(--fg-2); text-align: left; white-space: nowrap; transition: background-color .3s var(--e-std), color .3s var(--e-std); }
.fdd__opt:hover:not(:disabled), .fdd__opt:focus-visible { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.fdd__opt[aria-pressed="true"] { color: var(--fg); }
.fdd__opt[aria-pressed="true"]::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.fdd__opt:disabled { opacity: .35; cursor: not-allowed; }
.filters__status { margin: 0 0 0 auto; display: flex; align-items: center; gap: 16px; color: var(--fg-3); font-size: var(--t-small); white-space: nowrap; }
.filters__reset { font-size: var(--t-small); color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.cases { margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(64px, 6.4vw, 112px); align-items: start; }
.case { position: relative; display: grid; gap: 22px; min-width: 0; }
.case.is-leaving { opacity: 0; transform: scale(.97); transition: opacity .35s var(--e-l), transform .35s var(--e-l); }
.case__media { position: relative; display: block; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: var(--panel); }
.case__plate { position: absolute; inset: 0; }
.case__plate img, .case__plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e-expo); }
.case__plate video { opacity: 0; transition: opacity .6s, transform 1.4s var(--e-expo); }
.case__plate video.is-playing { opacity: 1; }
@media (hover: hover) {
.case:hover .case__plate img, .case:hover .case__plate video { transform: scale(1.035); }
}
.case__plus { position: absolute; right: 14px; top: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--black) 40%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); transition: transform .6s var(--e-l) .5s, background-color .4s; }
.case__plus svg { width: 14px; height: 14px; }
.case:hover .case__plus { transform: rotate(90deg); background-color: color-mix(in srgb, var(--black) 62%, transparent); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
.case__plus { opacity: 0; scale: .6; transition-property: transform, background-color, opacity, scale; transition-duration: .5s; transition-timing-function: var(--e-out); }
.case:hover .case__plus, .case:focus-within .case__plus { opacity: 1; scale: 1; }
}
.case__info { display: grid; gap: 10px; min-width: 0; }
.case__head { display: grid; gap: 10px; align-content: start; }
.case__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d3); line-height: 1.04; letter-spacing: -.035em; }
.case__open { text-align: left; }
.case__open::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.case:has(.case__open:focus-visible) { outline: 2px solid var(--focus); outline-offset: 8px; }
.case__open:focus-visible { outline: none; }
.case__meta { margin: 0; color: var(--fg-3); font-size: var(--t-small); }
.case__quote { margin: 0; font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.2; letter-spacing: -.02em; color: var(--accent); }
.case__quote p { margin: 0; }
.case__quote cite { display: block; margin-top: 6px; font-family: var(--f-text); font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--fg-3); }
.case__kpis { margin: 6px 0 0; display: flex; flex-wrap: nowrap; gap: 14px clamp(20px, 3vw, 44px); padding-top: 16px; border-top: 1px solid var(--line); }
.case__kpis div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; flex: 0 1 auto; min-width: 0; }
.case__kpis dd { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 38px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.case__kpis dt { font-size: 12.5px; color: var(--fg-3); max-width: 22ch; line-height: 1.35; }
.cases.is-all .case--lead { grid-column: 1 / -1; }
.cases.is-all .case--lead .case__media { aspect-ratio: 21 / 9; }
.cases.is-all .case--lead .case__info { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--g); row-gap: 14px; align-items: start; }
.cases.is-all .case--lead .case__head { grid-row: span 2; }
.cases.is-all .case--lead .case__title { font-size: var(--t-d2); }
.cases__empty { grid-column: 1 / -1; padding: 60px 0; color: var(--fg-2); display: grid; gap: 16px; justify-items: start; }
.work__more { margin-top: clamp(56px, 6vw, 96px); display: flex; justify-content: flex-end; }
@media (max-width: 899px) {
.work__title, .work__lead { grid-column: 1 / -1; }
.cases { grid-template-columns: minmax(0, 1fr); }
.cases.is-all .case--lead .case__media { aspect-ratio: 16 / 10; }
.cases.is-all .case--lead .case__info { grid-template-columns: 1fr; }
.filters__k { display: none; }
.filters { position: relative; }
.fdd { position: static; }
.fdd__menu { left: 0; right: 0; min-width: 0; }
.filters__status { flex-basis: 100%; margin: 6px 0 0; justify-content: space-between; }
}
.ms__grid { row-gap: var(--s-6); align-items: end; }
.ms__grid > .label { grid-column: 1 / -1; }
.ms__title { grid-column: 1 / span 7; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d1); line-height: .94; letter-spacing: -.05em; }
.ms__promise { grid-column: 9 / span 4; display: grid; gap: var(--s-5); justify-items: start; padding-bottom: .6em; }
.ms__claim { margin: 0; font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.2; letter-spacing: -.02em; }
.sl { margin-top: clamp(96px, 9vw, 168px); }
.sl__head { display: grid; gap: var(--s-4); margin-bottom: clamp(32px, 3vw, 52px); }
.sl__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d3); line-height: 1.08; letter-spacing: -.03em; }
.sl__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.sl__rows { --rule: var(--line-2); grid-column: 1 / span 8; list-style: none; margin: 0; padding: 0; }
.sr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "q fig" "q txt"; column-gap: var(--g); row-gap: var(--s-3); padding-block: clamp(24px, 2.3vw, 38px); outline-offset: -2px; }
.sr__n { grid-area: n; position: relative; font-family: var(--f-display); font-size: var(--t-small); color: var(--fg-3); padding-top: .55em; font-variant-numeric: tabular-nums; transition: color .4s; }
.sr__n::after { content: ""; position: absolute; left: 0; top: calc(.55em + 1.6em); width: 18px; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--e-expo); }
.sr.is-on .sr__n { color: var(--fg); }
.sr.is-on .sr__n::after { transform: none; }
.sr__q { grid-area: q; display: grid; gap: var(--s-2); align-content: start; }
.sr__qt { font-family: var(--f-display); font-size: var(--t-d3); line-height: 1.08; letter-spacing: -.03em; color: var(--fg-2); transition: color .5s var(--e-l); }
.sr.is-on .sr__qt { color: var(--fg); }
@media (min-width: 1200px) {
.sr__qt { white-space: nowrap; }
}
.sr__fig--pair { display: flex; flex-wrap: wrap; gap: 12px clamp(28px, 3vw, 56px); }
.sr__one { display: grid; gap: 14px; align-content: start; }
.sr__one .sr__cap { font-family: var(--f-text); font-size: var(--t-small); letter-spacing: 0; line-height: 1.4; }
.sr__fig { grid-area: fig; font-family: var(--f-display); font-size: var(--t-score); line-height: .9; letter-spacing: -.055em; }
.sr__fig .odo { --lh: .98em; }
.sr__txt { grid-area: txt; display: grid; gap: 6px; align-content: start; font-size: var(--t-small); color: var(--fg-2); }
.sr__cap { color: var(--fg); font-weight: 700; }
.sr__cap2 b { color: var(--fg); }
.sr__d { color: var(--fg-3); max-width: 44ch; }
.sr__src { margin-top: 4px; font-size: var(--t-xs); letter-spacing: .02em; color: var(--fg-3); }
.sr__img { display: none; }
.sl__win { grid-column: 9 / span 4; position: sticky; top: calc(var(--hd) + 28px); display: grid; gap: var(--s-4); }
.sl__frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: hidden; background: var(--navy); }
.sl__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; }
.sl__img.is-on { opacity: 1; visibility: visible; z-index: 1; }
.sl__img.is-in { z-index: 2; animation: swapIn 1s var(--e-out) both; }
@keyframes swapIn { from { opacity: 0; transform: scale(1.3) rotate(7deg); } to { opacity: 1; transform: none; } }
.sl__cap { display: grid; gap: 4px; font-size: var(--t-small); color: var(--fg-2); min-height: 4.2em; }
.sl__cap-k { color: var(--fg); font-weight: 700; }
.ev { margin-top: clamp(96px, 9vw, 168px); }
.ev__head { row-gap: var(--s-5); align-items: end; margin-bottom: clamp(40px, 4vw, 64px); }
.ev__head > .label { grid-column: 1 / -1; }
.ev__h { grid-column: 1 / span 6; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d2); line-height: 1; letter-spacing: var(--ls-d); text-wrap: balance; }
.ev__p { grid-column: 8 / span 5; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.tier { display: grid; gap: var(--s-3); align-content: start; }
.tier__fig { aspect-ratio: 4 / 3; border-radius: var(--r-media); overflow: hidden; background: var(--powder-2); }
.tier__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-expo); }
.tier__m { margin: var(--s-2) 0 0; font-family: var(--f-display); font-size: var(--t-small); letter-spacing: .2em; color: var(--accent); }
.tier__name { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d3); line-height: 1; letter-spacing: -.03em; }
.tier__d { margin: 0; color: var(--fg-2); max-width: 30ch; }
.tier__fig { position: relative; isolation: isolate; }
.tier__box { --c: var(--powder); --l: 14px; --t: 2px; position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 2px; outline: 1px solid rgba(255, 255, 255, .42); box-shadow: 0 0 0 200vmax rgba(5, 6, 12, .5);
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l);
  background-repeat: no-repeat; transition: opacity .7s var(--e-l), transform 1s var(--e-out), box-shadow .9s var(--e-l), outline-color .5s; transition-delay: calc(.25s + var(--i) * .16s); }
.tier__tag { position: absolute; left: -1px; bottom: calc(100% + 7px); display: flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 3px; background: var(--powder); color: var(--navy); font-family: var(--f-text); font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: opacity .5s var(--e-l), transform .7s var(--e-out); transition-delay: calc(.75s + var(--i) * .16s); }
.tier__box--tagdown .tier__tag { bottom: auto; top: calc(100% + 7px); }
.js:not(.rm) .tiers:not(.is-in) .tier__box { opacity: 0; transform: scale(1.35); box-shadow: 0 0 0 200vmax rgba(5, 6, 12, 0); }
.js:not(.rm) .tiers:not(.is-in) .tier__tag { opacity: 0; transform: translateY(5px); }
@media (hover: hover) {
.tiers.is-in .tier:hover .tier__box { box-shadow: 0 0 0 200vmax rgba(5, 6, 12, .26); outline-color: rgba(255, 255, 255, .7); transition-delay: 0s; }
}
.tier__m { display: flex; gap: .14em; font-size: 15px; letter-spacing: 0; }
.tier__m .is-off { opacity: .26; }
.pf { margin-top: clamp(80px, 7.4vw, 136px); }
.pf__k { margin-bottom: clamp(24px, 2.4vw, 40px); }
.pf__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.pf__card {
  --fg: var(--white); --fg-2: color-mix(in srgb, var(--white) 80%, transparent); --fg-3: color-mix(in srgb, var(--white) 66%, transparent); --accent: var(--powder);
  display: grid; grid-template-rows: auto 1fr; border-radius: calc(var(--r-media) * 2); overflow: hidden; background: var(--navy); color: var(--fg);
}
.pf__fig { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); }
.pf__fig img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--e-expo); }
@media (hover: hover) {
.pf__card:hover .pf__fig img { transform: none; }
}
.pf__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: clamp(22px, 2.2vw, 36px); }
.pf__cov { color: var(--accent); }
.pf__name { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d3); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.pf__name .x { color: var(--powder); }
.pf__line { margin: 0; color: var(--fg-2); }
.pf__body > :nth-last-child(2) { margin-bottom: var(--s-6); }
.pf__stats { align-self: stretch; margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); padding-top: var(--s-5); border-top: 1px solid color-mix(in srgb, var(--white) 16%, transparent); }
.pf__stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-2); min-width: 0; }
.pf__stats dd { font-family: var(--f-display); font-size: clamp(30px, 3vw, 54px); line-height: .95; letter-spacing: -.045em; }
.pf__stats dd .odo { --lh: 1em; }
.pf__stats dt { font-size: var(--t-xs); line-height: 1.35; color: var(--fg-2); max-width: 18ch; }
@media (max-width: 1023px) {
.pf__cards { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
.pf__stats { grid-template-columns: 1fr; row-gap: var(--s-4); }
.pf__stats div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.pf__stats dt { text-align: right; }
}
.miles { margin-top: clamp(96px, 9vw, 168px); }
.miles__head { row-gap: var(--s-4); margin-bottom: clamp(36px, 3.4vw, 56px); }
.miles__head > .label { grid-column: 1 / -1; }
.miles__h { grid-column: 1 / span 8; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d3); line-height: 1.08; letter-spacing: -.03em; }
.miles__rail { position: relative; height: 13px; }
.miles__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line-2); }
.miles__line { position: absolute; left: 0; right: 0; top: 5.5px; height: 2px; background: var(--fg); transform: scaleX(var(--draw, 1)); transform-origin: left; }
.miles__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--g); }
.mile { position: relative; display: grid; gap: 12px; align-content: start; padding-top: clamp(24px, 2.2vw, 36px); }
.mile > p:not(.mile__when), .mile__when > :not(.mile__dot) { transition: opacity .7s var(--e-l), transform .9s var(--e-rise); }
.js:not(.rm) .mile:not(.is-lit) .mile__what, .js:not(.rm) .mile:not(.is-lit) .mile__when > :not(.mile__dot) { opacity: .32; transform: translateY(8px); }
.mile__what { transition-delay: .08s; }
.mile__when { margin: 0; display: grid; gap: 10px; font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 30px); line-height: 1.05; letter-spacing: -.03em; color: var(--fg); white-space: nowrap; }
@media (max-width: 1099px) {
.mile__when { white-space: normal; }
}
.mile__dot { position: absolute; left: -2px; top: -13.5px; width: 13px; height: 13px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 30%, var(--bg)); box-shadow: 0 0 0 0 transparent; transition: background-color .5s var(--e-l), box-shadow .6s var(--e-l), transform .6s var(--e-rise); }
.mile.is-lit .mile__dot { background: var(--fg); }
.mile.is-lit:not(:has(+ .mile.is-lit)) .mile__dot { background: var(--fg); transform: scale(1.25); box-shadow: 0 0 0 7px color-mix(in srgb, var(--fg) 14%, transparent); }
.mile__n { font-family: var(--f-text); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; color: var(--accent); font-variant-numeric: tabular-nums; }
.mile__what { margin: 0; color: var(--fg-2); font-size: var(--t-ui); line-height: 1.5; max-width: 24ch; text-wrap: pretty; }
@media (max-width: 1023px) {
.ms__title { grid-column: 1 / -1; }
.ms__promise { grid-column: 1 / span 9; padding-bottom: 0; }
.sl__rows { grid-column: 1 / span 7; }
.sl__win { grid-column: 8 / span 5; }
.sr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "fig" "txt"; }
.ev__h, .ev__p { grid-column: 1 / -1; }
.miles__h { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
.ms__promise { grid-column: 1 / -1; }
.sl__rows { grid-column: 1 / -1; }
.sl__win { display: none; }
.sr { grid-template-areas: "q" "fig" "txt" "img"; }
.sr__img { grid-area: img; display: block; margin-top: var(--s-3); aspect-ratio: 4 / 3; border-radius: var(--r-media); overflow: hidden; background: var(--navy); }
.sr__img img { width: 100%; height: 100%; object-fit: cover; }
.sr__n::after { display: none; }
.tiers { grid-template-columns: repeat(3, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scroll-padding-inline: var(--m); }
.tiers::-webkit-scrollbar { display: none; }
.tier { scroll-snap-align: start; }
.miles__rail { display: none; }
.miles__list { grid-template-columns: 1fr; border-left: 1px solid var(--line-2); padding-left: var(--s-5); row-gap: var(--s-6); }
.mile { padding-top: 0; }
.mile__dot { left: calc(-1 * var(--s-5) - 5px); top: 3px; }
}
.sr__pk { display: none; }
@media (max-width: 759px) {
.sr__img { position: relative; }
.sr__pk { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 28px 12px 10px; background: linear-gradient(color-mix(in srgb, var(--night) 0%, transparent), color-mix(in srgb, var(--night) 72%, transparent)); color: var(--white); font-size: var(--t-xs); font-weight: 700; }
}
.svc { padding-bottom: clamp(56px, 6vw, 112px); }
.svc__intro { row-gap: 26px; align-items: end; padding-bottom: clamp(8px, 1vw, 16px); }
.svc__intro .label { grid-column: 1 / -1; }
.svc__h { grid-column: 1 / span 8; }
.svc__lead { grid-column: 9 / span 4; }
.svc__track { position: relative; height: calc((var(--n) - 1) * 78vh + 100vh); margin-top: calc(-1 * var(--hd)); }
.svc__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--hd); }
.svc__grid { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; align-content: center; }
.svc__text { grid-column: 1 / span 4; align-self: stretch; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.svc__text .credit { margin-top: auto; flex-wrap: wrap; row-gap: 6px; white-space: normal; }
.svc__text .credit__body { flex-wrap: wrap; row-gap: 6px; }
.svc__count { margin: 0; display: flex; align-items: center; gap: .6em; color: var(--accent); }
.svc__nums { display: inline-grid; }
.svc__num { grid-area: 1 / 1; overflow: hidden; }
.svc__num > span, .svc__t .ln > span { display: block; transform: translateY(120%); transition: transform .9s var(--e-line); }
.svc__num.is-past > span, .svc__t.is-past .ln > span { transform: translateY(-120%); }
.svc__num.is-on > span, .svc__t.is-on .ln > span { transform: none; }
.svc__t .ln > span { transition-delay: calc(var(--i, 0) * 80ms); }
.svc__title { margin: 0; display: grid; font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 80px); line-height: 1.02; letter-spacing: -.045em; }
.svc__t { grid-area: 1 / 1; align-self: end; display: block; white-space: nowrap; }
.svc__t .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.svc__bodies { display: grid; }
.svc__body { grid-area: 1 / 1; display: grid; gap: 22px; align-content: start; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--e-l), transform .6s var(--e-rise); pointer-events: none; }
.svc__body.is-on { opacity: 1; transform: none; pointer-events: auto; }
.svc__body p { margin: 0; }
.svc__desc { color: var(--fg-2); max-width: 44ch; }
.svc__cta { align-self: flex-start; }
.svc__media { grid-column: 5 / span 8; margin-left: var(--g); align-self: start; display: grid; justify-items: end; gap: 14px; min-width: 0; }
.svc__text .credit { width: auto; max-width: 100%; }
@media (max-width: 1199px), (max-height: 760px) {
.svc__text .credit { --cf: 12px; gap: 14px; flex-wrap: nowrap; }
.svc__text .credit__body { flex-wrap: nowrap; }
.svc__text .credit__k, .svc__text .credit__n { display: none; }
}
.svc__frame { position: relative; aspect-ratio: 16 / 9; justify-self: end; width: min(100%, calc((100svh - 280px) * 16 / 9)); max-width: 100%; overflow: hidden; background: var(--night); }
.svc__clip { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); }
.svc__clip:first-child { clip-path: inset(0 0 0 0); }
.svc__clip video, .svc__clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__foot { flex: none; padding-bottom: calc(var(--r) + clamp(18px, 3.2vh, 36px)); }
.svc__index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--g); }
.svc__tab { position: relative; display: flex; align-items: baseline; gap: 10px; min-width: 0; padding-top: 16px; text-align: left; color: var(--fg-3); transition: color .4s var(--e-l); }
.svc__tab:hover, .svc__tab[aria-selected="true"] { color: var(--fg); }
.svc__bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; background: var(--line); }
.svc__bar i { display: block; height: 100%; background: currentColor; transform: scaleX(var(--p, 0)); transform-origin: left; transition: background-color .4s var(--e-l); }
.svc__tab:not([aria-selected="true"]) .svc__bar i { background: var(--line-2); }
.svc__ix { color: var(--accent); }
.svc__tn { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc.is-static .svc__track { height: auto; margin-top: 0; }
.svc.is-static { padding-bottom: var(--sec); }
.svc.is-static .svc__stage { position: relative; height: auto; padding-block: clamp(40px, 4vw, 64px) 8px; }
.svc.is-static .svc__foot { padding-top: 28px; }
@media (max-width: 899px) {
.svc__h, .svc__lead { grid-column: 1 / -1; }
.svc__grid { row-gap: 18px; }
.svc__media { grid-column: 1 / -1; order: -1; margin-left: 0; justify-items: stretch; }
.svc__frame, .svc__text .credit { width: 100%; }
.svc__text { grid-column: 1 / -1; gap: 14px; }
.svc__title { font-size: clamp(28px, 7.4vw, 44px); }
.svc__desc { font-size: 14.5px; }
.svc__tn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.svc__tab { justify-content: flex-start; padding-top: 12px; }
}
@media (max-width: 599px) {
.svc__text .credit__k { display: none; }
}
.cr__head { row-gap: var(--s-6); }
.cr__head > .label { grid-column: 1 / -1; }
.cr__title { grid-column: 1 / span 10; }
.bg__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--block); padding-bottom: clamp(24px, 2.2vw, 36px); }
.bg__k { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-3); }
.bg__tag { display: inline-grid; height: 28px; padding: 0 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); overflow: hidden; align-items: center; }
.bg__tag-t { display: block; white-space: nowrap; }
.bgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bc { position: relative; height: clamp(96px, 8.6vw, 140px); transition: opacity .5s var(--e-dim); }
.bc::after { content: ""; position: absolute; inset: 0; outline: 1px solid var(--fg); outline-offset: -1px; opacity: .14; pointer-events: none; }
.bc::before, .bc__x { content: ""; position: absolute; z-index: 2; width: 10px; height: 10px; pointer-events: none;
  background: linear-gradient(var(--fg), var(--fg)) center / 100% 1px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1px 100% no-repeat; opacity: .8; }
.bc::before { left: -5px; top: -5px; }
.bc__x { right: -5px; bottom: -5px; }
.bgrid.is-hover .bc:not(.is-on) { opacity: .4; }
.bc__btn { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-3); overflow: hidden; text-align: center; color: var(--fg); }
.bc__btn:focus-visible { outline-offset: -4px; }
.bc__name { position: relative; z-index: 1; font-family: var(--f-display); font-size: clamp(14px, 1.22vw, 20px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; transition: letter-spacing .6s var(--e-l); }
.bc.is-on .bc__name { letter-spacing: .1em; }
.bc__img { position: absolute; inset: 1px; opacity: 0; visibility: hidden; transform: scale(1.3) rotate(7deg); transition: opacity .5s var(--e-out), transform 1s var(--e-out), visibility 0s .5s; }
.bc__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.bc.is-on .bc__img { opacity: 1; visibility: visible; transform: none; transition: opacity 1s var(--e-out), transform 1s var(--e-out), visibility 0s; }
.bc--scene .bc__btn::after { content: ""; position: absolute; right: 12px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--powder); opacity: .9; }
.bc__play { position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% 0; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--navy) 38%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 16%, transparent); font-family: var(--f-text); font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; opacity: 0; scale: .5; transition: opacity .3s var(--e-draw), scale .3s var(--e-draw); }
.bc__play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent currentColor; }
.bc--scene .bc__name { transition: letter-spacing .6s var(--e-l), translate .6s var(--e-out); }
.bc--scene.is-on .bc__name { translate: 0 -18px; }
.bgrid { --lu: 1cqh; --lcap: 80cqw; }
.bc__btn { container-type: size; }
.bc--logo .bc__name { display: block; line-height: 0; }
.bc__logo { display: block; width: min(calc(var(--lw) * var(--lu)), var(--lcap)); max-width: none; height: auto; }
.bc--logo.bc--scene.is-on .bc__name { translate: 0 -18px; }
.bc--logo .bc__play { top: calc(50% + (min(calc(var(--lw) * var(--lu)), var(--lcap)) / var(--la) + 8px) / 2 - 14px); }
.bc--scene.is-on .bc__play { opacity: 1; scale: 1; transition-delay: .1s; }
.bg__titles { margin: var(--s-5) 0 0; min-height: 3.2em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-4); font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.35; letter-spacing: -.02em; color: var(--fg-2); }
.bg__titles-k { font-family: var(--f-text); font-size: var(--t-small); letter-spacing: 0; color: var(--fg-3); }
.bg__titles-b { color: var(--accent); }
.bg__titles .bg__watch { font-family: var(--f-text); font-size: var(--t-small); letter-spacing: 0; }
.bg__titles > span { display: inline-block; }
.bg__t:not(:last-of-type)::after { content: "·"; padding-left: .55em; color: var(--mute); }
.bg__watch { align-self: center; }
.bg__titles.is-in > span { animation: titleIn .6s var(--e-dim) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes titleIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 1099px) {
.cr__title { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
.bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
.bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc { height: 84px; }
.bc__name { font-size: 12.5px; letter-spacing: .04em; }
.bgrid { --lu: 1.12cqh; --lcap: 84cqw; }
}
@media (max-width: 599px) {
.bg__bar { flex-wrap: wrap; }
}
.arc { margin-top: 4px; }
.arc__toggle { --ico: 30px; --ico-x: 6px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; height: var(--ctl-s); padding: 0 18px 0 var(--ico-x); gap: 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--t-small); transition: box-shadow .5s var(--e-std), color .45s var(--e-l); }
.arc__plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); color: var(--bg); transition: transform var(--d-3) var(--e-l), background-color .45s var(--e-l), color .45s var(--e-l); }
.arc__toggle:is(:hover, :focus-visible) .arc__plus { background: var(--flood-fg); color: var(--flood); }
.arc__plus svg { width: 12px; height: 12px; }
.arc__toggle[aria-expanded="true"] .arc__plus { transform: rotate(135deg); }
.arc__panel { margin-top: var(--s-6); clip-path: inset(0 0 100% 0); transition: clip-path var(--d-4) var(--e-wipe); }
.arc__panel.is-open { clip-path: inset(0 0 -1% 0); }
.arc__list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: var(--g); }
.arc__g { break-inside: avoid; padding: var(--s-3) 0 14px; border-top: 1px solid var(--line); }
.arc__b { margin: 0 0 6px; color: var(--accent); letter-spacing: .16em; }
.arc__n { margin-left: 5px; font-family: var(--f-text); font-weight: 400; font-size: 11px; letter-spacing: 0; line-height: 0; vertical-align: super; color: var(--fg-3); }
.arc__t { margin: 0; font-family: var(--f-text); font-size: var(--t-ui); line-height: 1.6; letter-spacing: 0; color: var(--fg-2); text-wrap: pretty; }
.arc__i { display: inline-block; max-width: 100%; }
.arc__q { color: var(--fg-3); font-size: .9em; }
.arc__dot { padding: 0 .1em 0 .45em; color: var(--mute); }
@media (max-width: 1099px) {
.arc__list { columns: 3; }
}
@media (max-width: 759px) {
.arc__list { columns: 2; }
.arc__t { font-size: var(--t-xs); }
}
.st11 { margin-top: clamp(56px, 5.6vw, 96px); padding-top: var(--s-5); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--s-4); }
.st11__k { grid-column: 1 / span 3; color: var(--fg-3); }
.st11__l { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: .9em; row-gap: .3em; font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.3; letter-spacing: -.015em; color: var(--fg-2); }
.st11__n:not(:last-child)::after { content: "·"; margin-left: .9em; color: var(--mute); }
.st11__l:has(.st11__n--logo) { align-items: center; column-gap: 1.7em; row-gap: 1.1em; }
.st11__l:has(.st11__n--logo) .st11__n::after { content: none; }
.st11__n--logo { display: flex; line-height: 0; }
.st11__logo { display: block; width: auto; max-width: none; vertical-align: 0 !important; }
@media (max-width: 1023px) {
.st11__k, .st11__l { grid-column: 1 / -1; }
}
.ins__head { row-gap: 20px; align-items: end; }
.ins__head .h-d2 { grid-column: 1 / span 6; }
.ins__aside { grid-column: 7 / span 6; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.ins__aside .lead { max-width: 30ch; }
.ins__body { margin-top: clamp(40px, 4.4vw, 80px); align-items: start; row-gap: 56px; }
.feat { grid-column: 1 / span 5; position: relative; display: grid; gap: 18px; align-content: start; }
.feat__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--indigo); }
.feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; filter: grayscale(1) contrast(1.06); transition: filter 1.4s var(--e-l), transform 1.6s var(--e-expo); }
.feat__tone { position: absolute; inset: 0; background: var(--indigo); mix-blend-mode: lighten; transition: opacity 1.4s var(--e-l); }
.feat.is-bloom .feat__media img, .feat:hover .feat__media img, .feat:focus-within .feat__media img { filter: none; }
.feat.is-bloom .feat__tone, .feat:hover .feat__tone, .feat:focus-within .feat__tone { opacity: 0; }
@media (hover: hover) {
.feat:hover .feat__media img { transform: scale(1.03); }
}
.feat__body { display: grid; gap: 12px; justify-items: start; }
.feat__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 38px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.feat__link { text-decoration: none; color: inherit; }
.feat__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.feat__dek { margin: 0; color: var(--fg-2); max-width: 46ch; }
.feat__cta { position: relative; margin: 4px 0 0; display: inline-flex; align-items: center; gap: 10px; padding-block: 4px; font-size: 15px; }
.feat__cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .6s var(--e-l); }
.feat:hover .feat__cta::after { transform: scaleX(1); }
.feat:has(.feat__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 8px; }
.feat__link:focus-visible { outline: none; }
.ins__latest { grid-column: 7 / span 6; }
.ins__list { list-style: none; margin: 18px 0 0; padding: 0; }
.ins__item { position: relative; }
.ins__item::before, .ins__item:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-2); transform-origin: right; transition: transform 1.5s var(--e-expo) calc(.1s + var(--n, 0) * .1s); }
.ins__item::before { top: 0; }
.ins__item:last-child::after { bottom: 0; }
.js:not(.rm) .ins__list.is-pending .ins__item::before, .js:not(.rm) .ins__list.is-pending .ins__item::after { transform: scaleX(0); }
.ins__row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 24px; padding-block: clamp(18px, 1.8vw, 26px); text-decoration: none; color: var(--fg); transition: opacity .5s var(--e-dim); }
@media (hover: hover) {
.ins__list:has(.ins__row:hover) .ins__row:not(:hover) { opacity: .26; }
}
.ins__brand { grid-column: 1; color: var(--accent); }
.ins__title { grid-column: 1; font-family: var(--f-display); font-size: clamp(18px, 1.5vw, 25px); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.ins__arr { grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative; width: 24px; height: 24px; overflow: hidden; }
.ins__arr svg { position: absolute; inset: 0; width: 24px; height: 24px; transition: transform 1.2s var(--e-quart); }
.ins__arr svg + svg { transform: translate(-100%, 100%); }
.ins__row:hover .ins__arr svg:first-child, .ins__row:focus-visible .ins__arr svg:first-child { transform: translate(100%, -100%); }
.ins__row:hover .ins__arr svg + svg, .ins__row:focus-visible .ins__arr svg + svg { transform: none; }
@media (max-width: 899px) {
.ins__head .h-d2, .ins__aside, .feat, .ins__latest { grid-column: 1 / -1; }
.ins__aside { justify-content: flex-start; }
.feat__media { aspect-ratio: 4 / 3; }
}
.close { padding: 0; overflow: clip; }
.close__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.close__bg video { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; transform-origin: 0% 32%; transform: translate3d(0, var(--py, 0px), 0) translate(-6%, -20%) scale(1.32); }
.close__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 74% 22%, transparent 0 24%, rgba(0, 0, 0, .52) 72%), linear-gradient(to bottom, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .44) 40%, rgba(0, 0, 0, .84) 70%, #000 92%); }
.close__content { position: relative; padding-block: var(--sec) clamp(20px, 2vw, 36px); display: grid; gap: 26px; justify-items: start; }
.close__title { font-size: clamp(56px, 10.4vw, 196px); line-height: .9; letter-spacing: -.05em; }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 10px; }
@media (min-width: 900px) {
.close__content { grid-template-columns: minmax(0, 1fr) var(--cta-w, auto); align-items: end; column-gap: 0; }
.close__content > .label { grid-column: 1 / -1; }
.close__title { grid-column: 1; }
.close__actions { grid-column: 2; margin: 0 0 clamp(8px, 1.3vw, 26px); justify-content: flex-start; }
}
.ft__motion { justify-self: start; text-align: left; color: inherit; font: inherit; transition: color .3s; }
.ft__motion:hover, .ft__motion:focus-visible { color: var(--fg); }
.ft { position: relative; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.ft__grid { row-gap: 36px; padding-top: clamp(48px, 4.6vw, 88px); }
.ft__logo { grid-column: 1 / span 3; display: block; width: clamp(140px, 11vw, 184px); color: var(--fg); }
.ft__logo svg { width: 100%; height: auto; display: block; }
.ft__col { grid-column: span 3; display: grid; gap: 10px; align-content: start; justify-items: start; font-size: var(--t-ui); }
.ft__col > * { min-width: 0; overflow-wrap: break-word; }
.ft__col .label { color: var(--fg-3); }
.ft__col a { position: relative; text-decoration: none; color: var(--fg-2); transition: color .3s, opacity .5s var(--e-dim); }
.ft__col a:hover, .ft__col a:focus-visible { color: var(--fg); }
.ft__col address { font-style: normal; color: var(--fg-2); line-height: 1.25; }
.ft__mail { line-height: 1.25; }
.ft__col.ft__col--wide { grid-column: span 3; }
.ft__sub { margin-top: 22px; }
.ft__motion { display: inline-flex; align-items: center; gap: 8px; }
.ft__wave { width: 18px; height: 18px; overflow: visible; flex: none; }
.ft__end { display: flex; align-items: center; gap: var(--s-7); }
.ft__mail { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ft__mail .copy { margin-block: -6px; }
@media (hover: hover) and (pointer: fine) {
.ft__mail .copy { opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--e-l), transform .4s var(--e-l), box-shadow .3s, color .3s, background-color .3s; }
.ft__mail:hover .copy, .ft__mail:focus-within .copy { opacity: 1; transform: none; }
}
.ft__base { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-top: clamp(32px, 3vw, 52px); padding-top: 18px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: var(--t-small); }
.ft__base p { margin: 0; }
@media (min-width: 900px) {
.ft__base { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.ft__base > :last-child { justify-self: end; }
}
.ft__base a { position: relative; color: inherit; text-decoration: none; transition: color .3s; }
.ft__base a:hover, .ft__base a:focus-visible { color: var(--fg); }
.ft__col, .ft__base { position: relative; }
.ft__col a, .ft__base a { z-index: 1; display: inline-flex; align-items: center; padding: 6px 12px; margin: -6px -12px; border-radius: var(--r-pill); }
.ft__pill { grid-area: 1 / 1; position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 11%, transparent); opacity: 0; pointer-events: none; transition: left var(--d-1) var(--e-std), top var(--d-1) var(--e-std), width var(--d-1) var(--e-std), height var(--d-1) var(--e-std), opacity .15s ease; }
.is-hover > .ft__pill { opacity: 1; }
.ft__base > :last-child { grid-column: 3; }
.ft__top { display: inline-flex; align-items: center; gap: 8px; }
.ft__top svg { width: .8em; height: .8em; flex: none; transition: transform .3s var(--e-out); }
.ft__top:hover svg, .ft__top:focus-visible svg { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
.ft__top svg { transition: none; }
}
@media (max-width: 1099px) {
.ft__logo { grid-column: 1 / -1; }
.ft__col, .ft__col.ft__col--wide { grid-column: span 4; }
}
@media (max-width: 899px) {
.ft__col { grid-column: span 6; }
.ft__col.ft__col--wide { grid-column: 1 / -1; }
}
.drawer { position: fixed; inset: 0; z-index: 96; visibility: hidden; transition: visibility 0s .6s; }
.drawer.is-open { visibility: visible; transition: visibility 0s; }
.drawer__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--black) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(.9); backdrop-filter: blur(18px) saturate(.9); opacity: 0; transition: opacity .5s var(--e-io); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; left: 50%; top: 50%; width: min(820px, calc(100vw - 48px)); max-height: calc(100svh - 48px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r); background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 40px 120px color-mix(in srgb, var(--black) 60%, transparent);
  opacity: 0; transform: translate(-50%, calc(-50% + 48px)) scale(.98); transition: transform .55s var(--e-io), opacity .3s var(--e-io);
  padding: clamp(24px, 3vw, 48px) clamp(22px, 3.4vw, 56px) clamp(28px, 3.4vw, 52px);
  display: grid; gap: 28px; align-content: start;
}
.drawer.is-open .drawer__panel { opacity: 1; transform: translate(-50%, -50%); }
.drawer__panel { scrollbar-width: none; }
.drawer__panel::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
.drawer__panel { width: min(1280px, calc(100vw - 80px)); padding: clamp(36px, 3.6vw, 64px) clamp(36px, 4vw, 72px); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "top top" "title form" "details form"; grid-template-rows: auto auto 1fr; column-gap: clamp(48px, 6vw, 112px); row-gap: 24px; }
.drawer__top { grid-area: top; }
#drawerTitle { grid-area: title; margin: 0; font-size: clamp(40px, 4vw, 64px); line-height: .98; }
.drawer__panel > .form { grid-area: form; align-self: start; }
.drawer__panel > .details { grid-area: details; align-self: end; grid-template-columns: 1fr; padding-top: 20px; gap: 14px; }
.details dd { font-size: 15px; }
.form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(24px, 2.4vw, 40px); }
.form > .form__chips, .form > .field:has(textarea), .form > .form__row { grid-column: 1 / -1; }
.field textarea { min-height: 120px; }
.form__chips div { gap: 8px; }
.chip { height: 38px; padding: 0 16px; }
}
@media (min-width: 900px) and (max-height: 760px) {
.drawer__panel { row-gap: 14px; padding-block: 24px 28px; }
.form { gap: 14px var(--g); }
.field textarea { min-height: 72px; }
.chip { height: 32px; }
}
@media (max-width: 699px) {
.drawer__panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92svh; border-radius: var(--r) var(--r) 0 0; transform: translateY(100%); opacity: 1; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.drawer.is-open .drawer__panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.drawer__panel { transition: opacity .2s linear; }
}
.drawer .form { align-content: start; }
.aud { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-self: start; height: 50px; box-sizing: border-box; padding: 4px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); grid-column: 1 / -1; }
.aud__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--fg); transition: transform .5s var(--e-io); }
.form[data-aud="production"] .aud__pill { transform: translateX(100%); }
.aud__opt { position: relative; z-index: 1; height: 42px; border-radius: var(--r-pill); font-size: 14px; color: var(--fg-2); transition: color .4s var(--e-l); }
.aud__opt[aria-checked="true"] { color: var(--bg); }
.aud__opt:not([aria-checked="true"]):hover { color: var(--fg); }
.form [data-for] { animation: audIn .5s var(--e-rise) both; }
.form[data-aud="brand"] [data-for="production"], .form[data-aud="production"] [data-for="brand"] { display: none; }
@keyframes audIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.form [data-for] { animation: none; }
.aud__pill { transition: none; }
}
.field__hint { text-transform: none; letter-spacing: 0; font-family: var(--f-text); font-weight: 400; font-size: 12px; color: var(--fg-3); }
.drawer__intro { margin: 0; color: var(--fg-2); font-size: 17px; line-height: 1.5; max-width: 30ch; text-wrap: pretty; }
@media (min-width: 900px) {
.drawer__panel { grid-template-areas: "top top" "title form" "intro form" "details form"; grid-template-rows: auto auto auto 1fr; }
.drawer__intro { grid-area: intro; }
.form > .field--wide { grid-column: 1 / -1; }
}
.drawer .details { gap: 20px; }
.drawer .details > div { gap: 6px; }
.drawer .details dd { flex-wrap: nowrap; gap: 12px; font-size: 16px; white-space: nowrap; }
.drawer .details dd .copy { flex: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.drawer__close { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; }
.drawer__close svg { width: 12px; height: 12px; }
.form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; }
.field label, .form__chips legend, .details dt { color: var(--fg-3); }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--fg); font: inherit; font-size: 17px; padding: 10px 0 12px; border-radius: 0; resize: vertical; transition: border-color .3s; }
.field textarea { min-height: 110px; resize: none; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--fg); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--error); }
.field { position: relative; }
.field__err { position: absolute; left: 0; right: 0; top: calc(100% + 6px); font-size: 13px; line-height: 1.3; color: var(--error); pointer-events: none; }
.field:has(textarea) { margin-bottom: 8px; }
.form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__status { margin: 0; color: var(--fg-2); font-size: 14px; max-width: 46ch; }
.details { margin: 0; display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.details > div { display: grid; gap: 4px; }
.details dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 17px; }
.details address { font-style: normal; }
.form__chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.form__chips legend { padding: 0 0 12px; }
.form__chips div { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); display: inline-flex; align-items: center; transition: background-color .35s var(--e-l), color .35s var(--e-l), box-shadow .35s; }
.chip:hover:not([aria-pressed="true"]) { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 130;
  max-width: calc(100vw - 2 * var(--m)); padding: 11px 18px; border-radius: 999px;
  background: var(--white); color: var(--navy); font-size: 13.5px; line-height: 1.35; text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28); pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s linear, transform .6s var(--e-ui);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.qv { position: fixed; inset: 0; z-index: 94; background: var(--bg); color: var(--fg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .45s var(--e-l); }
.qv.is-open { opacity: 1; }
.qv__bar { position: sticky; top: 0; z-index: 5; height: calc(72px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.qv__nav { display: flex; gap: 8px; }
.qv__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-width: 42px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; transition: box-shadow .5s var(--e-std); }
.qv__btn svg { width: 14px; height: 14px; }
.qv__btn:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.qv__body { display: grid; gap: clamp(36px, 3.6vw, 64px); padding-block: clamp(32px, 3.4vw, 56px) clamp(56px, 6vw, 104px); transition: opacity .3s var(--e-l), transform .5s var(--e-rise); }
.qv.is-swapping .qv__body { opacity: 0; transform: translateY(10px); transition-duration: .2s; }
.qv__head { align-items: end; row-gap: 28px; }
.qv__titles { grid-column: 1 / span 6; display: grid; gap: 14px; }
.qv__meta { margin: 0; color: var(--fg-3); font-size: var(--t-small); }
.qv__stats { grid-column: 7 / span 6; margin: 0; display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 0; align-self: end; }
.qv__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 4px clamp(10px, 1.2vw, 28px) 2px; border-left: 1px solid var(--line-2); min-width: 0; }
.qv__stats dd { margin: 0; font-family: var(--f-display); font-size: clamp(28px, 2.6vw, 46px); line-height: .95; letter-spacing: -.045em; white-space: nowrap; }
.qv__stats dt { color: var(--fg-2); font-size: 13.5px; line-height: 1.4; max-width: 22ch; text-wrap: pretty; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1199px) {
.qv__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}
.qv__media { position: relative; }
.qv__frame { position: relative; aspect-ratio: 2 / 1; max-width: 100%; overflow: hidden; background: var(--panel); }
.qv__frame video, .qv__frame img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }
.qv__play { position: absolute; left: clamp(26px, 2.6vw, 40px); bottom: clamp(26px, 2.6vw, 40px); z-index: 3; --fg: var(--white); --bg: var(--navy); background: color-mix(in srgb, var(--black) 42%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 34%, transparent); }
.qv__story { align-items: start; row-gap: 32px; }
.qv__side { grid-column: 1 / span 4; display: grid; gap: 24px; align-content: start; }
.qv__main { grid-column: 6 / span 7; display: grid; gap: 24px; align-content: start; }
.qv__quote { margin: 0; font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.2; letter-spacing: -.02em; color: var(--accent); }
.qv__quote p { margin: 0; }
.qv__quote cite { display: block; margin-top: 8px; font-family: var(--f-text); font-style: normal; font-size: 13px; color: var(--fg-3); letter-spacing: 0; }
.qv__quote[hidden], .qv__note:empty, .qv__summary:empty, .qv__meta:empty { display: none; }
.qv__note { color: var(--fg); padding: 8px 12px; justify-self: start; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 999px; font-size: var(--t-label-s); }
.qv__summary { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: var(--fg); max-width: 52ch; }
.qv__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.qv__list li { position: relative; padding-left: 24px; color: var(--fg-2); max-width: 64ch; }
.qv__list li::before { content: "+"; position: absolute; left: 0; top: -.05em; color: var(--accent); }
.qv__facets { margin: 0; display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.qv__facets div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; align-items: baseline; }
.qv__facets dt { color: var(--fg-3); font-size: var(--t-label-s); }
.qv__facets dd { margin: 0; font-size: 14px; }
.qv__stills { display: grid; gap: 16px; }
.qv__gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.qv__gallery li { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.qv__gallery img { display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; object-fit: cover; transition: transform 1.4s var(--e-expo); }
@media (hover: hover) {
.qv__gallery li:hover img { transform: scale(1.04); }
}
.qv__end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.qv__next { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; gap: 8px 16px; text-align: right; }
.qv__next .label { grid-column: 1; color: var(--fg-3); }
.qv__next-t { grid-column: 1; font-family: var(--f-display); font-size: var(--t-d3); line-height: 1.04; letter-spacing: -.035em; }
.qv__next svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; transition: transform .6s var(--e-l); }
.qv__next:hover svg { transform: translateX(6px); }
@media (max-width: 899px) {
.qv__titles, .qv__stats, .qv__side, .qv__main { grid-column: 1 / -1; }
.qv__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
.qv__frame { aspect-ratio: 16 / 10; }
.qv__play { position: relative; left: 0; bottom: 0; margin-top: 14px; --fg: inherit; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line-2); }
}
@media (max-width: 599px) {
.qv__btn-t, .qv__k { display: none; }
.qv__gallery { grid-template-columns: 1fr 1fr; }
.qv__gallery li:first-child { grid-column: 1 / -1; }
.qv__end { flex-direction: column; align-items: stretch; }
.qv__next { justify-items: start; text-align: left; }
}
.player { position: fixed; inset: 0; z-index: 100; background: var(--black); opacity: 0; transition: opacity .5s var(--e-fade); }
.player.is-open { opacity: 1; }
.player { --pt: calc(76px + env(safe-area-inset-top, 0px)); --sb: env(safe-area-inset-bottom, 0px); --vh: 100vh; --ar: 2.6446;
  --px: max(var(--m), (100vw - var(--pw)) / 2); }
@supports (height: 100dvh) {
.player { --vh: 100dvh; }
}
.player.has-credits { --pw: min(100vw, (var(--vh) - var(--pt) - 108px - var(--sb)) * var(--ar) / (1 + .0981 * var(--ar)));
  --pb: calc(108px + var(--sb) + .024 * var(--pw) + max(36px, .0741 * var(--pw))); }
.player:not(.has-credits) { --pb: calc(108px + var(--sb)); --pw: min(100vw, (var(--vh) - var(--pt) - var(--pb)) * var(--ar)); }
.player__video { position: absolute; left: 0; right: 0; top: var(--pt); bottom: var(--pb); width: 100%; height: calc(100% - var(--pt) - var(--pb)); object-fit: contain; background: var(--black); }
.player.has-credits .player__video { object-position: 50% 100%; }
@media (max-aspect-ratio: 1/1) {
.player__video { object-position: 50% 100%; }
}
.player__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top, 0px)) var(--px) calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .7)); transition: opacity .25s linear; }
.player.is-idle .player__ui { opacity: 0; }
.player.is-idle { cursor: none; }
.player__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.player__close { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--white); color: var(--navy); font-size: 14px; font-weight: 700; }
.player__close svg { width: 12px; height: 12px; }
.player__bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.player__btn { height: 40px; min-width: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.player__btn svg { width: 12px; height: 12px; }
.player__time { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player__track { --tk: 2px; position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.player__track:hover, .player__track.is-scrub { --tk: 4px; }
.player__track::before { content: ""; position: absolute; left: 0; right: 0; height: var(--tk); border-radius: 2px; background: color-mix(in srgb, var(--white) 16%, transparent); transition: height .2s var(--e-out); }
.player__fill { position: absolute; left: 0; height: var(--tk); width: 0; border-radius: 2px; background: var(--white); transition: height .2s var(--e-out); }
.player__marks { position: absolute; inset: 0; pointer-events: none; }
.player__marks i { position: absolute; top: 50%; width: 1px; height: 8px; translate: -50% -50%; background: color-mix(in srgb, var(--white) 46%, transparent); transition: height .2s var(--e-out), width .2s var(--e-out), background-color .2s linear; }
.player__marks i.is-cur { background: var(--white); }
.player__marks i.is-near { width: 2px; height: 16px; background: var(--white); }
.player__tip { position: absolute; bottom: calc(100% + 10px); left: 0; transform: translateX(-50%); padding: 7px 11px; border-radius: 999px; background: var(--white); color: var(--navy); font-size: 12.5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s linear; }
.player__track:hover .player__tip, .player__track.is-scrub .player__tip { opacity: 1; }
.player__tip:empty { display: none; }
@media (pointer: coarse) {
.player__track { height: 36px; }
}
.player__credit { transition: opacity .3s var(--e-out); }
.player:has(.player__track:hover) .player__credit, .player:has(.player__track.is-scrub) .player__credit { opacity: .15; }
.player__credit { --cf: max(12px, calc(var(--pw) * .0247)); position: absolute; left: var(--px); right: var(--px); bottom: calc(72px + .012 * var(--pw) + var(--sb)); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.player__credit .credit__k { line-height: 14px; translate: none; }
.player__credit .credit__body { justify-content: center; height: calc(var(--cf) * 3); gap: calc(var(--cf) * .8); }
.player__credit .credit__t:not(.is-logo) { font-size: calc(var(--cf) * 1.3); }
.player__credit .credit__n:not(.is-logo) { font-size: max(12px, calc(var(--cf) * .6)); color: var(--fg-2); }
@media (max-width: 599px) {
.player__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
.player__time { display: none; }
}
.cursor { position: fixed; left: 0; top: 0; z-index: 110; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; pointer-events: none; display: grid; place-items: center; background: color-mix(in srgb, var(--navy) 38%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--white); font-size: 12.5px; line-height: 1.2; text-align: center; translate: -999px -999px; will-change: translate; opacity: 0; scale: .1; transition: opacity .4s var(--e-io), scale .4s var(--e-io); }
.cursor.is-on { opacity: 1; scale: 1; }
.cursor span { padding: 0 10px; transition: opacity .25s var(--e-io); }
.cursor.is-dot, .cursor.is-link { opacity: 1; background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; mix-blend-mode: difference; }
.cursor.is-dot { scale: .11; }
.cursor.is-link { scale: .42; }
.cursor.is-dot span, .cursor.is-link span { opacity: 0; }
@media (hover: none), (pointer: coarse) {
.cursor { display: none; }
}
.fade { position: fixed; inset: 0; z-index: 125; background: var(--black); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.fade.is-on, html.is-fading .fade { opacity: 1; }
.fade.is-on { pointer-events: auto; }
.js:not(.rm) .rv-lines.is-pending .ln > span { transform: translateY(105%); }
.js:not(.rm) .rv-lines .ln > span { transition: transform 1s var(--e-line); transition-delay: calc(var(--i, 0) * 80ms); }
.js:not(.rm) .rv.is-pending { opacity: 0; transform: translateY(40px); }
.js:not(.rm) .rv { transition: opacity .8s var(--e-rise), transform .8s var(--e-rise); transition-delay: calc(var(--d, 0) * 1s); }
.js:not(.rm) .rv-media.is-pending > img, .js:not(.rm) .rv-media.is-pending > video { filter: blur(18px); transform: scale(1.08); opacity: .35; }
.js:not(.rm) .rv-card { transition: clip-path 2s var(--e-expo), transform 2s var(--e-expo); }
.js:not(.rm) .rv-card .case__plate { transition: transform 2s var(--e-expo); }
.js:not(.rm) .rv-card.is-pending { clip-path: inset(15% 15% 15% 15%); transform: translateX(calc(var(--side, 0) * 5vw)) rotate(calc(var(--side, 0) * -2.9deg)); }
.js:not(.rm) .rv-card.is-pending .case__plate { transform: scale(1.33); }
.js:not(.rm) .rv-card.is-pending .case__plus { transform: scale(0) rotate(-180deg); }
@media (max-width: 899px) {
.js:not(.rm) .rv-card.is-pending { transform: none; }
}
.js:not(.rm) #measurement .rv-lines .ln > span, .js:not(.rm) #credits .rv-lines .ln > span { transform-origin: 0 0; transition: transform 1s var(--e-out); transition-delay: calc(var(--i, 0) * .1s); }
.js:not(.rm) #measurement .rv-lines.is-pending .ln > span { transform: translateY(105%) rotate(7deg); }
.js:not(.rm) #credits .rv-lines.is-pending .ln > span { transform: translateY(110%) rotate(7deg); }
.js:not(.rm) #measurement .rv { transition: opacity 1s var(--e-out), transform 1s var(--e-out); transition-delay: calc(var(--d, 0) * 1s); }
.js:not(.rm) #credits .rv { transition: opacity 1.2s var(--e-dim), transform 1.2s var(--e-dim); transition-delay: calc(var(--d, 0) * 1s); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
.ab__hero { padding-top: calc(var(--hd) + clamp(48px, 7vw, 120px)); }
.ab__hero .label { grid-column: 1 / -1; }
.ab__title { grid-column: 1 / span 10; margin-top: 24px; }
.ab__text { grid-column: 7 / span 6; margin-top: var(--block); display: grid; gap: 18px; }
.founder { align-items: end; row-gap: 32px; }
.founder__img { grid-column: 1 / span 5; position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--panel); }
.founder__img img { width: 100%; height: 100%; object-fit: cover; }
.founder__body { grid-column: 7 / span 6; display: grid; gap: 18px; padding-bottom: 6px; }
.team__head { row-gap: 20px; align-items: end; }
.team__head .h-d2 { grid-column: 1 / span 6; }
.team__aside { grid-column: 8 / span 5; display: flex; justify-content: flex-end; }
.team__aside p { margin: 0; color: var(--fg-3); font-size: var(--t-small); }
.people { list-style: none; margin: var(--block) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) var(--g); }
.person { display: grid; gap: 12px; align-content: start; justify-items: start; min-width: 0; }
.person__img { position: relative; width: 100%; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--panel); }
.person__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-expo); }
@media (hover: hover) {
.person:hover .person__img img { transform: scale(1.045); }
}
.person__name { margin: 0; font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 28px); line-height: 1.1; letter-spacing: -.03em; }
.person__role { margin: 0; color: var(--fg-3); font-size: 14px; }
.ph { color: var(--fg-3); }
@media (max-width: 1099px) {
.people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
.ab__title, .ab__text, .founder__img, .founder__body { grid-column: 1 / -1; }
.team__head .h-d2, .team__aside { grid-column: 1 / -1; justify-content: flex-start; }
.people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}
.sheet { border-radius: var(--r) var(--r) 0 0; }
.case__media, .case__plate, .pf__card, .pf__fig, .svc__frame, .bc, .feat__media, .qv__frame, .qv__gallery li, .founder__img, .person__img, .hero__frame { border-radius: var(--r-media); overflow: hidden; }
.hero__frame { border-radius: var(--r-media); }
.case__media { transition: background-color .4s; }
.case__media.is-warping { background: transparent; overflow: visible; }
.case__media .vf { transition: opacity .4s; }
.case__media.is-warping .vf { opacity: 0; }
@media (min-width: 1100px) {
.ft__grid { grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); }
.ft__logo { grid-column: 1; }
.ft__cols { grid-column: 2; display: flex; justify-content: space-between; gap: var(--g); }
.ft__cols .ft__col, .ft__cols .ft__col.ft__col--wide { grid-column: auto; }
.ft__base { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); column-gap: var(--g); }
.ft__base > .label { grid-area: 1 / 2; justify-self: start; }
.ft__base > :last-child { grid-area: 1 / 2; justify-self: end; }
}
@media (max-width: 1099px) {
.ft__cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--g); }
.ft__cols .ft__col, .ft__cols .ft__col.ft__col--wide { grid-column: auto; }
}
@media (max-width: 899px) {
.ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft__cols .ft__col.ft__col--wide { grid-column: 1 / -1; }
}
.ab__hero { position: relative; isolation: isolate; overflow: hidden; }
.ab__hero > .wrap { position: relative; z-index: 1; }
.ab__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ab__bg video { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.7); }
.ab__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.7) 100%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, #000 100%); }
.rm .ab__bg video { display: none; }
.rm .ab__bg { background: url(../assets/images/hero-reel-poster.webp) center / cover; opacity: .32; }
.founder__img { grid-column: 1 / span 5; position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--panel); border-radius: var(--r-media); }
@media (max-width: 759px) {
.ab__title, .ab__text, .founder__img, .founder__body { grid-column: 1 / -1; }
.team__head .h-d2, .team__aside { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ==================================================================== v3: client feedback, 21 to 22 Oct 2026 */

/* Header: the approved stacked lockup at the top of the page, shrinking to the MP mark on scroll.
   --k scales the lockup so its MP mark lands at the compact mark size; --kx nudges it to the left edge. */
:root { --hd-top: 110px; --lock-w: 88px; --k: .5815; --kx: -2.4px; --hd-pad: 20px; }
@media (max-width: 1099px) { :root { --hd-top: 100px; --lock-w: 75px; --k: .5786; --kx: -2px; --hd-pad: 19px; } }
@media (max-width: 759px) { :root { --hd-top: 82px; --lock-w: 60px; --k: .5936; --kx: -1.7px; --hd-pad: 11px; } }
.hd { align-items: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + var(--hd-pad)); transition: transform .5s var(--e-std), background-color .5s, color .5s, height .55s var(--e-io); }
.hd:not(.is-compact) { height: calc(var(--hd-top) + env(safe-area-inset-top, 0px)); }
.hd__logo { position: relative; display: block; width: calc(var(--lock-w) * .899 * var(--k)); height: calc(var(--lock-w) * .461 * var(--k)); margin-top: calc((var(--ctl-s) - var(--lock-w) * .461 * var(--k)) / 2); }
.hd__lock { position: absolute; left: 0; top: 0; width: var(--lock-w); transform-origin: 0 0; transition: transform .55s var(--e-io); }
.hd__lock svg { display: block; width: 100%; height: auto; overflow: visible; }
.hd__gw, .hd__gs { transition: opacity .3s var(--e-std) .12s; }
.hd.is-compact .hd__lock { transform: translateX(var(--kx)) scale(var(--k)); }
.hd.is-compact .hd__gw, .hd.is-compact .hd__gs { opacity: 0; transition-delay: 0s; }
.hd__nav { margin-top: calc((var(--ctl-s) - 40px) / 2); }
/* Sticky header like TPO (Sam, 26 Oct): always visible; once you scroll it floats as a dark glass pill and the logo shrinks to the MP mark. */
.hd { transition: top .55s var(--e-io), left .55s var(--e-io), right .55s var(--e-io), height .55s var(--e-io), padding .55s var(--e-io), border-radius .55s var(--e-io), background-color .4s, box-shadow .4s, color .5s; }
.hd.is-compact {
  top: 14px; left: max(var(--m), calc((100% - 1240px) / 2)); right: max(var(--m), calc((100% - 1240px) / 2));
  height: 66px; padding: 0 10px 0 24px; align-items: center; border-radius: 999px;
  background-color: rgba(3, 5, 8, .74); -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(.55); backdrop-filter: blur(20px) saturate(160%) brightness(.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 48px rgba(3, 5, 8, .6);
}
.hd.is-compact::after { opacity: 0; }
.hd.is-compact .hd__logo, .hd.is-compact .hd__nav { margin-top: 0; }
@media (max-width: 759px) { .hd.is-compact { top: 10px; height: 56px; padding: 0 7px 0 18px; } }
.ab__hero { padding-top: calc(var(--hd-top) + clamp(28px, 4vw, 72px)); }
.pre.is-fly .pre__gs { opacity: 1; transform-box: fill-box; transform-origin: 0 0; transition: transform 1.05s cubic-bezier(.76, 0, .24, 1); }

/* Dropdowns: one short list each, no preview images, no dot on hover. */
.hd__panel, .hd__panel--work, .hd__panel--svc, .hd__panel--about, .hd__panel--ins { grid-template-columns: minmax(232px, max-content); padding: 20px 30px 22px 26px; }
.hd__nav .hd__opt::before, .hd__nav .hd__opt--s::before { content: none; }
.hd__nav .hd__list .hd__opt:hover, .hd__nav .hd__list .hd__opt:focus-visible { transform: translateX(6px); }
.hd__nav .hd__opt { font-size: 17px; } /* about 20% smaller (Britt, 27 Oct) */

/* Hero: the descriptive headline first, BRANDS IN CULTURE about 30% smaller and in capitals, Britt's line, two routes in. */
.hero__stage { padding-top: calc(var(--hd-top) + env(safe-area-inset-top, 0px)); }
.hero__meta { top: calc(var(--hd-top) + 6px); }
.hero__top { padding-top: 0; }
.hero__h1 { gap: clamp(10px, 1vw, 16px); }
.hero__kicker { color: var(--fg); font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .16em; }
.hero__title { font-size: calc(var(--t-hero) * .66); text-transform: uppercase; letter-spacing: -.01em; line-height: .92; margin-left: -.02em; }
.hero__sub { max-width: 52ch; margin: clamp(12px, 1.2vw, 20px) 0 0; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
@media (max-width: 759px) {
  .hero__ctas { order: 2; flex: 1 0 100%; }
  .hero__ctas .hero__cta { order: 0; flex: 1 1 0; justify-content: center; padding-inline: 14px; }
  .hero__title { font-size: calc(var(--t-hero) * .7); }
}

/* Secondary button: outlined, for the second route in. */
.btn--line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line .btn__dot { --dot: var(--fg); }
.btn--line:hover, .btn--line:focus-visible { color: var(--flood-fg); }

/* Who we are: a shorter statement, three recognition highlights that link to their articles, and the stats as a quiet row. */
.intro__statement { grid-column: 1 / span 9; font-size: clamp(30px, 3.6vw, 64px); }
.ledger__a { display: contents; color: inherit; text-decoration: none; }
.ledger__a .ledger__name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; transition: text-decoration-color .3s var(--e-std); }
.ledger__a:hover .ledger__name, .ledger__a:focus-visible .ledger__name { text-decoration-color: currentColor; }
.stats { grid-column: 1 / -1; margin-top: var(--block); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.stats__k { grid-column: 1 / span 3; color: var(--fg-3); padding-top: .4em; }
.stats__l { grid-column: 4 / -1; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); }
.stats__l div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; min-width: 0; }
.stats__l dd { margin: 0; font-family: var(--f-display); font-size: clamp(34px, 3.4vw, 60px); line-height: 1; letter-spacing: -.04em; }
.stats__l dt { color: var(--fg-2); font-size: var(--t-small); line-height: 1.4; }
@media (max-width: 759px) {
  .intro__statement { grid-column: 1 / -1; }
  .stats__k, .stats__l { grid-column: 1 / -1; }
  .stats__l { grid-template-columns: 1fr; row-gap: 22px; }
}

/* Our work: two more on Show More. */
.work__more { justify-content: center; align-items: center; }
.work__more > [hidden] { display: none; }
.case--more { animation: caseIn .9s var(--e-out) both; }
.case--more:nth-of-type(2n) { animation-delay: .08s; }
.case__go { display: grid; gap: 22px; color: inherit; text-decoration: none; }
.case__go .case__plate img { transition: transform 1.2s var(--e-out); }
.case__go:hover .case__plate img { transform: scale(1.03); }
@keyframes caseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.case__exp { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: none; place-items: center; color: #fff; background: color-mix(in srgb, var(--black) 45%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.case__exp svg { width: 15px; height: 15px; }
@media (hover: none), (max-width: 759px) { .case__exp { display: grid; } }

/* Latest: three current stories across the full width. */
.ins__body { display: block; }
.ins__latest { grid-column: 1 / -1; }
.ins__title { font-size: clamp(20px, 1.9vw, 32px); }

/* Closing: the two routes in. */
.close__actions { gap: 12px; }

/* Fewer oversized headlines. */
.h-d1, .ms__title { font-size: calc(var(--t-d1) * .86); }
.h-d2 { font-size: calc(var(--t-d2) * .9); }
.cases.is-all .case--lead .case__title { font-size: calc(var(--t-d2) * .82); }

/* "Credits for" tag: text centred in its box (Sam, 26 Oct). The display caps sit high, so the box gets a little more room above. */
.bg__tag { padding: 2px 10px 0; }

/* Custom scrollbar. */
html { scrollbar-width: thin; scrollbar-color: rgba(200, 213, 255, .38) #000; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(200, 213, 255, .3); border-radius: 999px; border: 3px solid #000; }
::-webkit-scrollbar-thumb:hover { background: rgba(200, 213, 255, .55); }

/* Panels in the contact drawer's style: the Cannes Lions clips and the team bios (Wynn's responses, 26 Oct). */
.mo__panel {
  position: absolute; left: 50%; top: 50%; width: min(1120px, calc(100vw - 48px)); max-height: calc(100svh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  border-radius: var(--r); background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 40px 120px color-mix(in srgb, var(--black) 60%, transparent);
  opacity: 0; transform: translate(-50%, calc(-50% + 48px)) scale(.98); transition: transform .55s var(--e-io), opacity .3s var(--e-io);
  padding: clamp(22px, 2.4vw, 40px) clamp(22px, 2.8vw, 48px) clamp(26px, 2.8vw, 44px); display: grid; gap: 22px; align-content: start;
}
.mo__panel::-webkit-scrollbar { display: none; }
.drawer.is-open .mo__panel { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 699px) {
  .mo__panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92svh; border-radius: var(--r) var(--r) 0 0; transform: translateY(100%); opacity: 1; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .drawer.is-open .mo__panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mo__panel { transition: opacity .2s linear; } }

/* Cannes Lions: the player on the left, the three clips on the right. */
.yt { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); grid-template-areas: "top top" "head head" "frame list"; column-gap: clamp(20px, 2.4vw, 36px); }
.yt .drawer__top { grid-area: top; }
.yt__head { grid-area: head; display: grid; gap: 10px; max-width: 70ch; }
.yt__title { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 2.3vw, 38px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.yt__by { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.yt__frame { grid-area: frame; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--panel); align-self: start; }
.yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; }
.yt__item { display: grid; gap: 8px; }
.yt__clip { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; border-radius: 12px; }
.yt__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--e-io); }
.yt__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt__t { font-family: var(--f-display); font-size: 16px; line-height: 1.25; letter-spacing: -.01em; color: var(--fg-2); transition: color .3s var(--e-io); }
.yt__clip[aria-pressed="true"] .yt__thumb { box-shadow: 0 0 0 2px var(--accent); }
.yt__clip[aria-pressed="true"] .yt__t, .yt__clip:hover .yt__t, .yt__clip:focus-visible .yt__t { color: var(--fg); }
.yt__read { justify-self: start; margin-left: 126px; color: var(--fg-3); font-size: 13px; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line-2); }
.yt__read:hover, .yt__read:focus-visible { color: var(--fg); }
@media (max-width: 899px) {
  .yt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "head" "frame" "list"; }
}

/* The team: each card opens a bio. */
.person__btn { display: grid; gap: 10px; width: 100%; text-align: left; justify-items: start; }
.person__btn .person__name, .person__btn .person__role { display: block; }
.person__btn .person__img { display: block; margin-bottom: 4px; }
@media (hover: hover) { .person__btn:hover .person__img img { transform: scale(1.045); } }
.person__btn:focus-visible .person__img { box-shadow: 0 0 0 2px var(--accent); }
.person__img--tbc { display: grid !important; place-items: center; background: var(--navy); }
.person__ini { font-family: var(--f-display); font-size: clamp(44px, 5vw, 88px); letter-spacing: -.04em; color: rgba(255, 255, 255, .55); }
.bio { width: min(940px, calc(100vw - 48px)); }
.bio .drawer__top { grid-area: auto; }
.bio__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.bio__img { aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: hidden; background: var(--panel); }
.bio__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio__text { display: grid; gap: 14px; align-content: start; }
.bio__name { margin: 0; font-family: var(--f-display); font-size: clamp(30px, 3vw, 48px); line-height: 1.02; letter-spacing: -.035em; }
.bio__role { margin: -6px 0 0; color: var(--accent); font-size: 16px; }
.bio__yrs { margin: 0; color: var(--fg-2); font-size: 15px; }
.bio__intro { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.bio__facts { margin: 6px 0 0; display: grid; gap: 14px; }
.bio__facts div { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.bio__facts dt { color: var(--fg-3); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-family: var(--f-display); font-weight: 700; }
.bio__facts dd { margin: 0; font-size: 16px; line-height: 1.45; }
.bio__fun { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.bio__fun figcaption { color: var(--fg-3); }
.bio__fun blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; }
.bio__fun blockquote::before { content: "“"; } .bio__fun blockquote::after { content: "”"; }
.bio__in { justify-self: start; margin-top: 8px; }
@media (max-width: 699px) {
  .bio__body { grid-template-columns: minmax(0, 1fr); }
  .bio__img { width: 46%; }
}

/* Exposure tiers: Wynn's examples, each credited (27 Oct). */
.tier__c { margin: -4px 0 0; color: var(--fg-3); font-size: var(--t-small); }

/* Logo grid: current clients only, 25 tiles (call, 27 Oct). Five columns; on phones three, with the last row centred so
   any count Wynn's final list brings still sits evenly. */
.bgrid { display: flex; flex-wrap: wrap; justify-content: center; }
.bgrid > .bc { flex: 0 0 20%; min-width: 0; }
@media (max-width: 759px) { .bgrid > .bc { flex-basis: calc(100% / 3); } }
.tier__box--tagend .tier__tag { left: auto; right: -1px; }

/* Background tier: two boxes (Tanqueray and Don Julio). One shade with a hole per box replaces the boxes' own spotlights. */
.tier__dim { position: absolute; inset: 0; z-index: 1; background: rgba(5, 6, 12, .5); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: opacity .9s var(--e-l) calc(.25s + var(--i) * .16s); }
.tier--multi .tier__box, .tiers.is-in .tier--multi:hover .tier__box { box-shadow: none; }
.js:not(.rm) .tiers:not(.is-in) .tier__dim { opacity: 0; }
@media (hover: hover) { .tiers.is-in .tier--multi:hover .tier__dim { opacity: .52; transition-delay: 0s; } }

/* Closing and footer (call, 27 Oct): the routes in sit under the headline, clear of the InterContinental crown; the footer
   is solid black below a soft fade, so the video stops above it; the columns spread out and the full lockup sits below them. */
.close__content { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(72px, 7vw, 132px); }
.close__title, .close__actions { grid-column: 1; }
.close__actions { margin: 6px 0 0; }
.ft { background: var(--black); }
.ft::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(72px, 7vw, 132px); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--black)); pointer-events: none; }
.ft__grid { padding-top: clamp(28px, 2.6vw, 48px); }
.ft__lock { display: block; }
.ft__lock svg { display: block; width: 100%; height: auto; overflow: visible; }
.ft__logo { order: 2; width: clamp(150px, 13vw, 220px); margin-top: clamp(20px, 2.4vw, 44px); }
.ft__cols { order: 1; }
@media (min-width: 1100px) {
  .ft__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ft__cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
  .ft__logo { grid-column: 1 / span 4; }
  .ft__base { display: flex; justify-content: space-between; }
}
/* ---- service pages (build_services.py) ---- */
/* Service pages (drafts, 29 Oct). Built on the homepage system: the same type scale, themes, labels, buttons and reveals. */

/* Hero: breadcrumb, keyword headline, Britt's line and two routes in, beside the service clip and its credit. */
.sv-hero { padding-top: calc(var(--hd-top) + clamp(28px, 4vw, 72px)); padding-bottom: clamp(80px, 8vw, 150px); overflow: hidden; }
.sv-hero__grid { align-items: start; }
.crumb { grid-column: 1 / -1; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumb li { display: flex; align-items: center; }
.crumb li + li::before { content: ""; width: 14px; height: 1px; margin: 0 12px; background: currentColor; opacity: .4; }
.crumb a { color: var(--fg-3); text-decoration: none; transition: color .4s var(--e-l); }
.crumb a:is(:hover, :focus-visible) { color: var(--fg); }
.sv-hero__title { grid-column: 1 / -1; margin: 26px 0 0; }
.sv-hero__text { grid-column: 1 / span 5; margin-top: clamp(40px, 4.6vw, 88px); display: grid; gap: 32px; align-content: start; justify-items: start; }
.sv-hero__text .lead { max-width: 40ch; }
.sv-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-hero__media { grid-column: 7 / -1; margin-top: clamp(40px, 4.6vw, 88px); display: grid; gap: 16px; min-width: 0; }
.sv-clip { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--night); }
.sv-clip img, .sv-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-credit { --cf: 13px; gap: 14px; flex-wrap: wrap; row-gap: 6px; white-space: normal; color: var(--fg-2); }

/* Overview: the scroll-filled statement, two paragraphs and three figures. */
.sv-intro .intro__statement { grid-column: 1 / span 10; }
.sv-intro__body { grid-column: 7 / span 6; margin-top: var(--block); display: grid; gap: 20px; align-content: start; }
.sv-intro__body .lead { max-width: 44ch; }

/* Section heads */
.sv-head { margin-bottom: clamp(44px, 5vw, 88px); align-items: end; }
.sv-head .label { grid-column: 1 / -1; }
.sv-head__h { grid-column: 1 / span 7; margin: 20px 0 0; }
.sv-head__p { grid-column: 9 / span 4; margin-top: 20px; }
.sv-head--tight { margin-bottom: clamp(28px, 3vw, 48px); }

/* What's included: numbered columns on hairlines. */
.sv-cards { --cols: 3; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); }
.sv-card { padding: 26px 0 44px; border-top: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.sv-card__n, .sv-step__n, .sv-more__n, .film__k, .res__c, .sw__figk { font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.sv-card__t { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d4); line-height: 1.15; letter-spacing: -.02em; }
.sv-card__d { margin: 0; color: var(--fg-2); max-width: 38ch; }
.sv-offer .ev { margin-top: clamp(72px, 8vw, 150px); }
.sv-tiers__more { margin: clamp(32px, 3.4vw, 56px) 0 0; }

/* How it works */
.sv-steps__list { --cols: 4; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--g); }
.sv-step { position: relative; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.sv-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--accent); }
.sv-step__n { font-size: var(--t-label); }
.sv-step__t { margin: 4px 0 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-d4); line-height: 1.15; letter-spacing: -.02em; }
.sv-step__d { margin: 0; color: var(--fg-2); max-width: 34ch; }

/* Selected work: case studies open the quick view; reel moments play in the player. */
.sw-list { display: grid; gap: clamp(64px, 7vw, 128px); }
.sw-list:empty { display: none; }
.sw { position: relative; display: grid; gap: 22px; align-content: start; min-width: 0; }
.sw--lg { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; }
.sw--lg .sw__media { grid-column: 1 / span 7; }
.sw--lg .sw__info { grid-column: 9 / span 4; }
.sw--lg.sw--flip .sw__media { grid-column: 6 / span 7; grid-row: 1; }
.sw--lg.sw--flip .sw__info { grid-column: 1 / span 4; grid-row: 1; }
.sv-work__k { margin: clamp(80px, 8.5vw, 150px) 0 clamp(24px, 2.4vw, 36px); padding-top: 22px; border-top: 1px solid var(--line); }
.sw-grid { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(48px, 5vw, 88px) var(--g); }
.sw__media { position: relative; border-radius: var(--r-media); overflow: hidden; background: var(--night); }
.sw__plate { position: relative; aspect-ratio: 3 / 2; }
.sw--lg .sw__plate { aspect-ratio: 16 / 9; }
.sw__plate img, .sw__plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw__plate img { transition: transform 1.4s var(--e-expo); }
.sw__plate video { opacity: 0; transition: opacity .8s var(--e-std); }
.sw__plate video.is-playing { opacity: 1; }
.sw:is(:hover, :focus-within) .sw__plate img { transform: scale(1.035); }
.sw__info { display: grid; gap: 0; align-content: start; }
.sw__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(19px, 1.5vw, 26px); line-height: 1.12; letter-spacing: -.02em; }
.sw--lg .sw__title { font-size: var(--t-d3); }
.sw__title button { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
.sw__open::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.sw__title button:focus-visible { outline: none; }
.sw:has(.sw__title button:focus-visible) { outline: 2px solid var(--focus); outline-offset: 10px; border-radius: var(--r-media); }
.sw__meta { margin: 10px 0 0; color: var(--fg-3); font-size: var(--t-small); }
.sw__quote { margin: 26px 0 0; font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.2; letter-spacing: -.02em; color: var(--accent); }
.sw__quote p { margin: 0; }
.sw__quote cite { display: block; margin-top: 6px; font-family: var(--f-text); font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--fg-3); }
.sw__line { margin: 14px 0 0; color: var(--fg-2); max-width: 40ch; }
.sw__kpis { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 2.6vw, 40px); }
.sw__kpis div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; }
.sw__kpis dd { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 2vw, 36px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.sw__kpis dt { font-size: 12.5px; color: var(--fg-3); max-width: 22ch; line-height: 1.35; }
.sw__acts { position: relative; z-index: 5; margin-top: 28px; }
.sw__stat { aspect-ratio: 3 / 2; border-radius: var(--r-media); background: var(--navy); box-shadow: inset 0 0 0 1px var(--line); display: grid; align-content: end; gap: 12px; padding: clamp(22px, 2.4vw, 40px); }
.sw__fig { margin: 0; font-family: var(--f-display); font-size: clamp(64px, 7vw, 128px); line-height: .9; letter-spacing: -.055em; }
.sv-work__all { margin: clamp(48px, 5vw, 88px) 0 0; }

/* Measurement band on the brand service pages: the scorecard's four questions and a link to Measurement. */
.sv-measure .label { grid-column: 1 / -1; }
.sv-measure__h { grid-column: 1 / span 6; margin: 18px 0 0; }
.sv-measure__side { grid-column: 8 / span 5; margin-top: 18px; display: grid; gap: 20px; justify-items: start; align-content: start; }
.sv-mqs { grid-column: 1 / -1; list-style: none; margin: clamp(44px, 4.4vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--g); }
.sv-mq { padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.sv-mq__k { font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.sv-mq__q { font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.15; letter-spacing: -.02em; }

/* Questions */
.sv-faq__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--hd) + 48px); display: grid; gap: 20px; justify-items: start; }
.sv-faq__head .h-d2 { margin: 0; }
.sv-faq__list { grid-column: 6 / -1; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq__s { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 24px; align-items: center; padding: 26px 0; cursor: pointer; }
.faq__s::-webkit-details-marker { display: none; }
.faq__s:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.faq__q { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(19px, 1.5vw, 26px); line-height: 1.2; letter-spacing: -.02em; transition: color .4s var(--e-l); }
.faq__s:hover .faq__q { color: var(--accent); }
.faq__ic { position: relative; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .4s var(--e-l), color .4s var(--e-l); }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .5s var(--e-out); }
.faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq__ic { background: var(--fg); color: var(--bg); }
.faq[open] .faq__ic::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { padding: 0 56px 30px 0; }
.faq__a p { margin: 0; color: var(--fg-2); max-width: 64ch; }
.faq__a a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq__a a:hover { color: var(--accent); }

/* More services */
.sv-more__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sv-more__a { display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 4fr) 22px; column-gap: var(--g); align-items: center; padding: clamp(20px, 2vw, 30px) 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.sv-more__t { font-family: var(--f-display); font-size: var(--t-d3); line-height: 1; letter-spacing: -.035em; transition: transform .7s var(--e-l), color .4s var(--e-l); }
.sv-more__d { color: var(--fg-2); }
.sv-more__arr { width: 18px; height: 18px; justify-self: end; transition: transform .7s var(--e-l); }
.sv-more__a:is(:hover, :focus-visible) .sv-more__t { transform: translateX(12px); color: var(--accent); }
.sv-more__a:is(:hover, :focus-visible) .sv-more__arr { transform: translateX(6px); }
.sv-more__a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Content representation: recent films and the studios. */
.films { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--g); }
.film { display: grid; gap: 10px; align-content: start; }
.film__poster { margin: 0 0 8px; aspect-ratio: 2 / 3; border-radius: calc(var(--r-media) * .75); overflow: hidden; background: var(--night); }
.film__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e-expo); }
.film:hover .film__poster img { transform: scale(1.04); }
.film__t { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(18px, 1.35vw, 23px); line-height: 1.15; letter-spacing: -.02em; }
.film__k { margin: 4px 0 0; }
.film__b { margin: 0; color: var(--fg-2); font-size: var(--t-small); line-height: 1.5; }
.sv-films .st11 { margin-top: clamp(72px, 8vw, 140px); }

/* Measurement: the homepage scorecard, tiers and milestones, then recent results. */
.sv-ms .sl { margin-top: 0; }
.res { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); }
.res__i { padding: 26px 0 48px; border-top: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.res__fig { margin: 0; font-family: var(--f-display); font-size: clamp(46px, 4.6vw, 86px); line-height: .95; letter-spacing: -.05em; }
.res__k { margin: 0; color: var(--fg-2); }

/* Content representation: a short word for brands. */
.sv-cta { padding-block: clamp(72px, 7vw, 128px) calc(clamp(72px, 7vw, 128px) + var(--r)); }
.sv-cta .label { grid-column: 1 / -1; }
.sv-cta__h { grid-column: 1 / span 7; margin: 18px 0 0; }
.sv-cta__p { grid-column: 1 / span 6; margin-top: 20px; }
.sv-cta__a { grid-column: 1 / -1; margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

/* The case quick view on a page with a single case study: no previous and next. Its Service line links to the service page. */
.qv.is-single #qvPrev, .qv.is-single #qvNext { display: none; }
.qv__facets dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s var(--e-std); }
.qv__facets dd a:is(:hover, :focus-visible) { color: var(--accent); }

@media (max-width: 1099px) {
  .sv-hero__text { grid-column: 1 / span 6; }
  .sv-hero__media { grid-column: 7 / -1; }
  .sv-intro__body { grid-column: 4 / -1; }
  .sv-head__h { grid-column: 1 / -1; }
  .sv-head__p { grid-column: 1 / span 8; }
  .sv-cards, .sv-steps__list, .sw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw--lg .sw__media, .sw--lg.sw--flip .sw__media { grid-column: 1 / -1; grid-row: 1; }
  .sw--lg .sw__info, .sw--lg.sw--flip .sw__info { grid-column: 1 / span 9; grid-row: 2; margin-top: 26px; }
  .sv-faq__head { grid-column: 1 / -1; position: static; margin-bottom: 36px; }
  .sv-faq__list { grid-column: 1 / -1; }
  .films { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-cta__h, .sv-cta__p, .sv-measure__h, .sv-measure__side { grid-column: 1 / -1; }
  .sv-mqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .sv-hero__text, .sv-hero__media, .sv-intro__body, .sv-head__p { grid-column: 1 / -1; }
  .sv-hero__media { margin-top: 44px; }
  .crumb li:first-child { display: none; }
  .crumb li:nth-child(2)::before { content: none; }
  .sv-cards, .sv-steps__list { grid-template-columns: minmax(0, 1fr); }
  .sv-card { padding: 22px 0 30px; }
  .sw-grid { grid-template-columns: minmax(0, 1fr); }
  .sw--lg .sw__info, .sw--lg.sw--flip .sw__info { grid-column: 1 / -1; }
  .faq__a { padding-right: 0; }
  .sv-more__a { grid-template-columns: 44px minmax(0, 1fr) 18px; row-gap: 8px; }
  .sv-more__d { grid-column: 2; grid-row: 2; font-size: var(--t-small); }
  .sv-more__arr { grid-column: 3; grid-row: 1; }
  .films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Type scale (3 Nov). One set of sizes for the whole site, as Sam promised on the 27 Oct call: 8 display sizes and 5 text sizes,
   down from 29 and 13. The sections no longer redefine them, and the components that had their own sizes use the nearest step.
   Desktop (1440px) / phone (375px):
     --t-hero   112 / 57   homepage hero title only (unchanged)
     --t-d1      87 / 36   page titles, the closing headline, the Measurement headline
     --t-d2      55 / 32   section headings, statements, the lead case study, stats and results figures
     --t-score   75 / 52   scorecard and stat card figures
     --t-d3      37 / 26   sub-headings, case study titles, scorecard questions, tier names, KPI figures
     --t-d4      23 / 19   card and step titles, names, quotes, questions, Insights titles
     --t-d5      17 / 16   dropdown links (Britt: about 20% smaller), recognition names, film titles
     --t-label   12 / 12   labels, in capitals
     --t-lead    18 / 17   lead paragraphs and the hero line
     --t-body    16 / 15   body text
     --t-ui      15 / 15   buttons and links; --t-ui-s 14 for compact controls (Contact, Play the Reel)
     --t-small   13 / 13   meta, captions, KPI labels, the header nav and footer small print */
:root, .hd, .menu, #measurement, #credits, .ft {
  --t-d1: clamp(36px, 6.02vw, 112px);
  --t-d2: clamp(32px, 3.82vw, 72px);
  --t-d3: clamp(26px, 2.6vw, 48px);
  --t-d4: clamp(19px, 1.6vw, 28px);
  --t-d5: clamp(16px, 1.18vw, 19px);
  --t-score: clamp(52px, 5.2vw, 96px);
  --t-lead: clamp(17px, 1.25vw, 21px);
  --t-ui: 15px; --t-ui-s: 14px;
  --t-small: 13px; --t-xs: 13px;
  --t-label: 12px; --t-label-s: 12px; --ls-label: .2em;
}
.h-d1, .ms__title { font-size: var(--t-d1); }
.h-d2, .ev__h, .intro__statement, .cases.is-all .case--lead .case__title, .stats__l dd, .res__fig { font-size: var(--t-d2); }
.scr .scr-fig, .sr__fig, .sw__fig { font-size: var(--t-score); }
.h-d3, .case__kpis dd, .sw__kpis dd, .qv__stats dd { font-size: var(--t-d3); }
.ms__claim, .sw__title, .faq__q, .ins__title, .person__name, .mile__when, .menu__grp a { font-size: var(--t-d4); }
.sw--lg .sw__title { font-size: var(--t-d3); }
.hd__nav .hd__opt, .ledger__name, .film__t, .menu__subl a { font-size: var(--t-d5); }
.hero__sub { font-size: var(--t-lead); }
.case__kpis dt, .sw__kpis dt, .qv__stats dt, .qv__quote cite, .qv__facets dd, .case__quote cite, .sw__quote cite, .ledger__what, .arc__q { font-size: var(--t-small); }
.btn--sm, .play, .qv__btn, .skip { font-size: var(--t-ui-s); }
/* The studio row's size only scales its logos, so it keeps the approved homepage size on every page. */
.st11__l { font-size: clamp(19px, 1.45vw, 25px); }
@media (max-width: 899px) {
  .svc__desc { font-size: var(--t-body); }
}

/* ---- WordPress build (FRM, 3 Nov 2026): forms, plain templates, case study pages, archives, consent ---- */
@media (min-width: 783px) { .admin-bar .hd { margin-top: 32px; } }
@media (max-width: 782px) { .admin-bar .hd { margin-top: 46px; } }

/* Gravity Forms, in the design's form style (GF's own CSS is off). */
.mp-form { display: block; min-width: 0; }
.mp-form .gform_heading, .mp-form .gform_validation_container, .mp-form .gfield--type-honeypot { display: none !important; }
.mp-form .gform_fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin: 0; padding: 0; list-style: none; }
.mp-form .gfield { position: relative; display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mp-form .gfield_label { font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); margin: 0; padding: 0; }
.mp-form .gfield_required { color: var(--fg-3); margin-left: 2px; }
.mp-form .hidden_label > .gfield_label, .mp-form .hidden_label > legend.gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mp-form input[type="text"], .mp-form input[type="email"], .mp-form input[type="tel"], .mp-form textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--fg); font: inherit; font-size: 17px; padding: 10px 0 12px; border-radius: 0; transition: border-color .3s; }
.mp-form textarea { height: 110px; min-height: 110px; resize: none; }
.mp-form input:focus, .mp-form textarea:focus { outline: none; border-bottom-color: var(--fg); }
.mp-form input:focus-visible, .mp-form textarea:focus-visible { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.mp-form .gfield_description:not(.validation_message) { color: var(--fg-3); font-size: 12px; }
.mp-form .gfield_error input, .mp-form .gfield_error textarea { border-bottom-color: var(--error); }
.mp-form .validation_message { font-size: var(--t-small); line-height: 1.3; color: var(--error); }
.mp-form .gform_validation_errors { margin: 0 0 18px; color: var(--error); font-size: var(--t-small); }
.mp-form .gform_validation_errors h2 { font: inherit; margin: 0; }
.mp-form .mp-aud .gfield_radio { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 50px; box-sizing: border-box; padding: 4px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); }
.mp-form .mp-aud .gchoice { position: relative; }
.mp-form .mp-aud input, .mp-form .mp-chips input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.mp-form .mp-aud label { display: grid; place-items: center; height: 42px; border-radius: var(--r-pill); font-size: var(--t-ui-s); color: var(--fg-2); transition: color .4s var(--e-l), background-color .5s var(--e-io); }
.mp-form .mp-aud input:checked + label { background: var(--fg); color: var(--bg); }
.mp-form .mp-aud input:not(:checked):hover + label { color: var(--fg); }
.mp-form .mp-chips .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-form .mp-chips .gchoice { position: relative; }
.mp-form .mp-chips label { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); display: inline-flex; align-items: center; transition: background-color .35s var(--e-l), color .35s var(--e-l), box-shadow .35s; }
.mp-form .mp-chips input:not(:checked):hover + label { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.mp-form .mp-chips input:checked + label { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.mp-form .mp-aud input:focus-visible + label, .mp-form .mp-chips input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.mp-form .gform_footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 30px; padding: 0; }
.mp-form .gform_ajax_spinner { width: 18px; height: 18px; }
.mp-form .gform_confirmation_message { color: var(--fg); font-size: var(--t-lead); line-height: 1.5; max-width: 36ch; }
@media (min-width: 900px) {
  .mp-form .gform_fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(24px, 2.4vw, 40px); }
  .mp-form .gfield.mp-aud, .mp-form .gfield.mp-chips, .mp-form .gfield--type-textarea, .mp-form .gfield--type-turnstile, .mp-form .gfield--width-full { grid-column: 1 / -1; }
}

/* Contact page */
.ct .wrap.grid { row-gap: 48px; }
.ct__form { grid-column: 1 / span 8; }
.ct__details { grid-column: 10 / span 3; align-self: start; display: grid; gap: 20px; margin: 0; }
.ct__details a { color: inherit; }

/* The hero on templates the design didn't draw */
.pg-hero { padding-bottom: clamp(64px, 6vw, 120px); }
.pg-hero__k { grid-column: 1 / -1; margin: 26px 0 0; }
.pg-hero__title { grid-column: 1 / span 10; }

/* Prose: articles, the old site's case study stories, plain pages */
.art__body { grid-column: 3 / span 8; }
.prose { color: var(--fg-2); font-size: 17px; line-height: 1.7; max-width: 70ch; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { color: var(--fg); font-family: var(--f-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; margin-top: 1.8em; }
.prose h2 { font-size: var(--t-d3); }
.prose h3 { font-size: var(--t-d4); }
.prose h4 { font-size: var(--t-d5); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose strong, .prose b { color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { padding-left: 1em; border-left: 2px solid var(--accent); font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.3; color: var(--fg); }
.prose img, .prose figure { max-width: 100%; height: auto; border-radius: var(--r-media); }
.prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-media); }

/* Case study pages */
.cs-head { grid-column: 1 / span 8; margin-top: 26px; }
.cs-title { margin: 0; }
.cs-meta { margin: 18px 0 0; color: var(--fg-3); font-size: var(--t-small); }
.cs-stats { grid-column: 9 / span 4; align-self: end; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 18px clamp(20px, 2.6vw, 40px); }
.cs-stats div { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.cs-stats dd { margin: 0; font-family: var(--f-display); font-size: var(--t-d3); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.cs-stats dt { font-size: var(--t-small); color: var(--fg-3); max-width: 22ch; line-height: 1.35; }
.cs-media { grid-column: 1 / -1; margin-top: clamp(40px, 4vw, 72px); position: relative; }
.cs-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--night); }
.cs-frame img, .cs-frame video, .cs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.cs-frame video { opacity: 0; transition: opacity .8s var(--e-std); }
.cs-frame video.is-playing { opacity: 1; }
.cs-embed { cursor: pointer; }
.cs-embed.is-on img, .cs-embed.is-on .cs-play--over { display: none; }
.cs-play { margin-top: 18px; }
.cs-play--over { position: absolute; left: 24px; bottom: 24px; z-index: 2; margin: 0; }
.cs-story .wrap.grid { row-gap: 40px; }
.cs-side { grid-column: 1 / span 4; align-self: start; display: grid; gap: 28px; }
.cs-main { grid-column: 6 / -1; display: grid; gap: 28px; align-content: start; }
.cs-quote { margin: 0; font-family: var(--f-display); font-size: var(--t-d4); line-height: 1.25; letter-spacing: -.02em; color: var(--accent); }
.cs-quote p { margin: 0; }
.cs-quote cite { display: block; margin-top: 8px; font-family: var(--f-text); font-style: normal; font-size: var(--t-small); letter-spacing: 0; color: var(--fg-3); }
.cs-facets { margin: 0; display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.cs-facets div { display: grid; gap: 4px; }
.cs-facets dt { font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); }
.cs-facets dd { margin: 0; color: var(--fg); }
.cs-facets a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cs-source { margin: 0; color: var(--fg-3); font-size: var(--t-small); }
.cs-summary { max-width: 52ch; }
.cs-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cs-points li { position: relative; padding-left: 22px; color: var(--fg-2); }
.cs-points li::before { content: ""; position: absolute; left: 0; top: .75em; width: 10px; height: 1px; background: var(--accent); }
.cs-gap { color: var(--fg-3); }
.cs-stills { margin-top: clamp(56px, 6vw, 112px); }
.cs-gallery { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.cs-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-media); }
.cs-next__a { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.cs-next__t { font-family: var(--f-display); font-size: var(--t-d2); line-height: 1; letter-spacing: -.04em; transition: color .4s var(--e-l); }
.cs-next__arr { width: 28px; height: 28px; }
.cs-next__a:is(:hover, :focus-visible) .cs-next__t { color: var(--accent); }

/* Work cards that link to their case study, archives, pagination */
.sw__title a { color: inherit; text-decoration: none; }
.wk { padding-top: clamp(72px, 7vw, 128px); }
.pager { margin-top: clamp(48px, 5vw, 88px); }
.pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pager .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); text-decoration: none; font-size: var(--t-ui-s); }
.pager .page-numbers.current { background: var(--fg); color: var(--bg); }
.pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Insights archive topics */
.ins__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 3vw, 56px); }
.ins__topics a { height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); text-decoration: none; font-size: var(--t-ui-s); }
.ins__topics a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: none; }
.sv-hub { padding-top: clamp(72px, 7vw, 128px); }

/* Cookie choice (S7) */
.consent { position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 70; max-width: 560px; margin-left: auto; padding: 20px 22px; border-radius: var(--r-media); background: var(--navy-2); color: var(--fg); box-shadow: 0 18px 48px rgba(0, 0, 0, .4); display: grid; gap: 14px; }
.consent[hidden] { display: none; }
.consent__t { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.consent__t a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.consent__a { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1099px) {
  .ct__form, .ct__details, .art__body, .cs-head, .cs-stats, .cs-side, .cs-main, .pg-hero__title { grid-column: 1 / -1; }
  .cs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .cs-gallery { grid-template-columns: minmax(0, 1fr); }
  .cs-play--over { left: 14px; bottom: 14px; }
}