/*
 * Components — buttons, badges, listing card, forms, site chrome.
 *
 * Loaded on every page. Anything that only appears on a listing detail page
 * belongs in property.css, and anything that only appears on an archive
 * belongs in filters.css — both are enqueued conditionally.
 */

/* =========================================================================
   Buttons — BRAND-GUIDELINES §7.2
   ========================================================================= */

/*
 * Every button is built from three stacked layers inside one stacking context
 * (`isolation: isolate`, so the negative z-indexes below stay trapped in the
 * button and never slide under the page):
 *
 *   z -2  ::before  the COLOUR WIPE — a full-bleed panel of the hover fill,
 *                   parked one width to the left, that travels across on hover
 *   z -1  ::after   the GLOSS — a narrow skewed highlight that chases the wipe
 *   z  0  label     text and icon, never touched by either
 *
 * Both layers sit behind the label deliberately. A sweep that passes OVER type
 * makes the type shimmer, which reads as a rendering bug rather than polish.
 *
 * Each variant supplies its own wipe through `--smi-btn-wipe`. Variants that
 * set no wipe simply don't animate — the custom property resolves to `none`
 * and the layer stays invisible, so a new variant is never broken by default.
 */
.smi-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--smi-space-2);
	min-block-size: var(--smi-tap);
	padding: 12px var(--smi-space-5);
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-button);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	/* Fully rounded, per the client's reference. Pill rather than
	   --smi-radius-btn on purpose: that token still governs INPUTS, and a
	   pill-shaped text field is much harder to read a cursor position in. The
	   two shapes are deliberately allowed to differ. */
	border-radius: var(--smi-radius-pill);
	cursor: pointer;
	box-shadow: var(--smi-shadow-xs), var(--smi-edge-light-dark);
	transition:
		color var(--smi-duration) var(--smi-ease),
		border-color var(--smi-duration) var(--smi-ease),
		box-shadow var(--smi-duration-mid) var(--smi-ease),
		transform var(--smi-duration-mid) var(--smi-ease-spring);
}

/*
 * The wipe. `translateX(-101%)` rather than -100% because a subpixel seam at
 * the leading edge is visible against a contrasting fill on fractional-DPR
 * displays. The spring easing is heavily front-loaded — roughly 90% of the
 * travel happens in the first 45% of the duration — so the colour lands almost
 * immediately and then settles, instead of crawling across.
 */
.smi-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--smi-btn-wipe, none);
	transform: translateX(-101%);
	transition: transform var(--smi-duration-slow) var(--smi-ease-spring);
}

.smi-btn:hover::before,
.smi-btn:focus-visible::before {
	transform: translateX(0);
}

/* The gloss, tuned to arrive just behind the wipe's leading edge. */
.smi-btn::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 55%;
	inset-inline-start: -80%;
	z-index: -1;
	background-image: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-18deg);
	transition: inset-inline-start var(--smi-duration-slow) var(--smi-ease);
}

.smi-btn:hover::after,
.smi-btn:focus-visible::after {
	inset-inline-start: 120%;
}

.smi-btn:hover,
.smi-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--smi-shadow-md), var(--smi-edge-light-dark);
}

/* Press collapses the lift AND the shadow together — a button that sinks but
   keeps its raised shadow reads as broken depth. */
.smi-btn:active {
	transform: translateY(0) scale(.985);
	box-shadow: var(--smi-shadow-xs);
	transition-duration: 60ms;
}

@media (prefers-reduced-motion: reduce) {
	.smi-btn::before,
	.smi-btn::after {
		display: none;
	}

	.smi-btn:hover,
	.smi-btn:focus-visible,
	.smi-btn:active {
		transform: none;
	}

	/* With the wipe layer gone the variants would have no hover feedback at
	   all, so each one falls back to a flat fill change further down. */
}

/*
 * Primary — accent fill, navy text. There is only ever ONE primary button per
 * view (§7.2): if everything is cyan, nothing is. Reserve it for the enquiry
 * CTA, which is the single action this whole site drives toward.
 */
.smi-btn--primary {
	background-color: var(--smi-accent);
	background-image: var(--smi-grad-accent);
	color: var(--smi-navy);
	/*
	 * The wipe travels LIGHTER, not darker.
	 *
	 * This inverts the usual "darken on hover" instinct, and it has to: the
	 * label is navy, so a darker fill lowers contrast. Both stops are checked
	 * against navy — #3FBBD3 is 6.1:1 and #2BB0CB is 5.4:1, so the label
	 * clears AA across every frame of the sweep, not just at the ends.
	 */
	--smi-btn-wipe: linear-gradient(135deg, #3FBBD3 0%, var(--smi-accent-600) 100%);
}

/* The label clears AA across the whole sweep — the wipe never passes through
   a state the text cannot sit on. See the stop-by-stop figures above. */
.smi-btn--primary:hover,
.smi-btn--primary:focus-visible {
	color: var(--smi-navy);
	box-shadow: var(--smi-shadow-md), var(--smi-glow-accent), var(--smi-edge-light-dark);
}

.smi-btn--secondary {
	background-color: var(--smi-navy);
	background-image: var(--smi-grad-navy);
	color: var(--smi-white);
	/* Wipes LIGHTER, not darker. Navy darkening on navy is invisible at these
	   sizes; lifting toward #2E6FA8 is the only direction that registers. */
	--smi-btn-wipe: linear-gradient(135deg, #2E6FA8 0%, #123F69 100%);
}

.smi-btn--secondary:hover,
.smi-btn--secondary:focus-visible {
	color: var(--smi-white);
}

/*
 * Tertiary is the one variant where the wipe and the label fight: the text has
 * to flip navy→white, and if it flips while the button is still white the label
 * vanishes for a frame. The fix is the delay below — 150ms into a 320ms spring
 * the wipe has already covered ~90% of the button, so the flip lands on navy.
 *
 * The delay is declared on BOTH the base and the hover rule, and that is not
 * redundant: a transition reads its delay from the state it is moving TO, so
 * the base copy is what covers the hover-OUT direction. With it on the hover
 * rule alone the label snaps back to navy while the navy fill is still
 * retreating — the same invisible-label frame, just on the way out.
 *
 * If you retune the wipe duration, retune both delays with it.
 */
.smi-btn--tertiary {
	background-color: transparent;
	border-color: var(--smi-navy);
	color: var(--smi-navy);
	box-shadow: none;
	--smi-btn-wipe: var(--smi-grad-navy);
	/* Order matches the base transition list: color, border, shadow, transform. */
	transition-delay: 150ms, 0s, 0s, 0s;
}

.smi-btn--tertiary::before {
	transition-duration: var(--smi-duration-mid);
}

.smi-btn--tertiary:hover,
.smi-btn--tertiary:focus-visible {
	color: var(--smi-white);
	border-color: var(--smi-navy);
	transition-delay: 150ms, 0s, 0s, 0s;
}

/*
 * WhatsApp green is WhatsApp's, not ours. Never repurpose it (§7.2).
 *
 * Same constraint as the primary button: the label is dark green (#0B3D22),
 * so the ramp cannot run into the dark end. #16A94D and #14A84C were tried
 * here and measure 4.0:1 and 3.9:1 against the label — both fail. Every stop
 * below is 5.0:1 or better.
 */
/*
 * Outlined button for DARK surfaces. --tertiary is navy-on-transparent, which
 * is correct on a white card and invisible on navy — this is its counterpart
 * for the navy panels (EMI result, and anywhere else a ghost button lands on
 * a dark ground). Fills white on hover, so the label always clears contrast.
 */
.smi-btn--ghost-light {
	background-color: var(--smi-glass-dark-bg);
	border-color: rgba(255, 255, 255, .45);
	color: var(--smi-white);
	box-shadow: none;
	--smi-btn-wipe: linear-gradient(135deg, #FFFFFF 0%, #EAF1F7 100%);
}

.smi-btn--ghost-light:hover,
.smi-btn--ghost-light:focus-visible {
	border-color: var(--smi-white);
	color: var(--smi-navy);
}

.smi-btn--ghost-light svg {
	color: currentColor;
}

.smi-btn--whatsapp {
	background-color: var(--smi-whatsapp);
	background-image: linear-gradient(135deg, #3BE47B 0%, var(--smi-whatsapp) 55%, #1EBE5A 100%);
	color: #0B3D22;
	--smi-btn-wipe: linear-gradient(135deg, #3BE47B 0%, #22CC63 100%);
}

.smi-btn--whatsapp:hover,
.smi-btn--whatsapp:focus-visible {
	color: #0B3D22;
}

/* -- Glass ----------------------------------------------------------------
 * Frosted variants for navy sections, the hero, and anything sitting over
 * photography. There are two, and picking the wrong one makes the button
 * disappear rather than look subtle:
 *
 *   .smi-btn--glass        white frost — use on NAVY or photo backdrops
 *   .smi-btn--glass-light  navy frost  — use on WHITE or surface backdrops
 *
 * Both wipe on hover like every other variant, so glass is a skin, not a
 * separate interaction model.
 * ------------------------------------------------------------------------- */

.smi-btn--glass {
	background-color: var(--smi-glass-dark-bg);
	border-color: var(--smi-glass-dark-border);
	color: var(--smi-white);
	backdrop-filter: var(--smi-glass-blur);
	-webkit-backdrop-filter: var(--smi-glass-blur);
	box-shadow: var(--smi-shadow-xs), var(--smi-edge-light-dark);
	--smi-btn-wipe: linear-gradient(135deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .10) 100%);
}

.smi-btn--glass:hover,
.smi-btn--glass:focus-visible {
	color: var(--smi-white);
	border-color: rgba(255, 255, 255, .42);
}

.smi-btn--glass-light {
	background-color: var(--smi-glass-light-bg);
	border-color: var(--smi-glass-light-border);
	color: var(--smi-navy);
	backdrop-filter: var(--smi-glass-blur);
	-webkit-backdrop-filter: var(--smi-glass-blur);
	--smi-btn-wipe: linear-gradient(135deg, rgba(var(--smi-navy-rgb), .10) 0%, rgba(var(--smi-navy-rgb), .04) 100%);
}

.smi-btn--glass-light:hover,
.smi-btn--glass-light:focus-visible {
	color: var(--smi-navy);
	border-color: rgba(var(--smi-navy-rgb), .18);
}

/*
 * No backdrop-filter (older Safari, some Android WebViews): fall back to an
 * opaque-enough fill. Left translucent it degrades to near-invisible over a
 * busy hero, which is worse than not being glass at all.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.smi-btn--glass {
		background-color: rgba(255, 255, 255, .20);
	}

	.smi-btn--glass-light {
		background-color: rgba(255, 255, 255, .92);
	}
}

/*
 * Reduced-motion fallback for every variant. The wipe layer is display:none up
 * top, so without these a hover would produce no feedback whatsoever.
 */
@media (prefers-reduced-motion: reduce) {
	.smi-btn--primary:hover,
	.smi-btn--primary:focus-visible {
		background-image: none;
		background-color: var(--smi-accent-600);
	}

	.smi-btn--secondary:hover,
	.smi-btn--secondary:focus-visible {
		background-image: none;
		background-color: var(--smi-navy-600);
	}

	.smi-btn--tertiary:hover,
	.smi-btn--tertiary:focus-visible {
		background-color: var(--smi-navy);
		transition-delay: 0s;
	}

	.smi-btn--whatsapp:hover,
	.smi-btn--whatsapp:focus-visible {
		background-image: none;
		background-color: #1EBE5A;
	}

	.smi-btn--glass:hover,
	.smi-btn--glass:focus-visible {
		background-color: var(--smi-glass-dark-bg-hover);
	}
}

.smi-btn--block {
	inline-size: 100%;
}

.smi-btn--small {
	min-block-size: 38px;
	padding: 9px var(--smi-space-4);
	font-size: var(--smi-text-small);
}

.smi-btn[aria-disabled="true"],
.smi-btn:disabled {
	opacity: .55;
	pointer-events: none;
}

/* On a navy section the tertiary outline has to invert or it disappears — and
   so does its wipe, which would otherwise sweep navy across navy. */
.smi-section--navy .smi-btn--tertiary,
.smi-hero .smi-btn--tertiary {
	border-color: rgba(255, 255, 255, .5);
	color: var(--smi-white);
	--smi-btn-wipe: linear-gradient(135deg, #FFFFFF 0%, #E9EFF4 100%);
}

.smi-section--navy .smi-btn--tertiary:hover,
.smi-section--navy .smi-btn--tertiary:focus-visible,
.smi-hero .smi-btn--tertiary:hover,
.smi-hero .smi-btn--tertiary:focus-visible {
	color: var(--smi-navy);
	border-color: var(--smi-white);
}

@media (prefers-reduced-motion: reduce) {
	.smi-section--navy .smi-btn--tertiary:hover,
	.smi-hero .smi-btn--tertiary:hover {
		background-color: var(--smi-white);
	}
}

/* =========================================================================
   Badges — PRD §8.3
   =========================================================================
   Every badge carries text. Navy-versus-teal is a fast cue for most people and
   invisible to a colour-blind user, so on the homepage and unified search —
   where sale and rental sit in one grid — the word is what communicates.
   Never ship a badge that is colour alone.
   ========================================================================= */

/*
 * ONE glassmorphism pill for every badge, on client direction — the same
 * treatment as .smi-city-tile__count: frosted, white label, hairline white
 * ring, lit top edge. The per-status colour fills (navy / teal / green / red /
 * indigo) and the light "Featured" chip are gone; the WORD now carries the
 * whole distinction, which the section note above already required of them.
 *
 * The tint is navy rather than the city pill's white. That pill sits on a navy
 * tile, so a 10%-WHITE fill frosts to something darker than its label. These
 * badges sit on two very different grounds — gallery photography on a card,
 * and the plain white page on a single listing — and a white fill with a white
 * label disappears against both a bright sky and the white header. A navy tint
 * frosts the same way and keeps the label legible on either.
 *
 * .72 is not an aesthetic knob: over the worst case (pure white behind) it
 * composites to rgb(81,105,128), which carries white text at 5.4:1 — AA holds.
 * Lowering it for "more glass" breaks that on light photography.
 */
.smi-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	font-family: var(--smi-font-body);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: var(--smi-radius-pill);
	background-color: rgba(var(--smi-navy-rgb), .72);
	color: var(--smi-white);
	border: 1px solid var(--smi-glass-dark-border);
	box-shadow:
		var(--smi-edge-light-dark),
		0 2px 10px rgba(var(--smi-navy-rgb), .22);
	backdrop-filter: var(--smi-glass-blur);
	-webkit-backdrop-filter: var(--smi-glass-blur);
}

/*
 * The variant classes are still emitted by badges.php and deliberately kept in
 * the markup: they remain a hook for anyone who later needs to tell statuses
 * apart programmatically, and reinstating a colour is then a one-rule change.
 * They intentionally carry no styling of their own now.
 */

/* No backdrop-filter support (older Safari, some Androids): a solid navy fill,
   so the frost never degrades into plain transparency over a busy photo. */
@supports not (backdrop-filter: blur(1px)) {
	.smi-badge {
		background-color: var(--smi-navy);
	}
}

.smi-badge-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 15px;
}
dl.smi-rental-terms__grid dd {
    margin: 0;
}

/* =========================================================================
   Listing card — PRD §8.3
   ========================================================================= */

/*
 * The card reads as a physical object through four cues layered together, none
 * of which is a drop shadow on its own:
 *
 *   1. a two-layer shadow from the elevation ladder (contact + ambient)
 *   2. an inset white hairline along the top edge, so the card catches light
 *   3. a 1.5% vertical wash, so the face is lit rather than flat-filled
 *   4. a lift on hover that moves it UP the ladder, not to a different shadow
 *
 * Take any one away and it flattens out. The lift is 6px because the ambient
 * shadow at --smi-shadow-xl blurs 80px — a smaller lift makes the shadow grow
 * without the object appearing to move, which reads as a glow rather than
 * elevation.
 */
.smi-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--smi-white);
	background-image: var(--smi-grad-card);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
	box-shadow: var(--smi-shadow), var(--smi-edge-light);
	overflow: hidden;
	transition:
		box-shadow var(--smi-duration-mid) var(--smi-ease),
		transform var(--smi-duration-mid) var(--smi-ease-spring);
}

/*
 * Rim light — a accent inner ring that fades up on hover.
 *
 * Drawn as an inset shadow on an overlay, NOT as a border-color change: the
 * border participates in layout, so animating it reflows the card's contents
 * by a subpixel and the type visibly jitters across a whole grid at once.
 * An overlay costs nothing and never moves anything.
 */
.smi-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(var(--smi-accent-rgb), .55);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--smi-duration-mid) var(--smi-ease);
}

.smi-card:hover,
.smi-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--smi-shadow-xl), var(--smi-edge-light);
}

.smi-card:hover::after,
.smi-card:focus-within::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.smi-card:hover,
	.smi-card:focus-within {
		transform: none;
		box-shadow: var(--smi-shadow-md), var(--smi-edge-light);
	}
}

.smi-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--smi-surface);
	overflow: hidden;
}

/*
 * Scrim along the bottom of the photo. Two jobs: it seats the image against the
 * card body instead of ending in a hard horizontal cut, and it darkens exactly
 * the strip where a bright sky or a white wall would otherwise leave the top
 * badges floating on nothing.
 */
.smi-card__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 45%;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(to top, rgba(10, 30, 49, .28), transparent);
	opacity: 0;
	transition: opacity var(--smi-duration-mid) var(--smi-ease);
}

/*
 * Top scrim, always on. The comment above describes the BOTTOM one, which
 * seats the photo against the card body and only fades in on hover — it never
 * covered the badges, which sit at the top.
 *
 * Now that the badges are frosted glass rather than solid colour fills, they
 * need something behind them: a listing shot straight up at a bright sky left
 * a white label on a near-white frost. This darkens only the top strip the
 * badges occupy, and is invisible on photography that is already dark there.
 */
.smi-card__media::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 38%;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(to bottom, rgba(10, 30, 49, .38), transparent);
}

/* Only over real photography — over the placeholder it would read as a smudge. */
.smi-card__media:has(img)::after {
	opacity: 1;
}

/*
 * `transform` has to be in this list. It was previously missing while the
 * hover rule below set scale(1.04), so the zoom jumped in a single frame — the
 * one piece of motion on the card that looked broken rather than absent.
 */
.smi-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition:
		filter var(--smi-duration) var(--smi-ease),
		transform var(--smi-duration-slow) var(--smi-ease-spring);
}

.smi-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--smi-space-2);
	/*
	 * Faint navy wash rather than flat grey, so a grid of placeholders reads as
	 * a deliberate treatment instead of a page of broken images. The diagonal
	 * sheen band on top is what stops a full grid of them looking like the
	 * stylesheet failed to load — it gives each tile an implied light source.
	 */
	background-color: var(--smi-surface);
	background-image:
		linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 62%),
		linear-gradient(150deg, #E8EDF4 0%, var(--smi-surface) 55%, #EFF2F6 100%);
	color: var(--smi-muted-light);
	font-size: var(--smi-text-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
}

.smi-card__placeholder svg {
	inline-size: 44px;
	block-size: auto;
	color: var(--smi-navy);
	opacity: .18;
	transition: transform var(--smi-duration-slow) var(--smi-ease-spring);
}

.smi-card:hover .smi-card__placeholder svg {
	transform: translateY(-4px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.smi-card:hover .smi-card__placeholder svg {
		transform: none;
	}
}

.smi-card__badges {
	position: absolute;
	inset-block-start: var(--smi-space-2);
	inset-inline-start: var(--smi-space-2);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-inline-size: calc(100% - var(--smi-space-6));
}

/*
 * Closed listings — Sold Out and Rented Out.
 *
 * Sold listings stay live: they are proof the firm actually transacts, which
 * matters more than usual on a site that publishes no prices. The greyscale is
 * a supporting cue only; the ribbon carries the word, because greyscale alone
 * tells a colour-blind or low-vision user nothing (PRD §10.4).
 */
.smi-card.is-closed .smi-card__media img {
	filter: grayscale(60%);
}

/*
 * The ribbon sits top-RIGHT. Top-left is where the badge group lives, and a
 * 45°-rotated banner there covers the "For Sale" / "For Rent" label — which is
 * the one piece of information a colour-blind visitor depends on to tell the
 * two inventories apart (PRD §10.4).
 */
.smi-card__ribbon {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: -34px;
	z-index: 3;
	rotate: 45deg;
	inline-size: 150px;
	padding-block: 6px;
	background-color: var(--smi-sold);
	color: var(--smi-white);
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	box-shadow: var(--smi-shadow);
}

/* Gentle zoom on the photo, matching the news cards' hover language. */
.smi-card:hover .smi-card__media img,
.smi-card:focus-within .smi-card__media img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.smi-card:hover .smi-card__media img {
		transform: none;
	}
}

.smi-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--smi-space-4);
	gap: var(--smi-space-2);
}

.smi-card__title {
	font-size: var(--smi-text-h4);
	line-height: 1.35;
	margin: 0;
}

.smi-card__title a {
	color: var(--smi-navy);
	text-decoration: none;
}

.smi-card__title a:hover {
	text-decoration: underline;
}

.smi-card__location {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.smi-card__location svg {
	color: var(--smi-accent-600);
	flex-shrink: 0;
}

/* Specs as quiet chips — separators made of borders read as a table crammed
   into a card; chips read as facts. */
.smi-card__specs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding-block: var(--smi-space-2) 0;
	list-style: none;
	font-variant-numeric: tabular-nums;
}

.smi-card__specs li {
	padding: 5px 11px;
	font-size: var(--smi-text-label);
	font-weight: 500;
	color: var(--smi-navy);
	background-color: var(--smi-surface);
	background-image: linear-gradient(180deg, #FFFFFF 0%, var(--smi-surface) 100%);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-pill);
	box-shadow: var(--smi-shadow-xs);
	white-space: nowrap;
}

/*
 * `margin-block-start: auto` lives here now. It used to sit on the price line,
 * which was the element that absorbed the card body's spare height and so kept
 * every actions row in a grid on the same baseline. With the price line gone
 * the actions row inherits that job, otherwise cards with a shorter title or no
 * specs float their buttons up and the row goes ragged.
 */
.smi-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smi-space-2);
	margin-block-start: auto;
	padding-block-start: var(--smi-space-3);
	border-block-start: 1px solid var(--smi-border);
}

.smi-card__details {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--smi-text-small);
	font-weight: 600;
	color: var(--smi-navy);
	text-decoration: none;
	white-space: nowrap;
}

.smi-card__details:hover {
	text-decoration: underline;
}

.smi-card__details svg {
	inline-size: 14px;
	block-size: 14px;
	color: var(--smi-accent-600);
	transition: translate var(--smi-duration) var(--smi-ease);
}

.smi-card__details:hover svg {
	translate: 3px 0;
}

/* Empty state — offered instead of a dead end (PRD §8.2). */
.smi-empty {
	grid-column: 1 / -1;
	padding: var(--smi-space-6) var(--smi-space-4);
	text-align: center;
	background-color: var(--smi-surface);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
}

/* =========================================================================
   Forms — PRD §9.2
   ========================================================================= */

.smi-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block-end: var(--smi-space-3);
}

.smi-field label {
	font-size: var(--smi-text-small);
	font-weight: 600;
	color: var(--smi-navy);
}

.smi-field .smi-required {
	color: var(--smi-sold);
}

.smi-field input[type="text"],
.smi-field input[type="tel"],
.smi-field input[type="email"],
.smi-field input[type="date"],
.smi-field input[type="search"],
.smi-field select,
.smi-field textarea {
	inline-size: 100%;
	min-block-size: var(--smi-tap);
	padding: 11px var(--smi-space-3);
	font-family: var(--smi-font-body);
	/* 16px, always. Anything smaller triggers zoom-on-focus in iOS Safari. */
	font-size: var(--smi-text-body);
	color: var(--smi-ink);
	background-color: var(--smi-white);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-btn);
	/* Faint inner shadow at the top edge — the inverse of --smi-edge-light, so
	   an input reads as recessed on the same page where cards read as raised. */
	box-shadow: inset 0 1px 2px rgba(var(--smi-navy-rgb), .05);
	transition:
		border-color var(--smi-duration) var(--smi-ease),
		box-shadow var(--smi-duration) var(--smi-ease);
}

.smi-field input:hover,
.smi-field select:hover,
.smi-field textarea:hover {
	border-color: var(--smi-muted-light);
}

/*
 * Focus gets a navy halo on top of the shared accent :focus-visible outline in
 * base.css, not instead of it. The outline is the accessibility contract; the
 * halo is the polish. Note this is :focus, not :focus-visible — on a form
 * field the affordance should be there for pointer users too, since it marks
 * where typing will land.
 */
.smi-field input:focus,
.smi-field select:focus,
.smi-field textarea:focus {
	border-color: var(--smi-navy);
	box-shadow:
		inset 0 1px 2px rgba(var(--smi-navy-rgb), .05),
		0 0 0 4px rgba(var(--smi-navy-rgb), .10);
}

.smi-field.has-error input:focus,
.smi-field.has-error select:focus,
.smi-field.has-error textarea:focus {
	box-shadow:
		inset 0 1px 2px rgba(var(--smi-navy-rgb), .05),
		0 0 0 4px rgba(192, 57, 43, .14);
}

.smi-field textarea {
	min-block-size: 110px;
	resize: vertical;
}

.smi-field__hint {
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.smi-field__error {
	font-size: var(--smi-text-small);
	color: var(--smi-sold);
}

.smi-field.has-error input,
.smi-field.has-error select,
.smi-field.has-error textarea {
	border-color: var(--smi-sold);
}

.smi-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--smi-space-2);
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.smi-consent input[type="checkbox"] {
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 2px;
	flex-shrink: 0;
	accent-color: var(--smi-navy);
}

/* Success stays inline — a redirect loses the listing the visitor was reading
   and with it the reason they enquired (PRD §9.2). */
.smi-form__success {
	padding: var(--smi-space-4);
	background-color: var(--smi-surface);
	border-inline-start: 4px solid var(--smi-new);
	border-radius: var(--smi-radius-btn);
}

/* =========================================================================
   Site chrome
   ========================================================================= */

/* -- Floating WhatsApp button (every page, PRD §9.4) ---------------------- */

.smi-whatsapp-float {
	position: fixed;
	inset-inline-end: var(--smi-space-4);
	inset-block-end: var(--smi-space-4);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-whatsapp);
	/* Ends at #1EBE5A, not #16A94D — the icon is dark green and #16A94D puts it
	   at 4.0:1. See the note on .smi-btn--whatsapp. */
	background-image: linear-gradient(145deg, #3BE47B 0%, var(--smi-whatsapp) 55%, #1EBE5A 100%);
	color: #0B3D22;
	box-shadow:
		0 8px 24px -6px rgba(18, 140, 63, .55),
		inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform var(--smi-duration-mid) var(--smi-ease-spring);
}

/*
 * One expanding ring, not a looping pulse. A permanently animating element in
 * the corner of every page is a distraction on a site people read listings on,
 * and it never stops competing with the content. This fires only on hover.
 */
.smi-whatsapp-float::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--smi-whatsapp);
	opacity: 0;
	transition:
		transform var(--smi-duration-slow) var(--smi-ease),
		opacity var(--smi-duration-slow) var(--smi-ease);
}

.smi-whatsapp-float:hover::before {
	transform: scale(1.45);
	opacity: 0;
	/* Starts visible, fades as it expands — set on the base state so the ring
	   is only ever drawn mid-transition. */
	animation: smi-ring var(--smi-duration-slow) var(--smi-ease);
}

@keyframes smi-ring {
	from { transform: scale(1);    opacity: .8; }
	to   { transform: scale(1.45); opacity: 0; }
}

.smi-whatsapp-float:hover {
	transform: scale(1.08);
	color: #0B3D22;
}

@media (prefers-reduced-motion: reduce) {
	.smi-whatsapp-float:hover {
		transform: none;
	}

	.smi-whatsapp-float:hover::before {
		animation: none;
	}
}

.smi-whatsapp-float svg {
	inline-size: 26px;
	block-size: 26px;
}

/* Clear the mobile action bar so the float never sits on top of the CTA. */
@media (max-width: 1023px) {
	body.smi-has-action-bar .smi-whatsapp-float {
		inset-block-end: calc(var(--smi-tap) + var(--smi-space-4));
	}
}

/* -- Mobile bottom action bar --------------------------------------------
   The single highest-impact conversion element on the site for this market
   (PRD §6.1). Present on every listing page, hidden on desktop where the
   sticky sidebar does the same job.
   ------------------------------------------------------------------------ */

.smi-action-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 95;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background-color: var(--smi-border);
	border-block-start: 1px solid var(--smi-border);
	padding-block-end: env(safe-area-inset-bottom, 0);
}

.smi-action-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-block-size: var(--smi-tap);
	padding-block: 10px;
	background-color: var(--smi-white);
	color: var(--smi-navy);
	font-size: var(--smi-text-small);
	font-weight: 600;
	text-decoration: none;
}

.smi-action-bar__item--primary {
	background-color: var(--smi-accent);
	color: var(--smi-navy);
}

.smi-action-bar__item svg {
	inline-size: 18px;
	block-size: 18px;
}

@media (min-width: 1024px) {
	.smi-action-bar {
		display: none;
	}
}

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

.smi-breadcrumbs {
	padding-block: var(--smi-space-3);
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.smi-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smi-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.smi-breadcrumbs li + li::before {
	content: "›";
	margin-inline-end: var(--smi-space-2);
	color: var(--smi-muted-light);
}

.smi-breadcrumbs a {
	color: var(--smi-muted);
	text-decoration: none;
}

.smi-breadcrumbs a:hover {
	color: var(--smi-navy);
	text-decoration: underline;
}

.smi-breadcrumbs [aria-current="page"] {
	color: var(--smi-navy);
	font-weight: 500;
}

/* -- Buy | Rent switch (PRD §8.2) ----------------------------------------- */

.smi-switch {
	display: inline-flex;
	padding: 4px;
	background-color: var(--smi-surface);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-pill);
}

.smi-switch__option {
	min-block-size: 38px;
	padding: 9px var(--smi-space-4);
	font-size: var(--smi-text-button);
	font-weight: 600;
	color: var(--smi-muted);
	text-decoration: none;
	border-radius: var(--smi-radius-pill);
	display: inline-flex;
	align-items: center;
	transition: background-color var(--smi-duration) var(--smi-ease);
}

.smi-switch__option[aria-current="true"] {
	background-color: var(--smi-navy);
	color: var(--smi-white);
}

/* The rent side of the switch takes teal, matching the For Rent badge, so the
   colour cue is consistent everywhere the two inventories are distinguished. */
.smi-switch__option--rent[aria-current="true"] {
	background-color: var(--smi-teal);
}

/* -- Hero search (PRD §8.1) ------------------------------------------------
   The Buy | Rent toggle is the first control, because buy-versus-rent is the
   first decision a visitor makes. Both the toggle and the submit button are
   sized to their content — stretched to a grid track, the accent button becomes
   a slab and blows the 5% accent budget on its own (§3.5).
   ------------------------------------------------------------------------ */

.smi-hero-search {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--smi-space-3);
	margin-block-start: var(--smi-space-5);
}

.smi-hero-search .smi-switch {
	background-color: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .22);
}

.smi-hero-search .smi-switch__option {
	color: rgba(255, 255, 255, .8);
}

.smi-hero-search .smi-switch__option[aria-current="true"] {
	background-color: var(--smi-white);
	color: var(--smi-navy);
}

.smi-hero-search .smi-switch__option--rent[aria-current="true"] {
	background-color: var(--smi-teal);
	color: var(--smi-white);
}

.smi-hero-search__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smi-space-2);
	inline-size: 100%;
	max-inline-size: 720px;
}

.smi-hero-search__row label {
	flex: 1 1 200px;
}

.smi-hero-search__row .smi-sort {
	inline-size: 100%;
	min-block-size: var(--smi-tap);
}

.smi-hero-search__row .smi-btn {
	flex: 0 0 auto;
}

@media (max-width: 639px) {
	.smi-hero-search__row .smi-btn {
		inline-size: 100%;
	}
}

/* -- Header logo -----------------------------------------------------------
   The uploaded logo is a STACKED lockup with generous whitespace baked into
   the file, and Kadence constrains logos by width — which for a tall image
   means the header height explodes. Constrain by height instead and let the
   width follow; the max keeps the header at its designed ~80px.
   ------------------------------------------------------------------------ */

.site-branding img.custom-logo {
	max-block-size: 68px;
	inline-size: auto;
}

@media (max-width: 767px) {
	.site-branding img.custom-logo {
		max-block-size: 54px;
	}
}

/* -- Marketing page pieces ------------------------------------------------ */

.smi-quote {
	margin: 0 0 var(--smi-space-3);
	padding: 0;
	border: 0;
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-body-lg);
	font-weight: 300;
	line-height: 1.5;
	color: var(--smi-navy);
}

.smi-quote::before {
	content: "";
	display: block;
	inline-size: 28px;
	block-size: 2px;
	margin-block-end: var(--smi-space-3);
	background-color: var(--smi-accent);
	border-radius: var(--smi-radius-pill);
}

/* FAQ — native <details>, so it works with no JavaScript and is keyboard
   operable and screen-reader announced for free. */
.smi-faq {
	border-block-end: 1px solid var(--smi-border);
}

.smi-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smi-space-3);
	min-block-size: var(--smi-tap);
	padding-block: var(--smi-space-3);
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-h4);
	font-weight: 600;
	color: var(--smi-navy);
	cursor: pointer;
	list-style: none;
}

.smi-faq summary::-webkit-details-marker {
	display: none;
}

.smi-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--smi-accent);
	flex-shrink: 0;
}

.smi-faq[open] summary::after {
	content: "−";
}

.smi-faq__answer {
	padding-block-end: var(--smi-space-3);
	color: var(--smi-muted);
}

/* -- Popular cities band (§6.1) ------------------------------------------- */

.smi-popular-cities {
	padding-block: var(--smi-space-6);
}

.smi-city-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--smi-space-2) var(--smi-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--smi-text-small);
}

@media (min-width: 640px) {
	.smi-city-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.smi-city-links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smi-city-links li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smi-space-2);
}

.smi-city-links a {
	color: var(--smi-muted);
	text-decoration: none;
}

.smi-city-links a:hover {
	color: var(--smi-navy);
	text-decoration: underline;
}

/* Separator between the buy and rent link for a city. */
.smi-city-links a + a::before {
	content: "·";
	margin-inline-end: var(--smi-space-2);
	color: var(--smi-muted-light);
}

/* =========================================================================
   Topbar — utility strip above the main header
   ========================================================================= */

.smi-topbar {
	background-color: var(--smi-navy-600);
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
}

.smi-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smi-space-3);
	min-block-size: 38px;
	padding-block: 4px;
}

.smi-topbar__tagline {
	letter-spacing: 0.02em;
}

.smi-topbar__links {
	display: flex;
	align-items: center;
	gap: var(--smi-space-4);
}

.smi-topbar__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.smi-topbar__links a:hover {
	color: var(--smi-accent);
}

.smi-topbar__links svg {
	inline-size: 14px;
	block-size: 14px;
}

@media (max-width: 767px) {
	/* The extra selector weight matters: `.smi-topbar__links a` sets
	   inline-flex at (0,1,1), which beats a lone class. */
	.smi-topbar__tagline,
	.smi-topbar__links a.smi-topbar__email {
		display: none;
	}

	.smi-topbar__inner {
		justify-content: center;
	}

	.smi-topbar__links {
		gap: var(--smi-space-3);
	}
}

/* =========================================================================
   Main header — polish over Kadence's builder output
   ========================================================================= */

.site-header {
	box-shadow: 0 1px 0 var(--smi-border);
}

/*
 * Kadence's sticky wrapper, once it detaches, becomes frosted rather than
 * opaque — content scrolling beneath it stays faintly visible, which is what
 * makes a sticky bar read as a layer above the page rather than a lid on it.
 *
 * The fill is .82 and not lower: the nav links are --smi-muted (#5A6472) at
 * 15px, and below about .80 they stop clearing 4.5:1 once a dark listing photo
 * scrolls underneath.
 */
.site-header .item-is-fixed {
	background-color: rgba(255, 255, 255, .82) !important;
	backdrop-filter: var(--smi-glass-blur);
	-webkit-backdrop-filter: var(--smi-glass-blur);
	box-shadow: 0 8px 32px -8px rgba(var(--smi-navy-rgb), .18), 0 1px 0 rgba(var(--smi-navy-rgb), .06);
}

/*
 * The !important above is load-bearing and not laziness. Kadence writes the
 * sticky background as an inline style on this element from the Customizer, so
 * a plain declaration here — however specific — loses to it. Removing it
 * restores an opaque white bar and the frost silently stops working.
 */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header .item-is-fixed {
		background-color: var(--smi-white) !important;
	}
}

/* Navigation links: quiet by default, navy on hover, a accent bar under the
   current section. The bar — not accent text — is how the accent appears on a
   light surface (BRAND-GUIDELINES §3.4). */
.header-navigation .header-menu-container > ul > li > a {
	position: relative;
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-button);
	font-weight: 500;
	color: var(--smi-muted);
}

.header-navigation .header-menu-container > ul > li > a:hover {
	color: var(--smi-navy);
}

.header-navigation .header-menu-container > ul > li > a::after {
	content: "";
	position: absolute;
	inset-inline: 14px;
	inset-block-end: 8px;
	block-size: 3px;
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--smi-duration) var(--smi-ease);
}

/* The current page keeps only a weight/colour emphasis — the accent bar is a
   hover affordance, not a page marker (client direction). */
.header-navigation .header-menu-container > ul > li.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.current-menu-ancestor > a {
	color: var(--smi-navy);
	font-weight: 600;
}

.header-navigation .header-menu-container > ul > li > a:hover::after,
.header-navigation .header-menu-container > ul > li > a:focus-visible::after {
	transform: scaleX(1);
}

/* The Get a Quote button — Kadence renders its own markup, so restyle it to
   the brand primary: accent fill, navy text, 6px radius. */
.site-header .header-button {
	background-color: var(--smi-accent);
	border: 0;
	border-radius: var(--smi-radius-btn);
	color: var(--smi-navy);
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-button);
	font-weight: 600;
	padding: 11px 20px;
	box-shadow: none;
	transition: background-color var(--smi-duration) var(--smi-ease);
}

.site-header .header-button:hover,
.site-header .header-button:focus-visible {
	background-color: var(--smi-accent-600);
	color: var(--smi-navy);
	box-shadow: 0 6px 16px rgba(var(--smi-navy-rgb), .18);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.site-header .header-button:hover {
		transform: none;
	}
}

/* Retired to the topbar; kept so any cached header HTML degrades quietly. */
.smi-header-phone {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--smi-tap);
	font-weight: 600;
	font-size: var(--smi-text-small);
	color: var(--smi-navy);
	text-decoration: none;
	white-space: nowrap;
}

/* =========================================================================
   Brand footer + Kadence bottom bar
   ========================================================================= */

.smi-footer {
	background-color: var(--smi-navy);
	background-image: linear-gradient(160deg, #123F69 0%, var(--smi-navy) 55%, #081F37 100%);
	color: rgba(255, 255, 255, .78);
	padding-block: var(--smi-space-7) var(--smi-space-6);
}

.smi-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--smi-space-5);
}

@media (min-width: 768px) {
	.smi-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.smi-footer__grid {
		/* Brand column gets the extra room. */
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
		gap: var(--smi-space-6);
	}
}

/* The logo file carries a baked white background (no alpha), so it gets a
   white chip: intentional framing instead of a raw white box on navy. */
.smi-footer__logo {
	display: inline-flex;
	padding: var(--smi-space-2) var(--smi-space-3);
	background-color: var(--smi-white);
	border-radius: var(--smi-radius-card);
	margin-block-end: var(--smi-space-3);
}

.smi-footer__logo img {
	display: block;
	block-size: 72px;
	inline-size: auto;
}

.smi-footer__blurb {
	max-inline-size: 34ch;
	font-size: var(--smi-text-small);
	line-height: 1.6;
	margin: 0;
}

/* -- Footer social ---------------------------------------------------------
   Glass chips on the navy footer rather than bare glyphs: at 20px a lone
   monochrome logo on a dark ground reads as an artefact, and the chip gives
   the 44px tap target the icon itself does not have. */

.smi-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smi-space-2);
	margin: var(--smi-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.smi-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--smi-radius-pill);
	border: 1px solid var(--smi-glass-dark-border);
	background-color: var(--smi-glass-dark-bg);
	color: var(--smi-white);
	transition:
		background-color var(--smi-duration) var(--smi-ease),
		border-color var(--smi-duration) var(--smi-ease),
		color var(--smi-duration) var(--smi-ease),
		transform var(--smi-duration-mid) var(--smi-ease-spring);
}

.smi-footer__social-link svg {
	inline-size: 18px;
	block-size: 18px;
}

.smi-footer__social-link:hover,
.smi-footer__social-link:focus-visible {
	background-color: var(--smi-accent);
	border-color: var(--smi-accent);
	color: var(--smi-navy);
	transform: translateY(-2px);
}

/* Not wired up yet — legible, but visibly not a live profile. */
.smi-footer__social-link.is-placeholder {
	opacity: .45;
	cursor: default;
}

.smi-footer__social-link.is-placeholder:hover {
	background-color: var(--smi-glass-dark-bg);
	border-color: var(--smi-glass-dark-border);
	color: var(--smi-white);
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.smi-footer__social-link:hover,
	.smi-footer__social-link:focus-visible {
		transform: none;
	}
}

.smi-footer__rera {
	margin-block-start: var(--smi-space-3);
	font-size: var(--smi-text-label);
	color: rgba(255, 255, 255, .55);
}

.smi-footer__title {
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-label);
	font-weight: 600;
	letter-spacing: var(--smi-track-label);
	text-transform: uppercase;
	color: var(--smi-accent);
	margin-block-end: var(--smi-space-3);
}

.smi-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--smi-text-small);
}

.smi-footer__menu a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.smi-footer__menu a:hover {
	color: var(--smi-white);
	text-decoration: underline;
}

.smi-footer__menu svg {
	inline-size: 15px;
	block-size: 15px;
	color: var(--smi-accent);
	flex-shrink: 0;
}

.smi-footer__address {
	margin-block-start: var(--smi-space-3);
	font-size: var(--smi-text-small);
	line-height: 1.6;
	color: rgba(255, 255, 255, .6);
}

/*
 * Kadence's own footer row — the copyright bar. Restyled to read as the last
 * strip of the brand footer rather than a separate white block, while staying
 * fully editable in the Customizer.
 */
/*
 * The footer is the darkest surface on the site and the last thing seen, so it
 * carries the same graded navy as the hero rather than a flat slab — the page
 * opens and closes on the same colour treatment.
 *
 * The gradient goes on the OUTER element only; the wrap and row containers are
 * reset to transparent instead of being painted too. Kadence nests all three,
 * so repeating a background-image on each would stack three copies of the same
 * ramp and produce visible banding where they overlap.
 */
.site-footer {
	background-color: #081F37;
	background-image:
		radial-gradient(ellipse 50% 70% at 82% 0%, rgba(var(--smi-accent-rgb), .10), transparent 60%),
		radial-gradient(ellipse 45% 60% at 10% 100%, rgba(var(--smi-teal-rgb), .14), transparent 60%),
		linear-gradient(170deg, #0F2A44 0%, #081F37 60%);
}

.site-footer .site-footer-wrap,
.site-footer .site-footer-row-container {
	background: transparent;
}

/* Gold hairline across the top, matching the navy sections' rule. */
.site-footer .site-footer-row-container {
	border: 0;
}

.site-footer::before {
	content: "";
	display: block;
	block-size: 1px;
	background-image: linear-gradient(to right, transparent, rgba(var(--smi-accent-rgb), .40), transparent);
}

.site-footer,
.site-footer .footer-html {
	color: rgba(255, 255, 255, .55);
	font-size: var(--smi-text-label);
}

.site-footer a {
	color: rgba(255, 255, 255, .7);
}

.site-footer a:hover {
	color: var(--smi-white);
}

/* Legal menu sits in the bottom bar's second column, pushed to the right
   edge — © left, Privacy / Terms / Disclaimer right. Stacked views recenter,
   since "right-aligned" has no meaning in a single centred column. */
.site-footer .site-footer-bottom-section-2 {
	justify-content: flex-end;
}

.site-footer .site-footer-bottom-section-2 .footer-navigation-wrap {
	margin-inline-start: auto;
}

/* The wrap is full width; the shrink-wrapped menu container inside it is the
   element that actually needs pushing to the edge. */
.site-footer .site-footer-bottom-section-2 .footer-menu-container {
	margin-inline-start: auto;
	justify-content: flex-end;
}

.site-footer .footer-navigation .menu {
	gap: var(--smi-space-3);
	font-size: var(--smi-text-label);
	justify-content: flex-end;
}

/*
 * Underline treatment for the legal bar. The COLOURS are not set here — Kadence
 * emits those from the Customizer as `#colophon …`, an ID selector that
 * out-specifies anything the theme can write with classes, so they are set by
 * filtering `footer_navigation_color` in inc/kadence.php instead.
 *
 * Text-decoration is safe to own here: Kadence sets none, so there is nothing
 * to lose the cascade to.
 */
.site-footer .footer-navigation .menu a {
	text-decoration: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.site-footer .footer-navigation .menu a:hover,
.site-footer .footer-navigation .menu a:focus-visible {
	text-decoration: underline;
}

/* The page you are on stays underlined, so it reads as "current" rather than
   merely hovered — colour alone should not carry that distinction. */
.site-footer .footer-navigation .menu .current-menu-item > a,
.site-footer .footer-navigation .menu .current_page_item > a {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.site-footer .site-footer-bottom-section-2 {
		justify-content: center;
	}

	.site-footer .site-footer-bottom-section-2 .footer-navigation-wrap,
	.site-footer .site-footer-bottom-section-2 .footer-menu-container {
		margin-inline: auto;
	}

	.site-footer .footer-navigation .menu {
		justify-content: center;
	}
}

/* -- Cross-type prompt (PRD §8.4 §18) ------------------------------------- */

.smi-cross-prompt {
	padding: var(--smi-space-4);
	background-color: var(--smi-surface);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
}

/* =========================================================================
   Scroll reveal
   =========================================================================
   Hidden ONLY under html.smi-anim, which the head script adds exclusively
   when IntersectionObserver exists and the visitor has not asked for reduced
   motion — so no-JS visitors, crawlers, and reduced-motion users always get
   fully visible content. The selector list must mirror TARGETS in reveal.js.
   ========================================================================= */

/*
 * :where() keeps every hide rule at specificity (0,1,1) regardless of how
 * compound the target selector is. Without it, a target like `.smi-steps li`
 * out-ranks the `.is-revealed` rule below and stays invisible forever —
 * which is exactly the failure mode that blanked the How-it-works section.
 * Browsers too old for :where() simply never hide anything, which is the
 * right way for this feature to fail.
 */
html.smi-anim :where(
	.smi-section__head,
	.smi-card,
	.smi-news-card,
	.smi-city-tile,
	.smi-value,
	.smi-steps li,
	.smi-trust__card,
	.smi-facts,
	.smi-listing__section
) {
	opacity: 0;
	transform: translateY(18px);
}

/* No transition-delay here — the stagger is timed in reveal.js by delaying
   when this class is added. A CSS delay would leak into every subsequent
   hover transition on the element. */
html.smi-anim .is-revealed {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity .55s var(--smi-ease),
		transform .55s var(--smi-ease);
}

/*
 * Interactive cards need their hover transitions back after the reveal:
 * without this hand-back, the reveal rule above owns `transition` and hover
 * shadows snap while lifts crawl at the reveal's .55s. Transform is split
 * to .3s as the compromise both effects share — a slightly quicker rise,
 * a slightly softer lift.
 */
html.smi-anim .smi-card.is-revealed,
html.smi-anim .smi-city-tile.is-revealed,
html.smi-anim .smi-news-card.is-revealed {
	transition:
		opacity .55s var(--smi-ease),
		transform .3s var(--smi-ease),
		box-shadow var(--smi-duration) var(--smi-ease);
}

/* =========================================================================
   Carousel — scroll-snap track with arrow controls
   ========================================================================= */

.smi-carousel {
	/* Bleed the track's edge padding so card shadows are not clipped. */
	margin-inline: calc(-1 * var(--smi-space-1));
}

.smi-carousel__track {
	display: flex;
	gap: var(--smi-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: var(--smi-space-1) var(--smi-space-1) var(--smi-space-3);
	scrollbar-width: none;
}

.smi-carousel__track::-webkit-scrollbar {
	display: none;
}

.smi-carousel__track > * {
	flex: 0 0 clamp(272px, calc((100% - 2 * var(--smi-space-4)) / 3), 440px);
	scroll-snap-align: start;
}

@media (max-width: 639px) {
	.smi-carousel__track > * {
		flex-basis: 84%;
	}
}

.smi-carousel-nav {
	display: inline-flex;
	gap: var(--smi-space-2);
}

.smi-carousel-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--smi-tap);
	block-size: var(--smi-tap);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-white);
	background-image: var(--smi-grad-card);
	color: var(--smi-navy);
	cursor: pointer;
	box-shadow: var(--smi-shadow-xs), var(--smi-edge-light);
	transition:
		background-color var(--smi-duration) var(--smi-ease),
		border-color var(--smi-duration) var(--smi-ease),
		box-shadow var(--smi-duration-mid) var(--smi-ease),
		transform var(--smi-duration-mid) var(--smi-ease-spring),
		opacity var(--smi-duration) var(--smi-ease);
}

.smi-carousel-nav button:hover:not(:disabled) {
	background-color: var(--smi-navy);
	background-image: var(--smi-grad-navy);
	border-color: var(--smi-navy);
	color: var(--smi-white);
	transform: translateY(-2px);
	box-shadow: var(--smi-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.smi-carousel-nav button:hover:not(:disabled) {
		transform: none;
	}
}

.smi-carousel-nav button:disabled {
	opacity: .35;
	cursor: default;
}

.smi-carousel-nav svg {
	inline-size: 18px;
	block-size: 18px;
}

/* =========================================================================
   News cards — the blog carousel above the footer
   ========================================================================= */

/* Same elevation language as .smi-card — the two appear on the same page and
   any difference in depth reads as an accident rather than a hierarchy. */
.smi-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--smi-white);
	background-image: var(--smi-grad-card);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
	box-shadow: var(--smi-shadow), var(--smi-edge-light);
	transition:
		box-shadow var(--smi-duration-mid) var(--smi-ease),
		transform var(--smi-duration-mid) var(--smi-ease-spring);
}

.smi-news-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(var(--smi-accent-rgb), .55);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--smi-duration-mid) var(--smi-ease);
}

.smi-news-card:hover::after,
.smi-news-card:focus-within::after {
	opacity: 1;
}

/* Featured image, full-bleed across the card top. The fixed ratio means a
   carousel row of mixed-size uploads still reads as one straight shelf. */
.smi-news-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--smi-surface);
}

.smi-news-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--smi-duration-slow) var(--smi-ease-spring);
}

.smi-news-card:hover .smi-news-card__media img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.smi-news-card:hover .smi-news-card__media img {
		transform: none;
	}
}

.smi-news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--smi-space-2);
	padding: var(--smi-space-4);
}

.smi-news-card:hover,
.smi-news-card:focus-within {
	box-shadow: var(--smi-shadow-xl), var(--smi-edge-light);
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.smi-news-card:hover {
		transform: none;
		box-shadow: var(--smi-shadow-md), var(--smi-edge-light);
	}
}

.smi-news-card__meta {
	display: flex;
	align-items: center;
	gap: var(--smi-space-2);
	font-size: var(--smi-text-label);
	color: var(--smi-muted);
}

.smi-news-card__meta .smi-badge {
	font-size: 9px;
}

.smi-news-card__title {
	font-size: var(--smi-text-h4);
	line-height: 1.35;
	margin: 0;
}

.smi-news-card__title a {
	color: var(--smi-navy);
	text-decoration: none;
}

.smi-news-card__title a:hover {
	text-decoration: underline;
}

.smi-news-card__excerpt {
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
	margin: 0;
}

.smi-news-card__more {
	margin-block-start: auto;
	padding-block-start: var(--smi-space-2);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--smi-text-small);
	font-weight: 600;
	color: var(--smi-navy);
}

.smi-news-card__more svg {
	inline-size: 14px;
	block-size: 14px;
	color: var(--smi-accent-600);
}

/* =========================================================================
   Blog index — /blog/
   ========================================================================= */

/* Self-contained: filters.css (which styles the listing archives' hero) is
   not enqueued on the posts index, so the blog carries its own copies. */
.smi-blog__hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--smi-space-3);
	padding-block: var(--smi-space-6) var(--smi-space-4);
}

.smi-blog__hero h1 {
	margin-block-end: 0;
}

.smi-blog__grid {
	padding-block-end: var(--smi-space-5);
}

/* WordPress pagination, restyled to the button language. */
.smi-pagination {
	margin-block: var(--smi-space-2) var(--smi-space-7);
}

.smi-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--smi-space-2);
}

.smi-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--smi-tap);
	min-block-size: var(--smi-tap);
	padding: 8px 14px;
	font-size: var(--smi-text-small);
	font-weight: 600;
	color: var(--smi-navy);
	background-color: var(--smi-surface);
	border-radius: var(--smi-radius-btn);
	text-decoration: none;
	transition:
		background-color var(--smi-duration) var(--smi-ease),
		color var(--smi-duration) var(--smi-ease);
}

.smi-pagination a.page-numbers:hover {
	background-color: var(--smi-navy);
	color: var(--smi-white);
}

.smi-pagination .page-numbers.current {
	background-color: var(--smi-navy);
	color: var(--smi-white);
}

.smi-pagination .page-numbers.dots {
	background: none;
}

/* =========================================================================
   Page hero + two-column page layout (Contact, List Your Property)
   =========================================================================
   These pages previously borrowed .smi-listing / .smi-agent-card from
   property.css, which only loads on listing pages — so on pages the layout
   silently collapsed to unstyled full-width stacking. This is their own
   layout system, loaded everywhere components.css is.
   ========================================================================= */

/* Top gap comes from main.wrap now (see base.css); only the gap down to the
   page's own content is set here. */
.smi-page-hero {
	padding-block: 0 var(--smi-space-4);
}

.smi-page-hero h1 {
	margin-block-end: var(--smi-space-2);
}

.smi-page-hero__lead {
	max-inline-size: 60ch;
	font-size: var(--smi-text-body-lg);
	color: var(--smi-muted);
	margin: 0;
}

.smi-page-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--smi-space-4);
	padding-block-end: var(--smi-space-7);
}

@media (min-width: 1024px) {
	.smi-page-grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--smi-space-5);
		align-items: start;
	}
}

.smi-page-grid__aside {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-4);
}

@media (min-width: 1024px) {
	.smi-page-grid__aside {
		position: sticky;
		inset-block-start: 96px;
	}
}

/* -- White card that hosts a Fluent Form ---------------------------------- */

.smi-form-card {
	background-color: var(--smi-white);
	border-radius: var(--smi-radius-card);
	box-shadow: 0 2px 16px rgba(var(--smi-navy-rgb), .07);
	padding: var(--smi-space-5);
}

@media (max-width: 639px) {
	.smi-form-card {
		padding: var(--smi-space-4);
	}
}

.smi-form-card > h2 {
	font-size: var(--smi-text-h3);
	margin-block-end: var(--smi-space-1);
}

.smi-form-card__note {
	display: flex;
	align-items: center;
	gap: var(--smi-space-2);
	margin-block-end: var(--smi-space-4);
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.smi-form-card__note svg {
	inline-size: 15px;
	block-size: 15px;
	color: var(--smi-accent-600);
	flex-shrink: 0;
}

/* Fluent Forms fields, restyled to the site's field language: surface fill,
   transparent border so focus never shifts layout. */
.smi-form-card .ff-el-input--label label {
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-small);
	font-weight: 600;
	color: var(--smi-navy);
}

.smi-form-card .ff-el-form-control {
	inline-size: 100%;
	min-block-size: 46px;
	padding: 11px 14px;
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-body);
	color: var(--smi-ink);
	background-color: var(--smi-surface);
	border: 1px solid transparent;
	border-radius: var(--smi-radius-btn);
	transition:
		border-color var(--smi-duration) var(--smi-ease),
		background-color var(--smi-duration) var(--smi-ease);
}

.smi-form-card .ff-el-form-control:hover {
	background-color: #EFF2F6;
}

.smi-form-card .ff-el-form-control:focus {
	background-color: var(--smi-white);
	border-color: var(--smi-navy);
	outline: none;
	box-shadow: none;
}

.smi-form-card textarea.ff-el-form-control {
	min-block-size: 130px;
}

.smi-form-card .ff-el-group {
	margin-block-end: var(--smi-space-3);
}

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

.smi-side-card {
	background-color: var(--smi-white);
	border-radius: var(--smi-radius-card);
	box-shadow: 0 2px 16px rgba(var(--smi-navy-rgb), .07);
	padding: var(--smi-space-4);
}

.smi-side-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-label);
	font-weight: 600;
	letter-spacing: var(--smi-track-label);
	text-transform: uppercase;
	color: var(--smi-navy);
	margin-block-end: var(--smi-space-3);
}

.smi-side-card__title::before {
	content: "";
	inline-size: 14px;
	block-size: 3px;
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-accent);
	flex-shrink: 0;
}

.smi-contact-rows {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smi-contact-rows a {
	display: flex;
	align-items: center;
	gap: var(--smi-space-3);
	padding: 12px var(--smi-space-2);
	margin-inline: calc(-1 * var(--smi-space-2));
	border-radius: var(--smi-radius-btn);
	text-decoration: none;
	transition: background-color var(--smi-duration) var(--smi-ease);
}

.smi-contact-rows a:hover {
	background-color: var(--smi-surface);
}

.smi-contact-rows__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: var(--smi-radius-pill);
	background-color: rgba(var(--smi-accent-rgb), .16);
	color: var(--smi-navy);
	flex-shrink: 0;
}

.smi-contact-rows__icon--whatsapp {
	background-color: rgba(37, 211, 102, .16);
	color: #128C4B;
}

.smi-contact-rows__icon svg {
	inline-size: 18px;
	block-size: 18px;
}

.smi-contact-rows__label {
	display: block;
	font-size: var(--smi-text-label);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smi-muted);
}

.smi-contact-rows__value {
	display: block;
	font-weight: 600;
	color: var(--smi-navy);
	overflow-wrap: anywhere;
}

.smi-side-card__meta {
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
	line-height: 1.6;
	margin: 0;
}

.smi-side-card__meta + .smi-side-card__title {
	margin-block-start: var(--smi-space-4);
}

/* Map embed frame — defined here as well as property.css because the contact
   page uses it and property.css never loads on pages. */
.smi-map {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	border-radius: var(--smi-radius-btn);
	overflow: hidden;
	background-color: var(--smi-surface);
}

.smi-map iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* =========================================================================
   Team Member Cards — Enhanced styling for better UI
   ========================================================================= */

.smi-agent-card__avatar {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	border-radius: var(--smi-radius-btn);
	margin-block-end: var(--smi-space-4);
	background-color: var(--smi-surface);
	transition: transform var(--smi-duration-slow) var(--smi-ease-spring);
}

.smi-card:hover .smi-agent-card__avatar {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.smi-card:hover .smi-agent-card__avatar {
		transform: none;
	}
}

.smi-card__body {
	padding: var(--smi-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-3);
}

.smi-card__title {
	font-size: var(--smi-text-body-lg);
	font-weight: 600;
	color: var(--smi-navy);
	margin: 0;
}

.smi-card__body .smi-eyebrow {
	font-size: var(--smi-text-label);
	color: var(--smi-accent);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
	font-weight: 600;
}

.smi-card__body .smi-meta {
	font-size: var(--smi-text-body);
	color: var(--smi-muted);
	line-height: 1.6;
	margin: 0;
}

/* =========================================================================
   Single post — /blog/{post-slug}
   ========================================================================= */

.smi-single-post {
	background-color: var(--smi-white);
}

.smi-post-content {
	padding-block: var(--smi-space-6);
	max-inline-size: 720px;
	margin-inline: auto;
}

.smi-post-header {
	margin-block-end: var(--smi-space-4);
}

.smi-post-header .smi-badge {
	display: inline-block;
	margin-block-end: var(--smi-space-2);
}

.smi-post-title {
	font-size: var(--smi-text-h2);
	line-height: 1.2;
	color: var(--smi-navy);
	margin: 0 0 var(--smi-space-3) 0;
}

.smi-post-meta {
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
	margin: 0;
}

.smi-post-thumbnail {
	margin-block: var(--smi-space-4) var(--smi-space-6);
	border-radius: var(--smi-radius-card);
	overflow: hidden;
	box-shadow: var(--smi-shadow), var(--smi-edge-light);
}

.smi-post-thumbnail img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.smi-post-body {
	font-size: var(--smi-text-body);
	line-height: 1.7;
	color: var(--smi-body);
}

.smi-post-body p {
	margin-block: var(--smi-space-4);
}

.smi-post-body h2,
.smi-post-body h3,
.smi-post-body h4 {
	margin-block: var(--smi-space-5) var(--smi-space-3);
	color: var(--smi-navy);
	font-weight: 600;
	line-height: 1.3;
}

.smi-post-body h2 {
	font-size: var(--smi-text-h3);
}

.smi-post-body h3 {
	font-size: var(--smi-text-h4);
}

.smi-post-body h4 {
	font-size: var(--smi-text-body-lg);
}

.smi-post-body ul,
.smi-post-body ol {
	margin-block: var(--smi-space-4);
	padding-inline-start: 2em;
}

.smi-post-body li {
	margin-block-end: 8px;
}

.smi-post-body blockquote {
	margin-block: var(--smi-space-4);
	padding-inline-start: var(--smi-space-4);
	border-inline-start: 4px solid var(--smi-accent);
	font-style: italic;
	color: var(--smi-muted);
}

.smi-post-body a {
	color: var(--smi-accent);
	text-decoration: underline;
	transition: color var(--smi-duration) var(--smi-ease);
}

.smi-post-body a:hover {
	color: var(--smi-accent-600);
}

.smi-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smi-space-2);
	margin-block: var(--smi-space-5);
	padding-block: var(--smi-space-5);
	border-block: 1px solid var(--smi-border);
}

.smi-page-label {
	font-weight: 600;
	color: var(--smi-navy);
}

.smi-page-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 8px 12px;
	background-color: var(--smi-surface);
	border-radius: var(--smi-radius-btn);
	font-weight: 600;
	color: var(--smi-navy);
	text-decoration: none;
	transition:
		background-color var(--smi-duration) var(--smi-ease),
		color var(--smi-duration) var(--smi-ease);
}

.smi-page-links a:hover {
	background-color: var(--smi-navy);
	color: var(--smi-white);
}

/* Related articles / Similar posts */
.smi-similar-posts {
	background-color: var(--smi-surface);
	padding-block: var(--smi-space-6);
	margin-block-start: var(--smi-space-7);
}

.smi-similar-posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--smi-space-4);
	padding-block-end: var(--smi-space-2);
}

@media (max-width: 768px) {
	.smi-similar-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* Comments section */
.smi-comments-section {
	padding-block: var(--smi-space-6);
}

.smi-comments-title {
	font-size: var(--smi-text-h3);
	color: var(--smi-navy);
	margin-block-end: var(--smi-space-4);
}

/* Comment form styling */
.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-4);
	max-inline-size: 720px;
}

.comment-form p {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-2);
	margin: 0;
}

.comment-form label {
	font-weight: 600;
	color: var(--smi-navy);
	font-size: var(--smi-text-small);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	padding: 12px var(--smi-space-3);
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-body);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-btn);
	background-color: var(--smi-white);
	transition:
		border-color var(--smi-duration) var(--smi-ease),
		box-shadow var(--smi-duration) var(--smi-ease);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--smi-accent);
	box-shadow: 0 0 0 3px rgba(var(--smi-accent-rgb), 0.1);
}

.comment-form textarea {
	min-block-size: 140px;
	resize: vertical;
	font-family: var(--smi-font-body);
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
	flex: 1;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--smi-space-2);
	font-size: var(--smi-text-small);
}

.comment-form-cookies-consent input[type="checkbox"] {
	cursor: pointer;
}

.comment-form-cookies-consent label {
	cursor: pointer;
	font-weight: normal;
	margin: 0;
}

.form-submit {
	display: flex;
	gap: var(--smi-space-2);
}

.form-submit input[type="submit"] {
	padding: 12px 32px;
	font-weight: 600;
	font-size: var(--smi-text-button);
	border: none;
	border-radius: var(--smi-radius-btn);
	cursor: pointer;
	transition:
		background-color var(--smi-duration) var(--smi-ease),
		color var(--smi-duration) var(--smi-ease);
	/* Use button styling from smi-btn */
	background-color: var(--smi-accent);
	color: var(--smi-white);
}

.form-submit input[type="submit"]:hover {
	background-color: var(--smi-accent-600);
}

/* Comments list */
.commentlist {
	list-style: none;
	padding: 0;
	margin-block: var(--smi-space-4) var(--smi-space-6);
}

.comment {
	margin-block-end: var(--smi-space-5);
	padding: var(--smi-space-4);
	background-color: var(--smi-surface);
	border-radius: var(--smi-radius-btn);
	border: 1px solid var(--smi-border);
}

.comment .children {
	margin-block-start: var(--smi-space-4);
	margin-inline-start: var(--smi-space-4);
	list-style: none;
	padding: 0;
	border-inline-start: 2px solid var(--smi-border);
	padding-inline-start: var(--smi-space-4);
}

.comment .children .comment {
	background-color: var(--smi-white);
	margin-block-end: var(--smi-space-3);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--smi-space-2);
	margin-block-end: var(--smi-space-3);
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.comment-author {
	font-weight: 600;
	color: var(--smi-navy);
}

.comment-body {
	font-size: var(--smi-text-body);
	line-height: 1.6;
	color: var(--smi-body);
}

.comment-body p {
	margin-block: var(--smi-space-2);
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: var(--smi-space-2);
	padding: 8px 16px;
	font-size: var(--smi-text-small);
	font-weight: 600;
	color: var(--smi-accent);
	background-color: transparent;
	border: 1px solid var(--smi-accent);
	border-radius: var(--smi-radius-btn);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color var(--smi-duration) var(--smi-ease),
		color var(--smi-duration) var(--smi-ease);
}

.comment-reply-link:hover {
	background-color: var(--smi-accent);
	color: var(--smi-white);
}

/* =========================================================================
   Legal / policy pages — page-templates/legal.php
   =========================================================================
   No banner block and no section padding: main.wrap already supplies the
   page's top and bottom gap, and these pages open straight into the text.
   Full container width on client direction, so the usual 70ch measure is
   deliberately not applied to the body copy here. */

.smi-legal__title {
	font-size: var(--smi-text-h2);
	margin: 0 0 var(--smi-space-2);
}

.smi-legal__updated {
	margin: 0 0 var(--smi-space-5);
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

.smi-legal__body {
	max-inline-size: none;
}

/* .smi-prose caps its own children; full width means releasing those too. */
.smi-legal__body > * {
	max-inline-size: none;
}

.smi-legal__contact {
	margin-block-start: var(--smi-space-5);
	padding-block-start: var(--smi-space-4);
	border-block-start: 1px solid var(--smi-border);
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}