@charset "UTF-8";
/**
 * MyCorner — single stylesheet.
 *
 * Layer order is declared once, up front, so specificity stays predictable:
 * later layers always win regardless of selector weight.
 */
@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   FONTS — self-hosted, subset to Georgian + Latin (161 KB total)
   ========================================================================== */

@font-face {
	font-family: "FiraGO";
	src: url("../fonts/FiraGO-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "FiraGO";
	src: url("../fonts/FiraGO-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "FiraGO";
	src: url("../fonts/FiraGO-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "FiraGO";
	src: url("../fonts/FiraGO-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Contractica";
	src: url("../fonts/TBCContracticaCAPS-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Contractica";
	src: url("../fonts/TBCContracticaCAPS-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   RESET
   ========================================================================== */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	ul[class],
	ol[class] {
		list-style: none;
		padding: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	button {
		background: none;
		border: 0;
		cursor: pointer;
	}

	:focus-visible {
		outline: 2px solid var(--c-accent);
		outline-offset: 3px;
		border-radius: 4px;
	}
}

/* ==========================================================================
   TOKENS — extracted from the live brand
   ========================================================================== */

@layer tokens {
	:root {
		/* Brand */
		--c-accent: #d34c24;
		--c-accent-bright: #f95f34;
		--c-accent-ink: #fff;

		/* Neutrals */
		--c-ink: #141414;
		--c-ink-2: #2c2c2c;
		--c-body: #4a4a4a;
		--c-muted: #7c7c7c;
		--c-line: #e6e6e6;
		--c-surface: #fff;
		--c-surface-2: #f6f4f2;
		--c-dark: #171310;
		--c-dark-2: #221c18;
		--c-on-dark: #f3efec;
		--c-on-dark-muted: #a9a29c;

		/* Type */
		--font-body: "FiraGO", system-ui, -apple-system, "Segoe UI", sans-serif;
		--font-display: "Contractica", var(--font-body);

		--fs-xs: 0.75rem;
		--fs-sm: 0.875rem;
		--fs-base: 1rem;
		--fs-md: clamp(1.0625rem, 0.4vw + 0.95rem, 1.125rem);
		--fs-lg: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
		--fs-xl: clamp(1.5rem, 1.4vw + 1.15rem, 2rem);
		--fs-2xl: clamp(1.875rem, 2.4vw + 1.3rem, 2.75rem);
		--fs-3xl: clamp(2.25rem, 4vw + 1.2rem, 4rem);
		--fs-hero: clamp(2.5rem, 5.5vw + 1rem, 5rem);

		--lh-tight: 1.1;
		--lh-snug: 1.25;
		--lh-normal: 1.6;

		/* Space — 4px base */
		--s-1: 0.25rem;
		--s-2: 0.5rem;
		--s-3: 0.75rem;
		--s-4: 1rem;
		--s-5: 1.5rem;
		--s-6: 2rem;
		--s-7: 3rem;
		--s-8: 4rem;
		--s-9: 6rem;
		--s-10: 8rem;

		/* Shape */
		--r-sm: 8px;
		--r-md: 12px;
		--r-lg: 20px;
		--r-xl: 32px;
		--r-pill: 999px;

		--shadow-sm: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
		--shadow-md: 0 4px 16px rgb(0 0 0 / 8%);
		--shadow-lg: 0 12px 40px rgb(0 0 0 / 12%);

		/* Layout */
		--wrap: 1320px;
		--wrap-narrow: 820px;
		--gutter: clamp(1rem, 4vw, 3rem);

		/* Header. --header-h is the settled bar: every page offset keys off it.
		   --header-h-top is the taller, chrome-less state over a hero. */
		--header-h: 74px;
		--header-h-top: 96px;

		--hero-radius: 48px;
		--logo-h: 18px;
		--logo-h-top: 21px;

		/* Glass — one recipe, used by the bar, the mega panel and the sheet. */
		--glass-bg: rgb(255 255 255 / 74%);
		--glass-bg-strong: rgb(250 248 246 / 78%);
		--glass-blur: saturate(160%) blur(44px);
		--glass-line: rgb(255 255 255 / 60%);
		--glass-shadow: 0 30px 70px -28px rgb(30 18 12 / 34%), 0 2px 10px rgb(30 18 12 / 5%);
		--sheet-bg: rgb(250 248 246 / 78%);

		--z-header: 100;
		--z-sheet: 95;

		/* Motion — one duration/easing vocabulary for the whole site */
		--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
		--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
		--ease-in: cubic-bezier(0.4, 0, 1, 1);
		--t-fast: 180ms;
		--t-base: 320ms;
		--t-slow: 600ms;
		--reveal-distance: 28px;
	}
}

/* ==========================================================================
   BASE
   ========================================================================== */

@layer base {
	html {
		/* Lenis drives scrolling; native smooth would fight it. */
		scroll-behavior: auto;
		scroll-padding-block-start: calc(var(--header-h) + var(--s-4));
	}

	body {
		font-family: var(--font-body);
		font-size: var(--fs-md);
		line-height: var(--lh-normal);
		color: var(--c-body);
		background: var(--c-surface);
		overflow-x: hidden;
	}

	/* `overflow-x: hidden` makes body a scroll container, and a scroll
	   container between a sticky element and the viewport silently stops it
	   sticking — which is why the property rail scrolled away with the page.
	   `clip` clips the same overflow without scrolling anything. */
	@supports (overflow: clip) {
		body {
			overflow-x: clip;
		}
	}

	h1,
	h2,
	h3,
	h4 {
		color: var(--c-ink);
		line-height: var(--lh-tight);
		font-weight: 700;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--fs-3xl);
	}
	h2 {
		font-size: var(--fs-2xl);
	}
	h3 {
		font-size: var(--fs-xl);
	}
	h4 {
		font-size: var(--fs-lg);
	}

	p {
		text-wrap: pretty;
	}

	a:hover {
		color: var(--c-accent);
	}

	::selection {
		background: var(--c-accent);
		color: #fff;
	}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

@layer layout {
	.wrap {
		width: min(100% - var(--gutter) * 2, var(--wrap));
		margin-inline: auto;
	}

	.wrap-narrow {
		width: min(100% - var(--gutter) * 2, var(--wrap-narrow));
		margin-inline: auto;
	}

	/* Full-width variant: keeps the page gutter so nothing touches the edge,
	   but drops the --wrap cap so the block runs the width of the viewport
	   instead of stopping at 1320px. */
	.wrap--full {
		width: calc(100% - var(--gutter) * 2);
		max-width: none;
	}

	.section {
		padding-block: clamp(3rem, 7vw, 6rem);
	}

	/* Where the header does not float over a hero it needs clearing once,
	   here, instead of in every template's inline style. */
	body.has-solid-header #main {
		padding-block-start: var(--header-h);
	}

	.property-gallery {
		padding-block-start: var(--s-5);
	}

	.section-sm {
		padding-block: clamp(2rem, 4vw, 3.5rem);
	}

	.section--dark {
		background: var(--c-dark);
		color: var(--c-on-dark);
	}

	.section--dark h1,
	.section--dark h2,
	.section--dark h3,
	.section--dark h4 {
		color: var(--c-on-dark);
	}

	.section--tint {
		background: var(--c-surface-2);
	}

	.grid {
		display: grid;
		gap: clamp(var(--s-6), 3vw, var(--s-7)) var(--s-5);
	}

	.grid-3 {
		grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	}

	/* auto-fit, not auto-fill: auto-fill keeps the empty tracks it generated,
	   so four cards in a five-track row stopped short of the right edge.
	   auto-fit collapses the spares and the cards stretch to fill. */
	.grid-4 {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	}

	.grid-2 {
		grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	}

	.stack > * + * {
		margin-block-start: var(--flow, var(--s-4));
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
		align-items: center;
	}

	.split {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-4);
		align-items: center;
		justify-content: space-between;
	}
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

@layer components {
	/* --- Section heading ------------------------------------------------ */

	/* Its own 1.6 leading already puts ~4px under the glyphs and the heading
	   ~3px above its own, so an eyebrow with no margin reads as glued to the
	   title it introduces. This lands at ~20px optical, everywhere. */
	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--c-body);
		text-transform: none;
		margin-block-end: clamp(0.625rem, 1.4vh, 0.875rem);
	}

	.eyebrow::before {
		content: "";
		width: 10px;
		height: 10px;
		background: var(--c-accent);
		flex: none;
	}

	.section--dark .eyebrow {
		color: var(--c-on-dark-muted);
	}

	.display {
		font-family: var(--font-display);
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	/* Article headline. The hero scale is built for full-width heroes and
	   shouts inside the narrow reading column, so titles step down a level. */
	.display--article {
		font-size: var(--fs-2xl);
	}

	/* --- Buttons -------------------------------------------------------- */

	/* One control height for every button on the site. An arrow-bearing button
	   is sized by its 2rem disc, a text-only one by nothing at all — so the
	   height is pinned here rather than left to whichever happens to be
	   taller, and the arrow is pulled toward the edge with a negative margin
	   instead of a second padding rule. */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--s-3);
		min-block-size: 2.75rem;
		padding: 0.375rem 1.15rem;
		border-radius: var(--r-pill);
		font-weight: 600;
		font-size: var(--fs-sm);
		line-height: 1.2;
		transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
			border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
	}

	.btn:active {
		transform: translateY(1px);
	}

	.btn--primary {
		background: var(--c-accent);
		color: var(--c-accent-ink);
	}

	.btn--primary:hover {
		background: var(--c-accent-bright);
		color: var(--c-accent-ink);
	}

	.btn--ghost {
		border: 1px solid currentcolor;
		color: inherit;
	}

	.btn--ghost:hover {
		background: var(--c-ink);
		color: #fff;
		border-color: var(--c-ink);
	}

	.section--dark .btn--ghost:hover {
		background: #fff;
		color: var(--c-ink);
		border-color: #fff;
	}

	.btn--light {
		background: #fff;
		color: var(--c-ink);
	}

	/* Circular arrow that trails a button — the brand's signature CTA. */
	.btn__arrow {
		width: 2rem;
		height: 2rem;
		margin-inline-end: -0.7rem;
		border-radius: 50%;
		background: var(--c-accent);
		color: #fff;
		display: grid;
		place-items: center;
		flex: none;
		transition: transform var(--t-base) var(--ease);
	}

	.btn--primary .btn__arrow {
		background: #fff;
		color: var(--c-accent);
	}

	/* The glyph points north-east at rest; 45° clockwise lands it due east.
	   Rotating the mark reads as the button aiming somewhere, where nudging
	   the whole disc two pixels just looked loose. */
	.btn__arrow svg {
		transition: rotate var(--t-base) var(--ease-out);
	}

	.btn:hover .btn__arrow svg,
	a:hover > .btn__arrow svg {
		rotate: 45deg;
	}

	.btn__arrow svg {
		width: 1.05em;
		height: 1.05em;
	}

	/* --- Header ---------------------------------------------------------
	   One element, two states. `top` floats transparently over a hero;
	   `solid` is the glass bar. Every difference between them — height, logo
	   size, ink, glass — is a transition on the same easing and duration, so
	   the change reads as a single movement instead of five separate ones.
	   -------------------------------------------------------------------- */

	/* Nothing on .site-header may create a stacking context: it would become
	   the backdrop root for the bar and the mega panel, and their
	   backdrop-filter would then sample an empty backdrop and blur nothing at
	   all. That is why the entrance animation lives on the inner row and the
	   hide transform on the bar, not here. */
	.site-header {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: var(--z-header);

		/* Defaults are the solid (on-glass) set; `top` overrides them below. */
		--bar-h: var(--header-h);
		--logo-size: var(--logo-h);
		--nav-ink: var(--c-ink-2);
		--nav-ink-strong: var(--c-ink);
		--nav-ink-current: var(--c-accent);
		--nav-hover-bg: rgb(20 16 12 / 6%);
		--logo-ink: var(--c-accent);
		--langs-track: rgb(20 16 12 / 6%);
		--langs-thumb: #fff;
		--langs-ink: var(--c-muted);
		--langs-ink-strong: var(--c-ink);
		--langs-ink-active: var(--c-ink);

	}

	@keyframes myc-header-in {
		from {
			opacity: 0;
			translate: 0 -101%;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	.site-header__bar {
		position: relative;
		z-index: 2;
		border-block-end: 1px solid transparent;
		transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
			box-shadow var(--t-base) var(--ease), backdrop-filter var(--t-base) var(--ease),
			transform var(--t-base) var(--ease);
	}

	/* Hide on scroll-down, reveal on scroll-up. Suspended while any panel is
	   open — a menu that walks off the top of the screen is a trap. */
	.site-header[data-hidden="true"] .site-header__bar {
		transform: translateY(calc(-100% - 12px));
	}

	/* Entrance runs once on load, on the row rather than the header, so the
	   fill state cannot cost the bar its blur. */
	.site-header__inner {
		animation: myc-header-in 620ms var(--ease-out) 60ms both;
	}

	.site-header[data-state="solid"] .site-header__bar,
	.site-header[data-mega-open="true"] .site-header__bar {
		background: var(--glass-bg);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
		border-block-end-color: rgb(20 16 12 / 7%);
		/* Drop shadow removed — the archive bar below casts it now. The inset
		   line stays: it is the glass edge highlight, not a shadow. */
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%);
	}

	/* The open mobile sheet already supplies the glass; the bar just sits on it. */
	html[data-nav-open="true"] .site-header__bar {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-block-end-color: transparent;
		box-shadow: none;
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: clamp(var(--s-4), 2.2vw, var(--s-7));
		block-size: var(--bar-h);
		transition: block-size var(--t-base) var(--ease);
	}

	/* Floating over a hero: no chrome, taller, light ink. */
	.site-header[data-state="top"] {
		--bar-h: var(--header-h-top);
		--logo-size: var(--logo-h-top);
		--nav-ink: rgb(255 255 255 / 82%);
		--nav-ink-strong: #fff;
		--nav-ink-current: #fff;
		--nav-hover-bg: rgb(255 255 255 / 16%);
		--logo-ink: #fff;
		--langs-track: rgb(255 255 255 / 16%);
		--langs-thumb: rgb(255 255 255 / 92%);
		--langs-ink: rgb(255 255 255 / 72%);
		--langs-ink-strong: #fff;
		--langs-ink-active: var(--c-ink);
	}

	/* …but the moment a panel puts light glass behind the bar, the ink has to
	   go back to dark or the whole header disappears into it. */
	.site-header[data-state="top"][data-mega-open="true"],
	html[data-nav-open="true"] .site-header[data-state="top"] {
		--nav-ink: var(--c-ink-2);
		--nav-ink-strong: var(--c-ink);
		--nav-ink-current: var(--c-accent);
		--nav-hover-bg: rgb(20 16 12 / 6%);
		--logo-ink: var(--c-accent);
		--langs-track: rgb(20 16 12 / 6%);
		--langs-thumb: #fff;
		--langs-ink: var(--c-muted);
		--langs-ink-strong: var(--c-ink);
		--langs-ink-active: var(--c-ink);
	}

	/* --- Brand mark ------------------------------------------------------
	   Painted through a mask rather than shown as an image, so the wordmark
	   can cross-fade between white on the hero and brand orange on glass.
	   Browsers without masking get the artwork itself, in its own colour.
	   -------------------------------------------------------------------- */

	.brand {
		flex: none;
		display: inline-flex;
		align-items: center;
	}

	.brand__mark {
		display: block;
		block-size: var(--logo-size, 18px);
		/* 1920 × 176 artwork; the ratio keeps the box exact at any height. */
		inline-size: calc(var(--logo-size, 18px) * 10.909);
		background: url("../img/logo.webp") left center / contain no-repeat;
		transition: block-size var(--t-base) var(--ease), inline-size var(--t-base) var(--ease),
			background-color var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
	}

	@supports (mask-image: url("../img/logo.webp")) or (-webkit-mask-image: url("../img/logo.webp")) {
		.brand__mark {
			background: var(--logo-ink, var(--c-accent));
			-webkit-mask: url("../img/logo.webp") left center / contain no-repeat;
			mask: url("../img/logo.webp") left center / contain no-repeat;
		}
	}

	.brand:hover .brand__mark {
		opacity: 0.82;
	}

	.brand:active .brand__mark {
		opacity: 0.68;
	}

	.brand--footer {
		--logo-size: 22px;
		--logo-ink: #fff;
	}

	/* --- Primary navigation ---------------------------------------------- */

	.pnav {
		position: relative;
		display: flex;
		align-items: center;
	}

	.pnav__list {
		display: flex;
		align-items: center;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Static, not relative: the mega panel is positioned against the header so
	   it can span the full wrap instead of hanging off one item. */
	.pnav__item {
		position: static;
	}

	.pnav__link {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 14px;
		border-radius: var(--r-pill);
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		color: var(--nav-ink);
		transition: color var(--t-base) var(--ease);
	}

	.pnav__link > span,
	.pnav__chev {
		position: relative;
		z-index: 1;
	}

	.pnav__link:hover,
	.pnav__link[aria-expanded="true"] {
		color: var(--nav-ink-strong);
	}

	.pnav__link.is-current {
		color: var(--nav-ink-current);
		font-weight: 600;
	}

	.pnav__chev {
		width: 12px;
		height: 12px;
		flex: none;
		opacity: 0.6;
		transition: rotate var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
	}

	.pnav__link[aria-expanded="true"] .pnav__chev {
		rotate: 180deg;
		opacity: 1;
	}

	/* No-JS fallback: each link paints its own hover pill. */
	.pnav__link::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--nav-hover-bg);
		opacity: 0;
		scale: 0.9;
		transition: opacity var(--t-base) var(--ease), scale var(--t-base) var(--ease-out);
	}

	.pnav__link:hover::before {
		opacity: 1;
		scale: 1;
	}

	/* With JS a single pill slides between items instead, so the per-link one
	   is switched off to avoid two pills fading over each other. */
	.pnav.has-magic .pnav__link::before {
		display: none;
	}

	.pnav__pill {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		height: 36px;
		width: var(--pill-w, 0);
		border-radius: var(--r-pill);
		background: var(--nav-hover-bg);
		opacity: 0;
		pointer-events: none;
		translate: var(--pill-x, 0) -50%;
		transition: translate 420ms var(--ease-out), width 420ms var(--ease-out),
			opacity 200ms var(--ease), background var(--t-base) var(--ease);
	}

	.pnav.is-hovering .pnav__pill {
		opacity: 1;
	}

	/* --- Header actions --------------------------------------------------- */

	.site-header__actions {
		flex: none;
		display: flex;
		align-items: center;
		gap: var(--s-3);
	}

	/* --- Language switcher ------------------------------------------------
	   The thumb is placed from --lang-i in the markup, not measured in JS, so
	   it is already in the right slot on the first paint.
	   -------------------------------------------------------------------- */

	.langs {
		position: relative;
		display: grid;
		grid-template-columns: repeat(var(--lang-n, 2), minmax(0, 1fr));
		align-items: center;
		padding: 3px;
		border-radius: var(--r-pill);
		background: var(--langs-track);
		transition: background var(--t-base) var(--ease);
	}

	.langs__thumb {
		position: absolute;
		inset-block: 3px;
		inset-inline-start: 3px;
		width: calc((100% - 6px) / var(--lang-n, 2));
		border-radius: var(--r-pill);
		background: var(--langs-thumb);
		box-shadow: 0 1px 3px rgb(20 16 12 / 14%);
		translate: calc(var(--lang-i, 0) * 100%) 0;
		transition: translate 420ms var(--ease-out), background var(--t-base) var(--ease);
	}

	.langs__item {
		position: relative;
		z-index: 1;
		padding: 6px 10px;
		text-align: center;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.07em;
		line-height: 1;
		color: var(--langs-ink);
		transition: color var(--t-base) var(--ease);
	}

	.langs__item:hover {
		color: var(--langs-ink-strong);
	}

	.langs__item.is-active {
		color: var(--langs-ink-active);
	}

	/* --- Burger ----------------------------------------------------------
	   Two lines, unequal at rest, that close the gap and then rotate into an
	   X. Splitting `translate` and `rotate` onto separate properties lets the
	   two halves run in sequence — and the order flips on close, so it
	   un-rotates before it separates.
	   -------------------------------------------------------------------- */

	.burger {
		display: none;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		place-items: center;
		color: var(--nav-ink-strong);
		background: var(--nav-hover-bg);
		transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
	}

	.burger__lines {
		display: block;
		position: relative;
		width: 20px;
		height: 12px;
	}

	.burger__lines i {
		position: absolute;
		inset-inline-start: 0;
		height: 1.75px;
		border-radius: 2px;
		background: currentcolor;
		/* Closing: un-rotate first, then push the lines apart. */
		transition: rotate 200ms var(--ease-out), translate 240ms var(--ease-out) 140ms,
			width 240ms var(--ease-out) 140ms;
	}

	.burger__lines i:nth-child(1) {
		inset-block-start: 0;
		width: 100%;
	}

	.burger__lines i:nth-child(2) {
		inset-block-end: 0;
		width: 62%;
	}

	html[data-nav-open="true"] .burger__lines i {
		width: 100%;
		/* Opening: close the gap first, then rotate. */
		transition: translate 200ms var(--ease-out), width 200ms var(--ease-out),
			rotate 260ms var(--ease-out) 150ms;
	}

	html[data-nav-open="true"] .burger__lines i:nth-child(1) {
		translate: 0 5.1px;
		rotate: 45deg;
	}

	html[data-nav-open="true"] .burger__lines i:nth-child(2) {
		translate: 0 -5.1px;
		rotate: -45deg;
	}

	/* --- Mega panel ------------------------------------------------------- */

	.mega {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		z-index: 1;
		/* Bridges the gap under the bar so a diagonal pointer never falls
		   through it on the way to the panel. */
		padding-block-start: 6px;
		/* Visibility only. An opacity below 1 here would make .mega the panel's
		   backdrop root mid-transition and strip the blur off the fade; the
		   panel fades itself instead, where its own opacity is applied after
		   its backdrop-filter. */
		visibility: hidden;
		pointer-events: none;
		transition: visibility 200ms;
	}

	.site-header[data-mega-open="true"] .mega {
		visibility: visible;
		pointer-events: auto;
	}

	/* Width and offset are measured from .pnav in app.js, so the panel is
	   exactly as wide as the row of links it belongs to and lines up under
	   them. The fallback keeps it sane if the measurement never runs. */
	.mega__panel {
		width: var(--mega-width, min(100% - var(--gutter) * 2, 660px));
		margin-inline-start: var(--mega-left, auto);
		margin-inline-end: auto;
		padding: clamp(var(--s-5), 2vw, var(--s-6));
		border-radius: var(--r-xl);
		background: var(--glass-bg-strong);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
		border: 1px solid var(--glass-line);
		box-shadow: var(--glass-shadow);
		transform-origin: top center;
		opacity: 0;
		translate: 0 -10px;
		scale: 0.985;
		/* Exits are quicker than entrances — a slow close feels like lag. */
		transition: opacity 180ms var(--ease-in), translate 180ms var(--ease-in),
			scale 180ms var(--ease-in);
	}

	.site-header[data-mega-open="true"] .mega__panel {
		opacity: 1;
		translate: 0 0;
		scale: 1;
		transition: opacity 400ms var(--ease-out), translate 480ms var(--ease-out),
			scale 480ms var(--ease-out);
	}

	/* Types and the catalogue side by side. The panel is widened past the nav
	   row in app.js to make room — clamped to the page grid so it can never
	   escape it. */
	.mega__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.44fr);
		gap: clamp(var(--s-5), 2.2vw, var(--s-7));
		align-items: stretch;
	}

	.mega__label {
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--c-muted);
		margin-block-end: var(--s-4);
	}

	/* Contents cascade in behind the panel, one short step apart. */
	.mega__types-col > .mega__label,
	.mega__types > li,
	.mega__feature,
	.mega__foot {
		opacity: 0;
		translate: 0 10px;
		transition: opacity 150ms var(--ease-in), translate 150ms var(--ease-in);
	}

	.site-header[data-mega-open="true"] :is(.mega__types-col > .mega__label, .mega__types > li, .mega__feature, .mega__foot) {
		opacity: 1;
		translate: 0 0;
		transition: opacity 440ms var(--ease-out) calc(var(--i, 0) * 26ms + 80ms),
			translate 520ms var(--ease-out) calc(var(--i, 0) * 26ms + 80ms);
	}

	.mega__types {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
		gap: 2px clamp(var(--s-3), 1.2vw, var(--s-4));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tcard {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		padding: 11px 13px;
		border-radius: var(--r-md);
		transition: background var(--t-base) var(--ease);
	}

	.tcard:hover {
		background: rgb(20 16 12 / 5%);
	}

	.tcard__icon {
		flex: none;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 11px;
		background: rgb(211 76 36 / 10%);
		color: var(--c-accent);
		transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
			scale var(--t-base) var(--ease-out);
	}

	.tcard__icon svg {
		width: 19px;
		height: 19px;
	}

	.tcard:hover .tcard__icon {
		background: var(--c-accent);
		color: #fff;
		scale: 1.06;
	}

	/* With an illustration the tinted disc goes: the artwork carries its own
	   ground and its own shadow, so a second container around it reads as a
	   sticker on a badge. Only cards that actually have art take this. */
	.tcard--art .tcard__icon {
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 0;
		background: none;
		transition: scale var(--t-base) var(--ease-out);
	}

	.tcard--art:hover .tcard__icon {
		background: none;
		scale: 1.07;
	}

	.tcard__icon img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.tcard__text {
		display: grid;
		gap: 1px;
		min-width: 0;
	}

	.tcard__name {
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.3;
		color: var(--c-ink);
	}

	.tcard__meta {
		font-size: var(--fs-xs);
		line-height: 1.3;
		color: var(--c-muted);
	}

	.tcard__go {
		margin-inline-start: auto;
		display: grid;
		place-items: center;
		color: var(--c-muted);
		opacity: 0;
		translate: -6px 0;
		transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease-out);
	}

	.tcard__go svg {
		width: 16px;
		height: 16px;
	}

	.tcard:hover .tcard__go {
		opacity: 1;
		translate: 0 0;
	}

	.mega__feature {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: flex-end;
		gap: var(--s-4);
		/* A floor, not a height: as a grid item it stretches to whatever the
		   type list beside it needs. */
		min-height: 15rem;
		padding: var(--s-5);
		border-radius: var(--r-lg);
		overflow: hidden;
		color: #fff;
	}

	.mega__feature-media {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.mega__feature-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: scale 900ms var(--ease-out);
	}

	.mega__feature::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, rgb(12 8 6 / 8%) 0%, rgb(12 8 6 / 74%) 100%);
	}

	.mega__feature:hover .mega__feature-media img {
		scale: 1.06;
	}

	.mega__feature-body {
		display: grid;
		gap: 2px;
		min-width: 0;
	}

	.mega__feature-title {
		font-family: var(--font-display);
		font-size: var(--fs-lg);
		line-height: 1.1;
	}

	.mega__feature-meta {
		font-size: var(--fs-sm);
		color: rgb(255 255 255 / 76%);
	}

	.mega__feature-go {
		flex: none;
		margin-inline-start: auto;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: rgb(255 255 255 / 18%);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		transition: background var(--t-base) var(--ease), translate var(--t-base) var(--ease-out);
	}

	.mega__feature-go svg {
		width: 16px;
		height: 16px;
	}

	.mega__feature:hover .mega__feature-go {
		background: var(--c-accent);
	}

	.mega__feature-go svg {
		transition: rotate var(--t-base) var(--ease-out);
	}

	.mega__feature:hover .mega__feature-go svg {
		rotate: 45deg;
	}

	.mega__foot {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--s-3) var(--s-4);
		margin-block-start: var(--s-5);
		padding-block-start: var(--s-5);
		border-block-start: 1px solid rgb(20 16 12 / 8%);
	}

	.mega__foot .mega__label {
		margin: 0;
	}

	.mega__deals {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2);
	}

	.mega__deal {
		padding: 7px 14px;
		border-radius: var(--r-pill);
		border: 1px solid rgb(20 16 12 / 12%);
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--c-ink-2);
		transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
			border-color var(--t-base) var(--ease);
	}

	.mega__deal:hover {
		background: var(--c-ink);
		border-color: var(--c-ink);
		color: #fff;
	}

	.mega__all {
		margin-inline-start: auto;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--c-accent);
	}

	.mega__all svg {
		width: 16px;
		height: 16px;
		transition: translate var(--t-base) var(--ease-out);
	}

	.mega__all:hover svg {
		translate: 4px 0;
	}

	/* --- Scrim ------------------------------------------------------------ */

	.nav-scrim {
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgb(18 12 8 / 32%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 300ms var(--ease), visibility 300ms;
	}

	html[data-mega-open="true"] .nav-scrim {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* --- Mobile sheet -----------------------------------------------------
	   Sits *under* the header bar, so the logo, language switcher and burger
	   stay put and stay clickable while it is open.
	   -------------------------------------------------------------------- */

	.mnav {
		position: fixed;
		inset: 0;
		z-index: var(--z-sheet);
		background: var(--sheet-bg);
		-webkit-backdrop-filter: saturate(160%) blur(44px);
		backdrop-filter: saturate(160%) blur(44px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 260ms var(--ease-in), visibility 260ms;
	}

	html[data-nav-open="true"] .mnav {
		opacity: 1;
		visibility: visible;
		transition: opacity 360ms var(--ease-out), visibility 360ms;
	}

	.mnav__scroll {
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding-block: calc(var(--header-h-top) + var(--s-5)) var(--s-7);
	}

	.mnav__inner {
		width: min(100% - var(--gutter) * 2, 760px);
	}

	.mnav__label,
	.mnav__main > li,
	.mnav__foot {
		opacity: 0;
		translate: 0 22px;
		transition: opacity 180ms var(--ease-in), translate 180ms var(--ease-in);
	}

	html[data-nav-open="true"] :is(.mnav__label, .mnav__main > li, .mnav__foot) {
		opacity: 1;
		translate: 0 0;
		transition: opacity 520ms var(--ease-out) calc(var(--i, 0) * 55ms + 110ms),
			translate 620ms var(--ease-out) calc(var(--i, 0) * 55ms + 110ms);
	}

	.mnav__label {
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--c-muted);
		margin-block-end: var(--s-2);
	}

	.mnav__label a {
		color: inherit;
	}

	.mnav__label a:hover {
		color: var(--c-accent);
	}

	.mnav__main {
		list-style: none;
		margin: 0 0 var(--s-7);
		padding: 0;
	}

	/* The last row's rule would otherwise float above the CTA with nothing
	   under it. */
	.mnav__main:last-of-type > li:last-child {
		border-block-end: 0;
	}

	.mnav__main > li {
		border-block-end: 1px solid rgb(20 16 12 / 9%);
	}

	.mrow {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--s-4);
		padding-block: clamp(0.95rem, 3vw, 1.3rem);
	}

	.mrow__n {
		flex: none;
		width: 1.6rem;
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		font-variant-numeric: tabular-nums;
		color: rgb(20 16 12 / 26%);
		transition: color var(--t-base) var(--ease);
	}

	.mrow__label {
		font-family: var(--font-display);
		font-size: clamp(1.05rem, 4.4vw, 1.35rem);
		line-height: 1.05;
		color: var(--c-ink);
		transition: translate var(--t-base) var(--ease-out), color var(--t-base) var(--ease);
	}

	.mrow__go {
		margin-inline-start: auto;
		color: var(--c-muted);
		transition: translate var(--t-base) var(--ease-out), color var(--t-base) var(--ease);
	}

	.mrow__go svg {
		width: 20px;
		height: 20px;
	}

	.mrow:hover .mrow__label,
	.mrow:active .mrow__label {
		translate: 6px 0;
		color: var(--c-accent);
	}

	.mrow:hover .mrow__go,
	.mrow:active .mrow__go {
		translate: 4px 0;
		color: var(--c-accent);
	}

	.mrow.is-current .mrow__label,
	.mrow.is-current .mrow__n {
		color: var(--c-accent);
	}

	/* The mega panel's content, reachable without the hover it can never get.
	   Plain indented links, not cards: boxed chips under a boxed page list
	   under a boxed button gave the sheet three competing container styles
	   and no clear hierarchy. */
	/* Two columns of illustrated types, standing in for the row that used to
	   open the desktop mega menu. */
	.mtypes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-2);
		margin: 0 0 var(--s-5);
		padding: 0;
		list-style: none;
	}

	.mtype {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		padding: var(--s-2);
		border-radius: var(--r-md);
		background: rgb(20 16 12 / 4%);
		transition: background var(--t-fast) var(--ease);
	}

	.mtype:hover {
		background: rgb(20 16 12 / 8%);
	}

	.mtype__art {
		flex: none;
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		color: var(--c-accent);
	}

	.mtype__art img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.mtype__art svg {
		width: 20px;
		height: 20px;
	}

	.mtype__text {
		display: grid;
		gap: 1px;
		min-width: 0;
	}

	.mtype__name {
		font-size: var(--fs-sm);
		font-weight: 600;
		line-height: 1.25;
		color: var(--c-ink);
	}

	.mtype__n {
		font-size: var(--fs-xs);
		line-height: 1.25;
		color: var(--c-muted);
	}

	.mnav__chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px clamp(var(--s-4), 4vw, var(--s-6));
		list-style: none;
		margin: 0 0 var(--s-4);
		padding-inline-start: calc(1.6rem + var(--s-4));
	}

	.mchip {
		display: flex;
		align-items: baseline;
		gap: var(--s-3);
		padding-block: 7px;
		font-size: var(--fs-base);
		color: var(--c-body);
		transition: color var(--t-base) var(--ease);
	}

	.mchip__name {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mchip__n {
		margin-inline-start: auto;
		font-size: var(--fs-xs);
		font-variant-numeric: tabular-nums;
		color: var(--c-muted);
	}

	.mchip:hover,
	.mchip:active {
		color: var(--c-accent);
	}

	.mnav__foot {
		display: grid;
		gap: var(--s-4);
		justify-items: start;
	}

	.mnav__cta {
		width: 100%;
		justify-content: space-between;
	}

	.mnav__contact {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2) var(--s-5);
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	.mnav__contact a {
		transition: color var(--t-base) var(--ease);
	}

	.mnav__contact a:hover {
		color: var(--c-accent);
	}

	/* Promoting the two static pages to full rows added ~110px, which pushed
	   the CTA under the fold on the shorter phones still in wide use. The
	   sheet tightens by viewport height rather than width — this is a vertical
	   problem, and a 390x844 handset needs none of it. */
	@media (max-height: 830px) {
		.mnav__scroll {
			padding-block-end: var(--s-6);
		}

		.mnav__main {
			margin-block-end: var(--s-6);
		}

		.mrow {
			padding-block: 0.85rem;
		}
	}

	@media (max-height: 700px) {
		.mnav__scroll {
			padding-block: calc(var(--header-h-top) + var(--s-3)) var(--s-5);
		}

		.mnav__label {
			margin-block-end: 2px;
		}

		.mnav__main {
			margin-block-end: var(--s-4);
		}

		.mrow {
			padding-block: 0.6rem;
		}

		.mrow__label {
			font-size: clamp(1rem, 4.2vw, 1.2rem);
		}

		.mnav__chips {
			margin-block: 0 var(--s-3);
		}

		.mchip {
			padding-block: 4px;
		}
	}

	/* --- Footer ----------------------------------------------------------
	   Three tiers: identity and the calls to action, the link columns, then a
	   legal bar carrying the social profiles. Contact details are links, not
	   cards — the old boxes were 150px tall and held an inline SVG with no
	   size constraint, which is how a 300px envelope got into the footer.
	   -------------------------------------------------------------------- */

	.site-footer {
		position: relative;
		overflow: clip;
		background: var(--c-dark);
		color: var(--c-on-dark);
		/* Enough at the foot for the watermark to read as its own band, but
		   the footer is a closing note — it should not open with more air
		   than the sections above it. */
		padding-block: clamp(var(--s-6), 4vw, var(--s-7)) var(--s-6);
		font-size: var(--fs-sm);
	}

	.site-footer > .wrap {
		position: relative;
		z-index: 1;
	}

	/* Only where masking works: without it the element would paint as a plain
	   pale bar across the bottom of the page. */
	@supports (mask-image: url("../img/logo.webp")) or (-webkit-mask-image: url("../img/logo.webp")) {
		.site-footer__mark {
			position: absolute;
			inset-inline: 0;
			inset-block-end: 0;
			z-index: 0;
			/* 1920 × 176 artwork, so the height follows the viewport width. */
			aspect-ratio: 1920 / 176;
			background: rgb(255 255 255 / 4.5%);
			-webkit-mask: url("../img/logo.webp") center bottom / 100% auto no-repeat;
			mask: url("../img/logo.webp") center bottom / 100% auto no-repeat;
			pointer-events: none;
		}
	}

	.site-footer a {
		color: var(--c-on-dark-muted);
		transition: color var(--t-fast) var(--ease);
	}

	.site-footer a:hover {
		color: #fff;
	}

	.site-footer__top {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-5);
		align-items: center;
		justify-content: space-between;
		padding-block-end: var(--s-6);
		border-block-end: 1px solid rgb(255 255 255 / 12%);
	}

	.site-footer__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
	}

	.site-footer__cta .btn--ghost {
		color: #fff;
		border-color: rgb(255 255 255 / 30%);
	}

	.site-footer__cta .btn--ghost:hover {
		background: #fff;
		border-color: #fff;
		color: var(--c-ink);
	}

	/* Link lists on the left, contact cards on the right — one row, so the
	   short lists have something beside them instead of dead space. */
	.site-footer__cols {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 2.2fr);
		gap: var(--s-6) clamp(var(--s-6), 4vw, var(--s-8));
		padding-block: clamp(var(--s-6), 3.5vw, var(--s-7)) 0;
	}

	.fcol__title {
		font-size: var(--fs-md);
		font-weight: 500;
		color: rgb(255 255 255 / 55%);
		margin-block-end: var(--s-5);
	}

	.fcol__list {
		display: grid;
		gap: var(--s-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Body line-height on a footer link list reads as a paragraph with gaps
	   in it. Tighter leading plus a small gap gives a list. */
	.fcol__list a {
		display: inline-block;
		font-size: var(--fs-base);
		line-height: 1.5;
	}

	/* --- Contact cards --------------------------------------------------- */

	.fcards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-4);
	}

	.fcard {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		align-content: space-between;
		gap: var(--s-5) var(--s-4);
		min-height: 9rem;
		padding: var(--s-5);
		border-radius: var(--r-lg);
		background: rgb(255 255 255 / 5%);
		transition: background var(--t-fast) var(--ease);
	}

	.fcard:hover {
		background: rgb(255 255 255 / 8%);
	}

	.fcard__label {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		font-size: var(--fs-md);
		color: rgb(255 255 255 / 70%);
	}

	.fcard__apps {
		grid-column: 2;
		grid-row: 1;
		position: relative;
		z-index: 1;
		display: flex;
		gap: var(--s-3);
		align-self: start;
		color: rgb(255 255 255 / 70%);
	}

	.site-footer .fapp {
		display: grid;
		place-items: center;
		color: inherit;
	}

	.site-footer .fapp:hover {
		color: var(--c-accent);
	}

	/* Without an explicit size an inline SVG expands to fill its box — this
	   is exactly how a 300px envelope once got into the footer. */
	.fapp svg {
		width: 22px;
		height: 22px;
	}

	.site-footer .fcard__value {
		grid-column: 1 / -1;
		align-self: end;
		font-size: var(--fs-lg);
		font-weight: 700;
		line-height: 1.2;
		color: #fff;
		overflow-wrap: anywhere;
	}

	/* Stretches the value's hit area over the whole card; the app glyphs sit
	   above it on their own stacking context. */
	.fcard__value::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	/* --- Social row and legal line --------------------------------------- */

	.site-footer__social {
		padding-block: clamp(var(--s-5), 3vw, var(--s-6));
	}

	.socials {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-4) var(--s-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-footer .social {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		font-size: var(--fs-md);
		color: rgb(255 255 255 / 88%);
	}

	.site-footer .social:hover {
		color: #fff;
	}

	.social svg {
		width: 15px;
		height: 15px;
		flex: none;
		color: var(--c-accent);
		transition: translate var(--t-base) var(--ease-out);
	}

	.site-footer .social:hover svg {
		translate: 2px -2px;
	}

	.site-footer__bottom {
		padding-block-start: var(--s-5);
		border-block-start: 1px solid rgb(255 255 255 / 12%);
		color: var(--c-on-dark-muted);
	}

	.site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2) var(--s-6);
		margin: 0;
	}

	/* Two cards side by side stop working long before the link lists do. */
	@media (max-width: 1080px) {
		.site-footer__cols {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.fcards {
			grid-column: 1 / -1;
		}
	}

	@media (max-width: 620px) {
		.site-footer__cols {
			gap: var(--s-6) var(--s-5);
		}

		/* Two lists in half a phone screen: 16px labels wrap, 14px do not. */
		.fcol__list a {
			font-size: var(--fs-sm);
		}

		.fcards {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--s-3);
		}

		/* Stacked, the cards no longer need to fill a column beside the
		   lists — so they shrink to their contents. */
		.fcard {
			min-height: 0;
			padding: var(--s-4);
			gap: var(--s-4);
		}

		.fcard__label {
			font-size: var(--fs-sm);
		}

		.site-footer__top {
			flex-direction: column;
			align-items: flex-start;
		}

		.site-footer__cta {
			width: 100%;
		}

		.site-footer__cta .btn {
			flex: 1;
		}
	}

	/* --- Property card -------------------------------------------------- */

	/* A flat 16px gap between every part gave the card no internal grouping:
	   the address sat as far from its title as the title did from the image.
	   Spacing is explicit per element instead, so related things sit close
	   and the price row keeps its own breathing room. */
	.card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0;
		height: 100%;
	}

	.card__media {
		position: relative;
		aspect-ratio: 4 / 3;
		/* Was --r-md while every other card medium used --r-lg. */
		border-radius: var(--r-lg);
		overflow: hidden;
		background: var(--c-surface-2);
	}

	.card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--t-slow) var(--ease);
	}

	.card:hover .card__media img {
		transform: scale(1.04);
	}

	.card__agent {
		position: absolute;
		inset-inline: var(--s-3);
		inset-block-end: var(--s-3);
		display: flex;
		align-items: center;
		gap: var(--s-3);
		padding: var(--s-2) var(--s-3);
		border-radius: var(--r-sm);
		border: 1px solid transparent;
		background: rgb(20 20 20 / 45%);
		backdrop-filter: blur(10px);
		color: #fff;
		width: fit-content;
		margin-inline-start: auto;
		/* Above the card's stretched link, so it keeps its own hit area. */
		z-index: 2;
		transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	}

	.card__agent:hover,
	.card__agent:focus-visible {
		border-color: var(--c-accent);
		background: rgb(20 20 20 / 62%);
	}

	.card__agent img {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		object-fit: cover;
		flex: none;
	}

	/* Both were inline, so the role ran on from the name as one line of text. */
	.card__agent-name {
		display: block;
		font-size: var(--fs-sm);
		font-weight: 600;
		line-height: 1.25;
	}

	.card__agent-role {
		display: block;
		font-size: var(--fs-xs);
		opacity: 0.78;
		line-height: 1.25;
		margin-block-start: 1px;
	}

	.card__title {
		/* --fs-lg tops out at 24px, which is heading scale inside a 320px card. */
		font-size: clamp(1.0625rem, 0.45vw + 0.95rem, 1.25rem);
		line-height: 1.3;
		font-weight: 700;
		color: var(--c-ink);
		margin-block-start: var(--s-4);
		transition: color var(--t-fast) var(--ease);
	}

	.card:hover .card__title {
		color: var(--c-accent);
	}

	/* The whole tile is the link. z-index 1 puts it over .card__foot, which is
	   positioned and would otherwise paint above it and swallow clicks on the
	   price row. */
	.card__title a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	/* Pointing at the agent means pointing at the agent, not at the listing —
	   so the card's own hover reactions stand down while it is hovered. */
	.card:has(.card__agent:hover) .card__media img,
	.card:has(.card__agent:focus-visible) .card__media img {
		transform: none;
	}

	.card:has(.card__agent:hover) .card__title,
	.card:has(.card__agent:focus-visible) .card__title {
		color: var(--c-ink);
	}

	.card:has(.card__agent:hover) .card__foot::before,
	.card:has(.card__agent:focus-visible) .card__foot::before {
		scale: 0 1;
	}

	.card:has(.card__agent:hover) .card__foot .btn__arrow svg,
	.card:has(.card__agent:focus-visible) .card__foot .btn__arrow svg {
		rotate: 0deg;
	}

	.card__address {
		display: flex;
		align-items: start;
		gap: var(--s-2);
		font-size: var(--fs-sm);
		line-height: 1.4;
		color: var(--c-body);
		margin-block-start: var(--s-2);
	}

	.card__address svg {
		flex: none;
		width: 1em;
		height: 1em;
		margin-block-start: 0.3em;
		color: var(--c-accent);
	}

	.specs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2) var(--s-4);
		margin-block: var(--s-4) var(--s-3);
	}

	.spec {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		font-size: var(--fs-sm);
		color: var(--c-ink-2);
	}

	.spec svg {
		width: 1.15em;
		height: 1.15em;
		color: var(--c-muted);
		flex: none;
	}

	.card__foot {
		position: relative;
		margin-block-start: auto;
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: var(--s-4);
		padding-block-start: var(--s-2);
		border-block-start: 1px solid var(--c-line);
	}

	/* Drawn over the hairline rather than recolouring it, so the rule can
	   wipe in from the left instead of switching colour all at once. */
	.card__foot::before {
		content: "";
		position: absolute;
		inset-block-start: -1px;
		inset-inline: 0;
		height: 1px;
		background: var(--c-ink);
		transform-origin: left center;
		scale: 0 1;
		transition: scale 520ms var(--ease-out);
	}

	.card:hover .card__foot::before,
	.card:focus-within .card__foot::before {
		scale: 1 1;
	}

	.card__foot .btn__arrow svg {
		transition: rotate var(--t-base) var(--ease-out);
	}

	.card:hover .card__foot .btn__arrow svg,
	.card:focus-within .card__foot .btn__arrow svg {
		rotate: 45deg;
	}

	.price-group {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2) var(--s-5);
	}

	.price__label {
		display: block;
		font-size: var(--fs-xs);
		color: var(--c-muted);
	}

	.price__value {
		font-size: var(--fs-md);
		font-weight: 700;
		color: var(--c-ink);
	}

	/* --- Filter pills --------------------------------------------------- */

	.filters {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
		align-items: center;
		padding: var(--s-4);
		background: #fff;
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-sm);
	}

	.pill {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		padding: 0.55rem 1.1rem;
		border: 1px solid var(--c-line);
		border-radius: var(--r-pill);
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--c-ink-2);
		background: #fff;
		transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
			border-color var(--t-fast) var(--ease);
	}

	.pill:hover {
		border-color: var(--c-ink);
		color: var(--c-ink);
	}

	.pill[aria-current="true"] {
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: #fff;
	}

	.filters__count {
		margin-inline-start: auto;
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	/* The count on each option is the point of the composed filter bar: it is
	   what the option would return alongside everything already selected, so
	   the bar never offers a dead end. */
	.pill__n {
		font-size: var(--fs-xs);
		font-variant-numeric: tabular-nums;
		color: var(--c-muted);
	}

	.pill:hover .pill__n {
		color: inherit;
	}

	.pill.is-active,
	.pill[aria-current="true"] {
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: #fff;
	}

	.pill.is-active .pill__n,
	.pill[aria-current="true"] .pill__n {
		color: rgb(255 255 255 / 72%);
	}

	/* --- Breadcrumbs ---------------------------------------------------- */

	.crumbs {
		margin-block-end: var(--s-5);
	}

	.crumbs ol {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 var(--s-2);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	.crumbs li + li::before {
		content: "/";
		margin-inline-end: var(--s-2);
		color: rgb(20 16 12 / 25%);
	}

	.crumbs a {
		color: var(--c-body);
		transition: color var(--t-fast) var(--ease);
	}

	.crumbs a:hover {
		color: var(--c-accent);
	}

	.crumbs [aria-current] {
		color: var(--c-ink-2);
	}

	/* --- Filter bar ------------------------------------------------------
	   One row, not a stack of five. The deal is a segmented control because it
	   is the binary choice the whole catalogue turns on; everything else is a
	   disclosure that costs nothing until it is opened. <details> means the
	   options are in the DOM as ordinary links with no script involved, so the
	   facet graph stays crawlable and the bar still works with JS off.
	   -------------------------------------------------------------------- */

	.fbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s-3);
	}

	/* Same sliding thumb as the header's language switcher — the site should
	   only have one idea of what a segmented control is. */
	.seg {
		position: relative;
		display: grid;
		/* Equal tracks, or the thumb — which is sized as a fraction of the
		   whole — cannot line up with content-width segments. */
		grid-template-columns: repeat(var(--seg-n, 3), 1fr);
		align-items: center;
		flex: none;
		padding: 3px;
		border-radius: var(--r-pill);
		background: rgb(20 16 12 / 6%);
	}

	.seg__thumb {
		position: absolute;
		inset-block: 3px;
		inset-inline-start: 3px;
		width: calc((100% - 6px) / var(--seg-n, 3));
		border-radius: var(--r-pill);
		background: var(--c-ink);
		box-shadow: 0 1px 3px rgb(20 16 12 / 18%);
		translate: calc(var(--seg-i, 0) * 100%) 0;
		transition: translate 420ms var(--ease-out);
	}

	.seg__item {
		position: relative;
		z-index: 1;
		padding: 0.5rem 0.95rem;
		text-align: center;
		font-size: var(--fs-sm);
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		color: var(--c-body);
		transition: color var(--t-base) var(--ease);
	}

	.seg__item:hover {
		color: var(--c-ink);
	}

	.seg__item.is-active {
		color: #fff;
	}

	.fbar__drops {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2);
		min-width: 0;
	}

	.fdrop {
		position: relative;
	}

	.fdrop__trigger {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		padding: 0.5rem 0.85rem;
		border: 1px solid var(--c-line);
		border-radius: var(--r-pill);
		font-size: var(--fs-sm);
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
		color: var(--c-ink-2);
		cursor: pointer;
		list-style: none;
		transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	}

	/* Safari still paints its own marker without this. */
	.fdrop__trigger::-webkit-details-marker {
		display: none;
	}

	.fdrop__trigger:hover {
		border-color: var(--c-ink);
	}

	.fdrop.is-set .fdrop__trigger {
		border-color: var(--c-accent);
		background: rgb(211 76 36 / 8%);
		color: var(--c-accent);
	}

	.fdrop.is-set .fdrop__label {
		color: var(--c-muted);
	}

	.fdrop__value {
		font-weight: 600;
	}

	.fdrop__chev {
		width: 11px;
		height: 11px;
		flex: none;
		opacity: 0.6;
		transition: rotate var(--t-base) var(--ease);
	}

	.fdrop[open] .fdrop__trigger {
		border-color: var(--c-ink);
	}

	.fdrop[open] .fdrop__chev {
		rotate: 180deg;
	}

	/* The header's glass, reused: a second panel language would be a second
	   design system. */
	.fdrop__panel {
		position: absolute;
		inset-block-start: calc(100% + 6px);
		inset-inline-start: 0;
		z-index: 30;
		min-inline-size: 15rem;
		max-inline-size: min(22rem, 80vw);
		padding: var(--s-2);
		border-radius: var(--r-lg);
		background: var(--glass-bg-strong);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
		border: 1px solid var(--glass-line);
		box-shadow: var(--glass-shadow);
		transition: opacity 220ms var(--ease-out), translate 260ms var(--ease-out);
	}

	@starting-style {
		.fdrop[open] .fdrop__panel {
			opacity: 0;
			translate: 0 -6px;
		}
	}

	.fdrop__list {
		display: grid;
		gap: 1px;
		max-block-size: 17rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.fopt {
		display: flex;
		align-items: baseline;
		gap: var(--s-3);
		padding: 0.55rem 0.7rem;
		border-radius: var(--r-sm);
		font-size: var(--fs-sm);
		color: var(--c-ink-2);
		transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	}

	.fopt:hover {
		background: rgb(20 16 12 / 6%);
		color: var(--c-ink);
	}

	.fopt.is-active {
		color: var(--c-accent);
		font-weight: 600;
	}

	.fopt__name {
		min-width: 0;
	}

	.fopt__n {
		margin-inline-start: auto;
		font-size: var(--fs-xs);
		font-variant-numeric: tabular-nums;
		color: var(--c-muted);
	}

	.fdrop__clear {
		display: block;
		padding: 0.4rem 0.7rem var(--s-2);
		margin-block-end: var(--s-2);
		border-block-end: 1px solid rgb(20 16 12 / 8%);
		font-size: var(--fs-xs);
		color: var(--c-muted);
		transition: color var(--t-fast) var(--ease);
	}

	.fdrop__clear:hover {
		color: var(--c-accent);
	}

	.fbar__count {
		margin-inline-start: auto;
		font-size: var(--fs-sm);
		color: var(--c-muted);
		white-space: nowrap;
	}

	.fbar__count strong {
		color: var(--c-ink);
		font-variant-numeric: tabular-nums;
	}

	.fbar__reset {
		font-size: var(--fs-sm);
		color: var(--c-muted);
		text-decoration: underline;
		text-underline-offset: 3px;
		transition: color var(--t-fast) var(--ease);
	}

	.fbar__reset:hover {
		color: var(--c-accent);
	}

	@media (max-width: 860px) {
		.fbar {
			gap: var(--s-3) var(--s-4);
		}

		.seg {
			flex: 1 1 100%;
		}

		.seg__item {
			padding-inline: 0.5rem;
		}

		/* Wrapping, not scrolling: a horizontal scroller would clip the
		   panels that open out of it. */
		.fbar__drops {
			flex: 1 1 100%;
		}

		.fdrop {
			flex: 1 1 auto;
		}

		.fdrop__trigger {
			justify-content: center;
			width: 100%;
		}

		/* The trigger is half a row wide; its panel should not be. Spanning
		   both columns keeps "ვაკე-საბურთალო" on one line. */
		.fdrop__panel {
			min-inline-size: calc(200% + var(--s-2));
			max-inline-size: none;
		}

		.fbar__drops .fdrop:nth-child(even) .fdrop__panel {
			inset-inline-start: auto;
			inset-inline-end: 0;
		}

		.fbar__count {
			margin-inline-start: 0;
		}
	}

	/* --- Page hero ------------------------------------------------------ */

	/* --- Property archive -------------------------------------------------

	   The band used to be a 460px dark hero carrying the trail, the heading
	   and a count, with the filters in a separate strip beneath it. It is now
	   a compact white bar holding the trail and the controls, and the heading
	   moved below them: on a faceted archive the heading describes the
	   RESULT, so it only means anything once you can see what produced it.
	   ---------------------------------------------------------------------- */

	.arch-bar {
		position: relative;
		z-index: 1;
		background: var(--c-surface);
		padding-block: clamp(var(--s-4), 2.5vw, var(--s-5));
		/* A light rule off the header, and the drop shadow the header used to
		   carry — so the bar, not the nav, is the thing sitting above the page. */
		border-block-start: 1px solid var(--c-line);
		border-block-end: 1px solid var(--c-line);
		box-shadow: 0 12px 34px -26px rgb(30 18 12 / 55%);
	}

	/* Sized for the bar, not for the 460px dark hero they used to sit in —
	   18px trail crumbs next to 14px filter pills read as the louder thing. */
	.arch-bar .crumbs {
		margin-block-end: var(--s-3);
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	.arch-results {
		background: var(--c-surface);
	}

	.arch-head {
		margin-block-end: clamp(var(--s-5), 3vw, var(--s-6));
	}

	.arch-head__title {
		font-family: var(--font-display);
		font-size: var(--fs-2xl);
		line-height: var(--lh-tight);
		letter-spacing: -0.01em;
		color: var(--c-ink);
	}

	.arch-head__count {
		margin-block-start: var(--s-2);
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	.arch-head__lede {
		margin-block-start: var(--s-4);
		max-width: 62ch;
		color: var(--c-body);
	}

	/* --- Pagination ----------------------------------------------------- */

	.pagination {
		display: flex;
		justify-content: center;
		gap: var(--s-2);
		margin-block-start: var(--s-7);
	}

	.pagination .page-numbers {
		display: grid;
		place-items: center;
		min-width: 44px;
		height: 44px;
		padding-inline: var(--s-3);
		border: 1px solid var(--c-line);
		border-radius: var(--r-sm);
		font-weight: 500;
		transition: all var(--t-fast) var(--ease);
	}

	.pagination .page-numbers:hover {
		border-color: var(--c-ink);
	}

	.pagination .current {
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: #fff;
	}

	/* --- Agent card ----------------------------------------------------- */

	.agent-card__photo {
		aspect-ratio: 3 / 4;
		border-radius: var(--r-md);
		overflow: hidden;
		background: var(--c-accent);
		position: relative;
	}

	.agent-card__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.agent-card__links {
		position: absolute;
		inset-block-start: var(--s-3);
		inset-inline-start: var(--s-3);
		display: grid;
		gap: var(--s-2);
		opacity: 0;
		transform: translateX(-8px);
		transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	}

	.agent-card:hover .agent-card__links,
	.agent-card:focus-within .agent-card__links {
		opacity: 1;
		transform: none;
	}

	.agent-card__links a {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: #fff;
		display: grid;
		place-items: center;
		color: var(--c-ink);
		box-shadow: var(--shadow-sm);
	}

	.agent-card__links a:hover {
		background: var(--c-accent);
		color: #fff;
	}

	.agent-card__name {
		margin-block-start: var(--s-3);
		font-weight: 700;
		color: var(--c-ink);
	}

	.agent-card__role {
		font-size: var(--fs-sm);
		color: var(--c-accent);
	}

	/* --- Prose ---------------------------------------------------------- */

	.prose {
		max-width: 68ch;
	}

	.prose > * + * {
		margin-block-start: var(--s-4);
	}

	.prose h2,
	.prose h3 {
		margin-block-start: var(--s-6);
	}

	.prose ul,
	.prose ol {
		padding-inline-start: 1.25rem;
		display: grid;
		gap: var(--s-2);
	}

	.prose img {
		border-radius: var(--r-md);
	}

	.prose a {
		color: var(--c-accent);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* --- Empty state ---------------------------------------------------- */

	.empty {
		text-align: center;
		padding-block: var(--s-9);
		color: var(--c-muted);
	}
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

@layer utilities {
	.u-center {
		text-align: center;
	}
	.u-muted {
		color: var(--c-muted);
	}
	.u-accent {
		color: var(--c-accent);
	}
	.u-small {
		font-size: var(--fs-sm);
	}
	.u-mt-4 {
		margin-block-start: var(--s-4);
	}
	.u-mt-6 {
		margin-block-start: var(--s-6);
	}
	.u-mb-6 {
		margin-block-end: var(--s-6);
	}

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

	.skip-link {
		position: absolute;
		inset-block-start: -100px;
		inset-inline-start: var(--s-4);
		z-index: 200;
		background: var(--c-ink);
		color: #fff;
		padding: var(--s-3) var(--s-4);
		border-radius: var(--r-sm);
	}

	.skip-link:focus {
		inset-block-start: var(--s-4);
		color: #fff;
	}
}

/* ==========================================================================
   MOTION — one reveal vocabulary for the entire site
   ========================================================================== */

@layer components {
	[data-reveal] {
		opacity: 0;
		transform: translateY(var(--reveal-distance));
		transition: opacity var(--t-slow) var(--ease-out),
			transform var(--t-slow) var(--ease-out);
		transition-delay: var(--reveal-delay, 0ms);
		will-change: opacity, transform;
	}

	[data-reveal="fade"] {
		transform: none;
	}

	[data-reveal="left"] {
		transform: translateX(calc(var(--reveal-distance) * -1));
	}

	[data-reveal="right"] {
		transform: translateX(var(--reveal-distance));
	}

	[data-reveal="scale"] {
		transform: scale(0.96);
	}

	[data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---- Header: desktop breathing room, then the mobile swap ------------- */

/* Five Georgian labels are wide: measured at 15px they need 677px of bar on
   their own. Tighten well before they stop fitting, and hand over to the
   burger while there is still slack rather than at the exact overflow. */
@media (max-width: 1420px) {
	:root {
		--logo-h: 17px;
		--logo-h-top: 19px;
	}

	.site-header__inner {
		gap: var(--s-4);
	}

	.pnav__link {
		padding-inline: 10px;
		font-size: 0.875rem;
	}

	.site-header__actions {
		gap: var(--s-2);
	}

	.site-header__cta {
		font-size: 0.8125rem;
		padding-inline-start: 0.85rem;
	}
}

@media (min-width: 1241px) {
	/* Never in the tab order on desktop. */
	.mnav {
		display: none;
	}
}

@media (max-width: 1240px) {
	:root {
		--header-h: 62px;
		--header-h-top: 74px;
		--logo-h: 17px;
		--logo-h-top: 18px;
	}

	/* Mobile keeps exactly three things: the mark, the language, the burger. */
	.pnav,
	.site-header__cta,
	.mega {
		display: none;
	}

	.burger {
		display: grid;
	}

	.site-header__actions {
		gap: var(--s-2);
	}
}

@media (max-width: 560px) {
	:root {
		--logo-h: 15px;
		--logo-h-top: 16px;
	}

	.langs__item {
		padding-inline: 9px;
	}

	.burger {
		width: 42px;
		height: 42px;
	}
}

@media (max-width: 420px) {
	.mnav__chips {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.price-group {
		gap: var(--s-4);
	}
}

/* Scroll lock. The page keeps its scrollbar gutter so nothing behind the
   sheet shifts sideways when it opens. */
body.is-locked {
	overflow: hidden;
	padding-inline-end: var(--sbw, 0px);
}

body.is-locked .site-header {
	padding-inline-end: var(--sbw, 0px);
}

/* Respect the user's motion preference: no Lenis, no reveals, no parallax. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.home-hero__bg {
		will-change: auto;
		translate: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Front page
   ========================================================================== */

@layer components {
	.display-2 {
		font-family: var(--font-display);
		font-size: var(--fs-2xl);
		line-height: var(--lh-tight);
		letter-spacing: 0.01em;
		text-transform: uppercase;
		max-width: 24ch;
		margin-block-end: clamp(var(--s-5), 3vh, var(--s-7));
	}

	/* Blocks that already space themselves down to the next element. */
	.section-head .display-2,
	.home-about__body .display-2,
	.home-academy__body .display-2 {
		margin-block-end: 0;
	}

	/* ---- hero ---------------------------------------------------------- */
	.home-hero {
		background: var(--c-dark);
		color: var(--c-on-dark);
	}

	/* Exactly one viewport, everything inside it. svh rather than vh so the
	   height is fixed against the browser chrome's largest state and the
	   rounded bottom edge does not jump while the page scrolls. */
	.home-hero__media {
		position: relative;
		min-height: 100vh;
		min-height: 100svh;
		border-radius: 0 0 var(--hero-radius) var(--hero-radius);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background: var(--c-dark);
	}

	/* Deliberately oversized. The parallax translates by up to 15% of the
	   hero's height, so the element carries 16% of slack above and below —
	   without it the top edge would lift off the frame on the way down. */
	.home-hero__bg {
		position: absolute;
		inset-inline: 0;
		inset-block-start: -16%;
		width: 100%;
		height: 132%;
		object-fit: cover;
		will-change: transform;
	}

	.home-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		/* The footage is high-key and the copy is white, so the vertical wash
		   is joined by one from the left to hold the text column down. */
		background:
			linear-gradient(180deg, rgb(10 8 6 / 52%) 0%, rgb(10 8 6 / 26%) 42%, rgb(10 8 6 / 80%) 100%),
			linear-gradient(90deg, rgb(10 8 6 / 58%) 0%, rgb(10 8 6 / 18%) 52%, rgb(10 8 6 / 0%) 100%);
	}

	.home-hero__inner {
		position: relative;
		z-index: 1;
		/* No width here: it would beat .wrap (components layer > layout) and
		   run the hero copy into the viewport edge, out of line with the
		   header above it. */
		padding-block: var(--s-8) 0;
	}

	.home-hero__stats {
		position: relative;
		z-index: 1;
		padding-block-end: clamp(var(--s-6), 6vh, var(--s-8));
	}

	/* --c-body is a mid grey — invisible against the bright half of the
	   footage. Over video the eyebrow has to carry its own contrast. */
	.home-hero__inner .eyebrow {
		color: rgb(255 255 255 / 88%);
		/* Enlarged at the client's request: 14px -> 17-20px, level with or
		   just over the subtitle and still well under the headline. */
		font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem);
	}

	/* The square scales with the text, or it shrinks beside the larger type. */
	.home-hero__inner .eyebrow::before {
		width: 0.6em;
		height: 0.6em;
	}

	/* Sized and measured to break after "ექსკლუზიური" — two lines, not three. */
	.home-hero__inner .display {
		color: #fff;
		font-size: clamp(2rem, 3.4vw + 0.75rem, 3.5rem);
		max-width: 26ch;
	}

	.home-hero__sub {
		color: var(--c-on-dark-muted);
		font-size: var(--fs-md);
		/* 1.6 is body-copy leading; over two lines in a hero it reads slack. */
		line-height: 1.5;
		/* ~28px optical to the heading, ~44px down to the button: the group
		   tightens upward and opens toward the call to action. */
		margin-block: clamp(1rem, 2.2vh, 1.375rem) clamp(1.75rem, 4.2vh, 2.75rem);
		max-width: 44ch;
	}

	/* ---- stats --------------------------------------------------------- */
	.home-stats {
		display: flex;
		flex-wrap: wrap;
		align-items: start;
		justify-content: flex-start;
		gap: var(--s-5) 0;
		margin-block-start: clamp(var(--s-6), 5vh, var(--s-8));
		padding-block-start: clamp(var(--s-5), 3vh, var(--s-6));
		border-top: 1px solid rgb(255 255 255 / 18%);
	}

	/* Shrink-wrapped, not stretched: the three figures read as one group at
	   the left edge rather than three columns spanning the page. */
	.stat {
		flex: 0 0 auto;
		padding-inline: clamp(var(--s-5), 2.4vw, var(--s-7));
		border-left: 1px solid rgb(255 255 255 / 14%);
	}

	.stat:first-child {
		padding-inline-start: 0;
		border-left: 0;
	}

	.home-hero__stats .stat {
		animation: myc-rise 700ms var(--ease-out) both;
	}

	.home-hero__stats .stat:nth-child(1) {
		animation-delay: 260ms;
	}

	.home-hero__stats .stat:nth-child(2) {
		animation-delay: 350ms;
	}

	.home-hero__stats .stat:nth-child(3) {
		animation-delay: 440ms;
	}

	@keyframes myc-rise {
		from {
			opacity: 0;
			translate: 0 18px;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* "35,000,000+" will not sit in a third of a 375px screen at any size worth
	   reading, and stacked as value-over-label the three ran to 375px — more
	   than half of a 667px phone, pushing the hero past its one viewport.
	   One line each, value and label side by side, costs about 130px. */
	@media (max-width: 760px) {
		.home-stats {
			display: flex;
			flex-direction: column;
			/* The base rule's `start` is a cross-axis value: in a column it
			   shrink-wraps each row and the divider stops at the text. */
			align-items: stretch;
			gap: 0;
			margin-block-start: clamp(var(--s-4), 3vh, var(--s-6));
			padding-block-start: var(--s-3);
		}

		.stat {
			display: flex;
			align-items: baseline;
			gap: var(--s-3);
			padding-inline: 0;
			padding-block: 0.55rem;
			border-left: 0;
			border-top: 1px solid rgb(255 255 255 / 12%);
		}

		.stat:first-child {
			padding-block-start: 0;
			border-top: 0;
		}

		.stat__value {
			flex: none;
			font-size: 1.15rem;
		}

		.stat__label {
			font-size: 0.75rem;
			line-height: 1.3;
		}
	}

	.stat__value {
		display: block;
		font-family: var(--font-display);
		font-size: var(--fs-xl);
		/* The inherited 1.6 body leading left ~10px of empty half-leading
		   under the figures before the margin even started. */
		line-height: 1.05;
		color: #fff;
		font-variant-numeric: tabular-nums;
	}

	.stat__label {
		display: block;
		margin-block-start: 3px;
		line-height: 1.35;
		color: var(--c-on-dark-muted);
		font-size: var(--fs-sm);
	}

	/* ---- type cards ----------------------------------------------------- */
	.type-card {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	.type-card__media {
		display: block;
		aspect-ratio: 4 / 3;
		border-radius: var(--r-lg);
		overflow: hidden;
		background: var(--c-surface-2);
	}

	.type-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--t-slow) var(--ease);
	}

	.type-card:hover .type-card__media img {
		transform: scale(1.04);
	}

	.type-card__row {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-3);
		padding-block-start: var(--s-4);
		margin-block-start: var(--s-3);
		border-block-start: 1px solid var(--c-line);
	}

	.type-card__row::before {
		content: "";
		position: absolute;
		inset-block-start: -1px;
		inset-inline: 0;
		height: 1px;
		background: var(--c-ink);
		transform-origin: left center;
		scale: 0 1;
		transition: scale 520ms var(--ease-out);
	}

	.type-card:hover .type-card__row::before,
	.type-card:focus-visible .type-card__row::before {
		scale: 1 1;
	}

	.type-card__row .btn__arrow svg {
		transition: rotate var(--t-base) var(--ease-out);
	}

	.type-card:hover .type-card__row .btn__arrow svg {
		rotate: 45deg;
	}

	.type-card__name {
		display: block;
		font-family: var(--font-display);
		font-size: var(--fs-md);
		line-height: 1.15;
		text-transform: uppercase;
		/* Even lines: "კომერციული / უძრავი ქონება", not a lone "ქონება"
		   under the rest, so the phrase "უძრავი ქონება" stays together. */
		text-wrap: balance;
	}

	.type-card__count {
		display: block;
		color: var(--c-muted);
		font-size: var(--fs-sm);
		margin-block-start: 2px;
	}

	/* ---- about block ----------------------------------------------------- */
	/* A band of colour across the page, not a rounded card floating on one:
	   the radius and padding moved out, and the section itself now carries
	   the dark background. */
	.home-about {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: clamp(var(--s-6), 4vw, var(--s-8));
		align-items: center;
	}

	/* The frame clips; the picture inside is taller than it, and that surplus
	   is exactly what the parallax has to travel through. */
	.home-about__media {
		position: relative;
		overflow: hidden;
		border-radius: var(--r-lg);
		block-size: clamp(20rem, 42vw, 35rem);
	}

	.home-about__media img {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		inline-size: 100%;
		/* 118% leaves 18% of travel. */
		block-size: 118%;
		object-fit: cover;
		will-change: transform;
	}

	.home-about__text {
		margin-block: clamp(var(--s-5), 3vh, var(--s-7)) clamp(var(--s-5), 3vh, var(--s-7));
		display: grid;
		gap: var(--s-4);
		color: var(--c-on-dark-muted);
		max-width: 58ch;
	}

	/* Unclassed lists keep their bullets but also the browser's 40px indent
	   and 1em margins; these three prose lists set their own. The accent
	   marker matches the eyebrow squares. */
	.home-about__text ul,
	.acopy ul,
	.acad-why__text ul {
		display: grid;
		gap: var(--s-2);
		margin: 0;
		padding-inline-start: 1.25em;
	}

	.home-about__text li::marker,
	.acopy li::marker,
	.acad-why__text li::marker {
		color: var(--c-accent);
	}

	/* ---- featured carousel ---------------------------------------------- */
	.section-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--s-5);
		margin-block-end: var(--s-6);
	}

	.hcarousel__nav {
		display: flex;
		gap: var(--s-3);
		flex: none;
	}

	/* The negative margin above only belongs to a disc trailing button text. */
	.hcarousel__nav .btn__arrow,
	.card__foot .btn__arrow,
	.type-card__row .btn__arrow,
	.mega__feature-go {
		margin-inline-end: 0;
	}

	/* The rail is the page gutter, resolved the same way .wrap resolves it —
	   from 100% of a full-bleed block, so it is free of the scrollbar error
	   that 100vw carries. As inline padding on the scroll container it moves
	   with the content: the first card lines up with the grid, and the row
	   still scrolls clean off both edges instead of stopping at an inset. */
	.hcarousel {
		--rail: max(var(--gutter), calc((100% - var(--wrap)) / 2));
	}

	.hcarousel__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 2 * var(--s-5)) / 3);
		gap: var(--s-5);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--rail);
		padding-inline: var(--rail);
		scrollbar-width: none;
		padding-block-end: var(--s-2);
	}

	.hcarousel__track::-webkit-scrollbar {
		display: none;
	}

	.hcarousel__track > .card {
		scroll-snap-align: start;
	}

	.hcarousel__dots {
		display: flex;
		justify-content: center;
		gap: var(--s-2);
		margin-block-start: var(--s-5);
		padding-inline: var(--rail);
	}

	.hcarousel__dots button {
		width: 8px;
		height: 8px;
		border-radius: var(--r-pill);
		border: 0;
		padding: 0;
		background: var(--c-line);
		cursor: pointer;
		transition: width var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
	}

	.hcarousel__dots button[aria-selected="true"] {
		width: 28px;
		background: var(--c-accent);
	}

	/* ---- academy banner --------------------------------------------------- */
	.home-academy {
		display: grid;
		/* Narrower media column: was 7/5 (42% of the card), now 8.5/3.5 (29%). */
		grid-template-columns: minmax(0, 8.5fr) minmax(0, 3.5fr);
		gap: 0;
		align-items: stretch;
		border-radius: var(--r-xl);
		/* No padding on the card — it lives on the text cell instead, so the
		   photo can run to the card's own edges. */
		padding: 0;
		/* The band's height is set here, not by the photograph. */
		min-block-size: clamp(16rem, 23vw, 21rem);
		overflow: hidden;
	}

	.home-academy__body {
		align-self: center;
		padding: clamp(var(--s-5), 3vw, var(--s-7));
	}

	/* The image is taken out of flow: as a normal grid child its intrinsic
	   566x848 ratio sized the track (385px wide gave a 577px card), because
	   height:100% cannot resolve against a content-sized row. Out of flow it
	   contributes no height and simply fills whatever the band turns out to be. */
	.home-academy__media {
		position: relative;
		align-self: stretch;
	}

	.home-academy__text {
		color: var(--c-on-dark-muted);
		margin-block: clamp(var(--s-4), 2vh, var(--s-5));
		max-width: 46ch;
	}

	.home-academy__media img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		/* Flush to the card: no inset radius of its own, and no height cap —
		   the card's own corner does the clipping. */
		max-height: none;
		object-fit: cover;
		object-position: 50% 22%;
		border-radius: 0;
	}

	@media (max-width: 900px) {
		.home-about,
		.home-academy {
			grid-template-columns: 1fr;
		}

		.home-academy {
			min-block-size: 0;
		}

		.home-academy__media {
			order: -1;
			block-size: clamp(12rem, 40vw, 16rem);
		}

		.hcarousel__track {
			grid-auto-columns: calc((100% - var(--s-5)) / 2);
		}

		.section-head {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	@media (max-width: 640px) {
		.hcarousel__track {
			/* Enough of the next card showing to read as a row that continues. */
			grid-auto-columns: min(78%, 300px);
			gap: var(--s-4);
		}

		/* Two up: one type card per row wastes most of a phone screen on a
		   4:3 photograph. */
		.grid-4 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--s-5) var(--s-3);
		}

		.type-card__name {
			font-size: var(--fs-base);
		}

		.type-card__row .btn__arrow {
			width: 1.75rem;
			height: 1.75rem;
		}

		.type-card__row .btn__arrow svg {
			width: 0.9em;
			height: 0.9em;
		}
	}
}

@layer utilities {
	.u-flip {
		transform: scaleX(-1);
	}

	/* Components set `display`, which would otherwise beat the UA rule for
	   [hidden] and leave JS-hidden controls (carousel arrows/dots) visible. */
	[hidden] {
		display: none !important;
	}
}

/* ==========================================================================
   Single property
   ========================================================================== */

@layer components {

	/* --- Gallery mosaic --------------------------------------------------
	   One lead image carrying four smaller ones, rather than three equal
	   thumbnails that gave the best photograph no more weight than the worst.
	   -------------------------------------------------------------------- */

	.pgal {
		padding-block-start: var(--s-5);
	}

	/* Three columns, not four, and a short frame: at 16/8.2 every tile came
	   out squarish and the block ate 600px before the title. This gives the
	   lead a 1.55:1 landscape crop and the two supports the same. */
	.pgal__mosaic {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		gap: 8px;
		aspect-ratio: 16 / 6.6;
		border-radius: var(--r-lg);
		overflow: hidden;
	}

	.pgal__tile {
		position: relative;
		padding: 0;
		border: 0;
		overflow: hidden;
		background: var(--c-surface-2);
		cursor: zoom-in;
	}

	.pgal__tile:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	/* Fewer than five photographs should still fill the frame. */
	.pgal__tile:first-child:last-child {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}

	.pgal__tile img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: scale var(--t-slow) var(--ease);
	}

	.pgal__tile:hover img {
		scale: 1.04;
	}

	.pgal__tile:active {
		scale: 0.995;
	}

	.pgal__tile {
		transition: scale var(--t-fast) var(--ease-out);
	}

	.pgal__all {
		position: absolute;
		inset-block-end: var(--s-4);
		inset-inline-end: var(--s-4);
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		padding: 0.6rem 1rem;
		border-radius: var(--r-pill);
		background: var(--glass-bg);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
		border: 1px solid var(--glass-line);
		box-shadow: var(--shadow-md);
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--c-ink);
		transition: background var(--t-fast) var(--ease);
	}

	.pgal__all svg {
		width: 15px;
		height: 15px;
	}

	.pgal__all:hover {
		background: #fff;
	}

	@media (max-width: 800px) {
		/* A phone cannot show five photographs at a useful size, so it shows
		   one at a time and swipes. */
		.pgal__mosaic {
			display: flex;
			aspect-ratio: 4 / 3;
			gap: 6px;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			border-radius: var(--r-md);
		}

		.pgal__mosaic::-webkit-scrollbar {
			display: none;
		}

		.pgal__tile {
			flex: 0 0 100%;
			scroll-snap-align: center;
			border-radius: var(--r-md);
		}

		.pgal__all {
			position: sticky;
			inset-inline-end: auto;
			inset-block-end: var(--s-3);
			align-self: end;
			margin-inline-start: calc(-50% - var(--s-3));
		}
	}

	/* --- Layout ----------------------------------------------------------- */

	.property__layout {
		display: grid;
		gap: var(--s-7);
		grid-template-columns: minmax(0, 1fr);
	}

	@media (min-width: 1000px) {
		.property__layout {
			grid-template-columns: minmax(0, 1fr) 400px;
			gap: clamp(var(--s-7), 4vw, var(--s-9));
			align-items: start;
		}

		/* A sticky element travels inside its own containing block. With the
		   aside shrink-wrapped to the rail, the two were the same height and
		   there was nowhere to travel to — so it stretches to the row and the
		   rail moves within it. */
		.property__aside {
			align-self: stretch;
		}
	}

	/* --- Header ----------------------------------------------------------- */

	.ptags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2);
		margin-block-end: var(--s-4);
	}

	.ptag {
		padding: 0.35rem 0.8rem;
		border-radius: var(--r-pill);
		background: rgb(211 76 36 / 10%);
		font-size: var(--fs-xs);
		font-weight: 600;
		color: var(--c-accent);
		transition: background var(--t-fast) var(--ease);
	}

	.ptag:hover {
		background: var(--c-accent);
		color: #fff;
	}

	.phead__title {
		font-family: var(--font-display);
		font-size: var(--fs-2xl);
		line-height: var(--lh-tight);
		color: var(--c-ink);
	}

	.phead__address {
		display: flex;
		align-items: start;
		gap: var(--s-2);
		margin-block-start: var(--s-3);
		font-size: var(--fs-md);
		color: var(--c-body);
	}

	.phead__address svg {
		flex: none;
		width: 1.1em;
		height: 1.1em;
		margin-block-start: 0.25em;
		color: var(--c-accent);
	}

	/* Numbers only. "თეთრი კარკასი" and "ახალი აშენებული" used to sit in here
	   too, wrapping to two lines each and leaving the row ragged — they are
	   states, and they read better as chips above the title. */
	.pfacts {
		display: grid;
		/* 10.5rem plus a 24px gap needed 360px for two columns and a phone has
		   343 — so every fact took its own row. */
		grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
		gap: var(--s-4) var(--s-5);
		margin-block-start: var(--s-6);
		padding-block: var(--s-5);
		border-block: 1px solid var(--c-line);
	}

	.pfact {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		min-width: 0;
	}

	.pfact__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: var(--r-sm);
		border: 1px solid var(--c-line);
		background: var(--c-surface-2);
	}

	.pfact__icon img,
	.pfact__icon svg {
		width: 18px;
		height: 18px;
	}

	.pfact__icon:empty {
		display: none;
	}

	.pfact__text {
		display: grid;
		min-width: 0;
	}

	.pfact__label {
		font-size: var(--fs-xs);
		line-height: 1.3;
		color: var(--c-muted);
	}

	.pfact__value {
		margin: 1px 0 0;
		font-size: var(--fs-md);
		font-weight: 700;
		line-height: 1.25;
		color: var(--c-ink);
	}

	.ptag--plain {
		background: rgb(20 16 12 / 6%);
		color: var(--c-ink-2);
	}

	/* --- Content blocks ---------------------------------------------------- */

	.pblock {
		margin-block-start: clamp(var(--s-6), 4vw, var(--s-7));
	}

	.pblock__title {
		font-size: var(--fs-md);
		font-weight: 700;
		color: var(--c-ink);
		margin-block-end: var(--s-4);
	}

	/* Long Georgian descriptions used to dump every paragraph at full length;
	   the clamp collapses to a readable teaser until asked. */
	.pprose {
		position: relative;
	}

	.pprose__inner {
		max-width: 68ch;
		display: grid;
		gap: var(--s-4);
		color: var(--c-body);
	}

	.pprose.is-clamped .pprose__inner {
		max-block-size: 11.5rem;
		overflow: hidden;
		mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
	}

	.pprose__more {
		display: none;
		margin-block-start: var(--s-4);
		padding: 0;
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--c-accent);
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.pprose.is-clampable .pprose__more {
		display: block;
	}

	/* --- Specs ------------------------------------------------------------- */

	.pspecs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
		gap: 0 clamp(var(--s-4), 2vw, var(--s-6));
		margin: 0;
	}

	.pspec {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--s-3);
		padding-block: 0.55rem;
		border-block-end: 1px solid var(--c-line);
	}

	.pspec__label {
		font-size: 0.8125rem;
		line-height: 1.35;
		color: var(--c-muted);
	}

	.pspec__value {
		margin: 0;
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.35;
		text-align: end;
		color: var(--c-ink);
	}

	/* Yes/no facts are a checklist, not rows with "yes" repeated down them. */
	.pamen {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
		gap: 0 clamp(var(--s-4), 2vw, var(--s-6));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pamen__item {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		padding-block: 0.45rem;
		font-size: 0.8125rem;
		line-height: 1.35;
		color: var(--c-ink-2);
	}

	.pamen__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		background: rgb(211 76 36 / 9%);
		color: var(--c-accent);
	}

	.pamen__icon svg,
	.pamen__icon img {
		width: 13px;
		height: 13px;
	}

	/* --- Location ---------------------------------------------------------- */

	.ploc {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-5);
		padding: var(--s-5);
		border: 1px solid var(--c-line);
		border-radius: var(--r-lg);
	}

	.ploc__address {
		font-size: var(--fs-md);
		font-weight: 600;
		color: var(--c-ink);
	}

	.ploc__link {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		margin-block-start: var(--s-2);
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--c-accent);
	}

	.ploc__link svg {
		width: 15px;
		height: 15px;
		transition: translate var(--t-base) var(--ease-out);
	}

	.ploc__link:hover svg {
		translate: 4px 0;
	}

	.ploc__map {
		display: inline-flex;
		align-items: center;
		gap: var(--s-3);
		padding: 0.7rem 1.1rem;
		border-radius: var(--r-pill);
		border: 1px solid var(--c-line);
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--c-ink);
		transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	}

	.ploc__map:hover {
		border-color: var(--c-accent);
		background: rgb(211 76 36 / 6%);
	}

	.ploc__pin svg {
		width: 17px;
		height: 17px;
		color: var(--c-accent);
	}

	/* --- Sticky rail -------------------------------------------------------- */

	/* Weighted to read as the page's one decision point: an accent rule across
	   the top, the price on tint, and the enquiry given room. */
	.prail {
		display: grid;
		gap: var(--s-4);
		padding: var(--s-5);
		border: 1px solid var(--c-line);
		border-block-start: 3px solid var(--c-accent);
		border-radius: var(--r-lg);
		background: #fff;
		box-shadow: var(--shadow-md);
	}

	.prail__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-3);
	}

	.cswitch {
		flex: none;
	}

	.cswitch .seg__item {
		padding: 0.3rem 0.7rem;
		font-size: var(--fs-sm);
		border: 0;
		cursor: pointer;
	}

	.money {
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}

	.prail__eyebrow {
		display: flex;
		align-items: center;
		gap: var(--s-2);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--c-muted);
	}

	.prail__eyebrow::before {
		content: "";
		width: 7px;
		height: 7px;
		background: var(--c-accent);
	}

	.prail__prices {
		/* The prices size themselves off this box's width (cqi) below. */
		container-type: inline-size;
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3) var(--s-4);
		align-items: baseline;
		padding: var(--s-4);
		border-radius: var(--r-md);
		background: var(--c-surface-2);
	}

	.prail__pitch {
		font-size: var(--fs-sm);
		line-height: 1.45;
		color: var(--c-body);
	}

	/* A rule with the alternative written into it. */
	.prail__or {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		margin-block-start: var(--s-2);
		font-size: var(--fs-xs);
		color: var(--c-muted);
	}

	.prail__or::before,
	.prail__or::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--c-line);
	}

	@media (min-width: 1000px) {
		.prail {
			position: sticky;
			/* Clears the fixed header when the rail pins. */
			inset-block-start: calc(var(--header-h) + var(--s-4));
		}
	}

	/* Both prices share one size: 28px, or less when the box is too narrow to
	   hold a 7-digit full price (6.15em) and a 5-digit m² price (4.6em) on one
	   line. */
	.prail__price {
		display: grid;
		gap: 2px;
		font-size: 1.75rem;
		font-size: min(1.75rem, calc((100cqi - var(--s-4)) / 10.75));
	}

	/* Contractica's digits aren't tabular, so the full price gets a fixed
	   column as wide as its longest value, "0,000,000 ₾". A longer price or a
	   currency switch then never shifts the m² price beside it. */
	.prail__price:not(.prail__price--sub) {
		flex: none;
		width: 6.15em;
	}

	.prail__price--sub .prail__value {
		color: var(--c-ink-2);
	}

	.prail__label {
		font-size: var(--fs-xs);
		color: var(--c-muted);
	}

	.prail__value {
		font-family: var(--font-display);
		/* Sized on .prail__price, so the full price's em column matches. */
		font-size: 1em;
		line-height: 1.05;
		color: var(--c-ink);
		font-variant-numeric: tabular-nums;
	}

	.prail__cta {
		width: 100%;
		justify-content: space-between;
	}

	.pagent {
		display: grid;
		gap: var(--s-3);
	}

	.pagent__row {
		display: flex;
		gap: var(--s-2);
	}

	.pagent__row .pagent__link {
		flex: 1;
		min-width: 0;
	}

	.pagent__wa {
		display: grid;
		place-items: center;
		flex: none;
		width: 2.75rem;
		border-radius: var(--r-md);
		border: 1px solid var(--c-line);
		color: #25d366;
		transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	}

	.pagent__wa:hover {
		border-color: #25d366;
		background: rgb(37 211 102 / 8%);
	}

	.pagent__wa svg {
		width: 19px;
		height: 19px;
	}

	.pagent__head {
		display: flex;
		align-items: center;
		gap: var(--s-3);
	}

	.pagent__photo {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		object-fit: cover;
		flex: none;
	}

	.pagent__id {
		display: grid;
		min-width: 0;
	}

	.pagent__name {
		font-weight: 700;
		line-height: 1.25;
		color: var(--c-ink);
	}

	.pagent__role {
		font-size: var(--fs-xs);
		line-height: 1.25;
		color: var(--c-muted);
	}

	.pagent__links {
		display: grid;
		gap: var(--s-2);
	}

	.pagent__link {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		padding: 0.6rem 0.85rem;
		border: 1px solid var(--c-line);
		border-radius: var(--r-md);
		font-size: var(--fs-sm);
		color: var(--c-ink-2);
		transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	}

	.pagent__link:hover {
		border-color: var(--c-accent);
		background: rgb(211 76 36 / 5%);
	}

	.pagent__link svg {
		width: 1.05em;
		height: 1.05em;
		flex: none;
		color: var(--c-accent);
	}

	.pagent__link span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pagent__all {
		font-size: var(--fs-sm);
		color: var(--c-muted);
		text-decoration: underline;
		text-underline-offset: 3px;
		transition: color var(--t-fast) var(--ease);
	}

	.pagent__all:hover {
		color: var(--c-accent);
	}

	/* --- Pinned price bar (phones) ------------------------------------------ */

	.pbar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 80;
		padding-block: var(--s-3);
		padding-block-end: max(var(--s-3), env(safe-area-inset-bottom));
		background: var(--glass-bg);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
		border-block-start: 1px solid rgb(20 16 12 / 8%);
		translate: 0 100%;
		transition: translate 320ms var(--ease-out);
	}

	.pbar.is-shown {
		translate: 0 0;
	}

	.pbar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-4);
	}

	.pbar__price {
		display: grid;
		line-height: 1.2;
		min-width: 0;
	}

	.pbar__price strong {
		font-size: var(--fs-md);
		color: var(--c-ink);
		font-variant-numeric: tabular-nums;
	}

	.pbar__price span {
		font-size: var(--fs-xs);
		color: var(--c-muted);
	}

	@media (min-width: 1000px) {
		.pbar {
			display: none;
		}
	}

	/* --- Lightbox ------------------------------------------------------------ */

	/* A modal that appears between two frames reads as a page change, not an
	   overlay. `allow-discrete` lets display and the top layer participate in
	   the transition, and @starting-style gives the open state somewhere to
	   animate from — without either, a <dialog> can only snap. */
	.lightbox {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		padding: 0;
		border: 0;
		background: rgb(12 9 7 / 96%);
		color: #fff;
		overflow: hidden;
		opacity: 0;
		scale: 1.015;
		transition: opacity 260ms var(--ease-in), scale 260ms var(--ease-in),
			overlay 260ms allow-discrete, display 260ms allow-discrete;
	}

	.lightbox[open] {
		opacity: 1;
		scale: 1;
		transition: opacity 340ms var(--ease-out), scale 420ms var(--ease-out),
			overlay 340ms allow-discrete, display 340ms allow-discrete;
	}

	@starting-style {
		.lightbox[open] {
			opacity: 0;
			scale: 1.015;
		}
	}

	.lightbox::backdrop {
		background: rgb(12 9 7 / 0%);
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
		transition: background 260ms var(--ease-in), backdrop-filter 260ms var(--ease-in),
			overlay 260ms allow-discrete, display 260ms allow-discrete;
	}

	.lightbox[open]::backdrop {
		background: rgb(12 9 7 / 82%);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		transition: background 340ms var(--ease-out), backdrop-filter 340ms var(--ease-out),
			overlay 340ms allow-discrete, display 340ms allow-discrete;
	}

	@starting-style {
		.lightbox[open]::backdrop {
			background: rgb(12 9 7 / 0%);
			-webkit-backdrop-filter: blur(0);
			backdrop-filter: blur(0);
		}
	}

	.lightbox__bar {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--s-4) var(--gutter);
		opacity: 0;
		translate: 0 -8px;
		transition: opacity 300ms var(--ease-out) 140ms, translate 300ms var(--ease-out) 140ms;
	}

	.lightbox[open] .lightbox__bar {
		opacity: 1;
		translate: 0 0;
	}

	.lightbox__nav {
		opacity: 0;
		transition: opacity 300ms var(--ease-out) 180ms, background var(--t-fast) var(--ease);
	}

	.lightbox[open] .lightbox__nav {
		opacity: 1;
	}

	.lightbox__count {
		font-size: var(--fs-sm);
		font-variant-numeric: tabular-nums;
		color: rgb(255 255 255 / 76%);
	}

	.lightbox__close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: rgb(255 255 255 / 14%);
		color: #fff;
		transition: background var(--t-fast) var(--ease);
	}

	.lightbox__close:hover {
		background: rgb(255 255 255 / 26%);
	}

	.lightbox__close svg {
		width: 20px;
		height: 20px;
	}

	.lightbox__track {
		display: flex;
		height: 100%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.lightbox__track::-webkit-scrollbar {
		display: none;
	}

	.lightbox__slide {
		flex: 0 0 100%;
		scroll-snap-align: center;
		display: grid;
		place-items: center;
		margin: 0;
		padding: calc(var(--s-8) + var(--s-4)) var(--gutter) var(--s-7);
	}

	.lightbox__slide img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		border-radius: var(--r-md);
	}

	.lightbox__nav {
		position: absolute;
		inset-block-start: 50%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: rgb(255 255 255 / 14%);
		color: #fff;
		translate: 0 -50%;
	}

	.lightbox__nav:hover {
		background: rgb(255 255 255 / 26%);
	}

	.lightbox__nav svg {
		width: 20px;
		height: 20px;
	}

	.lightbox__nav--prev {
		inset-inline-start: var(--gutter);
	}

	.lightbox__nav--next {
		inset-inline-end: var(--gutter);
	}

	@media (max-width: 700px) {
		.lightbox__nav {
			display: none;
		}
	}
}

/* ==========================================================================
   CONTACT PAGE
   ==========================================================================

   IMPORTANT — this block must stay inside @layer components.

   The Forms module's stylesheet is UNLAYERED. Under CSS Cascade 5 the
   importance sort reverses layer order, so a layered `!important` beats an
   unlayered `!important` at ANY specificity, while an unlayered NORMAL
   declaration beats a layered one at any specificity. Two consequences, and
   both are load-bearing:

     - no specificity arms race is needed here: `.cform .mcf-fld` is enough to
       beat the plugin's `.mcf-inline input.mcf-fld { … !important }`;
     - but every declaration that touches something forms.css also sets MUST
       carry `!important`, or the plugin's unlayered normal rules win.

   Move this block out of the layer and the form silently reverts to the
   plugin's default skin.

   Everything that re-skins the plugin is scoped to .cform so the popup forms
   on the single-property, academy and site-wide triggers keep their own look.
   ========================================================================== */

@layer components {

	/* The panel opens the page, so it does not need a full section's air above
	   it, and the map belongs to the same block rather than reading as a
	   separate section pushed away below it. */
	.contact-section {
		padding-block: clamp(var(--s-5), 3vw, var(--s-7)) clamp(var(--s-5), 2.5vw, var(--s-6));
	}

	.cmap-band {
		padding-block: 0 clamp(var(--s-5), 3vw, var(--s-6));
	}

	.contact {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(var(--s-6), 3vw, var(--s-8));
		align-items: stretch;
	}

	/* --- The brand panel ------------------------------------------------- */

	/* A light warm grey, in the same family as --c-surface-2, with a gentle
	   fall across it so the panel still has a body against the white page.
	   Ink on the darkest stop is about 13:1. */
	.cpanel {
		position: relative;
		display: flex;
		align-items: center;
		overflow: clip;
		/* min, not a fixed height: Georgian set in FiraGO runs materially
		   longer than the English this layout was drawn with. */
		min-block-size: clamp(26rem, 42vw, 36rem);
		padding: clamp(var(--s-6), 3.2vw, var(--s-8));
		border-radius: var(--r-xl);
		background: linear-gradient(150deg, #f7f5f3 0%, #ebe7e3 55%, #e3ded9 100%);
		color: var(--c-body);
	}

	/* A large flat field of colour reads as dead; a very slow off-centre
	   glow keeps it alive without ever being legible as motion. */
	.cpanel::before {
		content: "";
		position: absolute;
		inset: -40%;
		background: radial-gradient(circle at 32% 30%, rgb(211 76 36 / 7%) 0%, transparent 58%);
		animation: myc-cpanel-glow 30s linear infinite;
		pointer-events: none;
	}

	@keyframes myc-cpanel-glow {
		to {
			rotate: 360deg;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.cpanel::before {
			animation: none;
		}
	}

	/* The copy never runs the panel's full width — that restraint is most of
	   why the reference reads as expensive. */
	.cpanel__inner {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 30rem;
	}

	/* --- The team stack -------------------------------------------------- */

	.cteam {
		display: flex;
		margin: 0 0 clamp(var(--s-5), 2.5vw, var(--s-6));
		padding: 0;
		list-style: none;
	}

	.cteam li {
		position: relative;
	}

	.cteam li + li {
		margin-inline-start: -0.85rem;
	}

	.cteam img,
	.cteam__more {
		display: block;
		inline-size: 3.5rem;
		block-size: 3.5rem;
		border-radius: 50%;
		border: 2px solid var(--c-surface);
		object-fit: cover;
		background: var(--c-surface-2);
	}

	.cteam__more {
		display: grid;
		place-items: center;
		background: rgb(20 16 12 / 8%);
		color: var(--c-ink);
		font-size: var(--fs-sm);
		font-weight: 700;
	}

	.cteam__link {
		display: block;
		transition: translate var(--t-base) var(--ease-out);
	}

	/* Lift the hovered face clear of the two it is sandwiched between. */
	.cteam li:hover,
	.cteam li:focus-within {
		z-index: 1;
	}

	.cteam__link:hover,
	.cteam__link:focus-visible {
		translate: 0 -4px;
	}

	.cpanel__eyebrow {
		color: var(--c-body);
	}

	.cpanel__title {
		color: var(--c-ink);
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--fs-2xl);
		line-height: var(--lh-tight);
		letter-spacing: -0.01em;
		text-wrap: balance;
	}

	.cpanel__lede {
		margin-block-start: var(--s-4);
		max-width: 26rem;
		color: var(--c-body);
	}

	/* --- Contact rows ---------------------------------------------------- */

	.crows {
		margin-block-start: clamp(var(--s-6), 3vw, var(--s-7));
		padding: 0;
		list-style: none;
	}

	.crows li + li {
		border-block-start: 1px solid rgb(20 16 12 / 10%);
	}

	.crow {
		display: flex;
		align-items: center;
		gap: var(--s-4);
		padding-block: var(--s-4);
		color: var(--c-ink);
		transition: color var(--t-fast) var(--ease);
	}

	.crow__ico {
		display: grid;
		place-items: center;
		flex: none;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: 50%;
		background: rgb(20 16 12 / 6%);
		color: var(--c-accent);
		transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	}

	/* Without an explicit size an inline SVG expands to fill its box. */
	.crow__ico svg {
		inline-size: 18px;
		block-size: 18px;
	}

	.crow__val {
		display: grid;
		gap: 2px;
		font-weight: 600;
		line-height: 1.3;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.crow__sub {
		font-weight: 400;
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	a.crow:hover .crow__ico {
		background: var(--c-accent);
		color: #fff;
	}

	.crow--static {
		cursor: default;
	}

	/* --- The form column ------------------------------------------------- */

	/* The form is capped and centred inside its half rather than stretched to
	   it: a form run to the full column width is what makes cheap versions of
	   this layout look wrong. */
	.cform {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
		padding-block: var(--s-4);
	}

	.cform__title {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--fs-xl);
		line-height: var(--lh-snug);
		letter-spacing: -0.01em;
	}

	.cform__lede {
		margin-block-start: var(--s-2);
		color: var(--c-body);
	}

	.cgroup {
		margin: 0;
		padding: 0;
		border: 0;
		margin-block-start: clamp(var(--s-5), 2.5vw, var(--s-6));
	}

	.cgroup__legend {
		padding: 0;
		margin-block-end: var(--s-3);
		font-size: var(--fs-xs);
		font-weight: 600;
		letter-spacing: 0.1em;
		color: var(--c-muted);
	}

	/* --- Interest chips -------------------------------------------------- */

	.cchips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-2);
	}

	.cchip label {
		display: inline-flex;
		align-items: center;
		padding: 0.5rem 0.85rem;
		border: 1px solid var(--c-line);
		border-radius: var(--r-pill);
		font-size: var(--fs-sm);
		font-weight: 500;
		line-height: 1.2;
		color: var(--c-ink-2);
		cursor: pointer;
		user-select: none;
		transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
			color var(--t-fast) var(--ease);
	}

	.cchip label:hover {
		border-color: var(--c-ink);
	}

	/* A tick as well as the fill: selection should not rest on colour alone. */
	.cchip label::before {
		content: "";
		inline-size: 0;
		block-size: 0.7em;
		margin-inline-end: 0;
		background: currentColor;
		clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
		transition: inline-size var(--t-base) var(--ease-out), margin-inline-end var(--t-base) var(--ease-out);
	}

	.cchip input:checked + label {
		background: var(--c-ink);
		border-color: var(--c-ink);
		color: #fff;
	}

	.cchip input:checked + label::before {
		inline-size: 0.7em;
		margin-inline-end: var(--s-2);
	}

	.cchip input:focus-visible + label {
		outline: 2px solid var(--c-accent);
		outline-offset: 3px;
	}

	/* --- Timeframe: the site's segmented control, reused ------------------ */

	/* The thumb slides off :has() on the checked radio — no script. */
	.cseg:has(input:nth-of-type(1):checked) { --seg-i: 0; }
	.cseg:has(input:nth-of-type(2):checked) { --seg-i: 1; }
	.cseg:has(input:nth-of-type(3):checked) { --seg-i: 2; }
	.cseg:has(input:nth-of-type(4):checked) { --seg-i: 3; }

	.cseg__item {
		display: grid;
		gap: 1px;
		padding-block: var(--s-3);
		padding-inline: var(--s-2);
		cursor: pointer;
	}

	.cseg__v {
		font-size: var(--fs-base);
		font-weight: 700;
		line-height: 1.15;
	}

	.cseg__k {
		font-size: var(--fs-xs);
		font-weight: 500;
		opacity: 0.72;
	}

	.cseg input:checked + .cseg__item {
		color: #fff;
	}

	.cseg input:focus-visible + .cseg__item {
		outline: 2px solid var(--c-accent);
		outline-offset: 3px;
		border-radius: var(--r-pill);
	}

	/* --- The plugin's form, wearing the theme's fields -------------------- */

	.cform .mcf-inline {
		margin-block-start: clamp(var(--s-5), 2.5vw, var(--s-6));
	}

	.cform .mcf-form {
		gap: var(--s-4) !important;
	}

	/* Name and phone share a row; the email address gets its own, because it
	   is the one value here that regularly runs long. */
	.cform .mcf-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--s-4) !important;
	}

	.cform .mcf-grid > .mcf-field:last-child {
		grid-column: 1 / -1 !important;
	}

	/* The message and the submit stack; the reference's side-by-side pair
	   leaves the button too small to be the page's main action. */
	.cform .mcf-row2 {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--s-4) !important;
	}

	.cform .mcf-fld,
	.cform .mcf-phone {
		border: 1px solid var(--c-line) !important;
		border-radius: var(--r-md) !important;
		background: var(--c-surface) !important;
		color: var(--c-ink) !important;
		font-family: inherit !important;
		/* 16px: anything smaller makes iOS Safari zoom on focus. */
		font-size: var(--fs-base) !important;
		line-height: 1.4 !important;
		transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
	}

	.cform .mcf-fld {
		padding: 0.9rem 1.05rem !important;
	}

	.cform .mcf-fld::placeholder,
	.cform .mcf-phone input::placeholder {
		color: var(--c-muted) !important;
	}

	.cform .mcf-fld:focus,
	.cform .mcf-phone:focus-within {
		border-color: var(--c-accent) !important;
		box-shadow: 0 0 0 3px rgb(211 76 36 / 14%) !important;
	}

	/* The compound phone control has to read as one field: the ring goes on
	   the container, and only a hairline separates the dial code. */
	.cform .mcf-phone input {
		padding: 0.9rem 1.05rem !important;
		font-family: inherit !important;
		font-size: var(--fs-base) !important;
		letter-spacing: normal !important;
	}

	.cform .mcf-ccode {
		gap: var(--s-2) !important;
		padding-inline: 0.9rem !important;
		background: transparent !important;
		border-inline-end: 1px solid var(--c-line) !important;
	}

	.cform .mcf-dial {
		font-size: var(--fs-sm) !important;
		color: var(--c-body) !important;
	}

	.cform .mcf-msg {
		block-size: auto !important;
		min-block-size: 8.5rem !important;
		resize: vertical !important;
	}

	/* The country list, given the theme's dropdown surface. */
	.cform .mcf-ccp {
		border: 1px solid var(--c-line) !important;
		border-radius: var(--r-md) !important;
		box-shadow: var(--shadow-lg) !important;
	}

	.cform .mcf-ccp .mcf-s input {
		border-radius: var(--r-sm) !important;
		border-color: var(--c-line) !important;
		font-family: inherit !important;
	}

	.cform .mcf-ccp .mcf-i:hover,
	.cform .mcf-ccp .mcf-i.a {
		background: var(--c-surface-2) !important;
	}

	/* The submit is the page's primary action, so it is the site's primary
	   button — pill, accent, and the same arrow badge, moved in by JS. */
	.cform .mcf-submit {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: var(--s-3) !important;
		inline-size: 100% !important;
		min-block-size: 3.25rem !important;
		padding: 0.5rem 1.25rem !important;
		border-radius: var(--r-pill) !important;
		background: var(--c-accent) !important;
		color: var(--c-accent-ink) !important;
		font-family: inherit !important;
		font-size: var(--fs-sm) !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		transition: background var(--t-base) var(--ease) !important;
	}

	.cform .mcf-submit:hover {
		background: var(--c-accent-bright) !important;
		filter: none !important;
	}

	.cform .mcf-submit .btn__arrow {
		background: #fff !important;
		color: var(--c-accent) !important;
	}

	.cform .mcf-err {
		border-color: var(--c-accent) !important;
	}

	.cform .mcf-emsg {
		font-size: var(--fs-xs) !important;
		color: var(--c-accent) !important;
	}

	.cform .mcf-ok {
		font-size: var(--fs-sm) !important;
	}

	.cform .mcf-consent {
		font-size: var(--fs-xs) !important;
		color: var(--c-muted) !important;
	}

	/* --- Map ------------------------------------------------------------- */

	.cmap {
		position: relative;
		border-radius: var(--r-xl);
		overflow: clip;
		background: var(--c-surface-2);
	}

	/* An iframe swallows the wheel, so scrolling the page with the pointer
	   over the map zooms the map instead — and the site smooth-scrolls, so
	   the two fight and the page stutters. The embed is inert until it is
	   clicked, and goes inert again when the pointer leaves. */
	.cmap__frame {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: 21 / 9;
		border: 0;
		pointer-events: none;
	}

	.cmap.is-live .cmap__frame {
		pointer-events: auto;
	}

	.cmap__hint {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--t-base) var(--ease);
	}

	.cmap:hover .cmap__hint {
		opacity: 1;
	}

	.cmap.is-live .cmap__hint {
		opacity: 0;
	}

	.cmap__hint span {
		padding: 0.5rem 0.95rem;
		border-radius: var(--r-pill);
		background: rgb(20 16 12 / 76%);
		color: #fff;
		font-size: var(--fs-sm);
		font-weight: 500;
	}

	/* Top-right is the only corner Google's own embed leaves alone: its place
	   card takes the top-left, the Street View thumb the bottom-left and the
	   attribution the bottom-right, and covering any of those is either rude
	   or against the terms. */
	.cmap__card {
		position: absolute;
		inset-block-start: clamp(var(--s-4), 2vw, var(--s-6));
		inset-inline-end: clamp(var(--s-4), 2vw, var(--s-6));
		max-inline-size: min(22rem, calc(100% - var(--s-8)));
		padding: clamp(var(--s-5), 2vw, var(--s-6));
		border-radius: var(--r-lg);
		background: var(--c-surface);
		box-shadow: var(--shadow-lg);
	}

	.cmap__label {
		font-size: var(--fs-xs);
		font-weight: 600;
		letter-spacing: 0.1em;
		color: var(--c-muted);
	}

	.cmap__addr {
		margin-block: var(--s-2) var(--s-4);
		font-weight: 600;
		line-height: 1.4;
		color: var(--c-ink);
	}

	/* --- Responsive ------------------------------------------------------ */

	/* One column well before a tablet: the form needs ~540px of its own, so a
	   50/50 split starves it long before the viewport looks narrow. */
	@media (max-width: 1000px) {
		.contact {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--s-6);
		}

		/* The reveal's sideways offset is free while the columns have slack
		   either side of them. Once they span the full gutter it pushes the
		   page 12px sideways, so below the stack point it becomes a rise.
		   :not(.is-revealed) so the settled state still wins. */
		.contact [data-reveal="left"]:not(.is-revealed),
		.contact [data-reveal="right"]:not(.is-revealed) {
			transform: translateY(var(--reveal-distance));
		}

		.cpanel {
			min-block-size: 0;
			padding: clamp(var(--s-5), 5vw, var(--s-7));
		}

		.cpanel__inner,
		.cform {
			max-width: none;
		}

		.cmap__frame {
			aspect-ratio: 4 / 3;
		}
	}

	@media (max-width: 620px) {
		.cpanel {
			border-radius: var(--r-lg);
		}

		.cteam img,
		.cteam__more {
			inline-size: 3rem;
			block-size: 3rem;
		}

		.cform .mcf-grid {
			grid-template-columns: minmax(0, 1fr) !important;
		}

		/* Four two-line segments do not fit a phone; two rows of two do. */
		.cseg {
			grid-template-columns: repeat(2, 1fr);
			row-gap: 3px;
		}

		/* The thumb only tracks a single row, so it is dropped for a plain
		   filled state rather than left sliding to the wrong place. */
		.cseg .seg__thumb {
			display: none;
		}

		.cseg input:checked + .cseg__item {
			background: var(--c-ink);
			border-radius: var(--r-pill);
		}

		.cmap {
			border-radius: var(--r-lg);
		}

		.cmap__frame {
			aspect-ratio: 1 / 1;
		}

		/* Overlaid on a phone the card covers the map; it sits under it. */
		.cmap__card {
			position: static;
			max-inline-size: none;
			box-shadow: none;
			border-radius: 0;
		}
	}
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

@layer components {

	/* --- Intro ------------------------------------------------------------ */

	.arail {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--s-3);
		padding-block-end: var(--s-3);
		border-block-end: 1px solid var(--c-line);
	}

	.arail .eyebrow {
		margin-block-end: 0;
	}

	.arail__meta {
		font-size: var(--fs-xs);
		letter-spacing: 0.08em;
		color: var(--c-muted);
	}

	/* Contractica is TBCContracticaCAPS — a caps face, so in Georgian it sets
	   Mtavruli. That is the brand's voice for a short heading and it stays
	   here, but it is why it must never carry running text. */
	.astate {
		margin-block-start: clamp(var(--s-6), 4vw, var(--s-8));
		max-width: 16em;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
		/* Mkhedruli ascenders and descenders collide below about 1.0. */
		line-height: 1.06;
		letter-spacing: -0.01em;
		color: var(--c-ink);
	}

	/* One indent is the whole asymmetry. */
	.astate__2 {
		display: block;
		padding-inline-start: 6rem;
		color: var(--c-accent);
	}

	/* --- Proof rail ------------------------------------------------------- */

	.aproof {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
		margin-block-start: clamp(var(--s-7), 5vw, var(--s-9));
		border-block-start: 1px solid var(--c-line);
	}

	/* A floor height is the degrade contract: the rail is the same object
	   whether or not a certificate has been uploaded into the last cell. */
	.aproof__cell {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
		min-block-size: 9rem;
		padding: var(--s-5) var(--s-5) var(--s-5) 0;
	}

	.aproof__cell + .aproof__cell {
		padding-inline-start: var(--s-5);
		border-inline-start: 1px solid var(--c-line);
	}

	/* Numerals are Latin, so the caps face is an asset here rather than a
	   liability — this is the one place it belongs. */
	.aproof__n {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
		line-height: 1;
		color: var(--c-ink);
		font-variant-numeric: tabular-nums;
	}

	.aproof__k {
		margin-block-start: auto;
		font-size: var(--fs-xs);
		letter-spacing: 0.08em;
		color: var(--c-body);
	}

	.aproof__body {
		font-size: var(--fs-sm);
		font-weight: 600;
		line-height: 1.35;
		color: var(--c-ink);
		max-width: 14em;
	}

	.aproof__k--year {
		color: var(--c-muted);
	}

	.aproof__cert {
		display: block;
		block-size: 5rem;
		inline-size: auto;
		border-radius: var(--r-sm);
	}

	/* The only photography in the opening, and it costs nothing — the
	   portraits are already in the database. */
	.aproof__faces {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.aproof__faces li + li {
		margin-inline-start: -0.6rem;
	}

	.aproof__faces img {
		display: block;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid var(--c-surface);
		background: var(--c-surface-2);
	}

	/* --- Body copy -------------------------------------------------------- */

	/* One paragraph per column rather than a flowed two-column run: the copy
	   is exactly two paragraphs, so splitting them at the column keeps each
	   one whole instead of breaking a sentence across the gutter. The block
	   stops short of the wrap so the right edge stays open, the same
	   asymmetry the statement above it uses. */
	.acopy {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* ~45 Georgian characters a column. */
		gap: var(--s-5) clamp(var(--s-6), 4vw, var(--s-8));
		align-items: start;
		max-width: 62em;
		margin-block-start: clamp(var(--s-7), 5vw, var(--s-8));
		color: var(--c-body);
	}

	.acopy__cta {
		grid-column: 1 / -1;
	}

	.acopy p,
	.acopy li {
		line-height: 1.75;
	}

	.acopy__col > * + * {
		margin-block-start: var(--s-4);
	}

	.acopy__cta {
		margin-block-start: var(--s-2);
		grid-column: 1 / -1;
	}

	/* --- Team section header --------------------------------------------- */

	.ateam__head {
		max-width: 46rem;
		margin-inline: auto;
		margin-block-end: clamp(var(--s-6), 4vw, var(--s-8));
		text-align: center;
	}

	.ateam__eyebrow {
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--c-accent);
	}

	.ateam__title {
		margin-block-start: var(--s-3);
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(1.5rem, 2.2vw + 0.9rem, 2.5rem);
		line-height: 1.12;
		letter-spacing: -0.01em;
		text-wrap: balance;
		color: var(--c-ink);
	}

	/* --- Founder ---------------------------------------------------------- */

	.founder {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: clamp(var(--s-4), 2vw, var(--s-5));
		align-items: stretch;
		margin-block-end: clamp(var(--s-6), 4vw, var(--s-8));
	}

	.founder__portrait {
		position: relative;
		margin: 0;
		border-radius: var(--r-lg);
		overflow: clip;
		background: var(--c-surface-2);
		min-block-size: 100%;
	}

	.founder__portrait img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: 50% 30%;
	}

	/* The name reads off the plain wall in the photograph's top-left, but a
	   scrim rides under it so it stays legible if the portrait is swapped. */
	.founder__id {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		display: grid;
		gap: var(--s-1);
		padding: clamp(var(--s-5), 2.5vw, var(--s-6));
		background: linear-gradient(180deg, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 0%) 100%);
	}

	.founder__name {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(1.25rem, 1.8vw + 0.7rem, 1.875rem);
		line-height: 1.1;
		letter-spacing: -0.01em;
		color: var(--c-ink);
	}

	.founder__role {
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--c-accent);
	}

	.founder__letter {
		position: relative;
		display: grid;
		align-content: start;
		gap: var(--s-5);
		padding: clamp(var(--s-5), 3vw, var(--s-7));
		border-radius: var(--r-lg);
		background: var(--c-surface);
		color: var(--c-body);
	}

	.founder__letter p {
		line-height: 1.75;
		max-width: 34em;
	}

	/* The mark is absolutely positioned, so the opening line has to be told to
	   get out from under it. */
	.founder__letter > p:first-of-type {
		padding-inline-end: clamp(3rem, 5vw, 4rem);
	}

	.founder__quote {
		position: absolute;
		inset-block-start: clamp(var(--s-5), 3vw, var(--s-7));
		inset-inline-end: clamp(var(--s-5), 3vw, var(--s-7));
		inline-size: clamp(2rem, 3vw, 2.75rem);
		color: var(--c-accent);
		pointer-events: none;
	}

	.founder__quote svg {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}

	/* Three lines is past the point a pull quote works, so it is not one: body
	   type, one step up, with space doing the emphasis. */
	.founder__pull {
		font-weight: 600;
		font-size: var(--fs-md);
		line-height: 1.6;
		color: var(--c-ink);
	}

	.founder__sign {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: var(--s-4) var(--s-5);
		padding-block-start: var(--s-5);
		border-block-start: 1px solid var(--c-line);
	}

	.founder__sign-id {
		display: grid;
		gap: 2px;
	}

	.founder__sign-name {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--fs-md);
		color: var(--c-ink);
	}

	.founder__sign-role {
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	.founder__sign .tacts {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.founder__sign .tacts__more {
		margin-block-start: var(--s-3);
	}

	/* --- Team grid --------------------------------------------------------

	   There is no card. The portrait is the object and the caption is its
	   letterhead — no box, no border, no shadow, no tint behind it. A card,
	   a white matte inside that card, and three bordered icon discs were
	   between them the whole "template" read; all three are deleted rather
	   than restyled.

	   Four across, not five. At 245px a full-length studio portrait puts the
	   head at roughly 46px, and that absence of presence is what read as
	   weak — the fix is scale, not variety. The grid stays rigidly uniform:
	   fifteen agents who all need equal contact prominence must not be
	   ranked by tile size.
	   ---------------------------------------------------------------------- */

	.team-band {
		/* White, not the tint: a full-saturation terracotta portrait separates
		   from white far better than a white card ever did from #f6f4f2, and
		   the warm tint was competing with the backdrop hues. */
		background: var(--c-surface);
	}

	.pgrid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		/* The row gap is four times the photo-to-caption gap; that ratio is
		   what makes each caption visibly belong to its own portrait. */
		column-gap: var(--s-5);
		row-gap: clamp(var(--s-6), 4vw, var(--s-8));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.person {
		position: relative;
		isolation: isolate;
	}

	.person__media {
		position: relative;
		display: grid;
		place-items: center;
		aspect-ratio: 4 / 5;
		/* Sharp. A rounded tile inside a rounded card was two concentric
		   rounded rectangles — the definitive product-UI tell. */
		border-radius: 0;
		background: var(--c-surface-2);
		overflow: hidden;
	}

	.person__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: 50% 18%;
		/* No filter. The backdrops are the brand; desaturating them to 78%
		   is neither a colour statement nor a monochrome one. */
		filter: none;
		transition: scale var(--t-slow) var(--ease-out);
	}

	.person:hover .person__media img,
	.person:focus-within .person__media img {
		scale: 1.03;
	}

	.person__initial {
		display: grid;
		place-items: center;
		inline-size: 100%;
		block-size: 100%;
		background: #8f2410;
		font-family: var(--font-display);
		font-size: clamp(2rem, 6vw, 3.5rem);
		line-height: 1;
		color: rgb(255 255 255 / 78%);
	}

	.person__body {
		margin-block-start: var(--s-4);
	}

	/* Name and role at the same size, told apart by weight and colour. The
	   name is a caption; the photograph carries the drama. */
	.person__name {
		font-size: var(--fs-md);
		font-weight: 600;
		line-height: var(--lh-snug);
		letter-spacing: -0.01em;
		color: var(--c-ink);
	}

	.person__name a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.person__role {
		margin-block-start: var(--s-1);
		font-size: var(--fs-md);
		font-weight: 400;
		line-height: var(--lh-snug);
		color: var(--c-muted);
	}

	/* --- Contact: a letterhead, not a button bar -------------------------- */

	.tacts {
		position: relative;
		z-index: 1;
		margin-block-start: var(--s-3);
		padding-block-start: var(--s-3);
		border-block-start: 1px solid var(--c-line);
	}

	.tact {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		line-height: 1.2;
		color: var(--c-body);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.28em;
		text-decoration-color: rgb(74 74 74 / 35%);
		touch-action: manipulation;
		transition: color var(--t-fast) var(--ease);
	}

	/* A 44px target without drawing a 44px ring. The row gap below is what
	   keeps these slugs from overlapping and stealing each other's taps. */
	.tact::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		inline-size: max(44px, 100%);
		block-size: max(44px, 100%);
		translate: -50% -50%;
	}

	.tact:hover {
		color: var(--c-accent);
		text-decoration-color: currentcolor;
	}

	/* The number is the primary action — evidence the agent is reachable,
	   where an icon is only a promise, and a desktop visitor cannot dial an
	   icon. */
	.tact--tel {
		font-size: var(--fs-md);
		font-weight: 500;
		color: var(--c-ink-2);
		font-variant-numeric: tabular-nums;
	}

	.tacts__more {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-5);
		margin-block-start: var(--s-5);
		font-size: var(--fs-sm);
	}

	.tact svg {
		inline-size: 15px;
		block-size: 15px;
		flex: none;
	}

	/* --- Agent archive (author.php) --------------------------------------- */

	.pagent--profile {
		padding: var(--s-5);
		border: 1px solid var(--c-line);
		border-radius: var(--r-lg);
		background: var(--c-surface);
	}

	.pagent__count {
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	/* --- Responsive -------------------------------------------------------- */

	@media (max-width: 1000px) {
		/* Two columns of ~45 characters need about 1000px between them; below
		   that they starve, so the paragraphs stack. */
		.acopy {
			grid-template-columns: minmax(0, 1fr);
			max-width: 34em;
		}

		.founder {
			grid-template-columns: minmax(0, 1fr);
		}

		/* Stacked, a column-width portrait is far too tall; it becomes a
		   bounded crop with the name still riding on it. */
		.founder__portrait {
			min-block-size: 0;
			aspect-ratio: 16 / 10;
		}
	}

	@media (max-width: 1080px) {
		.pgrid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (max-width: 620px) {
		/* The indent is the asymmetry at desktop; on a phone it is just a
		   ragged left edge. */
		.astate__2 {
			padding-inline-start: 0;
		}

		/* Two cells a row, with the hairlines redrawn to suit: the vertical
		   rule only makes sense between cells that share a row. */
		.aproof {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.aproof__cell {
			min-block-size: 7rem;
			padding-inline: 0 var(--s-4);
		}

		.aproof__cell + .aproof__cell {
			padding-inline-start: var(--s-4);
		}

		.aproof__cell:nth-child(odd) {
			padding-inline-start: 0;
			border-inline-start: 0;
		}

		.aproof__cell:nth-child(n + 3) {
			border-block-start: 1px solid var(--c-line);
		}

		.pgrid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: var(--s-4);
		}
	}
}

/* ==========================================================================
   AGENT PROFILE (author.php)
   ========================================================================== */

@layer components {

	/* The band sits straight under the fixed header, so the section's full
	   96px on top read as a hole before the breadcrumb, not as a margin. */
	.agp-band {
		padding-block: clamp(var(--s-5), 3vw, var(--s-6)) clamp(var(--s-7), 5vw, var(--s-8));
	}

	.agp-band .crumbs {
		margin-block-end: clamp(var(--s-5), 3vw, var(--s-6));
	}

	/* Two columns: the photo, and one block beside it centred on it — role,
	   name, count, bio, then the ways to get in touch. */
	.agp {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		column-gap: clamp(var(--s-6), 4vw, var(--s-8));
		align-items: center;
	}

	.agp__photo {
		position: relative;
		display: grid;
		place-items: center;
		aspect-ratio: 4 / 5;
		border-radius: var(--r-lg);
		overflow: hidden;
		background: var(--c-surface);
	}

	.agp__photo img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		/* Chins and foreheads both survive a 4:5 crop of a 3:4 portrait. */
		object-position: 50% 25%;
	}

	.agp__body {
		display: grid;
		justify-items: start;
		max-inline-size: 44rem;
	}

	.agp__head .eyebrow {
		margin-block-end: var(--s-3);
	}

	/* Beats the base layer's h1 (--fs-3xl, up to 64px) because components is a
	   later layer — no specificity trick needed. A name is a name, not a hero. */
	.agp__name {
		font-family: var(--font-display);
		font-size: clamp(1.75rem, 3.2vw, 2.75rem);
		line-height: 1.06;
		letter-spacing: -0.01em;
		color: var(--c-ink);
		overflow-wrap: anywhere;
	}

	.agp__count {
		margin-block-start: var(--s-3);
		font-size: var(--fs-sm);
		color: var(--c-muted);
		font-variant-numeric: tabular-nums;
	}

	.agp__count strong {
		font-weight: 600;
		color: var(--c-ink);
	}

	.agp__bio {
		margin-block-start: var(--s-5);
		max-width: 60ch;
		/* Explicit: never inherit the caps display face into running text. */
		font-family: var(--font-body);
		line-height: var(--lh-normal);
		color: var(--c-body);
	}

	.agp__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
		margin-block-start: var(--s-6);
	}

	.agp__actions .btn {
		min-block-size: 3rem;
		padding-inline: 1.25rem;
		font-size: var(--fs-base);
	}

	.agp__actions .btn svg {
		inline-size: 1.125rem;
		block-size: 1.125rem;
		flex: none;
	}

	.agp__call {
		font-variant-numeric: tabular-nums;
	}

	/* Secondary channels: white on the tint, one hairline — present, but
	   clearly behind the call button. */
	.agp__alt {
		border: 1px solid var(--c-line);
		background: var(--c-surface);
		color: var(--c-ink);
	}

	.agp__alt:hover {
		border-color: var(--c-ink);
		color: var(--c-ink);
	}

	@media (max-width: 1000px) {
		.agp {
			grid-template-columns: 12rem minmax(0, 1fr);
		}
	}

	/* Phone: a small portrait beside the name, then bio and actions across
	   the full width. The body's children join the grid directly. */
	@media (max-width: 620px) {
		.agp {
			grid-template-columns: 5.5rem minmax(0, 1fr);
			grid-template-areas:
				"photo head"
				"bio bio"
				"actions actions";
			column-gap: var(--s-4);
		}

		.agp__photo {
			grid-area: photo;
			border-radius: var(--r-md);
		}

		.agp__body {
			display: contents;
		}

		.agp__head {
			grid-area: head;
		}

		.agp__head .eyebrow {
			margin-block-end: var(--s-2);
			font-size: var(--fs-xs);
		}

		.agp__bio {
			grid-area: bio;
		}

		.agp__actions {
			grid-area: actions;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			margin-block-start: var(--s-5);
		}

		/* The number gets the whole first row; the other two share the next. */
		.agp__call {
			grid-column: 1 / -1;
		}

		.agp__actions .btn {
			justify-content: center;
		}
	}
}

/* ==========================================================================
   ACADEMY
   ========================================================================== */

@layer components {

	/* --- Hero --------------------------------------------------------------- */

	.acad-hero {
		position: relative;
		display: flex;
		align-items: end;
		min-block-size: clamp(16rem, 30vw, 26rem);
		padding-block: clamp(var(--s-7), 6vw, var(--s-9)) clamp(var(--s-6), 4vw, var(--s-8));
		border-end-end-radius: var(--hero-radius);
		overflow: clip;
		background: var(--c-dark);
		isolation: isolate;
	}

	.acad-hero__bg {
		position: absolute;
		inset: 0;
		z-index: -1;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		opacity: 0.55;
	}

	.acad-hero__inner {
		position: relative;
	}

	.acad-hero__title {
		font-family: var(--font-display);
		font-size: clamp(1.5rem, 3vw + 0.8rem, 2.75rem);
		line-height: 1.1;
		letter-spacing: -0.01em;
		color: #fff;
		text-wrap: balance;
	}

	/* --- Two-column body ----------------------------------------------------- */

	/* The column must stretch, not shrink-wrap. `align-items: start` sized the
	   aside to the form's own height, which left the sticky child zero room to
	   travel — the panel scrolled away with the page and looked broken. Letting
	   the track stretch to the main column gives it the full run. */
	.acad-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
		gap: clamp(var(--s-6), 4vw, var(--s-8));
		align-items: stretch;
	}

	.acad-aside__inner {
		position: sticky;
		inset-block-start: calc(var(--header-h) + var(--s-5));
	}

	.acad-main > * + * {
		margin-block-start: clamp(var(--s-7), 5vw, var(--s-8));
	}

	/* --- Why ----------------------------------------------------------------- */

	.acad-why {
		display: grid;
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
		gap: clamp(var(--s-5), 3vw, var(--s-6));
		align-items: start;
	}

	.acad-why__media img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		border-radius: var(--r-lg);
	}

	.acad-h2 {
		font-family: var(--font-display);
		font-size: clamp(1.25rem, 1.6vw + 0.8rem, 1.75rem);
		line-height: 1.15;
		letter-spacing: -0.01em;
		color: var(--c-ink);
	}

	.acad-why__text {
		margin-block-start: var(--s-4);
		line-height: 1.7;
		color: var(--c-body);
	}

	.acad-why__text > * + * {
		margin-block-start: var(--s-3);
	}

	.acad-why__text strong {
		color: var(--c-ink);
	}

	/* --- Video button --------------------------------------------------------- */

	.acad-play {
		margin-block-start: var(--s-5);
	}

	.acad-play__btn {
		display: inline-flex;
		align-items: center;
		gap: var(--s-3);
		padding: 0.4rem 0.4rem 0.4rem 1.1rem;
		border: 1px solid var(--c-line);
		border-radius: var(--r-pill);
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--c-ink);
		cursor: pointer;
		transition: border-color var(--t-fast) var(--ease);
	}

	.acad-play__btn:hover {
		border-color: var(--c-ink);
	}

	.acad-play__ico {
		display: grid;
		place-items: center;
		inline-size: 2rem;
		block-size: 2rem;
		border-radius: 50%;
		background: var(--c-accent);
	}

	/* A triangle, drawn — no glyph to load. */
	.acad-play__ico::before {
		content: "";
		inline-size: 0;
		block-size: 0;
		margin-inline-start: 3px;
		border-block: 6px solid transparent;
		border-inline-start: 9px solid #fff;
	}

	.acad-play video {
		display: block;
		inline-size: 100%;
		max-inline-size: 20rem;
		block-size: auto;
		aspect-ratio: 9 / 16;
		border-radius: var(--r-lg);
		background: var(--c-ink);
	}

	/* --- Fact groups ---------------------------------------------------------- */

	.acad-group__title {
		font-size: var(--fs-md);
		font-weight: 600;
		color: var(--c-ink);
		margin-block-end: var(--s-4);
	}

	.acad-facts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
		gap: var(--s-4);
		margin: 0;
	}

	/* Label above value, an accent rule down the side — a label and its value
	   were both <h2> before, which is why the old page read as forty headings. */
	.acad-fact {
		padding: var(--s-3) var(--s-4);
		border: 1px solid var(--c-line);
		border-inline-start: 3px solid var(--c-accent);
		border-radius: var(--r-sm);
	}

	.acad-fact dt {
		font-size: var(--fs-xs);
		color: var(--c-muted);
	}

	.acad-fact dd {
		margin: 2px 0 0;
		font-weight: 700;
		line-height: 1.35;
		color: var(--c-ink);
	}

	/* --- Outcomes -------------------------------------------------------------- */

	/* Two across, as in the reference — auto-fit found room for three in the
	   main column and broke the 2x2 the four outcomes are written for. */
	.acad-out {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-4);
		margin: var(--s-5) 0 0;
		padding: 0;
		list-style: none;
	}

	.acad-out__item {
		padding: var(--s-5);
		border: 1px solid var(--c-line);
		border-radius: var(--r-md);
	}

	.acad-out__h {
		font-size: var(--fs-base);
		font-weight: 700;
		line-height: 1.4;
		color: var(--c-ink);
	}

	.acad-out__p {
		margin-block-start: var(--s-3);
		font-size: var(--fs-sm);
		line-height: 1.65;
		color: var(--c-body);
	}

	/* --- Speakers --------------------------------------------------------------- */

	/* Four portraits across a column this narrow gave 212px-wide cards standing
	   866px tall. The column cannot carry a portrait grid, so the card lies down
	   instead: a fixed-width photo beside the name, two across. */
	.acad-spk {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
		gap: var(--s-4);
		margin: var(--s-5) 0 0;
		padding: 0;
		list-style: none;
	}

	.acad-spk li {
		display: flex;
		align-items: center;
		gap: var(--s-4);
		padding: var(--s-3);
		border: 1px solid var(--c-line);
		border-radius: var(--r-md);
		background: var(--c-surface);
	}

	/* `block-size: auto` is load-bearing: the markup carries width/height
	   attributes, and a presentational height counts as a specified size —
	   with both axes specified the aspect-ratio is ignored and the photo
	   rendered at its full 750px. */
	.acad-spk img {
		display: block;
		flex: none;
		inline-size: 8.5rem;
		block-size: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		object-position: 50% 20%;
		border-radius: calc(var(--r-md) - 3px);
	}

	.acad-spk__name {
		font-weight: 700;
		line-height: 1.3;
		color: var(--c-ink);
	}

	.acad-spk__role {
		margin-block-start: 4px;
		font-size: var(--fs-sm);
		line-height: 1.45;
		color: var(--c-muted);
	}

	/* --- Syllabus ---------------------------------------------------------------- */

	.acad-syl {
		display: grid;
		gap: var(--s-2);
		margin-block-start: var(--s-5);
	}

	/* The open/close animation is driven from JS (initSyllabus), deliberately.
	   The CSS-only ::details-content recipe hides the panel behind
	   `content-visibility: hidden` and relies on a discrete transition to
	   reveal it — so anything that stops the animation timeline leaves the
	   syllabus permanently collapsed. Scripting it keeps the failure mode
	   right way up: with no JS, <details> just opens instantly on its own. */

	.acad-syl__sum {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-4);
		padding: var(--s-4) var(--s-5);
		border-radius: var(--r-sm);
		background: var(--c-surface-2);
		font-size: var(--fs-sm);
		font-weight: 600;
		line-height: 1.4;
		color: var(--c-ink);
		cursor: pointer;
		list-style: none;
		transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	}

	.acad-syl__sum::-webkit-details-marker {
		display: none;
	}

	.acad-syl__sum:hover {
		background: rgb(20 16 12 / 8%);
	}

	/* The open lecture takes the accent bar, as in the reference. */
	.acad-syl__item[open] .acad-syl__sum {
		background: var(--c-accent);
		color: var(--c-accent-ink);
	}

	.acad-syl__mark {
		position: relative;
		flex: none;
		inline-size: 1rem;
		block-size: 1rem;
	}

	.acad-syl__mark::before,
	.acad-syl__mark::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		inline-size: 100%;
		block-size: 2px;
		background: currentcolor;
		translate: 0 -50%;
		transition: rotate var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease);
	}

	.acad-syl__mark::after {
		rotate: 90deg;
	}

	.acad-syl__item[open] .acad-syl__mark::after {
		rotate: 0deg;
		opacity: 0;
	}

	.acad-syl__list {
		display: grid;
		gap: var(--s-2);
		margin: var(--s-4) 0 var(--s-5);
		padding-inline-start: calc(var(--s-5) + var(--s-3));
		color: var(--c-body);
	}

	.acad-syl__list li {
		font-size: var(--fs-sm);
		line-height: 1.6;
	}

	.acad-syl__list li::marker {
		color: var(--c-accent);
	}

	/* --- Responsive ---------------------------------------------------------------- */

	@media (max-width: 1000px) {
		.acad-layout {
			grid-template-columns: minmax(0, 1fr);
		}

		.acad-aside__inner {
			position: static;
		}
	}

	@media (max-width: 620px) {
		.acad-out {
			grid-template-columns: minmax(0, 1fr);
		}

		/* Below this the lying-down card has no room for a photo beside the
		   text, so it stands back up at a size the width can carry. */
		.acad-spk li {
			flex-direction: column;
			align-items: flex-start;
		}

		.acad-spk img {
			inline-size: 100%;
			aspect-ratio: 3 / 2;
			object-position: 50% 25%;
		}

		.acad-why {
			grid-template-columns: minmax(0, 1fr);
		}

		.acad-why__media img {
			max-block-size: 18rem;
			object-fit: cover;
		}

		.acad-syl__sum {
			padding-inline: var(--s-4);
		}

		.acad-syl__list {
			padding-inline-start: var(--s-6);
		}
	}
}