/**
 * Oplus — Branded Residences, the collection archive.
 * Layered on oplus-brands.css. Loaded only on /branded-residences/.
 *
 * The brand pages set the register; this has to match it or the two feel like
 * different sites. Same chrome, same tokens, same motion vocabulary — what
 * differs is composition, because a collection has a different job from a
 * single development.
 *
 * The hero problem: a collection has no one subject to photograph. Rather than
 * commission an image that represents nothing, the hero cross-fades the
 * brands' own covers. Every frame is a project we actually sell, which is both
 * the honest version and the one that never goes stale.
 *
 * Written logical-first for RTL, like the rest of the module.
 */

/* -------------------------------------------------------------------------
 * 1. HERO
 *
 * Rebuilt. The previous version floated the counters in a translucent bar over
 * the image, which read as a widget bolted onto a photograph rather than part
 * of the composition — and it broke at every width because it was absolutely
 * positioned while its own contents rewrapped underneath it.
 *
 * This version is a two-row grid: the stage fills whatever is left after the
 * counter rail, and the rail is a real row in the layout at every size. There
 * is nothing to reserve space for and nothing to collide with.
 * ---------------------------------------------------------------------- */

.obr-chero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--obr-black);
}

/*
 * Oversized on purpose, and this is load-bearing.
 *
 * The layer is parallaxed on scroll. At `inset: 0` it is exactly the height of
 * the hero, so ANY downward travel leaves its own top edge behind — a black
 * band under the header that only closed again if the scroll position returned
 * to precisely zero. Nothing was wrong with the tween; there was simply no
 * room for it to move in.
 *
 * 12% of headroom above and below gives the travel somewhere to go. The hero's
 * own overflow:hidden clips the excess, so nothing spills.
 */
.obr-chero-media {
	position: absolute;
	inset-inline: 0;
	top: -12%;
	height: 124%;
	z-index: 0;
	overflow: hidden;
}

/*
 * Frames are stacked and cross-faded by the script. Inactive ones stay in the
 * layer at zero opacity rather than display:none, so the browser keeps them
 * decoded and the transition has nothing to wait for.
 *
 * The explicit height is why the zero-specificity image default in the shared
 * sheet matters: written as `.obr img`, that default's `height: auto` beat
 * this and the frame collapsed to its intrinsic aspect.
 */
.obr-chero-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1800ms var(--obr-ease);
}

.obr-chero-frame.is-on {
	opacity: 1;
}

/*
 * Scrim.
 *
 * Three layers rather than one: a floor that carries the copy, a directional
 * wash toward the text edge, and a top veil so the fixed bar has something to
 * sit on. A single gradient either washes the photograph out or fails to hold
 * the type — this holds both.
 */
.obr-chero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.94) 0%,
			rgba(0, 0, 0, 0.66) 26%,
			rgba(0, 0, 0, 0.28) 56%,
			rgba(0, 0, 0, 0.12) 78%,
			rgba(0, 0, 0, 0.5) 100%
		),
		linear-gradient(
			to right,
			rgba(0, 0, 0, 0.7) 0%,
			rgba(0, 0, 0, 0.34) 44%,
			rgba(0, 0, 0, 0) 76%
		);
}

[dir="rtl"] .obr-chero-scrim {
	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.94) 0%,
			rgba(0, 0, 0, 0.66) 26%,
			rgba(0, 0, 0, 0.28) 56%,
			rgba(0, 0, 0, 0.12) 78%,
			rgba(0, 0, 0, 0.5) 100%
		),
		linear-gradient(
			to left,
			rgba(0, 0, 0, 0.7) 0%,
			rgba(0, 0, 0, 0.34) 44%,
			rgba(0, 0, 0, 0) 76%
		);
}

.obr-chero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: calc(var(--obr-bar) + clamp(28px, 5vh, 56px)) clamp(32px, 6vh, 64px);
}

/*
 * Left-aligned, unlike the brand hero.
 *
 * A brand page centres because its film has one subject on the centre axis.
 * Here the imagery changes every few seconds, so anchoring the type to one
 * edge gives the eye something that stays put — and it tells the two pages
 * apart at a glance.
 */
.obr-chero-title {
	margin: 0 0 20px;
	max-width: 16ch;
	font-size: clamp(2.125rem, 1.1rem + 4.2vw, 4.75rem);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -0.038em;
	text-wrap: balance;
	hyphens: none;
	-webkit-hyphens: none;
	overflow-wrap: normal;
}

/* Word wrappers from the splitter — see splitHeadline() in the script. */
.obr-chero-title .obr-word {
	display: inline-block;
	white-space: nowrap;
}

.obr-chero-lead {
	margin: 0 0 36px;
	max-width: 50ch;
	font-size: clamp(0.9375rem, 0.9rem + 0.42vw, 1.25rem);
	line-height: 1.6;
	color: var(--obr-ink-70);
	text-wrap: pretty;
}

.obr-chero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- Counter rail ------------------------------------------------------
 *
 * A real grid row, not an overlay. Hairline separators and a solid floor:
 * the translucent "glass" panel it replaces looked like a control surface
 * from a different product.
 */

.obr-chero-stats {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin: 0;
	border-top: 1px solid var(--obr-ink-12);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.66));
}

.obr-chero-stat {
	position: relative;
	padding: clamp(16px, 2.4vh, 26px) clamp(20px, 3vw, 40px);
}

/* Drawn rather than bordered, so the last cell in a row needs no exception. */
.obr-chero-stat + .obr-chero-stat::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 22%;
	width: 1px;
	background: var(--obr-ink-12);
}

.obr-chero-stat dt {
	margin: 0 0 6px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--obr-ink-50);
}

.obr-chero-stat dd {
	margin: 0;
	font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* The scroll cue belongs to the stage, not the rail. */
.obr-chero .obr-scrollcue {
	bottom: auto;
	top: calc(100% - 190px);
}

/* --- Tablet and phone --------------------------------------------------
 *
 * The desktop composition does not scale down. It leans on a wide frame: type
 * anchored to one flank with the photograph breathing on the other, and a
 * scrim weighted to that side. On a portrait screen there is no other side —
 * the directional wash just darkens the whole image, so the top third read as
 * a photograph and everything below it as a black box.
 *
 * Portrait gets its own treatment: an even scrim that keeps the image legible
 * for its full height, the copy optically centred rather than shoved to the
 * floor, and a type scale that fits a 375px line without hyphenating.
 */
@media (max-width: 900px) {
	.obr-chero-scrim,
	[dir="rtl"] .obr-chero-scrim {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.62) 0%,
			rgba(0, 0, 0, 0.34) 26%,
			rgba(0, 0, 0, 0.46) 58%,
			rgba(0, 0, 0, 0.84) 100%
		);
	}

	/* Portrait crops hard from a landscape render. Biasing the focal point
	   above centre keeps the architecture in frame instead of the sky. */
	.obr-chero-frame {
		object-position: center 38%;
	}

	.obr-chero-inner {
		justify-content: center;
		padding-block: calc(var(--obr-bar) + 24px) 32px;
	}

	.obr-chero-title {
		max-width: 100%;
		font-size: clamp(1.875rem, 1.3rem + 3.4vw, 2.75rem);
		margin-bottom: 16px;
	}

	.obr-chero-lead {
		margin-bottom: 28px;
		font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
	}

	.obr-chero-actions .obr-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.obr-chero-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	/* In a wrapped grid the drawn separator has to follow the columns, not
	   the source order. */
	.obr-chero-stat + .obr-chero-stat::before {
		display: none;
	}

	.obr-chero-stat:nth-child(odd)::after {
		content: "";
		position: absolute;
		inset-inline-end: 0;
		inset-block: 22%;
		width: 1px;
		background: var(--obr-ink-12);
	}

	.obr-chero-stat:nth-child(n + 3) {
		border-top: 1px solid var(--obr-ink-12);
	}

	.obr-chero .obr-scrollcue {
		display: none;
	}
}

@media (min-width: 561px) and (max-width: 900px) {
	.obr-chero-actions .obr-btn {
		flex: 0 0 auto;
	}
}

@media (max-width: 560px) {
	.obr-chero-stats {
		grid-template-columns: 1fr 1fr;
	}

	.obr-chero-stat {
		padding: 14px 18px;
	}

	.obr-chero-stat dd {
		font-size: 1.25rem;
	}

	/* A lone final counter takes the full row rather than sitting half-width. */
	.obr-chero-stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.obr-chero-stat:last-child:nth-child(odd)::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 2. WHY
 * ---------------------------------------------------------------------- */

.obr-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(24px, 3vw, 48px);
	margin-top: 40px;
}

.obr-why-item {
	padding-top: 22px;
	border-top: 1px solid var(--obr-ink-12);
}

/* The numeral is the only place the raw brand accent appears in this section —
   enough to tie the page to the collection without colouring the copy. */
.obr-why-index {
	display: block;
	margin-bottom: 14px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--obr-accent);
	font-variant-numeric: tabular-nums;
}

.obr-why-item h3 {
	margin: 0 0 12px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.obr-why-item p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--obr-ink-50);
}

/* -------------------------------------------------------------------------
 * 3. FEATURED BAND
 * ---------------------------------------------------------------------- */

/*
 * Sized by its content, not by the viewport.
 *
 * The first version pinned this to 78svh. With four short lines of copy that
 * left a large band of unused image below the text — the "dead space" the
 * client flagged. A generous min-height plus real padding gives the band
 * presence without reserving room nothing fills.
 */
.obr-featured {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(62svh, 620px);
	overflow: hidden;
	background: var(--obr-black);
}

.obr-featured-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.obr-featured-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.05;
}

.obr-featured-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to right,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.55) 44%,
			rgba(0, 0, 0, 0.1) 82%
		),
		linear-gradient(to top, var(--obr-black), transparent 34%),
		linear-gradient(to bottom, var(--obr-black), transparent 22%);
}

[dir="rtl"] .obr-featured-scrim {
	background:
		linear-gradient(
			to left,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.55) 44%,
			rgba(0, 0, 0, 0.1) 82%
		),
		linear-gradient(to top, var(--obr-black), transparent 34%),
		linear-gradient(to bottom, var(--obr-black), transparent 22%);
}

.obr-featured-inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(56px, 8vw, 96px);
	max-width: 1280px;
}

.obr-featured-logo {
	height: clamp(48px, 5.5vw, 76px);
	width: auto;
	max-width: min(320px, 70vw);
	margin-bottom: 22px;
	object-fit: contain;
	object-position: left center;
}

[dir="rtl"] .obr-featured-logo {
	object-position: right center;
}

.obr-featured-name {
	margin: 0 0 12px;
	max-width: 16ch;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: #fff;
}

.obr-featured-tagline {
	margin: 0 0 26px;
	max-width: 44ch;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
	line-height: 1.6;
	color: var(--obr-ink-70);
}

.obr-featured-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
}

.obr-featured-facts li {
	position: relative;
	padding-inline-start: 18px;
}

.obr-featured-facts li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--obr-accent);
}

/* -------------------------------------------------------------------------
 * 4. FILTERS
 * ---------------------------------------------------------------------- */

.obr-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin: 34px 0 18px;
	padding: 22px;
	border: 1px solid var(--obr-ink-12);
	border-radius: var(--obr-r-lg);
	background: var(--obr-panel);
}

.obr-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 150px;
	flex: 1 1 150px;
}

.obr-field--search {
	flex: 2 1 240px;
}

.obr-field label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--obr-ink-50);
}

.obr-field input,
.obr-field select {
	width: 100%;
	height: 46px;
	padding-inline: 14px;
	border: 1px solid var(--obr-ink-12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	font-size: 0.9375rem;
	font-family: inherit;
}

/* Native select options render on the OS surface, which is light — without
   this the option list is white text on white. */
.obr-field select option {
	color: #111;
	background: #fff;
}

.obr-field input:focus,
.obr-field select:focus {
	outline: 2px solid var(--obr-action);
	outline-offset: 1px;
	border-color: transparent;
}

.obr-filters .obr-btn {
	flex: 0 0 auto;
	min-height: 46px;
}

.obr-result-count {
	margin: 0 0 26px;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--obr-ink-50);
}

.obr-no-results {
	padding: 56px 24px;
	text-align: center;
	color: var(--obr-ink-50);
	border: 1px dashed var(--obr-ink-12);
	border-radius: var(--obr-r-lg);
}

/* -------------------------------------------------------------------------
 * 5. BRAND CARDS
 *
 * Rebuilt around one rule: the frame is fixed, the photograph adapts.
 *
 * Covers arrive at whatever crop the developer supplied — square renders, wide
 * aerials, the occasional portrait. Letting each card take the shape of its
 * image produced a ragged row of unequal cards. Here every media panel is 4:3,
 * the image fills it, and the brand mark sits in the optical centre over a
 * soft blur. What has to read at a glance is the mark, not the architecture.
 * ---------------------------------------------------------------------- */

.obr-grid {
	display: grid;
	/* auto-FIT, not auto-fill: auto-fill keeps the empty tracks, so a
	   collection of two brands rendered as two narrow cards stranded at the
	   inline-start edge with half the row blank. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(18px, 2.2vw, 30px);
	margin-top: 8px;
}

.obr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--obr-ink-12);
	border-radius: var(--obr-r-lg);
	background: var(--obr-panel);
	overflow: hidden;
	transition: transform var(--obr-mid) var(--obr-ease),
		border-color var(--obr-mid) var(--obr-ease),
		box-shadow var(--obr-mid) var(--obr-ease);
}

.obr-card:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--obr-accent-rgb), 0.5);
	box-shadow: 0 30px 70px -34px rgba(var(--obr-accent-rgb), 0.7);
}

.obr-card[hidden] {
	display: none;
}

/* --- Media panel -------------------------------------------------------- */

.obr-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--obr-panel-2);
	overflow: hidden;
}

.obr-card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/*
	 * A light blur and a slight desaturation. The photograph is a setting for
	 * the mark, not the subject — at full sharpness the architecture competes
	 * with the logo sitting on top of it and neither wins.
	 */
	filter: blur(3px) saturate(0.9) brightness(0.72);
	transform: scale(1.08);
	transition: transform var(--obr-slow) var(--obr-ease),
		filter var(--obr-slow) var(--obr-ease);
}

/* Hover resolves it — the reward for showing interest is a clearer picture. */
.obr-card:hover .obr-card-bg {
	filter: blur(1px) saturate(1) brightness(0.82);
	transform: scale(1.12);
}

.obr-card-scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			78% 62% at 50% 50%,
			rgba(0, 0, 0, 0.35) 0%,
			rgba(0, 0, 0, 0.62) 100%
		),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
}

/*
 * The mark, dead centre.
 *
 * Sized by the box rather than by the file, so a wide lockup and a round
 * emblem occupy the same visual weight. Without both a width and a height cap
 * one brand's logo dwarfs the next and the grid stops looking like a set.
 */
.obr-card-mark {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 12%;
	transition: transform var(--obr-mid) var(--obr-ease);
}

.obr-card-mark img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 68%;
	object-fit: contain;
	filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}

.obr-card:hover .obr-card-mark {
	transform: scale(1.04);
}

.obr-card .obr-pill--onmedia {
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 2;
}

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

.obr-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(20px, 2vw, 26px);
}

.obr-card-title {
	margin: 0 0 6px;
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.25;
	color: #fff;
}

.obr-card-title a {
	color: inherit;
	text-decoration: none;
}

/* Whole card is one target, without nesting anchors. */
.obr-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.obr-card-meta {
	margin: 0 0 14px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--obr-accent);
}

.obr-card-blurb {
	margin: 0 0 20px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--obr-ink-50);
}

.obr-card-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
	gap: 16px;
	margin: auto 0 20px;
	padding-top: 18px;
	border-top: 1px solid var(--obr-ink-12);
}

.obr-card-facts dt {
	margin: 0 0 5px;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--obr-ink-50);
}

.obr-card-facts dd {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.obr-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--obr-accent);
}

.obr-arrow {
	display: inline-block;
	transition: transform var(--obr-fast) var(--obr-ease);
}

[dir="rtl"] .obr-arrow {
	transform: scaleX(-1);
}

.obr-card:hover .obr-arrow {
	transform: translateX(5px);
}

[dir="rtl"] .obr-card:hover .obr-arrow {
	transform: scaleX(-1) translateX(5px);
}

@media (max-width: 560px) {
	/* Wider frame on a phone: 4:3 eats most of a small screen before any copy
	   has been read. */
	.obr-card-media {
		aspect-ratio: 16 / 10;
	}
}

@media (hover: none) {
	/* No hover to resolve the blur, so it never gets applied that heavily. */
	.obr-card-bg {
		filter: blur(2px) saturate(0.95) brightness(0.78);
	}
}

/* -------------------------------------------------------------------------
 * 6. COMPARE TABLE
 * ---------------------------------------------------------------------- */

.obr-table-scroll {
	margin-top: 34px;
	overflow-x: auto;
	border: 1px solid var(--obr-ink-12);
	border-radius: var(--obr-r-lg);
	background: rgba(8, 8, 9, 0.86);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	-webkit-overflow-scrolling: touch;
}

.obr-table-scroll:focus-visible {
	outline: 2px solid var(--obr-action);
	outline-offset: 2px;
}

.obr-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 780px;
}

.obr-table th,
.obr-table td {
	padding: 17px 20px;
	text-align: start;
	border-bottom: 1px solid var(--obr-ink-12);
	vertical-align: middle;
	color: var(--obr-ink-70);
}

.obr-table thead th {
	position: sticky;
	inset-block-start: 0;
	background: rgba(10, 10, 11, 0.96);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--obr-ink-50);
	white-space: nowrap;
	z-index: 1;
}

.obr-table thead button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.obr-table thead button::after {
	content: "\2195";
	opacity: 0.4;
	font-size: 0.9em;
}

.obr-table thead button[aria-sort="ascending"]::after {
	content: "\2191";
	opacity: 1;
	color: var(--obr-accent);
}

.obr-table thead button[aria-sort="descending"]::after {
	content: "\2193";
	opacity: 1;
	color: var(--obr-accent);
}

.obr-table tbody tr:last-child th,
.obr-table tbody tr:last-child td {
	border-bottom: 0;
}

.obr-table tbody tr {
	transition: background-color var(--obr-fast) var(--obr-ease);
}

.obr-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.04);
}

.obr-table tbody th {
	font-weight: 700;
	color: #fff;
}

.obr-table a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--obr-ink-12);
}

.obr-table a:hover {
	border-bottom-color: var(--obr-accent);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * 7. PROJECT RAIL
 * ---------------------------------------------------------------------- */

.obr-project-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(270px, 320px);
	gap: 20px;
	margin-top: 34px;
	padding-bottom: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--obr-ink-12) transparent;
}

.obr-project-rail > * {
	scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
 * 8. ADVISOR + LEGAL
 * ---------------------------------------------------------------------- */

.obr-cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
}

.obr-cta-copy {
	flex: 1 1 400px;
}

.obr-cta-copy p {
	margin: 16px 0 0;
	max-width: 54ch;
	line-height: 1.7;
	color: var(--obr-ink-70);
}

.obr-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.obr-collection .obr-legal {
	padding-block: 44px 60px;
}

.obr-collection .obr-legal p {
	color: var(--obr-ink-50);
}

/* -------------------------------------------------------------------------
 * 9. RESPONSIVE
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.obr-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

@media (max-width: 760px) {
	.obr-chero {
		min-height: 100svh;
	}

	.obr-featured {
		min-height: auto;
	}

	.obr-featured-inner {
		padding-block: 56px;
	}

	.obr-grid {
		grid-template-columns: 1fr;
	}

	.obr-filters {
		padding: 18px;
	}

	.obr-card-media {
		aspect-ratio: 16 / 10;
	}

	.obr-cta-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.obr-cta-actions .obr-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* Clears the site's fixed WhatsApp/call stack. */
	.obr-collection .obr-legal {
		padding-bottom: 100px;
	}
}

@media (max-width: 400px) {
	.obr-chero-title {
		font-size: 2rem;
	}

	.obr-chero-stat dd {
		font-size: 1.25rem;
	}

	.obr-card-body {
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.obr-chero-frame {
		transition: none;
	}

	.obr-card:hover,
	.obr-project:hover {
		transform: none;
	}

	.obr-card:hover .obr-card-bg,
	.obr-project:hover .obr-project-media img {
		transform: none;
	}
}