/* =========================================================
   ARKAN — The Quiet Address
   Tokens · Base · Type · Navigation · Hero · Theatre · Journal
   Project · Footer · Utilities · Responsive · Reduced motion
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
	--ink: #11151d;
	--ink-2: #181e29;
	--navy: #344360;
	--tan: #b89085;            /* brand "thatch" C30 M45 Y45 K0 */
	--tan-soft: #cfb0a8;
	--stone: #e1dcd9;
	--paper: #f4f1ee;
	--text: #1a1a1a;
	--muted: #8e8580;
	--muted-dark: #a59d98;
	--line: rgba(26, 26, 26, .12);
	--line-dark: rgba(244, 241, 238, .16);

	--f-display: "Andreas", "Italiana", "Didot", Georgia, serif;
	--f-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

	--fs-xl: clamp(3.5rem, 9vw, 10.5rem);
	--fs-l: clamp(2.5rem, 5.5vw, 6rem);
	--fs-m: clamp(1.75rem, 3vw, 3rem);
	--fs-lead: clamp(1.125rem, 1.35vw, 1.375rem);
	--fs-body: 1rem;
	--fs-label: .72rem;
	--track: .22em;

	--m: clamp(20px, 5vw, 96px);
	--rail: 0px;
	--brand: 64px;
	--brand-top: 14px;
	--below-brand: calc(var(--brand-top) + var(--brand) + 28px);
	--gap: clamp(16px, 2vw, 32px);
	--section: clamp(96px, 14vw, 220px);

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-inout: cubic-bezier(.65, 0, .35, 1);
	--t-micro: .3s;
	--t-ui: .6s;
	--t-reveal: .9s;
	--t-scene: 1.2s;
}

@media (min-width: 1024px) {
	:root { --rail: 88px; --brand: 96px; --brand-top: clamp(18px, 3vh, 32px); }
}

:lang(ar) {
	--f-display: "Noto Naskh Arabic", "Andreas", "Italiana", serif;
	--f-text: "IBM Plex Sans Arabic", "Hanken Grotesk", sans-serif;
	--track: 0;
}
:lang(ka) {
	--f-display: "Noto Serif Georgian", "Andreas", "Italiana", serif;
	--f-text: "Noto Sans Georgian", "Hanken Grotesk", sans-serif;
	--track: .06em;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--f-text);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
::selection { background: var(--tan); color: var(--paper); }

:focus-visible {
	outline: 2px solid var(--tan);
	outline-offset: 4px;
}

.wrap {
	padding-inline-start: var(--m);
	padding-inline-end: calc(var(--m) + var(--rail));
}

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip {
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--paper);
	color: var(--ink);
	transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Type ---------- */
.display-xl, .display-l, .display-m, .hero__word {
	font-family: var(--f-display);
	font-weight: 400;
	font-optical-sizing: auto;
}
.display-xl { font-size: var(--fs-xl); line-height: .92; letter-spacing: -.02em; }
.display-l  { font-size: var(--fs-l); line-height: 1; letter-spacing: -.015em; }
.display-m  { font-size: var(--fs-m); line-height: 1.12; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; font-weight: 300; max-width: 34em; }

.label {
	font-family: var(--f-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0;
}
:lang(ar) .label { text-transform: none; font-size: .82rem; }
.label__num {
	color: var(--tan);
	font-variant-numeric: tabular-nums;
	margin-inline-end: .9em;
}
.coords {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-size: var(--fs-label);
	letter-spacing: .14em;
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
	margin: 0;
	direction: ltr;
}
.coords .icon { width: 14px; height: 14px; color: var(--tan); }

.icon { width: 22px; height: 22px; flex: none; }
[dir="rtl"] .icon--arrow { transform: scaleX(-1); }

/* Masked line reveal */
.line {
	display: block;
	overflow: hidden;
	padding-block-end: .08em;
	margin-block-end: -.08em;
}
.line__inner {
	display: inline-block;
	will-change: transform;
}
.js .reveal-lines .line__inner,
.js .hero__word .line__inner,
.js .slide .line__inner {
	transform: translateY(108%);
	transition: transform var(--t-reveal) var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0s));
}
.js .reveal-lines.is-in .line__inner,
.js.is-loaded .hero__word .line__inner,
.js .slide.is-active .line__inner { transform: none; }

/* Fade-up reveal */
.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
	transition-delay: var(--d, 0s);
}
.js .reveal.is-in,
.js.is-loaded .hero .reveal { opacity: 1; transform: none; }

/* ---------- Links & CTAs ---------- */
.ulink {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size var(--t-ui) var(--ease-out), color var(--t-micro);
	padding-block-end: 2px;
}
[dir="rtl"] .ulink { background-position: 100% 100%; }
.ulink:hover, .ulink.is-current { background-size: 100% 1px; }

.link-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	padding-block: 10px;
	cursor: pointer;
}
:lang(ar) .link-cta { text-transform: none; font-size: .85rem; }
.link-cta__text {
	background: linear-gradient(var(--tan), var(--tan)) no-repeat 0 100% / 100% 1px;
	padding-block-end: 4px;
	transition: background-size var(--t-ui) var(--ease-out);
}
.link-cta:hover .link-cta__text { background-size: 0 1px; background-position: 100% 100%; }
.link-cta .icon { transition: transform var(--t-ui) var(--ease-out); color: var(--tan); }
.link-cta:hover .icon { transform: translateX(6px); }
[dir="rtl"] .link-cta:hover .icon { transform: scaleX(-1) translateX(6px); }

.big-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	font-family: var(--f-display);
	font-size: var(--fs-l);
	line-height: 1;
	letter-spacing: -.015em;
	padding-block: clamp(40px, 6vw, 88px);
	border-block-start: 1px solid var(--line-dark);
}
.big-link .icon {
	width: clamp(36px, 5vw, 72px);
	height: clamp(36px, 5vw, 72px);
	stroke-width: .8;
	color: var(--tan);
	transition: transform var(--t-ui) var(--ease-out);
}
.big-link__text {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size .9s var(--ease-out);
	padding-block-end: .06em;
}
.big-link:hover .big-link__text { background-size: 100% 1px; }
.big-link:hover .icon { transform: translateX(12px); }
[dir="rtl"] .big-link:hover .icon { transform: scaleX(-1) translateX(12px); }
.big-link--dark { border-color: var(--line); }
.big-link--compact {
	justify-content: flex-end;
	gap: 14px;
	font-size: clamp(1.1rem, 1.5vw, 1.45rem);
	padding-block: clamp(14px, 1.6vw, 22px);
}
.big-link--compact .icon { width: 22px; height: 22px; stroke-width: 1; }

/* ---------- Logo (mask so it takes currentColor) ---------- */
.logo { display: inline-block; color: inherit; }
.logo__mark {
	display: block;
	aspect-ratio: 800 / 542;
	background: currentColor;
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
}
.logo--brand .logo__mark { width: 74%; margin-inline: auto; }

/* ---------- Brand mark: fixed on every section ---------- */
.brand {
	position: fixed;
	z-index: 65;
	inset-block-start: var(--brand-top);
	inset-inline-start: var(--m);
	width: var(--brand);
	height: var(--brand);
	display: grid;
	place-items: center;
	isolation: isolate;
	border-radius: 50%;
	color: #fff; /* over photos & video: white logo, no disc */
	transition: color .7s var(--ease-out), transform var(--t-ui) var(--ease-out);
}
/* The white disc lives on its own layer so it can grow in / shrink away. */
.brand::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 28px rgba(17, 21, 29, .14);
	opacity: 0;
	transform: scale(.35);
	transition: transform .8s var(--ease-out), opacity .45s var(--ease-out);
}
/* Hairline ring used by the entrance animation. */
.brand::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid currentColor;
	opacity: 0;
	pointer-events: none;
}
.brand.is-solid { color: var(--navy); }
.brand.is-solid::before { opacity: 1; transform: scale(1); }
.brand .logo { width: 100%; }
.brand .logo__mark { filter: drop-shadow(0 1px 8px rgba(17, 21, 29, .35)); transition: filter .7s var(--ease-out); }
.brand.is-solid .logo__mark { filter: none; }
.brand:hover { transform: scale(1.05); }
.brand {
	transition: color .7s var(--ease-out), transform var(--t-ui) var(--ease-out), opacity .5s var(--ease-out), visibility 0s linear 0s;
}
.brand.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px) scale(.85);
	pointer-events: none;
	transition: color .7s var(--ease-out), transform var(--t-ui) var(--ease-out), opacity .5s var(--ease-out), visibility 0s linear .5s;
}

/* Entrance: logo rises out of a soft blur, then a single ring ripples outward. */
.js .brand .logo { opacity: 0; }
.js.is-loaded .brand .logo { animation: brand-in 1.4s var(--ease-out) .15s both; }
.js.is-loaded .brand::after { animation: brand-ring 1.6s var(--ease-out) .7s both; }
@keyframes brand-in {
	0% { opacity: 0; transform: translateY(10px) scale(.86); filter: blur(8px); }
	60% { opacity: 1; filter: blur(0); }
	100% { opacity: 1; transform: none; filter: none; }
}
.js.is-loaded .brand.is-pulse::after { animation: brand-ring-switch 1.1s var(--ease-out) both; }
@keyframes brand-ring-switch {
	0% { opacity: 0; transform: scale(.8); }
	25% { opacity: .5; }
	100% { opacity: 0; transform: scale(1.3); }
}
@keyframes brand-ring {
	0% { opacity: 0; transform: scale(.7); }
	30% { opacity: .55; }
	100% { opacity: 0; transform: scale(1.25); }
}
.admin-bar .brand { inset-block-start: calc(var(--brand-top) + 32px); }
.logo--word .logo__mark { width: 100%; }

/* ---------- Intro (home, once per visit): the mark draws in on ink, a light sweeps across it,
   then it flies into the brand disc while the curtain lifts (ink, then a tan edge) ---------- */
.intro { display: none; }
.has-intro .intro {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 300;
	animation: intro-failsafe 0s linear 10s forwards;   /* never trap the page if the script fails */
}
.has-intro body { overflow: hidden; }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; } }
.intro__panel {
	position: absolute;
	inset: 0;
	background: var(--ink);
	transition: clip-path .8s cubic-bezier(.76, 0, .24, 1);
	clip-path: inset(0 0 0 0);
}
.intro__panel--tan { background: var(--tan); transition-delay: .1s; }
.intro__logo {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: clamp(150px, 17vw, 250px);
	color: #fff;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	will-change: transform;
}
[dir="rtl"] .intro__logo { transform: translate(50%, -50%); }
.intro__logo .logo, .intro__logo .logo__mark { display: block; width: 100%; }
/* a hairline circle traces itself round, then the mark opens from its centre in a growing circle */
.intro__ring {
	position: absolute;
	inset-inline-start: -17.5%;   /* the brand disc: the mark is 74% of its diameter */
	inset-block-start: 50%;
	width: 135%;
	max-width: none;
	aspect-ratio: 1;
	transform: translateY(-50%) rotate(-90deg);
	overflow: visible;
	fill: none;
	stroke: var(--tan-soft);
	stroke-width: .35;
	animation: intro-ring-spin 1.4s cubic-bezier(.65, 0, .35, 1) both;
}
.intro__ring circle:first-child { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-ring .75s cubic-bezier(.65, 0, .35, 1) .05s forwards; }
.intro__ring-dot { fill: var(--tan-soft); stroke: none; transform-origin: 50px 50px; animation: intro-orbit .75s cubic-bezier(.65, 0, .35, 1) .05s both; }
@keyframes intro-ring { to { stroke-dashoffset: 0; } }
@keyframes intro-orbit { from { transform: rotate(0); } to { transform: rotate(360deg); opacity: 0; } }
@keyframes intro-ring-spin { from { transform: translateY(-50%) rotate(-90deg) scale(.82); } to { transform: translateY(-50%) rotate(0deg) scale(1); } }
.intro__logo .logo__mark { animation: intro-draw .75s var(--ease-out) .3s both; }
@keyframes intro-draw {
	0% { clip-path: circle(0% at 50% 50%); opacity: 0; transform: scale(.9); }
	30% { opacity: 1; }
	100% { clip-path: circle(75% at 50% 50%); opacity: 1; transform: none; }
}
.intro.is-out .intro__ring { opacity: 0; transition: opacity .3s ease .55s; }   /* rides along into the brand disc, then fades */
.intro__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 214, .95) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
	animation: intro-shine .6s ease-in-out .7s both;
}
@keyframes intro-shine { to { background-position: -60% 0; } }
.intro__meter {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: clamp(48px, 12vh, 120px);
	width: 168px;
	margin-inline-start: -84px;
	display: grid;
	gap: 12px;
	justify-items: center;
	transition: opacity .4s ease;
	animation: intro-fade .5s ease .15s both;
}
@keyframes intro-fade { from { opacity: 0; } }
.intro__bar { position: relative; width: 100%; height: 1px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.intro__bar i { position: absolute; inset: 0; background: var(--tan-soft); transform: scaleX(var(--p, 0)); transform-origin: left; }
.intro__pct { font-size: .68rem; letter-spacing: .32em; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
/* exit */
.intro.is-out .intro__meter { opacity: 0; }
.intro.is-out .intro__panel { clip-path: inset(0 0 100% 0); }
.intro.is-out .intro__logo { transition: transform .8s cubic-bezier(.76, 0, .24, 1); }
.intro.is-out .intro__shine { opacity: 0; transition: opacity .3s; }
/* the flown mark becomes the brand mark: no second entrance for it */
.intro-landed .brand .logo { animation: none; opacity: 1; }

/* ---------- Right rail (desktop) ---------- */
.rail {
	display: none;
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 50;
	width: var(--rail);
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-block: 28px 24px;
	color: var(--paper);
	border-inline-start: 1px solid var(--line-dark);
	transition: color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.rail__mark, .rail__item, .rail__foot { transition: color var(--t-ui) var(--ease-out); }
.rail [data-ui="light"] { color: var(--ink); }


.rail__list {
	margin-block: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(18px, 3.2vh, 36px);
}
.rail__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 6px 10px;
	opacity: .62;
	transition: opacity var(--t-micro);
}
.rail__link .icon { width: 22px; height: 22px; transition: transform var(--t-ui) var(--ease-out), color var(--t-micro); }
.rail__label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	transition: transform var(--t-ui) var(--ease-out);
}
:lang(ar) .rail__label, :lang(ka) .rail__label {
	writing-mode: horizontal-tb;
	transform: none;
	letter-spacing: 0;
	text-transform: none;
	font-size: .72rem;
}
.rail__link::before {
	content: "";
	position: absolute;
	inset-inline-start: -16px;
	inset-block-start: 8px;
	width: 1px;
	height: calc(100% - 16px);
	background: var(--tan);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--t-ui) var(--ease-out);
}
.rail__link:hover, .rail__link:focus-visible, .is-current > .rail__link { opacity: 1; }
.rail__link:hover::before, .is-current > .rail__link::before { transform: scaleY(1); }
.rail__link:hover .icon { transform: translateY(-3px); color: var(--tan); }
.is-current > .rail__link .icon { color: var(--tan); }

.rail__foot { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rail__menu { width: 40px; height: 40px; display: grid; place-items: center; }
.rail__burger { display: grid; gap: 7px; width: 22px; }
.rail__burger i { display: block; height: 1px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.rail__burger i:last-child { width: 60%; justify-self: end; }
.rail__menu:hover .rail__burger i:last-child { transform: scaleX(1.66); transform-origin: right; }
.menu-open .rail__burger i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .rail__burger i:last-child { width: 100%; transform: translateY(-4px) rotate(-45deg); }

.lang { display: flex; gap: 10px; font-size: .64rem; font-weight: 500; letter-spacing: .16em; }
.lang a { opacity: .5; transition: opacity var(--t-micro); }
.lang a:hover, .lang a[aria-current] { opacity: 1; }
.lang--rail { flex-direction: column; align-items: center; gap: 8px; }

/* ---------- Top bar (mobile/tablet) ---------- */
.topbar {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: calc(var(--brand-top) + 10px) var(--m) 16px;
	color: var(--paper);
	transition: color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), background-color var(--t-ui);
}
body[data-ui="light"]:not(.menu-open) .topbar { color: var(--ink); }
.topbar.is-hidden:not(.is-top) { transform: translateY(-100%); }
.menu-btn { display: flex; align-items: center; gap: 12px; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding: 10px 0; }
.menu-btn__arc {
	width: 26px; height: 26px;
	border: 1px solid currentColor;
	border-radius: 50%;
	position: relative;
	transition: transform var(--t-ui) var(--ease-out);
}
.menu-btn__arc::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 4px; height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--tan);
}
.menu-open .menu-btn__arc { transform: rotate(90deg) scale(.86); }

@media (min-width: 1024px) {
	.rail { display: flex; }
	.topbar { display: none; }
}

/* ---------- Menu panel (floating, ~20% of the screen) ---------- */
.overlay {
	position: fixed;
	z-index: 45;
	inset-block: 16px;
	inset-inline-end: calc(var(--rail) + 16px);
	width: clamp(300px, 20vw, 420px);
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--line-dark);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	overflow-y: auto;
	visibility: hidden;
	transform: translateX(calc(100% + var(--rail) + 40px));
	transition: transform .8s var(--ease-inout), visibility 0s linear .8s;
}
[dir="rtl"] .overlay { transform: translateX(calc(-100% - var(--rail) - 40px)); }
.overlay[hidden] { display: block; }
.menu-open .overlay {
	visibility: visible;
	transform: none;
	transition: transform .9s var(--ease-out), visibility 0s;
}
.overlay-scrim {
	position: fixed;
	inset: 0;
	z-index: 44;
	background: rgba(17, 21, 29, .38);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s var(--ease-out);
}
.menu-open .overlay-scrim { opacity: 1; pointer-events: auto; }
.overlay__inner {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 36px;
	padding: 40px 32px 28px;
}
.overlay__label { color: var(--muted-dark); margin-bottom: 8px; }
.overlay__list li {
	overflow: hidden;
	border-block-end: 1px solid var(--line-dark);
}
.overlay__list a {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-block: 12px;
	transform: translateY(105%);
	transition: transform .8s var(--ease-out), color var(--t-micro);
	transition-delay: calc(var(--i) * 60ms + .3s);
}
.menu-open .overlay__list a { transform: none; }
.overlay__list a:hover { color: var(--tan-soft); }
.overlay__num { font-size: .62rem; letter-spacing: .2em; color: var(--tan); font-variant-numeric: tabular-nums; }
.overlay__text {
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 1.45vw, 1.7rem);
	line-height: 1.1;
	transition: transform var(--t-ui) var(--ease-out);
}
.overlay__list a:hover .overlay__text { transform: translateX(8px); color: var(--tan-soft); }
[dir="rtl"] .overlay__list a:hover .overlay__text { transform: translateX(-8px); }
.overlay__aside {
	display: grid;
	gap: 18px;
	font-size: .88rem;
	opacity: 0;
	transition: opacity .6s var(--ease-out);
}
.overlay__aside p { margin: 0 0 3px; color: var(--stone); }
.overlay__aside .label { color: var(--muted-dark); margin-bottom: 8px; font-size: .62rem; }
.menu-open .overlay__aside { opacity: 1; transition-delay: .6s; }
.overlay__social { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line-dark); }
.overlay__social .social { width: 34px; height: 34px; flex: none; }
.overlay__social .social .icon { width: 16px; height: 16px; }
@media (max-width: 1023px) {
	.overlay { inset-block: 10px; inset-inline-end: 10px; width: min(84vw, 360px); }
	.overlay__inner { padding: 72px 24px 24px; }
}

/* Projects flyout: opens beside the rail on hover / keyboard focus */
.has-flyout { position: relative; }
.flyout {
	position: absolute;
	inset-inline-end: calc(100% - 6px);
	inset-block-start: -48px;
	padding-inline-end: 34px; /* invisible bridge across to the rail */
	visibility: hidden;
	opacity: 0;
	translate: 14px 0;
	transition: opacity .35s var(--ease-out) .12s, translate .5s var(--ease-out) .12s, visibility 0s linear .6s;
	pointer-events: none;
}
[dir="rtl"] .flyout { translate: -14px 0; }
.has-flyout:hover > .flyout,
.has-flyout:focus-within > .flyout {
	visibility: visible;
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
	transition: opacity .35s var(--ease-out), translate .5s var(--ease-out), visibility 0s;
}
.flyout__panel {
	width: 344px;
	padding: 22px 14px 12px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--line-dark);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
}
.flyout__head {
	display: flex;
	justify-content: space-between;
	padding: 0 10px 14px;
	color: var(--muted-dark);
	border-block-end: 1px solid var(--line-dark);
}
.flyout__count { color: var(--tan); }
.flyout__list { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.flyout__list li {
	opacity: 0;
	translate: 0 8px;
	transition: opacity .4s var(--ease-out), translate .5s var(--ease-out);
}
.has-flyout:hover .flyout__list li,
.has-flyout:focus-within .flyout__list li { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * 40ms + .08s); }
.flyout__link {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 14px;
	padding: 8px 10px;
	transition: background-color var(--t-micro);
}
.flyout__thumb { width: 62px; height: 44px; overflow: hidden; background: rgba(244, 241, 238, .06); }
.flyout__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.flyout__text { display: grid; gap: 3px; min-width: 0; }
.flyout__name {
	font-family: var(--f-display);
	font-size: 1.08rem;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color var(--t-micro);
}
.flyout__loc { font-size: .7rem; letter-spacing: .04em; color: var(--muted-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flyout__link .icon { width: 16px; height: 16px; color: var(--tan); opacity: 0; translate: -6px 0; transition: opacity var(--t-micro), translate var(--t-ui) var(--ease-out); }
[dir="rtl"] .flyout__link .icon, [dir="rtl"] .flyout__all .icon { transform: scaleX(-1); }
.flyout__link:hover, .flyout__link:focus-visible { background: rgba(244, 241, 238, .05); }
.flyout__link:hover .flyout__name, .flyout__link.is-current .flyout__name { color: var(--tan-soft); }
.flyout__link:hover .flyout__thumb img { transform: scale(1.08); }
.flyout__link:hover .icon, .flyout__link:focus-visible .icon { opacity: 1; translate: 0 0; }
.flyout__link.is-current .flyout__thumb { outline: 1px solid var(--tan); outline-offset: 2px; }
.flyout__all {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 4px;
	padding: 14px 10px 6px;
	border-block-start: 1px solid var(--line-dark);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tan-soft);
}
.flyout__all .icon { width: 16px; height: 16px; transition: translate var(--t-ui) var(--ease-out); }
.flyout__all:hover .icon { translate: 4px 0; }

/* the same projects, listed under "Projects" in the menu panel */
.overlay__list .overlay__sub { margin: -4px 0 12px; padding: 0 0 0 30px; list-style: none; display: grid; gap: 2px; }
[dir="rtl"] .overlay__list .overlay__sub { padding: 0 30px 0 0; }
.overlay__list .overlay__sub li { border: 0; }
.overlay__list .overlay__sub a { display: block; padding-block: 4px; font-size: .86rem; color: var(--stone); }
.overlay__list .overlay__sub a:hover { color: var(--tan-soft); }

/* ---------- Cursor ---------- */
.cursor {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 70;
	width: 96px; height: 96px;
	margin: -48px 0 0 -48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	pointer-events: none;
	color: var(--ink);
	background: rgba(244, 241, 238, .88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(0);
	transition: transform .5s var(--ease-out);
	will-change: transform;
}
.cursor__label { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.cursor.is-on { transform: translate3d(var(--x), var(--y), 0) scale(1); transition: transform .5s var(--ease-out), opacity .3s; }
.cursor.is-moving { transition: transform .12s linear; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	height: 200svh;
	background: var(--ink);
	color: var(--paper);
	--p: 0;
	/* a: hero content leaves · b: statement arrives · c: everything dissolves to ink before the projects fade in */
	--a: clamp(0, calc(var(--p) / .3), 1);
	--b: clamp(0, calc((var(--p) - .26) / .26), 1);
	--c: clamp(0, calc((var(--p) - .78) / .22), 1);
}
.hero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--ink);
	opacity: var(--c);
	pointer-events: none;
}
.hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__poster, .hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(calc(1.02 + var(--p) * .12));
	filter: saturate(.55) contrast(1.06) brightness(.92);
	will-change: transform;
}
.hero__video { opacity: 0; transition: opacity 1.6s var(--ease-out); }
/* Vimeo background embed: cover the box like object-fit would (16:9 source) */
.video-embed { overflow: hidden; }
.video-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, calc(100svh * 16 / 9));
	height: max(100%, calc(100vw * 9 / 16));
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
.hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(17, 21, 29, .45) 0%, rgba(17, 21, 29, 0) 28%),
		linear-gradient(0deg, rgba(17, 21, 29, .7) 0%, rgba(17, 21, 29, 0) 55%),
		rgba(17, 21, 29, calc(.3 + var(--p) * .52));
}
.hero__shade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--navy);
	mix-blend-mode: color;
	opacity: .18;
}

.hero__content {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr auto auto;
	column-gap: var(--gap);
	padding-block: calc(var(--below-brand) + 8px) clamp(28px, 6vh, 56px);
	opacity: calc(1 - var(--a));
	transform: translateY(calc(var(--a) * -9vh));
	will-change: transform, opacity;
}
.hero__kicker {
	grid-column: 1 / -1;
	align-self: start;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--stone);
}
.hero__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--tan);
	box-shadow: 0 0 0 0 rgba(184, 144, 133, .6);
	animation: pulse 2.8s var(--ease-out) infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(184, 144, 133, .55); }
	70%, 100% { box-shadow: 0 0 0 14px rgba(184, 144, 133, 0); }
}
.hero__title {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: end;
	margin: 0;
}
.hero__word {
	display: block;
	font-size: clamp(3.75rem, 11.5vw, 13rem);
	line-height: .86;
	letter-spacing: -.035em;
}
.hero__word--indent { padding-inline-start: 16vw; color: var(--tan-soft); }
.hero__word .line__inner { transition-duration: 1.4s; transition-delay: calc(var(--i) * .14s + .2s); }
.hero__tagline {
	grid-column: 1 / span 5;
	grid-row: 3;
	margin: clamp(24px, 4vh, 44px) 0 0;
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.5;
	color: var(--stone);
	max-width: 30em;
}
.hero__geo {
	grid-column: 9 / -1;
	grid-row: 3;
	align-self: end;
	justify-self: end;
	text-align: end;
	display: grid;
	gap: 6px;
	color: var(--stone);
}
.hero__geo .label { color: var(--tan-soft); }

/* "next" arrow at the bottom of home/projects sections */
.next-cue {
	position: absolute;
	z-index: 4;
	inset-inline-start: 50%;
	inset-block-end: clamp(14px, 2.4vh, 26px);
	width: 46px;
	height: 46px;
	margin-inline-start: -23px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid currentColor;
	color: var(--muted);
	opacity: .75;
	transition: opacity .3s, color .3s, background-color .4s var(--ease-out), border-color .3s;
}
.next-cue .icon { width: 18px; height: 18px; transform: rotate(90deg); animation: cue-bob 2.2s var(--ease-inout) infinite; }
.next-cue:hover { opacity: 1; color: var(--paper); background: var(--navy); border-color: var(--navy); }
.next-cue:hover .icon { animation-play-state: paused; }
[data-theme="dark"] .next-cue, .next-cue--stage { color: var(--paper); }
[data-theme="dark"] .next-cue:hover, .next-cue--stage:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.next-cue--stage { inset-inline-start: var(--m); margin: 0; }
@keyframes cue-bob { 0%, 100% { transform: rotate(90deg) translateX(-2px); } 50% { transform: rotate(90deg) translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .next-cue .icon { animation: none; } }

.scroll-cue {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: clamp(24px, 4vh, 40px);
	transform: translateX(-50%);
	display: grid;
	justify-items: center;
	gap: 12px;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--stone);
}
.scroll-cue__line {
	width: 1px;
	height: 56px;
	background: rgba(244, 241, 238, .25);
	position: relative;
	overflow: hidden;
}
.scroll-cue__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--paper);
	transform: translateY(-100%);
	animation: cue 2.4s var(--ease-inout) infinite;
}
@keyframes cue {
	0% { transform: translateY(-100%); }
	55% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

/* Statement emerges from the hero */
.hero__statement {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 28px;
	opacity: calc(var(--b) * (1 - var(--c)));
	transform: translateY(calc((1 - var(--b)) * 8vh - var(--c) * 5vh));
	pointer-events: none;
}
.hero__statement[data-active] { pointer-events: auto; }
/* skipped during the hero → projects glide */
.is-gliding .hero__statement { visibility: hidden; }
.hero__statement .display-l { max-width: 12em; }
.hero__statement .label { color: var(--tan-soft); }
.hero__statement .lead { color: var(--stone); }
@media (min-width: 1024px) {
	.hero__statement { padding-inline-start: calc(var(--m) + 8.33vw); }
	.hero__statement .lead { margin-inline-start: 25%; }
	.hero__statement .link-cta { margin-inline-start: 25%; }
}

/* ---------- Projects theatre ---------- */
.theatre {
	position: relative;
	--unit: 60svh;
	/* one screen to sit in + a short stretch of scroll per project (and for the fade-in) */
	height: calc(100svh + (var(--count) - 1 + var(--entry, 0) * .6) * var(--unit));
	background: var(--ink);
	color: var(--paper);
	--tp: 0;
}
/* After the hero: overlap its last screen and fade in on the same spot instead of scrolling up. */
.theatre--entry {
	--entry: 1;
	margin-top: -100svh;
	z-index: 3;
	/* Transparent where it overlaps the hero, ink below so nothing light shows through while fading in. */
	background: linear-gradient(to bottom, transparent 100svh, var(--ink) 100svh);
}
.theatre--entry .theatre__stage { background: var(--ink); opacity: var(--enter, 0); }
.theatre--entry.is-veiled, .theatre--entry.is-veiled * { pointer-events: none; }
.theatre__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}
.theatre__label {
	position: absolute;
	z-index: 3;
	inset-block-start: calc(var(--below-brand) + 44px);
	inset-inline-start: var(--m);
	color: var(--stone);
}
.theatre__index {
	position: absolute;
	z-index: 3;
	inset-inline-start: var(--m);
	inset-block-start: calc(var(--below-brand) + 96px);
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	font-size: var(--fs-label);
	letter-spacing: .16em;
	font-variant-numeric: tabular-nums;
	color: var(--stone);
}
.theatre__current {
	display: block;
	height: 1.4em;
	overflow: hidden;
	color: var(--paper);
}
.theatre__current span { display: block; transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui); }
.theatre__current span.is-swapping { transform: translateY(-100%); opacity: 0; transition: none; }
.theatre__bar { width: 1px; height: 18vh; background: var(--line-dark); position: relative; overflow: hidden; }
.theatre__bar i { position: absolute; inset: 0; background: var(--tan); transform: scaleY(var(--tp)); transform-origin: top; }
@media (min-width: 1024px) { .theatre__index { display: flex; } }

.slide {
	position: absolute;
	inset: 0;
	isolation: isolate;
	display: grid;
	align-content: end;
	padding: clamp(96px, 16vh, 160px) calc(var(--m) + var(--rail)) clamp(36px, 8vh, 88px) var(--m);
	opacity: 0;
	transition: opacity var(--t-scene) var(--ease-inout);
	pointer-events: none;
	--lp: .5;
}
[dir="rtl"] .slide { padding-inline: var(--m) calc(var(--m) + var(--rail)); }
.slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.slide.is-shown { opacity: 1; transition: none; }
.slide__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	transform: scale(1.08);
	transition: transform 2.2s var(--ease-out);
}
.slide.is-active .slide__media { transform: scale(1); }
.slide__img, .slide__video {
	position: absolute;
	inset: -4% 0;
	width: 100%;
	height: 108%;
	object-fit: cover;
	transform: translateY(calc((var(--lp) - .5) * -6%));
	will-change: transform;
}
.slide__img.is-empty { background: var(--ink-2); }
.slide__video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.slide__video.is-playing { opacity: 1; }
.slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(17, 21, 29, .78) 0%, rgba(17, 21, 29, .2) 48%, rgba(17, 21, 29, .35) 100%);
}
.slide__body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	align-items: end;
}
.slide__meta {
	grid-column: 1 / -1;
	display: flex;
	gap: 18px;
	color: var(--stone);
	margin-bottom: 22px;
}
.slide__title { grid-column: 1 / span 9; }
.slide__location {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--stone);
	margin: 0;
}
.slide__location .icon { width: 16px; height: 16px; color: var(--tan); }
.slide__body .slide__location { grid-column: 9 / -1; justify-self: end; align-self: end; margin-top: 22px; }
.slide__summary {
	grid-column: 1 / span 6;
	margin: 22px 0 0;
	font-weight: 300;
	color: var(--stone);
	max-width: 30em;
}
.slide__link { position: absolute; inset: 0; z-index: 0; }
.slide__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.slide .reveal-step {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.slide__meta, .slide__location, .slide__summary, .slide__link {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.slide.is-active .slide__meta { opacity: 1; transform: none; transition-delay: .15s; }
.slide.is-active .slide__summary { opacity: 1; transform: none; transition-delay: .45s; }
/* project status badge, e.g. Sold out */
.slide__status {
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 8px 16px 8px 13px;
	border: 1px solid rgba(201, 163, 132, .7);
	border-radius: 999px;
	background: rgba(17, 21, 29, .55);
	backdrop-filter: blur(6px);
	color: var(--paper);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.slide__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tan); box-shadow: 0 0 0 4px rgba(201, 163, 132, .22); }
.slide.is-active .slide__status, .slide.is-shown .slide__status { opacity: 1; transform: none; transition-delay: .1s; }
.row__status {
	display: inline-block;
	vertical-align: middle;
	margin-inline-start: 12px;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 11px;
	opacity: .7;
}
@media (max-width: 1023px) { .slide__status { opacity: 1; transform: none; } }
/* project phases: ongoing pulses tan, delivered is a calm sage tick */
.flyout__panel:has(.flyout__groups) { width: min(640px, calc(100vw - 140px)); }
.flyout__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "ongoing delivered" "more delivered";
	align-content: start;
	column-gap: 10px;
	margin-top: 6px;
}
.flyout__grp--ongoing { grid-area: ongoing; }
.flyout__grp--delivered { grid-area: delivered; border-inline-start: 1px solid var(--line-dark); padding-inline-start: 10px; }
.flyout__grp--more { grid-area: more; }
.flyout__groups .flyout__list { margin: 2px 0 10px; }
.flyout__groups .flyout__link { grid-template-columns: 52px minmax(0, 1fr) 14px; gap: 12px; padding: 6px 8px; }
.flyout__groups .flyout__thumb { width: 52px; height: 38px; }
.flyout__groups .flyout__name { font-size: 1rem; }
.flyout__group {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 10px 0 4px;
	padding-inline: 10px;
	color: var(--stone);
}
.flyout__group-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-dark); }
.flyout__grp--ongoing .flyout__group-dot { background: var(--tan); animation: phase-pulse 2s ease-out infinite; }
.flyout__grp--delivered .flyout__group-dot { background: #8fb39a; }
@keyframes phase-pulse { 0% { box-shadow: 0 0 0 0 rgba(184, 144, 133, .6); } 100% { box-shadow: 0 0 0 7px rgba(184, 144, 133, 0); } }
.overlay__group { margin: 6px 0 2px; padding-inline-start: 30px; font-size: .62rem; color: var(--tan-soft); }
[dir="rtl"] .overlay__group { padding-inline-start: 0; padding-inline-end: 30px; }
.overlay__group--delivered { color: #8fb39a; }
.slide__status--ongoing .slide__status-dot { animation: phase-pulse 2s ease-out infinite; }
.slide__status--delivered { border-color: rgba(143, 179, 154, .75); }
.slide__status--delivered .slide__status-dot { background: #8fb39a; box-shadow: 0 0 0 4px rgba(143, 179, 154, .22); }
.row__status--ongoing { color: var(--tan); opacity: 1; }
.row__status--delivered { color: #5f8a6c; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .flyout__grp--ongoing .flyout__group-dot, .slide__status--ongoing .slide__status-dot { animation: none; } }
.slide.is-active .slide__location { opacity: 1; transform: none; transition-delay: .55s; }
.slide.is-active .slide__link { opacity: 1; transform: none; transition-delay: .65s; }
@media (min-width: 1024px) {
	.slide { padding-inline-start: calc(var(--m) + 7vw); }
	[dir="rtl"] .slide { padding-inline-start: calc(var(--m) + 7vw); }
}

/* ---------- Projects page: 3D model over the dimmed photo (theatre3d.js) ---------- */
.slide__media { background: var(--ink); }
.slide__img { transition: opacity 1.4s var(--ease-out), filter 1.4s var(--ease-out); }
.slide.has-3d .slide__img, .slide.has-3d .slide__video { opacity: .38; filter: saturate(.8) blur(1px); }
.slide.has-3d .slide__media::before {
	/* a warm glow where the model stands */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(48% 58% at 66% 46%, rgba(201, 163, 132, .2), rgba(201, 163, 132, 0) 70%);
	pointer-events: none;
}
.slide__model {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	animation: slide-model-in 1.2s var(--ease-out) both;
}
@keyframes slide-model-in { from { opacity: 0; } to { opacity: 1; } }
/* keep the title and text above the canvas and readable over it */
.slide.has-3d .slide__media::after {
	z-index: 2;
	background: linear-gradient(0deg, rgba(17, 21, 29, .82) 0%, rgba(17, 21, 29, .25) 34%, rgba(17, 21, 29, 0) 55%);
}
@media (max-width: 1023px) {
	.slide.has-3d .slide__media::before { background: radial-gradient(70% 45% at 50% 38%, rgba(201, 163, 132, .2), rgba(201, 163, 132, 0) 70%); }
}

.theatre-end { background: var(--navy); color: var(--paper); }
.theatre-end .big-link { border-block-start: 0; padding-block: clamp(20px, 2.2vw, 30px); }

/* ---------- Numbers (team message + counters) ---------- */
.numbers {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--ink);
	color: var(--paper);
	padding-block: clamp(56px, 7vw, 112px) clamp(64px, 8vw, 120px);
	display: grid;
	gap: clamp(48px, 6vw, 88px);
}
/* the block is as wide as the headline's first line ("…and 5,000+"); every other line stops at the same edge */
.numbers__head { display: grid; gap: 22px; font-size: clamp(1.6rem, 2.8vw, 2.8rem); max-width: 23.6em; }
/* building drawing: lines trace in, windows light up floor by floor, a few keep glowing */
.numbers__building {
	position: absolute;
	z-index: -1;
	inset-block-end: 0;
	inset-inline-end: calc(var(--m) + var(--rail));
	height: 88%;
	width: auto;
	max-width: 36vw;
	opacity: .6;
	pointer-events: none;
}
.numbers__building * { vector-effect: non-scaling-stroke; }
.b-draw path, .b-floor rect, .b-floor path, .b-trolley rect, .b-load {
	fill: none;
	stroke: var(--tan-soft);
	stroke-width: 1;
	stroke-opacity: .4;
}
.b-draw path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 2s var(--ease-out);
}
.b-draw path:nth-child(n+3) { transition-delay: .3s; }
.b-draw path:nth-child(n+5) { transition-delay: .9s; }
.numbers.is-drawn .b-draw path { stroke-dashoffset: 0; }
/* floors drop into place one after another, bottom to top */
.b-floor {
	opacity: 0;
	transform: translateY(-36px);
	transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
	transition-delay: calc(var(--f) * .16s + .8s);
}
.b-floor rect { fill: var(--tan); fill-opacity: .04; }
.numbers.is-drawn .b-floor { opacity: 1; transform: none; }
/* crane trolley travels the jib; the hook lowers and lifts */
.b-trolley { opacity: 0; transition: opacity .8s var(--ease-out) 1.8s; }
.numbers.is-drawn .b-trolley { opacity: 1; animation: b-trolley 9s ease-in-out 2s infinite alternate; }
.b-cable { stroke: var(--tan-soft); stroke-opacity: .35; stroke-width: 1; transform-box: fill-box; transform-origin: top; }
.numbers.is-drawn .b-cable { animation: b-cable 4.5s ease-in-out 2s infinite alternate; }
.b-load { fill: var(--tan); fill-opacity: .25; }
.numbers.is-drawn .b-load { animation: b-load 4.5s ease-in-out 2s infinite alternate; }
@keyframes b-trolley { from { transform: translateX(0); } to { transform: translateX(150px); } }
@keyframes b-cable { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes b-load { from { transform: translateY(-75.75px); } to { transform: translateY(0); } }
.numbers__head .label { color: var(--tan-soft); }
.numbers__quote {
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 2.8vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -.015em;
}
.numbers__body {
	display: grid;
	gap: 14px;
	color: rgba(255, 255, 255, .72);
	font-size: clamp(1rem, 1.1vw, 1.125rem);
	line-height: 1.7;
}
/* ---------- Arkan in numbers: pinned stage, one figure at a time over South Valley at dusk ---------- */
.stats {
	position: relative;
	height: calc(var(--n) * 40svh + 100svh);   /* scroll runway: a short flick per figure */
	background: var(--ink);
	color: var(--paper);
}
.stats__pin {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
}
.stats__scene {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		var(--photo, none) 50% 50% / cover no-repeat,
		radial-gradient(ellipse 40% 38% at 60% 52%, rgba(184, 144, 133, .14), transparent 70%);   /* a faint warm glow behind the tower */
	filter: saturate(.95) brightness(.85);
}
.stats__scene.has-3d { background: none; filter: saturate(.8) contrast(1.04); transform: none; }
.stats__scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.stats__scene.has-3d canvas { opacity: 1; }
.stats__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(17, 21, 29, .7) 0%, rgba(17, 21, 29, .2) 40%, rgba(17, 21, 29, 0) 65%, rgba(17, 21, 29, .35) 100%),
		linear-gradient(0deg, rgba(17, 21, 29, .85) 0%, rgba(17, 21, 29, 0) 30%),
		linear-gradient(180deg, rgba(17, 21, 29, .75) 0%, rgba(17, 21, 29, 0) 22%);
}
.stats__kicker {
	position: absolute;
	inset-block-start: calc(var(--below-brand) + 8px);
	inset-inline-start: var(--m);
	margin: 0;
	color: var(--tan-soft);
}
.stats__list { list-style: none; margin: 0; padding: 0; }
.stat__label, .stat__value { text-shadow: 0 2px 30px rgba(17, 21, 29, .55); }
.stat {
	position: absolute;
	inset-inline: var(--m) calc(var(--m) + var(--rail));
	inset-block-end: clamp(72px, 14vh, 150px);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	gap: clamp(16px, 2.4vw, 40px);
	pointer-events: none;
}
.stat__label {
	padding-block-end: .9em;
	font-size: clamp(.95rem, 1.35vw, 1.3rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}
.stat__rule {
	align-self: end;
	margin-block-end: 1.55em;
	height: 1px;
	background: linear-gradient(90deg, var(--tan-soft), rgba(207, 176, 168, .25));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
[dir="rtl"] .stat__rule { transform-origin: right; }
.stat__value {
	font-family: var(--f-display);
	font-size: clamp(6rem, 19vw, 20rem);
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
	margin-block-end: -.14em;
	clip-path: inset(-.2em -.1em 0 -.1em);
}
.stat__value > span, .stat__value sup { display: inline-block; transform: translateY(120%); transition: transform .7s cubic-bezier(.76, 0, .24, 1); }
.stat__value sup { font-size: .38em; vertical-align: top; margin-inline-start: .06em; color: var(--tan-soft); transition-delay: .08s; }
/* active figure: label rises, the rule draws across to the number, the number rolls up into place */
.stat.is-active .stat__label { opacity: 1; transform: none; transition-delay: .25s; }
.stat.is-active .stat__rule { transform: scaleX(1); transition-delay: .15s; }
.stat.is-active .stat__value > span, .stat.is-active .stat__value sup { transform: none; }
/* the figure that just left rolls out upwards */
.stat.is-past .stat__value > span, .stat.is-past .stat__value sup { transform: translateY(-130%); }
.stat.is-past .stat__label { opacity: 0; transform: translateY(-24px); }
.stats__index {
	position: absolute;
	inset-inline-start: var(--m);
	inset-block-end: clamp(28px, 5vh, 52px);
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: .72rem;
	letter-spacing: .22em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .6);
}
.stats__index span:first-child { color: #fff; }
.stats__index i { position: relative; width: 120px; height: 1px; background: rgba(255, 255, 255, .2); }
.stats__index b { position: absolute; inset: 0; background: var(--tan-soft); transform: scaleX(var(--sp, 0)); transform-origin: left; }
.stats__project {
	position: absolute;
	inset-inline-end: calc(var(--m) + var(--rail));
	inset-block-end: clamp(28px, 5vh, 52px);
	margin: 0;
	color: rgba(255, 255, 255, .45);
}
@media (max-width: 767px) {
	.stats { height: calc(var(--n) * 35svh + 100svh); }
	.stat { inset-inline: var(--m); grid-template-columns: 1fr; gap: 14px; inset-block-end: clamp(96px, 18vh, 160px); }
	.stat__rule { display: none; }
	.stat__label { padding: 0; font-size: .85rem; }
	.stat__value { font-size: clamp(5rem, 27vw, 9rem); }
	.stats__project { display: none; }
	.stats__shade { background: linear-gradient(0deg, rgba(17, 21, 29, .92) 0%, rgba(17, 21, 29, .2) 55%, rgba(17, 21, 29, .7) 100%); }
	.stats__scene { background-position: 58% 50%, 50% 40%; background-size: cover, 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.stat__value > span, .stat__value sup, .stat__label, .stat__rule { transition: none; }
}

.numbers__sign {
	padding-block-start: 18px;
	border-block-start: 1px solid var(--line-dark);
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	line-height: 1.3;
	color: var(--tan-soft);
}
.numbers__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-block-start: 1px solid var(--line-dark);
}
.counter {
	position: relative;
	display: grid;
	gap: 10px;
	padding: clamp(28px, 3.5vw, 48px) clamp(16px, 2.5vw, 40px) 0;
}
.counter:first-child { padding-inline-start: 0; }
/* divider draws down when the row comes into view */
.counter + .counter::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 1px;
	background: var(--line-dark);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1.2s var(--ease-out);
	transition-delay: calc(var(--i) * .15s + .2s);
}
.numbers__list.is-in .counter::before { transform: scaleY(1); }
.counter__value {
	font-family: var(--f-display);
	font-size: clamp(3.2rem, 8vw, 8.5rem);
	line-height: .9;
	letter-spacing: -.03em;
	color: var(--tan);
	font-variant-numeric: lining-nums tabular-nums;
}
.counter__label { color: var(--stone); }
.js .counter { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i) * .12s); }
.js .numbers__list.is-in .counter { opacity: 1; transform: none; }

/* ---------- Partners marquee ---------- */
.partners {
	position: relative;
	background: var(--paper);
	padding-block: clamp(64px, 8vw, 120px) clamp(48px, 6vw, 88px);
	overflow: hidden;
}
.partners__head { display: grid; gap: 14px; margin-block-end: clamp(32px, 4vw, 56px); max-width: 60rem; }
.partners__title {
	font-family: var(--f-text);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -.02em;
}
.marquee {
	display: grid;
	margin-inline-end: var(--rail);
	overflow: hidden;
	padding-block: 6px;   /* room for the hover lift, which the overflow clip would otherwise cut off */
	gap: clamp(14px, 2vw, 24px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
	gap: clamp(14px, 2vw, 24px);
	animation: marquee 60s linear infinite;
}
.marquee__track--reverse { animation-direction: reverse; animation-duration: 72s; }
.partners__group + .partners__group { margin-block-start: clamp(48px, 6vw, 88px); }
/* Strategic partners: one still row, logos larger than on the moving row */
.partners__row {
	display: grid;
	grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	margin: 0;
	padding-block: 6px;
	list-style: none;
}
.partners__row .partner { width: auto; height: clamp(104px, 10vw, 140px); }
.partners__row .partner img { max-height: 64px; }
@media (max-width: 1023px) { .partners__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .partners__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* main.js drives the track once it can be dragged; pan-y keeps vertical page swipes working on touch */
.marquee.is-draggable { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.marquee.is-draggable .marquee__track { animation: none; will-change: transform; }
.marquee.is-dragging { cursor: grabbing; }
.marquee.is-dragging .partner { pointer-events: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.partner {
	position: relative;
	flex: none;
	width: clamp(150px, 15vw, 220px);
	height: clamp(92px, 9vw, 124px);
	display: grid;
	place-items: center;
	padding: 18px 22px 26px;
	border: 1px solid var(--line);
	background: var(--paper);
	transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.partner img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale(1) contrast(1.05);
	opacity: .62;
	transition: filter .6s var(--ease-out), opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.partner__name {
	position: absolute;
	inset-inline: 10px;
	inset-block-end: 8px;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.partner:hover { border-color: var(--tan); background: #fff; transform: translateY(-3px); }
.partner:hover img { filter: none; opacity: 1; transform: translateY(-4px); }
.partner:hover .partner__name { opacity: 1; transform: none; }

@media (max-width: 767px) {
	.numbers__list { grid-template-columns: 1fr; }
	.numbers__building { height: 48%; max-width: 70vw; inset-inline-end: 0; opacity: .45; }
	.counter, .counter:first-child { padding-inline: 0; padding-block: 22px; border-block-end: 1px solid var(--line-dark); grid-template-columns: auto 1fr; align-items: baseline; gap: 18px; }
	.counter + .counter::before { display: none; }
	.counter__label { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.b-draw path { stroke-dashoffset: 0; transition: none; }
	.b-floor, .b-trolley { opacity: 1; transform: none; transition: none; }
	.b-trolley, .b-cable, .b-load { animation: none !important; }
	.marquee { -webkit-mask-image: none; mask-image: none; padding-inline: var(--m); }
	.marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
	.marquee__track--reverse, .partner[aria-hidden="true"] { display: none; }
	.js .counter { opacity: 1; transform: none; }
}

/* ---------- Journal ---------- */
.journal {
	position: relative;
	padding-block: clamp(72px, 9vw, 136px);
	background: var(--paper);
}
.journal__head {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	row-gap: 14px;
	align-items: end;
	margin-block-end: clamp(28px, 3.5vw, 48px);
}
.journal__head .label { grid-column: 1 / -1; }
.journal__head h2, .journal__head h1 { grid-column: 1 / span 7; }
.journal__intro { grid-column: 8 / -1; align-self: end; color: var(--muted); margin: 0; font-size: .95rem; line-height: 1.6; }

/* Featured article: one image-led card, title over the photo. */
.feature { margin-block-end: clamp(24px, 3vw, 40px); }
.feature__link {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 21 / 9;
	min-height: 340px;
	color: var(--paper);
	background: var(--ink);
}
.feature__media { position: absolute; inset: 0; z-index: -1; }
.feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(17, 21, 29, .86) 0%, rgba(17, 21, 29, .35) 45%, rgba(17, 21, 29, 0) 75%);
	transition: opacity .8s var(--ease-out);
}
.feature__img, .feature__media .is-empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.6s var(--ease-out);
}
.feature__link:hover .feature__img { transform: scale(1.07); }
.feature__body {
	position: absolute;
	inset-inline: clamp(22px, 3vw, 48px);
	inset-block-end: clamp(22px, 3vw, 44px);
	display: grid;
	gap: 14px;
	max-width: 40rem;
}
.feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--stone); }
.feature__meta time { color: var(--tan-soft); }
.feature__tag {
	padding: 5px 10px;
	border: 1px solid rgba(244, 241, 238, .35);
	border-radius: 999px;
	color: var(--paper);
}
.feature__title { margin: 0; color: var(--paper); }
.feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	justify-self: start;
	padding-block-end: 4px;
	background: linear-gradient(var(--tan), var(--tan)) no-repeat 0 100% / 100% 1px;
	transition: background-size var(--t-ui) var(--ease-out);
}
.feature__cta .icon { width: 18px; height: 18px; color: var(--tan); transition: transform var(--t-ui) var(--ease-out); }
.feature__link:hover .feature__cta .icon { transform: translateX(6px); }
[dir="rtl"] .feature__link:hover .feature__cta .icon { transform: scaleX(-1) translateX(6px); }

.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); }
.meta time { color: var(--tan); }

.row { border-block-start: 1px solid var(--line); }
.row:last-child { border-block-end: 1px solid var(--line); }
.row__link {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	gap: 8px var(--gap);
	align-items: baseline;
	padding-block: clamp(16px, 1.8vw, 26px);
	transition: padding var(--t-ui) var(--ease-out);
}
.row__date { font-size: var(--fs-label); letter-spacing: .14em; color: var(--tan); font-variant-numeric: tabular-nums; }
.row__cat { color: var(--muted); grid-column: 2; grid-row: 1; }
.row__main { grid-column: 1 / -1; display: grid; gap: 6px; }
.row__title {
	font-family: var(--f-display);
	font-size: clamp(1.4rem, 2.2vw, 2.25rem);
	line-height: 1.15;
	transition: transform var(--t-ui) var(--ease-out);
}
.row__excerpt { color: var(--muted); font-size: .95rem; display: none; }
.row__link .icon { grid-column: 3; grid-row: 1; color: var(--tan); transition: transform var(--t-ui) var(--ease-out); }
.row__link:hover .row__title { transform: translateX(10px); }
.row__link:hover .icon { transform: translateX(8px); }
[dir="rtl"] .row__link:hover .row__title { transform: translateX(-10px); }
[dir="rtl"] .row__link:hover .icon { transform: scaleX(-1) translateX(8px); }
@media (min-width: 768px) {
	.row__link { grid-template-columns: 120px 200px 1fr auto; }
	.row__cat { grid-column: 2; }
	.row__main { grid-column: 3; grid-row: 1; }
	.row__link .icon { grid-column: 4; }
	.row__excerpt { display: block; }
}
.journal__all { margin-top: 24px; }

.preview {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 40;
	width: 300px;
	aspect-ratio: 4 / 3;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.92);
	transition: opacity .4s var(--ease-out), transform .6s var(--ease-out);
}
.preview.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); }
.preview img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse), (max-width: 1023px) { .preview { display: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.chips .is-current { color: var(--tan); }

.pager { margin-top: 56px; display: flex; gap: 18px; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; }
.pager .current { color: var(--tan); }

/* Journal archive cards */
.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 48px) var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.card { --d: calc(var(--i, 0) * .08s); }
.card__link { display: grid; align-content: start; gap: 18px; height: 100%; }
.card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--stone);
}
.card__img, .card__media .is-empty { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.card__link:hover .card__img { transform: scale(1.05); }
.card__media::after { /* thin frame that warms on hover */
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 0 var(--tan);
	transition: box-shadow .5s var(--ease-out);
	pointer-events: none;
}
.card__link:hover .card__media::after { box-shadow: inset 0 0 0 3px var(--tan-soft); }
.card__tag {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	padding: 6px 12px;
	background: var(--paper);
	color: var(--ink);
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.card__body { display: grid; gap: 10px; align-content: start; }
.card__date { color: var(--tan); }
.card__title {
	margin: 0;
	font-family: var(--f-text);
	font-size: clamp(1.1rem, 1.35vw, 1.3rem);
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: -.01em;
	color: var(--ink);
	transition: color var(--t-micro);
}
.card__link:hover .card__title { color: var(--navy); }
.card__excerpt {
	margin: 0;
	font-size: .93rem;
	line-height: 1.65;
	color: #5a5553;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--ink); }
.card__more .icon { width: 16px; height: 16px; color: var(--tan); transition: transform var(--t-ui) var(--ease-out); }
.card__link:hover .card__more .icon { transform: translateX(6px); }
[dir="rtl"] .card__more .icon { transform: scaleX(-1); }
[dir="rtl"] .card__link:hover .card__more .icon { transform: scaleX(-1) translateX(6px); }
.journal--archive .feature { margin-block-end: clamp(40px, 5vw, 72px); }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Page heads ---------- */
.page-head {
	display: grid;
	gap: 24px;
	padding-block: clamp(140px, 22vh, 240px) clamp(48px, 6vw, 96px);
	background: var(--paper);
}
.page-head .display-l { max-width: 14em; }
.page-head--404 { min-height: 80svh; align-content: center; }
/* Blogs heads: a real photo (the newest article's) slowly drifting behind the title */
.page-head--photo {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(460px, 70svh, 760px);
	padding: 0;
	gap: 0;
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
}
.page-head__media { position: absolute; inset: 0; z-index: -1; }
.page-head__img { width: 100%; height: 100%; object-fit: cover; animation: ph-drift 18s ease-out both; }
@keyframes ph-drift { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.page-head__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(17, 21, 29, .94) 0%, rgba(17, 21, 29, .55) 45%, rgba(17, 21, 29, .35) 100%),
		linear-gradient(90deg, rgba(17, 21, 29, .55) 0%, rgba(17, 21, 29, 0) 60%);
}
.page-head__inner { display: grid; gap: 24px; padding-block: clamp(150px, 24vh, 260px) clamp(48px, 6vw, 88px); }
.page-head--photo .label { color: var(--tan-soft); }
.page-head--photo .lead { color: rgba(255, 255, 255, .82); max-width: 40em; }
.page-head--photo .chips a { color: #fff; }
.page-head--photo .chips .is-current { color: var(--tan-soft); }
.page-head--photo .display-l { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1.02; }
/* drawn highlight under a title word (News, Blog) */
.hl { position: relative; isolation: isolate; display: inline-block; }
.hl::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: -.06em;
	inset-block-end: .06em;
	height: .2em;
	background: var(--tan);
	opacity: .85;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.1s var(--ease-out) .45s;
}
[dir="rtl"] .hl::after { transform-origin: right; }
.is-in .hl::after, .hl.is-in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .page-head__img { animation: none; } .hl::after { transition: none; } }

/* ---------- Project film (delivered projects) ---------- */
.p-film { padding-block: var(--section); background: var(--ink); color: var(--paper); }
.p-film__head { display: grid; gap: 18px; margin-block-end: clamp(28px, 4vw, 56px); }
.p-film__head .label { color: var(--tan-soft); }
.p-film__frame { aspect-ratio: 16 / 9; }
.p-film__play, .p-film__iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 2px; }
.p-film__play {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 18px;
	padding: 0;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(rgba(17, 21, 29, .35), rgba(17, 21, 29, .55)), var(--poster, none) center / cover no-repeat, #1b2029;
	overflow: hidden;
}
.p-film__btn {
	display: grid;
	place-items: center;
	width: clamp(72px, 8vw, 104px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .7);
	background: rgba(17, 21, 29, .25);
	backdrop-filter: blur(6px);
	transition: transform var(--t-ui) var(--ease-out), background var(--t-ui) var(--ease-out), border-color var(--t-ui);
}
.p-film__btn svg { width: 34%; height: auto; fill: currentColor; stroke: none; margin-inline-start: 6%; }
.p-film__play:hover .p-film__btn, .p-film__play:focus-visible .p-film__btn { transform: scale(1.08); background: var(--tan); border-color: var(--tan); }
.p-film__cta { letter-spacing: .2em; }

/* ---------- Projects index list ---------- */
.index-list { padding-block: var(--section); background: var(--paper); }
.index-list__head { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 96px); }

/* ---------- Project detail ---------- */
.p-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-content: end;
	color: var(--paper);
	background: var(--ink);
	overflow: hidden;
	--p: 0;
}
.p-hero--page { min-height: 78svh; }
.p-hero__media { position: absolute; inset: 0; }
.p-hero__img, .p-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateY(calc(var(--p) * 12%)) scale(calc(1.04 + var(--p) * .06));
	will-change: transform;
}
.p-hero__video { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.p-hero__video.is-playing { opacity: 1; }
.p-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17, 21, 29, .8), rgba(17, 21, 29, .1) 60%, rgba(17, 21, 29, .4)); }

/* Entrance: the picture is exposed from dusk, then its own windows switch on and a
   light sweeps across the glass (maps are derived from the image in main.js). */
.p-hero__fx {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	container-type: size;
	mix-blend-mode: screen;
	transform: translateY(calc(var(--p) * 12%)) scale(calc(1.04 + var(--p) * .06)); /* rides with the image */
}
.p-hero__video.is-playing ~ .p-hero__fx, .slide__video.is-playing ~ .p-hero__fx { opacity: 0; transition: opacity 1s; }
.slide__fx { /* in a theatre slide the effect rides with the slide image instead */
	inset: -4% 0;
	height: 108%;
	transform: translateY(calc((var(--lp) - .5) * -6%));
}
.p-hero__fxbox { /* the image's object-fit: cover box */
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100cqw, calc(100cqh * var(--ar)));
	aspect-ratio: var(--ar);
	translate: -50% -50%;
}
.p-hero__fxbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-hero__lights { opacity: 0; }
.p-hero__sheen {
	opacity: var(--sheen, .8);
	-webkit-mask: linear-gradient(105deg, transparent 41%, #000 48%, #000 52%, transparent 59%) 100% 0 / 300% 100% no-repeat;
	mask: linear-gradient(105deg, transparent 41%, #000 48%, #000 52%, transparent 59%) 100% 0 / 300% 100% no-repeat;
}
.p-hero__fxbox::after { /* the broad, faint body of the passing light */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 210, .09) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
}
.p-hero__glint, .p-hero__star {
	position: absolute;
	left: calc(var(--x) * 100%);
	top: calc(var(--y) * 100%);
	width: calc(clamp(26px, 3.6cqw, 58px) * var(--ts, 1));
	aspect-ratio: 1;
	translate: -50% -50%;
	opacity: 0;
	background:
		radial-gradient(circle, #fff 0 3%, rgba(255, 238, 214, .75) 8%, rgba(255, 220, 180, .18) 20%, transparent 34%),
		linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 50%, transparent) center / 100% 1px no-repeat,
		linear-gradient(0deg, transparent, rgba(255, 255, 255, .9) 50%, transparent) center / 1px 70% no-repeat;
}
.p-hero.fx-on .p-hero__lights, .slide.fx-on .p-hero__lights {
	animation:
		phero-switch 1.1s linear calc(.6s + var(--k) * .5s) forwards,
		phero-breathe 7s ease-in-out calc(3.8s + var(--k) * 1.4s) infinite;
}
.p-hero.fx-on .p-hero__sheen, .slide.fx-on .p-hero__sheen { animation: phero-sweep 9s cubic-bezier(.5, .05, .35, 1) 1.5s infinite; }
.p-hero.fx-on .p-hero__fxbox::after, .slide.fx-on .p-hero__fxbox::after { animation: phero-wash 9s cubic-bezier(.5, .05, .35, 1) 1.5s infinite; }
.p-hero.fx-on .p-hero__glint, .slide.fx-on .p-hero__glint { animation: phero-glint 9s ease-out calc(1.5s + var(--gd)) infinite; }
.p-hero.fx-on .p-hero__star, .slide.fx-on .p-hero__star {
	animation:
		phero-burst 1.3s ease-out calc(1.5s + var(--gd)) backwards,
		phero-twinkle var(--td) ease-in-out calc(4.4s + var(--tdl)) infinite;
}
.p-hero.fx-paused .p-hero__fx * , .p-hero.fx-paused .p-hero__fxbox::after { animation-play-state: paused; }

@keyframes phero-switch { /* a window light catching: two short flickers, then on */
	0% { opacity: 0; }
	18% { opacity: calc(var(--lights) * .7); }
	26% { opacity: calc(var(--lights) * .15); }
	40% { opacity: calc(var(--lights) * .9); }
	48% { opacity: calc(var(--lights) * .45); }
	100% { opacity: var(--lights); }
}
@keyframes phero-breathe {
	0%, 100% { opacity: var(--lights); }
	50% { opacity: calc(var(--lights) * .55); }
}
@keyframes phero-sweep {
	0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
	34%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes phero-wash {
	0% { background-position: 100% 0; }
	34%, 100% { background-position: 0% 0; }
}
@keyframes phero-burst { /* entry: every highlight flares once as the first light passes */
	0% { opacity: 0; transform: scale(.2) rotate(-40deg); }
	25% { opacity: 1; transform: scale(1.35) rotate(0deg); }
	100% { opacity: 0; transform: scale(.4) rotate(45deg); }
}
@keyframes phero-twinkle { /* then each one sparkles on its own random clock, forever */
	0%, 100% { opacity: 0; transform: scale(.2) rotate(-30deg); }
	12% { opacity: 1; transform: scale(1) rotate(0deg); }
	26% { opacity: 0; transform: scale(.35) rotate(35deg); }
}
@keyframes phero-glint {
	0% { opacity: 0; transform: scale(.3) rotate(-25deg); }
	2.2% { opacity: 1; transform: scale(1) rotate(0deg); }
	8%, 100% { opacity: 0; transform: scale(.55) rotate(30deg); }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.p-hero[data-fx] .p-hero__media {
		filter: brightness(.2) saturate(.35);
		transform: scale(1.07);
		transition: filter 2.6s cubic-bezier(.3, .1, .2, 1), transform 3.4s var(--ease-out);
	}
	.p-hero[data-fx].is-exposed .p-hero__media { filter: none; transform: none; }
	.slide[data-fx] .slide__img { filter: brightness(.2) saturate(.35); transition: filter 2.6s cubic-bezier(.3, .1, .2, 1); }
	.slide[data-fx].is-exposed .slide__img { filter: none; }
}
.p-hero__body {
	position: relative;
	display: grid;
	gap: 22px;
	padding-block: 160px clamp(40px, 8vh, 88px);
}
.p-hero__body .label { color: var(--stone); display: flex; gap: 18px; }
.p-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.p-hero__status { color: var(--tan-soft); }

.p-overview {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	row-gap: 32px;
	align-items: start;
	padding-block: clamp(56px, 6vw, 96px);
	background: var(--paper);
}
.p-overview__lead { grid-column: 1 / span 5; display: grid; gap: 22px; align-content: start; }
/* key facts as a compact 3-column grid */
.facts {
	grid-column: 7 / -1;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-block-start: 1px solid var(--line);
}
.facts__row {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 8px;
	padding: 18px 16px 18px 0;
	border-block-end: 1px solid var(--line);
}
.facts__row:nth-child(3n + 2), .facts__row:nth-child(3n) { padding-inline-start: 18px; border-inline-start: 1px solid var(--line); }
.facts dt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.facts dd { margin: 0; font-family: var(--f-display); font-size: clamp(1.15rem, 1.6vw, 1.5rem); color: var(--navy); }

/* The project: a heading + intro, then one framed board (cards · features · nearby)
   whose panels are split by hairlines, so it reads as a single section. */
.p-story {
	display: grid;
	gap: clamp(36px, 4.5vw, 64px);
	padding-block: clamp(64px, 7vw, 112px);
	background: var(--paper);
	border-block-start: 1px solid var(--line);
}
.p-story__head {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	row-gap: 24px;
	align-items: start;
}
.p-story__title { grid-column: 1 / span 5; display: grid; gap: 18px; }
.p-story__heading {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--ink);
}
.p-story__intro {
	grid-column: 7 / -1;
	display: grid;
	gap: .9em;
	padding-block-start: 6px;
	font-size: 1rem;
	line-height: 1.75;
	color: #4a4645;
}
.p-story__intro p { margin: 0; }
.p-story__intro p:first-child { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.6; color: var(--ink); }
.p-story__intro ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.p-story__intro li, .info-card__body li { position: relative; padding-inline-start: 22px; }
.p-story__intro li::before, .info-card__body li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 10px; height: 1px; background: var(--tan); }

/* the board: 1px gaps over a line-coloured ground draw every divider */
.p-story__board {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.p-story__board > * { background: #fbfaf8; }

.p-story__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1px;
	background: var(--line);
}
.info-card {
	display: grid;
	align-content: start;
	gap: 16px;
	padding: clamp(24px, 2.6vw, 40px);
	background: #fbfaf8;
	transition: background-color var(--t-ui) var(--ease-out);
}
.info-card:hover { background: #fff; }
.info-card__head { display: grid; gap: 10px; align-content: start; }
.info-card__num { color: var(--tan); }
.info-card__title { font-size: 1.2rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--navy); }
.info-card__body { display: grid; gap: .7em; font-size: .95rem; line-height: 1.7; color: #4a4645; }
.info-card__body p, .info-card__body ul { margin: 0; }
.info-card__body ul { padding: 0; list-style: none; display: grid; gap: 6px; }
.info-card__body h4 { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--tan); font-weight: 500; margin-block-start: .4em; }
/* a lone card spans the board: title column + text column, long lists in two columns */
@media (min-width: 900px) {
	.p-story__cards--single .info-card { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); }
	.p-story__cards--single .info-card__body ul { display: block; columns: 2; column-gap: var(--gap); }
	.p-story__cards--single .info-card__body li { break-inside: avoid; margin-block-end: 6px; }
}

.p-features { padding: clamp(24px, 2.6vw, 40px); }
.p-features__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-block-end: clamp(20px, 2.4vw, 32px);
}
.p-features__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.015em; color: var(--ink); }
.p-features__count { color: var(--tan); }
.features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	border-block-start: 1px solid var(--line);
	border-inline-start: 1px solid var(--line);
}
@media (min-width: 900px) { .features { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); } }
.feature-item {
	position: relative;
	display: grid;
	align-content: space-between;
	gap: 22px;
	min-height: 136px;
	padding: 20px 18px;
	background: var(--paper);
	border-inline-end: 1px solid var(--line);
	border-block-end: 1px solid var(--line);
	color: var(--ink);
	overflow: hidden;
	isolation: isolate;
	transition: color .5s var(--ease-out);
}
.feature-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--navy);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .6s var(--ease-out);
}
.feature-item:hover { color: var(--paper); }
.feature-item:hover::before { transform: scaleY(1); }
.feature-item__icon {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(184, 144, 133, .45);
	color: var(--tan);
	transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s, transform .6s var(--ease-out);
}
.feature-item__icon .icon { width: 22px; height: 22px; }
.feature-item:hover .feature-item__icon { background: var(--paper); border-color: var(--paper); color: var(--navy); transform: rotate(-8deg) scale(1.06); }
.feature-item__name { font-size: .92rem; font-weight: 500; line-height: 1.3; }
/* icons draw themselves in, tiles rise one after another */
.js .features .feature-item { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), color .5s var(--ease-out); transition-delay: calc(var(--i) * .06s); }
.js .features.is-in .feature-item { opacity: 1; transform: none; }
.js .features .icon--feature * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: calc(var(--i) * .06s + .3s); }
.js .features.is-in .icon--feature * { stroke-dashoffset: 0; }
.js .features.reveal { opacity: 1; transform: none; }
.js .features.is-in .feature-item:hover { transition-delay: 0s; }

.p-nearby {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 40px);
}
.p-nearby__head { display: grid; gap: 6px; max-width: 34rem; }
.p-nearby__label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.p-nearby__note { margin: 0; font-size: .9rem; line-height: 1.6; color: #4a4645; }
.p-nearby:has(.p-nearby__note) { display: grid; gap: 14px; }
.p-nearby__label .icon { width: 15px; height: 15px; color: var(--tan); }
.places { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.place {
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	font-size: .86rem;
	transition: border-color .3s, background-color .3s;
}
.place:hover { border-color: var(--tan); background: #fff; }

.prose { font-size: 1.0625rem; line-height: 1.8; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--f-display); line-height: 1.15; margin-top: 2em; }
.prose h2 { font-size: var(--fs-m); }
.prose h3 { font-size: clamp(1.4rem, 2vw, 2rem); }
.prose h4 { font-family: var(--f-text); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--tan); }
.prose p:first-child { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; }
.prose a { color: var(--navy); background: linear-gradient(var(--tan), var(--tan)) no-repeat 0 100% / 100% 1px; }
.prose ul { padding-inline-start: 1.1em; list-style: none; }
.prose ul li { position: relative; padding-inline-start: 1.2em; }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: 8px; height: 1px; background: var(--tan); }
.prose ol { padding-inline-start: 1.4em; list-style: decimal; }
.prose img, .prose figure, .prose .wp-block-image { margin-block: 2.4em; }
.prose figcaption { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.prose blockquote { margin: 2.4em 0; padding-inline-start: 1.4em; border-inline-start: 1px solid var(--tan); font-family: var(--f-display); font-size: var(--fs-m); line-height: 1.2; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: start; }
.prose--page { max-width: 46rem; margin-inline: auto; }

/* ---------- Floors explorer (project page) ---------- */
.floors {
	background: var(--ink);
	color: var(--paper);
	padding-block: clamp(72px, 9vw, 136px);
	overflow: hidden;
}
.floors__head { display: grid; gap: 14px; margin-block-end: clamp(24px, 3vw, 40px); }
.floors__head .label { color: var(--tan-soft); }
.floors__title {
	font-family: var(--f-display);
	font-size: clamp(2rem, 4vw, 3.6rem);
	line-height: 1;
	letter-spacing: -.02em;
}
.floors__hint { color: var(--stone); opacity: .7; }
.floors__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(24px, 4vw, 64px);
	align-items: stretch;
}
.floors__stage {
	position: relative;
	height: clamp(460px, 72vh, 760px);
	perspective: 1500px;
	perspective-origin: 50% 35%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	background: radial-gradient(60% 55% at 50% 62%, rgba(52, 67, 96, .55), transparent 70%);
}
.floors__stage.is-dragging { cursor: grabbing; }

/* detailed WebGL model (building3d.js): fades in over the massing, which stays as the fallback */
.floors__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity .9s var(--ease-out);
	touch-action: pan-y;
}
.floors__stage.has-model .floors__canvas { opacity: 1; }
.floors__stage.has-model .tower { opacity: 0; visibility: hidden; transition: opacity .6s var(--ease-out), visibility 0s .6s; }
.floors__ctrl {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	gap: 6px;
}
.floors__ctrl[hidden] { display: none; }
.floors__ctrl button {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(244, 241, 238, .22);
	border-radius: 50%;
	background: rgba(17, 21, 29, .55);
	color: var(--paper);
	font: 400 18px/1 var(--f-text, inherit);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.floors__ctrl button:hover { background: rgba(184, 144, 133, .55); border-color: var(--tan-soft); }

/* Projects with a detailed model: the building is the focus. Stage on the section's own ink
   (no vignette), taller and wider; the floor index shrinks to a compact rail beside it. */
.floors--model .floors__stage { background: none; height: clamp(540px, 84vh, 900px); }
.floors--model .floors__body { grid-template-columns: minmax(0, 1fr) 208px; gap: clamp(16px, 2vw, 32px); }
.floors--model .floors__index { gap: 12px; max-height: clamp(540px, 84vh, 900px); }
.floors--model .floors__list { scrollbar-width: none; }
.floors--model .floors__list::-webkit-scrollbar { display: none; }
.floors--model .floor-btn {
	grid-template-columns: 1.9rem 1fr;
	row-gap: 2px;
	column-gap: 8px;
	padding: 7px 6px 7px 2px;
	line-height: 1.25;
	border-block-end-color: rgba(244, 241, 238, .07);
}
.floors--model .floor-btn__num { font-size: .95rem; grid-row: span 2; align-self: center; }
.floors--model .floor-btn__name { font-size: .8rem; letter-spacing: .02em; }
.floors--model .floor-btn__meta { grid-column: 2; font-size: .68rem; }
.floors--model .floor-btn:not(:disabled):hover,
.floors--model .floor-btn.is-hover,
.floors--model .floor-btn:focus-visible { padding-inline-start: 10px; }
.floors--model .floors__legend { gap: 14px; font-size: .68rem; }
.floors--model .floors__legend .dot { width: 7px; height: 7px; }
.floors--model .floors__ctrl button { width: 34px; height: 34px; font-size: 15px; }
.tower {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
}
.tw-block, .tw-floor, .tw-roof { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.tw-face {
	position: absolute;
	left: 0;
	top: 0;
	backface-visibility: visible;
	border: 1px solid rgba(207, 176, 168, .2);
	transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), opacity .5s var(--ease-out);
}
.tw-front, .tw-back, .tw-right, .tw-left {
	background-image:
		linear-gradient(rgba(244, 241, 238, .22) 0 1px, transparent 1px),
		repeating-linear-gradient(90deg, transparent 0 13px, rgba(244, 241, 238, .13) 13px 14px);
}
.tw-front, .tw-back { background-color: rgba(70, 88, 122, .62); }
.tw-right, .tw-left { background-color: rgba(38, 49, 71, .8); }
.tw-top { background-color: rgba(207, 176, 168, .3); }
.tw-floor--base .tw-face { background-image: none; background-color: rgba(142, 133, 128, .45); }
.tw-roof .tw-face { background-image: none; background-color: rgba(52, 67, 96, .8); }
.tw-ground { border: 0; background: radial-gradient(closest-side, rgba(207, 176, 168, .16), transparent); }
.tw-floor.is-hover .tw-face, .tw-floor.is-active .tw-face { background-color: rgba(184, 144, 133, .88); border-color: var(--tan-soft); }
.tw-floor.is-active .tw-face { background-color: rgba(207, 176, 168, .95); }
.tw-block.is-dim .tw-face { opacity: .28; }
.floors__tip {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	padding: 8px 12px;
	background: var(--paper);
	color: var(--ink);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s;
}
.floors__tip.is-on { opacity: 1; }
.floors__stage.is-dragging .floors__tip { opacity: 0; }

.floors__index { display: flex; flex-direction: column; gap: 18px; min-height: 0; max-height: clamp(460px, 72vh, 760px); }
.floors__blocks { display: flex; gap: 8px; flex-wrap: wrap; }
.floors__block {
	padding: 9px 16px;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	color: var(--stone);
	font-size: var(--fs-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), border-color var(--t-ui);
}
.floors__block[aria-selected="true"], .floors__block:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.floors__list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-block-start: 1px solid var(--line-dark);
	scrollbar-width: thin;
	scrollbar-color: rgba(207, 176, 168, .4) transparent;
}
.floor-btn {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 3rem 1fr auto;
	align-items: baseline;
	gap: 12px;
	padding: 13px 14px 13px 4px;
	border-block-end: 1px solid var(--line-dark);
	text-align: start;
	transition: background-color .3s var(--ease-out), padding .4s var(--ease-out);
}
.floor-btn::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 2px;
	background: var(--tan);
	transform: scaleY(0);
	transition: transform .4s var(--ease-out);
}
.floor-btn__num { font-family: var(--f-display); font-size: 1.35rem; color: var(--tan); line-height: 1; }
.floor-btn__name { font-weight: 500; }
.floor-btn__meta { font-size: .8rem; color: var(--stone); opacity: .75; }
.floor-btn:not(:disabled):hover, .floor-btn.is-hover, .floor-btn:focus-visible { background: rgba(244, 241, 238, .05); padding-inline-start: 14px; }
.floor-btn:not(:disabled):hover::before, .floor-btn.is-hover::before, .floor-btn:focus-visible::before { transform: scaleY(1); }
.floor-btn:disabled { opacity: .45; cursor: default; }
.floors__legend { display: flex; gap: 22px; color: var(--stone); }
.floors__legend li { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--available { background: #3fae5a; }
.dot--sold { background: #d63b3b; }

/* plan + apartment dialogs */
body.has-dialog { overflow: hidden; }
.plan, .suite {
	position: fixed;
	inset: 0;
	z-index: 85;
	opacity: 0;
	transition: opacity .45s var(--ease-out);
}
.plan[hidden], .suite[hidden] { display: none; }
.plan.is-open, .suite.is-open { opacity: 1; }
.plan {
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--paper);
	color: var(--ink);
	padding: clamp(16px, 2.4vw, 32px) clamp(16px, 3vw, 48px);
}
.plan__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); }
.plan__close {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: inherit;
	transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui);
}
.plan__close span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.plan__close span + span { transform: translate(-50%, -50%) rotate(-45deg); }
.plan__close:hover { transform: rotate(90deg); }
.plan__body {
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	padding-block-start: 16px;
}
.plan__info { display: grid; gap: 22px; align-content: center; }
.plan__title { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.02em; color: var(--navy); }
.plan__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 28px; border-block: 1px solid var(--line); padding-block: 16px; }
.plan__stats div { display: grid; gap: 6px; }
.plan__stats dt { color: var(--muted); }
.plan__stats dd { margin: 0; font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--navy); }
.plan__stats div:nth-child(2) dd { color: #2f8a47; }
.plan__hint { color: var(--muted); font-size: .92rem; max-width: 22em; }
.plan__nav { display: grid; gap: 4px; justify-items: start; }
.plan__step { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; font-weight: 500; transition: color .3s, opacity .3s; }
.plan__step .icon { width: 18px; height: 18px; color: var(--tan); transform: rotate(-90deg); }
.plan__step--down .icon { transform: rotate(90deg); }
.plan__step:hover { color: var(--tan); }
.plan__step:disabled { opacity: .3; cursor: default; color: inherit; }
.plan__figure {
	position: relative;
	margin: 0 auto;
	width: min(100%, calc((100svh - clamp(110px, 12vw, 150px)) * var(--ratio, 2)));
	aspect-ratio: var(--ratio, 2);
	opacity: 0;
	transform: scale(.98);
	transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.plan__figure.is-ready { opacity: 1; transform: none; }
.plan__img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.plan__units { position: absolute; inset: 0; }
button.unit { cursor: pointer; }
.unit {
	position: absolute;
	width: calc(var(--r) * 2.3%);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
button.unit:hover, button.unit:focus-visible { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--navy), 0 10px 24px rgba(17, 21, 29, .3); outline: none; }
.unit--available::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid #3fae5a;
	animation: unit-pulse 2.2s var(--ease-out) infinite;
	animation-delay: calc(var(--i) * .07s);
}
@keyframes unit-pulse { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }

.suite {
	z-index: 88;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	background: var(--ink);
	color: var(--paper);
}
.suite__media { position: relative; overflow: hidden; background: var(--ink-2); }
.suite__img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out); }
.suite__img.is-in { opacity: 1; transform: none; }
.suite__arrow {
	position: absolute;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(17, 21, 29, .55);
	border: 1px solid rgba(244, 241, 238, .35);
	color: var(--paper);
	backdrop-filter: blur(6px);
	transition: background-color .3s;
}
.suite__arrow--prev { inset-inline-end: 88px; }
.suite__arrow--prev .icon { transform: scaleX(-1); }
.suite__arrow:hover { background: var(--tan); }
.suite__panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: clamp(28px, 3vw, 48px); }
.suite__panel .plan__close { position: absolute; inset-block-start: 24px; inset-inline-end: 24px; color: var(--paper); }
.suite__panel > .label { color: var(--tan-soft); padding-inline-end: 56px; }
.suite__title { font-family: var(--f-display); font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .95; letter-spacing: -.02em; }
.suite__status { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.suite__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #d63b3b; }
.suite__status--available::before { background: #3fae5a; }
.suite__count { color: var(--stone); }
.suite__note { color: var(--stone); opacity: .7; font-size: .88rem; }
.suite .link-cta { margin-block-start: 12px; }

@media (max-width: 1023px) {
	.floors__body { grid-template-columns: 1fr; }
	.floors__stage { height: clamp(380px, 62vh, 560px); }
	.floors--model .floors__body { grid-template-columns: 1fr; }
	.floors--model .floors__stage { height: clamp(420px, 70vh, 620px); }
	.floors--model .floors__index { max-height: none; }
	.floors--model .floors__list { max-height: 248px; }
	.floors__index { max-height: none; }
	.floors__list { max-height: 360px; }
	.plan { overflow-y: auto; }
	.plan__body { grid-template-columns: minmax(0, 1fr); align-content: start; overflow-x: auto; }
	.plan__figure { order: -1; width: max(100%, calc(var(--ratio, 2) * 44svh)); margin: 0; }
	.plan__info { gap: 14px; }
	.plan__title { font-size: 2.4rem; }
	.suite { grid-template-columns: 1fr; grid-template-rows: 56svh auto; overflow-y: auto; }
	.suite__panel { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.unit--available::after { animation: none; transform: scale(1.1); }
	.suite__img { transform: none; }
}


.gallery {
	border-block-start: 1px solid var(--line-dark); /* follows the dark 3D section */
	background: var(--ink);
	color: var(--paper);
	padding-block: clamp(72px, 10vw, 160px);
}
.gallery__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; color: var(--stone); }
.gallery__tools { display: flex; align-items: center; gap: 22px; }
.gallery__nav { display: flex; gap: 8px; }
.gallery__nav[hidden] { display: none; }
.gallery__step {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	color: var(--paper);
	transition: border-color var(--t-micro), background-color var(--t-micro), opacity var(--t-micro);
}
.gallery__step .icon { width: 18px; height: 18px; }
.gallery__step--prev .icon { transform: scaleX(-1); }
[dir="rtl"] .gallery__step .icon { transform: scaleX(-1); }
[dir="rtl"] .gallery__step--prev .icon { transform: none; }
.gallery__step:hover { border-color: var(--tan-soft); background: rgba(244, 241, 238, .06); }
.gallery__step:disabled { opacity: .3; pointer-events: none; }
.gallery__count { font-variant-numeric: tabular-nums; }
.gallery__track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--m);
	padding-inline: var(--m) calc(var(--m) + var(--rail));
	scrollbar-width: none;
	cursor: grab;
	overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__track.is-dragging a { pointer-events: none; }
.gallery__item { flex: none; scroll-snap-align: start; }
.gallery__item a { display: block; height: min(68vh, 720px); overflow: hidden; }
.gallery__img { height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease-out); user-select: none; -webkit-user-drag: none; }
.gallery__item a:hover .gallery__img { transform: scale(1.03); }
.gallery__item a { position: relative; }
.gallery__num, .gallery__view { display: none; }

/* Desktop: an accordion of tall strips; the hovered (or last hovered) picture opens wide */
@media (min-width: 1024px) {
	.gallery__track {
		gap: 10px;
		height: min(72vh, 720px);
		overflow: hidden;
		cursor: default;
		scroll-snap-type: none;
	}
	.gallery__item[hidden] { display: none; }
	.gallery__item {
		flex: 1 1 0;
		min-width: 0;
		transition: flex-grow .9s cubic-bezier(.25, .8, .25, 1);
		animation: gallery-in .8s var(--ease-out) both;
		animation-delay: calc(var(--k, 0) * 60ms);
	}
	.gallery__item.is-open { flex-grow: 6; }
	.gallery__item a { height: 100%; }
	.gallery__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		filter: brightness(.62) saturate(.8);
		transition: transform 1.2s var(--ease-out), filter .8s var(--ease-out);
	}
	.gallery__item.is-open .gallery__img { filter: none; }
	.gallery__item a::after { /* soft floor so the number reads on any picture */
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 40%;
		background: linear-gradient(0deg, rgba(17, 21, 29, .55), transparent);
		pointer-events: none;
	}
	.gallery__num {
		display: block;
		position: absolute;
		z-index: 1;
		inset-inline-start: 50%;
		inset-block-end: 22px;
		translate: -50% 0;
		font-size: .66rem;
		letter-spacing: .2em;
		color: var(--paper);
		transition: inset-inline-start .9s cubic-bezier(.25, .8, .25, 1), translate .9s cubic-bezier(.25, .8, .25, 1), color .4s;
	}
	[dir="rtl"] .gallery__num { translate: 50% 0; }
	.gallery__item.is-open .gallery__num { inset-inline-start: 24px; translate: 0 0; color: var(--tan-soft); }
	.gallery__view {
		display: flex;
		position: absolute;
		z-index: 1;
		inset: 50% auto auto 50%;
		translate: -50% -50%;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		color: var(--paper);
		font-size: .64rem;
		font-weight: 500;
		letter-spacing: .24em;
		text-transform: uppercase;
		opacity: 0;
		transform: scale(.85);
		transition: opacity .4s var(--ease-out), transform .6s var(--ease-out);
		pointer-events: none;
	}
	.gallery__view .icon {
		width: 64px;
		height: 64px;
		padding: 20px;
		border-radius: 50%;
		background: rgba(17, 21, 29, .38);
		border: 1px solid rgba(244, 241, 238, .55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		transition: background-color .4s, border-color .4s;
	}
	.gallery__item.is-open .gallery__view { opacity: 1; transform: none; transition-delay: .35s; }
	.gallery__item.is-open a:hover .gallery__view .icon { background: var(--tan); border-color: var(--tan); }
}
@keyframes gallery-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .gallery__item { animation: none; transition: none; } }

.p-location {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	padding-block: clamp(72px, 8vw, 128px);
	background: var(--paper);
	border-block-start: 1px solid var(--line);
}
.p-location__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; }
.p-location__title { display: grid; gap: 18px; }
.p-location__place {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--ink);
}
.p-location__map { height: clamp(320px, 52vh, 520px); }
.p-location__map iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--stone); filter: grayscale(1) contrast(1.05); transition: filter 1s var(--ease-out); }
.p-location__map:hover iframe { filter: none; }

.p-cta {
	position: relative;
	min-height: clamp(340px, 48svh, 480px);
	display: grid;
	align-content: start;
	overflow: hidden;
	padding-block: clamp(64px, 7vw, 96px) clamp(150px, 20vh, 200px);
	background: var(--paper);
	border-block-start: 1px solid var(--line);
	color: var(--ink);
}
/* light variant of the skyline: hairline outlines, no fill, a few soft windows */
.p-cta__city { height: min(26svh, 20vw); opacity: .35 !important; } /* a faint backdrop, never competing with the heading */
.p-cta .tower__body { fill: var(--paper); }
.p-cta .tower__line { stroke: rgba(52, 67, 96, .28); stroke-width: 1; transition-duration: 2.8s; }
.p-cta .skyline__ground { stroke: rgba(52, 67, 96, .22); }
.p-cta .win { fill: var(--tan); }
.p-cta .win--cool { fill: var(--navy); }
.p-cta .skyline.is-in .win { animation: p-cta-win 1.4s ease-out var(--d) forwards; }
.p-cta .skyline.is-in .win--blink { animation: p-cta-win 1.4s ease-out var(--d) forwards, p-cta-blink var(--t) ease-in-out calc(var(--d) + 2s) infinite; }
@keyframes p-cta-win { from { opacity: 0; } to { opacity: .35; } }
@keyframes p-cta-blink { 0%, 100% { opacity: .35; } 50% { opacity: .05; } }
.p-cta__inner { position: relative; display: grid; justify-items: center; gap: 20px; text-align: center; }
.p-cta .label { color: var(--muted); display: flex; gap: 14px; }
.p-cta__title {
	max-width: 18em;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--ink);
}
.p-cta__link { display: inline-flex; align-items: center; gap: .4em; }
.p-cta__link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-out); }
.p-cta__link:hover span { background-size: 100% 1px; }
.p-cta__link .icon { width: .7em; height: .7em; color: var(--tan); transition: transform var(--t-ui) var(--ease-out); }
.p-cta__link:hover .icon { transform: translateX(8px); }
[dir="rtl"] .p-cta__link .icon { transform: scaleX(-1); }
[dir="rtl"] .p-cta__link:hover .icon { transform: scaleX(-1) translateX(8px); }

.next-project {
	position: relative;
	display: grid;
	align-content: end;
	min-height: clamp(300px, 46svh, 460px);
	color: var(--paper);
	background: var(--ink);
	overflow: hidden;
	isolation: isolate;
}
.next-project__media { position: absolute; inset: 0; z-index: -1; }
.next-project__media::after { content: ""; position: absolute; inset: 0; background: rgba(17, 21, 29, .55); transition: background 1s var(--ease-out); }
.next-project__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
.next-project:hover .next-project__img { transform: scale(1); }
.next-project:hover .next-project__media::after { background: rgba(17, 21, 29, .35); }
.next-project__body { display: grid; gap: 14px; padding-block: clamp(40px, 7vh, 72px); }
.next-project__row { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.next-project__title { font-family: var(--f-display); font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.next-project__go {
	flex: none;
	width: clamp(48px, 4.4vw, 64px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border: 1px solid rgba(244, 241, 238, .45);
	border-radius: 50%;
	transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.next-project:hover .next-project__go { background: var(--tan); border-color: var(--tan); }
.next-project__body .label { color: var(--tan-soft); }
.next-project__body .icon { width: 40%; height: 40%; color: var(--paper); transition: transform var(--t-ui) var(--ease-out); }
[dir="rtl"] .next-project__body .icon { transform: scaleX(-1); }
.next-project:hover .next-project__body .icon { transform: translateX(3px); }
[dir="rtl"] .next-project:hover .next-project__body .icon { transform: scaleX(-1) translateX(3px); }

/* Single article */
.article__head { display: grid; gap: 26px; padding-block: clamp(140px, 22vh, 240px) clamp(40px, 5vw, 72px); background: var(--paper); }
.article__head .display-l { max-width: 16em; font-size: clamp(2.25rem, 4.6vw, 5rem); }
.article__cover { padding-inline: var(--m) calc(var(--m) + var(--rail)); background: var(--paper); }
.article__img { width: 100%; max-height: 82vh; object-fit: cover; }
.article__body { padding-block: clamp(56px, 7vw, 112px); background: var(--paper); }
.article__body .prose { max-width: 44rem; margin-inline: auto; }
.article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-block: 0 var(--section); background: var(--paper); }
.article__adj { display: grid; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.article__adj .label { color: var(--tan); }
.article__adj .display-m { font-size: clamp(1.25rem, 2vw, 2rem); transition: color var(--t-micro); }
.article__adj:hover .display-m { color: var(--navy); }
.article__adj--next { text-align: end; grid-column: 2; }

/* ---------- Footer ---------- */
.footer {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	isolation: isolate;
}
.footer__media { position: absolute; inset: 0; z-index: -1; }
.footer__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: grayscale(.35);
	transition: opacity 2s var(--ease-out);
}
.footer__video.is-playing { opacity: .32; }
.footer__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--ink) 0%, rgba(17, 21, 29, .55) 30%, rgba(17, 21, 29, .7) 70%, var(--ink) 100%);
}
.footer__inner {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	row-gap: clamp(36px, 4vw, 56px);
	padding-block: clamp(64px, 7vw, 104px) 28px;
}
.footer__head { grid-column: 1 / span 5; display: grid; gap: 22px; align-content: start; justify-items: start; }
.footer__logo { color: var(--paper); opacity: .95; transition: opacity var(--t-micro); }
.footer__logo:hover { opacity: 1; }
.footer__tagline { margin: 0; max-width: 24em; font-size: .95rem; font-weight: 300; line-height: 1.6; color: var(--stone); }
.logo--footer .logo__mark { width: clamp(120px, 11vw, 160px); }
.footer__title {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -.01em;
}

.enquiry {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px var(--gap);
	align-content: end;
}
.footer__contact { grid-column: 7 / -1; display: grid; gap: 10px; align-content: start; }
.footer__contact .label { color: var(--tan-soft); }
.field { position: relative; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea {
	width: 100%;
	padding: 22px 0 12px;
	font: inherit;
	font-size: 1.05rem;
	color: var(--paper);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-dark);
	border-radius: 0;
	resize: none;
	transition: border-color var(--t-ui) var(--ease-out);
}
.field textarea { min-height: 54px; field-sizing: content; max-height: 220px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--tan); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 1px 0 0 var(--tan); }
.field label {
	position: absolute;
	inset-inline-start: 0;
	top: 22px;
	font-size: 1.05rem;
	color: var(--muted-dark);
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--t-ui) var(--ease-out), color var(--t-micro);
}
[dir="rtl"] .field label { transform-origin: right top; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
	transform: translateY(-22px) scale(.72);
	color: var(--tan-soft);
}
.field.is-invalid input { border-color: #d0806e; }
.enquiry__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.enquiry__status { margin: 0; font-size: .9rem; color: var(--stone); }
.enquiry .link-cta { font-size: .8rem; }
.enquiry.is-sending .link-cta { opacity: .5; pointer-events: none; }
.enquiry.is-sending .enquiry__send { opacity: .55; pointer-events: none; }
/* the send button: a tan pill, a light sweep every few seconds, a pulsing arrow badge; lifts on hover */
.enquiry__send {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
	padding: 8px 8px 8px 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #d9bcb3, var(--tan) 55%, #a87d72);
	color: var(--ink, #1a1a1a);
	font: 500 .8rem/1 var(--f-text);
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 10px 30px -12px rgba(184, 144, 133, .7);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
[dir="rtl"] .enquiry__send { padding: 8px 30px 8px 8px; }
:lang(ar) .enquiry__send { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.enquiry__send::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 50%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg);
	animation: send-sweep 4.5s ease-in-out 1.5s infinite;
}
@keyframes send-sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.enquiry__send-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--paper);
	transition: transform .5s var(--ease-out), background-color .4s;
}
.enquiry__send-icon::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1px solid var(--navy);
	animation: send-ring 2.4s ease-out infinite;
}
@keyframes send-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.enquiry__send-icon .icon { width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
[dir="rtl"] .enquiry__send-icon .icon { transform: scaleX(-1); }
.enquiry__send:hover, .enquiry__send:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(184, 144, 133, .9); }
.enquiry__send:hover .enquiry__send-icon { transform: rotate(-45deg); background: var(--ink, #1a1a1a); }
[dir="rtl"] .enquiry__send:hover .enquiry__send-icon { transform: rotate(45deg); }
.enquiry__send:focus-visible { outline: 2px solid var(--tan-soft); outline-offset: 4px; }
@media (max-width: 599px) {
	.enquiry__foot { flex-direction: column-reverse; align-items: stretch; }
	.enquiry__send { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
	.enquiry__send::before, .enquiry__send-icon::after { animation: none; }
}

.footer__cols {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px var(--gap);
	padding-top: 28px;
	border-top: 1px solid var(--line-dark);
}
.footer__col .label { color: var(--muted-dark); margin-bottom: 14px; }
.footer__col p { margin: 0 0 6px; color: var(--stone); }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.social {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	color: var(--stone);
	transition: color var(--t-micro), border-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.social .icon { width: 19px; height: 19px; stroke-width: 1.3; }
.social:hover, .social:focus-visible { color: var(--tan); border-color: var(--tan); transform: translateY(-2px); }
.footer__base {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
	font-size: var(--fs-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-dark);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer__copy { margin: 0; }
.footer__credit { margin: 0; }
.footer__credit a { color: var(--stone); }
.footer__credit a:hover { color: var(--tan); }

/* ---------- Lightbox ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	background: rgba(17, 21, 29, .96);
	padding: 5vh 5vw;
	opacity: 0;
	transition: opacity .5s var(--ease-out);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__img { max-height: 88vh; width: auto; object-fit: contain; }
.lightbox__close { position: absolute; top: 24px; inset-inline-end: 32px; color: var(--paper); padding: 10px; }

/* ---------- About page (presentation) ---------- */
.a-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-content: start;
	overflow: hidden;
	color: var(--paper);
	background:
		radial-gradient(90% 60% at 62% 100%, rgba(184, 144, 133, .16), transparent 70%),
		linear-gradient(180deg, #0c0f15 0%, var(--ink) 45%, #161b27 100%);
}
.sky { position: absolute; inset: 0 0 40% 0; pointer-events: none; }
.sky i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: calc(2px * var(--s));
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 6px rgba(255, 240, 220, .8);
	opacity: 0;
	animation: a-star var(--t) ease-in-out var(--d) infinite;
}
@keyframes a-star { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }

.skyline { position: absolute; inset-inline: 0; bottom: 0; width: 100%; }
.js .skyline.reveal { opacity: 1; transform: none; }
/* never shorter than the skyline's own proportions, so the tallest tower keeps its top */
.a-hero__city { height: max(24vw, min(46svh, 34vw)); }
.js .a-hero__city.reveal { opacity: .55; }
.a-hero .sky { opacity: .6; }
.tower__body { fill: #121722; opacity: 0; transition: opacity 1.2s var(--ease-out) calc(var(--d) + .9s); }
.tower__line {
	fill: none;
	stroke: rgba(207, 176, 168, .7);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 2.2s cubic-bezier(.6, .1, .2, 1) var(--d);
}
.skyline__ground { stroke: rgba(207, 176, 168, .45); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease-out) .1s; }
.win { fill: #ffd29a; opacity: 0; }
.win--cool { fill: #cfe0ff; }
.skyline.is-in .tower__body { opacity: 1; }
.skyline.is-in .tower__line, .skyline.is-in .skyline__ground { stroke-dashoffset: 0; }
.skyline.is-in .win { animation: a-win-on .9s steps(1, end) var(--d) forwards; }
.skyline.is-in .win--blink { animation: a-win-on .9s steps(1, end) var(--d) forwards, a-win-blink var(--t) ease-in-out calc(var(--d) + 2s) infinite; }
@keyframes a-win-on { 0% { opacity: 0; } 30% { opacity: .5; } 45% { opacity: .1; } 100% { opacity: .7; } }
@keyframes a-win-blink { 0%, 45%, 75%, 100% { opacity: .7; } 50%, 70% { opacity: .05; } }
.a-hero__glow {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 40%;
	background: radial-gradient(60% 70% at 50% 100%, rgba(255, 210, 160, .14), transparent 70%);
	pointer-events: none;
	animation: a-glow 7s ease-in-out infinite;
}
@keyframes a-glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.a-hero__body {
	position: relative;
	display: grid;
	gap: 24px;
	padding-block: clamp(140px, 22vh, 220px) 0;
}
.a-hero__body .label { color: var(--stone); display: flex; gap: 18px; }
.a-hero__title { max-width: 12em; }
.a-hero__meta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px clamp(14px, 2vw, 24px); margin-top: 18px; }
.a-hero__stat { display: grid; align-content: end; gap: 6px; margin: 0; padding-inline-start: 16px; border-inline-start: 1px solid rgba(207, 176, 168, .4); }
.a-hero__stat .label { color: var(--muted-dark); }
/* the headline figures: a band of their own under the hero, two large counters side by side
   between hairlines, each with a tan rule that draws in under it */
.a-hero__intro { display: grid; gap: 24px; min-width: 0; }
.a-figures { position: relative; background: var(--paper); border-block-end: 1px solid var(--line); }
.a-figures__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-block: clamp(56px, 8vw, 110px);
}
.a-figure {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 18px;
	margin: 0;
	padding: clamp(12px, 2vw, 24px) clamp(16px, 3vw, 48px);
	text-align: center;
}
.a-figure + .a-figure { border-inline-start: 1px solid var(--line); }
/* two by two on tablets and phones */
@media (max-width: 899px) {
	.a-figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
	.a-figure:nth-child(odd) { border-inline-start: 0; }
	.a-figure:nth-child(n + 3) { border-block-start: 1px solid var(--line); padding-top: 36px; }
}
.a-figure__num {
	display: flex;
	align-items: flex-start;
	font-family: var(--f-display);
	font-size: clamp(2.8rem, 6vw, 6rem);
	line-height: .85;
	color: var(--navy);
	font-variant-numeric: lining-nums tabular-nums;
}
.a-figure__num sup { font-size: .4em; line-height: 1; margin-inline-start: .05em; color: var(--tan); top: 0; }
.a-figure__label { position: relative; padding-bottom: 14px; color: var(--muted); letter-spacing: .22em; }
.a-figure__label::after {
	content: "";
	position: absolute;
	inset-inline: 25%;
	bottom: 0;
	height: 2px;
	background: var(--tan);
	transform: scaleX(0);
	transition: transform 1.2s var(--ease-out) .4s;
}
.a-figures__grid.is-in .a-figure__label::after { transform: scaleX(1); }
.a-figure + .a-figure .a-figure__label::after { transition-delay: .6s; }
.a-hero__place { font-family: var(--f-display); font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.6; }

.a-of { color: var(--muted); }
.a-title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -.02em;
}

/* lead: one large statement, the rest beneath in two columns */
.a-lead {
	display: grid;
	gap: clamp(28px, 3.5vw, 48px);
	padding-block: var(--section) clamp(64px, 8vw, 120px);
	background: var(--paper);
}
.a-lead__statement {
	max-width: 22em;
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.7rem, 3.2vw, 3rem);
	line-height: 1.18;
	letter-spacing: -.015em;
	color: var(--ink);
}
.a-lead__more {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 20px var(--gap);
	max-width: 48rem;
	margin-inline-start: auto;
	padding-block-start: 28px;
	border-block-start: 1px solid var(--line);
	font-size: 1rem;
	line-height: 1.75;
	color: #4a4645;
}
.a-lead__more p { margin: 0; }

/* split: heading + text beside two overlapping project pictures */
.a-split {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	row-gap: 48px;
	align-items: center;
	padding-block: clamp(80px, 10vw, 160px);
	background: var(--paper);
	border-block-start: 1px solid var(--line);
}
.a-split__text { grid-column: 1 / span 5; display: grid; gap: 22px; }
.a-split__lead { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--ink); margin: 0; }
.a-split__p { font-size: 1rem; line-height: 1.75; color: #4a4645; margin: 0; }
.a-split__media { grid-column: 7 / -1; position: relative; aspect-ratio: 5 / 4; }
.a-split__pic { position: absolute; margin: 0; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(17, 21, 29, .45); }
.a-split__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.a-split__pic:hover img { transform: scale(1.04); }
.a-split__pic--0 { inset: 0 22% 18% 0; }
.a-split__pic--1 { inset: 42% 0 0 46%; border: 8px solid var(--paper); }
.a-split--plain .a-split__text { grid-column: 1 / span 8; }

/* mission / vision: big quotes on a dark band */
.a-statements {
	padding-block: clamp(80px, 10vw, 160px);
	background: var(--ink);
	color: var(--paper);
}
.a-statements__grid {
	display: grid;
	grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
	gap: 1px;
	background: var(--line-dark);
	border: 1px solid var(--line-dark);
}
.a-statement {
	position: relative;
	display: grid;
	align-content: start;
	gap: 26px;
	padding: clamp(28px, 4vw, 64px);
	background: var(--ink);
	overflow: hidden;
}
.a-statement::before { /* a line of light that grows as the panel arrives */
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--tan), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.6s var(--ease-out) calc(var(--d, 0s) + .3s);
}
[dir="rtl"] .a-statement::before { transform-origin: right; background: linear-gradient(-90deg, var(--tan), transparent); }
.a-statement.is-in::before { transform: scaleX(1); }
.a-statement .label { color: var(--tan-soft); }
.a-statement__quote {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.4vw, 2.3rem);
	line-height: 1.22;
	letter-spacing: -.01em;
}
.a-statement__quote--long { font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.35; }
.a-statement__quote::before { content: "\201C"; display: block; height: .55em; font-size: 2.4em; line-height: 1; color: var(--tan); }
.a-statement__more { display: grid; gap: 14px; font-size: .97rem; line-height: 1.75; color: var(--stone); }
.a-statement__more p { margin: 0; }

/* values: numbered tiles */
.a-values {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	row-gap: 40px;
	align-items: start;
	padding-block: clamp(80px, 10vw, 160px);
	background: var(--paper);
}
.a-values__head { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; position: sticky; top: 120px; }
.a-values__intro { margin: 0; font-size: 1rem; line-height: 1.7; color: #4a4645; }
.a-values__grid {
	grid-column: 5 / -1;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	border-block-start: 1px solid var(--line);
	border-inline-start: 1px solid var(--line);
}
.a-value {
	position: relative;
	display: grid;
	align-content: start;
	gap: 12px;
	min-height: 210px;
	padding: clamp(22px, 2.4vw, 34px);
	border-inline-end: 1px solid var(--line);
	border-block-end: 1px solid var(--line);
	isolation: isolate;
	overflow: hidden;
	transition: color .5s var(--ease-out);
}
.a-value::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--navy);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .6s var(--ease-out);
}
.a-value:hover { color: var(--paper); }
.a-value:hover::before { transform: scaleY(1); }
.a-value__num { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--tan); margin-bottom: 18px; }
.a-value__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	background: var(--tan);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
	transition: background-color .5s var(--ease-out), transform .6s var(--ease-out);
}
.a-value:hover .a-value__icon { background: var(--tan-soft); transform: translateY(-4px) scale(1.06); }
.a-value__term { font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.a-value__text { margin: 0; font-size: .92rem; line-height: 1.65; opacity: .8; }
.js .a-values__grid .a-value { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), color .5s var(--ease-out); transition-delay: calc(var(--i) * .08s); }
.js .a-values__grid.is-in .a-value { opacity: 1; transform: none; }
.js .a-values__grid.reveal { opacity: 1; transform: none; }
.js .a-values__grid.is-in .a-value:hover { transition-delay: 0s; }

/* closing: team + calls to action */
.a-closing {
	position: relative;
	overflow: hidden;
	padding-block: clamp(64px, 7vw, 104px);
	background: radial-gradient(40% 70% at 78% 50%, rgba(52, 67, 96, .45), transparent 70%), var(--ink); /* soft glow behind the logo, fully inside the band */
	color: var(--paper);
}
.a-closing__inner { position: relative; display: grid; gap: 26px; justify-items: start; }
.a-closing__logo {
	position: absolute;
	inset-block: 0;
	inset-inline-end: calc(var(--m) + var(--rail));
	display: grid;
	align-items: center;
	opacity: .25;
	pointer-events: none;
}
.a-closing__logo .logo { display: block; }
.a-closing__logo .logo__mark { width: clamp(200px, 22vw, 340px); }
.a-closing .label { color: var(--stone); }
.a-closing__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.025em; max-width: 12em; }
.a-closing__text { max-width: 40rem; margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.7; color: var(--stone); }
.a-closing__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.a-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 15px 22px;
	border: 1px solid rgba(244, 241, 238, .3);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: background-color var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.a-btn .icon { width: 16px; height: 16px; transition: translate var(--t-ui) var(--ease-out); }
[dir="rtl"] .a-btn .icon { transform: scaleX(-1); }
.a-btn:hover { border-color: var(--tan-soft); color: var(--tan-soft); }
.a-btn:hover .icon { translate: 4px 0; }
.a-btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.a-btn--solid:hover { background: var(--tan-soft); border-color: var(--tan-soft); color: var(--ink); }

@media (max-width: 1023px) {
	.a-split__text, .a-split__media, .a-values__head, .a-values__grid { grid-column: 1 / -1; }
	.a-values__head { position: static; }
	.a-statements__grid { grid-template-columns: 1fr; }
	.a-closing__logo { inset-inline-end: -10%; opacity: .12; }
	.a-hero__city { height: 34svh; }
}
@media (prefers-reduced-motion: reduce) {
	.sky i, .a-hero__glow, .win--blink { animation: none; }
	.tower__line, .skyline__ground { transition: none; stroke-dashoffset: 0; }
	.tower__body { transition: none; opacity: 1; }
	.win { animation: none; opacity: .7; }
}

/* ---------- Contact page ---------- */
.c-head {
	display: grid;
	gap: 22px;
	padding-block: clamp(140px, 22vh, 220px) clamp(40px, 5vw, 72px);
	background: var(--paper);
}
.c-head__title { max-width: 12em; }
.c-head__lead { max-width: 36rem; margin: 0; font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.7; color: #4a4645; }
.c-main {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap);
	row-gap: 48px;
	align-items: start;
	padding-block: clamp(32px, 4vw, 56px) clamp(64px, 7vw, 112px);
	background: var(--paper);
	border-block-start: 1px solid var(--line);
}
.c-info { grid-column: 1 / span 5; display: grid; }
.c-info__item { display: grid; justify-items: start; gap: 8px; padding-block: 26px; border-block-end: 1px solid var(--line); }
.c-info__item:first-child { padding-block-start: 8px; }
.c-info__item:last-child { border-block-end: 0; }
.c-info__item .label { color: var(--muted); margin-bottom: 4px; }
.c-info__big {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--ink);
	transition: color var(--t-micro);
}
a.c-info__big:hover { color: var(--tan); }
.c-info__item .link-cta { margin-top: 8px; }
.c-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.c-social .social { color: var(--ink); border-color: var(--line); }
.c-social .social:hover { color: var(--tan); border-color: var(--tan); }

.c-form {
	grid-column: 7 / -1;
	display: grid;
	gap: 26px;
	padding: clamp(28px, 3.4vw, 52px);
	background: #fbfaf8;
	border: 1px solid var(--line);
}
.c-form__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; letter-spacing: -.015em; color: var(--ink); }
.enquiry--light { align-content: start; }
.enquiry--light .field input, .enquiry--light .field textarea, .enquiry--light .field select { color: var(--ink); border-bottom-color: rgba(17, 21, 29, .2); }
.enquiry--light .field textarea { min-height: 110px; }
.enquiry--light .field label { color: var(--muted); }
.enquiry--light .field input:focus + label, .enquiry--light .field input:not(:placeholder-shown) + label,
.enquiry--light .field textarea:focus + label, .enquiry--light .field textarea:not(:placeholder-shown) + label { color: var(--tan); }
.field select {
	width: 100%;
	padding: 22px 28px 12px 0;
	font: inherit;
	font-size: 1.05rem;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b89085' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0 bottom 12px / 18px no-repeat;
	border: 0;
	border-bottom: 1px solid var(--line-dark);
	border-radius: 0;
	appearance: none;
	cursor: pointer;
}
[dir="rtl"] .field select { padding: 22px 0 12px 28px; background-position: left 0 bottom 12px; }
.field select:focus { outline: none; border-color: var(--tan); }
.field--select label { transform: translateY(-22px) scale(.72); }
.enquiry--light .enquiry__status { color: #4a4645; }
.a-btn--dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.a-btn--dark:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.enquiry.is-sending .a-btn { opacity: .5; pointer-events: none; }

.c-map { padding-block: 0 var(--section); background: var(--paper); }
.c-map__frame { position: relative; height: clamp(360px, 60vh, 600px); overflow: hidden; border: 1px solid var(--line); }
.c-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--stone); filter: grayscale(1) contrast(1.05); transition: filter 1s var(--ease-out); }
.c-map__frame:hover iframe { filter: none; }
.c-map__card {
	position: absolute;
	inset-inline-start: 24px;
	inset-block-end: 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: min(380px, calc(100% - 48px));
	padding: 18px 22px;
	background: var(--paper);
	box-shadow: 0 18px 40px -20px rgba(17, 21, 29, .35);
}
.c-map__card .icon { flex: none; width: 22px; height: 22px; color: var(--tan); }
.c-map__card .label { color: var(--muted); margin: 0 0 4px; }
.c-map__addr { margin: 0; font-size: .98rem; font-weight: 500; color: var(--ink); }

@media (max-width: 1023px) {
	.c-info, .c-form { grid-column: 1 / -1; }
	.enquiry--light { grid-template-columns: 1fr; }
	.c-map__card { position: static; max-width: none; box-shadow: none; border-top: 1px solid var(--line); }
	.c-map__frame { height: auto; }
	.c-map__frame iframe { height: 340px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.hero { height: 180svh; }
	.hero__tagline { grid-column: 1 / -1; }
	.hero__geo { grid-column: 1 / -1; grid-row: 4; justify-self: start; text-align: start; margin-top: 24px; }
	.hero__word--indent { padding-inline-start: 10vw; }
	.scroll-cue { display: none; }
	.next-cue--stage { inset-inline-start: auto; inset-inline-end: var(--m); }

	.theatre { --unit: 55svh; }
	.slide { padding-top: 120px; }
	.slide__title { grid-column: 1 / -1; }
	.slide__summary { grid-column: 1 / -1; margin-top: 14px; }
	.slide__body .slide__location { grid-column: 1 / -1; justify-self: start; margin-top: 18px; }
	.theatre__label { inset-block-start: calc(var(--below-brand) + 24px); }

	.journal__head h2, .journal__head h1, .journal__intro { grid-column: 1 / -1; }
	.feature__link { aspect-ratio: 4 / 5; min-height: 0; }

	.p-overview__lead, .facts,

	.footer__head, .footer__contact { grid-column: 1 / -1; }
	.footer__cols { grid-template-columns: 1fr 1fr; }
	.p-story__title, .p-story__intro { grid-column: 1 / -1; }
	.p-story__intro { padding-block-start: 0; }
}
@media (max-width: 599px) {
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facts__row, .facts__row:nth-child(3n + 2), .facts__row:nth-child(3n) { padding-inline-start: 0; border-inline-start: 0; }
	.facts__row:nth-child(2n) { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
	.feature-item { min-height: 128px; padding: 18px; }
	.features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slide__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.enquiry { grid-template-columns: 1fr; }
	.footer__cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
	.footer__inner { row-gap: 32px; padding-block-start: 56px; }
	.enquiry { gap: 18px; }
	.article__nav { grid-template-columns: 1fr; }
	.article__adj--next { grid-column: 1; text-align: start; }
	.gallery__item a { height: 52vh; }
	.footer__base { flex-direction: column; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .2s !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
	.hero { height: auto; }
	.hero__stage { position: relative; }
	.hero__content { opacity: 1; transform: none; }
	.hero__poster, .hero__video { transform: none; }
	.hero__shade { background: linear-gradient(0deg, rgba(17, 21, 29, .75), rgba(17, 21, 29, .2)); }
	.hero__statement {
		position: relative;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		padding-block: var(--section);
		background: var(--ink);
	}
	.theatre { height: auto; }
	.theatre--entry { margin-top: 0; background: var(--ink); }
	.theatre--entry .theatre__stage { opacity: 1; }
	.theatre__stage { position: relative; height: auto; overflow: visible; }
	.theatre__index { display: none; }
	.theatre__label { position: relative; inset: auto; display: block; padding: 48px var(--m) 24px; }
	.slide { position: relative; min-height: 100svh; opacity: 1; pointer-events: auto; }
	.slide__media, .slide__img, .slide__video, .p-hero__img, .p-hero__video { transform: none !important; }
	.slide__meta, .slide__location, .slide__summary, .slide__link { opacity: 1; transform: none; }
	.js .slide .line__inner { transform: none; }
	.js .reveal { opacity: 1; transform: none; }
	.js .reveal-lines .line__inner, .js .hero__word .line__inner { transform: none; }
}

/* =========================================================
   Readable data sections — journal, indexes, project facts,
   articles and pages use the grotesk for headings; the Didone
   serif stays reserved for presentation moments.
   ========================================================= */
.journal__head h1, .journal__head h2,
.index-list__head h2,
.page-head .display-l,
.article__head .display-l,
.p-location .display-l,
.feature__title,
.row__title,
.article__adj .display-m,
.p-overview__lead .display-m,
.facts dd,
.prose h2, .prose h3 {
	font-family: var(--f-text);
	font-weight: 500;
	font-style: normal;
	letter-spacing: -.02em;
}
.journal__head h1, .journal__head h2,
.index-list__head h2,
.page-head .display-l,
.p-location .display-l { font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.08; }
.article__head .display-l { font-size: clamp(1.9rem, 3.4vw, 3.4rem); line-height: 1.12; }
.feature__title { font-size: clamp(1.45rem, 2.4vw, 2.5rem); line-height: 1.15; }
.row__title { font-size: clamp(1.1rem, 1.45vw, 1.45rem); line-height: 1.3; letter-spacing: -.01em; }
.row__link:hover .row__title { font-style: normal; }
.p-overview__lead .display-m { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.65; font-weight: 400; letter-spacing: -.005em; color: #3c3a39; }
.facts dd { font-size: clamp(1rem, 1.2vw, 1.15rem); letter-spacing: 0; }
.article__adj .display-m { font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.3; letter-spacing: -.01em; }
.prose h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.25; }
.prose h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.3; }
.prose blockquote { font-family: var(--f-text); font-weight: 300; font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.45; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
	position: fixed;
	inset-inline-end: calc(var(--rail) + 22px);
	inset-block-end: 22px;
	z-index: 40;   /* under the menu overlay (45) and the plan, suite and lightbox dialogs */
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 10px 28px rgba(17, 21, 29, .28);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(17, 21, 29, .34); }
.wa-float:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }
@media (max-width: 767px) {
	.wa-float { width: 50px; height: 50px; inset-inline-end: 16px; inset-block-end: 16px; }
	.wa-float svg { width: 25px; height: 25px; }
}
@media print { .wa-float { display: none; } }

/* ---------- Bottom dock (phones and tablets) ----------
   Replaces the top Menu button below 1024px: the main links stay one thumb-reach away, and the full
   menu opens as a sheet just above the dock. */
:root { --dock: 0px; --dock-gap: 0px; }
.dock { display: none; }
@media (max-width: 1023px) {
	:root { --dock: 64px; --dock-gap: calc(12px + env(safe-area-inset-bottom, 0px)); }
	.topbar { display: none; }
	.dock {
		display: block;
		position: fixed;
		z-index: 55;
		inset-inline: 12px;
		inset-block-end: var(--dock-gap);
		max-width: 560px;
		margin-inline: auto;
		color: var(--paper);
		background: rgba(17, 21, 29, .84);
		-webkit-backdrop-filter: blur(16px) saturate(1.4);
		backdrop-filter: blur(16px) saturate(1.4);
		border: 1px solid rgba(255, 255, 255, .09);
		border-radius: 22px;
		box-shadow: 0 18px 44px rgba(10, 13, 19, .32);
		animation: dock-in .9s var(--ease-out) both;
	}
	.has-intro .dock { animation-delay: 1.4s; }
	.dock__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		margin: 0;
		padding: 6px;
		list-style: none;
	}
	.dock__link {
		position: relative;
		width: 100%;
		height: 52px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		border-radius: 16px;
		color: rgba(244, 240, 234, .6);
		-webkit-tap-highlight-color: transparent;
		transition: color var(--t-micro), background-color var(--t-micro), transform .25s var(--ease-out);
	}
	.dock__link:active { transform: scale(.94); }
	.dock__link .icon { width: 21px; height: 21px; transition: color var(--t-micro); }
	.dock__label {
		font-size: .58rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: .06em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	:lang(ar) .dock__label, :lang(ka) .dock__label { text-transform: none; letter-spacing: 0; font-size: .66rem; }
	.dock__link:hover, .dock__link:focus-visible { color: var(--paper); outline: none; }
	.dock__link:focus-visible { box-shadow: inset 0 0 0 1px var(--tan); }
	.is-current > .dock__link { color: var(--paper); background: rgba(255, 255, 255, .07); }
	.is-current > .dock__link .icon { color: var(--tan); }
	.dock__burger { display: grid; align-content: center; gap: 4px; width: 18px; height: 21px; }
	.dock__burger i { display: block; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .5s var(--ease-out), opacity .3s; }
	.dock__burger i:nth-child(2) { width: 65%; }
	.menu-open .dock__menu { color: var(--paper); background: rgba(184, 144, 133, .18); }
	.menu-open .dock__burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
	.menu-open .dock__burger i:nth-child(2) { opacity: 0; }
	.menu-open .dock__burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

	/* the menu as a sheet rising from the dock */
	.overlay, [dir="rtl"] .overlay {
		inset-block: auto calc(var(--dock) + var(--dock-gap) + 10px);
		inset-inline: 12px;
		width: auto;
		max-width: 560px;
		max-height: calc(100svh - var(--dock) - var(--dock-gap) - 90px);
		margin-inline: auto;
		border-radius: 22px;
		transform: translateY(calc(100% + var(--dock) + 60px));
	}
	.overlay__inner { min-height: 0; gap: 28px; padding: 30px 24px 24px; }

	/* full-screen scenes keep their bottom text clear of the dock */
	:root { --dock-clear: calc(var(--dock) + var(--dock-gap) + 22px); }
	.hero__content, .hero__statement { padding-block-end: var(--dock-clear); }
	.slide { padding-block-end: var(--dock-clear); }
	.p-hero__body { padding-block-end: var(--dock-clear); }
	.stats__index { inset-block-end: var(--dock-clear); }
	.stat { inset-block-end: calc(var(--dock-clear) + 52px); }
	.brand.is-tucked {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-16px) scale(.85);
		pointer-events: none;
		transition: color .7s var(--ease-out), transform var(--t-ui) var(--ease-out), opacity .5s var(--ease-out), visibility 0s linear .5s;
	}
	.next-cue { display: none; }   /* the dock and the WhatsApp button own the bottom corners */

	/* room under the footer for the dock, and the WhatsApp button rides above it */
	.footer { padding-block-end: calc(var(--dock) + var(--dock-gap)); }
	.wa-float { inset-block-end: calc(var(--dock) + var(--dock-gap) + 14px); inset-inline-end: 16px; }
}
@keyframes dock-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .dock { animation: none; } }

/* ---------- Phone polish ---------- */
@media (max-width: 767px) {
	/* the About opening reads as a paragraph on a phone, not a poster */
	.a-lead__statement { font-size: 1.45rem; line-height: 1.32; }
	/* the 3D stage hugs the model instead of leaving dead space above and below it */
	.floors__stage { height: min(108vw, 60svh); }
	.floors--model .floors__stage { height: min(112vw, 64svh); }
	/* footer contacts: the email gets a full row so it never breaks mid-address; follow icons too */
	.footer__cols > .footer__col:first-child, .footer__cols > .footer__col:last-child { grid-column: 1 / -1; }
}