/**
 * Design scale.
 *
 * The ar-* design system is drawn in 1920px space (--content-max: 1840px).
 * The approved static page shows that canvas at scale(0.75) in a 1440px
 * window, so the theme reproduces the same proportions by making 1rem track
 * the viewport: 1rem = 16 design px at 1920, 12px at 1440.
 *
 * Below 1024px the root returns to 16px and the stylesheet's own breakpoints
 * take over, so phones get readable text instead of a shrunken desktop.
 */

html {
	font-size: 16px;
}

@media (min-width: 1024px) {
	html {
		/*
		 * 16 / 1920 = 0.8333vw reproduces the reference exactly, but with no
		 * lower bound the text keeps shrinking below 1920: 15px body copy at
		 * 1440 and 13px at 1280, which is too small to read comfortably.
		 * The floor keeps the proportions while holding body copy at ~19px
		 * on every normal desktop width.
		 */
		font-size: clamp(15px, 0.8333vw, 16px);
	}
}

@media (min-width: 1920px) {
	html {
		font-size: 16px;
	}
}

/**
 * WordPress-specific additions to the design system in main.css.
 *
 * Only components that the static site never had: the article layout, blog
 * archive chrome, pagination, form status messages and editor output.
 */

/* ---------------------------------------------------------------
   Accessibility helpers
   --------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ar-skip-link:focus {
	background: var(--color-white, #fff);
	clip-path: none;
	color: var(--color-dark, #030b1a);
	height: auto;
	left: 1rem;
	padding: 0.75rem 1.25rem;
	top: 1rem;
	width: auto;
	z-index: 1000;
}

/* The honeypot must be reachable by bots but invisible to people. */
.ar-hp {
	left: -624.9375rem;
	position: absolute;
	visibility: hidden;
}

/* ---------------------------------------------------------------
   Blog archive chrome
   --------------------------------------------------------------- */

.ar-blog__header {
	margin-bottom: 2.5rem;
}

.ar-blog__intro {
	color: var(--color-muted, #5a6273);
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 1.125rem;
	line-height: 1.55;
	max-width: 47.5rem;
}

.ar-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 2.5rem;
}

.ar-blog__filter {
	border: 1px solid var(--color-border, rgba(3, 11, 26, 0.14));
	border-radius: 62.4375rem;
	color: var(--color-dark, #030b1a);
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.5rem 1.125rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ar-blog__filter:hover,
.ar-blog__filter.is-active {
	background: var(--color-dark, #030b1a);
	border-color: var(--color-dark, #030b1a);
	color: var(--color-white, #fff);
}

.ar-blog__empty {
	color: var(--color-muted, #5a6273);
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 1.125rem;
	padding: 2.5rem 0 5rem;
}

.ar-blog-card__title a {
	color: inherit;
	text-decoration: none;
}

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

.ar-pagination {
	display: flex;
	justify-content: center;
	margin: 3.5rem 0 1.5rem;
}

.ar-pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ar-pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--color-border, rgba(3, 11, 26, 0.14));
	border-radius: 0.5rem;
	color: var(--color-dark, #030b1a);
	display: inline-flex;
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	justify-content: center;
	min-height: 2.5rem;
	min-width: 2.5rem;
	padding: 0 0.75rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.ar-pagination .page-numbers:hover,
.ar-pagination .page-numbers.current {
	background: var(--color-dark, #030b1a);
	color: var(--color-white, #fff);
}

.ar-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ---------------------------------------------------------------
   Single article
   --------------------------------------------------------------- */

.ar-article {
	padding-top: 8.75rem;
}

.ar-article__hero-inner,
.ar-article__body,
.ar-article__terms {
	margin: 0 auto;
	max-width: 47.5rem;
	padding: 0 1.5rem;
}

.ar-article__title {
	font-family: var(--font-manrope, Manrope, sans-serif);
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 1.25rem 0 0;
}

.ar-article__lead {
	color: var(--color-muted, #5a6273);
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 1.25rem;
	line-height: 1.55;
	margin: 1.25rem 0 0;
}

.ar-article__meta {
	color: var(--color-muted, #5a6273);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 0.875rem;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
}

.ar-article__meta-item + .ar-article__meta-item {
	position: relative;
}

.ar-article__meta-item + .ar-article__meta-item::before {
	content: "·";
	left: -0.75rem;
	position: absolute;
}

.ar-article__cover {
	margin: 3rem auto 0;
	max-width: 75rem;
	padding: 0 1.5rem;
}

.ar-article__cover img {
	border-radius: 1rem;
	display: block;
	height: auto;
	width: 100%;
}

.ar-article__cover figcaption {
	color: var(--color-muted, #5a6273);
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 0.875rem;
	margin-top: 0.75rem;
}

.ar-article__body {
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 1.125rem;
	line-height: 1.7;
	padding-bottom: 2.5rem;
	padding-top: 3rem;
}

.ar-article__body > * + * {
	margin-top: 1.5rem;
}

.ar-article__body h2 {
	font-family: var(--font-manrope, Manrope, sans-serif);
	font-size: 2rem;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-top: 3rem;
}

.ar-article__body h3 {
	font-family: var(--font-manrope, Manrope, sans-serif);
	font-size: 1.5rem;
	line-height: 1.25;
	margin-top: 2.25rem;
}

.ar-article__body a {
	color: var(--color-dark, #030b1a);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.ar-article__body img,
.ar-article__body iframe {
	border-radius: 0.75rem;
	height: auto;
	max-width: 100%;
}

.ar-article__body blockquote {
	border-left: 0.1875rem solid var(--color-dark, #030b1a);
	font-size: 1.25rem;
	font-style: italic;
	margin-left: 0;
	padding-left: 1.5rem;
}

.ar-article__body ul,
.ar-article__body ol {
	padding-left: 1.375rem;
}

.ar-article__body li + li {
	margin-top: 0.5rem;
}

.ar-article__body figure,
.ar-article__body .wp-block-table {
	overflow-x: auto;
}

.ar-article__body table {
	border-collapse: collapse;
	width: 100%;
}

.ar-article__body th,
.ar-article__body td {
	border: 1px solid var(--color-border, rgba(3, 11, 26, 0.14));
	padding: 0.625rem 0.875rem;
	text-align: left;
}

.ar-article__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	padding-bottom: 4rem;
}

.ar-article__terms a {
	border: 1px solid var(--color-border, rgba(3, 11, 26, 0.14));
	border-radius: 62.4375rem;
	color: var(--color-dark, #030b1a);
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 0.8125rem;
	padding: 0.375rem 0.875rem;
	text-decoration: none;
}

.ar-article__comments {
	padding-bottom: 5rem;
}

/* ---------------------------------------------------------------
   Default page template
   --------------------------------------------------------------- */

.ar-page {
	padding-top: 8.75rem;
}

.ar-page__title {
	font-family: var(--font-manrope, Manrope, sans-serif);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.ar-page__body {
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 1.125rem;
	line-height: 1.7;
	padding: 2rem 0 5rem;
}

.ar-page__body > .ar-container > * + * {
	margin-top: 1.5rem;
}

/* ---------------------------------------------------------------
   Form status messages
   --------------------------------------------------------------- */

.ar-form-status {
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0.75rem 0 0;
	min-height: 1.5em;
}

.ar-form-status--error {
	color: #c0392b;
}

.ar-form-status--success {
	color: #1e8449;
}

.ar-popup__form .ar-form-status {
	color: var(--color-white, #fff);
}

.ar-popup__form .ar-form-status--error {
	color: #ffb4a8;
}

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

@media (max-width: 768px) {
	.ar-article,
	.ar-page {
		padding-top: 6.25rem;
	}

	.ar-article__body {
		font-size: 1.0625rem;
		padding-top: 2rem;
	}

	.ar-article__body h2 {
		font-size: 1.625rem;
	}
}

/* ---------------------------------------------------------------
   Comments
   --------------------------------------------------------------- */

.ar-comments {
	font-family: var(--font-inter, Inter, sans-serif);
	margin: 0 auto;
	max-width: 47.5rem;
	padding: 0 1.5rem 5rem;
}

.ar-comments__title {
	font-family: var(--font-manrope, Manrope, sans-serif);
	font-size: 1.75rem;
	letter-spacing: -0.02em;
	margin-bottom: 1.75rem;
}

.ar-comments__list,
.ar-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ar-comments__list .children {
	border-left: 1px solid var(--color-border, rgba(3, 11, 26, 0.14));
	margin-left: 1.5rem;
	padding-left: 1.5rem;
}

.ar-comments__list li.comment {
	border-bottom: 1px solid var(--color-border, rgba(3, 11, 26, 0.14));
	padding: 1.5rem 0;
}

.ar-comments__list .comment-author {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: 0.75rem;
}

.ar-comments__list .comment-author img {
	border-radius: 50%;
}

.ar-comments__list .comment-metadata {
	color: var(--color-muted, #5a6273);
	font-size: 0.8125rem;
	margin: 0.375rem 0 0.75rem;
}

.ar-comments__list .comment-metadata a {
	color: inherit;
}

.ar-comments__list .reply {
	margin-top: 0.75rem;
}

.ar-comments__list .reply a {
	color: var(--color-dark, #030b1a);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
}

.ar-comments .comment-respond {
	margin-top: 3rem;
}

.ar-comments .comment-reply-title {
	font-family: var(--font-manrope, Manrope, sans-serif);
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	margin-bottom: 0.5rem;
}

.ar-comments .comment-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.ar-comments .comment-form p {
	margin-bottom: 1.125rem;
}

.ar-comments .comment-form input[type="text"],
.ar-comments .comment-form input[type="email"],
.ar-comments .comment-form input[type="url"],
.ar-comments .comment-form textarea {
	border: 1px solid var(--color-border, rgba(3, 11, 26, 0.14));
	border-radius: 0.625rem;
	font: inherit;
	padding: 0.75rem 1rem;
	width: 100%;
}

.ar-comments .comment-form textarea {
	min-height: 8.75rem;
	resize: vertical;
}

.ar-comments .comment-form .comment-form-cookies-consent {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.ar-comments .comment-form .comment-form-cookies-consent label {
	font-weight: 400;
	margin: 0;
}

.ar-comments .comment-form input[type="submit"] {
	background: var(--color-dark, #030b1a);
	border: 0;
	border-radius: 62.4375rem;
	color: var(--color-white, #fff);
	cursor: pointer;
	font-family: var(--font-inter, Inter, sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.875rem 2rem;
	text-transform: uppercase;
	transition: opacity 0.2s;
}

.ar-comments .comment-form input[type="submit"]:hover {
	opacity: 0.85;
}


/* Frosted-glass hero panel, as on the reference About page: no tint, just a
   heavy blur of the photo behind it, with dark text. */

.ar-hero__panel--frosted {
	align-self: center;
	backdrop-filter: blur(4.3375rem);
	-webkit-backdrop-filter: blur(4.3375rem);
	/* A light scrim over the blur: the reference photo is darker behind the
	   panel, so without it the paragraph loses contrast on bright images. */
	background: rgba(255, 255, 255, 0.22);
	border-radius: var(--radius-md);
	max-width: 55.7rem;
}

.ar-hero__panel--frosted .ar-hero__title,
.ar-hero__panel--frosted .ar-hero__desc,
.ar-hero__panel--frosted .ar-hero__breadcrumb,
.ar-hero__panel--frosted .ar-hero__breadcrumb a {
	color: var(--color-dark);
}

.ar-hero__panel--frosted .ar-hero__desc {
	color: var(--color-muted);
}

/* ---------------------------------------------------------------
   About page: four numbered blocks in a 2x2 grid
   --------------------------------------------------------------- */

.ar-about-grid {
	background: var(--color-white);
	padding: 5rem 0;
}

.ar-about-grid__inner {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--content-max);
	padding: 0 var(--section-px);
}

.ar-about-grid__cell {
	border-bottom: 1px solid var(--color-border-2);
	display: flex;
	gap: 2.5rem;
	padding: 2.5rem 0;
}

.ar-about-grid__num {
	color: var(--color-white);
	background: var(--color-dark);
	border-radius: 999px;
	flex-shrink: 0;
	font-family: var(--font-inter);
	font-size: 0.875rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: -0.035rem;
	padding: 0 0.875rem;
}

.ar-about-grid__title {
	font-family: var(--font-inter);
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.15rem;
	line-height: 1.05;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.ar-about-grid__text {
	color: var(--color-muted);
	font-family: var(--font-inter);
	font-size: 1.25rem;
	letter-spacing: -0.075rem;
	line-height: 1.5;
	margin: 0;
	max-width: 34rem;
}

.ar-about-grid__list {
	color: var(--color-muted);
	font-family: var(--font-inter);
	font-size: 1.25rem;
	letter-spacing: -0.075rem;
	line-height: 1.6;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ar-about-grid__list li::before {
	content: "• ";
}

@media (min-width: 900px) {
	.ar-about-grid__inner {
		column-gap: 5rem;
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------------------------------------------------------------
   Hover and typography corrections
   --------------------------------------------------------------- */

/* The service tiles sit inside a bordered, rounded grid that clips its
   children, so a lift moved the tile under the clip and cut its edges.
   DESIGN_REFERENCE allows colour-only hover here, which is also what the
   shared-border grid needs. */
.ar-service-tile:hover {
	transform: none;
}

/* "Inter Tight" was never loaded, so every rule using it fell back to the
   system sans. The reference sets these in Inter, so the variable now points
   there instead of pulling in another font file. */
:root {
	--font-inter-tight: 'Inter', sans-serif;
}

/* Native select options inherit the system font unless told otherwise. */
option {
	font-family: var(--font-inter);
}

/* These two hold at every width: they correct how images behave, not the
   type scale. */

.ar-listings-cta__bg img {
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	width: 100%;
}

.ar-listings-cta__content {
	position: relative;
	z-index: 1;
}

/* The parity layer reproduces the reference at desktop widths only.
   Below 1024px the design system's own breakpoints govern. */

@media (min-width: 1024px) {
	/* ===============================================================
	   Design parity with the approved static page.

	   Values below were measured from the rendered index.html and are
	   expressed in the 1920px design space (1rem = 16 design px), so the
	   theme reproduces the reference exactly at any width.
	   The reference sets every text style in Inter with tight negative
	   tracking; these rules replace the places where the stylesheet had
	   drifted to Inter Tight or Manrope.
	   =============================================================== */

	/* --- Section headings: 78 design px ------------------------------ */

	.ar-about__area-title,
	.ar-listings__title,
	.ar-reviews-section__title,
	.ar-blog__title,
	.ar-hero-main__title,
	.ar-listings-cta__title,
	.ar-about__title {
		font-family: var(--font-inter);
		font-size: 4.875rem;
		font-weight: 700;
		letter-spacing: -0.2925rem;
		line-height: 1;
		text-transform: uppercase;
	}

	/* --- Services heading: 72 design px ------------------------------ */

	.ar-services-main__title {
		font-family: var(--font-inter);
		font-size: 4.5rem;
		font-weight: 700;
		letter-spacing: -0.27rem;
		line-height: 0.95;
		text-transform: uppercase;
	}

	/* --- Body copy, links and buttons: 20 design px ------------------ */

	.ar-hero-main__desc,
	.ar-listings-cta__desc,
	.ar-listing-card__address,
	.ar-service-tile__desc,
	.ar-about__desc,
	.ar-listing-card__link,
	.ar-service-tile__link,
	.ar-btn--lg {
		font-family: var(--font-inter);
		font-size: 1.25rem;
		letter-spacing: -0.075rem;
	}

	.ar-btn--lg {
		font-weight: 700;
	}

	/* --- Stats ------------------------------------------------------- */

	.ar-about__stat {
		border: 0;
		padding: 0 0 2.25rem;
	}

	.ar-about__stat:first-child {
		border-top: 0;
	}

	.ar-about__stat-label {
		font-family: var(--font-inter);
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: -0.05rem;
		margin-bottom: 0.25rem;
	}

	.ar-about__stat-big {
		font-family: var(--font-inter);
		font-size: 3rem;
		font-weight: 600;
		letter-spacing: -0.21rem;
		text-transform: uppercase;
	}

	.ar-about__stat-small {
		font-family: var(--font-inter);
		font-size: 1.5rem;
		font-weight: 400;
		letter-spacing: -0.075rem;
	}

	/* --- Eyebrows: sentence case, 24 design px ----------------------- */

	.ar-about__label {
		font-family: var(--font-inter);
		font-size: 1.5rem;
		font-weight: 400;
		letter-spacing: -0.075rem;
		text-transform: none;
	}

	/* --- Listing cards ----------------------------------------------- */

	.ar-listing-card__type,
	.ar-listing-card__price {
		font-family: var(--font-inter);
		font-size: 1.5rem;
		font-weight: 700;
		letter-spacing: -0.075rem;
		text-transform: uppercase;
	}

	.ar-listing-card__address {
		line-height: 1.1;
	}

	/* --- Review badges ------------------------------------------------ */

	.ar-review-badge__primary {
		font-family: var(--font-inter);
		font-size: 1.125rem;
		font-weight: 500;
		letter-spacing: -0.045rem;
		text-transform: uppercase;
	}

	.ar-review-badge__secondary {
		font-family: var(--font-inter);
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: -0.035rem;
		text-transform: capitalize;
		color: rgba(255, 255, 255, 0.45);
	}

	/* --- Ticker: centred, 26.3 design px ------------------------------ */

	.ar-ticker__text {
		font-family: var(--font-inter);
		font-size: 1.645rem;
		font-weight: 500;
		letter-spacing: -0.0656rem;
		text-align: center;
		text-transform: uppercase;
		color: var(--color-light);
	}

	/* --- Hero: centred column, eyebrow beside the first title line ---- */

	.ar-hero-main__content {
		margin: 0 auto;
		max-width: 76.25rem;
		width: 100%;
	}

	.ar-hero-main__badges {
		margin: 3.75rem auto 0;
		max-width: 76.25rem;
		width: 100%;
	}

	.ar-hero-main__eyebrow {
		float: left;
		font-family: var(--font-inter);
		font-size: 1.125rem;
		font-weight: 600;
		letter-spacing: -0.0675rem;
		line-height: 1.25;
		margin: 0.5rem 1.5rem 0 0;
		max-width: 9rem;
		text-transform: uppercase;
	}

	/* --- Front page header sits on top of the hero -------------------- */

	.ar-body--home .ar-header {
		background: transparent;
		border-bottom: 0;
		position: absolute;
		width: 100%;
	}

	.ar-body--home .ar-header .ar-logo__text,
	.ar-body--home .ar-header .ar-nav__link,
	.ar-body--home .ar-header .ar-menu-btn,
	.ar-body--home .ar-header__contact-phone,
	.ar-body--home .ar-header__contact-email,
	.ar-body--home .ar-header__contacts-label,
	.ar-body--home .ar-header .ar-lang {
		color: var(--color-white);
	}

	.ar-body--home .ar-header .ar-logo__icon,
	.ar-body--home .ar-header .ar-menu-btn img {
		filter: brightness(0) invert(1);
	}

	.ar-body--home .ar-header .ar-menu-btn,
	.ar-body--home .ar-header .ar-lang {
		border-color: rgba(255, 255, 255, 0.45);
	}

	/* --- Valuation card is inset from the page edges ------------------ */

	.ar-valuation {
		background: var(--color-light);
		padding: 0 2.5rem 5rem;
	}

	.ar-valuation .ar-listings-cta {
		margin: 0 auto;
		max-width: var(--content-max);
	}

	/* --- Line breaks and block heights matched to the reference ------- */

	/* The reference hero is 903 design px tall, with the title breaking
	   after "REAL ESTATE" and again after "SERVICES IN". */
	.ar-hero-main {
		justify-content: flex-end;
		min-height: 56.4375rem;
		padding-bottom: 5.125rem;
		padding-top: 11.625rem;
	}

	.ar-hero-main__desc {
		max-width: 35.4rem;
	}

	/* Headings carry their own line breaks from the editor, so they are not
	   constrained here; only the hero paragraph keeps a measure. */

	/* --- Listings header button is a solid white pill ----------------- */

	.ar-listings__rent-link.ar-btn {
		background: var(--color-light);
		color: var(--color-dark);
		opacity: 1;
	}


	/* --- Listing cards: photo inset inside the card ------------------- */

	.ar-listing-card {
		padding: 0.75rem;
	}

	.ar-listing-card__image {
		border-radius: 1rem;
		height: 17.25rem;
	}

	.ar-listing-card__badge {
		border-radius: 0.375rem;
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: -0.035rem;
		padding: 0.375rem 0.875rem;
		text-transform: uppercase;
	}

	.ar-listing-card__body {
		padding: 1.25rem 0.75rem 0.5rem;
	}

	/* --- Reviews heading keeps its own two lines --------------------- */

	.ar-reviews-section__header {
		align-items: center;
	}

	.ar-reviews-section__title {
		flex: 1 1 auto;
		margin: 0;
		max-width: none;
	}

	.ar-reviews-nav-btn img {
		height: 1.25rem;
		width: 1.25rem;
	}


	/* --- Listing stats row: icon, value, hairline separator ----------- */

	.ar-listing-card__stat {
		align-items: center;
		display: inline-flex;
		font-family: var(--font-inter);
		font-size: 1rem;
		gap: 0.375rem;
		letter-spacing: -0.05rem;
		line-height: 1.1;
		text-transform: lowercase;
	}

	.ar-listing-card__stat img {
		height: 1rem;
		width: auto;
	}

	.ar-listing-card__stat-sep {
		background: var(--color-border-2);
		display: inline-block;
		height: 1.25rem;
		width: 1px;
	}

	/* --- Valuation card content starts where the reference puts it ---- */

	.ar-valuation .ar-listings-cta {
		padding-left: 14.5rem;
	}

}

/* The portrait is framed on the face, not the centre of the photo. */

.ar-about__video-img {
	object-position: center 28%;
}

/* ---------------------------------------------------------------
   Contact page
   --------------------------------------------------------------- */

.ar-contact-page {
	background: var(--color-light);
	padding: 9rem 0 5rem;
}

.ar-contact-page__inner {
	display: grid;
	gap: 4rem;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--content-max);
	padding: 0 var(--section-px);
}

.ar-contact-page__title {
	font-family: var(--font-inter);
	font-size: 4.875rem;
	font-weight: 700;
	letter-spacing: -0.2925rem;
	line-height: 1;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

.ar-contact-page__desc {
	color: var(--color-muted);
	font-family: var(--font-inter);
	font-size: 1.25rem;
	letter-spacing: -0.075rem;
	line-height: 1.5;
	margin: 0 0 3rem;
	max-width: 34rem;
}

.ar-contact-page__details {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.ar-contact-page__item {
	border-top: 1px solid var(--color-border-2);
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding-top: 1rem;
}

.ar-contact-page__label {
	color: var(--color-muted);
	font-family: var(--font-inter);
	font-size: 0.875rem;
	letter-spacing: -0.035rem;
	text-transform: uppercase;
}

.ar-contact-page__value {
	color: var(--color-dark);
	font-family: var(--font-inter);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.1rem;
	line-height: 1.2;
	text-decoration: none;
}

a.ar-contact-page__value:hover {
	opacity: 0.7;
}

.ar-contact-page__note {
	color: var(--color-muted);
	font-family: var(--font-inter);
	font-size: 1rem;
	letter-spacing: -0.05rem;
}

.ar-contact-page__body {
	font-family: var(--font-inter);
	font-size: 1.25rem;
	line-height: 1.6;
	margin-top: 2.5rem;
}

.ar-contact-page__form {
	background: var(--color-white);
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-md);
	padding: 2.5rem;
}

.ar-contact-page__form-title {
	font-family: var(--font-inter);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.12rem;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.ar-contact-page__inner {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

/* The lead form is styled for a dark photo background; on the contact page it
   sits on a white card, so it gets the light treatment there. */

.ar-contact-page__form .ar-contact-form {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: transparent;
	border: 0;
	justify-self: stretch;
	padding: 0;
	width: 100%;
}

.ar-contact-page__form .ar-contact-form__field {
	background: var(--color-light);
	border-color: var(--color-border);
	color: var(--color-dark);
}

.ar-contact-page__form .ar-contact-form__field::placeholder {
	color: var(--color-muted);
}

.ar-contact-page__form .ar-form-status {
	color: var(--color-dark);
}

/* With the larger type a three-line tile heading can crowd the link below it. */

.ar-service-tile {
	gap: 1.5rem;
}

/* ---------------------------------------------------------------
   Header pinned to the top on every page
   --------------------------------------------------------------- */

.ar-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* On the front page it floats over the hero until the reader scrolls. */
.ar-body--home .ar-header {
	background: transparent;
	border-bottom-color: transparent;
	position: sticky;
}

.ar-body--home .ar-header--stuck {
	background: var(--color-white);
	border-bottom-color: rgba(168, 160, 160, 0.33);
}

.ar-body--home .ar-header--stuck .ar-logo__text,
.ar-body--home .ar-header--stuck .ar-nav__link,
.ar-body--home .ar-header--stuck .ar-menu-btn,
.ar-body--home .ar-header--stuck .ar-header__contact-phone,
.ar-body--home .ar-header--stuck .ar-header__contact-email,
.ar-body--home .ar-header--stuck .ar-header__contacts-label,
.ar-body--home .ar-header--stuck .ar-lang {
	color: var(--color-dark);
}

.ar-body--home .ar-header--stuck .ar-logo__icon,
.ar-body--home .ar-header--stuck .ar-menu-btn img {
	filter: none;
}

.ar-body--home .ar-header--stuck .ar-menu-btn,
.ar-body--home .ar-header--stuck .ar-lang {
	border-color: var(--color-border);
}

/* The hero sits under the pinned header instead of starting below it. */
.ar-body--home .ar-hero-main {
	margin-top: -6.25rem;
	padding-top: 17.875rem;
}

/* ---------------------------------------------------------------
   Welcome video
   --------------------------------------------------------------- */

.ar-about__video-play {
	cursor: pointer;
}

.ar-video-modal {
	align-items: center;
	background: rgba(3, 11, 26, 0.92);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 2.5rem;
	position: fixed;
	z-index: 2000;
}

.ar-video-modal__frame {
	aspect-ratio: 16 / 9;
	max-width: 68rem;
	width: 100%;
}

.ar-video-modal__frame iframe,
.ar-video-modal__frame video {
	border: 0;
	border-radius: var(--radius-md);
	height: 100%;
	width: 100%;
}

.ar-video-modal__close {
	background: transparent;
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	font-size: 3rem;
	line-height: 1;
	position: absolute;
	right: 2rem;
	top: 1.5rem;
}

/* ---------------------------------------------------------------
   Breathing room between sections lost when the type scale grew
   --------------------------------------------------------------- */

.ar-valuation {
	padding-top: 5rem;
}

/* Welcome video block: label top-left, play mark centred, as in the reference. */

.ar-about__video {
	position: relative;
}

.ar-about__video-label {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-inter);
	font-size: 1.25rem;
	left: 2rem;
	letter-spacing: -0.075rem;
	position: absolute;
	text-transform: uppercase;
	top: 2rem;
	z-index: 2;
}

.ar-about__video-play {
	align-items: center;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(0.25rem);
	-webkit-backdrop-filter: blur(0.25rem);
	border: 0;
	border-radius: 50%;
	color: var(--color-white);
	display: flex;
	font-size: 1.75rem;
	height: 6rem;
	justify-content: center;
	left: 50%;
	padding-left: 0.35rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.25s ease;
	width: 6rem;
	z-index: 2;
}

.ar-about__video-play:hover {
	background: rgba(255, 255, 255, 0.3);
}

.ar-about__video-play--inert {
	cursor: default;
	pointer-events: none;
}

.ar-about__link {
	align-items: center;
	color: var(--color-dark);
	display: inline-flex;
	font-family: var(--font-inter);
	font-size: 1.25rem;
	gap: 0.625rem;
	letter-spacing: -0.075rem;
	margin-top: 2rem;
	text-decoration: underline;
	text-transform: uppercase;
	transition: opacity 0.25s ease;
}

.ar-about__link:hover {
	opacity: 0.65;
}

.ar-about__link img {
	height: 1.5rem;
	transform: none !important;
	width: 1.5rem;
}

/* ---------------------------------------------------------------
   Article header: date, headline, author
   --------------------------------------------------------------- */

.ar-article__hero-inner {
	max-width: var(--content-max);
}

.ar-article__top {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	margin-top: 2rem;
}

.ar-article__date {
	color: var(--color-muted);
	font-family: var(--font-inter);
	font-size: 1rem;
	letter-spacing: -0.05rem;
	margin: 0;
}

.ar-article__headline .ar-article__title {
	margin-top: 0;
}

.ar-article__meta {
	align-items: center;
	gap: 1.5rem;
}

.ar-article__meta-item {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

.ar-article__meta-item + .ar-article__meta-item::before {
	content: none;
}

.ar-article__meta-item img {
	height: 1.125rem;
	width: 1.125rem;
}

.ar-article__author {
	align-items: center;
	display: flex;
	gap: 1.25rem;
}

.ar-article__author-photo {
	border-radius: 50%;
	height: 6rem;
	object-fit: cover;
	width: 6rem;
}

.ar-article__author-name {
	font-family: var(--font-inter);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.1rem;
	margin: 0;
	text-transform: uppercase;
}

.ar-article__author-role {
	color: var(--color-muted);
	font-family: var(--font-inter);
	font-size: 1rem;
	letter-spacing: -0.05rem;
	margin: 0.25rem 0 0.75rem;
	text-transform: uppercase;
}

.ar-article__author-social {
	display: flex;
	gap: 0.625rem;
}

.ar-article__author-social img {
	height: 1.5rem;
	width: 1.5rem;
	/* The shipped icons are white, made for the dark footer. */
	filter: invert(1);
}

@media (min-width: 900px) {
	.ar-article__top {
		align-items: start;
		gap: 3rem;
		grid-template-columns: 7rem minmax(0, 1fr) 20rem;
	}
}

/* The heading column and the cards column fill the two-column grid; before,
   the cards were a third child and dropped into the left half alone. */

.ar-buyers-service__intro {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	height: 100%;
}

.ar-buyers-service__desc {
	margin-top: 0;
}

/* Service cards carry an icon above the text, as in the reference.
   An <img> does not inherit currentColor from the page, so the dark stroke is
   inverted to white here rather than shipping a second set of files. */

.ar-service-card__icon {
	display: inline-flex;
}

.ar-service-card__icon img {
	filter: brightness(0) invert(1);
	height: 2.5rem;
	width: 2.5rem;
}

/* Market knowledge: copy and quote on the left, areas and map on the right. */

.ar-market-knowledge__aside {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.ar-market-knowledge__map img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.ar-market-knowledge__quote {
	margin: 0;
}