/**
 * See the layout specificity convention in
 * `components/content-bands-grids.css` -- every layout rule in this sheet is
 * canvas-prefixed with `:is(.entry-content, .editor-styles-wrapper)` so it
 * reaches (0,2,0) and beats Core's `body .is-layout-*` block-support output.
 */

/* Shared reference hero, trust-rail and proof geometry. Registration/enqueue is G-owned. */
.h-hero,
.lt-hero {
	box-sizing: border-box;
	background: var(--sq-white, #ffffff);
	border-bottom: 1px solid var(--sq-line3, #e6e2d6);
}

.h-hero {
	padding: 168px 48px 80px;
}

.lt-hero {
	padding: 168px 48px 76px;
}

.h-hero-inner,
.lt-inner,
.cs-inner,
.h-map,
.lt-map {
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	margin-right: auto;
	margin-left: auto;
}

:is(.entry-content, .editor-styles-wrapper) .h-hero-layout,
:is(.entry-content, .editor-styles-wrapper) .lt-hero-layout,
:is(.entry-content, .editor-styles-wrapper) .cs-hero-layout,
:is(.entry-content, .editor-styles-wrapper) .h-map-layout,
:is(.entry-content, .editor-styles-wrapper) .lt-map-layout{
	display: grid;
	align-items: stretch;
	gap: 56px;
}

:is(.entry-content, .editor-styles-wrapper) .h-hero-layout{
	grid-template-columns: 1.06fr 0.94fr;
	align-items: center;
}

:is(.entry-content, .editor-styles-wrapper) .lt-hero-layout{
	grid-template-columns: 1.14fr 0.86fr;
	align-items: center;
}

.cs-hero {
	box-sizing: border-box;
	padding: 28px 48px 72px;
	background: var(--sq-white, #ffffff);
	border-bottom: 1px solid var(--sq-line3, #e6e2d6);
}

:is(.entry-content, .editor-styles-wrapper) .cs-hero-layout{
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.h-hero-layout > .wp-block-column,
.lt-hero-layout > .wp-block-column,
.cs-hero-layout > .wp-block-column,
.h-map-layout > .wp-block-column,
.lt-map-layout > .wp-block-column {
	min-width: 0;
	margin: 0;
}

.h-hero-copy > .wp-block-heading,
.lt-hero-copy > .wp-block-heading,
.cs-hero-copy > .wp-block-heading {
	margin: 0;
	max-width: 18ch;
	color: var(--sq-ink, #17160f);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	letter-spacing: -0.024em;
	text-wrap: balance;
}

.h-hero-copy > .wp-block-heading {
	font-size: 60px;
	line-height: 1.02;
}

.lt-hero-copy > .wp-block-heading {
	font-size: 54px;
	line-height: 1.04;
}

.cs-hero-copy > .wp-block-heading {
	font-size: 48px;
	line-height: 1.05;
}

.h-hero-copy > .wp-block-paragraph,
.lt-hero-copy > .wp-block-paragraph,
.cs-hero-copy > .wp-block-paragraph {
	max-width: 540px;
	margin: 24px 0 0;
	color: var(--sq-body, #3f3d34);
	font-family: "Nunito Sans", sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.55;
}

.cs-hero-copy > .wp-block-paragraph {
	max-width: 520px;
	margin-top: 20px;
	font-size: 18px;
}

:is(.entry-content, .editor-styles-wrapper) .eyebrow-wrap{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}

.eyebrow-rule {
	width: 36px;
	height: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--sq-sage, #82b479);
}

.eyebrow-label {
	margin: 0;
	color: var(--sq-green, #3f6d3f);
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
}

:is(.entry-content, .editor-styles-wrapper) .h-hero-copy > .wp-block-buttons,
:is(.entry-content, .editor-styles-wrapper) .lt-hero-copy > .wp-block-buttons{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* AUTHORITY: every hero source component states its action row as
   `display:flex;flex-wrap:wrap;gap:14px;margin-top:32px` -- no
   `justify-content`, no auto margin, i.e. flex-start against the column's left
   edge, which is where the eyebrow, h1 and lede all sit.

   Stated explicitly because the shared `.r-cta` utility centres it:
   `:is(.entry-content, .editor-styles-wrapper) .r-cta`
   (`components/process-faq-related-cta.css:423`) sets `justify-content: center`
   and `margin: 30px auto 0`. That rule is written for the `.dark-cta` closing
   band -- every other rule in its block is `.dark-cta` scoped, that one is not
   -- and it loads 15th of 19, so it beat hero rules that declared no
   `justify-content` at all. Owner design review D2.

   SCOPED TO HERO COLUMNS ONLY, not fixed by rescoping the utility. A census of
   all 81 published pages found 166 `.r-cta` rows: 59 inside `.dark-cta` and 107
   outside, of which only 56 are hero rows. Rescoping the base rule to
   `.dark-cta .r-cta` would have un-centred ~48 closing and section CTAs
   (`lt-nearby`, `lt-close`, `lt-price`, `r-closing-inner`, `hl-hubs-inner`, the
   `/contact/` `c-alt` row) that are centred today and were never measured.
   Census by fix-kses; the narrow selector is theirs.

   The five classes named are the ones measured to host an `.r-cta` row:
   lt-hero-copy 52, and h-/g-/r-/rv-hero-copy 1 each. `.ab-hero-copy` and
   `.cs-hero-copy` host none and are deliberately not listed rather than
   included as dead selectors.

   Specificity 0-3-0 beats the utility's 0-1-0, so this does not depend on load
   order even though this file loads earlier. */
:is(.entry-content, .editor-styles-wrapper)
	:is(.h-hero-copy, .lt-hero-copy, .g-hero-copy, .r-hero-copy, .rv-hero-copy)
	> .wp-block-buttons.r-cta {
	justify-content: flex-start;
	margin-inline: 0;
}

.h-hero-copy .wp-block-button__link,
.lt-hero-copy .wp-block-button__link {
	box-sizing: border-box;
	min-height: 48px;
	padding: 17px 28px;
	border-radius: 0;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
}

/* Hero CTA colour is owned by `assets/css/components/cta-authority.css`. At
 * (0,3,0) these declarations lost to the vendored legacy `style.css` at
 * (0,6,0), which painted both hero buttons white-on-primary. Border WIDTH
 * stays here; border COLOUR moved with the rest of the palette. */
.h-hero-copy .wp-block-button.is-style-outline .wp-block-button__link,
.lt-hero-copy .wp-block-button.is-style-outline .wp-block-button__link {
	border-style: solid;
	border-width: 1px;
}

.h-hero-media,
.lt-hero-media,
.cs-hero-media {
	min-width: 0;
}

.h-hero-media > .wp-block-sequoia-projects,
.cs-hero-media > .wp-block-sequoia-projects {
	min-height: 0;
	aspect-ratio: 5 / 4;
	border: 1px solid var(--sq-line2, #dcd8cc);
	background: var(--sq-sand, #eee9dd);
	overflow: hidden;
}

.lt-hero-snapshot {
	box-sizing: border-box;
	padding: 30px 32px;
	border: 1px solid var(--sq-line, #e3dfd3);
	background: var(--sq-cream, #f6f4ee);
}

/* AUTHORITY: `LocationTemplate.dc.html` -- the hero's right column holds the
   snapshot card and NOTHING else, and the card alone carries the chrome
   (`border:1px solid #e3dfd3;background:#f6f4ee;padding:30px 32px`). The
   column itself has no border, no background and no min-height.
   
   Ours gave the column its own chrome as well: `border: 1px solid` +
   `min-height: 360px` (content-bands-grids.css:195) and `min-height: 420px` +
   cream background (components.css:14). Those are right for `.h-hero-media`
   and `.cs-hero-media`, which hold an IMAGE that fills the box. A card does
   not stretch, so on location pages the two same-coloured bordered boxes read
   as one card with ~138px of empty space below its last row -- which the owner
   reported as a missing section (design review E1). Measured: column 480.8px,
   card 341.8px, no other child, no images.
   
   Scoped with `:has()` so the image-bearing hero variants keep their box.
   Specificity 0-2-0 beats both source rules, which are `:where()`-wrapped and
   therefore zero, so this does not depend on load order. */
:where(.entry-content, .editor-styles-wrapper) .lt-hero-media:has(> .lt-hero-snapshot) {
	border: 0;
	background: none;
	min-height: 0;
	overflow: visible;
}

.lt-hero-snapshot-label,
.lt-hero-snapshot-unit,
.lt-hero-snapshot-row > .wp-block-paragraph {
	margin: 0;
	color: var(--sq-body, #3f3d34);
	font-family: "Nunito Sans", sans-serif;
}

.lt-hero-snapshot-label {
	margin-bottom: 18px;
	color: var(--sq-green, #3f6d3f);
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

.lt-hero-snapshot-lead {
	margin: 0;
	color: var(--sq-ink, #17160f);
	font-family: Montserrat, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
}

.lt-hero-snapshot-unit {
	margin-top: 6px;
	color: var(--sq-mute, #6b6860);
	font-size: 13px;
	line-height: 1.4;
}

:is(.entry-content, .editor-styles-wrapper) .lt-hero-snapshot-rows{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--sq-sand-warm, #e6dfcf);
}

:is(.entry-content, .editor-styles-wrapper) .lt-hero-snapshot-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sq-sand-warm, #e6dfcf);
}

.lt-hero-snapshot-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.lt-hero-snapshot-row > .wp-block-paragraph:first-child {
	font-size: 14px;
	line-height: 1.3;
}

.lt-hero-snapshot-row > .wp-block-paragraph:last-child {
	color: var(--sq-ink, #17160f);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: right;
}

:is(.entry-content, .editor-styles-wrapper) .lt-hero-proof-rail{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 36px;
}

.lt-hero-proof-label,
.lt-hero-proof-divider,
.h-trust-label,
.h-trust-divider {
	margin: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

.lt-hero-proof-label,
.h-trust-label {
	color: var(--sq-body, #3f3d34);
}

.lt-hero-proof-divider,
.h-trust-divider {
	color: var(--sq-sand-deep, #c3bdae);
}

:is(.entry-content, .editor-styles-wrapper) .cs-hero-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 28px;
}

.cs-hero-meta-item > .wp-block-paragraph {
	margin: 0;
}

.cs-hero-meta-label {
	margin-bottom: 6px !important;
	color: var(--sq-mute, #6b6860);
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.cs-hero-meta-value {
	color: var(--sq-ink, #17160f);
	font-family: Montserrat, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.h-map,
.lt-map {
	padding: 100px 0;
}

.lt-map {
	background: var(--sq-cream, #f6f4ee);
}

.h-map-intro,
.lt-map-intro {
	max-width: 740px;
	margin-bottom: 36px;
}

.h-map-intro > .wp-block-heading,
.lt-map-intro > .wp-block-heading {
	margin: 0;
	color: var(--sq-ink, #17160f);
	font-family: Montserrat, sans-serif;
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.06;
	text-wrap: balance;
}

.lt-map-intro > .wp-block-heading {
	font-size: 42px;
	line-height: 1.07;
}

.h-map-intro > .wp-block-paragraph,
.lt-map-intro > .wp-block-paragraph {
	margin: 20px 0 0;
	color: var(--sq-body, #3f3d34);
	font-family: "Nunito Sans", sans-serif;
	font-size: 18px;
	line-height: 1.55;
}

:is(.entry-content, .editor-styles-wrapper) .h-map-layout,
:is(.entry-content, .editor-styles-wrapper) .lt-map-layout{
	grid-template-columns: 1.4fr 0.9fr;
	gap: 24px;
}

:is(.entry-content, .editor-styles-wrapper) .lt-map-layout{
	grid-template-columns: 1.35fr 0.9fr;
}

.map-panel {
	min-height: 460px;
	border: 1px solid var(--sq-line2, #dcd8cc);
	background: var(--sq-mapbg, #e9e6dd);
}

/* The map is a fixed 480px-tall canvas (`ServiceTemplate.dc.html:107`,
 * min-height 480px) in a grid whose default `align-items` stretches both cells
 * to the row height. In the source that costs nothing -- its proof column is a
 * project card plus a short investment breakdown, so both cells land near 480.
 * The port's proof column also carries a reviews band and four detail rows, so
 * the stretched map cell painted a tall run of empty `--sq-mapbg` panel below
 * the map.
 *
 * REVERSED 2026-08-25 on the site owner's explicit instruction: "the desktop
 * map should match in height with the right card", and to hold "across the
 * board" wherever a map sits beside a card.
 *
 * The revert is safe now because the empty ground was never a layout fault. The
 * map cell WAS stretching; Leaflet simply did not repaint at the new size.
 * map-helpers.js called invalidateSize() once, 200ms after init, and never
 * again -- so any later growth of the cell (fonts, lazy images, the live
 * projects/reviews providers, or this very stretch) left Leaflet on a stale
 * height, painting tiles over the old area and background over the rest.
 * `align-self: start` removed the symptom by refusing the stretch.
 *
 * map-helpers.js now observes the container (keepSized()) and re-measures on
 * every resize, so a stretched cell is filled with real map instead of empty
 * panel, and the two columns end level as the owner asked. Below 900px the
 * layout is a single column and this is inert either way. */
.lt-map-layout .map-panel {
	min-height: 480px;
	align-self: stretch;
}

.map-panel > .wp-block-sequoia-projects-map {
	min-height: inherit;
}

.project-proof {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 460px;
	padding: 26px 28px;
	border: 1px solid var(--sq-line, #e3dfd3);
	background: var(--sq-cream, #f6f4ee);
}

/* The reference pins the CTA to the panel's bottom edge (home.html:258). */
.project-proof > .r-cta {
	margin-top: auto;
}

.lt-map .project-proof {
	background: var(--sq-white, #ffffff);
}

.project-proof > .wp-block-sequoia-projects {
	min-height: 0;
}

/* "Where the investment went" panel -- sequoia/projects, presentation
   `investment-breakdown`. Plain class selectors on purpose: `:where()` would
   land these at zero specificity and core block styles for p/h3 inside
   .entry-content would win. This file is on the --sq-* token set. */
.sq-invest__eyebrow {
	margin: 0 0 10px;
	color: var(--sq-green, #3f6d3f);
	font: 500 11px/1 "IBM Plex Mono", monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sq-invest__title {
	margin: 0;
	color: var(--sq-ink, #17160f);
	font: 700 24px/1.15 Montserrat, sans-serif;
	letter-spacing: -.01em;
}

.sq-invest__headline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

.sq-invest__range {
	color: var(--sq-ink, #17160f);
	font: 800 32px/1 Montserrat, sans-serif;
	letter-spacing: -.02em;
}

.sq-invest__caption {
	color: var(--sq-mute, #6b6860);
	font: 500 11px/1 "IBM Plex Mono", monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sq-invest__rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--sq-line3, #e6e2d6);
}

.sq-invest__label {
	margin: 0;
	color: var(--sq-mute, #6b6860);
	font: 500 10px/1 "IBM Plex Mono", monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sq-invest__row {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sq-invest__head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.sq-invest__name {
	color: var(--sq-ink, #17160f);
	font: 600 13px/1.25 "Nunito Sans", sans-serif;
}

.sq-invest__amount {
	color: var(--sq-green, #3f6d3f);
	font: 600 12px/1.2 "IBM Plex Mono", monospace;
	white-space: nowrap;
}

.sq-invest__track {
	height: 6px;
	overflow: hidden;
	background: #eee9dd;
}

.sq-invest__fill {
	height: 100%;
	background: var(--sq-sage, #82b479);
}

/* Once the Google canvas is live the a11y marker list is redundant; it stays
   visible whenever the map fails to initialise (view.js:190 sets the flag). */
.map-panel .sequoia-provider-map[data-map-ready="true"] .sequoia-provider-map__markers {
	display: none;
}

.map-panel .sequoia-provider-map__canvas {
	min-height: inherit;
}

/* map-helpers.js injects its own #seq-pill-css <style> at runtime, so it always
   lands after this sheet -- this needs the extra class to win on specificity
   rather than order, and must not be flattened to a single `.seq-pill`.
   Leaflet sizes the divIcon wrapper to 0x0 (iconSize [0,0]), and the pill is
   declared `display:block`, so it resolves to padding-only width and clips the
   label to "$". Shrink-to-fit restores the full "$415K" bubble. */
.leaflet-marker-icon .seq-pill {
	display: inline-block;
}

.project-proof-row {
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--sq-line3, #e6e2d6);
	color: var(--sq-body, #3f3d34);
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	line-height: 1.45;
}

.project-proof-row:first-of-type {
	margin-top: 20px;
	color: var(--sq-ink, #17160f);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

.lt-proof-sparse {
	box-sizing: border-box;
	margin-bottom: 22px;
	padding: 15px 20px;
	border-left: 5px solid var(--sq-sage, #82b479);
	border-top: 1px solid var(--sq-sage-tint, #d7e5d2);
	border-right: 1px solid var(--sq-sage-tint, #d7e5d2);
	border-bottom: 1px solid var(--sq-sage-tint, #d7e5d2);
	background: var(--sq-sage-wash, #eef3ec);
}

.lt-proof-sparse > .wp-block-paragraph {
	margin: 0;
	color: var(--sq-body, #3f3d34);
	font-family: "Nunito Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
}

:is(.entry-content, .editor-styles-wrapper) .lt-proof-filters{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}

:is(.entry-content, .editor-styles-wrapper) .lt-proof-filter{
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--sq-sage-tint, #d7e5d2);
	color: var(--sq-green, #3f6d3f);
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	:is(.entry-content, .editor-styles-wrapper) .h-hero-layout,
	:is(.entry-content, .editor-styles-wrapper) .lt-hero-layout,
	:is(.entry-content, .editor-styles-wrapper) .cs-hero-layout,
	:is(.entry-content, .editor-styles-wrapper) .h-map-layout,
	:is(.entry-content, .editor-styles-wrapper) .lt-map-layout{
		grid-template-columns: 1fr;
	}

	:is(.entry-content, .editor-styles-wrapper) .h-hero-layout,
	:is(.entry-content, .editor-styles-wrapper) .lt-hero-layout,
	:is(.entry-content, .editor-styles-wrapper) .cs-hero-layout{
		gap: 34px;
	}

	.h-map-layout,
	.lt-map-layout {
		gap: 24px;
	}

	.h-hero,
	.lt-hero,
	.cs-hero {
		padding-right: 32px;
		padding-left: 32px;
	}

	.h-hero-copy > .wp-block-heading {
		font-size: 50px;
	}

	.lt-hero-copy > .wp-block-heading {
		font-size: 48px;
	}

	.cs-hero-copy > .wp-block-heading {
		font-size: 44px;
	}

	.h-map,
	.lt-map {
		padding-right: 32px;
		padding-left: 32px;
	}
}

@media (max-width: 520px) {
	.h-hero,
	.lt-hero,
	.cs-hero {
		padding-right: 20px;
		padding-left: 20px;
	}

	.h-hero-copy > .wp-block-heading,
	.lt-hero-copy > .wp-block-heading,
	.cs-hero-copy > .wp-block-heading {
		font-size: 38px;
	}

	.h-hero-copy .wp-block-button__link,
	.lt-hero-copy .wp-block-button__link {
		padding-right: 20px;
		padding-left: 20px;
	}

	.h-trust {
		gap: 6px 14px;
	}

	.h-map,
	.lt-map {
		padding-right: 20px;
		padding-left: 20px;
	}

	.h-map-intro > .wp-block-heading,
	.lt-map-intro > .wp-block-heading {
		font-size: 36px;
	}

	.lt-hero-snapshot {
		padding: 24px 20px;
	}

	:is(.entry-content, .editor-styles-wrapper) .lt-hero-snapshot-row{
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.lt-hero-snapshot-row > .wp-block-paragraph:last-child {
		text-align: left;
	}

	.project-proof {
		padding: 22px 20px;
	}
}

/* ---------------------------------------------------------------------------
 * Paver flagship hero components.
 *
 * `.r-hero-copy` / `.r-hero-media` and every node inside them had ZERO rules in
 * any sheet in this theme -- the sibling heroes (`.h-hero-copy`,
 * `.lt-hero-copy`, `.cs-hero-copy`) are all covered above, this one was never
 * ported. The hero therefore rendered with Core's paragraph defaults: no
 * eyebrow rule, body-font credential labels stacked one per line, and CTA
 * buttons on their own rows.
 *
 * Every value below is transcribed from the source archive's rendered hero,
 * `reference-output/pages/paver-flagship.html:155-175`, which carries the
 * source's computed styles inline. Nothing here is invented; where the archive
 * and this theme's shared idiom agree (button metrics, media border colour) the
 * idiom's token is used instead of the literal.
 * ------------------------------------------------------------------------- */

.r-hero-copy > .wp-block-heading {
	margin: 0;
	color: var(--sq-ink, #17160f);
	font-family: Montserrat, sans-serif;
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -0.024em;
	line-height: 1.02;
	text-wrap: balance;
}

.r-hero-copy > .wp-block-paragraph {
	max-width: 480px;
	margin: 26px 0 0;
	color: var(--sq-body, #3f3d34);
	font-family: "Nunito Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.55;
}

:is(.entry-content, .editor-styles-wrapper) .r-hero-copy > .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.r-hero-copy .wp-block-button__link {
	box-sizing: border-box;
	min-height: 48px;
	padding: 17px 28px;
	border-radius: 0;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
}

/* The nearby link is a standalone paragraph, not part of the button row. */
:is(.entry-content, .editor-styles-wrapper) .r-hero-copy > .r-hero-nearby {
	max-width: none;
	margin: 18px 0 0;
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.r-hero-nearby > a {
	color: var(--sq-green, #3f6d3f);
	border-bottom: 1px solid rgba(63, 109, 63, .4);
	text-decoration: none;
}

/* Credential rail: one wrapping monospace line, not six paragraphs. Core's
 * flow spacing on the labels is zeroed for the same reason the trust band above
 * zeroes it -- `:root :where(.is-layout-flow) > *` ties this rule and wins on
 * order, which is what staggered the labels down the column. */
:is(.entry-content, .editor-styles-wrapper) .r-hero-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 40px;
}

:is(.entry-content, .editor-styles-wrapper) .r-hero-trust > * {
	margin: 0;
	color: var(--sq-body, #3f3d34);
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Archive `:172` -- the media column is a bordered, full-bleed frame that
 * stretches to the grid row, with the guarantee note pinned inside it rather
 * than floating beside the copy. */
:is(.entry-content, .editor-styles-wrapper) .r-hero-media {
	position: relative;
	align-self: stretch;
	box-sizing: border-box;
	min-width: 0;
	min-height: 520px;
	border: 1px solid var(--sq-line2, #dcd8cc);
	background: var(--sq-sand, #eee9dd);
	overflow: hidden;
}

:is(.entry-content, .editor-styles-wrapper) .r-hero-media > .r-hero-image {
	margin: 0;
	height: 100%;
}

.r-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:is(.entry-content, .editor-styles-wrapper) .r-hero-media > .r-hero-media-note {
	position: absolute;
	left: 18px;
	bottom: 18px;
	max-width: calc(100% - 36px);
	margin: 0;
	padding: 12px 16px 12px 14px;
	border-left: 4px solid var(--sq-sage, #82b479);
	background: var(--sq-ink, #17160f);
	color: var(--sq-white, #ffffff);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

@media (max-width: 900px) {
	.r-hero-copy > .wp-block-heading {
		font-size: 46px;
	}

	:is(.entry-content, .editor-styles-wrapper) .r-hero-media {
		min-height: 320px;
	}
}

@media (max-width: 520px) {
	.r-hero-copy > .wp-block-heading {
		font-size: 38px;
	}
}

/* SEQ-FIX-HEROMEDIA --------------------------------------------------------
 * The hero media slot is a 5:4 frame (526x421, matching the reference). The
 * provider serves a 4:3 photo, which under-filled it and left a band of bare
 * cream under the image. Let the image fill the frame and crop instead.
 * ------------------------------------------------------------------------ */
.h-hero-media-slot > .sequoia-provider-block,
.h-hero-media-slot .sequoia-provider-projects--hero {
	height: 100%;
}

.h-hero-media-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}