/*
 * Amarante — components layer.
 *
 * Site chrome (header, nav, footer), buttons, forms, breadcrumbs,
 * pagination, empty states. Loaded on every page.
 */

/* ---------- Top bar ---------- */

.topbar {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--border);
	font-size: var(--text--1);
}

.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
	justify-content: space-between;
	min-height: 40px;
}

.topbar p {
	margin: 0;
}

/* ---------- Header (Phase F rebuild) ---------- */

/*
 * Production's header is one compact row: logo left, menu centred, phone
 * right. The Phase E header ran ~110px tall because each parent <li> let its
 * label and caret button fall onto separate lines. Making the item a flex row
 * fixes the height, kills the two-row artefact, and lets the active state be
 * a text+underline treatment instead of a filled pill that could read as a
 * blank rectangle if a label were ever missing.
 */

.site-header {
	position: relative;
	z-index: 20;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.site-header__inner {
	display: flex;
	gap: var(--space-m);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: calc(var(--container-wide) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
	min-height: var(--header-height);
	flex-wrap: nowrap;
}

.site-header__brand {
	flex: 0 0 auto;
}

.site-header__brand img,
.custom-logo {
	display: block;
	width: auto;
	max-height: 52px;
	min-height: 34px;
}

.site-header .nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.site-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.site-title {
	margin: 0;
	font-size: var(--text-2);
	font-weight: 700;
}

.site-title a {
	color: var(--ink);
	text-decoration: none;
}

/* ---------- Header phone CTA ---------- */

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	padding: var(--space-3xs) var(--space-2xs);
	color: var(--ink);
	font-weight: 600;
	font-size: clamp(0.82rem, 0.7rem + 0.3vw, 0.95rem);
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: color var(--transition);
}

.header-phone:hover,
.header-phone:focus-visible {
	color: var(--brand);
}

.header-phone__icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* Below this width the number itself is dropped, not the affordance: the
   icon stays tappable so the CTA never disappears entirely. */
@media (max-width: 1180px) {
	.header-phone__number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.header-phone {
		padding: var(--space-2xs);
	}

	.header-phone__icon {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* The in-menu copy is for the mobile panel only. */
.nav__phone {
	display: none;
}

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

.nav__list,
.nav__submenu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list {
	gap: clamp(0.1rem, 0.5vw, 0.6rem);
	align-items: center;
	flex-wrap: nowrap;
}

/* One row per item: label and caret side by side. */
.nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2xs) clamp(0.35rem, 0.7vw, 0.75rem);
	color: var(--ink);
	font-weight: 500;
	font-size: clamp(0.85rem, 0.76rem + 0.22vw, 0.98rem);
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: color var(--transition);
}

.nav__submenu .nav__link {
	display: block;
	padding: var(--space-2xs) var(--space-xs);
	font-size: var(--text--1);
	white-space: normal;
}

.nav__link:hover,
.nav__link:focus-visible {
	color: var(--brand);
}

/*
 * Active state: brand-coloured text plus a 2px underline drawn on the item,
 * not a filled block. Text is never inverted, so the label always reads.
 */
.nav__item.current-menu-item > .nav__link,
.nav__item.current-menu-ancestor > .nav__link,
.nav__item.current-menu-parent > .nav__link {
	color: var(--brand);
	font-weight: 600;
}

@media (min-width: 1025px) {
	.nav__list > .nav__item.current-menu-item::after,
	.nav__list > .nav__item.current-menu-ancestor::after,
	.nav__list > .nav__item.current-menu-parent::after {
		content: "";
		position: absolute;
		right: clamp(0.35rem, 0.7vw, 0.75rem);
		bottom: -2px;
		left: clamp(0.35rem, 0.7vw, 0.75rem);
		height: 2px;
		background: var(--brand);
		border-radius: 2px;
	}
}

.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: -0.15rem;
	padding: 0;
	background: none;
	border: 0;
	color: currentColor;
	cursor: pointer;
}

.nav__toggle svg {
	width: 10px;
	height: 7px;
	transition: transform var(--transition);
}

.nav__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Desktop submenus */
@media (min-width: 1025px) {
	.nav__submenu {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 30;
		flex-direction: column;
		min-width: 13rem;
		max-width: 18rem;
		padding: var(--space-2xs);
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-card-hover);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
	}

	.nav__item--parent:hover > .nav__submenu,
	.nav__item--parent:focus-within > .nav__submenu,
	.nav__item--parent.is-open > .nav__submenu {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.nav__submenu .nav__link:hover,
	.nav__submenu .nav__link:focus-visible {
		background: var(--brand-soft);
		color: var(--brand);
	}

	/* Keep the last dropdowns inside the viewport. */
	.nav__list > .nav__item:nth-last-child(-n+3) > .nav__submenu {
		left: auto;
		right: 0;
	}

	.nav__submenu .nav__submenu {
		top: 0;
		left: 100%;
	}
}

/* ---------- Mobile navigation ---------- */

.nav-toggle {
	display: none;
	gap: var(--space-2xs);
	align-items: center;
	padding: var(--space-2xs) var(--space-xs);
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--ink);
	font-weight: 500;
	cursor: pointer;
}

.nav-toggle__bars {
	display: grid;
	gap: 3px;
	width: 18px;
}

.nav-toggle__bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

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

	.nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: 0;
		overflow: hidden;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-card-hover);
		transition: max-height var(--transition);
	}

	.nav.is-open {
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.nav__list,
	.nav__submenu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2xs) var(--gutter);
	}

	.nav__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--border);
	}

	.nav__link {
		flex: 1;
		padding: var(--space-xs) 0;
		color: var(--ink);
		font-size: var(--text-0);
	}

	.nav__item.current-menu-item > .nav__link,
	.nav__item.current-menu-ancestor > .nav__link {
		color: var(--brand);
	}

	.nav__toggle {
		width: 2.75rem;
		height: 2.75rem;
		color: var(--muted);
	}

	.nav__submenu {
		flex-basis: 100%;
		padding-left: var(--space-s);
		border: 0;
	}

	.nav__item--parent > .nav__submenu {
		display: none;
	}

	.nav__item--parent.is-open > .nav__submenu {
		display: flex;
	}

	/* Phone CTA repeated at the end of the panel, full width and obvious. */
	.nav__phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		margin: var(--space-s) var(--gutter) var(--space-m);
		padding: var(--space-xs) var(--space-s);
		background: var(--brand);
		color: var(--ink-inverse);
		font-weight: 600;
		text-decoration: none;
		border-radius: var(--radius-md);
	}

	.nav__phone-icon {
		width: 1.1em;
		height: 1.1em;
	}
}

/* No-JS fallback: if the enhancement never runs, show every submenu rather
   than hiding links behind a button that does nothing. */
.no-js .nav__item--parent > .nav__submenu {
	display: flex;
	visibility: visible;
	opacity: 1;
	transform: none;
}

.no-js .nav__toggle,
.no-js .nav-toggle {
	display: none;
}

@media (max-width: 1024px) {
	.no-js .nav {
		position: static;
		max-height: none;
		overflow: visible;
		box-shadow: none;
	}
}

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

.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.75rem 1.5rem;
	background: var(--brand);
	color: var(--ink-inverse);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid var(--brand);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}

.button:hover,
.button:focus-visible,
.wp-block-button__link:hover {
	background: var(--brand-hover);
	border-color: var(--brand-hover);
	color: var(--ink-inverse);
}

.button--ghost {
	background: transparent;
	color: var(--brand);
}

.button--ghost:hover,
.button--ghost:focus-visible {
	background: var(--brand-soft);
	color: var(--brand-hover);
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.7rem 0.9rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--ink);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--brand);
	box-shadow: var(--shadow-focus);
	outline: none;
}

label {
	display: inline-block;
	margin-bottom: var(--space-3xs);
	color: var(--ink);
	font-weight: 500;
}

.search-form {
	display: flex;
	gap: var(--space-2xs);
	max-width: 32rem;
}

.search-form__submit {
	flex-shrink: 0;
}

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

.breadcrumbs {
	margin-bottom: var(--space-m);
	color: var(--body);
	font-size: var(--text--1);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-right: var(--space-2xs);
	color: var(--border);
}

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

.pagination {
	margin-block: var(--space-xl);
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: var(--space-2xs);
	justify-content: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--ink);
	text-decoration: none;
}

.pagination__item .page-numbers:hover,
.pagination__item .page-numbers:focus-visible {
	border-color: var(--brand);
	color: var(--brand);
}

.pagination__item .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--ink-inverse);
}

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

/* ---------- Post navigation ---------- */

.post-nav {
	display: grid;
	gap: var(--space-s);
	margin-block: var(--space-xl);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.post-nav__link {
	display: block;
	padding: var(--space-s);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	text-decoration: none;
}

.post-nav__link:hover,
.post-nav__link:focus-visible {
	border-color: var(--brand);
	box-shadow: var(--shadow-card);
}

.post-nav__label {
	display: block;
	color: var(--muted);
	font-size: var(--text--1);
}

.post-nav__title {
	display: block;
	color: var(--ink);
	font-weight: 500;
}

.post-nav__link--next {
	text-align: right;
}

/* ---------- Archive header ---------- */

.archive-header {
	margin-bottom: var(--space-xl);
}

.archive-header__intro {
	max-width: var(--measure);
}

.archive-header__count {
	color: var(--muted);
}

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

.empty-state {
	max-width: var(--prose-width);
	margin-inline: auto;
	padding-block: var(--space-2xl);
	text-align: center;
}

.empty-state__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	justify-content: center;
	margin-top: var(--space-m);
	padding: 0;
	list-style: none;
}

.empty-state__search {
	display: flex;
	justify-content: center;
	margin-block: var(--space-m);
}

/* ---------- Widgets ---------- */

.widget {
	margin-bottom: var(--space-l);
}

.widget__title {
	margin-bottom: var(--space-2xs);
	font-size: var(--text-1);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li + li {
	margin-top: var(--space-3xs);
}

/* ---------- Footer ---------- */

.site-footer {
	flex-shrink: 0;
	background: var(--surface);
	border-top: 1px solid var(--border);
	color: var(--body);
}

.site-footer__widgets {
	display: grid;
	gap: var(--space-l);
	padding-block: var(--space-2xl);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.site-footer h2,
.site-footer h3 {
	color: var(--ink);
	font-size: var(--text-1);
}

.site-footer__menu,
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__nav {
	padding-bottom: var(--space-m);
}

.site-footer__bar {
	border-top: 1px solid var(--border);
}

.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-s);
	font-size: var(--text--1);
}

.site-footer__copy {
	margin: 0;
}

/* ---------- Canvas template ---------- */

body.is-canvas .site-main,
body.is-canvas main {
	padding: 0;
}


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

.site-header__brand .custom-logo,
.site-header__brand img {
	max-height: 64px;
	min-height: 40px;
	width: auto;
}

/* The right-most dropdowns would otherwise overflow the viewport. */
@media (min-width: 1025px) {
	.nav__list > .nav__item:nth-last-child(-n+3) > .nav__submenu {
		left: auto;
		right: 0;
	}
}

/* A quiet sticky header keeps navigation reachable on very long guide pages. */
@media (min-width: 1025px) {
	.site-header {
		position: sticky;
		top: 0;
	}
}

/* ---------- Section rhythm ---------- */

/*
 * Converted pages are long runs of h2/h3 + paragraph. Without deliberate
 * vertical rhythm they read as an undifferentiated wall. These rules give
 * headings room to act as section breaks.
 */
.entry__content > h2,
.prose > h2 {
	margin-top: var(--space-2xl);
	padding-top: var(--space-s);
	border-top: 1px solid var(--border);
}

.entry__content > h2:first-child,
.prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.entry__content > h3,
.prose > h3 {
	margin-top: var(--space-xl);
}

/* Eyebrow headings (h6) used as kickers above a section title. */
.entry__content > h6,
.prose > h6 {
	margin-bottom: var(--space-3xs);
	color: var(--brand);
	font-size: var(--text--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry__content > h6 + h2,
.prose > h6 + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ---------- Buttons in converted content ---------- */

.entry__content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-block: var(--space-m);
}

/*
 * Converted pages emit each button as its own wp-block-buttons wrapper, so
 * consecutive wrappers stacked with full margins and looked disconnected.
 * Pulling adjacent groups together makes them read as one button row.
 */
.entry__content .wp-block-buttons + .wp-block-buttons {
	margin-top: calc(var(--space-m) * -1 + var(--space-2xs));
}

/* ---------- Forms ---------- */

.wpforms-container {
	max-width: var(--prose-width);
	margin-block: var(--space-l);
	padding: var(--space-m);
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.wpforms-field { margin-bottom: var(--space-s); }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
	width: 100%;
}

.wpforms-submit {
	padding: 0.75rem 1.5rem;
	background: var(--brand);
	color: var(--ink-inverse);
	font-weight: 500;
	border: 1px solid var(--brand);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.wpforms-submit:hover { background: var(--brand-hover); }

/* ---------- Alerts / notices in content ---------- */

.entry__content blockquote {
	background: var(--brand-soft);
	border-left: 3px solid var(--brand);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--space-s) var(--space-m);
	margin-block: var(--space-l);
}

/* ---------- Front-page sections (Phase F) ---------- */

/*
 * Each home-section is a full-bleed band; its children sit on one shared
 * container edge. Phase E let the section wrapper and the grid resolve their
 * own widths, which is why headings sat at one x-position and cards began
 * 15-25% further in. One container, one edge, no offsets.
 */
body.home .site-main {
	padding-block: 0;
}

.entry--front .entry__content > * {
	width: 100%;
	max-width: calc(var(--container-standard) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.entry--front .entry__content > .home-section {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.home-section {
	padding-block: var(--space-3xl);
	padding-inline: var(--gutter);
}

.home-section > * {
	width: 100%;
	max-width: var(--container-standard);
	margin-inline: auto;
}

.home-section--alt {
	background: var(--surface-alt);
}

/* Section heading rhythm: eyebrow, title, lede, then content. */
.home-section > h6 {
	margin: 0 0 var(--space-3xs);
	color: var(--brand);
	font-size: var(--text--1);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.home-section > h2 {
	margin: 0 0 var(--space-xs);
	padding-top: 0;
	font-size: var(--text-4);
	line-height: var(--lh-heading);
	border-top: 0;
}

/* Intro copy is capped at a readable measure instead of running the full
   container width. */
.home-section > p {
	max-width: 68ch;
	color: var(--body);
}

.home-section > .wp-block-buttons,
.entry__content .home-section > .wp-block-buttons {
	margin-top: var(--space-m);
}

/* ---------- Centred sections ---------- */

/*
 * Sections without a grid (relocation, listings, pre-construction, final CTA)
 * are centred like production rather than left-anchored with a large empty
 * right side.
 */
.home-section--compact,
.home-section--cta,
.home-section--feature {
	text-align: center;
}

.home-section--compact > p,
.home-section--cta > p,
.home-section--feature > p {
	margin-inline: auto;
}

.home-section--compact .wp-block-buttons,
.home-section--cta .wp-block-buttons,
.home-section--feature .wp-block-buttons,
.entry__content .home-section--compact .wp-block-buttons,
.entry__content .home-section--cta .wp-block-buttons,
.entry__content .home-section--feature .wp-block-buttons {
	justify-content: center;
}

/* A CTA-only band does not need a full 6rem of air top and bottom. */
.home-section--compact {
	padding-block: var(--space-2xl);
}

/* ---------- Hero ---------- */

.home-section--hero {
	position: relative;
	padding-block: clamp(var(--space-2xl), 9vw, 6.5rem);
	background:
		linear-gradient(rgba(20, 24, 33, 0.58), rgba(20, 24, 33, 0.72)),
		url(/wp-content/uploads/2026/06/ares_homepage_hero-1920.webp) center / cover no-repeat;
	color: var(--ink-inverse);
	text-align: center;
}

.home-section--hero > h6 {
	color: var(--secondary);
}

.home-section--hero > h1 {
	max-width: 20ch;
	margin: 0 auto var(--space-s);
	color: var(--ink-inverse);
	font-size: var(--text-5);
	line-height: var(--lh-tight);
}

.home-section--hero > p {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--ink-inverse);
	font-size: var(--text-1);
}

/* Two CTAs on one row, centred. */
.home-section--hero .wp-block-buttons,
.entry__content .home-section--hero .wp-block-buttons {
	display: inline-flex;
	margin: var(--space-m) var(--space-3xs) 0;
	vertical-align: top;
}

/* The trust line is the last paragraph: smaller, quieter, below the buttons. */
.home-section--hero > p:last-child {
	margin-top: var(--space-l);
	color: var(--on-dark);
	font-size: var(--text--1);
}

/* ---------- Dark feature band (Edgewater) ---------- */

.home-section--dark,
.home-section--feature {
	background: var(--surface-dark);
	color: var(--ink-inverse);
}

.home-section--dark > h2,
.home-section--feature > h2 {
	color: var(--ink-inverse);
}

.home-section--dark > h6,
.home-section--feature > h6 {
	color: var(--secondary);
}

.home-section--dark > p,
.home-section--feature > p {
	color: var(--on-dark);
}

.home-section--dark .wpforms-container {
	max-width: 34rem;
	margin-inline: auto;
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.18);
	text-align: left;
}

.home-section--dark .wpforms-form label,
.home-section--feature .wpforms-form label {
	color: var(--ink-inverse);
}

/*
 * The stored homepage carries a legacy inline style targeting
 * #edgewater-signup (max-width 560px) written for the form wrapper. The id
 * now sits on the section, so the cap must not apply to the section itself.
 */
#edgewater-signup.home-section {
	max-width: none;
	margin-inline: 0;
}

/* ---------- Final contact CTA section ---------- */

.home-section--cta {
	background: var(--surface-dark);
	color: var(--ink-inverse);
}

.home-section--cta > h2 {
	color: var(--ink-inverse);
}

.home-section--cta > p {
	color: var(--on-dark);
}

.home-section--cta > p strong {
	color: var(--ink-inverse);
}

/* ---------- About ---------- */

.home-about {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	align-items: start;
	margin-block: var(--space-l);
	text-align: left;
}

@media (max-width: 900px) {
	.home-about {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-m);
	}
}

.home-about__media {
	margin: 0;
}

.home-about__media figure,
.home-about__media .wp-block-image {
	margin: 0;
	display: block;
}

.home-about__media img {
	width: 100%;
	max-width: 22rem;
	max-height: none;
	height: auto;
	border-radius: var(--radius-lg);
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.home-about__body > *:first-child {
	margin-top: 0;
}

.home-about__body p {
	max-width: 62ch;
	color: var(--body);
}

.home-about__body .wp-block-buttons,
.entry__content .home-about__body .wp-block-buttons {
	margin-top: var(--space-m);
	justify-content: flex-start;
}

/* ---------- Testimonials ---------- */

.home-quotes {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--space-l);
	text-align: left;
}

@media (max-width: 1024px) {
	.home-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.home-quotes { grid-template-columns: minmax(0, 1fr); }
}

.home-quote-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0;
	padding: var(--space-m);
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: 3px solid var(--brand);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.home-quote-card p {
	margin: 0;
	max-width: none;
	color: var(--body);
	font-size: var(--text--1);
	line-height: 1.65;
}

/* The attribution line is the last paragraph in each card. */
.home-quote-card p:last-child {
	margin-top: auto;
	padding-top: var(--space-2xs);
	border-top: 1px solid var(--border);
	color: var(--muted);
}

/* ---------- Contact CTA band (Phase F) ---------- */

.cta-band {
	padding-block: var(--space-2xl);
	background: var(--surface-dark);
	color: var(--ink-inverse);
	text-align: center;
}

.cta-band__title {
	margin: 0 0 var(--space-2xs);
	color: var(--ink-inverse);
	font-size: var(--text-4);
	line-height: var(--lh-heading);
}

.cta-band__lede {
	max-width: 60ch;
	margin: 0 auto var(--space-m);
	color: var(--on-dark);
}

.cta-band__contacts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2xs) var(--space-m);
	margin: 0 0 var(--space-m);
}

.cta-band__contact {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	color: var(--ink-inverse);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.cta-band__contact:hover,
.cta-band__contact:focus-visible {
	border-bottom-color: currentColor;
}

.cta-band__contact .icon {
	width: 1.05em;
	height: 1.05em;
	color: var(--secondary);
}

.cta-band__actions {
	margin: 0;
}

/* ---------- Footer (Phase F rebuild) ---------- */

.site-footer {
	background: var(--surface);
	border-top: 1px solid var(--border);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-l) var(--space-xl);
	padding-block: var(--space-2xl) var(--space-l);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
}

@media (max-width: 1024px) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.site-footer__heading {
	margin: 0 0 var(--space-2xs);
	color: var(--ink);
	font-size: var(--text-0);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.site-footer__text {
	margin: 0 0 var(--space-2xs);
	color: var(--body);
	font-size: var(--text--1);
	line-height: 1.6;
}

.site-footer__text a {
	color: var(--body);
}

.site-footer__brokerage-logo {
	display: block;
	width: auto;
	max-width: 170px;
	height: auto;
	margin-top: var(--space-s);
}

.site-footer__contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2xs);
}

.site-footer__contact-list li {
	display: grid;
	grid-template-columns: 1.15rem 1fr;
	gap: var(--space-2xs);
	align-items: start;
	color: var(--body);
	font-size: var(--text--1);
	line-height: 1.5;
}

.site-footer__contact-list .icon {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.1em;
	color: var(--brand);
}

.site-footer__contact-list a {
	color: var(--body);
	text-decoration: none;
	border-bottom: 1px solid var(--border-strong);
}

.site-footer__contact-list a:hover,
.site-footer__contact-list a:focus-visible {
	color: var(--brand);
	border-bottom-color: currentColor;
}

.site-footer__menu {
	display: grid;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu a {
	color: var(--body);
	font-size: var(--text--1);
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	color: var(--brand);
	text-decoration: underline;
}

.site-footer__widgets {
	display: grid;
	gap: var(--space-l);
	padding-bottom: var(--space-l);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.site-footer__bar {
	border-top: 1px solid var(--border);
	background: var(--surface-alt);
}

.site-footer__bar-inner {
	padding-block: var(--space-m);
}

.site-footer__legal-copy {
	margin: 0 0 var(--space-2xs);
	color: var(--muted);
	font-size: 0.78rem;
	line-height: 1.6;
}

.site-footer__bar-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-m);
	align-items: center;
	justify-content: space-between;
}

.site-footer__copy {
	margin: 0;
	color: var(--muted);
	font-size: var(--text--1);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text--1);
}

.site-footer__legal a {
	color: var(--muted);
}

/* ---------- Breadcrumbs (Phase F: quieter) ---------- */

.breadcrumbs {
	padding-block: var(--space-s) 0;
	color: var(--muted);
	font-size: var(--text--1);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: var(--space-2xs);
	color: var(--border-strong);
}

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

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
	color: var(--brand);
	text-decoration: underline;
}

/* ---------- Phase F: homepage section header alignment ---------- */

/*
 * Production centres every homepage section header (eyebrow, title, lede) and
 * left-aligns only the card content beneath it. Phase E left headers ranged
 * left while grids resolved their own width, which is exactly the
 * "heading here, content indented there" mismatch the owner reported.
 * One rule, applied to every band, removes the whole class of defect.
 */
.home-section > h6,
.home-section > h2,
.home-section > h1 {
	text-align: center;
}

.home-section > p {
	margin-inline: auto;
	text-align: center;
}

/* Card and grid content stays left-aligned for readability. */
.home-section .hub-card,
.home-section .hub-card__inner,
.home-section .card,
.home-section .home-about,
.home-section .home-quote-card {
	text-align: left;
}

/* Icons sit above the card title, matching production's centred glyph. */
.hub-card--icon .hub-card__inner::before {
	margin-inline: 0;
}

/* Button rows centre under a centred header. */
.home-section > .wp-block-buttons,
.entry__content .home-section > .wp-block-buttons {
	justify-content: center;
}

/*
 * Inline button groups must size to their content, otherwise the
 * `.home-section > *` width:100% rule stretches each group to the full
 * container and the CTAs stack hard left instead of sitting side by side.
 */
.home-section > .wp-block-buttons,
.entry--front .entry__content .home-section > .wp-block-buttons {
	width: auto;
	max-width: none;
}

.home-section--hero > .wp-block-buttons,
.entry--front .entry__content .home-section--hero > .wp-block-buttons {
	display: inline-flex;
	width: auto;
	margin-inline: var(--space-3xs);
}

/* Keep the About column's own buttons left-aligned. */
.home-about__body .wp-block-buttons,
.entry__content .home-about__body .wp-block-buttons {
	justify-content: flex-start;
	width: auto;
}

/* ---------- Phase F: responsive hero artwork ---------- */

/*
 * The hero is a CSS background, so it does not get srcset for free. Serving
 * the 1920px/310 KB original to a 390px phone made it the LCP element at
 * 3.85s. WordPress already generated the intermediate sizes; pick by
 * viewport. Desktop keeps the full-resolution file.
 */
@media (max-width: 700px) {
	.home-section--hero {
		background-image:
			linear-gradient(rgba(20, 24, 33, 0.58), rgba(20, 24, 33, 0.72)),
			url(/wp-content/uploads/2026/06/ares_homepage_hero-1920-768x512.webp);
	}
}

@media (min-width: 701px) and (max-width: 1100px) {
	.home-section--hero {
		background-image:
			linear-gradient(rgba(20, 24, 33, 0.58), rgba(20, 24, 33, 0.72)),
			url(/wp-content/uploads/2026/06/ares_homepage_hero-1920-1024x683.webp);
	}
}

/* ---------- Phase F: eyebrow captions ---------- */

/*
 * Decorative kickers above a section title. Previously stored as <h6>, which
 * created bogus heading levels; now paragraphs carrying this class. Styling
 * is identical to the old h6 treatment so nothing shifts visually.
 */
.eyebrow,
.entry__content .eyebrow,
.home-section > .eyebrow {
	margin: 0 0 var(--space-3xs);
	color: var(--brand);
	font-size: var(--text--1);
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1.3;
	text-transform: uppercase;
}

/*
 * No max-width override here: the eyebrow must stay inside whatever container
 * cap its section sets. An earlier `max-width: none` beat `.home-section > *`
 * on equal specificity and let the kicker span the whole viewport.
 */
.home-section > .eyebrow {
	max-width: 72ch;
	margin-inline: auto;
	padding-inline: 0;
	text-align: center;
}

.home-section--hero > .eyebrow {
	color: var(--secondary);
}

.home-section--dark > .eyebrow,
.home-section--feature > .eyebrow {
	color: var(--secondary);
}

/* An eyebrow immediately followed by the section title kills the title's
   default top spacing, exactly as the h6 + h2 pair used to. */
.eyebrow + h1,
.eyebrow + h2,
.entry__content .eyebrow + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ================================================================
   Phase G — editorial design system
   ================================================================ */

/*
 * ONE TYPE HIERARCHY, EVERY PAGE.
 *
 * The legacy pages each shipped their own <style> block with its own scale:
 * about h1 = 70px, guides h1 = 52px, selling/renting h1 = 42.5px,
 * investing h1 = 48px, radar h1 = 35px. Seven different "page titles" on one
 * website. Same story for h2 (26.6-42.4px) and for body copy.
 *
 * Those blocks are inline in the document, so they beat theme CSS on equal
 * specificity regardless of load order. These rules therefore carry a
 * deliberate `.site-main .entry__content` prefix (0,2,1) which outranks the
 * page-level `.amr-about h1` / bare `h1` selectors (0,1,1 / 0,0,1) without
 * resorting to !important, and without touching the layout, colour or card
 * rules in those same blocks — only the type hierarchy is unified.
 */

.site-main .entry__content h1,
.site-main .entry__content .amr-about h1,
.site-main .entry__content .amr-blog-home h1 {
	font-size: var(--type-title);
	line-height: var(--lh-tight);
	letter-spacing: var(--track-title);
	font-weight: 700;
	color: var(--ink);
	text-wrap: balance;
}

.site-main .entry__content h2,
.site-main .entry__content .amr-about h2,
.site-main .entry__content .content-section h2,
.site-main .entry__content .amr-section-divider h2 {
	font-size: var(--type-section);
	line-height: var(--lh-heading);
	letter-spacing: var(--track-section);
	font-weight: 700;
	color: var(--ink);
	text-wrap: balance;
}

.site-main .entry__content h3,
.site-main .entry__content .amr-about h3,
.site-main .entry__content .content-section h3,
.site-main .entry__content .amr-about .aa-card h3 {
	font-size: var(--type-sub);
	line-height: var(--lh-heading);
	letter-spacing: -0.006em;
	font-weight: 700;
	color: var(--ink);
}

.site-main .entry__content h4,
.site-main .entry__content .content-section h4,
.site-main .entry__content .strategy-card h4,
.site-main .entry__content .neighborhood-card h4 {
	font-size: var(--type-card);
	line-height: var(--lh-heading);
	font-weight: 700;
	color: var(--ink);
}

/* Card titles keep the card role rather than the section role. */
.site-main .entry__content .hub-card__inner > h3,
.site-main .entry__content .card__title,
.site-main .entry__content .ew-card-title {
	font-size: var(--type-card);
	letter-spacing: 0;
}

/* ---------- Editorial page header ---------- */

/*
 * Breadcrumb → eyebrow → title → lede → optional actions.
 *
 * Interior pages get this instead of an image band. Only Home, buildings,
 * new-construction and property pages earn large imagery; everywhere else a
 * confident title over white reads as more premium and loads instantly.
 */
.page-header {
	padding-block: var(--rhythm-section) var(--rhythm-tight);
}

.page-header__eyebrow {
	display: block;
	margin: 0 0 var(--space-xs);
	color: var(--brand);
	font-size: var(--type-eyebrow);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
}

.page-header__title {
	margin: 0;
	font-size: var(--type-title);
	line-height: var(--lh-tight);
	letter-spacing: var(--track-title);
	text-wrap: balance;
}

.page-header__lede {
	max-width: var(--measure-lede);
	margin: var(--space-s) 0 0;
	color: var(--body);
	font-size: var(--type-lede);
	line-height: 1.55;
}

/* A hairline under the header separates it from content without a heavy band. */
.page-header--ruled {
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--rhythm-tight);
}

/* ---------- Lede / intro paragraph ---------- */

/*
 * The paragraph directly after a page title is an introduction, not body
 * copy: larger, looser, capped shorter than the body measure.
 */
.site-main .entry__content > h1 + p,
.site-main .entry__content > .eyebrow + h1 + p,
.site-main .entry__content .lede {
	max-width: var(--measure-lede);
	color: var(--body);
	font-size: var(--type-lede);
	line-height: 1.55;
}

/* ---------- Vertical rhythm ---------- */

/*
 * One spacing scale between major components. Page-level margins are set
 * here rather than inside each component so nothing needs a page-specific
 * override to sit correctly next to something else.
 */
.site-main .entry__content > h2 {
	margin-top: var(--rhythm-section);
	margin-bottom: var(--space-s);
	padding-top: 0;
	border-top: 0;
}

.site-main .entry__content > h3 {
	margin-top: var(--rhythm-tight);
	margin-bottom: var(--space-2xs);
}

.site-main .entry__content > .eyebrow + h2,
.site-main .entry__content > h1 + h2 {
	margin-top: 0;
}

.site-main .entry__content > p {
	margin-block: 0 var(--space-s);
}

/* ---------- Reading measure ---------- */

/*
 * Long-form prose is capped even inside a wide container. A 1320px line of
 * 16px text is ~180 characters; nobody reads that twice.
 */
.site-main .entry__content > p,
.site-main .entry__content > ul,
.site-main .entry__content > ol,
.site-main .entry__content > blockquote {
	max-width: var(--measure);
}

/* ---------- Button hierarchy ---------- */

/*
 * Four ranks so a page can express priority: primary (one per view),
 * secondary, quiet, and inline link. Previously every CTA was the same solid
 * blue, which flattened every decision on the page to equal weight.
 */
.button,
.wp-block-button__link {
	font-size: var(--type-small);
	font-weight: 600;
	letter-spacing: 0.005em;
	padding: 0.7rem 1.35rem;
	border-radius: var(--radius-md);
	transition: background var(--transition), border-color var(--transition),
		color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(74, 96, 161, 0.25);
}

.button:active,
.wp-block-button__link:active {
	transform: none;
	box-shadow: none;
}

/* Secondary: outlined, for the second choice in a pair. */
.button--secondary,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--brand);
	border-color: var(--border-strong);
}

.button--secondary:hover,
.button--secondary:focus-visible,
.is-style-outline .wp-block-button__link:hover {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand-hover);
}

/* Quiet: text plus arrow, for tertiary navigation out of a section. */
.button--quiet {
	background: transparent;
	border-color: transparent;
	color: var(--brand);
	padding-inline: 0.25rem;
}

.button--quiet:hover,
.button--quiet:focus-visible {
	background: transparent;
	border-color: transparent;
	color: var(--brand-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
	box-shadow: none;
	transform: none;
}

/* On dark bands the primary button inverts so it stays the loudest element. */
.home-section--dark .button,
.home-section--feature .button,
.home-section--cta .button,
.cta-band .button,
.home-section--dark .wp-block-button__link,
.home-section--cta .wp-block-button__link {
	background: var(--ink-inverse);
	border-color: var(--ink-inverse);
	color: var(--ink);
}

.home-section--dark .button:hover,
.home-section--cta .button:hover,
.cta-band .button:hover,
.home-section--dark .wp-block-button__link:hover,
.home-section--cta .wp-block-button__link:hover {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--ink);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* ---------- Page eyebrow (converted page-name kickers) ---------- */

/*
 * The section label above a page title. Was an <h2> duplicating the page
 * name at 34px, stacked above the 46px <h1>; now a 12px tracked label that
 * introduces the title instead of competing with it.
 *
 * text-transform handles casing, so a mis-cased source string such as
 * "renting IN MIAMI" renders correctly without editing approved content.
 */
.site-main .entry__content .page-eyebrow {
	max-width: none;
	margin: 0 0 var(--space-2xs);
	color: var(--brand);
	font-size: var(--type-eyebrow);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	line-height: 1.3;
	text-transform: uppercase;
}

/* The title immediately after an eyebrow owns the spacing above it. */
.site-main .entry__content .page-eyebrow + h1,
.site-main .entry__content .page-eyebrow + * h1:first-child {
	margin-top: 0;
}

/*
 * These long-form guides centre their own intro block. Left-align the
 * eyebrow with the breadcrumb above it so the page opens on one edge.
 */
.site-main .entry__content > .page-eyebrow {
	text-align: left;
}

/* ---------- Editorial opening: one alignment, every interior page ---------- */

/*
 * Guide pages opened three different ways: guides/tools/neighborhoods
 * left-aligned, buying/selling/renting centred (inherited from a legacy
 * wrapper), investing centred inside a nested panel. The breadcrumb and the
 * eyebrow are always left, so a centred title broke the page's own axis two
 * lines after establishing it.
 *
 * Interior pages now open left-aligned: breadcrumb, eyebrow, title, lede all
 * share one edge. `:has()` lets the wrapper that owns the centring be
 * corrected rather than fighting each descendant individually.
 */
.site-main .entry--page .entry__content h1,
.site-main .entry--page .entry__content div:has(> h1),
.site-main .entry--page .entry__content div:has(> h1) > p,
.site-main .entry--page .entry__content section:has(> h1),
.site-main .entry--page .entry__content section:has(> h1) > p {
	text-align: left;
}

/* The legacy intro panels carried 80px of vertical padding; hand that to the
   rhythm scale so every page opens with the same air. */
.site-main .entry--page .entry__content > div:first-child:has(h1) {
	padding-block: var(--rhythm-tight) !important;
	padding-inline: 0 !important;
}

/* The paragraph that follows the title is the lede on every interior page. */
.site-main .entry--page .entry__content div:has(> h1) > p:first-of-type,
.site-main .entry--page .entry__content h1 + p {
	max-width: var(--measure-lede);
	color: var(--body);
	font-size: var(--type-lede);
	line-height: 1.55;
}

/*
 * The legacy guide pages centre their opening via inline `text-align` on the
 * <h1> and on the intro block that follows it. Inline styles cannot be beaten
 * by specificity, so these two selectors carry !important — deliberately
 * narrow: the page title and the single block after it, nothing else.
 *
 * The centred CTA blocks further down those pages ("Ready to Start Your Miami
 * Journey?", "We are just a click away") are intentionally centred and are
 * left untouched.
 */
.site-main .entry--page .entry__content > h1,
.site-main .entry--page .entry__content > h1 + div {
	text-align: left !important;
}

/* The legacy intro wrapper carried its own inline padding, indenting the lede
   20px from the title it belongs to. One edge, not two. */
.site-main .entry--page .entry__content > h1 + div {
	padding-inline: 0 !important;
}

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

/*
 * Eight different body sizes survived the migration — 15.4, 17, 18.7, 19,
 * 20, 20.16, 20.4 and 22.4px — because each legacy page set its own `p`
 * size in an embedded <style> block (1.1em here, 1.15rem there, and a
 * compounding em on nested wrappers elsewhere). Reading two of those pages
 * in a row feels like reading two websites.
 *
 * One body size, one leading. Declared after the heading rules so the
 * hierarchy above still wins, and before the lede rules so an introduction
 * can still be larger than the copy beneath it.
 */
.site-main .entry__content p,
.site-main .entry__content li,
.site-main .entry__content td,
.site-main .entry__content dd {
	font-size: var(--type-body);
	line-height: var(--lh-body);
}

/* Small print stays small. */
.site-main .entry__content figcaption,
.site-main .entry__content small,
.site-main .entry__content .entry__meta {
	font-size: var(--type-small);
	line-height: 1.5;
}

/*
 * Ledes are re-stated here so they outrank the body rule above on source
 * order: the introduction to a page or a section is deliberately larger.
 */
.site-main .entry__content > h1 + p,
.site-main .entry__content > .eyebrow + h1 + p,
.site-main .entry__content .lede,
.site-main .entry--page .entry__content > h1 + div > p:first-of-type,
.site-main .entry--page .entry__content div:has(> h1) > p:first-of-type {
	max-width: var(--measure-lede);
	color: var(--body);
	font-size: var(--type-lede);
	line-height: 1.55;
}

/* Card copy is small print, not body copy, wherever it appears. */
.site-main .entry__content .hub-card__inner > p,
.site-main .entry__content .card__inner p,
.site-main .entry__content .aa-card p,
.site-main .entry__content .strategy-card p,
.site-main .entry__content .building-card p,
.site-main .entry__content .neighborhood-card p,
.site-main .entry__content blockquote.home-quote-card p {
	font-size: var(--type-small);
	line-height: 1.55;
}

/* ---------- Tables ---------- */

/*
 * Content tables arrived unstyled and, on a phone, un-scrollable: rows on the
 * investing page measured 467-505px inside a 390px viewport with no way to
 * reach the overflow. The legacy markup has no wrapper element to hook a
 * scroll container onto, so the table itself becomes the scroll container at
 * small widths — no markup change required.
 */
.site-main .entry__content table {
	width: 100%;
	margin-block: var(--space-m);
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	overflow: hidden;
	font-size: var(--type-small);
}

.site-main .entry__content th {
	background: var(--surface-alt);
	color: var(--ink);
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

.site-main .entry__content th,
.site-main .entry__content td {
	padding: var(--space-2xs) var(--space-s);
	border-bottom: 1px solid var(--border);
	line-height: 1.5;
}

.site-main .entry__content tbody tr:last-child td {
	border-bottom: 0;
}

.site-main .entry__content tbody tr:hover {
	background: var(--brand-soft);
}

@media (max-width: 782px) {
	.site-main .entry__content table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: var(--radius-card);
	}

	/* A visible edge tells the reader there is more table to the right. */
	.site-main .entry__content table th:last-child,
	.site-main .entry__content table td:last-child {
		border-right: 0;
	}
}

/* ---------- Mobile reading floor ---------- */

/*
 * Nothing in the content area drops below 14px on a phone. Card metadata and
 * table cells were rendering at 13.07px, which is below comfortable reading
 * size on a small screen held at arm's length.
 */
@media (max-width: 640px) {
	.site-main .entry__content p,
	.site-main .entry__content li,
	.site-main .entry__content td,
	.site-main .entry__content th,
	.site-main .entry__content .hub-card__inner > p,
	.site-main .entry__content .card__inner p,
	.site-main .entry__content .ew-card p,
	.site-main .entry__content .aa-card p {
		font-size: max(0.875rem, var(--type-small));
	}

	.site-main .entry__content > p,
	.site-main .entry__content .lede {
		font-size: max(1rem, var(--type-body));
	}
}

/* ---------- Mobile rhythm ---------- */

/*
 * Section spacing that reads as generous on a 1440px canvas reads as dead
 * space on a 390px one. Tighten the band rhythm and pull section headings
 * closer to the content they introduce.
 */
@media (max-width: 640px) {
	.site-main .entry__content > h2 {
		margin-top: var(--rhythm-tight);
	}

	.home-section {
		padding-block: var(--rhythm-section);
	}

	.home-section--compact {
		padding-block: var(--rhythm-tight);
	}

	.amr-ew .ew-hero {
		padding-block: var(--space-s) var(--rhythm-tight);
		margin-bottom: var(--rhythm-tight);
	}

	.amr-ew .ew-section {
		padding-bottom: var(--rhythm-tight);
	}

	/* Buttons go full-width so they are unmistakably tappable. */
	.amr-ew .ew-btns .ew-btn,
	.home-section--hero .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	.amr-ew .ew-btns {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---------- Container width: text vs layout ---------- */

/*
 * `.prose` capped the whole content container at the 68ch reading measure
 * (631px). Correct for an article; wrong for the legacy guide pages, whose
 * content also holds card grids, comparison tables and multi-column layouts —
 * those were being squeezed into a 631px column inside a 1160px page, and on
 * a phone into 280px of a 390px screen.
 *
 * The reading measure belongs on running text, which already carries it (see
 * "Reading measure" above). A container that holds layout gets layout width.
 * `:has()` keeps this self-maintaining: add a grid to a page and it widens.
 *
 * Deliberately NOT triggered by a bare <table>: tables are common inside
 * ordinary prose, they already scroll on small screens, and widening the
 * calculator pages on their account re-flowed their chart canvas and
 * introduced 0.09 of layout shift on a page that had none. Grids and card
 * families are the real signal that a page is doing layout, not prose.
 */
.site-main .entry__content.prose:has(.ew-grid),
.site-main .entry__content.prose:has(.hub-grid),
.site-main .entry__content.prose:has(.card-grid),
.site-main .entry__content.prose:has(.aa-card-grid),
.site-main .entry__content.prose:has(.strategy-card),
.site-main .entry__content.prose:has(.building-card),
.site-main .entry__content.prose:has(.neighborhood-card),
.site-main .entry__content.prose:has(.amr-ew) {
	max-width: var(--container-standard);
}

/*
 * Legacy pages nest their own `.container` inside the theme's, so horizontal
 * padding was applied twice — 40px of it on a 390px screen. The outer
 * container owns the gutter.
 */
.site-main .entry__content .container {
	max-width: none;
	padding-inline: 0;
}

/* ---------- Dark surfaces: restore inverse text ---------- */

/*
 * REGRESSION FIX.
 *
 * The type-hierarchy rules above set `color: var(--ink)` at
 * `.site-main .entry__content h2` (0,2,1), which outranks the dark-band
 * rules at `.home-section--dark > h2` (0,1,1). Result: the hero title, the
 * Edgewater Insider band and the final CTA rendered dark-on-dark — headings
 * effectively invisible.
 *
 * Colour on a dark surface is not a type-scale concern, so these selectors
 * are scoped to the dark contexts and given matching depth. The type rules
 * still own size, weight and tracking; only colour is reclaimed here.
 */
.site-main .entry__content .home-section--hero h1,
.site-main .entry__content .home-section--hero h2,
.site-main .entry__content .home-section--dark h1,
.site-main .entry__content .home-section--dark h2,
.site-main .entry__content .home-section--dark h3,
.site-main .entry__content .home-section--feature h1,
.site-main .entry__content .home-section--feature h2,
.site-main .entry__content .home-section--feature h3,
.site-main .entry__content .home-section--cta h1,
.site-main .entry__content .home-section--cta h2,
.site-main .entry__content .home-section--cta h3,
.site-main .entry__content .amr-ew .ew-news h2,
.site-main .entry__content .amr-ew .ew-news h3,
.site-main .entry__content .amr-ew .ew-cta h2,
.site-main .entry__content .amr-ew .ew-cta h3 {
	color: var(--ink-inverse);
}

.site-main .entry__content .home-section--hero p,
.site-main .entry__content .home-section--dark p,
.site-main .entry__content .home-section--feature p,
.site-main .entry__content .home-section--cta p,
.site-main .entry__content .amr-ew .ew-news p,
.site-main .entry__content .amr-ew .ew-cta p {
	color: var(--on-dark);
}

.site-main .entry__content .home-section--hero .eyebrow,
.site-main .entry__content .home-section--dark .eyebrow,
.site-main .entry__content .home-section--feature .eyebrow,
.site-main .entry__content .home-section--cta .eyebrow {
	color: var(--secondary);
}

/* Dark-band cards keep inverse text too. */
.site-main .entry__content .home-section--feature .hub-card__inner > h3,
.site-main .entry__content .home-section--feature .hub-card__inner > h3 > a {
	color: var(--ink-inverse);
}

.site-main .entry__content .home-section--feature .hub-card__inner > p {
	color: var(--on-dark);
}

/* The standalone CTA band above the footer is outside .entry__content. */
.cta-band .cta-band__title,
.cta-band h2 {
	color: var(--ink-inverse);
}

/* ---------- Hero CTA hierarchy ---------- */

/*
 * Both hero CTAs rendered as the same solid blue, so the page offered two
 * equally-loud primary actions and expressed no preference. On the hero's
 * dark image the primary becomes white (the loudest possible element) and
 * the secondary becomes an outline — one obvious first action, one clear
 * alternative.
 */
.home-section--hero .wp-block-buttons:first-of-type .wp-block-button__link {
	background: var(--ink-inverse);
	border-color: var(--ink-inverse);
	color: var(--ink);
}

.home-section--hero .wp-block-buttons:first-of-type .wp-block-button__link:hover,
.home-section--hero .wp-block-buttons:first-of-type .wp-block-button__link:focus-visible {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--ink);
}

.home-section--hero .wp-block-buttons:nth-of-type(2) .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.65);
	color: var(--ink-inverse);
}

.home-section--hero .wp-block-buttons:nth-of-type(2) .wp-block-button__link:hover,
.home-section--hero .wp-block-buttons:nth-of-type(2) .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--ink-inverse);
	color: var(--ink-inverse);
}

/* ================================================================
   Phase H — responsive geometry
   ================================================================ */

/* ---------- Page shell width by family ---------- */

/*
 * The audit measured every public URL and found 43 pages whose entire shell
 * sat in a reading-width column: 17 service hubs, 13 neighbourhood profiles,
 * 9 calculators, plus the property search, a directory, a development page
 * and the blog index. Cards, forms, tables and maps were inheriting a 68ch
 * measure meant for paragraphs, which is what produced the "narrow column with
 * 35–50% of the desktop empty" pattern.
 *
 * `inc/layout.php` classifies each view into a family and emits it as a body
 * class; this maps family → container width. Explicit, one place, no
 * page-specific offsets. Running text keeps its own measure regardless (see
 * "Reading measure" in the Phase G block), so widening a shell never widens a
 * paragraph.
 */
body.family-property-search .site-main > .container,
body.family-monthly-report .site-main > .container,
body.family-annual-report .site-main > .container,
body.family-edgewater-sales-hub .site-main > .container,
body.family-development-building .site-main > .container {
	max-width: calc(var(--container-wide) + (var(--gutter) * 2));
}

body.family-homepage .site-main > .container,
body.family-directory .site-main > .container,
body.family-blog-index .site-main > .container,
body.family-edgewater-hub .site-main > .container,
body.family-service-hub .site-main > .container,
body.family-neighborhood-profile .site-main > .container,
body.family-about .site-main > .container {
	max-width: calc(var(--container-standard) + (var(--gutter) * 2));
}

body.family-calculator .site-main > .container,
body.family-contact .site-main > .container {
	max-width: calc(var(--container-form) + (var(--gutter) * 2));
}

/*
 * The content box inside the shell. `.prose` caps at 68ch, which is right for
 * an article body and wrong for everything that holds layout.
 */
body.family-property-search .site-main .entry__content,
body.family-monthly-report .site-main .entry__content,
body.family-annual-report .site-main .entry__content,
body.family-edgewater-sales-hub .site-main .entry__content,
body.family-development-building .site-main .entry__content {
	max-width: var(--container-wide);
}

body.family-homepage .site-main .entry__content,
body.family-directory .site-main .entry__content,
body.family-blog-index .site-main .entry__content,
body.family-edgewater-hub .site-main .entry__content,
body.family-service-hub .site-main .entry__content,
body.family-neighborhood-profile .site-main .entry__content,
body.family-about .site-main .entry__content {
	max-width: var(--container-standard);
}

body.family-calculator .site-main .entry__content,
body.family-contact .site-main .entry__content {
	max-width: var(--container-form);
}

/* Article families keep the reading measure — that is the correct geometry. */
body.family-blog-post .site-main .entry__content,
body.family-long-form-guide .site-main .entry__content {
	max-width: var(--container-reading);
}

/*
 * A wide shell must not let running text run wide with it. Paragraphs, lists
 * and quotes stay at the reading measure inside any container.
 */
body.family-property-search .site-main .entry__content > p,
body.family-monthly-report .site-main .entry__content > p,
body.family-annual-report .site-main .entry__content > p,
body.family-development-building .site-main .entry__content > p,
body.family-service-hub .site-main .entry__content > p,
body.family-neighborhood-profile .site-main .entry__content > p {
	max-width: var(--measure);
}

/* ---------- Justified long-form prose (desktop only) ---------- */

/*
 * The owner prefers justified paragraphs. Justification only works when a line
 * is long enough to distribute spaces invisibly, so it is applied to
 * substantial prose at tablet width and above, and never to hero copy, cards,
 * forms, lists, captions, buttons, testimonials or callouts.
 */
@media (min-width: 768px) {
	body.family-blog-post .site-main .entry__content p,
	body.family-long-form-guide .site-main .entry__content p,
	body.is-long-form .site-main .entry__content p,
	.site-main .article-prose > p,
	.site-main .long-form-content > p,
	.site-main .report-methodology > p,
	.amr-ew .ew-prose > p {
		text-align: justify;
		text-justify: inter-word;
		hyphens: auto;
	}

	/* Never justify these, even inside a long-form page. */
	.site-main .home-section--hero p,
	.site-main .page-header__lede,
	.site-main .lede,
	.site-main .hub-card__inner p,
	.site-main .card__inner p,
	.site-main .ew-card p,
	.site-main .aa-card p,
	.site-main .home-quote-card p,
	.site-main .cta-band p,
	.site-main figcaption,
	.site-main .entry__content > h1 + p,
	.site-main form p,
	.site-main .wpforms-container p {
		text-align: left;
		hyphens: none;
	}
}

/*
 * Narrow columns cannot justify without rivers of white space.
 */
@media (max-width: 767px) {
	/*
	 * Must match the justify rule's depth. The desktop rule targets
	 * `.entry__content p` (any depth, because legacy prose is nested inside
	 * wrapper divs) while this one originally targeted direct children only —
	 * so 102 of 106 paragraphs on a guide stayed justified in a 350px column,
	 * which is precisely the word-spacing problem the rule exists to prevent.
	 */
	body .site-main .entry__content p,
	body .site-main .article-prose p,
	body .site-main .long-form-content p,
	body .site-main .report-methodology p,
	body .amr-ew .ew-prose p {
		text-align: left;
		hyphens: none;
	}
}

/* ---------- Compact mobile footer ---------- */

/*
 * The footer measured 1002–1250px tall on 140 of 141 pages at 390px — roughly
 * one and a half phone screens of chrome after every page. Nothing is removed:
 * the brokerage block, AI-transparency note, contact list, explore links and
 * legal copy are all still there. They are simply paced for a phone.
 */
@media (max-width: 640px) {
	/*
	 * Single column on phones. A previous 2-track "pairing" left the Contact and
	 * Explore columns side by side at ~187px each, so the 250px email
	 * (connect@fernandoamarante.com) overflowed its track into the Explore
	 * column. Stacking removes the collision and keeps every group readable.
	 */
	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-m) var(--space-s);
		padding-block: var(--rhythm-tight) var(--space-m);
	}

	.site-footer__col--brand,
	.site-footer__col--note,
	.site-footer__col--contact,
	.site-footer__col--nav {
		grid-column: 1 / -1;
	}

	/* Long contact values (email) wrap safely instead of overrunning the column. */
	.site-footer__contact-list li,
	.site-footer__contact-list a {
		overflow-wrap: anywhere;
		word-break: normal;
		min-width: 0;
	}

	.site-footer__heading {
		margin-bottom: var(--space-3xs);
		font-size: var(--type-small);
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--muted);
	}

	.site-footer__text,
	.site-footer__contact-list li,
	.site-footer__menu a {
		font-size: var(--type-small);
		line-height: 1.45;
	}

	.site-footer__contact-list,
	.site-footer__menu {
		gap: var(--space-3xs);
	}

	.site-footer__brokerage-logo {
		max-width: 116px;
		margin-top: var(--space-2xs);
	}

	/* The AI note is reference text, not body copy, on a phone. */
	.site-footer__col--note .site-footer__text {
		font-size: 0.8125rem;
		color: var(--muted);
	}

	.site-footer__bar-inner {
		padding-block: var(--space-s);
	}

	.site-footer__legal-copy {
		font-size: 0.75rem;
		line-height: 1.5;
	}
}

/* Report families use the wide measure for their grids and data tables. */
body.family-edgewater-sales-hub .amr-ew .ew-wrap,
body.family-monthly-report .amr-ew .ew-wrap,
body.family-annual-report .amr-ew .ew-wrap,
body.family-development-building .amr-ew .ew-wrap {
	max-width: var(--container-wide);
}

/*
 * The Phase G `:has()` width rules carry (0,4,0) and outrank the family rules
 * above at (0,3,0). Family classification is the more reliable signal — it is
 * declared, not inferred — so it wins by matching depth. Phase G's rules stay
 * as the fallback for any view that has no family class.
 */
body.family-property-search .site-main .entry__content.prose,
body.family-monthly-report .site-main .entry__content.prose,
body.family-annual-report .site-main .entry__content.prose,
body.family-edgewater-sales-hub .site-main .entry__content.prose,
body.family-development-building .site-main .entry__content.prose {
	max-width: var(--container-wide);
}

body.family-homepage .site-main .entry__content.prose,
body.family-directory .site-main .entry__content.prose,
body.family-blog-index .site-main .entry__content.prose,
body.family-edgewater-hub .site-main .entry__content.prose,
body.family-service-hub .site-main .entry__content.prose,
body.family-neighborhood-profile .site-main .entry__content.prose,
body.family-about .site-main .entry__content.prose {
	max-width: var(--container-standard);
}

body.family-calculator .site-main .entry__content.prose,
body.family-contact .site-main .entry__content.prose {
	max-width: var(--container-form);
}

body.family-blog-post .site-main .entry__content.prose,
body.family-long-form-guide .site-main .entry__content.prose {
	max-width: var(--container-reading);
}

/* ---------- Long-form section navigation ---------- */

/*
 * Mobile: a collapsed control directly under the page intro, so a reader can
 * see the shape of a 14,000–50,600px document before committing to it. It was
 * previously 825–1,742px down the page, or absent entirely.
 */
.toc {
	margin-block: var(--space-m) var(--rhythm-tight);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: var(--surface-alt);
}

.toc--rail {
	display: none;
}

.toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
	padding: var(--space-s) var(--space-m);
	color: var(--ink);
	font-size: var(--type-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.toc__summary::-webkit-details-marker { display: none; }

.toc__summary::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--transition);
	flex: 0 0 auto;
}

.toc[open] > .toc__summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.toc__count {
	margin-left: auto;
	margin-right: var(--space-2xs);
	padding: 0.1rem 0.45rem;
	background: var(--brand-soft);
	color: var(--brand-hover);
	border-radius: var(--radius-pill);
	font-size: var(--type-eyebrow);
}

.toc__list {
	margin: 0;
	padding: 0 var(--space-m) var(--space-s);
	list-style: none;
	counter-reset: toc;
	max-width: none;
}

.toc__item {
	counter-increment: toc;
	border-top: 1px solid var(--border);
}

.toc__link {
	display: block;
	padding: var(--space-2xs) 0;
	color: var(--body);
	font-size: var(--type-small);
	line-height: 1.4;
	text-decoration: none;
	text-align: left;
}

.toc__link::before {
	content: counter(toc) ". ";
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.toc__link:hover,
.toc__link:focus-visible {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.toc__title {
	margin: 0;
	padding: var(--space-s) var(--space-m) var(--space-2xs);
	color: var(--muted);
	font-size: var(--type-eyebrow);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
}

/*
 * Desktop: the article and a sticky rail share one centred composition —
 * rail 260px, article at its reading measure. The page shell widens to hold
 * both rather than the article moving off-centre.
 */
@media (min-width: 1100px) {
	body.family-long-form-guide .entry--has-toc,
	body.is-long-form .entry--has-toc {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--rhythm-tight);
		align-items: start;
	}

	body.family-long-form-guide .entry--has-toc > .entry__header,
	body.is-long-form .entry--has-toc > .entry__header {
		grid-column: 1 / -1;
	}

	.entry--has-toc > .toc--rail {
		display: block;
		position: sticky;
		top: calc(var(--header-height) + var(--space-s));
		max-height: calc(100vh - var(--header-height) - var(--space-l));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: transparent;
		border: 0;
		border-left: 2px solid var(--border);
		border-radius: 0;
	}

	.entry--has-toc > .toc--inline {
		display: none;
	}

	.entry--has-toc > .entry__content {
		grid-column: 2;
	}

	/* The composition is centred as a whole. */
	body.family-long-form-guide .site-main > .container,
	body.is-long-form .site-main > .container {
		max-width: calc(1120px + (var(--gutter) * 2));
	}
}

/* Anchored sections must clear the fixed header when jumped to. */
.site-main [id^="sec-"] {
	scroll-margin-top: calc(var(--header-height) + var(--space-s));
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------- Fixed CTA safety ---------- */

/*
 * A page-supplied fixed bar (`.amr-sticky-cta`, 83px tall at bottom:0) sat on
 * top of the footer and the legal copy with no page compensation. Any fixed
 * bottom bar now: respects the safe-area inset, reserves matching space at the
 * end of the document so nothing is permanently covered, and is suppressed on
 * short pages where the CTA it duplicates is already on screen.
 */
.amr-sticky-cta,
.is-sticky-cta {
	padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
	z-index: 40;
}

body:has(.amr-sticky-cta) .site-footer,
body:has(.is-sticky-cta) .site-footer {
	padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Two long labels side by side do not fit a 390px bar. */
@media (max-width: 480px) {
	.amr-sticky-cta {
		font-size: var(--type-small);
	}

	.amr-sticky-cta .ew-btn,
	.amr-sticky-cta .button,
	.amr-sticky-cta a {
		padding-inline: var(--space-s);
	}
}

/* ================================================================
   Phase H correction — container centering (owner review)
   ================================================================ */

/*
 * The Phase H audit measured how much of the viewport a page used, but not
 * whether the used part was centered. It was not: on the homepage every
 * bounded container sat with left gutter 0 and the whole surplus on the
 * right — 440px of empty column at 1600px.
 *
 * Cause: the homepage `.entry__content` was capped at --container-standard
 * (1160px) by a family rule that set max-width without margin-inline:auto, so
 * the column pinned left. Worse, the homepage is built from full-bleed
 * `.home-section` bands whose backgrounds are meant to span the viewport;
 * trapped inside a 1160px left-anchored parent they could not.
 *
 * Two fixes:
 *   1. The homepage content box is full width, so its sections go full-bleed
 *      and each section centres its own inner content (`.home-section > *`
 *      already caps at 1160 with margin-inline:auto).
 *   2. Every other family's capped content box is explicitly centred. A
 *      bounded container that sets max-width must also centre — this is the
 *      universal guarantee the audit now enforces (delta <= 24px).
 */

/* 1. Homepage: full-width shell; sections manage their own width + centring. */
body.family-homepage .site-main .entry__content,
body.family-homepage .site-main .entry__content.prose {
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

body.family-homepage .site-main > .container {
	max-width: none;
	padding-inline: 0;
}

/* 2. Every bounded content box is centred (matches the family cap depth). */
body.family-directory .site-main .entry__content,
body.family-blog-index .site-main .entry__content,
body.family-edgewater-hub .site-main .entry__content,
body.family-service-hub .site-main .entry__content,
body.family-neighborhood-profile .site-main .entry__content,
body.family-about .site-main .entry__content,
body.family-calculator .site-main .entry__content,
body.family-contact .site-main .entry__content,
body.family-blog-post .site-main .entry__content,
body.family-long-form-guide .site-main .entry__content,
body.family-annual-report .site-main .entry__content,
body.family-monthly-report .site-main .entry__content,
body.family-edgewater-sales-hub .site-main .entry__content,
body.family-development-building .site-main .entry__content,
body.family-property-search .site-main .entry__content,
body.family-directory .site-main .entry__content.prose,
body.family-blog-index .site-main .entry__content.prose,
body.family-edgewater-hub .site-main .entry__content.prose,
body.family-service-hub .site-main .entry__content.prose,
body.family-neighborhood-profile .site-main .entry__content.prose,
body.family-about .site-main .entry__content.prose,
body.family-calculator .site-main .entry__content.prose,
body.family-contact .site-main .entry__content.prose,
body.family-blog-post .site-main .entry__content.prose,
body.family-long-form-guide .site-main .entry__content.prose,
body.family-monthly-report .site-main .entry__content.prose,
body.family-edgewater-sales-hub .site-main .entry__content.prose,
body.family-development-building .site-main .entry__content.prose {
	margin-inline: auto;
}

/*
 * Full-bleed backgrounds may span the viewport; their inner containers are
 * centred. This is the invariant the gutter audit checks — never a page-level
 * left/right offset.
 */
/*
 * Centre every full-bleed section's inner content. Higher specificity than
 * the heading/grid `margin:` shorthands (`.home-section > h2`,`.hub-grid`),
 * which reset inline margins to 0 — that reset, not a missing rule, was
 * pinning the section content to the left edge. (0,3,0) clears (0,1,1) and
 * (0,1,0) without !important.
 */
.entry--front .entry__content .home-section > *,
.cta-band .cta-band__inner,
.amr-ew .amr-ew .ew-wrap {
	margin-inline: auto;
}

/* Belt and braces for the specific block children that carry shorthand
   margins, matched at the same (0,3,0) depth. */
.entry--front .entry__content .home-section > h1,
.entry--front .entry__content .home-section > h2,
.entry--front .entry__content .home-section > h3,
.entry--front .entry__content .home-section > h6,
.entry--front .entry__content .home-section > p,
.entry--front .entry__content .home-section > .hub-grid,
.entry--front .entry__content .home-section > .home-about,
.entry--front .entry__content .home-section > .home-quotes,
.entry--front .entry__content .home-section > .latest-posts,
.entry--front .entry__content .home-section > .wpforms-container,
.entry--front .entry__content .home-section > .wp-block-buttons {
	margin-inline: auto;
}

/* ================================================================
   Phase H correction — component tightening (owner review)
   ================================================================ */

/* ---------- 1. Dropdown menus: compact, content-height ---------- */

/*
 * The Edgewater panel (and every dropdown) rendered with 33px rows and loose
 * padding, leaving it taller and airier than a navigation panel should be.
 * Tightened to a compact content-height list: smaller row padding, snug panel
 * padding, no min-height. Applied to all dropdowns so they stay consistent.
 */
@media (min-width: 1025px) {
	.nav__submenu {
		padding: var(--space-3xs);
		min-width: 12rem;
	}

	.nav__submenu .nav__link {
		padding: 0.32rem 0.7rem;
		font-size: 0.9rem;
		line-height: 1.3;
	}
}

/* ---------- 2. Neighborhood cards: less padding, smaller icon ---------- */

/*
 * The homepage neighbourhood cards (3x2 grid) carried 24px padding and a 36px
 * icon that dominated a short one-line card. Tightened so the label leads and
 * the icon supports — grid columns are untouched, so the 3x2 layout holds.
 */
.entry--front .entry__content .home-section .hub-card--icon .hub-card__inner {
	padding: var(--space-s);
}

.entry--front .entry__content .home-section .hub-card--icon .hub-card__inner::before {
	width: 1.5rem;
	height: 1.5rem;
	margin-bottom: var(--space-3xs);
}

.entry--front .entry__content .home-section .hub-card--icon .hub-card__inner > h3 {
	font-size: var(--type-card);
}

/* ---------- 3. Dark contact CTA: shorter ---------- */

/*
 * The closing "Have a Question? Ask It." band ran 96px of padding top and
 * bottom (457px tall). Reduced to the section rhythm scale so it reads as a
 * close, not a second hero.
 */
.home-section--cta,
.home-section--compact:last-child {
	padding-block: var(--rhythm-section);
}

.home-section--cta > h2 {
	margin-bottom: var(--space-2xs);
}

.home-section--cta > p {
	margin-bottom: var(--space-s);
}

/* ---------- 4. Hero copy: no orphaned last word ---------- */

/*
 * The hero supporting line wrapped its final word ("one.") onto a line by
 * itself. `text-wrap: pretty` asks the browser to avoid short last lines;
 * `balance` is the fallback for engines without pretty. The copy is unchanged.
 */
.home-section--hero > p {
	text-wrap: pretty;
}

@supports not (text-wrap: pretty) {
	.home-section--hero > p {
		text-wrap: balance;
	}
}

/* ================================================================
   Phase H correction 2 — hero centring, newsletter, success, reviews
   ================================================================ */

/* ---------- 1. Hero: eyebrow, h1, body, CTAs share one centre ---------- */

/*
 * The hero boxes were centred but their text was left-aligned (eyebrow and
 * body copy read as left-anchored), and the CTA row sat off-centre. Force the
 * whole hero stack to a single visual centre.
 */
.home-section--hero {
	text-align: center;
}

.entry--front .entry__content .home-section--hero > .eyebrow,
.entry--front .entry__content .home-section--hero > p,
.entry--front .entry__content .home-section--hero > h1,
.entry--front .entry__content .home-section--hero > h6 {
	text-align: center;
	margin-inline: auto;
}

/* CTA row centres as a block and its buttons centre within it. */
.entry--front .entry__content .home-section--hero > .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: var(--container-standard);
	margin-inline: auto;
}

/* ---------- 3. Newsletter success state ---------- */

/*
 * The default WPForms confirmation was a pale green box with low-contrast
 * green text. Replaced with a legible success panel — soft green surface,
 * a solid success accent, and dark-green text at >8:1 contrast — centred to
 * match the newsletter module it replaces. (The copy itself, "You're
 * subscribed to Edgewater Insider.", is fixed in the form config.)
 */
.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
	max-width: 480px;
	margin: var(--space-l) auto 0;
	padding: var(--space-m) var(--space-l);
	background: #e9f5ec;
	border: 1px solid #b6ddc2;
	border-left: 4px solid var(--success);
	border-radius: var(--radius-md);
	color: #14532d;
	text-align: center;
	font-weight: 600;
}

.wpforms-confirmation-container-full p,
.wpforms-confirmation-container p {
	margin: 0;
	color: #14532d;
}

/* On the dark Edgewater/home newsletter bands the panel stays light so the
   success text is never light-on-light. */
.home-section--dark .wpforms-confirmation-container-full,
.amr-ew .ew-news .wpforms-confirmation-container-full,
.home-section--dark .wpforms-confirmation-container,
.amr-ew .ew-news .wpforms-confirmation-container {
	background: #eafaf0;
	border-color: #bfe6cd;
	color: #14532d;
}

/*
 * GLOBAL success-state legibility. components.css is enqueued on EVERY page,
 * whereas the equivalent !important rule in edgewater.css only loads on
 * /edgewater/ pages — so the homepage #edgewater-signup confirmation <p> was
 * inheriting the dark band's light-grey body colour (~1.3:1 on the pale panel).
 * Force dark-green success text (#14532d on #eafaf0 ≈ 8.9:1, WCAG AAA) on the
 * panel and all its descendants, in any band. This is a legitimate use of
 * !important: a success confirmation must always be legible.
 */
.wpforms-confirmation-container-full,
.wpforms-confirmation-container,
.wpforms-confirmation-container-full p,
.wpforms-confirmation-container p,
.wpforms-confirmation-container-full li,
.wpforms-confirmation-container li,
.home-section--dark .wpforms-confirmation-container-full p,
.home-section--dark .wpforms-confirmation-container p,
.amr-ew .ew-news .wpforms-confirmation-container-full p,
.amr-ew .ew-news .wpforms-confirmation-container p {
	color: #14532d !important;
}
.wpforms-confirmation-container-full a,
.wpforms-confirmation-container a {
	color: #0f3d22 !important;
	text-decoration: underline;
}

/*
 * Error-state legibility. WPForms field/error messages must stay readable in
 * every band, including the dark home/Edgewater newsletter sections. Use a
 * dark-red error text on a light error surface (≈ WCAG AA) rather than the
 * default red that can wash out on dark or coloured backgrounds.
 */
.wpforms-error,
label.wpforms-error,
.wpforms-field .wpforms-error,
.home-section--dark .wpforms-error,
.amr-ew .ew-news .wpforms-error {
	color: #b3261e !important;
	font-weight: 600;
}
.home-section--dark .wpforms-form input.wpforms-error,
.home-section--dark .wpforms-form textarea.wpforms-error {
	border-color: #b3261e !important;
}

/*
 * Wide content tables scroll horizontally on phones. ~20 raw <table>s across
 * guide/radar articles were wider than a phone viewport with no scroll
 * container, risking horizontal overflow or clipped columns. Making them
 * scrollable blocks keeps every cell reachable without breaking the page width.
 * (Report/data tables that already fit are unaffected.)
 */
@media (max-width: 782px) {
	.entry__content table,
	.prose table,
	.site-main .entry__content table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/*
 * Mobile Table of Contents. Several long-form guides/reports (14 pages) render
 * an in-content "Table of Contents" <ul> with an INLINE `columns: 2` style.
 * Two columns on a phone produce cramped, awkwardly-wrapped numbered items that
 * can collide. Collapse to a single column on phones (an attribute selector +
 * !important is required to beat the element's inline style). Numbering,
 * indentation and one-item-per-line tap targets are preserved.
 */
@media (max-width: 640px) {
	.entry__content ul[style*="columns"],
	.entry__content ul[style*="column-count"],
	.prose ul[style*="columns"],
	.site-main ul[style*="columns"] {
		columns: 1 !important;
		-webkit-columns: 1 !important;
		-moz-columns: 1 !important;
		column-count: 1 !important;
	}
}

/* ---------- 4. /about/ testimonials in the dark reviews section ---------- */

/*
 * `.aa-reviews` is a dark band, but its section title rendered near-black
 * (invisible) and its eyebrow/stars used brand blue at 2.62:1. The Phase G
 * dark-surface text treatment never covered this page's own dark class.
 * Restore legible light text and give the stars a warm, readable tone.
 */
.aa-reviews {
	color: var(--on-dark);
}

.aa-reviews h2,
.aa-reviews h3,
.site-main .entry__content .aa-reviews h2,
.site-main .entry__content .aa-reviews h3 {
	color: var(--ink-inverse);
}

/*
 * The eyebrow is set by the page's own embedded <style> with the SAME
 * (0,3,0) selector, and being inline it wins the tie by source order. A
 * leading `body` lifts this to (0,3,1) so it clears the page rule without
 * !important.
 */
body.family-about .aa-reviews .aa-eyebrow,
body .amr-about .aa-reviews .aa-eyebrow {
	color: var(--secondary);
}

.aa-reviews p,
.aa-reviews .aa-reviewer,
.aa-reviews blockquote,
.aa-reviews cite {
	color: var(--on-dark);
}

/*
 * In the dark reviews section the quote panels inherited the generic prose
 * blockquote treatment — a light --brand-soft background. White quote text on
 * it measured 1.13:1 (the "white-on-white" the owner saw). Drop the light
 * panel so the white quote sits on the dark card. Specificity (0,2,1) beats
 * `.entry__content blockquote` (0,1,1).
 */
.entry__content .aa-reviews blockquote,
.aa-reviews blockquote {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ink-inverse);
}

.entry__content .aa-reviews blockquote::before,
.aa-reviews blockquote::before {
	display: none;
}

/* Stars: a warm gold reads as a rating on the dark band; brand blue did not. */
.amr-about .aa-reviews .aa-stars,
.amr-about .aa-reviews [class*="star"],
.aa-reviews .aa-stars,
.aa-reviews [class*="star"] {
	color: #f2b134;
}

/* Buttons already white; keep the ghost button's outline visible on dark. */
.aa-reviews .aa-btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--ink-inverse);
}

/* ================================================================
   Launch candidate — homepage Edgewater form (centred, full-width fields)
   ================================================================ */

/*
 * The homepage newsletter (#edgewater-signup, inside .home-section--dark) is a
 * DIFFERENT section from the /edgewater/ .ew-news form, so the edgewater.css
 * field rules never reached it. Its container is centred, but the fields sat
 * pinned left because WPForms' own stylesheet caps them:
 *
 *   div.wpforms-container-full .wpforms-form input.wpforms-field-medium
 *     { max-width: 60% }          (specificity 0,3,2)
 *
 * A 60%-wide input with margin-left:0 hugs the left of a 544px form — exactly
 * the "centred wrapper containing left-aligned controls" the brief calls out.
 *
 * Bound and centre the form column, then beat the WPForms cap with a selector
 * that also carries `.wpforms-container-full` (0,4,3 > 0,3,2), so it wins
 * whatever the stylesheet load order.
 */
.home-section--dark .wpforms-container,
#edgewater-signup .wpforms-container {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

.home-section--dark .wpforms-form,
#edgewater-signup .wpforms-form {
	width: 100%;
}

.home-section--dark div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
.home-section--dark div.wpforms-container-full .wpforms-form input.wpforms-field-large,
.home-section--dark div.wpforms-container-full .wpforms-form input[type="text"],
.home-section--dark div.wpforms-container-full .wpforms-form input[type="email"],
#edgewater-signup div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
#edgewater-signup div.wpforms-container-full .wpforms-form input[type="text"],
#edgewater-signup div.wpforms-container-full .wpforms-form input[type="email"] {
	max-width: 100%;
	width: 100%;
}

/* Submit spans the column intentionally rather than floating left. */
.home-section--dark .wpforms-submit,
#edgewater-signup .wpforms-submit {
	width: 100%;
	padding-block: 0.85rem;
	font-weight: 700;
}

/* Fields container must fill the form column, not a narrower track. */
.home-section--dark .wpforms-field,
.home-section--dark .wpforms-field-container,
#edgewater-signup .wpforms-field,
#edgewater-signup .wpforms-field-container {
	width: 100%;
	max-width: 100%;
}