/* IFX PIX - main styles. Desktop values follow the 1920 Figma frame; fluid down to 320. */
:root {
	--bg: #0d0d0d;
	--panel: #191919;
	--text: #f6f3eb;
	--muted: #e0e0e0;
	--sand: #b9ab8f;
	--gold: #d6922b;
	--ink: #1a1a1a;
	--line: rgba(255, 255, 255, .2);
	--gutter: clamp(16px, 7.3vw, 140px);
	--f-display: "Neue Power", "Archivo", "Arial Black", sans-serif;
	--f-body: "ABC Arizona Flare", "Figtree", system-ui, sans-serif;
	--f-giant: "Anton", Impact, sans-serif;
	--glow: inset 0 0 39px rgba(255, 255, 255, .07);
	--sec: clamp(56px, 6.25vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.5 var(--f-body);
	letter-spacing: -.01em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: var(--ink); padding: 10px 16px; }
.skip:focus { left: 16px; top: 16px; }

.wrap { width: min(1640px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-pad { padding-inline: max(var(--gutter), (100% - 1640px) / 2); }

/* ---------- Type ---------- */
.h-xl, .h-lg, .h-md, .h-sm {
	font-family: var(--f-display);

	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}
.h-xl { font-size: clamp(28px, 2.2vw + 14px, 56px); }
.h-lg { font-size: clamp(24px, 1.46vw + 12px, 40px); }
.h-md { font-size: clamp(19px, .83vw + 12px, 28px); }
.h-sm { font-size: 20px; }
.eyebrow {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--sand);
	margin-bottom: 16px;
}
.eyebrow--light { color: var(--text); }
.gold { color: var(--gold); }
.bar { border-left: 1px solid var(--sand); padding-left: 24px; }

/* ---------- Section heading ---------- */
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: clamp(40px, 3.125vw, 60px); }
.sec-head { margin-bottom: clamp(32px, 4.2vw, 80px); }
.sec-head__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 808px);
	gap: 24px 40px;
	align-items: center;
}
.sec-head__side { color: var(--text); max-width: 808px; justify-self: end; }
.sec-head__row:has(> :only-child) { grid-template-columns: 1fr; }

/* ---------- Buttons ---------- */
.corners {
	--c: #fff;
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / 12px 2px,
		linear-gradient(var(--c), var(--c)) 0 0 / 2px 12px,
		linear-gradient(var(--c), var(--c)) 100% 0 / 12px 2px,
		linear-gradient(var(--c), var(--c)) 100% 0 / 2px 12px,
		linear-gradient(var(--c), var(--c)) 0 100% / 12px 2px,
		linear-gradient(var(--c), var(--c)) 0 100% / 2px 12px,
		linear-gradient(var(--c), var(--c)) 100% 100% / 12px 2px,
		linear-gradient(var(--c), var(--c)) 100% 100% / 2px 12px;
	background-repeat: no-repeat;
	background-origin: border-box;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 24px; }
.btn-pair { display: inline-flex; gap: 8px; align-items: stretch; }
.btn-frame, .btn-line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border: 2px solid var(--line);
	background-color: rgba(0, 0, 0, .2);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -.01em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color .25s, background-color .25s;
}
.btn-frame {
	--c: #fff;
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / 12px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 0 / 2px 12px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 0 / 12px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 0 / 2px 12px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 100% / 12px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 100% / 2px 12px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 100% / 12px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 100% / 2px 12px no-repeat,
		rgba(0, 0, 0, .2);
	background-origin: border-box;
}
.btn-sq {
	display: grid;
	place-items: center;
	width: 48px;
	min-height: 48px;
	flex: none;
	background: var(--gold);
	color: #fff;
	transition: background-color .25s;
}
.btn-frame--sm { min-height: 40px; padding: 0 18px; }
.btn-sq--sm { width: 40px; min-height: 40px; }
.btn-pair:hover .btn-frame, .btn-line:hover { border-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .06); }
.btn-pair:hover .btn-sq { background: #e3a446; }
.btn-pair:hover .btn-sq .ico { transform: translate(2px, -2px); }
.btn-sq .ico { transition: transform .25s; }
.btn-gold {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 2px;
	background: var(--gold);
	color: var(--text);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -.01em;
	transition: background-color .25s;
}
.btn-gold:hover { background: #e3a446; }

/* ---------- Card ---------- */
.card {
	border: 2px solid var(--line);
	background-color: rgba(255, 255, 255, .05);
	box-shadow: var(--glow);
}
.card.corners {
	background:
		linear-gradient(#fff, #fff) 0 0 / 12px 2px no-repeat,
		linear-gradient(#fff, #fff) 0 0 / 2px 12px no-repeat,
		linear-gradient(#fff, #fff) 100% 0 / 12px 2px no-repeat,
		linear-gradient(#fff, #fff) 100% 0 / 2px 12px no-repeat,
		linear-gradient(#fff, #fff) 0 100% / 12px 2px no-repeat,
		linear-gradient(#fff, #fff) 0 100% / 2px 12px no-repeat,
		linear-gradient(#fff, #fff) 100% 100% / 12px 2px no-repeat,
		linear-gradient(#fff, #fff) 100% 100% / 2px 12px no-repeat,
		rgba(255, 255, 255, .05);
	background-origin: border-box;
}

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: rgba(0, 0, 0, .1);
	-webkit-backdrop-filter: blur(43px);
	backdrop-filter: blur(43px);
	transition: background-color .3s;
}
.site-header.is-scrolled { background: rgba(13, 13, 13, .82); }
.site-header__in {
	display: flex;
	align-items: center;
	gap: 40px;
	height: 72px;
	padding-inline: max(var(--gutter), (100% - 1640px) / 2);
}
.site-logo img { width: 126px; height: 36px; }
.main-nav { flex: 1; display: flex; align-items: center; }
.main-nav ul { display: flex; gap: 16px; }
.main-nav ul a {
	display: block;
	padding: 10px;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}
.main-nav ul a:hover { color: var(--text); }
.main-nav ul a.is-active { color: var(--text); border-bottom-color: var(--text); }
.main-nav__cta { display: none; }
.site-header__cta { margin-left: auto; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; color: var(--text); }
.nav-toggle__close { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__shade { position: absolute; inset: 0; z-index: -1; }
.hero--video { min-height: clamp(640px, 100svh, 960px); display: flex; align-items: flex-end; }
.hero--video .hero__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .9) 92%, var(--bg) 100%); }
.hero--video .hero__in { padding: 140px 0 36px; }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 808px); gap: 40px; align-items: start; }
.hero__row h1 { color: var(--muted); max-width: 660px; }
.hero__side { display: grid; gap: 24px; }
.hero__side p { color: #f1f5f9; }
.btn-line { color: var(--text); }

.player { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.player__btn { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; font-weight: 500; text-transform: uppercase; letter-spacing: -.01em; }
.player__time { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 44px; margin-right: 27px; }
.player__track, .player__fill {
	height: 24px;
	background:
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px) center / 100% 10px no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 48px) center / 100% 22px no-repeat;
}
.player__track { position: relative; flex: 1; color: rgba(246, 243, 235, .55); }
.player__fill { position: absolute; inset: 0 auto 0 0; width: 0; color: var(--gold); background-size: 100vw 10px, 100vw 22px; background-position: left center; }

.hero--page { min-height: clamp(560px, 38vw, 731px); }
.hero--page .hero__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 30%, rgba(13, 13, 13, .55) 75%, var(--bg) 100%); }
.hero--page .hero__in { padding: clamp(120px, 11.6vw, 223px) 0 80px; max-width: 1640px; }
.hero--page h1 { color: var(--muted); max-width: 980px; }
.hero__lead { max-width: 808px; margin: 24px 0 36px; color: var(--text); }

/* ---------- About ---------- */
.about { padding-top: 60px; }
.about__grid { display: grid; grid-template-columns: minmax(0, 664px) minmax(0, 808px); justify-content: space-between; gap: 40px; padding-top: 21px; }
.about__left h2 { color: #fafafa; }
.stats { display: flex; gap: 32px; margin-top: 40px; padding-left: 24px; }
.stats li {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: -.01em;
	white-space: nowrap;
}
.stats li + li { border-left: 1px solid var(--line); padding-left: 32px; }
.stats b { font-size: 32px; line-height: 1; font-weight: 500; color: var(--gold); margin-right: 2px; }
.about__right { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 24px; align-items: start; }
.about__right p { text-align: justify; hyphens: auto; }
.about__logo { position: relative; width: 70px; height: 192px; }
.about__logo img { position: absolute; left: 50%; top: 50%; width: 190px; max-width: none; height: auto; transform: translate(-50%, -50%) rotate(90deg); }

.marquee { overflow: hidden; margin-top: 60px; padding-bottom: 60px; }
.marquee__track { display: flex; gap: 24px; width: max-content; animation: marquee 70s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { width: 388px; height: 259px; object-fit: cover; flex: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - 12px)); } }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.svc {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 390px;
	padding: 24px 32px;
	overflow: hidden;
}
.svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .4); }
.svc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 35%, transparent 55%, rgba(0, 0, 0, .55)); }
.svc--clear::before { background: transparent; }
.svc:hover img { transform: scale(1.05); }
.svc h3 {
	display: flex;
	gap: 12px;
	font-family: var(--f-display);

	font-weight: 800;
	font-size: clamp(19px, .83vw + 12px, 28px);
	line-height: 1.2;
	letter-spacing: -.02em;
	max-width: 470px;
}
.svc__num { font-size: 18px; line-height: 1.5; color: #fff; flex: none; }
.svc p { max-width: 467px; }

/* ---------- Credits ---------- */
.sec--credits { padding-bottom: var(--sec); }
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 24px; }
.credit { display: flex; gap: 24px; align-items: center; }
.credit img { width: 163px; height: 241px; object-fit: cover; flex: none; }
.credit > div { display: grid; gap: 12px; }
.credit__tag { color: var(--gold); font-weight: 700; font-size: 14px; letter-spacing: .11em; text-transform: uppercase; }

/* ---------- Records ---------- */
.records { position: relative; isolation: isolate; min-height: clamp(560px, 51vw, 980px); display: flex; align-items: flex-end; }
.records__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.records::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7) 78%, rgba(0, 0, 0, .9) 100%); }
.records__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 702px); gap: 40px; align-items: end; padding-bottom: 82px; }
.records__title .eyebrow { margin-bottom: 10px; }
.records__logo { width: 192px; margin-bottom: 20px; }
.records__row { display: flex; align-items: center; gap: 28px; }
.records__badge { width: 81px; height: 81px; border-radius: 50%; flex: none; }
.records__stat { display: grid; gap: 4px; }
.records__stat + .records__stat { border-left: 1px solid var(--line); padding-left: 32px; }
.records__stat b {
	font-family: var(--f-display);

	font-weight: 800;
	font-size: clamp(24px, 1.46vw + 12px, 40px);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--gold);
	white-space: nowrap;
}
.records__stat span { color: #f1f5f9; max-width: 260px; }

/* ---------- Incentive steps ---------- */
.sec--incentive { padding-bottom: 0; }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.step { grid-column: span 2; display: grid; place-items: center; min-height: 227px; padding: 40px; text-align: center; }
.step:nth-child(n + 4) { grid-column: span 3; }
.step p {
	font-family: var(--f-display);

	font-weight: 800;
	font-size: clamp(18px, .83vw + 11px, 28px);
	line-height: 1.2;
	letter-spacing: -.02em;
	max-width: 660px;
}

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 646px) minmax(0, 808px); justify-content: space-between; gap: 40px; align-items: start; }
.faq-wrap__left .bar { margin-bottom: 16px; }
.faq-wrap__sub { color: var(--muted); max-width: 400px; padding-left: 24px; }
.faq-wrap__img { width: 331px; height: 414px; object-fit: cover; margin-top: 40px; }
.ask { width: min(313px, 100%); margin-top: 78px; padding: 24px 24px 16px 20px; background: var(--panel); box-shadow: var(--glow); }
.ask h3 { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.ask p { font-size: 14px; color: var(--muted); margin: 12px 0 32px; }
.ask__btn { display: inline-block; padding: 10px 16px; background: rgba(255, 255, 255, .4); font-weight: 700; font-size: 14px; text-transform: uppercase; transition: background-color .2s; }
.ask__btn:hover { background: rgba(255, 255, 255, .55); }

.faq { display: grid; gap: 32px; }
.faq__item { padding: 0 24px; transition: background-color .3s, padding .3s; }
.faq__item[open] { padding: 24px; background: var(--panel); box-shadow: var(--glow); }
.faq__item summary {
	display: flex;
	justify-content: space-between;
	gap: 19px;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item[open] summary { color: var(--text); }
.sec--faq .faq__item[open] summary { color: var(--gold); }
.home .sec--faq .faq__item[open] summary { color: var(--text); }
.faq__chev { flex: none; transition: transform .3s; }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding-top: 16px; }

/* ---------- Contact ---------- */
.contact { position: relative; isolation: isolate; background: #000; padding: clamp(280px, 42vw, 808px) 0 120px; }
.contact { overflow: hidden; }
.contact__bg { position: absolute; left: 0; top: -16.1vw; width: 100%; height: 78.7vw; object-fit: cover; z-index: -2; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .12) 30vw, rgba(0, 0, 0, .7) 45vw, #000 57vw); }
.contact .sec-head { margin-bottom: 60px; }
@media (min-width: 1025px) { .contact .sec-head__row { grid-template-columns: minmax(0, 1fr) minmax(0, 695px); } }
.contact .sec-head__side { color: var(--muted); max-width: 695px; }
.brief { max-width: 1440px; margin-inline: auto; }
.brief__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 40px; margin-bottom: 60px; }
.brief__narrow { max-width: 800px; margin-inline: auto; display: grid; gap: 24px; }
.brief__narrow > .field { margin-bottom: 16px; }
.field { display: grid; gap: 12px; }
.field > span { font-weight: 700; font-size: 14px; letter-spacing: .11em; text-transform: uppercase; }
.field input, .field select, .field textarea {
	width: 100%;
	min-height: 36px;
	padding: 6px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	border-radius: 0;
	background: transparent;
	outline: 0;
	transition: border-color .2s;
	appearance: none;
}
.field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23f6f3eb' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center no-repeat; cursor: pointer; }
.field select option { background: var(--panel); color: var(--text); }
.field textarea { resize: vertical; min-height: 36px; field-sizing: content; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); }
.upload {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 24px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	text-align: center;
	cursor: pointer;
	transition: background-color .2s;
}
.upload:hover, .upload.is-drag { background: rgba(255, 255, 255, .15); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload .ico { margin-bottom: 12px; }
.upload__title { font-weight: 400; color: #fff; }
.upload small { font-size: 12px; color: var(--muted); }
.upload__btn { margin-top: 16px; padding: 4px 12px; background: rgba(255, 255, 255, .2); font-weight: 500; font-size: 14px; text-transform: uppercase; }
.brief__legal { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 16px; font-size: 14px; }
.brief__legal a { color: #bca150; text-decoration: underline; }
.hp { position: absolute; left: -9999px; }
.form-note { margin-bottom: 32px; padding: 14px 18px; border-left: 2px solid var(--gold); background: rgba(214, 146, 43, .08); }
.form-note--err { border-color: #e07a5f; background: rgba(224, 122, 95, .1); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg); padding: 100px 0 60px; box-shadow: 0 -8px 8px rgba(0, 0, 0, .05); }
.site-footer .wrap { container-type: inline-size; }
.site-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer__brand { max-width: 450px; display: grid; gap: 24px; }
.site-footer__brand img { width: 450px; }
.site-footer__brand p { font-weight: 500; max-width: 447px; margin-top: 16px; }
.social { display: flex; gap: 16px; }
.social a { display: block; transition: transform .2s; }
.social a:hover { transform: translateY(-2px); }
.site-footer__cols { display: flex; gap: clamp(40px, 8.3vw, 160px); flex-wrap: wrap; }
.site-footer__cols h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, .83vw + 12px, 28px); letter-spacing: -.02em; color: var(--gold); margin-bottom: 36px; }
.site-footer__cols ul { display: grid; gap: 28px; }
.site-footer__cols a, .site-footer__cols span { font-weight: 500; }
.site-footer__cols a:hover { color: var(--gold); }
.contact-list li { display: flex; align-items: center; gap: 10px; }
.site-footer__giant {
	margin: 60px 0 0;
	font-family: var(--f-giant);
	font-size: 9.45cqw;
	line-height: 1.5;
	letter-spacing: -.02em;
	white-space: nowrap;
	display: flex;
	justify-content: space-between;
	background: linear-gradient(180deg, #f6f3eb 30%, #5d5b57 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	user-select: none;
}
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 20px;
	margin-top: 31px;
	padding-top: 30px;
	border-top: 1.5px solid #fff;
}
.site-footer__bottom > * + *::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 16px; border-radius: 50%; background: #fefefe; vertical-align: middle; }
.site-footer__bottom a:hover { color: var(--gold); }

/* ---------- Saudi page ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: start; }
.split--rev { align-items: center; }
.split__img { width: 100%; aspect-ratio: 790 / 526; object-fit: cover; }
.split .sec-head { margin-bottom: 16px; }
.rebate { display: grid; gap: 24px; align-content: start; }
.rebate__big { font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 2.5vw + 20px, 68px); line-height: 1.2; letter-spacing: -.02em; color: var(--gold); }
.rebate__sub { margin-top: -20px; padding-bottom: 24px; border-bottom: 1px solid #2a2a2a; }
.note { padding: 16px 16px 16px 24px; border-left: 2px solid var(--gold); background: rgba(214, 146, 43, .05); font-style: italic; font-weight: 300; max-width: 675px; }
.ext-link { display: inline-flex; align-items: center; gap: 10px; color: var(--sand); font-weight: 500; text-transform: uppercase; justify-self: start; }
.ext-link:hover { color: var(--gold); }
.lead { max-width: 808px; }
.lead--narrow { max-width: 568px; margin-top: -60px; margin-bottom: 40px; padding-left: 0; }
.lead--rule { border-top: 1px solid #2a2a2a; padding-top: 40px; margin-top: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.chip { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1 1 200px; max-width: 253px; min-height: 80px; padding: 0 16px; font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }

.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.method__card { display: flex; flex-direction: column; gap: 12px; min-height: 227px; padding: 28px 24px 24px; }
.method__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 32px; }
.method__num { font-family: var(--f-display); font-weight: 800; font-size: 28px; color: var(--gold); letter-spacing: -.02em; }
.method__ico { display: grid; place-items: center; width: 40px; height: 40px; background: rgba(255, 255, 255, .1); }

.filters { display: flex; flex-wrap: wrap; gap: 24px; margin-top: -20px; }
.filters button {
	flex: 1 0 auto;
	min-width: 160px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid #616161;
	background: transparent;
	color: #fafafa;
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	transition: background-color .2s, color .2s, border-color .2s;
}
.filters button:hover { border-color: var(--gold); }
.filters button.is-on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.loc-slider { margin-top: 60px; overflow: hidden; }
.loc-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; scroll-padding-inline: max(var(--gutter), (100vw - 1640px) / 2); }
.loc-track::-webkit-scrollbar { display: none; }
.loc { flex: none; width: clamp(240px, 20.4vw, 392px); aspect-ratio: 392 / 600; margin: 0; scroll-snap-align: start; overflow: hidden; }
.loc img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.loc:hover img { transform: scale(1.04); }
.loc[hidden] { display: none; }
.loc-empty { align-self: center; max-width: 360px; color: var(--muted); }
.loc-empty a { color: var(--gold); text-decoration: underline; }
.loc-ctrl { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; }
.loc-bar { position: relative; flex: 0 1 1025px; height: 19px; padding: 2px; background: rgba(255, 255, 255, .2); }
.loc-bar span { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 33%; background: var(--gold); transition: left .3s, width .3s; }
.loc-arrows { display: flex; gap: 4px; }
.loc-arrows button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #616161; background: transparent; color: var(--text); transition: border-color .2s; }
.loc-arrows button:hover { border-color: var(--gold); }

.studios { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.studios li { grid-column: span 2; display: grid; place-items: center; min-height: 80px; padding: 8px 12px; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(15px, .5vw + 10px, 20px); letter-spacing: -.02em; text-transform: uppercase; }
.studios li:nth-child(n + 4) { grid-column: span 3; }

.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 105px; padding: 50px 100px; border: 1px solid var(--sand); }
.stack li { display: flex; gap: 18px; align-items: flex-start; padding: 30px 0; border-bottom: 1px solid rgba(246, 243, 235, .6); font-weight: 500; font-size: 18px; }
.stack li:nth-last-child(-n + 2) { border-bottom: 0; }
.stack .ico { flex: none; color: var(--sand); margin-top: 3px; }

/* ---------- About page ---------- */
.box.corners { background-color: rgba(255, 255, 255, .05); box-shadow: var(--glow); }
.intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: start; }
.intro__text { display: grid; gap: 24px; }
.intro .sec-head, .leader .sec-head { margin-bottom: 0; }
.intro .bar { color: #fafafa; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; padding-top: 24px; border-top: 1px solid #2a2a2a; }
.pillars h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, .42vw + 16px, 24px); line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.intro__fig { position: relative; margin: 0; overflow: hidden; }
.intro__fig img { width: 100%; aspect-ratio: 790 / 526; object-fit: cover; }
.intro__fig figcaption { position: absolute; inset: auto 0 0; padding: 80px 41px 32px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); }
.intro__fig b { display: block; margin-bottom: 8px; font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-transform: uppercase; color: var(--gold); }

.leader { display: grid; grid-template-columns: minmax(0, 545px) minmax(0, 1035px); justify-content: space-between; gap: 60px; align-items: start; }
.leader__side { display: grid; gap: 40px; }
.profile { padding: 24px 24px 40px; }
.profile img { width: 100%; }
.profile h3 { margin: 32px 8px 20px; }
.profile p { margin-inline: 8px; text-transform: uppercase; }
.quote { margin: 0; padding: 40px 35px 0; border-top: 1px solid var(--line); }
.quote p { display: inline; font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, .42vw + 16px, 24px); line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; color: var(--gold); }
.quote cite { font-style: normal; font-size: 14px; margin-left: 4px; }
.quote cite::before { content: "- "; }
.leader__main { display: grid; gap: 40px; }
.leader__head { display: grid; gap: 16px; }
.leader__head .eyebrow { margin-bottom: 0; }
.leader__head .bar { color: #fafafa; }
.credits-box { display: grid; gap: 24px; padding: 25px 24px; }
.credits-box h3, .focus h3 { font-size: 16px; text-transform: uppercase; color: var(--gold); }
.credits-box__note { font-style: italic; font-weight: 300; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 16px; }
.tags li { min-height: 40px; padding: 8px 24px; line-height: 24px; background: rgba(255, 255, 255, .1); font-weight: 500; font-size: 14px; color: #fafafa; }
.tags span { color: var(--sand); margin-left: .3em; }
.focus { display: grid; gap: 24px; }
.milestone { position: relative; isolation: isolate; display: grid; gap: 16px; padding: 50px 24px; overflow: hidden; }
.milestone__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.milestone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .55)); }
.milestone .eyebrow { margin-bottom: 0; }
.milestone .pair { margin-top: 24px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.stat-card { display: grid; align-content: center; gap: 12px; min-height: 193px; padding: 32px 18px; }
.stat-card .eyebrow { margin-bottom: 0; }
.stat-card b { font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, .42vw + 16px, 24px); line-height: 1.2; letter-spacing: -.02em; }

.slider { overflow: hidden; }
.slider__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; scroll-padding-inline: max(var(--gutter), (100vw - 1640px) / 2); }
.slider__track::-webkit-scrollbar { display: none; }
.member { flex: none; display: flex; flex-direction: column; width: clamp(280px, 20.4vw, 392px); padding: 25px; scroll-snap-align: start; }
.member img { width: 100%; aspect-ratio: 342 / 339; object-fit: cover; object-position: top; margin-bottom: 24px; }
.member .eyebrow { margin-bottom: 12px; }
.member__head { display: flex; align-items: center; gap: 8px; }
.member__head h3 { flex: 1; font-size: clamp(20px, .42vw + 16px, 24px); color: #fafafa; }
.member__head a { transition: transform .2s; }
.member__head a:hover { transform: translateY(-2px); }
.member__bio { margin: 12px 0 auto; padding-bottom: 12px; }
.member__meta { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; margin: 0; padding: 16px; background: rgba(255, 255, 255, .1); }
.member__meta dt { color: var(--sand); }
.member__meta dd { margin: 0; white-space: pre-line; line-height: 1.75; }
#team .loc-ctrl { margin-top: 40px; }
.sec--tenets { padding-top: var(--sec); }

/* ---------- Portfolio & Credits page ---------- */
.hero--credits { min-height: clamp(600px, 52vw, 1000px); display: flex; align-items: center; }
.hero--credits .hero__in { padding: 120px 0 80px; }
.hero--credits .hero__shade { background: linear-gradient(90deg, #000 3%, rgba(0, 0, 0, .82) 35%, rgba(0, 0, 0, 0) 75%), linear-gradient(180deg, rgba(0, 0, 0, 0) 85%, var(--bg) 100%); }
.hero--credits h1 { color: var(--text); }
.hero--credits .hero__lead { margin: 8px 0 28px; }
.sec--archive .sec-head { margin-bottom: 40px; }
.sec--archive .sec-head__side { max-width: 506px; }
.region { display: flex; align-items: center; gap: 24px; margin-bottom: 60px; }
.region__label { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--text); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.region__label .ico { color: var(--sand); }
.region .filters { flex: 1; margin: 0; }
.region .filters button { min-width: 0; }
.credit[hidden] { display: none; }
.credit img { border: 1px solid #2c2c2c; }
.credit__roles span { display: block; color: #bcbcbc; }
.credit__roles b { color: var(--text); font-weight: 700; }
.credit__roles i { font-style: normal; }
.credits__empty { grid-column: 1 / -1; color: var(--muted); }
.credits__empty a { color: var(--gold); text-decoration: underline; }
.sec--case { padding-top: 0; }
.case { display: grid; gap: 40px; padding: 80px 100px; border: 1px solid var(--sand); }
.case__head { display: grid; gap: 16px; }
.case__head .eyebrow { margin-bottom: 0; }
.case__head .bar { color: #fafafa; }
.case__head > p:last-child { max-width: 808px; }
.case__sub { font-weight: 500; font-size: 20px; letter-spacing: -.01em; text-transform: uppercase; color: var(--gold); }
.record { display: grid; align-content: center; gap: 8px; min-height: 191px; padding: 30px 32px; }
.record b { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 1.46vw + 12px, 40px); line-height: 1.2; letter-spacing: -.02em; }
.record__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid #fff; font-weight: 700; font-size: 14px; letter-spacing: .11em; text-transform: uppercase; color: #bcbcbc; }
.record__foot .gold { display: inline-flex; align-items: center; gap: 8px; }
.record__foot img { width: 24px; height: 24px; border-radius: 50%; }
.stills { display: grid; gap: 24px; }
.stills__title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 20px; letter-spacing: -.01em; text-transform: uppercase; }
.stills__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 24px; }
.stills__grid img { width: 100%; aspect-ratio: 342 / 228; object-fit: cover; border: 1px solid #2c2c2c; }

/* ---------- Contact page ---------- */
.hero--contact { min-height: clamp(640px, 46.6vw, 895px); display: flex; flex-direction: column; }
.hero--contact .hero__in { flex: 1; padding: clamp(120px, 13vw, 251px) 0 60px; }
.hero--contact .hero__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, rgba(13, 13, 13, 0) 55%, rgba(13, 13, 13, .8) 88%, var(--bg) 100%), rgba(0, 0, 0, .4); }
.hero--contact h1 { color: var(--text); }
.hero--contact .hero__lead { max-width: 837px; margin: 8px 0 28px; }
.strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 80px; padding: 20px 0; font-weight: 500; font-size: clamp(16px, .42vw + 12px, 24px); text-transform: uppercase; letter-spacing: -.01em; }
.strip__star { color: var(--gold); }

.enquiry__grid { display: grid; grid-template-columns: minmax(0, 696fr) minmax(0, 904fr); gap: 40px; align-items: start; }
.enquiry__side { display: grid; gap: 40px; }
.info { display: grid; gap: 12px; padding: 32px 40px; }
.info h2 { color: #fafafa; }
.info__list { display: grid; gap: 24px; margin-top: 20px; }
.info__list li { display: flex; align-items: center; gap: 10px; }
.info__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: rgba(214, 146, 43, .2); color: var(--gold); }
.info__list b { display: block; font-weight: 500; font-size: 18px; color: #fafafa; }
.info__list small { display: block; font-size: 14px; color: #bcbcbc; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin-top: 20px; }
.checks ul { display: grid; gap: 24px; align-content: start; }
.checks li { display: flex; gap: 10px; font-weight: 500; font-size: 18px; color: #fafafa; }
.checks .ico { flex: none; color: var(--sand); }
.info__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid #fff; color: #a9a9a9; }

.enquiry__form { padding: 32px 40px; }
.enquiry__form .bar { color: #fafafa; line-height: 48px; }
.enquiry__req { margin: 16px 0 32px; }
.eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.eq .form-note { grid-column: 1 / -1; margin: 0; }
.eq__wide { grid-column: 1 / -1; }
.eq__f { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.eq__f > span, .eq__f > label, .eq__f > legend { padding: 0; font-weight: 500; font-size: 14px; color: #fafafa; }
.eq__f > legend { margin-bottom: 8px; }
.eq input:not([type="radio"]):not([type="file"]), .eq textarea, .dd__btn, select.dd {
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 0;
	background: rgba(255, 255, 255, .05);
	color: var(--text);
	outline: 0;
	appearance: none;
	transition: border-color .2s;
}
.eq textarea { min-height: 120px; padding: 16px; resize: vertical; }
.eq ::placeholder { color: #a9a9a9; opacity: 1; }
.eq input:focus, .eq textarea:focus, select.dd:focus, .dd__btn:focus-visible, .dd.is-open .dd__btn { border-color: var(--gold); outline: 0; }
.eq input[type="date"] { min-height: 40px; color-scheme: dark; }
.eq input[type="number"] { -moz-appearance: textfield; }
select.dd { background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23f6f3eb' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center no-repeat; cursor: pointer; }
select.dd option { background: var(--panel); }
fieldset.eq__f { display: block; }
.eq__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eq__pair label { display: grid; gap: 2px; }
.eq__dates small { font-size: 10px; }

/* Custom dropdown (built by main.js over the native select) */
.dd { position: relative; }
.dd select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.dd__btn .ico { flex: none; transition: transform .2s; }
.dd.is-open .dd__btn .ico { transform: rotate(180deg); }
.dd__pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); border: 1px solid rgba(255, 255, 255, .12); background: #1b1b1b; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.dd__pop[hidden] { display: none; }
.dd__search { position: relative; display: block; margin: 12px; }
.dd__search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #a9a9a9; }
.eq .dd .dd__search input { min-height: 40px; padding-left: 40px; border-color: var(--gold); background: transparent; }
.dd__list { max-height: 384px; overflow-y: auto; scrollbar-width: thin; }
.dd__list li { position: relative; padding: 12px 40px 12px 16px; line-height: 24px; cursor: pointer; }
.dd__list li:hover, .dd__list li.is-hi { background: rgba(255, 255, 255, .05); }
.dd__list li[aria-selected="true"] { background: rgba(214, 146, 43, .12); }
.dd__list li[aria-selected="true"]::after { content: ""; position: absolute; right: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); }
.dd__list li[hidden] { display: none; }

.sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; }
.sugg span { margin-right: 4px; }
.sugg button { min-height: 28px; padding: 0 8px; border: 1px solid #fff; background: rgba(255, 255, 255, .1); font-size: 14px; transition: background-color .2s, border-color .2s; }
.sugg button:hover { border-color: var(--gold); background: rgba(214, 146, 43, .15); }
.radios { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.radios label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.radios input { appearance: none; width: 18px; height: 18px; margin: 3px; border: 1.5px solid var(--text); border-radius: 50%; cursor: pointer; }
.radios input:checked { border-color: var(--gold); background: radial-gradient(var(--gold) 0 4px, transparent 4.5px); }
.enquiry .upload { border-radius: 0; }
.enquiry .btn-gold { margin-top: 8px; color: #1f1b1c; }

.done { display: grid; justify-items: center; gap: 24px; padding: 32px 0; text-align: center; }
.done__ico { display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid rgba(214, 146, 43, .5); border-radius: 50%; color: var(--gold); }
.done p { max-width: 600px; }
.done__btn { padding: 12px 28px; background: rgba(255, 255, 255, .2); font-weight: 500; text-transform: uppercase; transition: background-color .2s; }
.done__btn:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 1200px) {
	.enquiry__grid { grid-template-columns: 1fr; }
	.enquiry__side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.strip { justify-content: center; }
}
@media (max-width: 1024px) {
	.enquiry__side { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.hero--contact { min-height: 0; }
	.hero--contact .hero__in { padding: 120px 0 40px; }
	.hero--contact .hero__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .55) 50%, var(--bg) 100%); }
	.strip { gap: 8px 14px; font-size: 14px; padding: 16px 0 24px; }
	.strip__star { width: 12px; height: 12px; }
	.info, .enquiry__form { padding: 24px 20px; }
	.info__list b, .checks li { font-size: 16px; }
	.checks { grid-template-columns: 1fr; gap: 16px; }
	.checks ul { gap: 16px; }
	.eq { grid-template-columns: 1fr; gap: 20px; }
	.enquiry__form .bar { line-height: 1.2; }
	.hero--contact h1 br { display: none; }
	.eq input[type="date"] { min-width: 0; padding: 0 10px; }
}
@media (max-width: 420px) {
	.eq__pair { grid-template-columns: 1fr; gap: 12px; }
}

.page-plain { padding-top: 160px; }
.prose { max-width: 860px; }
.prose h1 { margin-bottom: 32px; }
.prose p, .prose ul { margin-bottom: 1em; }
.prose a { color: var(--gold); text-decoration: underline; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
	.js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
	html { scroll-behavior: auto; }
}

/* ================= Responsive ================= */
@media (max-width: 1440px) {
	.main-nav ul { gap: 4px; }
	.site-header__in { gap: 28px; }
	.stack { padding: 40px 56px; column-gap: 64px; }
}

@media (max-width: 1200px) {
	.nav-toggle { display: block; }
	.site-header__cta { display: none; }
	.main-nav {
		position: fixed;
		/* Header's backdrop-filter makes it the containing block, so size to the viewport explicitly. */
		inset: 72px 0 auto;
		height: calc(100vh - 72px);
		height: calc(100dvh - 72px);
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		gap: 32px;
		padding: 32px var(--gutter) 40px;
		background: var(--bg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .3s, transform .3s, visibility .3s;
		overflow-y: auto;
	}
	.nav-open .main-nav { opacity: 1; visibility: visible; transform: none; }
	.nav-open .nav-toggle__open { display: none; }
	.nav-open .nav-toggle__close { display: block; }
	.nav-open { overflow: hidden; }
	.nav-open .site-header { background: rgba(13, 13, 13, .97); }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav ul a { padding: 18px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
	.main-nav ul a.is-active { border-bottom-color: var(--line); color: var(--gold); }
	.main-nav__cta { display: inline-flex; }
	.main-nav__cta .btn-frame { flex: 1; }

	.hero__row, .about__grid, .records__in, .faq-wrap, .split { grid-template-columns: 1fr; }
	.hero__row h1 { max-width: 820px; }
	.about__right { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); }
	.svc-grid, .credits, .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.credits { gap: 40px 24px; }
	.records__in { gap: 32px; }
	.faq-wrap__left { max-width: 720px; }
	.ask { margin-top: 32px; }
	.split--rev .split__img { order: -1; }
	.split .sec-head { margin-bottom: 16px; }
	.intro, .leader { grid-template-columns: 1fr; }
	.leader__side { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: end; }
	.region { flex-direction: column; align-items: stretch; gap: 16px; }
	.case { padding: 56px 48px; }
}

@media (max-width: 1024px) {
	.sec-head__row { grid-template-columns: 1fr; }
	.sec-head__side { justify-self: start; }
	.lead--narrow { margin-top: -16px; }
	.about__right { grid-template-columns: 1fr; }
	.about__logo { display: none; }
	.about__right p { text-align: left; }
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.step, .step:nth-child(n + 4) { grid-column: span 1; min-height: 180px; padding: 32px 24px; }
	.step:last-child { grid-column: 1 / -1; }
	.studios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.studios li, .studios li:nth-child(n + 4) { grid-column: span 1; }
	.studios li:last-child { grid-column: 1 / -1; }
	.stack { grid-template-columns: 1fr; padding: 24px 32px; }
	.stack li:nth-last-child(2) { border-bottom: 1px solid rgba(246, 243, 235, .6); }
	.filters { gap: 12px; }
	.filters button, .filters button.is-on { min-width: 0; }
	.site-footer__brand img { width: 340px; }
	.stills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 768px) {
	body { font-size: 15px; }
	.hero--video { min-height: 100svh; }
	.hero--video .hero__in { padding: 120px 0 24px; }
	.hero__side { gap: 20px; }
	.player { margin-top: 28px; gap: 12px; }
	.player__time { margin-right: 4px; }
	.btn-row { gap: 12px; }
	.btn-row > * { width: 100%; }
	.btn-pair .btn-frame { flex: 1; }
	.btn-frame, .btn-line { white-space: normal; text-align: center; padding: 10px 16px; }
	.hero--page .hero__in { padding-bottom: 56px; }
	.hero--page .hero__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .45) 40%, rgba(13, 13, 13, .7) 75%, var(--bg) 100%); }
	.method__top { padding-bottom: 16px; }
	.site-footer__cols ul { gap: 6px; }
	.site-footer__cols a { display: inline-block; padding: 8px 0; }
	.site-footer__bottom a { padding: 6px 0; }

	.stats { flex-wrap: wrap; padding-left: 0; gap: 20px 24px; margin-top: 28px; }
	.stats li + li { padding-left: 24px; }
	.stats b { font-size: 26px; }
	.marquee { margin-top: 40px; padding-bottom: 40px; }
	.marquee__track { gap: 12px; }
	.marquee img { width: 240px; height: 160px; }
	@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

	.svc-grid, .credits, .method { grid-template-columns: 1fr; }
	.svc-grid { gap: 16px; }
	.svc { min-height: 340px; padding: 24px; }
	.credit img { width: 120px; height: 178px; }
	.credit { gap: 20px; }
	.records { min-height: 0; padding-top: 280px; }
	.records__row { flex-wrap: wrap; gap: 20px; }
	.records__stat + .records__stat { border-left: 0; padding-left: 0; }
	.records__stat { flex: 1 1 200px; }
	.records__in { padding-bottom: 56px; }
	.steps { grid-template-columns: 1fr; gap: 16px; }
	.step:last-child { grid-column: auto; }
	.faq { gap: 24px; }
	.faq__item { padding: 0 4px; }
	.faq__item[open] { padding: 20px; }
	.faq__item summary { font-size: 16px; }
	.faq-wrap__img { width: 100%; height: auto; aspect-ratio: 331 / 414; max-width: 360px; }
	.contact { padding-bottom: 72px; }
	.contact__bg { top: 0; height: 560px; }
	.contact::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 560px); }
	.brief__grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 36px; }
	.method__card { min-height: 0; }
	.chips { gap: 12px; }
	.chip { flex-basis: 100%; max-width: none; justify-content: flex-start; padding: 0 24px; }
	.loc-slider { margin-top: 32px; }
	.loc-track { gap: 12px; }
	.loc { width: 72vw; max-width: 320px; }
	.loc-ctrl { margin-top: 24px; }
	.stack { padding: 8px 20px; }
	.stack li { font-size: 16px; padding: 20px 0; gap: 14px; }
	.site-footer { padding: 64px 0 40px; }
	.site-footer__top { flex-direction: column; }
	.site-footer__brand img { width: 280px; }
	.site-footer__brand p br { display: none; }
	.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
	.site-footer__cols > div:last-child { grid-column: 1 / -1; }
	.site-footer__cols h3 { margin-bottom: 20px; }
	.site-footer__cols ul { gap: 18px; }
	.site-footer__giant { margin-top: 40px; }
	.site-footer__bottom { font-size: 14px; flex-direction: column; gap: 10px; }
	.site-footer__bottom > * + *::before { display: none; }

	.pillars, .pair { grid-template-columns: 1fr; }
	.pillars { gap: 20px; }
	.intro__fig figcaption { padding: 60px 20px 20px; }
	.leader__side { grid-template-columns: 1fr; gap: 32px; }
	.profile { padding: 16px 16px 28px; }
	.profile h3 { margin: 24px 4px 12px; }
	.profile p { margin-inline: 4px; }
	.quote { padding: 28px 0 0; }
	.leader__main { gap: 32px; }
	.credits-box { padding: 20px 16px; gap: 18px; }
	.tags { gap: 8px; }
	.tags li { min-height: 36px; padding: 6px 14px; font-size: 13px; }
	.milestone { padding: 32px 16px; }
	.stat-card { min-height: 0; padding: 28px 18px; }
	.slider__track { gap: 12px; }
	.member { width: 80vw; max-width: 340px; padding: 16px; }
	.member__meta { grid-template-columns: 90px minmax(0, 1fr); }
	#team .loc-ctrl { margin-top: 24px; }

	.hero--credits { min-height: 600px; align-items: flex-end; }
	.hero--credits .hero__media { object-position: 70% center; }
	.region { margin-bottom: 40px; }
	.case { padding: 32px 20px; gap: 32px; }
	.case__sub { font-size: 17px; }
	.record { min-height: 0; padding: 24px 20px; }
	.stills__grid { gap: 12px; }
	.stills__grid li:nth-child(3), .stills__grid li:nth-child(4), .stills__grid li:nth-child(n + 7) { display: none; }
}

@media (max-width: 480px) {
	.stats li + li { border-left: 0; padding-left: 0; }
	.stats li { flex: 1 1 100%; }
	.credit img { width: 96px; height: 142px; }
	.studios { grid-template-columns: 1fr; }
	.studios li:last-child { grid-column: auto; }
	.filters button { flex: 1 1 calc(50% - 6px); padding: 0 8px; font-size: 13px; }
	.filters button:first-child { flex-basis: 100%; }
	.records__badge { width: 64px; height: 64px; }
	.upload { padding: 20px 16px; }
}