/* ============================================================
ERA · Premium Quarter — landing
Design tokens & global reset
============================================================ */
:root {
	--bg: #ffffff;
	--bg-soft: #f4f5f7;
	--bg-cream: #f8f7f4;
	--slate: #b7c0cc;
	--slate-2: #d8dee6;
	--line: #e6e8eb;
	--ink: #0a0a0a;
	--ink-2: #1f2530;
	--muted: #6b7280;
	--accent: #1f2530;
	--radius-card: 20px;
	--radius-img: 16px;
	--pad-x: 96px;
	--max: 1440px;
	--section-y: 120px;
	--font-display: "Manrope", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}
html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	line-height: 1.5;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
}
h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.05;
}
p {
	margin: 0;
}

.container {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--pad-x);
}
.section {
	padding: var(--section-y) 0;
}
.eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
}
.divider {
	height: 1px;
	background: var(--line);
	width: 100%;
}

/* ------------ Unified section head ------------ */
.section-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: end;
	margin-bottom: 56px;
}
.section-head .h-l {
	max-width: 760px;
}
.section-head .h-r {
	color: var(--muted);
	font-size: 15px;
	max-width: 420px;
	justify-self: end;
	text-align: right;
}
.section-head h2 {
	font-size: clamp(36px, 4.2vw, 56px);
	font-weight: 500;
	margin-top: 0;
	letter-spacing: -0.02em;
}
.section-head.center {
	display: block;
	text-align: center;
}
.section-head.center .h-l {
	margin: 0 auto;
}
.section-head.center h2 {
	margin-top: 16px;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 15px;
	transition: 0.2s ease;
	white-space: nowrap;
}
.btn-primary {
	background: var(--ink-2);
	color: #fff;
}
.btn-primary:hover {
	background: #000;
}
.btn-ghost {
	border: 1px solid var(--ink-2);
	color: var(--ink-2);
}
.btn-ghost:hover {
	background: var(--ink-2);
	color: #fff;
}
.btn-light {
	background: #fff;
	color: var(--ink-2);
	border: 1px solid var(--line);
}
.btn-light:hover {
	border-color: var(--ink-2);
}
.arr {
	font-family: "Google Sans Code";
	font-weight: 300;
}
.btn .arr {
	display: inline-block;
	transition: transform 0.2s;
	font-size: 1.5em;
	line-height: 0.666;
}
.btn:hover .arr {
	transform: translateX(4px);
}

/* ============================================================
MODAL
============================================================ */
.modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}
.modal.open {
	opacity: 1;
	visibility: visible;
}
.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 18, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
}
.modal-card {
	position: relative;
	background: #fff;
	border-radius: 24px;
	width: 100%;
	max-width: 520px;
	padding: 48px 48px 40px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
	transform: translateY(20px) scale(0.98);
	transition: transform 0.3s ease;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}
.modal.open .modal-card {
	transform: translateY(0) scale(1);
}
.modal-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bg-soft);
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	transition: 0.2s;
	border: 0;
	cursor: pointer;
	z-index: 2;
}
.modal-close:hover {
	background: var(--ink-2);
	color: #fff;
	transform: rotate(90deg);
}
.modal-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
}
.modal-title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 12px;
}
.modal-sub {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 32px;
	max-width: 380px;
}
.modal-form label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--muted);
	letter-spacing: 0.1em;
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-weight: 500;
}
.modal-form label .opt {
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.6;
	font-weight: 400;
}
.modal-form input[type="text"],
.modal-form input[type="tel"],
.modal-form input[type="email"] {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	font-family: inherit;
	font-size: 15px;
	margin-bottom: 18px;
	transition: border-color 0.2s;
	background: #fff;
	color: var(--ink);
}
.modal-form input:focus {
	outline: none;
	border-color: var(--ink-2);
}
.modal-form input::placeholder {
	color: #a8aeb6;
}
.modal-form label.modal-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 22px;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-body);
	font-weight: 400;
}
.modal-form label.modal-check a {
	text-transform: none;
	letter-spacing: 0;
}
.modal-check input {
	margin-top: 3px;
	accent-color: var(--ink-2);
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	cursor: pointer;
}
.modal-check a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.modal-form .btn {
	width: 100%;
	justify-content: center;
	padding: 16px 24px;
}
.modal-foot {
	margin-top: 14px;
	font-size: 11px;
	color: var(--muted);
	text-align: center;
	letter-spacing: 0.04em;
}
/* success state */
.modal-success {
	text-align: center;
	padding: 8px 0 4px;
}
.modal-success-icon {
	width: 64px;
	height: 64px;
	background: var(--ink-2);
	color: #fff;
	border-radius: 50%;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}
.modal-success h3 {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 12px;
}
.modal-success p {
	color: var(--muted);
	margin: 0 0 28px;
	font-size: 14px;
}
.modal-success .btn {
	display: inline-flex;
}

/* ============================================================
HEADER
============================================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--line);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}
.brand {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.3em;
	font-size: 16px;
}
.nav {
	display: flex;
	gap: 32px;
}
.nav a {
	font-size: 14px;
	color: var(--ink);
	opacity: 0.75;
	transition: opacity 0.2s;
}
.nav a:hover {
	opacity: 1;
}
.header-right {
	display: flex;
	align-items: center;
	gap: 20px;
}
.phone {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 15px;
}
.header-cta {
	padding: 12px 22px;
	font-size: 14px;
}
.burger {
	display: none;
	width: 36px;
	height: 36px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	z-index: 101;
	position: relative;
}
.burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--ink);
	transition:
		transform 0.25s ease,
		opacity 0.2s ease;
}
.burger.is-open span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.burger.is-open span:nth-child(2) {
	opacity: 0;
}
.burger.is-open span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
MOBILE FULLSCREEN MENU
============================================================ */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 88px 24px 32px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition:
		opacity 0.3s ease,
		visibility 0.3s,
		transform 0.3s ease;
	overflow-y: auto;
}
.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mobile-menu-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	justify-content: center;
}
.mobile-menu-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 500;
	color: var(--ink);
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	letter-spacing: -0.01em;
	transition:
		padding 0.2s,
		color 0.2s;
}
.mobile-menu-nav a:active {
	padding-left: 8px;
}
.mobile-menu-nav a .num {
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.16em;
	font-weight: 500;
}
.mobile-menu-foot {
	padding-top: 32px;
	border-top: 1px solid var(--line);
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mobile-menu-foot .mm-label {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}
.mobile-menu-foot .mm-addr {
	font-size: 13px;
	color: var(--ink-2);
	line-height: 1.5;
}
.mobile-menu-call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 24px;
	background: var(--ink-2);
	color: #fff;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	margin-top: 8px;
	transition: 0.2s;
}
.mobile-menu-call:hover {
	background: #000;
}
.mobile-menu-call svg {
	flex-shrink: 0;
}
.mobile-menu-socials {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	justify-content: center;
}
.mobile-menu-socials a {
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--ink-2);
	font-family: var(--font-display);
	font-weight: 600;
}
body.menu-open {
	overflow: hidden;
}

/* ============================================================
01 · HERO  — balanced layout
left: eyebrow → H1 (2 lines) → sub → CTAs → KPI strip (bottom)
right: image → trust points (bottom)
============================================================ */
.hero {
	padding-top: 160px;
	padding-bottom: 80px;
	position: relative;
	overflow: hidden;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: stretch;
	min-height: min(82vh, 760px);
}
.hero-grid > * {
	min-width: 0;
}
.hero-left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
}
.hero-eyebrow {
	display: flex;
	gap: 14px;
	align-items: center;
	color: var(--muted);
}
.hero-eyebrow .dot {
	width: 6px;
	height: 6px;
	background: var(--ink-2);
	border-radius: 50%;
}
.hero h1 {
	font-size: clamp(30px, 3.6vw, 56px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin-top: 28px;
}
.hero h1 .accent {
	color: var(--slate);
	font-weight: 400;
	font-style: italic;
	font-family: var(--font-display);
}
.hero-sub {
	max-width: 520px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-2);
	opacity: 0.78;
	margin-top: 32px;
}
.hero-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 36px;
}

/* KPI strip moved to LEFT bottom */
.hero-kpi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--line);
	padding-top: 28px;
	margin-top: auto;
}
.kpi-cell {
	padding-right: 16px;
	margin-right: 16px;
	border-right: 1px solid var(--line);
}
.kpi-cell:first-child {
	padding-left: 0;
}
.kpi-cell:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}
.kpi-cell .v {
	font-family: var(--font-display);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.kpi-cell .l {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-top: 6px;
}

/* Right column: image + trust */
.hero-right {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.hero-img {
	position: relative;
	border-radius: var(--radius-img);
	overflow: hidden;
	flex: 1;
	min-height: 520px;
	background: #1a1f26 center/cover;
}
.hero-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.4) 100%);
}
.hero-img-label {
	position: absolute;
	left: 24px;
	bottom: 24px;
	color: #fff;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	z-index: 2;
}

/* Trust panel — replaces old .hero-foot */
.hero-trust {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}
.hero-trust a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.02em;
	transition: 0.2s;
	gap: 14px;
}
.hero-trust a:hover {
	color: var(--accent);
	padding-left: 6px;
}
.hero-trust a:last-child {
	border-bottom: 0;
}
.hero-trust .lbl {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hero-trust .lbl b {
	font-weight: 600;
	font-size: 13px;
}
.hero-trust .lbl span {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.hero-trust .arr-up {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--ink-2);
	transition: 0.2s;
}
.hero-trust a:hover .arr-up {
	background: var(--ink-2);
	color: #fff;
	transform: rotate(-45deg);
}

/* ============================================================
02 · POSITIONING  — editorial manifesto spread
============================================================ */
.positioning {
	background: var(--bg-cream);
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}
.positioning::before {
	content: "";
	position: absolute;
	top: 60px;
	left: 50%;
	width: 1px;
	height: 48px;
	background: var(--slate);
	opacity: 0.4;
}
.pos-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 72px;
}
.pos-head .eyebrow {
	margin: 0;
}
.pos-head-mark {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--muted);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 14px;
}
.pos-head-mark::before,
.pos-head-mark::after {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--slate);
	opacity: 0.5;
}

.pos-spread {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 80px;
	align-items: center;
	margin-bottom: 96px;
}
.pos-text-col {
	position: relative;
}
.pos-h {
	font-family: var(--font-display);
	font-size: clamp(40px, 4.8vw, 72px);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -0.025em;
	margin: 0 0 40px;
	color: var(--ink);
}
.pos-h .line {
	display: block;
}
.pos-quote {
	position: relative;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 520px;
	margin: 0 0 32px;
	padding-left: 24px;
	border-left: 2px solid var(--slate);
	font-style: italic;
	opacity: 0.85;
}
.pos-author {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
}
.pos-author .line {
	flex: 0 0 32px;
	height: 1px;
	background: var(--slate);
}

.pos-image-col {
	position: relative;
}
.pos-image {
	position: relative;
	border-radius: var(--radius-img);
	overflow: hidden;
	aspect-ratio: 4/5;
	background: #1a1f26 center/cover;
}
.pos-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
}
.pos-coords {
	position: absolute;
	top: 24px;
	left: 24px;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: #fff;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	z-index: 2;
}
.pos-image-caption {
	position: absolute;
	left: 24px;
	bottom: 24px;
	right: 24px;
	color: #fff;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	z-index: 2;
}
.pos-image-caption b {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
	font-size: 14px;
}
.pos-image-caption span {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.7;
}

.pos-promises {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px;
	padding-top: 64px;
	border-top: 1px solid var(--line);
}
.promise {
	position: relative;
}
.promise-num {
	font-family: var(--font-display);
	font-size: clamp(42px, 4.2vw, 64px);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 18px;
	color: var(--ink-2);
}
.promise-num sup {
	position: relative;
	top: -0.4em;
	font-size: 0.4em;
	font-weight: 500;
	vertical-align: super;
	margin-left: 4px;
	opacity: 0.6;
}
.promise-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
	max-width: 230px;
}

/* ============================================================
03 · ADVANTAGES
============================================================ */
/* deprecated — replaced by .section-head */
.adv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.adv-card {
	background: var(--bg-soft);
	border-radius: var(--radius-card);
	padding: 36px 32px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: 0.25s ease;
}
.adv-card:hover {
	transform: translateY(-4px);
}
.adv-card .num {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--muted);
}
.adv-card h3 {
	font-size: 22px;
	font-weight: 600;
	margin-top: 18px;
	letter-spacing: -0.01em;
}
.adv-card p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
	margin-top: 14px;
}
.adv-card .ico {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-2);
}
.adv-card.dark {
	background: var(--ink-2);
	color: #fff;
}
.adv-card.dark .num,
.adv-card.dark p {
	color: #9ca3af;
}
.adv-card.dark .ico {
	color: #fff;
}

/* ============================================================
04 · ARCHITECTURE
============================================================ */
.arch-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 28px;
	align-items: stretch;
}
.arch-display {
	font-size: clamp(80px, 11vw, 160px);
	font-weight: 300;
	color: var(--slate);
	letter-spacing: -0.04em;
	line-height: 0.9;
	margin-bottom: 8px;
}
.arch-h {
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 500;
	max-width: 560px;
	margin-bottom: 24px;
}
.arch-text {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.6;
	max-width: 480px;
	margin-bottom: 32px;
}
.arch-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 480px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.arch-meta div .v {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
}
.arch-meta div .l {
	font-size: 12px;
	color: var(--muted);
	margin-top: 4px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.arch-imgs {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1.4fr 1fr;
	gap: 20px;
	height: 100%;
	min-height: 540px;
}
.arch-img {
	border-radius: var(--radius-img);
	overflow: hidden;
	background: #222 center/cover;
	min-height: 0;
}
.arch-img.a {
	background-image: none;
}
.arch-img.b {
	background-image: none;
}

/* ============================================================
05 · LOCATION
============================================================ */
.location {
	background: var(--bg-cream);
}
/* deprecated */
.loc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: stretch;
}
.loc-map {
	background: #fff;
	border-radius: var(--radius-img);
	min-height: 480px;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
}
.loc-map svg {
	width: 100%;
	height: 100%;
	display: block;
}
.loc-map iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: none;
}
.loc-side {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.loc-timings {
	background: #fff;
	border-radius: var(--radius-card);
	padding: 32px;
	border: 1px solid var(--line);
}
.loc-timings h4 {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
	margin-bottom: 20px;
}
.loc-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
}
.loc-row:last-child {
	border-bottom: 0;
}
.loc-row .v {
	font-family: var(--font-display);
	font-weight: 600;
}
.loc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	font-family: var(--font-display);
	font-weight: 500;
}
.chip b {
	font-weight: 600;
	color: var(--slate);
}

/* ============================================================
06 · LAYOUTS
============================================================ */
/* deprecated */
.tabs {
	display: flex;
	gap: 8px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 14px 0;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.tab {
	padding: 10px 18px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--muted);
	transition: 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tab.active {
	background: var(--ink-2);
	color: #fff;
}
.tab:hover:not(.active) {
	color: var(--ink);
}
.tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 11px;
	font-weight: 600;
	color: inherit;
}
.tab.active .tab-count {
	background: rgba(255, 255, 255, 0.18);
}
.flat-empty {
	padding: 48px 32px;
	text-align: center;
	background: var(--bg-soft);
	border-radius: var(--radius-card);
	margin-bottom: 32px;
}
.flat-empty p {
	color: var(--muted);
	margin: 0 0 18px;
	font-size: 15px;
}
.flat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.flat-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		border-color 0.2s;
}
.flat-card:hover {
	border-color: var(--ink-2);
}
.flat-plan {
	aspect-ratio: 4/3;
	background: var(--bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--slate);
	position: relative;
}
.flat-plan svg {
	width: 70%;
	height: 70%;
}
.flat-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #fff;
	font-family: var(--font-display);
	font-size: 11px;
	padding: 6px 12px;
	border-radius: 999px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--line);
}
.flat-info {
	padding: 22px;
}
.flat-info .num {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.flat-info h3 {
	font-size: 20px;
	margin-top: 6px;
	font-weight: 600;
}
.flat-info .row {
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 14px;
}
.flat-info .row .v {
	font-family: var(--font-display);
	font-weight: 600;
}
.flat-info .price {
	margin-top: 14px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
}
.flat-info .price small {
	font-weight: 400;
	color: var(--muted);
	font-size: 12px;
	display: block;
	margin-top: 4px;
}
.flat-cta {
	display: block;
	text-align: center;
	margin-top: 16px;
	padding: 11px 16px;
	font-size: 13px;
	background: var(--bg-soft);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink-2);
	transition: 0.2s;
	border: 1px solid transparent;
}
.flat-cta:hover {
	background: var(--ink-2);
	color: #fff;
}
.flat-cta .arr {
	margin-left: 6px;
	display: inline-block;
	transition: transform 0.2s;
}
.flat-cta:hover .arr {
	transform: translateX(4px);
}
.lay-cta-wrap {
	text-align: center;
	margin-top: 48px;
}

/* ============================================================
07 · PRIVILEGES
============================================================ */
/* deprecated */
.priv-scroll {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.priv-card {
	position: relative;
	border-radius: var(--radius-img);
	overflow: hidden;
	aspect-ratio: 3/4;
	display: flex;
	align-items: flex-end;
	padding: 24px;
	color: #fff;
	background: #222 center/cover;
}
.priv-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.7) 100%);
}
.priv-card > * {
	position: relative;
	z-index: 1;
}
.priv-card .lbl {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.8;
}
.priv-card h3 {
	font-size: 22px;
	max-width: 9em;
	margin-top: 6px;
	font-weight: 600;
}
.priv-1 {
	background-image: none;
}
.priv-2 {
	background-image: none;
}
.priv-3 {
	background-image: none;
}
.priv-4 {
	background-image: none;
}

/* ============================================================
08 · GALLERY
============================================================ */
/* deprecated */
.gal-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 120px;
	gap: 16px;
}
.gal-item {
	position: relative;
	border-radius: var(--radius-img);
	overflow: hidden;
	background: #1f2530 center/cover;
	background-image: none;
}
.gal-tag {
	position: absolute;
	left: 16px;
	bottom: 16px;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	font-weight: 500;
}
/* Gallery — cohesive luxury aesthetic */
.g1 {
	grid-column: span 7;
	grid-row: span 4;
	background-image: none;
}
.g2 {
	grid-column: span 5;
	grid-row: span 2;
	background-image: none;
}
.g3 {
	grid-column: span 5;
	grid-row: span 2;
	background-image: none;
}
.g4 {
	grid-column: span 4;
	grid-row: span 3;
	background-image: none;
}
.g5 {
	grid-column: span 4;
	grid-row: span 3;
	background-image: none;
}
.g6 {
	grid-column: span 4;
	grid-row: span 3;
	background-image: none;
}

/* ============================================================
09 · INVESTMENT
============================================================ */
.invest {
	background: var(--ink-2);
	color: #fff;
	border-radius: var(--radius-card);
	margin: 0 var(--pad-x);
	padding: 96px 80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.invest-l .eyebrow {
	color: #9ca3af;
	margin-bottom: 24px;
}
.invest-l h2 {
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
	letter-spacing: -0.02em;
}
.invest-l p {
	margin-top: 24px;
	color: #c2c8d0;
	max-width: 480px;
	line-height: 1.6;
}
.invest-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.invest-stat .v {
	font-family: var(--font-display);
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}
.invest-stat .l {
	font-size: 13px;
	color: #9ca3af;
	margin-top: 12px;
	letter-spacing: 0.08em;
}

/* ============================================================
10 · FINANCE
============================================================ */
/* deprecated */
.fin-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 64px;
}
.fin-card {
	background: var(--bg-soft);
	border-radius: var(--radius-card);
	padding: 32px 28px;
	min-height: 240px;
	display: flex;
	flex-direction: column;
}
.fin-card .tag {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}
.fin-card h3 {
	font-size: 28px;
	font-weight: 600;
	margin-top: 14px;
}
.fin-card p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
	margin-top: 18px;
}
.fin-cta {
	margin-top: 36px;
	padding: 11px 18px;
	font-size: 13px;
	align-self: flex-start;
}
/* Inverted variant for dark highlight card */
.fin-card.highlight .fin-cta,
.fin-cta-light {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	transition: 0.2s;
}
.fin-card.highlight .fin-cta:hover,
.fin-cta-light:hover {
	background: #fff;
	color: var(--ink-2);
	border-color: #fff;
}
.fin-card.highlight {
	background: var(--ink-2);
	color: #fff;
}
.fin-card.highlight .tag,
.fin-card.highlight p {
	color: #9ca3af;
}

/* Calculator */
.calc {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 48px;
}
.calc-head {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 32px;
}
.calc-head h3 {
	font-size: 24px;
	font-weight: 600;
}
.calc-head p {
	color: var(--muted);
	font-size: 14px;
	max-width: 300px;
}
.calc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: end;
}
.calc-field label {
	display: block;
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}
.calc-field input[type="range"] {
	width: 100%;
	-webkit-appearance: none;
	height: 2px;
	background: var(--line);
	outline: none;
	border-radius: 2px;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ink-2);
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--ink-2);
}
.calc-field .val {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 8px;
}
.calc-bottom {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 20px;
	align-items: stretch;
	margin-top: 32px;
}
.calc-result {
	background: var(--bg-soft);
	border-radius: 16px;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.calc-result .l {
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.calc-result .v {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	margin-top: 8px;
	letter-spacing: -0.02em;
}
.calc-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--ink-2);
	color: #fff;
	border-radius: 16px;
	padding: 24px 28px;
	gap: 12px;
}
.calc-cta p {
	font-size: 13px;
	color: #c2c8d0;
	line-height: 1.5;
}
.calc-cta .btn {
	justify-content: center;
	background: #fff;
	color: var(--ink-2);
	padding: 14px 22px;
}
.calc-cta .btn:hover {
	background: #f4f5f7;
}

/* ============================================================
11 · PROCESS
============================================================ */
.process {
	background: var(--bg-cream);
}
/* deprecated */
.proc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
}
.proc-grid::before {
	content: "";
	position: absolute;
	top: 48px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: var(--slate-2);
	z-index: 0;
}
.proc-step {
	position: relative;
	z-index: 1;
	text-align: center;
}
.proc-step .num {
	width: 96px;
	height: 96px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 600;
	color: var(--ink-2);
}
.proc-step h3 {
	margin-top: 24px;
	font-size: 18px;
	font-weight: 600;
}
.proc-step p {
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
	max-width: 220px;
	margin-left: auto;
	margin-right: auto;
}
.proc-cta {
	text-align: center;
	margin-top: 56px;
}

/* ============================================================
12 · DEVELOPER
============================================================ */
.dev-grid {
	display: grid;
	grid-template-columns: 9fr 11fr;
	gap: 64px;
	align-items: center;
}
.dev-img {
	border-radius: var(--radius-img);
	aspect-ratio: 4/5;
	background: #1f2530 center/cover;
	background-image: none;
}
.dev-r .section-head {
	max-width: 520px;
}
.dev-r .section-head h2 {
	font-size: 42px;
}
.dev-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}
.dev-stat .v {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.dev-stat .l {
	font-size: 12px;
	color: var(--muted);
	margin-top: 6px;
}
.dev-docs {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.dev-docs a {
	font-size: 14px;
	color: var(--ink-2);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ============================================================
13 · FAQ
============================================================ */
.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	align-items: start;
}
.faq-l p {
	margin-top: 24px;
	color: var(--muted);
	max-width: 340px;
}
.faq-list {
	border-top: 1px solid var(--line);
}
.faq-item {
	border-bottom: 1px solid var(--line);
}
.faq-q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28px 0;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	text-align: left;
}
.faq-q .plus {
	font-size: 22px;
	font-weight: 300;
	transition: transform 0.2s;
}
.faq-item.open .faq-q .plus {
	transform: rotate(45deg);
}
.faq-a {
	max-height: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.6;
	transition:
		max-height 0.3s,
		padding 0.3s;
}
.faq-item.open .faq-a {
	max-height: 300px;
	padding-bottom: 24px;
}

/* ============================================================
14 · CTA FORM
============================================================ */
.cta-form {
	background: var(--ink-2);
	color: #fff;
	border-radius: var(--radius-card);
	/* margin: 0 var(--pad-x) 80px; */
	padding: 96px 80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.cta-form .eyebrow {
	color: #9ca3af;
	margin-bottom: 24px;
}
.cta-form h2 {
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
	letter-spacing: -0.02em;
}
.cta-form p {
	margin-top: 20px;
	color: #c2c8d0;
	max-width: 420px;
	line-height: 1.6;
}
.cta-meta {
	margin-top: 32px;
	font-size: 14px;
	color: #9ca3af;
}
.cta-meta > * + * {
	margin-top: 6px;
}

.form-card {
	background: #fff;
	color: var(--ink-2);
	border-radius: var(--radius-card);
	padding: 40px;
}
.form-card label {
	display: block;
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}
.form-card input[type="text"],
.form-card input[type="tel"] {
	width: 100%;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	font-family: inherit;
	font-size: 15px;
	margin-bottom: 20px;
}
.form-card input:focus {
	outline: none;
	border-color: var(--ink-2);
}
.form-card .check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--muted);
	margin: 8px 0 24px;
}
.form-card .check input {
	margin-top: 3px;
}
.form-card .btn {
	width: 100%;
	justify-content: center;
}

/* ============================================================
FOOTER
============================================================ */
.footer {
	padding: 80px 0 32px;
	border-top: 1px solid var(--line);
}
.foot-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
}
.foot-grid h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--muted);
	font-weight: 500;
	margin-bottom: 18px;
}
.foot-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.foot-grid li {
	margin-bottom: 10px;
	font-size: 14px;
}
.foot-grid a:hover {
	color: var(--ink-2);
}
.foot-brand .brand {
	font-size: 24px;
	letter-spacing: 0.3em;
	margin-bottom: 18px;
	display: block;
}
.foot-brand p {
	color: var(--muted);
	font-size: 14px;
	max-width: 300px;
	line-height: 1.6;
}
.foot-bottom {
	padding-top: 32px;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	color: var(--muted);
	font-size: 12px;
}
.foot-bottom a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
RESPONSIVE — TABLET ≤ 1199
============================================================ */
@media (max-width: 1199px) {
	:root {
		--pad-x: 48px;
		--section-y: 96px;
	}
	.nav {
		gap: 22px;
	}
	/* Tablet: hide full nav + phone, show burger */
}
@media (max-width: 1023px) {
	.nav,
	.phone {
		display: none;
	}
	.burger {
		display: flex;
	}
}
@media (max-width: 1199px) {
	.hero-grid {
		gap: 32px;
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.hero-left {
		gap: 36px;
	}
	.hero h1 {
		font-size: clamp(34px, 5vw, 52px);
		line-height: 1.08;
	}
	.hero-img {
		min-height: 420px;
		aspect-ratio: 16/10;
	}
	.hero-kpi {
		grid-template-columns: repeat(4, 1fr);
		gap: 0 16px;
		padding-top: 24px;
	}
	.hero-trust {
		margin-top: 0;
	}
	.section-head {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.section-head .h-r {
		justify-self: start;
		text-align: left;
	}
	/* Positioning tablet */
	.pos-spread {
		grid-template-columns: 1fr;
		gap: 48px;
		margin-bottom: 72px;
	}
	.pos-h {
		font-size: 48px;
	}
	.pos-image {
		aspect-ratio: 16/10;
	}
	.pos-promises {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 32px;
	}
	.promise:nth-child(2) .promise-divider {
		display: none;
	}
	.adv-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.arch-grid,
	.loc-grid,
	.dev-grid,
	.faq-grid,
	.invest,
	.cta-form {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.invest,
	.cta-form {
		padding: 64px 48px;
		margin: 0 var(--pad-x);
	}
	.invest-stats {
		grid-template-columns: repeat(3, 1fr);
	}
	.flat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.priv-scroll {
		grid-template-columns: repeat(2, 1fr);
	}
	.fin-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.proc-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 24px;
	}
	.proc-grid::before {
		display: none;
	}
	.calc-grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
	.calc-bottom {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.foot-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.priv-card {
		aspect-ratio: 4/5;
	}
	.dev-img {
		aspect-ratio: 1/1;
	}
}

/* ============================================================
RESPONSIVE — MOBILE ≤ 640
============================================================ */
@media (max-width: 640px) {
	:root {
		--pad-x: 20px;
		--section-y: 56px;
	}
	.site-header .container {
		height: 60px;
	}
	.nav,
	.phone {
		display: none;
	}
	.burger {
		display: flex;
	}
	.header-cta {
		padding: 10px 16px;
		font-size: 13px;
	}
	.header-right {
		gap: 10px;
	}

	/* Hero */
	.hero {
		padding-top: 110px;
		padding-bottom: 40px;
	}
	.hero-grid {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 32px;
		align-items: start;
	}
	.hero-left {
		gap: 28px;
	}
	.hero h1 {
		font-size: clamp(26px, 7.5vw, 44px);
		letter-spacing: -0.015em;
		margin-top: 18px;
		line-height: 1.1;
		word-break: normal;
		overflow-wrap: break-word;
	}
	.hero-sub {
		font-size: 14px;
		margin-top: 16px;
		line-height: 1.5;
	}
	.hero-cta {
		margin-top: 24px;
		gap: 10px;
		flex-direction: column;
		align-items: stretch;
	}
	.hero-cta .btn {
		justify-content: center;
		padding: 14px 18px;
		font-size: 14px;
		white-space: normal;
	}
	.hero-img {
		aspect-ratio: 4/3;
		border-radius: 14px;
		min-height: 0;
	}
	.hero-kpi {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 !important;
		/* padding-top: 18px; */
		/* gap: 0 16px; */
		/* border-top: 1px solid var(--line); */
	}
	.hero-kpi .kpi-cell {
		padding: 14px 12px 14px 0;
		margin: 0 !important;
	}
	.hero-kpi .kpi-cell:nth-child(even) {
		border-right: none;
		padding-left: 12px;
	}
	.hero-kpi .kpi-cell:nth-last-child(n + 3) {
		border-bottom: 1px solid var(--line);
	}

	/* .hero-kpi .kpi-cell:nth-child(2) { */
	/* border-right: 0; */
	/* } */
	/* .hero-kpi .kpi-cell:nth-child(1), */
	/* .hero-kpi .kpi-cell:nth-child(2) { */
	/* border-bottom: 1px solid var(--line); */
	/* }  */
	.kpi-cell .v {
		font-size: 20px;
	}
	.kpi-cell .l {
		font-size: 10px;
	}
	.hero-trust a {
		padding: 14px 0;
		font-size: 13px;
	}
	.hero-trust .lbl b {
		font-size: 14px;
	}
	.hero-trust .lbl span {
		font-size: 10px;
	}
	.hero-trust .arr-up {
		width: 30px;
		height: 30px;
		font-size: 12px;
	}

	/* Section heads — fully consistent on mobile */
	.section-head {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 32px;
	}
	.section-head h2 {
		font-size: 26px;
		margin-top: 10px;
		letter-spacing: -0.01em;
		line-height: 1.15;
	}
	.section-head .h-r {
		justify-self: start;
		text-align: left;
		font-size: 14px;
	}
	.section-head.center {
		text-align: left;
	}
	.section-head.center .h-l {
		margin: 0;
	}

	/* Positioning — editorial spread → stacked on mobile */
	.positioning {
		padding: 64px 0 56px;
	}
	.positioning::before {
		display: none;
	}
	.pos-head {
		margin-bottom: 40px;
		padding-bottom: 18px;
	}
	.pos-head-mark {
		font-size: 10px;
		letter-spacing: 0.24em;
	}
	.pos-head-mark::before,
	.pos-head-mark::after {
		width: 14px;
	}
	.pos-spread {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-bottom: 56px;
	}
	.pos-h {
		font-size: 30px;
		line-height: 1.1;
		margin-bottom: 28px;
	}
	.pos-quote {
		font-size: 14px;
		padding-left: 18px;
		margin-bottom: 24px;
	}
	.pos-author {
		font-size: 10px;
		letter-spacing: 0.14em;
	}
	.pos-image {
		aspect-ratio: 4/5;
		border-radius: 14px;
	}
	.pos-coords {
		top: 16px;
		left: 16px;
		font-size: 10px;
		padding: 8px 12px;
	}
	.pos-image-caption {
		left: 16px;
		right: 16px;
		bottom: 16px;
		font-size: 12px;
	}
	.pos-image-caption b {
		font-size: 13px;
	}
	.pos-image-caption span {
		font-size: 10px;
	}
	.pos-promises {
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
		padding-top: 40px;
	}
	.promise-num {
		font-size: 38px;
		margin-bottom: 12px;
	}
	.promise-num sup {
		font-size: 0.42em;
	}
	.promise-text {
		font-size: 13px;
		max-width: none;
	}
	.promise-divider {
		display: none;
	}
	.promise:nth-child(odd) .promise-divider {
		display: block;
		top: 0;
		right: -12px;
		height: 24px;
	}
	.promise:nth-child(2) .promise-divider,
	.promise:nth-child(4) .promise-divider {
		display: none;
	}

	/* Cards / images — less tall on mobile */
	.adv-grid,
	.flat-grid,
	.priv-scroll,
	.fin-grid {
		grid-template-columns: 1fr;
	}
	.adv-card {
		min-height: 0;
		padding: 28px 24px;
	}
	.adv-card h3 {
		font-size: 20px;
	}
	.arch-display {
		font-size: 64px;
		margin-bottom: 4px;
	}
	.arch-h {
		font-size: 26px;
	}
	.arch-imgs {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.arch-img,
	.arch-img.a {
		aspect-ratio: 1/1;
		border-radius: 12px;
	}
	.arch-img.b {
		aspect-ratio: 1/1;
	}
	.arch-meta {
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}

	/* Location */
	.loc-map {
		min-height: 280px;
	}
	.loc-timings {
		padding: 22px;
	}
	.chip {
		font-size: 12px;
		padding: 8px 12px;
	}

	/* Layouts */
	.flat-card .flat-plan {
		aspect-ratio: 16/10;
	}
	.flat-info {
		padding: 20px;
	}
	.lay-cta-wrap {
		margin-top: 32px;
		padding: 0 4px;
	}
	.lay-cta-wrap .btn {
		display: flex;
		justify-content: center;
		white-space: normal;
		text-align: center;
		padding: 14px 20px;
		font-size: 14px;
		max-width: 100%;
		line-height: 1.4;
	}

	/* Privileges — square instead of 3/4 portrait */
	.priv-card {
		aspect-ratio: 1/1;
		padding: 20px;
	}
	.priv-card h3 {
		font-size: 18px;
	}

	/* Gallery — compact rows */
	.gal-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 110px;
		gap: 10px;
	}
	.g1 {
		grid-column: span 2;
		grid-row: span 2;
	}
	.g2,
	.g3,
	.g4,
	.g5,
	.g6 {
		grid-column: span 1;
		grid-row: span 1;
	}

	/* Investment & CTA — edge to edge */
	.invest,
	.cta-form {
		margin: 0;
		border-radius: 0;
		padding: 56px 20px;
	}
	.invest-stats {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.invest-stat .v {
		font-size: 44px;
	}

	/* Finance */
	.fin-card {
		min-height: 0;
		padding: 24px 22px;
	}
	.fin-card h3 {
		font-size: 24px;
	}
	.calc {
		padding: 24px;
	}
	.calc-head h3 {
		font-size: 20px;
	}
	.calc-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.calc-bottom {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 24px;
	}
	.calc-result {
		padding: 20px;
	}
	.calc-result .v {
		font-size: 26px;
	}
	.calc-cta {
		padding: 20px;
	}
	.calc-cta .btn {
		padding: 13px 18px;
		font-size: 14px;
	}

	/* Process */
	.proc-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.proc-step .num {
		width: 72px;
		height: 72px;
		font-size: 24px;
	}
	.proc-step h3 {
		font-size: 17px;
		margin-top: 18px;
	}

	/* Developer */
	.dev-img {
		aspect-ratio: 4/3;
		border-radius: 14px;
	}
	.dev-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-top: 32px;
		padding-top: 24px;
	}
	.dev-stat .v {
		font-size: 26px;
	}

	/* FAQ */
	.faq-q {
		font-size: 15px;
		padding: 22px 0;
	}

	/* Form */
	.form-card {
		padding: 24px;
	}
	.cta-form h2 {
		font-size: 30px;
	}

	/* Footer */
	.foot-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-bottom: 32px;
	}
	.foot-bottom {
		flex-direction: column;
		text-align: left;
		font-size: 11px;
	}

	/* Tabs */
	.tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding: 10px 0;
		margin: 0 calc(var(--pad-x) * -1) 24px;
		padding-left: var(--pad-x);
		padding-right: var(--pad-x);
	}
	.tab {
		flex-shrink: 0;
		padding: 8px 14px;
		font-size: 13px;
	}

	/* Modal — bottom sheet on mobile */
	.modal {
		padding: 0;
		align-items: flex-end;
	}
	.modal-card {
		border-radius: 24px 24px 0 0;
		padding: 36px 22px 28px;
		max-width: none;
		max-height: 92vh;
		transform: translateY(100%);
	}
	.modal.open .modal-card {
		transform: translateY(0);
	}
	.modal-close {
		top: 14px;
		right: 14px;
		width: 32px;
		height: 32px;
		font-size: 16px;
	}
	.modal-title {
		font-size: 22px;
	}
	.modal-sub {
		font-size: 13px;
		margin-bottom: 24px;
	}
	.modal-form input {
		padding: 13px 14px;
		font-size: 14px;
		margin-bottom: 14px;
	}
	.modal-form .btn {
		padding: 14px 20px;
		font-size: 14px;
	}
	.modal-check {
		font-size: 11.5px;
		margin: 4px 0 18px;
	}
	/* drag handle hint on mobile */
	.modal-card::before {
		content: "";
		position: sticky;
		top: 0;
		display: block;
		width: 40px;
		height: 4px;
		background: var(--slate-2);
		border-radius: 2px;
		margin: -12px auto 18px;
	}
}

/* tablet modal tweaks */
@media (min-width: 641px) and (max-width: 1199px) {
	.modal-card {
		max-width: 480px;
		padding: 40px;
	}
}

/* Floating call button and cookie consent */
.floating-call {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1200;
}
.floating-call__button {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 18px 44px rgba(31, 37, 48, 0.28);
    overflow: visible;
}
.floating-call__button svg {
    position: relative;
    z-index: 2;
}
.floating-call__pulse {
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 1px solid rgba(31, 37, 48, 0.28);
    animation: floatingCallPulse 1.8s ease-out infinite;
}
@keyframes floatingCallPulse {
    0% {
        transform: scale(0.86);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}
.cookie-consent {
    position: fixed;
    left: 28px;
    right: 116px;
    bottom: 28px;
    z-index: 1190;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 760px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 50px rgba(10, 10, 10, 0.12);
    backdrop-filter: blur(14px);
}
.cookie-consent[hidden] {
    display: none;
}
.cookie-consent__text {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.45;
}
.cookie-consent__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.cookie-consent__link {
    color: var(--muted);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cookie-consent__button {
    padding: 12px 18px;
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
    font-size: 13px;
    font-weight: 600;
}
.policy-page {
    padding: 150px 0 110px;
    background: var(--bg-cream);
}
.policy-page__shell {
    max-width: 920px;
    margin: 0 auto;
    padding: 54px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(10, 10, 10, 0.08);
}
.policy-page h1 {
    margin-bottom: 18px;
    font-size: clamp(34px, 5vw, 64px);
}
.policy-page h2 {
    margin: 38px 0 14px;
    font-size: clamp(22px, 3vw, 32px);
}
.policy-page p,
.policy-page li {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.72;
}
.policy-page ul {
    padding-left: 20px;
}
.policy-page__lead {
    color: var(--muted);
    font-size: 18px;
}
@media (max-width: 760px) {
    .floating-call {
        right: 18px;
        bottom: 18px;
    }
    .floating-call__button {
        width: 58px;
        height: 58px;
    }
    .cookie-consent {
        left: 16px;
        right: 16px;
        bottom: 88px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }
    .cookie-consent__actions {
        width: 100%;
        justify-content: space-between;
    }
    .policy-page {
        padding: 110px 0 72px;
    }
    .policy-page__shell {
        padding: 30px 20px;
        border-radius: 22px;
    }
}