/* =========================================================================
   RCC Property Management — main stylesheet
   Palette: Navy #24344D (primary) / Gold #B8922D (accent, used sparingly
   and never as body-sized text on light backgrounds — see contrast note
   below) / Warm off-white #F7F6F2 (alternate section bg) / Charcoal
   #2B2B2B (text). Intentionally three colors — everything else here is
   a functional neutral (muted text, borders) or a derived shade of one
   of the three, not a new brand color.
   Type: Inter Semi Bold (headings) / Open Sans (body)
   ========================================================================= */

/* Self-hosted variable fonts (Latin subset only — this site has no
   non-Latin content). Replaces a Google Fonts CDN dependency: removes
   fonts.googleapis.com/fonts.gstatic.com from CSP entirely, avoids a
   third-party render-blocking request, and needed no preload/onload
   trick (which is exactly what broke under a strict script-src nonce
   policy — see functions.php's CSP comment). Each file is a variable
   font covering the full weight range this site uses in one request. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/open-sans-latin.woff2') format('woff2');
}

:root {
	--color-navy: #24344d;
	/* Comma-separated RGB triplet of --color-navy, for rgba() overlays
	   (e.g. the Portfolio carousel's arrow buttons sitting on top of
	   property photos) — same pattern as --color-gold-rgb below. */
	--color-navy-rgb: 36, 52, 77;
	/* Darkened navy, derived (not client-specified) — needed anywhere
	   navy text/background must clear 4.5:1 against --color-gold, which
	   base --color-navy does not (4.3:1). See the contrast note above
	   .btn--primary. Also used for footer bg and other "deeper than
	   navy" moments. */
	--color-navy-dark: #1b2739;
	--color-gold: #b8922d;
	/* Darkened gold, derived — hover/active state. Base --color-gold
	   fails 3:1 against white/off-white (2.7-2.9:1), so anything using
	   gold as a text or focus-indicator color must use this shade or
	   darker, never base gold. */
	--color-gold-dark: #8a6d21;
	/* Comma-separated RGB triplet of --color-gold, for rgba() overlays
	   where a CSS custom property can't be used directly inside a hex
	   value (e.g. rgba(var(--color-gold-rgb), 0.15)). */
	--color-gold-rgb: 184, 146, 45;
	--color-bg: #f7f6f2;
	--color-white: #ffffff;
	--color-text: #2b2b2b;
	--color-text-muted: #68707d;
	/* Muted text ON a navy background (hero lede, footer copy) — not
	   given by the client, derived to clear 4.5:1 against navy while
	   still reading as secondary/muted rather than full white. */
	--color-on-navy-muted: #c1c6cd;
	/* Decorative-only (card borders, dividers). Measures well under the
	   3:1 WCAG 1.4.11 non-text-contrast floor, so it must never be used
	   on a control that identifies an interactive element (see
	   --color-border-strong below for form fields). */
	--color-border: #e5e7eb;
	/* Meets 3:1 against both #ffffff and #f7f6f2 — required for form
	   field boundaries (WCAG 1.4.11). Not part of the client's palette
	   spec; kept as-is from the original build because it's an
	   accessibility floor, not a brand color — do not swap back to
	   --color-border on inputs/textareas/selects. */
	--color-border-strong: #6b6b6b;

	--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--wrap-width: 1120px;
	/* Narrow readable measure for lede/intro paragraphs — was the literal
	   value 640px duplicated in .hero__lede and .page-hero__lede. */
	--measure-lede: 640px;
	--radius: 6px;
}

/* Gold is intentionally never used as body-sized text color, nor as a
   focus-indicator or icon color, on light backgrounds below — base
   --color-gold measures ~2.7-2.9:1 against white/off-white, short of
   both the 4.5:1 WCAG AA text floor and the 3:1 non-text/UI-component
   floor (1.4.11). It's used for large/bold accents, dividers, and as a
   button background paired with dark navy text (--color-navy-dark,
   which does pass AA against gold at 5.15:1 — base --color-navy does
   not, at 4.3:1). */

/* ---- Reset / base ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	font-size: 17px;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-navy);
	line-height: 1.25;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a {
	color: var(--color-navy);
	text-decoration-color: var(--color-gold);
	text-underline-offset: 3px;
}

a:hover { color: var(--color-gold-dark); }

/* Navy, not gold — a focus ring needs 3:1 against its background
   (WCAG 1.4.11), and base --color-gold only measures ~2.7-2.9:1 against
   white/off-white. Navy clears it by a wide margin and reads clearly on
   every background this site uses. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--color-navy);
	outline-offset: 2px;
}

/* On navy-background regions, a navy outline would land on a navy page
   background and disappear. Gold-dark clears 3:1 against navy
   (~3.4:1) — the one functional (not purely decorative) use of gold on
   a dark section. */
.hero a:focus-visible,
.hero button:focus-visible,
.page-hero a:focus-visible,
.page-hero button:focus-visible,
.section--cta-final a:focus-visible,
.section--cta-final button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
	outline-color: var(--color-gold-dark);
}

img { max-width: 100%; display: block; }

.wrap {
	max-width: var(--wrap-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ---- Skip link ---- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-navy);
	color: var(--color-white);
	padding: 0.75em 1.25em;
	z-index: 1000;
	border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
	left: 0;
}

/* ---- Buttons ---- */
.btn {
	display: inline-block;
	padding: 0.85em 1.75em;
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	font-size: 1rem;
}

.btn--primary {
	background: var(--color-gold);
	color: var(--color-navy-dark);
}

.btn--primary:hover {
	background: var(--color-gold-dark);
	color: var(--color-white);
}

.btn--secondary {
	background: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.btn--secondary:hover {
	background: var(--color-white);
	color: var(--color-navy);
}

.cta-group {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.link-arrow {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 600;
}

/* ---- Header / nav ---- */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 0.25s ease;
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.site-header__logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--color-navy);
	text-decoration: none;
}

.site-header__logo-img {
	width: 34px;
	height: 44px;
	flex-shrink: 0;
}

.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-navy);
}

.nav-toggle__icon {
	width: 22px;
	height: 2px;
	background: var(--color-navy);
	position: relative;
	display: inline-block;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--color-navy);
}

.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after { top: 7px; }

.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	align-items: center;
}

.primary-nav a {
	text-decoration: none;
	font-weight: 500;
	color: var(--color-navy);
}

.primary-nav a:not(.nav-cta):hover,
.primary-nav a:not(.nav-cta):focus-visible {
	color: var(--color-gold-dark);
	text-decoration: underline;
	text-decoration-color: var(--color-gold);
	text-underline-offset: 3px;
}

.primary-nav a.nav-cta {
	background: var(--color-navy);
	color: var(--color-white);
	padding: 0.5em 1.1em;
	border-radius: var(--radius);
}

.primary-nav a.nav-cta:hover {
	background: var(--color-gold);
	color: var(--color-navy-dark);
}

/* ---- Services dropdown ---- */
.has-dropdown {
	position: relative;
}

.nav-caret {
	display: inline-flex;
	width: 13px;
	height: 13px;
	margin-left: 0.3em;
	vertical-align: -1px;
	transition: transform 0.15s ease;
}

.nav-caret svg { width: 100%; height: 100%; }

.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret {
	transform: rotate(180deg);
}

/* .primary-nav ul sets display:flex — it also matches this nested ul, so
   .nav-dropdown needs display:block at higher specificity to actually
   stack its rows instead of inheriting the horizontal top-level layout. */
.primary-nav .nav-dropdown {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Pure CSS — no JS needed. :hover clears the dropdown the instant the
   mouse leaves .has-dropdown, and :focus-within keeps it open for
   keyboard users tabbing through its links. */
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-dropdown a {
	display: block;
	padding: 0.6rem 1.1rem;
	font-size: 0.92rem;
	white-space: nowrap;
	color: var(--color-navy);
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
	background: var(--color-bg);
	color: var(--color-gold-dark);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.nav-dropdown, .nav-caret { transition: none; }
}

@media (max-width: 780px) {
	.nav-toggle { display: inline-flex; }

	.primary-nav {
		display: none;
		width: 100%;
		padding-bottom: 1rem;
	}

	.primary-nav.is-open { display: block; }

	.primary-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.site-header__inner { flex-wrap: wrap; }

	/* No hover on touch — the dropdown is always expanded inline as a
	   nested list instead of a hover/focus-triggered overlay. Selector
	   specificity has to match .primary-nav .nav-dropdown above, or this
	   loses the position/visibility overrides on mobile. */
	.primary-nav .nav-dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
		padding: 0.5rem 0 0 1rem;
		margin-top: 0.5rem;
	}

	.nav-caret { display: none; }
}

/* ---- Hero ---- */
.hero {
	background: var(--color-navy);
	color: var(--color-white);
	padding: 5rem 0;
}

.hero h1 { color: var(--color-white); }

/* ---- Hero: video (Home) ---- */
.hero--video {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 7rem 0 6rem;
}

/* Fills the hero behind the text. z-index 0 keeps it under .hero__inner
   without needing a stacking context hack on either side. */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__video,
.hero__media-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Static reduced-motion / no-JS fallback. main.js only starts the video
   (and only then sets preload) when prefers-reduced-motion is NOT set —
   see hero video init in main.js. This <img> plus this media query is
   the pure-CSS half of that: if JS never runs, or the user reduces
   motion, this poster is what's visible either way. */
.hero__media-fallback {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
	.hero__media-fallback { display: block; }
}

/* Starting point from the brief (rgba(10,20,35,0.55)), nudged slightly
   darker/more navy to hold text contrast against this specific video's
   bright glass/daylight footage while staying a translucent overlay,
   not a flat color card. */
.hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(9, 18, 32, 0.6);
}

.hero--video .hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.hero--video h1 {
	margin-bottom: 0.5rem;
}

/* Secondary to the h1 on purpose — smaller and lighter-weight so
   "Commercial Property Management" reads as the headline and this as
   a supporting line underneath it, not a second half of the same title. */
.hero--video .hero__subhead {
	margin: 0 0 1.75rem;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	text-align: center;
	color: var(--color-on-navy-muted);
}

.hero--video .cta-group {
	justify-content: center;
}

@media (max-width: 780px) {
	.hero--video {
		padding: 4.5rem 0 3.5rem;
	}

	.hero--video h1 {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}
}

.page-hero {
	background: var(--color-navy);
	color: var(--color-white);
	padding: 3.5rem 0;
}

.page-hero h1 { color: var(--color-white); margin-bottom: 0.25em; }
.page-hero__lede { color: var(--color-on-navy-muted); max-width: var(--measure-lede); margin: 0; }
.page-hero--utility { padding: 2.5rem 0; }

/* Small caps-style label above a .page-hero h1. Sized/weighted so it
   never needs to double as WCAG "large text" — see the no-bold-face note
   below — while still reading clearly next to the white headline it
   introduces. */
.page-hero__eyebrow {
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-gold);
}

/* Opt-in per page — other pages sharing .page-hero (About, Contact)
   stay left-aligned unless they also add this modifier. */
.page-hero--centered {
	text-align: center;
}

.page-hero--centered .page-hero__lede {
	margin-left: auto;
	margin-right: auto;
}

/* ---- KPI row ---- */
.kpi-section {
	background: var(--color-white);
}

.kpi-section__inner {
	display: flex;
	justify-content: center;
	padding: 5.5rem 1.5rem;
	text-align: center;
}

.kpi {
	flex: 1;
	max-width: 320px;
	padding: 0 3rem;
}

.kpi + .kpi {
	border-left: 1px solid var(--color-border);
}

.kpi__number {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(2.75rem, 4vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--color-navy);
}

.kpi__label {
	display: block;
	margin-top: 0.85rem;
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

@media (max-width: 700px) {
	.kpi-section__inner {
		flex-direction: column;
		align-items: center;
		gap: 2.75rem;
		padding: 3.5rem 1.5rem;
	}

	.kpi {
		max-width: none;
		padding: 0;
	}

	.kpi + .kpi {
		border-left: none;
	}
}

/* ---- Sections ---- */
.section { padding: 4rem 0; }
.section--alt { background: var(--color-white); }

.section--cta-inline {
	text-align: center;
	padding-top: 1rem;
}

.section--cta-final {
	background: var(--color-navy);
	color: var(--color-white);
	text-align: center;
	padding: 6.5rem 0;
}

.section--cta-final h2 { color: var(--color-white); }

.section--cta-final p {
	max-width: var(--measure-lede);
	margin: 0 auto 2rem;
	color: var(--color-white);
}

.cta-final__accent {
	display: block;
	width: 56px;
	height: 3px;
	margin: 0 auto 1.75rem;
	background: var(--color-gold);
}

/* Light variant — same layout/accent/button as the navy .section--cta-final,
   colors only. Used where a warm off-white CTA needs to sit directly under
   a navy section instead of repeating navy-on-navy. */
.section--cta-final--light {
	background: var(--color-bg);
	color: var(--color-text);
}

.section--cta-final--light h2 { color: var(--color-navy); }

.section--cta-final--light p { color: var(--color-text-muted); }

/* The base .section--cta-final focus-outline override (further up this
   file) swaps to gold-dark for navy backgrounds. This variant's background
   is light, so the standard navy outline used everywhere else on light
   backgrounds is correct here — reset it back. */
.section--cta-final--light a:focus-visible,
.section--cta-final--light button:focus-visible {
	outline-color: var(--color-navy);
}

/* Stacks on top of --light (keeps its navy/muted text + focus overrides),
   swaps the background to full white — same white as .section--alt, e.g.
   the About page's "Meet Rich" section. */
.section--cta-final--alt {
	background: var(--color-white);
}

/* Reusable: centered heading + intro paragraph above a row of items.
   First used on the homepage's "Our Services"; also used on the About
   page's "A Hands-On Approach". */
.section--centered-intro {
	text-align: center;
}

.section-intro {
	margin: 0.75rem auto 0;
	color: var(--color-text-muted);
}

/* ---- Our Services (Home) ---- */

.services-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 2rem;
	margin: 3rem 0 3.5rem;
}

.service-item__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	color: var(--color-gold-dark);
}

.service-item__icon svg { width: 100%; height: 100%; }

.service-item__name {
	margin: 1.25rem 0 0.5rem;
	min-height: 2.625rem;
	font-size: 1.05rem;
}

.service-item__name a {
	font-weight: 600;
	text-decoration: none;
}

.service-item__desc {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.services-cta { margin-top: 0.5rem; }

@media (max-width: 960px) {
	.services-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.services-row { grid-template-columns: 1fr; }
}

/* ---- Where We Specialize (Home) ---- */
.section--areas {
	text-align: center;
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.area-tile {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
}

.area-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.area-tile:hover img {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.area-tile img { transition: none; }
	.area-tile:hover img { transform: none; }
}

.area-tile__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.area-tile__name {
	position: absolute;
	left: 1rem;
	bottom: 0.85rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--color-white);
}

@media (max-width: 900px) {
	.areas-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ---- Services page (redesign) ----
   Editorial full-width sections, not a card grid — matches the homepage's
   premium/minimalist direction. Backgrounds alternate via the existing
   .section / .section--alt pair (same convention as the homepage's
   "Our Services" / "Where We Specialize" sections), so no new background
   utility was needed. */

.services-jumpnav {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}

.services-jumpnav__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2.25rem;
	padding: 1.25rem 1.5rem;
}

.services-jumpnav a {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text-muted);
	text-decoration: none;
}

.services-jumpnav a:hover,
.services-jumpnav a:focus-visible {
	color: var(--color-navy);
}

.service-block {
	padding: 5rem 0;
	/* Clears the sticky site-header (~77px) when a jump-nav or homepage
	   deep link scrolls straight to this section. */
	scroll-margin-top: 96px;
}

.service-block__inner {
	display: flex;
	gap: 3.5rem;
	align-items: flex-start;
}

/* Visual-only flip for the zig-zag rhythm — markup order stays identity-
   then-list either way, so reading/tab order never depends on which side
   a section visually lands on. */
.service-block--reverse .service-block__inner {
	flex-direction: row-reverse;
}

.service-block__identity { flex: 2 1 0%; }
.service-block__details { flex: 3 1 0%; }

.service-block__index {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	color: var(--color-gold-dark);
}

.service-block__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	margin-bottom: 1.25rem;
	color: var(--color-gold-dark);
}

.service-block__icon svg { width: 100%; height: 100%; }

.service-block__title { margin-bottom: 0.75rem; }

.service-block__desc {
	margin: 0;
	max-width: 40ch;
	color: var(--color-text-muted);
}

.service-block__list-heading {
	margin-bottom: 1.1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.service-block__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-block__list li {
	position: relative;
	padding: 0.9rem 0 0.9rem 1.35rem;
	border-top: 1px solid var(--color-border);
}

.service-block__list li:last-child {
	border-bottom: 1px solid var(--color-border);
}

.service-block__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.55rem;
	width: 9px;
	height: 2px;
	background: var(--color-gold);
}

@media (max-width: 860px) {
	.service-block { padding: 3.5rem 0; }

	.service-block__inner,
	.service-block--reverse .service-block__inner {
		flex-direction: column;
		gap: 2rem;
	}

	.service-block__desc { max-width: none; }
}

/* ---- Services page: Why RCC ----
   Off-white, not navy — sits between white/off-white service blocks and
   an off-white CTA, so the "clear break" comes from the centered,
   divided-list layout rather than a jarring dark-to-light color jump. */
.section--why {
	background: var(--color-bg);
	color: var(--color-text-muted);
	text-align: center;
	padding: 6rem 0;
}

.section--why h2 { color: var(--color-navy); }

.section--why p {
	max-width: var(--measure-lede);
	margin: 0 auto;
}

.why-points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem 2.5rem;
	margin: 2.75rem 0 0;
	padding: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-navy);
}

.why-points li + li {
	padding-left: 2.5rem;
	border-left: 1px solid var(--color-border);
}

@media (max-width: 700px) {
	.why-points {
		flex-direction: column;
		gap: 1rem;
	}

	.why-points li + li {
		padding-left: 0;
		border-left: none;
	}
}

/* ---- Property types page ---- */
.property-types-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2rem;
}

.property-type-card {
	grid-column: span 2;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.property-type-card h2 { font-size: 1.25rem; margin: 1rem 1.25rem 0.4em; }
.property-type-card p { margin: 0 1.25rem 1.25rem; color: var(--color-text-muted); font-size: 0.95rem; }

.property-type-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

.property-type-card:hover .property-type-card__img {
	transform: scale(1.08);
}

.property-type-card:nth-child(4) { grid-column: 2 / span 2; }
.property-type-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 960px) {
	.property-types-grid { grid-template-columns: repeat(2, 1fr); }
	.property-type-card,
	.property-type-card:nth-child(4),
	.property-type-card:nth-child(5) { grid-column: auto; }
}

@media (max-width: 560px) {
	.property-types-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.property-type-card__img { transition: none; }
	.property-type-card:hover .property-type-card__img { transform: none; }
}

/* ---- Portfolio page ---- */

/* Segmented control, "Current Portfolio" / "Legacy Portfolio". Built on
   two real (visually hidden, keyboard-focusable) radio inputs rather
   than JS-managed ARIA tabs — native radio semantics already give
   correct keyboard/screen-reader behavior for free, and the sliding
   thumb + label color are pure CSS sibling-selector state, no JS
   needed to draw it. main.js only listens for the `change` event to
   show/hide the matching .portfolio-carousel below. */
.portfolio-toggle-bar {
	text-align: center;
	padding: 2.5rem 0;
}

.portfolio-toggle {
	position: relative;
	display: inline-flex;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 4px;
}

.portfolio-toggle__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.portfolio-toggle__option {
	position: relative;
	z-index: 1;
	padding: 0.7rem 1.6rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	transition: color 0.3s ease;
}

.portfolio-toggle__radio:checked + .portfolio-toggle__option {
	color: var(--color-white);
}

/* Focus ring on the (hidden) radio itself would be invisible, so it's
   drawn on the label that represents whichever radio has keyboard
   focus. */
.portfolio-toggle__radio:focus-visible + .portfolio-toggle__option {
	outline: 3px solid var(--color-navy);
	outline-offset: 2px;
}

.portfolio-toggle__thumb {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 0;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	background: var(--color-navy);
	border-radius: 999px;
	transition: transform 0.3s ease;
}

#portfolio-view-legacy:checked ~ .portfolio-toggle__thumb {
	transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-toggle__thumb { transition: none; }
}

/* Both carousels render in the markup (so legacy content still exists
   for no-JS visitors) — main.js hides the non-selected one via the
   `hidden` attribute, matched here only to be explicit next to the
   toggle rules above; the attribute alone already suppresses display. */
.portfolio-carousel[hidden] { display: none; }

/* Card width lives as one custom property, scoped to the carousel, so
   both the cards themselves (descendants of .portfolio-carousel__track)
   and the overlay arrow buttons (siblings of the track, positioned off
   the card's image height — see .portfolio-carousel__btn below) derive
   from the same value instead of two hardcoded copies drifting apart. */
.portfolio-carousel {
	position: relative;
	--portfolio-card-width: min(340px, 85vw);
}

/* Clips the endless-loop clones main.js adds on either side of the real
   cards — see main.js's portfolio-carousel init. No native scrolling
   here on purpose (arrows are the only way to move the track); this
   wrapper exists solely to hide what the JS-driven transform slides
   off to the side. */
.portfolio-carousel__viewport {
	overflow: hidden;
}

.portfolio-carousel__track {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	/* main.js drives position via transform: translateX(); this is the
	   resting state before JS runs (progressive enhancement — with no
	   JS, the track just isn't draggable, but the first properties are
	   still visible and readable). */
	transform: translateX(0);
	transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-carousel__track { transition: none; }
}

/* Overlaid on the cards rather than in their own row above the track —
   positioned at the vertical center of a card's photo specifically
   (not the whole card, which runs taller once title/description are
   included), using the same --portfolio-card-width the cards use so
   the math tracks the responsive card size automatically. 16/10 is the
   card photo's aspect-ratio (see .portfolio-card__img/__placeholder
   below); half its height is width * (10/16) / 2 = width * 0.3125. */
.portfolio-carousel__btn {
	position: absolute;
	top: calc(var(--portfolio-card-width) * 0.3125);
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(var(--color-navy-rgb), 0.85);
	border: none;
	border-radius: 50%;
	color: var(--color-white);
	cursor: pointer;
	transition: background 0.2s ease;
}

.portfolio-carousel__btn--prev { left: 16px; }
.portfolio-carousel__btn--next { right: 16px; }

.portfolio-carousel__btn svg { width: 20px; height: 20px; }

.portfolio-carousel__btn:hover,
.portfolio-carousel__btn:focus-visible {
	background: var(--color-navy-dark);
}

/* Only main.js's count<=1 guard adds this (a single property has
   nothing to loop through) — otherwise the arrows stay put; the
   carousel loops endlessly, so there's no "reached the end" state to
   disable them for. */
.portfolio-carousel.is-static .portfolio-carousel__btn { display: none; }
.portfolio-carousel.is-static .portfolio-carousel__track { justify-content: center; }

.portfolio-card {
	flex: 0 0 var(--portfolio-card-width);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.portfolio-card h3 {
	min-height: 2.875rem;
	font-size: 1.15rem;
	margin: 1.1rem 1.25rem 0.4em;
}

.portfolio-card__type {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 9rem;
	min-height: 2.25rem;
	margin: 1.1rem 1.25rem 0;
	padding: 0.4rem 0.75rem;
	background: var(--color-gold);
	border-radius: 4px;
	color: var(--color-navy-dark);
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.portfolio-card__type + .portfolio-card__title { margin-top: 0.65rem; }

.portfolio-card__details {
	margin: 0 1.25rem 1.25rem;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.portfolio-card__details div {
	display: block;
}

.portfolio-card__details dt,
.portfolio-card__details dd {
	display: inline;
	margin: 0;
}

.portfolio-card__details dt {
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
}

.portfolio-card__details-placeholder { font-style: italic; }

.portfolio-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
}

/* Decorative only — never a fabricated stock photo. Shown until a real
   photo's filename is added to the property's 'image' field (see the
   instructions at the top of page-portfolio.php). */
.portfolio-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--color-bg);
	color: var(--color-border-strong);
}

.portfolio-card__placeholder svg { width: 40px; height: 40px; }

.portfolio-empty {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--color-text-muted);
	background: var(--color-bg);
	border-radius: var(--radius);
}

@media (max-width: 700px) {
	.portfolio-toggle__option { padding: 0.65rem 1.15rem; font-size: 0.85rem; }
	.portfolio-carousel__btn--prev { left: 8px; }
	.portfolio-carousel__btn--next { right: 8px; }
}

/* ---- About page: Meet Rich ---- */
.meet-rich__inner {
	display: flex;
	align-items: center;
	gap: 3.5rem;
}

.meet-rich__photo-col { flex: 2 1 0%; }
.meet-rich__content { flex: 3 1 0%; }

/* Deliberately not object-fit:cover in a fixed box — the brief calls for
   scaling the photo down intact, not cropping it into a shape. */
.meet-rich__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.meet-rich__caption {
	margin: 1rem 0 0;
	text-align: center;
}

.meet-rich__name {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-navy);
}

.meet-rich__title {
	display: block;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.meet-rich__content h2 { margin-bottom: 1rem; }
.meet-rich__content p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.meet-rich__inner { flex-direction: column; gap: 2rem; }
	.meet-rich__photo-col { max-width: 360px; width: 100%; margin: 0 auto; }
}

/* ---- About page: A Hands-On Approach ---- */
.approach-row {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
	text-align: left;
}

.approach-item {
	flex: 1;
	max-width: 320px;
	padding: 0 2.5rem;
}

.approach-item + .approach-item {
	border-left: 1px solid var(--color-border);
}

.approach-item__label {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}

.approach-item__desc {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

@media (max-width: 700px) {
	.approach-row { flex-direction: column; gap: 2rem; }

	.approach-item {
		max-width: none;
		padding: 0;
	}

	.approach-item + .approach-item {
		border-left: none;
		border-top: 1px solid var(--color-border);
		padding-top: 2rem;
	}
}

/* ---- Contact page ----
   Signature move: underline-style fields instead of boxed ones — the
   same "hairline rule, not a box" language already used for the KPI
   row, Approach row, and service lists, extended into the form. */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 4rem;
}

.contact-form-wrap {
	padding-left: 4rem;
	border-left: 1px solid var(--color-border);
}

@media (max-width: 860px) {
	.contact-layout { grid-template-columns: 1fr; gap: 3rem; }

	.contact-form-wrap {
		padding-left: 0;
		padding-top: 3rem;
		border-left: none;
		border-top: 1px solid var(--color-border);
	}
}

.contact-detail {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-bottom: 1.15rem;
}

.contact-detail__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: var(--color-gold-dark);
}

.contact-detail__icon svg { width: 100%; height: 100%; }

.contact-detail address,
.contact-detail a {
	font-style: normal;
	font-size: 1.05rem;
}

.contact-map {
	margin-top: 2rem;
}

.contact-map iframe {
	width: 100%;
	height: 320px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.contact-form .form-row {
	margin-bottom: 1.75rem;
}

.contact-form label,
.contact-form legend {
	display: block;
	margin-bottom: 0.55rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	display: block;
	width: 100%;
	padding: 0.6em 0.1em;
	border: none;
	border-bottom: 1px solid var(--color-border-strong);
	border-radius: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 1.05rem;
	color: var(--color-text);
	transition: border-color 0.2s ease;
}

.contact-form textarea { resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus {
	border-bottom-color: var(--color-gold-dark);
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
	border-bottom-color: #b3261e;
	border-bottom-width: 2px;
}

.contact-form fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-row--radio legend { margin-bottom: 0.75rem; }

/* .contact-form label (further up) targets every <label> in the form,
   including these — .radio-label alone is lower specificity (one class
   vs. one class + one element) and would silently lose the override.
   Scoping to .contact-form here keeps this win explicit. */
.contact-form .radio-label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text);
}

.radio-label input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-navy);
}

/* Honeypot: visually and interactively hidden, but not display:none/
   visibility:hidden — some spam bots specifically skip those, and
   assistive tech is already excluded via aria-hidden on the wrapper. */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: 0.85em 1.1em;
	border-radius: var(--radius);
	margin-bottom: 1.25rem;
	font-weight: 500;
}

.form-notice--success {
	background: #e6f4ea;
	color: #1e4620;
	border: 1px solid #b7dfc0;
}

.form-notice--error {
	background: #fdecea;
	color: #7a1f1f;
	border: 1px solid #f2b8b5;
}

/* ---- Privacy / legal ---- */
.legal-content { max-width: 720px; }
.legal-content h2 { margin-top: 1.5em; }

/* ---- Footer ---- */
.site-footer {
	background: var(--color-navy-dark);
	color: var(--color-on-navy-muted);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer a {
	color: var(--color-white);
	text-decoration-color: var(--color-gold);
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 2rem;
	padding: 3rem 1.5rem;
}

.site-footer__brand {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

/* Logo mark is dark-navy ink on a light background — needs a white
   backing chip so it doesn't collide with this footer's navy-dark fill. */
.site-footer__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--radius);
	background: var(--color-white);
}

.site-footer__logo img { display: block; }

.site-footer__nap { font-style: normal; line-height: 1.7; }

.site-footer__brand-name {
	margin: 0 0 0.3em;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-white);
}

.site-footer__legal {
	text-align: right;
}

.site-footer__legal-links {
	display: flex;
	gap: 1.25rem;
	justify-content: flex-end;
}

.site-footer__legal-links ul {
	display: flex;
	gap: 1.25rem;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__copyright {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
}

@media (max-width: 780px) {
	.site-footer__inner { flex-direction: column; }
	.site-footer__legal { text-align: left; }
	.site-footer__legal-links { justify-content: flex-start; }
}