/*
 * The page patterns: the homepage sections (patterns/home*.php: hero, ways
 * to live, ADU types, the property checker, how we help with the property
 * plan, why Boco ADU, lifestyle, guides, FAQ, closing call to action; hp-
 * classes, shared by the other two), the Services page (patterns/
 * services.php; sv- classes) and the site planner page (patterns/
 * site-planner.php; sp- classes). Loaded on the front page and on any page
 * whose content uses them (inc/home.php), and in the editor. Colors are the
 * tokens in site.css. The dialog (.boco-dialog, the boco/dialog block) may
 * be used on any page.
 *
 * Block markup may only use classes defined in site.css, components.css,
 * blocks.css or this file (`wp boco check` reports any other class).
 */

/* Shared ----------------------------------------------------------------- */

.hp-section { padding-block: 88px 84px; }
:where(.hp-section, .hp-benefits) :where(p) { color: var(--text-muted); }

.hp-eyebrow {
	margin-bottom: 1.25rem;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sage);
}
.hp-eyebrow.has-dot::before,
.hp-label.has-dot::before,
.hp-dot::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: .55rem;
	border-radius: 50%;
	background: var(--orange);
	vertical-align: .1em;
}
.hp-eyebrow.is-light { color: #c3d2bd; }

.hp-h1,
.hp-h2 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.025em;
	color: var(--navy);
}
.hp-h1 { font-size: clamp(40px, 4vw, 58px); }
.hp-h2 { font-size: clamp(34px, 3.2vw, 48px); }
.hp-h1 em,
.hp-h2 em { font-style: italic; color: #4f7a55; }
.hp-h3 { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--navy); }

.hp-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }

.hp-link {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	min-height: 44px;
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}
.hp-link:hover { color: var(--orange); }
.hp-out::after,
.hp-next::after,
.hp-down::after { font-weight: 400; }
.hp-out::after { content: "↗"; content: "↗" / ""; }
.hp-next::after { content: "→"; content: "→" / ""; }
.hp-down::after { content: "↓"; content: "↓" / ""; font-weight: 400; }
.boco-btn.hp-out,
.boco-btn.hp-next { gap: 1.5rem; min-height: 55px; padding-inline: 1.45rem; font-size: 15px; font-weight: 700; }
.boco-btn.hp-out::after,
.boco-btn.hp-next::after { font-size: 1.15em; }
.boco-btn.hp-dark { background: var(--navy); }
.boco-btn.hp-dark:hover { background: var(--navy-raised); }
@media (prefers-reduced-motion: no-preference) {
	.hp-section .boco-btn { transition: background .2s, transform .2s; }
	.hp-section .boco-btn:hover { transform: translateY(-2px); }
}

/* A heading row: eyebrow and H2 on the left, a short intro on the right. */
.hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3.75rem; margin-bottom: 2.5rem; }
.hp-head > p { max-width: 28rem; font-size: 16px; }
.hp-head.is-center { align-items: center; }
.hp-intro strong { color: var(--navy); }

.hp-note { margin-top: 1.6rem; font-size: 13px; }

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

.hp-hero { padding-block: 28px 56px; }
.hp-hero-grid { display: grid; grid-template-columns: 45% 55%; align-items: center; }
.hp-hero-copy { padding-right: 2.25rem; }
.hp-hero .hp-h1 { margin-bottom: 1.6rem; }
.hp-lead { margin-bottom: .6rem; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.hp-text { max-width: 28rem; font-size: 17px; line-height: 1.7; }
.hp-actions { align-items: center; gap: 1.4rem; margin-top: 1.75rem; }
.hp-micro { margin-top: .8rem; font-size: 13px; }
.hp-checks {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin-top: 1.6rem;
	border-top: 1px solid var(--line);
	padding-top: 1.5rem;
	font-size: 13px;
	color: var(--text-subtle);
}
.hp-checks li { display: flex; align-items: baseline; }
.hp-checks li::before { content: "✓"; content: "✓" / ""; margin-right: .4rem; color: #416544; }
.hp-hero-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 7px; }
.hp-hero-img figcaption,
.hp-caption-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .7rem;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-subtle);
}
.hp-hero-img figcaption em { flex: none; font-style: normal; letter-spacing: 0; text-transform: none; }

/* Ways to live: photo cards ----------------------------------------------- */

.hp-benefits { border-block: 1px solid var(--line); padding-block: 46px 35px; background: var(--paper-alt); }
.hp-benefits .hp-h2 { margin-bottom: 1.75rem; font-size: clamp(28px, 3vw, 40px); }
.hp-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.hp-benefit-card { border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: hidden; }
.hp-benefit-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hp-benefit-card figcaption { margin: 0; padding: 1.25rem 1.4rem; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.hp-benefit-note { margin-top: .9rem; font-size: 12px; text-align: right; }

/* ADU types -------------------------------------------------------------- */

.hp-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.hp-type-art { border-radius: 6px; background: var(--paper-alt); overflow: hidden; }
.hp-type-art img { width: 100%; height: auto; aspect-ratio: 380 / 205; }
.hp-type-text { padding: 1.4rem .2rem 0; }
.hp-type-text .hp-h3 { margin: .5rem 0 .6rem; }
.hp-type-text p:not(.hp-label) { max-width: 21rem; font-size: 15px; }

/* Property checker (forest) ---------------------------------------------- */

.hp-property { padding-block: 72px; background: var(--navy); }
.hp-property-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 5rem; align-items: center; }
.hp-property .hp-h2 { margin-bottom: 1.45rem; font-size: clamp(40px, 3.8vw, 56px); color: #fff; }
.hp-property .hp-h2 em { color: #c9dbae; }
.hp-property p { max-width: 27rem; color: #d2dfd4; }
.hp-property .boco-actions { margin-top: 1.6rem; }
.hp-property .hp-fine { margin-top: .9rem; font-size: 13px; color: #bed0c4; }
.hp-property .boco-actions + .hp-fine { margin-top: 1.1rem; }
.hp-property .hp-fine + .hp-fine { margin-top: .5rem; }

.hp-parcel { border-radius: 8px; background: #fff; box-shadow: 0 15px 40px rgb(9 35 25 / .2); overflow: hidden; }
.hp-parcel p { max-width: none; color: var(--text-muted); }
.hp-parcel-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 1.15rem 1.25rem; }
.hp-parcel-top .hp-label { color: var(--navy); font-size: 11px; }
.hp-parcel-top p:last-child { font-size: 12px; color: var(--text-subtle); }
.hp-parcel-art img { width: 100%; height: auto; aspect-ratio: 550 / 325; }
.hp-parcel-bottom { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 1.25rem; font-size: 13px; }
.hp-parcel-bottom .hp-dot::before { background: #5d8555; }

/* How we help: three steps ---------------------------------------------- */

.hp-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-bottom: 3rem; }
.hp-journey-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.hp-journey-step::before { content: ""; position: absolute; top: 24px; left: 64px; right: -20px; height: 1px; background: #c6d3c9; }
.hp-journey-step:last-child::before { right: 0; }
.hp-journey-step .hp-journey-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1.4rem;
	border: 1px solid #bacbbf;
	border-radius: 50%;
	font-size: 16px;
	color: var(--navy);
	background: var(--paper-alt);
}
.hp-h3.is-serif { min-height: 2.3em; margin-bottom: .9rem; font-family: var(--font-display); font-size: 27px; font-weight: 400; line-height: 1.15; letter-spacing: -.015em; }
.hp-journey-step p { font-size: 15px; }
.hp-journey-step .hp-journey-action { margin-top: auto; padding-top: .75rem; }
.hp-journey-action .hp-link { font-size: 14px; }
.hp-journey-secondary a { font-size: 13px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* How we help: the property plan ----------------------------------------- */

.hp-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; border: 1px solid var(--line); border-radius: 9px; padding: 3rem; background: var(--paper-alt); }
.hp-plan .hp-h2 { margin-bottom: 1.4rem; font-size: clamp(34px, 3vw, 42px); line-height: 1.08; }
.hp-plan-intro > p:not(.hp-eyebrow) { max-width: 27rem; font-size: 15px; }
.hp-report { max-width: 350px; margin-top: 1.75rem; }
.hp-report a { display: block; border-radius: 3px; box-shadow: 0 8px 25px rgb(23 56 46 / .07); transition: box-shadow .2s; }
.hp-report a:hover { box-shadow: 0 10px 30px rgb(23 56 46 / .15); }
.hp-report img { width: 100%; height: auto; aspect-ratio: 350 / 330; }
.hp-plan-intro .boco-dialog-open { margin-top: .75rem; }
.hp-plan-details .hp-h3 { margin-bottom: 1rem; font-size: 23px; }
.hp-plan-includes { margin-bottom: 1.4rem; }
.hp-plan-includes li { position: relative; border-top: 1px solid var(--line); padding: .95rem 0 .95rem 1.4rem; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.hp-plan-includes li:first-child { border-top: 0; }
.hp-plan-includes li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; font-weight: 700; color: var(--sage); }
.hp-plan-includes strong { display: block; margin-bottom: .15rem; color: var(--navy); }
.hp-credit { margin-bottom: 1.5rem; border-radius: 5px; padding: 1.05rem; background: #e5ece5; font-size: 14px; }
.hp-credit p + p { margin-top: .3rem; }
.hp-credit strong { color: var(--navy); }
.hp-plan-cta { margin-top: 0; }
.hp-plan-cta .boco-btn { justify-content: center; width: 100%; }
.hp-plan-note { margin-top: .8rem; font-size: 13px; }
.hp-terms { margin-top: 1.25rem; max-width: 65rem; font-size: 12px; }

/* Why Boco ADU ------------------------------------------------------------ */

.hp-why-section { border-top: 1px solid var(--line); }
.hp-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; counter-reset: hp-why; }
.hp-why-item { border-top: 2px solid var(--navy); padding-top: 1.25rem; counter-increment: hp-why; }
.hp-why-item::before { content: counter(hp-why, decimal-leading-zero); display: block; margin-bottom: .9rem; font-family: var(--font-display); font-size: 26px; line-height: 1; color: #6f8669; }
.hp-why-item .hp-h3 { margin-bottom: .6rem; }
.hp-why-item p { font-size: 15px; }

/* Lifestyle -------------------------------------------------------------- */

.hp-section.is-tight { padding-block: 0; }
.hp-living { display: grid; grid-template-columns: 1.13fr 1fr; align-items: stretch; }
.hp-living-img { position: relative; }
.hp-living-img img { width: 100%; height: 100%; min-height: 400px; max-height: 510px; object-fit: cover; border-radius: 6px 0 0 6px; }
.hp-living-img figcaption,
.hp-closing-img figcaption {
	position: absolute;
	bottom: 12px;
	left: 15px;
	border-radius: 3px;
	padding: 3px 8px;
	font-size: 12px;
	color: #fff;
	background: rgb(24 56 45 / .75);
}
.hp-living-copy { display: flex; flex-direction: column; justify-content: center; border-radius: 0 6px 6px 0; padding: 3.5rem; background: var(--paper-alt); }
.hp-living-copy .hp-h2 + p { margin: 1.5rem 0 .75rem; font-size: 16px; }

/* Guides ----------------------------------------------------------------- */

.hp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.hp-card { position: relative; border: 1px solid transparent; border-radius: 5px; padding: 1.9rem; background: var(--paper-alt); transition: border-color .2s; }
.hp-card:hover,
.hp-card:focus-within { border-color: #789175; }
.hp-card .hp-h3 { margin: 1.2rem 0 .8rem; }
.hp-card p { font-size: 15px; }
.hp-card-link { margin-top: 1.9rem; }
.hp-card-link a { font-size: 14px; font-weight: 700; color: var(--navy); }
.hp-card-link a::after { margin-left: .45em; }
.hp-card-link a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hp-card-link a:focus-visible { outline: none; }
.hp-card:has(a:focus-visible) { outline: 3px solid var(--amber-ink); outline-offset: 2px; }

/* FAQ -------------------------------------------------------------------- */

.hp-faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4.4rem; }
.hp-faq-item { border-bottom: 1px solid var(--line); }
.hp-faq-item summary {
	position: relative;
	display: block;
	padding: 1.2rem 2.5rem 1.2rem 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
	list-style: none;
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary::after { content: "+"; content: "+" / ""; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; }
.hp-faq-item[open] summary::after { content: "−"; content: "−" / ""; }
.hp-faq-item p { padding-bottom: 1.25rem; font-size: 15px; }
.hp-faq-item a { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }

/* Closing call to action ------------------------------------------------- */

.hp-section.is-closing { padding-block: 0 56px; }
.hp-closing { position: relative; min-height: 335px; border-radius: 7px; background: var(--navy); overflow: hidden; }
.hp-closing-img { position: absolute; inset: 0 0 0 auto; width: 48%; }
.hp-closing-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 48%, rgb(21 63 49 / 0) 85%); pointer-events: none; }
.hp-closing-img figcaption { left: auto; right: 15px; z-index: 2; }
.hp-closing-copy { position: relative; z-index: 1; max-width: 36rem; padding: 3.4rem; }
.hp-closing .hp-h2 { color: #fff; font-size: clamp(36px, 3.3vw, 47px); }
.hp-closing-copy .hp-h2 + p { margin: 1rem 0 1.5rem; color: #d4e1d4; }
.hp-closing .boco-actions { margin-top: 0; }

/* Dialog (boco/dialog) --------------------------------------------------- */

.boco-dialog-open { min-height: 44px; font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; }
.boco-dialog-open::after { content: " →"; content: " →" / ""; }
.boco-dialog-open:hover { color: var(--orange); }
.boco-dialog {
	width: calc(100% - 32px);
	max-width: 540px;
	margin: auto;
	border: 0;
	border-radius: 10px;
	padding: 2.4rem;
	color: var(--navy);
	background: #fff;
	box-shadow: 0 30px 90px rgb(0 0 0 / .2);
}
.boco-dialog::backdrop { background: rgb(12 39 28 / .8); }
.boco-dialog h2 { margin-bottom: 1.2rem; font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1.15; }
.boco-dialog p { margin-block: 1rem; font-size: 15px; color: var(--text-muted); }
.boco-dialog ul { margin: 1rem 0; padding-left: 1.2rem; list-style: disc; color: var(--text-muted); }
.boco-dialog li { font-size: 15px; }
.boco-dialog li + li { margin-top: .5rem; }
.boco-dialog .hp-eyebrow { margin-block: 0 1rem; }
.boco-dialog .hp-fine { border-radius: 4px; padding: .75rem; font-size: 13px; color: var(--text-subtle); background: var(--paper-alt); }
.boco-dialog-close { position: absolute; top: .4rem; right: .6rem; width: 44px; height: 44px; font-size: 30px; line-height: 1; color: var(--navy); cursor: pointer; }
html:has(.boco-dialog[open]) { overflow: hidden; }

/* The sample property plan (a wide dialog). */
.boco-dialog:has(.hp-sample-spread) { max-width: 980px; max-height: 90vh; overflow-y: auto; }
.hp-sample-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin: 1.5rem 0; }
.hp-sample-page { border: 1px solid var(--line); padding: 1.5rem; background: #fff; box-shadow: 0 5px 16px rgb(23 56 46 / .03); }
.boco-dialog .hp-sample-page h3 { margin: 1rem 0; font-family: var(--font-display); font-size: 25px; font-weight: 400; line-height: 1.2; }
.boco-dialog .hp-sample-page h4 { margin: 1.4rem 0 .6rem; font-size: 14px; font-weight: 700; }
.boco-dialog .hp-sample-page p,
.boco-dialog .hp-sample-page li { font-size: 14px; }
.boco-dialog .hp-sample-page ol { margin: .6rem 0; padding-left: 1.2rem; list-style: decimal; color: var(--text-muted); }
.hp-sample-art { margin: 1rem 0 .4rem; }
.hp-sample-art img { width: 100%; height: auto; aspect-ratio: 550 / 325; }
.boco-dialog .hp-sample-caption { margin: .4rem 0 0; font-size: 12px; color: var(--text-subtle); }
.hp-sample-review { margin-top: 1.4rem; padding: 1rem; background: var(--paper-alt); }
.boco-dialog .hp-sample-review p { margin: 0; }
.boco-dialog .hp-sample-review p + p { margin-top: .35rem; }

/* Services page (patterns/services.php) ------------------------------------ */

:is(.sv-hero, .sv-plan, .sv-compare-section, .sv-faq, .sv-precon) :is(.hp-h1, .hp-h2) em { color: inherit; }
.sv-hero { padding-block: 56px 64px; }
.sv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.sv-hero .hp-h1 { margin-bottom: 1.5rem; font-size: clamp(38px, 3.6vw, 52px); }
.sv-lead { max-width: 30rem; font-size: 18px; }
.sv-hero-img img { width: 100%; height: auto; border-radius: 7px; }
.sv-hero-img figcaption { padding-top: .6rem; font-size: 12px; text-align: right; color: var(--text-subtle); }

.sv-overview { padding-block: 0 72px; }
.sv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-step { padding: .5rem 2.25rem 0; }
.sv-step:first-child { padding-left: 0; }
.sv-step + .sv-step { border-left: 1px solid var(--line); }
.sv-step .hp-h3.is-serif { min-height: 0; margin: .5rem 0 .75rem; }
.sv-step > p:not([class]) { max-width: 20rem; font-size: 15px; }
.sv-tag { margin-top: 1.1rem; }
.sv-tag a { display: inline-flex; gap: .4rem; align-items: center; min-height: 32px; border-radius: 3px; padding: .2rem .65rem; font-size: 14px; font-weight: 700; color: var(--navy); background: #e0e8dc; text-decoration: underline; text-underline-offset: 2px; }
.sv-tag a:hover { background: #d3dece; }
.sv-credit-note { margin-top: .9rem; font-size: 14px; color: var(--sage); }

.sv-plan { padding-block: 84px; background: #edf1eb; }
.sv-plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.7rem; align-items: start; }
.sv-plan .hp-h2 { margin-bottom: 1.6rem; }
.sv-price-line { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.75rem; }
.sv-price-line .sv-price { border-right: 1px solid #b9c7b8; padding-right: 1.5rem; font-size: 40px; font-weight: 700; line-height: 1; color: var(--navy); }
.sv-price-line p:not(.sv-price) { font-size: 16px; color: var(--navy); }
.sv-credit { margin-bottom: 1.6rem; border-left: 4px solid var(--sage); padding: 1.1rem 1.3rem; background: #e0e8dc; font-size: 15px; }
.sv-credit p + p { margin-top: .45rem; }
.sv-credit strong { color: var(--navy); }
.sv-photo { position: relative; }
.sv-photo img { width: 100%; height: 315px; object-fit: cover; object-position: center 65%; border-radius: 5px; }
.sv-photo figcaption { padding-top: .6rem; font-size: 13px; color: var(--text-muted); }
.sv-photo figcaption em { position: absolute; left: 12px; bottom: calc(1.6rem + 26px); border-radius: 3px; padding: 3px 8px; font-size: 12px; font-style: normal; color: #fff; background: rgb(21 63 49 / .88); }
.sv-deliverables { display: grid; gap: 1.6rem; counter-reset: none; }
.sv-deliverable { position: relative; padding-left: 2.5rem; }
.sv-deliverable::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; top: .2rem; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: var(--sage); }
.sv-deliverable h3 { margin-bottom: .3rem; font-family: var(--font-display); font-size: 21px; font-weight: 400; line-height: 1.25; color: var(--navy); }
.sv-deliverable p { font-size: 15px; }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.sv-actions .boco-dialog-open { min-height: 48px; border: 1px solid var(--navy); border-radius: var(--radius-control); padding-inline: 1.4rem; font-size: 15px; background: #fff; }
.sv-actions .boco-dialog-open::after { content: none; }
.sv-actions .boco-dialog-open:hover { color: var(--navy); background: var(--paper-alt); }
.sv-fine { margin-top: 1.25rem; font-size: 13px; }
.boco-dialog:has(.sv-sample) { max-width: 760px; max-height: 90vh; overflow-y: auto; }
.sv-sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-block: 1rem; }
.boco-dialog .sv-sample h3 { margin: 1.1rem 0 .4rem; font-size: 15px; font-weight: 700; }

.sv-compare-section { padding-block: 72px; }
.sv-compare { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.sv-compare > :not(:first-child) { border-left: 1px solid var(--line); padding-left: 1.9rem; }
.sv-compare > :nth-child(2) { margin-left: 1.9rem; }
.sv-compare > :nth-child(3) { margin-left: 1.9rem; }
.sv-compare .hp-h3.is-serif { min-height: 0; margin-bottom: .6rem; font-size: 23px; }
.sv-compare p { font-size: 15px; }

.sv-precon { padding-block: 72px; color: #fff; background: var(--navy); }
.sv-precon-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.7rem; }
.sv-precon-grid > :last-child { border-left: 1px solid var(--navy-line); padding-left: 3rem; }
.sv-precon .hp-h2 { margin-bottom: 1.6rem; color: #fff; }
.sv-precon p { color: #d2dfd4; }
.sv-precon-intro { max-width: 26rem; font-size: 17px; }
.sv-network { max-width: 26rem; margin-top: 1.6rem; border-top: 1px solid var(--navy-line); padding-top: 1.4rem; font-size: 15px; }
.sv-precon .boco-actions { margin-top: 1.6rem; }
.sv-precon .sv-fine { color: #bed0c4; }
.sv-precon-credit { max-width: 27rem; margin-top: 1.4rem; border-left: 4px solid #7d9a80; padding: 1rem 1.2rem; background: rgb(255 255 255 / .06); font-size: 15px; }
.sv-workstreams { display: grid; gap: 2rem; counter-reset: sv-stream; }
.sv-workstream { position: relative; padding-left: 3rem; counter-increment: sv-stream; }
.sv-workstream::before { content: counter(sv-stream, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 28px; line-height: 1; color: #c9dbae; }
.sv-workstream h3 { margin-bottom: .4rem; font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.2; color: #fff; }
.sv-workstream p { font-size: 15px; }

.sv-closing { padding-block: 64px; background: #edf1eb; }
.sv-closing-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.sv-closing .hp-h2 { margin-bottom: .6rem; font-size: clamp(30px, 3vw, 42px); }
.sv-closing p { color: var(--text-muted); }
.sv-closing .boco-actions { margin-top: 0; flex: none; }

/* Site planner page (patterns/site-planner.php) -------------------------- */

/* The checker plugin ([boco_adu_feasibility]) draws its own title and
   intro line above the search; the page's H1 and lead replace them here.
   Its results and note sit on white below the pale hero band. */
.sp-hero { padding-block: 44px 0; background: #edf1eb; }
.sp-hero .hp-h1 { max-width: 15ch; font-size: clamp(38px, 3.6vw, 48px); }
.sp-lead { max-width: 36rem; margin-top: 1rem; font-size: 17px; }
.sp-coverage { max-width: 40rem; margin-top: .6rem; font-size: 14px; }
.sp-coverage a { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }
.sp-planner .bocoadu-title,
.sp-planner .bocoadu-lede { display: none; }
.sp-planner .bocoadu-intro { max-width: 640px; margin: 0; padding-block: 1.25rem 2.5rem; }
.sp-planner .bocoadu-field-label,
.sp-planner .bocoadu-search label { color: var(--navy); }
.sp-planner .bocoadu-result,
.sp-planner .bocoadu-disclaimer { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
.sp-planner .bocoadu-disclaimer { margin-top: 0; border-top: 0; padding-block: 1rem 2.5rem; }
.sp-next { background: #edf1eb; }
.sp-next .hp-h2 { margin-bottom: 2rem; font-size: clamp(30px, 3vw, 40px); }
.sp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.sp-step-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); }
.sp-step .hp-h3.is-serif { min-height: 0; margin: .5rem 0 .5rem; font-size: 23px; }
.sp-step p:not(.sp-step-label) { font-size: 15px; }

/* Wide screens ----------------------------------------------------------- */

@media (min-width: 1500px) {
	.hp-hero { padding-block: 44px 66px; }
	.hp-hero-copy { padding-right: 3rem; }
}

/* Tablets ---------------------------------------------------------------- */

@media (max-width: 1099px) {
	.hp-hero-grid { grid-template-columns: 46% 54%; }
	.hp-hero-copy { padding-right: 1.5rem; }
	.hp-actions { gap: .5rem 1rem; }
	.hp-property-grid { gap: 2.5rem; }
	.hp-journey { gap: 1.5rem; }
	.hp-h3.is-serif { font-size: 24px; }
	.hp-plan { gap: 2.25rem; padding: 2rem; }
	.hp-living-copy { padding: 2.2rem; }
	.hp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-hero-grid { gap: 2.5rem; }
	.sv-plan-grid,
	.sv-precon-grid { gap: 2.5rem; }
	.sv-step { padding-inline: 1.25rem; }
}

/* Phones ----------------------------------------------------------------- */

@media (max-width: 899px) {
	.hp-section { padding-block: 55px 50px; }
	.hp-head { display: block; margin-bottom: 1.75rem; }
	.hp-head > p { margin-top: 1.4rem; }
	.hp-hero { padding-block: 28px; }
	.hp-hero .hp-eyebrow { letter-spacing: .1em; }
	.hp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
	.hp-hero-copy { padding-right: 0; }
	.hp-text { max-width: none; font-size: 16px; }
	.hp-lead { font-size: 18px; }
	.hp-benefits { padding-block: 32px 26px; }
	.hp-benefit-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.hp-benefit-note { text-align: left; }
	.hp-types { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.hp-type { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 1.1rem; align-items: center; }
	.hp-type-text { padding: 0; }
	.hp-type-text .hp-h3 { font-size: 18px; }
	.hp-type-text p:not(.hp-label) { font-size: 14px; }
	.hp-type-text .hp-label { font-size: 11px; }
	.hp-property { padding-block: 50px; }
	.hp-property-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.hp-property p { max-width: none; }
	.hp-journey { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-bottom: 2.2rem; }
	.hp-journey-step { padding-left: 64px; }
	.hp-journey-step .hp-journey-num { position: absolute; top: 0; left: 0; margin: 0; }
	.hp-journey-step::before { top: 60px; bottom: -1.2rem; left: 24px; right: auto; width: 1px; height: auto; }
	.hp-journey-step:last-child::before { display: none; }
	.hp-h3.is-serif { min-height: 0; margin: .4rem 0 .7rem; font-size: 25px; }
	.hp-plan { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 1.75rem 1.4rem; }
	.hp-why { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.hp-sample-spread { grid-template-columns: minmax(0, 1fr); }
	.hp-sample-page { padding: 1.25rem; }
	.sv-hero { padding-block: 32px 40px; }
	.sv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.sv-overview { padding-block: 0 48px; }
	.sv-steps { grid-template-columns: minmax(0, 1fr); }
	.sv-step,
	.sv-step:first-child { padding: 1.5rem 0; }
	.sv-step + .sv-step { border-left: 0; border-top: 1px solid var(--line); }
	.sv-plan { padding-block: 52px; }
	.sv-plan-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.sv-photo img { height: 260px; }
	.sv-sample { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sv-compare-section { padding-block: 48px; }
	.sv-compare { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.sv-compare > :not(:first-child) { margin-left: 0; border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
	.sv-precon { padding-block: 52px; }
	.sv-precon-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.sv-precon-grid > :last-child { border-left: 0; border-top: 1px solid var(--navy-line); padding: 2.5rem 0 0; }
	.sv-closing { padding-block: 48px; }
	.sv-closing-row { flex-direction: column; align-items: flex-start; }
	.sp-hero { padding-top: 32px; }
	.sp-steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.hp-living { grid-template-columns: minmax(0, 1fr); }
	.hp-living-img img { height: auto; min-height: 0; aspect-ratio: 3 / 2; border-radius: 6px 6px 0 0; }
	.hp-living-copy { border-radius: 0 0 6px 6px; padding: 2rem 1.6rem; }
	.hp-cards { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.hp-card { padding: 1.5rem; }
	.hp-card-link { margin-top: 1.25rem; }
	.hp-faq { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.hp-section.is-closing { padding-block: 0 32px; }
	.hp-closing { min-height: 420px; }
	.hp-closing-img { width: 100%; }
	.hp-closing::after { background: linear-gradient(180deg, var(--navy) 5%, rgb(21 63 49 / .87) 52%, rgb(21 63 49 / .2)); }
	.hp-closing-copy { padding: 2rem 1.6rem; }
	.hp-closing-copy .hp-h2 + p { max-width: 17rem; }
	.boco-dialog { padding: 2rem 1.5rem; }
	.boco-dialog h2 { font-size: 30px; }
}

@media (max-width: 380px) {
	.hp-h1 { font-size: 40px; }
	.hp-actions .boco-btn { width: 100%; justify-content: space-between; }
	.hp-type { grid-template-columns: 38% minmax(0, 1fr); }
}