@charset "UTF-8";
/**
 * Florida One — theme.css
 * The hand-written layer that theme.json cannot express.
 *
 * Design source of truth (in order of authority):
 *   1. design/design-concepts/FO Homepage.dc.html
 *   2. design/design-concepts/FO Location Hub - Naples Mazda.dc.html
 *   3. design/design-concepts/FO Homepage - Mobile.dc.html
 *      design/design-concepts/FO Location Hub - Mobile.dc.html
 *   4. design/florida-one-design-spec.md  (Direction A — "The Ledger")
 *
 * RULES OBSERVED THROUGHOUT
 *   · No box-shadows. No border-radius above 2px. No gradients.
 *   · Section separation = 1px --fo-line hairline OR a ground change
 *     (ivory <-> parchment). Never an elevated card.
 *   · Transitions are colour-only, 150ms ease. Never transform/scale on hover.
 *   · Brass is for RULES, DECORATIVE NUMERALS and BORDERS only. Never for body
 *     copy, labels or small links on a light ground (3.2:1 — fails AA).
 *   · Every selector is scoped to a .fo-* class, a .wp-block-florida-one-*
 *     wrapper, or a third-party plugin namespace. No bare element selectors,
 *     so nothing here fights the block editor.
 *
 * Table of contents
 *   01  Tokens and local aliases
 *   02  Type primitives (label / numeral / measure / prose)
 *   03  Layout: containers, sections, grounds, splits, rules
 *   04  Accessibility: focus ring, skip link, visually hidden
 *   05  Buttons (design spec 6.2)
 *   06  Header — utility bar, masthead, nav, dropdown panels, language
 *   07  Mobile — hamburger, right-slide drawer, sticky click-to-call bar
 *   08  Media primitives — figures, image bands, hero
 *   09  Blocks: section-head
 *   10  Blocks: coverage-tiles / location-coverage
 *   11  Blocks: locations-map (container + pins)
 *   12  Blocks: locations-grid + location card  (see assets/css/map.css)
 *   13  Blocks: team-grid + person card + portrait plate
 *   14  Blocks: location-hero / manager / area / nearby
 *   15  Blocks: reviews
 *   16  Blocks: carrier-grid
 *   17  Blocks: faq
 *   18  Blocks: dealership-band
 *   19  Closing CTA band
 *   20  Footer
 *   21  Forms — Gravity Forms restyle (design spec 6.6)
 *   22  Editorial notes / placeholders
 *   23  prefers-reduced-motion
 */

/* ==========================================================================
   00 · BOX MODEL
   The one universal selector in this file, and it earns its place.

   Everything below was authored assuming border-box: `.fo-btn--block` and
   `.fo-actions .fo-btn` both set `width: 100%` on an element carrying
   `padding: 14px 28px` and a 1px border, and several rules size with
   `calc(100% - ...)`. Without this reset the browser default (content-box)
   makes that 100% mean "100% PLUS 58px", which is exactly how a 350px
   column produced a 412px button and 42px of horizontal page scroll on
   every phone. Found in live QA 2026-07-30.

   WordPress core block styles assume border-box too, so this aligns the
   theme with the blocks it renders rather than fighting them.
   ========================================================================== */

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

/* ==========================================================================
   01 · TOKENS AND LOCAL ALIASES
   Palette and type live in theme.json. These aliases only shorten the
   reference and add the handful of derived values the mockups use that are
   not palette entries (on-dark hairlines and on-dark secondary text).
   ========================================================================== */

:root {
	/* --- Palette (single-sourced from theme.json) --- */
	--fo-ink:         var(--wp--preset--color--ink, #12202D);
	--fo-navy:        var(--wp--preset--color--navy, #1C3350);
	--fo-navy-soft:   var(--wp--preset--color--navy-soft, #2E4A6B);
	--fo-brass:       var(--wp--preset--color--brass, #A6853F);
	--fo-brass-light: var(--wp--preset--color--brass-light, #C6A96B);
	--fo-ivory:       var(--wp--preset--color--ivory, #F8F5EF);
	--fo-parchment:   var(--wp--preset--color--parchment, #EFEAE0);
	--fo-line:        var(--wp--preset--color--line, #DDD5C7);
	--fo-stone:       var(--wp--preset--color--stone, #6B6760);
	--fo-body:        var(--wp--preset--color--body, #2A2E33);
	--fo-claret:      var(--wp--preset--color--claret, #7A2E2E);
	--fo-white:       var(--wp--preset--color--white, #FDFCFA);

	/* --- Derived: on-dark grounds (lifted from the approved mockups) --- */
	--fo-line-dark:      #34424E; /* hairline on ink   */
	--fo-line-dark-soft: #2A3846; /* footer bottom rule */
	--fo-on-dark:        #C7C2B6; /* body copy on ink  — 9.9:1 */
	--fo-on-dark-soft:   #9EA7AF; /* secondary on ink  — 7.2:1 */
	--fo-on-dark-quiet:  #7E8B95; /* legal line on ink — 5.0:1 */
	--fo-on-dark-label:  #E4DDD0; /* utility bar label on ink */
	--fo-on-dark-lede:   #DED8CB; /* hero lede over the ink scrim */
	--fo-on-dark-rule:   rgba(248, 245, 239, 0.6); /* on-dark button border */

	/* --- Type families --- */
	--fo-font-display: var(--wp--preset--font-family--display, "EB Garamond", Georgia, "Times New Roman", serif);
	--fo-font-body:    var(--wp--preset--font-family--body, "Source Serif 4", Georgia, serif);
	--fo-font-ui:      var(--wp--preset--font-family--ui, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--fo-font-mono:    ui-monospace, Menlo, Consolas, monospace;

	/* --- Type sizes: fluid 1440 -> 390, matching the two mockup widths --- */
	--fo-fs-display: var(--wp--preset--font-size--display, clamp(2.625rem, 1.929rem + 2.857vw, 4.5rem));
	--fo-fs-h1:      var(--wp--preset--font-size--h-1, clamp(2.125rem, 1.614rem + 2.095vw, 3.5rem));
	--fo-fs-h2:      var(--wp--preset--font-size--h-2, clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem));
	--fo-fs-h3:      var(--wp--preset--font-size--h-3, clamp(1.3125rem, 1.196rem + 0.476vw, 1.625rem));
	--fo-fs-h4:      var(--wp--preset--font-size--h-4, 1.1875rem);
	--fo-fs-body-lg: var(--wp--preset--font-size--body-lg, clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem));
	--fo-fs-body:    var(--wp--preset--font-size--body, clamp(1rem, 0.977rem + 0.095vw, 1.0625rem));
	--fo-fs-small:   var(--wp--preset--font-size--small, 0.9375rem);
	--fo-fs-label:   var(--wp--preset--font-size--label, 0.6875rem);
	--fo-fs-numeral: var(--wp--preset--font-size--numeral, 0.8125rem);

	/* --- Layout --- */
	--fo-content:   1160px;
	--fo-wide:      1320px;
	--fo-gutter:    64px;  /* outer margin */
	--fo-section-y: 128px; /* section padding, vertical */
	--fo-gap:       88px;  /* asymmetric split gap */

	/* The schematic map's landscape. Osi, 2026-08-04: "static maps need color
	   (blue for the gulf and water, green, etc)". Muted to sit inside the
	   ivory/parchment world — flat fills, no gradients, per the design law.
	   Read by assets/css/map.css. */
	--fo-map-land:  #DFE4D1;  /* palmetto, a quiet green for the two counties */
	--fo-map-water: #C6D8DF;  /* the Gulf, a grey-blue that stays background */
	--fo-map-coast: #9FB7C0;  /* the shoreline stroke, a step deeper */
	--fo-gap-cards: 24px;

	/* --- Motion --- */
	--fo-ease: 150ms ease;

	/* --- Component metrics --- */
	--fo-utility-h: 40px;
	--fo-masthead-h: 88px;
	--fo-hero-h: 748px;
	--fo-field-h: 48px;
	/* Height of the mobile sticky call bar. Third-party overlays are offset by
	   this so they cannot bury it (see section 07). */
	--fo-callbar-h: 61px;
}

@media (max-width: 1200px) {
	:root {
		--fo-gutter: 40px;
		--fo-section-y: 104px;
		--fo-gap: 64px;
	}
}

@media (max-width: 992px) {
	:root {
		--fo-section-y: 88px;
		--fo-gap: 56px;
	}
}

@media (max-width: 768px) {
	:root {
		--fo-gutter: 20px;
		--fo-section-y: 64px;
		--fo-gap: 40px;
		--fo-masthead-h: 64px;
		--fo-utility-h: 34px;
		--fo-hero-h: 568px;
		--fo-gap-cards: 20px;
	}
}

/* ==========================================================================
   02 · TYPE PRIMITIVES
   ========================================================================== */

/* Label / eyebrow — 11px Inter, uppercase, .14em, stone (4.9:1 on ivory).
   `margin: 0` is load-bearing, not tidiness: the dynamic blocks emit these as
   <p> and <dt>, the theme has no bare-element reset, and a stray 1em UA margin
   under every label pulls the whole hub off the mockup's rhythm. Components
   that want space below a label declare margin-bottom themselves. */
.fo-label,
.fo-eyebrow {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0;
}

.fo-label--ink { color: var(--fo-ink); }
.fo-label--navy { color: var(--fo-navy); }

/* On-dark label variants only. Brass-light on ink is 7.7:1. */
.fo-label--on-dark { color: var(--fo-on-dark-label); }
.fo-label--accent-on-dark { color: var(--fo-brass-light); }

/* Decorative numeral — 13px EB Garamond, .18em, brass.
   DISPLAY CONTEXT ONLY. Always aria-hidden and always outside the heading
   text so it never pollutes the accessible name (technical spec 4.3). */
.fo-numeral {
	display: block;
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--fo-brass);
	font-variant-numeric: lining-nums;
}

.fo-numeral--inline { display: inline-block; }
.fo-numeral--on-dark { color: var(--fo-brass-light); }

/* Measure caps. */
.fo-measure { max-width: 68ch; }
.fo-measure--intro { max-width: 54ch; }
.fo-measure--tight { max-width: 52ch; }

/* Serif prose stack used inside dynamic blocks. */
.fo-prose {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.7;
	color: var(--fo-body);
	max-width: 68ch;
}

.fo-prose > * + * { margin-top: 20px; }
.fo-prose > :first-child { margin-top: 0; }

.fo-lede {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-body);
	max-width: 54ch;
	margin: 0;
}

.fo-small {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-body);
}

/* Display numerals — phone numbers set as type, old-style figures off. */
.fo-figure-number {
	font-family: var(--fo-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.01em;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--fo-ink);
}

/* Page title.

   `wp:post-title` renders a bare <h1 class="wp-block-post-title">, and until
   now nothing in this file or theme.json touched it, so every page that falls
   through to templates/page.html — terms, privacy and the legacy adopted
   pages — printed its <h1> at body size in EB Garamond 400. It read as a
   stray line of prose rather than a title. Found in live QA 2026-07-30.

   The interior pages that compose their own opening (reviews, coverage, faqs,
   accessibility) get their <h1> from the section-head block instead and never
   render this one. */
.fo-h1,
.wp-block-post-title {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h1);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--fo-ink);
	margin: 0;
	text-wrap: balance;
}

/* Section headings rendered inside dynamic blocks. */
.fo-h2 {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h2);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fo-ink);
	margin: 0;
	text-wrap: balance;
}

.fo-h3 {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--fo-ink);
	margin: 0;
}

/* ==========================================================================
   03 · LAYOUT — containers, sections, grounds, splits, rules
   ========================================================================== */

.fo-container {
	max-width: var(--fo-wide);
	margin-inline: auto;
	width: 100%;
}

.fo-container--narrow { max-width: var(--fo-content); }

/* Reading measure for prose-only pages (terms, privacy, adopted legacy body
   copy). --fo-content is 1160px, which is a LAYOUT width: it is correct for a
   grid of cards and far too wide for a single column of text, which then sat
   as a 68ch ribbon against the left edge of a 1160px box. This caps the
   container itself so the column is centred and the page reads deliberately. */
.fo-container--prose { max-width: 78ch; }

.fo-section {
	padding: var(--fo-section-y) var(--fo-gutter);
}

.fo-section--flush-top { padding-top: 0; }
.fo-section--flush-bottom { padding-bottom: 0; }
.fo-section--tight { padding-block: calc(var(--fo-section-y) * 0.65); }

/* Grounds. A ground change is a legitimate section separator. */
.fo-ground-ivory { background-color: var(--fo-ivory); }
.fo-ground-white { background-color: var(--fo-white); }

.fo-ground-parchment {
	background-color: var(--fo-parchment);
	border-top: 1px solid var(--fo-line);
	border-bottom: 1px solid var(--fo-line);
}

.fo-ground-ink {
	background-color: var(--fo-ink);
	color: var(--fo-on-dark);
}

.fo-ground-navy {
	background-color: var(--fo-navy);
	color: var(--fo-on-dark);
}

/* Hairlines — the only permitted separator. */
/* width:100% is doing real work here, not padding the rule out.
   .fo-hairline is applied to core's separator block, and core ships
   `.wp-block-separator { width: 100px }` for the short centred default. The
   theme set the colour and the height and never the width, so every hairline
   on the site rendered as a 100px stub: measured 100px inside a 1297px column
   on /quote/, and it is the same short line sitting under the page title on
   /terms/ and /privacy/. Seven templates use this class. Found 2026-08-03.
   The deliberate short variants below still win, since they follow. */
/* UPDATE 2026-08-04. The width above is not enough on its own, and the reason
   is worth writing down because it caught two builds in a row.

   Core does not ship a plain `.wp-block-separator{width:100px}`. It ships
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}`,
   which scores (0,3,0) — three class selectors. A bare `.fo-hairline` is
   (0,1,0) and `hr.fo-hairline` is only (0,1,1), so BOTH lose, and no amount of
   source order helps: core's block stylesheet is printed per block, and for a
   separator inside post_content it lands after the theme's.

   Measured 100px inside a 1297px column on the rebuilt /about/ masthead.
   Matching core's shape puts this at (0,3,1) and settles it everywhere. The
   deliberate short variants below repeat the same shape so they still win. */
hr.fo-hairline:not(.is-style-dots),
.wp-block-separator.fo-hairline:not(.is-style-wide):not(.is-style-dots),
.fo-hairline {
	display: block;
	width: 100%;
	height: 1px;
	border: 0;
	background-color: var(--fo-line);
	margin: 0;
}

.fo-hairline--brass { background-color: var(--fo-brass); }
.fo-hairline--dark { background-color: var(--fo-line-dark); }
hr.fo-hairline--short:not(.is-style-dots),
.wp-block-separator.fo-hairline--short:not(.is-style-wide):not(.is-style-dots),
.fo-hairline--short { width: 60%; }
hr.fo-hairline--stub:not(.is-style-dots),
.wp-block-separator.fo-hairline--stub:not(.is-style-wide):not(.is-style-dots),
.fo-hairline--stub { width: 32px; }
hr.fo-hairline--stub-wide:not(.is-style-dots),
.wp-block-separator.fo-hairline--stub-wide:not(.is-style-wide):not(.is-style-dots),
.fo-hairline--stub-wide { width: 64px; }

.fo-rule-top { border-top: 1px solid var(--fo-line); }
.fo-rule-bottom { border-bottom: 1px solid var(--fo-line); }

/* Asymmetric splits. 7/5 and 8/4 are the house grids; centred is the
   exception, never the default. */
.fo-split {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--fo-gap);
	align-items: start;
}

.fo-split--5-7 { grid-template-columns: 5fr 7fr; }
.fo-split--8-4 { grid-template-columns: 8fr 4fr; }
.fo-split--4-8 { grid-template-columns: 4fr 8fr; }
.fo-split--6-6 { grid-template-columns: 6fr 6fr; }
.fo-split--offset { grid-template-columns: 1fr 4fr 6fr; gap: 56px; }
.fo-split--centre { align-items: center; }

/* Bottom-aligned. The coverage hero pairs a display heading with a spec panel,
   and the comp settles them on a shared baseline rather than a shared top edge:
   the two columns are different heights and aligning their tops leaves the
   panel floating. Added 2026-08-03 with the coverage comp. */
.fo-split--end { align-items: end; }

/* Quote-page hero aside. The comp pairs the heading with a telephone panel
   rather than leaving the right column empty, which is what makes the hero read
   as composed instead of as a heading with space after it. Right-aligned and
   optically settled against the H1 baseline rather than the top of the column,
   so the two halves relate. Added 2026-08-03. */
.fo-quote-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 6px;
	border-left: 1px solid var(--fo-line);
	padding-left: 40px;
}

.fo-quote-hero__phone {
	margin-top: 14px;
	font-size: var(--fo-fs-h2);
	line-height: 1.05;
	color: var(--fo-ink);
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-quote-hero__phone:hover,
.fo-quote-hero__phone:focus-visible { color: var(--fo-navy); }

.fo-quote-hero__meta {
	margin-top: 10px;
	margin-bottom: 20px;
	color: var(--fo-stone);
}

/* The rule is a column divider, so it goes when the columns do. */
@media (max-width: 992px) {
	.fo-quote-hero__aside {
		padding-top: 28px;
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--fo-line);
	}
}

@media (max-width: 992px) {
	.fo-split,
	.fo-split--5-7,
	.fo-split--8-4,
	.fo-split--4-8,
	.fo-split--6-6 {
		grid-template-columns: 1fr;
	}

	.fo-split--offset {
		grid-template-columns: 4fr 6fr;
	}

	.fo-split--offset > .fo-split__spacer { display: none; }
}

@media (max-width: 768px) {
	.fo-split--offset { grid-template-columns: 1fr; }
}

/* A pair of section-head rows used across the mockups. */
.fo-headrow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 64px;
}

.fo-headrow--baseline { align-items: baseline; margin-bottom: 72px; }

/* THE SENTENCE VARIANT. Per the 2026-08-04 comps, several sections put a full
   sentence opposite the heading rather than a tracked-out label. It hangs from
   the heading's last baseline, is capped near 44ch so it never runs the width
   of the container, and takes the muted body colour so the heading still wins.
   See fo_render_section_head() in blocks/section-head.php. */
/* THE SENTENCE SITS ON THE HEADING'S BASELINE, ABOVE A BRASS RULE. The comps
   draw this row with `align-items:flex-end` and a `border-bottom` under both
   halves, and the rule is what does the work: without it the sentence floats
   opposite the heading with nothing tying the two together, which is what Osi
   flagged on the carrier and "people being named" sections (2026-08-04).

   flex-end also has to beat `.fo-headrow--baseline`, which every one of these
   also carries — same specificity, so this must stay AFTER it in the file. */
.fo-headrow--lede {
	align-items: flex-end;
	border-bottom: 1px solid var(--fo-brass);
	padding-bottom: 26px;
	margin-bottom: 40px;
}

/* The lede's last line drops onto the rule with the heading's descenders, so
   it takes a little breathing room the heading does not need. */
.fo-headrow--lede .fo-section-head__lede { padding-bottom: 4px; }

.fo-section-head__lede {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.7;
	color: var(--fo-stone);
	margin: 0;
	max-width: 44ch;
	flex: 0 1 auto;
}

.fo-section-head__lede--on-dark { color: var(--fo-on-dark); }

@media (max-width: 768px) {
	.fo-headrow,
	.fo-headrow--baseline,
	.fo-headrow--lede {
		display: block;
		margin-bottom: 40px;
	}

	.fo-headrow > * + * { margin-top: 20px; }
}

/* ==========================================================================
   04 · ACCESSIBILITY — focus ring, skip link, visually hidden
   The focus ring is a 2px brass outline with 2px offset. It is an outline,
   not a glow: no blur, no shadow, no colour wash.
   ========================================================================== */

/* Scoped by an explicit fo- class prefix match — `[class*="fo-"]` would also
   catch unrelated names such as "info-box", so the two-part match is used. */
[class^="fo-"] :focus-visible,
[class*=" fo-"] :focus-visible,
[class^="wp-block-florida-one-"] :focus-visible,
[class*=" wp-block-florida-one-"] :focus-visible,
a[class^="fo-"]:focus-visible,
a[class*=" fo-"]:focus-visible,
button[class^="fo-"]:focus-visible,
button[class*=" fo-"]:focus-visible,
.fo-btn:focus-visible,
.fo-skip-link:focus-visible {
	outline: 2px solid var(--fo-brass);
	outline-offset: 2px;
	border-radius: 0;
}

/* On ink and navy grounds the ring switches to brass-light for the same
   3:1 non-text contrast requirement. */
.fo-ground-ink :focus-visible,
.fo-ground-navy :focus-visible,
.fo-footer :focus-visible,
.fo-band :focus-visible,
.fo-cta :focus-visible,
.fo-utility :focus-visible {
	outline-color: var(--fo-brass-light);
}

.fo-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 14px 24px;
	background-color: var(--fo-navy);
	color: var(--fo-ivory);
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
}

.fo-skip-link:focus,
.fo-skip-link:focus-visible {
	left: 12px;
	top: 12px;
}

.fo-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   05 · BUTTONS — design spec 6.2, five variants
   2px radius. Colour-only 150ms transitions. Never a transform.
   ========================================================================== */

.fo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: transparent;
	transition: background-color var(--fo-ease), color var(--fo-ease),
		border-color var(--fo-ease);
}

/* Primary — navy fill, ivory text (11.8:1). Quote CTAs. */
.fo-btn--primary {
	background-color: var(--fo-navy);
	border-color: var(--fo-navy);
	color: var(--fo-ivory);
}

.fo-btn--primary:hover,
.fo-btn--primary:focus-visible {
	background-color: var(--fo-brass);
	border-color: var(--fo-brass);
	color: var(--fo-ink);
}

/* Brass — brass fill, ink text (5.0:1). One per page maximum, hero only. */
.fo-btn--brass {
	background-color: var(--fo-brass);
	border-color: var(--fo-brass);
	color: var(--fo-ink);
	font-weight: 600;
	padding: 15px 30px;
}

.fo-btn--brass:hover,
.fo-btn--brass:focus-visible {
	background-color: var(--fo-navy);
	border-color: var(--fo-navy);
	color: var(--fo-ivory);
}

/* Secondary — transparent, 1px ink border. Contact, Directions. */
.fo-btn--secondary {
	border-color: var(--fo-ink);
	color: var(--fo-ink);
}

.fo-btn--secondary:hover,
.fo-btn--secondary:focus-visible {
	background-color: var(--fo-ink);
	color: var(--fo-ivory);
}

/* Ghost — inline text link, navy with a brass underline. */
.fo-btn--ghost {
	min-height: 0;
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid var(--fo-brass);
	border-radius: 0;
	color: var(--fo-navy);
	background-color: transparent;
}

.fo-btn--ghost:hover,
.fo-btn--ghost:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-ink);
}

/* On dark — transparent, 1px ivory border. Dark sections only. */
.fo-btn--on-dark {
	border-color: var(--fo-on-dark-rule);
	color: var(--fo-ivory);
}

.fo-btn--on-dark:hover,
.fo-btn--on-dark:focus-visible {
	background-color: var(--fo-ivory);
	border-color: var(--fo-ivory);
	color: var(--fo-ink);
}

.fo-btn--block { display: flex; width: 100%; }

/* A brass-outlined marker chip (Habla Español, routing notes).
   Border is brass; the TEXT is ink so it clears AA at 10px. */
.fo-chip {
	display: inline-block;
	margin: 0;
	padding: 6px 11px;
	border: 1px solid var(--fo-brass);
	border-radius: 0;
	font-family: var(--fo-font-ui);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-ink);
	background-color: transparent;
}

.fo-chip--on-dark {
	border-color: var(--fo-brass-light);
	color: var(--fo-ivory);
}

/* Row of buttons. */
.fo-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

@media (max-width: 560px) {
	:root {
		/*
		 * 568px of hero on a 560px-wide phone is a full screen of photograph
		 * before any words appear. 440px keeps the headline and both CTAs
		 * above the fold on a 667px viewport (iPhone SE) once the 40px utility
		 * bar and 64px masthead are accounted for.
		 */
		--fo-hero-h: 440px;
	}

	.fo-actions { flex-direction: column; align-items: stretch; gap: 12px; }
	.fo-actions .fo-btn { width: 100%; min-height: 52px; }
	.fo-actions .fo-btn--ghost { width: auto; min-height: 0; align-self: flex-start; }
}

/* ==========================================================================
   06 · HEADER — two-tier, sticky on the second tier only
   ========================================================================== */

.fo-header {
	position: relative;
	z-index: 30;
	background-color: var(--fo-ivory);
}

/* --- Tier one: ink utility bar, 40px, scrolls away --- */
.fo-utility {
	background-color: var(--fo-ink);
	color: var(--fo-on-dark-label);
}

.fo-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--fo-utility-h);
	padding-inline: var(--fo-gutter);
}

.fo-utility__lines,
.fo-utility__links {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-on-dark-label);
}

.fo-utility__links {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fo-utility__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-utility__link:hover,
.fo-utility__link:focus-visible { color: var(--fo-brass-light); }

.fo-utility__link--accent { color: var(--fo-brass-light); }
.fo-utility__link--accent:hover,
.fo-utility__link--accent:focus-visible { color: var(--fo-ivory); }

@media (max-width: 992px) {
	.fo-utility__lines { display: none; }
	.fo-utility__inner { justify-content: center; }
}

@media (max-width: 768px) {
	.fo-utility__inner { justify-content: center; }
	.fo-utility__links { gap: 20px; font-size: 0.625rem; }
}

/* --- Tier two: ivory masthead, 88px, sticky --- */
.fo-masthead {
	position: sticky;
	top: 0;
	z-index: 25;
	background-color: var(--fo-ivory);
	border-bottom: 1px solid var(--fo-line);
}

.admin-bar .fo-masthead { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .fo-masthead { top: 0; }
}

.fo-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--fo-masthead-h);
	padding-inline: var(--fo-gutter);
}

.fo-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.fo-logo img,
.fo-logo svg {
	display: block;
	height: 46px;
	width: auto;
}

@media (max-width: 768px) {
	.fo-logo img,
	.fo-logo svg { height: 34px; }
}

.fo-header__actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex: 0 0 auto;
}

/* --- Primary navigation --- */
.fo-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fo-nav__item { position: relative; }

.fo-nav__link,
.fo-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-ink);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--fo-ease), border-color var(--fo-ease);
}

.fo-nav__link:hover,
.fo-nav__link:focus-visible,
.fo-nav__toggle:hover,
.fo-nav__toggle:focus-visible,
.fo-nav__item.is-open > .fo-nav__toggle,
.fo-nav__toggle[aria-expanded="true"] {
	border-bottom-color: var(--fo-brass);
}

.fo-nav__link[aria-current],
.fo-nav__link.is-current,
.fo-nav__item.current-menu-item > .fo-nav__link,
.fo-nav__item.current-menu-ancestor > .fo-nav__link {
	border-bottom-color: var(--fo-brass);
}

/* Caret — a 5px rotated corner, matching the mockup exactly. */
.fo-nav__caret {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-right: 1px solid var(--fo-stone);
	border-bottom: 1px solid var(--fo-stone);
	transform: rotate(45deg);
	margin: 0 0 3px 0;
	flex: 0 0 auto;
	transition: border-color var(--fo-ease);
}

.fo-nav__link:hover .fo-nav__caret,
.fo-nav__toggle:hover .fo-nav__caret,
.fo-nav__toggle[aria-expanded="true"] .fo-nav__caret,
.fo-nav__item.is-open .fo-nav__caret {
	border-right-color: var(--fo-brass);
	border-bottom-color: var(--fo-brass);
}

/* --- Dropdown panel: NO shadow. White ground, 1px line border,
       2px brass top rule. --- */
.fo-nav__panel {
	position: absolute;
	top: calc(100% + 22px);
	/*
	 * Anchored to the trigger's left edge, NOT centred on it.
	 *
	 * `left:50%; transform:translateX(-50%)` centres the panel under its nav
	 * item, which is fine only while the nav sits mid-page. The moment the nav
	 * shifts left — which is exactly what happens when the site logo is absent,
	 * as it was on the first staging deploy — the leftmost panel is centred on
	 * an item near x=0 and half of it renders at negative x, off the viewport.
	 * Measured at -90px before this change: the Coverage panel was clipped and
	 * read as "the mega menu isn't showing".
	 *
	 * Left-anchoring cannot overflow leftwards, and both dropdown triggers sit
	 * on the left half of the nav so it cannot overflow rightwards either. The
	 * max-width is a final guard for narrow viewports.
	 */
	left: 0;
	transform: none;
	z-index: 26;
	min-width: 320px;
	max-width: min(720px, calc(100vw - 48px));
	padding: 32px 36px 28px;
	background-color: var(--fo-white);
	border: 1px solid var(--fo-line);
	border-top: 2px solid var(--fo-brass);
	border-radius: 0;
	box-shadow: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--fo-ease), visibility var(--fo-ease);
}

.fo-nav__item:hover > .fo-nav__panel,
.fo-nav__item:focus-within > .fo-nav__panel,
.fo-nav__item.is-open > .fo-nav__panel,
.fo-nav__toggle[aria-expanded="true"] + .fo-nav__panel {
	visibility: visible;
	opacity: 1;
}

/* An invisible bridge so the pointer can travel from the nav item to the
   panel without the panel closing. Not a visual element. */
.fo-nav__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -24px;
	height: 24px;
}

.fo-nav__panel--locations {
	/*
	 * min-width beats max-width in CSS, so a flat 620px here would override the
	 * `max-width: min(720px, calc(100vw - 48px))` guard on .fo-nav__panel and
	 * push the panel off-screen on any viewport under ~670px. The min() wrapper
	 * is what lets it collapse instead.
	 *
	 * The second argument must be a VIEWPORT length, not a percentage. This
	 * read `min(620px, 100%)`, and for an absolutely positioned element a
	 * percentage resolves against the containing block, which here is the
	 * `.fo-nav__item` holding the trigger: 90px wide. So the whole expression
	 * evaluated to 90px, the min-width did nothing at all, and the panel fell
	 * back to shrink-to-fit at 375px with 141px/103px columns. That is why
	 * "Naples Chrysler Dodge Jeep Ram" was setting one word per line.
	 * Found in live QA 2026-07-30.
	 *
	 * 700px, not the original 620px, because the box model changed underneath
	 * this rule. It was authored against content-box, where 620px meant 620px
	 * of CONTENT; with the border-box reset now in section 00 the same number
	 * would mean 620px INCLUDING the 80px of horizontal padding. 700px
	 * restores exactly the 620px measure the panel was designed with, and
	 * stays under the 720px max-width guard above.
	 */
	min-width: min(700px, calc(100vw - 48px));
	padding: 34px 40px 30px;
}

.fo-panel__grid {
	display: grid;
	/* minmax(0, 1fr), not 1fr. A bare 1fr floors each track at its content's
	   min-content width, so the column holding "Naples Chrysler Dodge Jeep Ram"
	   pushed itself wider than its neighbour and the two groups stopped lining
	   up: 141px against 103px. minmax(0, …) lets a track be narrower than its
	   longest word and keeps the halves equal. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 48px;
	align-items: start;
}

/* Stacked groups need separating; SIDE BY SIDE ones must not be.
   This rule is older than the two-column locations panel, and once that panel
   existed the adjacency selector started matching its second COLUMN — so the
   Naples group sat 26px below Fort Myers, and the two brass rules that are meant
   to read as one line across the panel did not line up. The grid supplies its
   own row gap, so inside it the margin is not merely wrong, it is redundant. */
.fo-panel__group + .fo-panel__group { margin-top: 26px; }
.fo-panel__grid > .fo-panel__group + .fo-panel__group { margin-top: 0; }

/* Declared rather than left implicit: the panel is rendered by
   blocks/nav-locations.php now and the class contract should be readable here.
   min-width:0 lets a long office name wrap instead of widening its track. */
.fo-panel__group { min-width: 0; }

.fo-panel__head {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fo-brass);
	margin-bottom: 6px;
}

.fo-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fo-panel__item + .fo-panel__item { border-top: 1px solid var(--fo-line); }

.fo-panel__link {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 0;
	text-decoration: none;
	color: var(--fo-ink);
	transition: color var(--fo-ease);
}

.fo-panel__link:hover,
.fo-panel__link:focus-visible { color: var(--fo-navy); }

/* Mini brass map pin. Decorative, aria-hidden in markup. */
.fo-panel__pin {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fo-brass);
	border-radius: 999px;
	font-family: var(--fo-font-display);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--fo-brass);
	background-color: var(--fo-white);
	transition: background-color var(--fo-ease), color var(--fo-ease);
}

.fo-panel__link:hover .fo-panel__pin,
.fo-panel__link:focus-visible .fo-panel__pin {
	background-color: var(--fo-brass);
	color: var(--fo-white);
}

.fo-panel__name {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.35;
	color: inherit;
}

.fo-panel__meta {
	display: block;
	margin-top: 4px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-panel__foot {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--fo-line);
}

/* --- Language toggle --- */
.fo-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--fo-stone);
}

.fo-lang__sep { color: var(--fo-stone); }

.fo-lang__link {
	color: var(--fo-navy);
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-lang__link:hover,
.fo-lang__link:focus-visible { color: var(--fo-ink); }

.fo-lang__link[aria-current],
.fo-lang__link.is-active {
	color: var(--fo-ink);
	cursor: default;
}

.fo-lang--on-dark { color: var(--fo-on-dark); }
.fo-lang--on-dark .fo-lang__link { color: var(--fo-brass-light); }
.fo-lang--on-dark .fo-lang__link[aria-current],
.fo-lang--on-dark .fo-lang__link.is-active { color: var(--fo-ivory); }

/* Nav and desktop CTA collapse below 992px. THE SWITCHER DOES NOT: Osi,
   2026-08-04 — "we need the language switcher on the header in mobile; not
   inside the hamburger panel." The drawer's own copy was a pair of inert
   spans anyway, removed the same day. EN | ES beside the burger costs ~64px,
   which the bar has once the nav is gone. */
@media (max-width: 992px) {
	.fo-nav,
	.fo-header__actions .fo-btn { display: none; }
}

/* ==========================================================================
   07 · MOBILE — hamburger, right-slide drawer, sticky click-to-call bar
   ========================================================================== */

.fo-iconbtn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--fo-line);
	border-radius: 2px;
	color: var(--fo-navy);
	cursor: pointer;
	transition: border-color var(--fo-ease), color var(--fo-ease),
		background-color var(--fo-ease);
}

.fo-iconbtn:hover,
.fo-iconbtn:focus-visible { border-color: var(--fo-brass); }

.fo-iconbtn svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

@media (max-width: 992px) {
	.fo-iconbtn { display: inline-flex; }
	.fo-header__actions { gap: 8px; }
}

/* Hamburger — three 18px hairlines, 5px apart. */
.fo-burger__bars {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}

.fo-burger__bars span {
	display: block;
	width: 18px;
	height: 1px;
	background-color: var(--fo-ink);
}

/* --- Drawer: slides from the right onto an ivory ground --- */
.fo-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	visibility: hidden;
	pointer-events: none;
}

.fo-drawer.is-open,
.fo-drawer[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

.fo-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--fo-ink);
	opacity: 0;
	transition: opacity 220ms ease;
}

.fo-drawer.is-open .fo-drawer__scrim,
.fo-drawer[aria-hidden="false"] .fo-drawer__scrim { opacity: 0.45; }

.fo-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(88vw, 420px);
	display: flex;
	flex-direction: column;
	background-color: var(--fo-ivory);
	border-left: 1px solid var(--fo-line);
	transform: translateX(100%);
	transition: transform 220ms ease;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.fo-drawer.is-open .fo-drawer__panel,
.fo-drawer[aria-hidden="false"] .fo-drawer__panel { transform: translateX(0); }

.fo-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--fo-masthead-h);
	padding-inline: 20px;
	border-bottom: 1px solid var(--fo-line);
}

.fo-drawer__close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 1px solid var(--fo-line);
	border-radius: 2px;
	color: var(--fo-ink);
	font-family: var(--fo-font-ui);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--fo-ease), color var(--fo-ease);
}

.fo-drawer__close:hover,
.fo-drawer__close:focus-visible { border-color: var(--fo-brass); }

.fo-drawer__body { padding: 8px 20px 32px; }

.fo-drawer__nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fo-drawer__item { border-bottom: 1px solid var(--fo-line); }

/* Drawer nav items are h3 serif, per design spec 6.1. */
.fo-drawer__link {
	display: block;
	padding: 20px 0;
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.25;
	color: var(--fo-ink);
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-drawer__link:hover,
.fo-drawer__link:focus-visible { color: var(--fo-navy); }

.fo-drawer__group { padding: 24px 0 8px; }

.fo-drawer__grouphead {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fo-brass);
	margin-bottom: 4px;
}

/* The Coverage group head is a link now, because /coverage/ is a real page and
   the drawer was the one place it could not be reached. Inherits the head's
   type so it reads as a heading that happens to be tappable. */
.fo-drawer__grouplink {
	color: inherit;
	text-decoration: none;
	display: block;
}

.fo-drawer__grouplink:hover,
.fo-drawer__grouplink:focus-visible { color: var(--fo-ink); }

/* Locations are expanded as a list inside the drawer, never a sub-accordion. */
.fo-drawer__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fo-drawer__subitem + .fo-drawer__subitem { border-top: 1px solid var(--fo-line); }

.fo-drawer__sublink {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 16px 0;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	color: var(--fo-ink);
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-drawer__sublink:hover,
.fo-drawer__sublink:focus-visible { color: var(--fo-navy); }

.fo-drawer__foot {
	margin-top: auto;
	/* 32px design padding plus the home-indicator inset, so the drawer's own
	   buttons clear the gesture area. */
	padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--fo-line);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Lock scrolling behind the drawer. */
/* Retained for non-iOS browsers and as a no-JS fallback. The real lock is
   lockScroll()/unlockScroll() in assets/js/fo-ui.js: overflow:hidden alone does
   not hold on iOS Safari, which was measured scrolling 600px behind an open
   drawer. Do not remove one assuming the other covers it. */
body.fo-drawer-open { overflow: hidden; }

@media (min-width: 993px) {
	.fo-drawer { display: none; }
}

/* --- Sticky click-to-call bar (mobile only) --- */
.fo-callbar {
	display: none;
	position: sticky;
	bottom: 0;
	z-index: 40;
	gap: 1px;
	background-color: var(--fo-line);
	border-top: 1px solid var(--fo-line);
	/*
	 * On an iPhone with a home indicator the bottom ~34px of the viewport is
	 * the gesture area. Without this the lower third of both call-to-action
	 * targets sits under it: still visible, but a tap there is swallowed by the
	 * system gesture. env() resolves to 0 on every device without an inset, so
	 * this costs nothing elsewhere.
	 */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fo-callbar__item {
	flex: 1;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--fo-ease), color var(--fo-ease);
}

.fo-callbar__item svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	flex: 0 0 auto;
}

.fo-callbar__call {
	background-color: var(--fo-ivory);
	color: var(--fo-ink);
}

.fo-callbar__call:hover,
.fo-callbar__call:focus-visible { background-color: var(--fo-parchment); }

.fo-callbar__quote {
	flex: 1.4;
	background-color: var(--fo-brass);
	color: var(--fo-ink);
	font-weight: 600;
}

/* One-action bar, used on /quote/thanks/ where a second "Request a Quote" half
   would be asking for the thing the visitor has just done. The lone call item
   inherits the brass emphasis the quote half normally carries, because it is now
   the primary action rather than the quieter of two. */
.fo-callbar--single .fo-callbar__call {
	background-color: var(--fo-brass);
	color: var(--fo-ink);
	font-weight: 600;
}

.fo-callbar--single .fo-callbar__call:hover,
.fo-callbar--single .fo-callbar__call:focus-visible {
	background-color: var(--fo-navy);
	color: var(--fo-ivory);
}

.fo-callbar__quote:hover,
.fo-callbar__quote:focus-visible {
	background-color: var(--fo-navy);
	color: var(--fo-ivory);
}

@media (max-width: 992px) {
	.fo-callbar { display: flex; }

	/*
	 * Third-party overlays vs the call bar.
	 *
	 * Measured on the QA walk at 390px: the cookie banner is fixed at
	 * z-index 2147483646 and occupies y 761-935; the call bar is sticky at
	 * z-index 40 occupying y 874-935. The banner therefore covered the bar
	 * completely, so on a first visit neither the Call nor the Request a Quote
	 * target was reachable at all. The UserWay button (y 878-922) overlapped it
	 * permanently, banner or not.
	 *
	 * Raising the call bar is not an option: 2147483646 is one below the 32-bit
	 * maximum and nothing can sit above it. So both overlays are pushed up by
	 * the bar's own height instead, which leaves all three usable at once.
	 *
	 * These are third-party selectors and therefore a coupling: if the consent
	 * plugin or UserWay is replaced, re-measure. !important is required because
	 * both set their own inline or high-specificity bottom values.
	 */
	.cc-window,
	.cc-banner {
		bottom: calc( var(--fo-callbar-h) + env(safe-area-inset-bottom, 0px) ) !important;
	}

	/*
	 * The UserWay trigger gets the bar's height AND FIVE PIXELS. Clearing the
	 * bar exactly, which is what it did, left its 44px circle resting on the
	 * bar's top edge with no gap at all: measured at 390px the trigger occupied
	 * y 739-783 and the bar starts at 783. Two round-cornered controls touching
	 * on a shared line read as one control, and the eye cannot tell which half
	 * of the join belongs to which. Osi, 2026-08-04.
	 *
	 * The consent banner above deliberately does NOT get the same 5px: it is a
	 * full-width bar with a border-top, and a five-pixel strip of page showing
	 * between it and the call bar would read as a gap rather than as clearance.
	 */
	#uwaw,
	.userway_buttons_wrapper,
	[class*="userway"][class*="wrapper"] {
		bottom: calc( var(--fo-callbar-h) + 5px + env(safe-area-inset-bottom, 0px) ) !important;
	}
	/* Clear the bar so the last footer line is never trapped under it. */
	.fo-footer__bottom { padding-bottom: 96px; }
}

/* --------------------------------------------------------------------------
   Cookie consent, restyled to the palette.

   The plugin ships a saturated rgb(0,58,122) block with a white button and
   32px of padding. At 390px that is 174px of a 844px viewport, in a blue that
   appears nowhere else on this site, sitting on top of the hero's secondary
   CTA. On a first visit it is the loudest thing on the page and the first
   thing a visitor sees. Found in the visual review 2026-08-03.

   The plugin also emits a `cc-color-override-NNN` class whose number changes
   whenever its settings are saved, so it cannot be targeted directly.
   `.cc-window.cc-window` doubles the class to reach (0,2,0) without depending
   on that number, and !important covers the inline colours the plugin writes.

   This is a third-party coupling. If the consent plugin is replaced, this
   whole block goes with it.
   -------------------------------------------------------------------------- */

.cc-window.cc-window {
	padding: 16px 20px !important;
	background-color: var(--fo-ink) !important;
	color: var(--fo-ivory) !important;
	border-top: 2px solid var(--fo-brass);
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--fo-font-ui) !important;
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
}

.cc-window.cc-window .cc-message {
	margin-right: 16px;
	color: var(--fo-on-dark, #D7D3CB) !important;
}

/* Brass-light, not brass: brass on ink is under 4.5:1 and this is body copy. */
.cc-window.cc-window .cc-link {
	padding: 0 !important;
	color: var(--fo-brass-light) !important;
	opacity: 1 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-window.cc-window .cc-btn,
.cc-window.cc-window .cc-btn.cc-dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 24px !important;
	border: 1px solid var(--fo-brass) !important;
	border-radius: 2px !important;
	background-color: var(--fo-brass) !important;
	color: var(--fo-ink) !important;
	font-family: var(--fo-font-ui) !important;
	font-size: var(--fo-fs-label) !important;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.cc-window.cc-window .cc-btn:hover,
.cc-window.cc-window .cc-btn:focus-visible {
	background-color: var(--fo-brass-light) !important;
	border-color: var(--fo-brass-light) !important;
}

/* A full-width bar on a phone rather than a floating block: same information,
   a third of the height, and it stops competing with the hero. */
@media (max-width: 768px) {
	.cc-window.cc-window {
		left: 0 !important;
		right: 0 !important;
		max-width: 100% !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 14px;
		padding: 12px 16px !important;
	}

	.cc-window.cc-window .cc-message { margin-right: 0; }

	/* THE ACCEPT BUTTON GOES LEFT, and this is the second time this rule has
	   been written. It used to push the button RIGHT with margin-left:auto,
	   because when it was written UserWay's trigger sat at the bottom LEFT and
	   the button, wrapping under the message, landed on top of it.

	   UserWay's trigger is at the bottom RIGHT now — measured at 390px it
	   occupies x 325-369 of a 390px viewport — so the old rule was sending the
	   button into the collision it was written to avoid, and the accessibility
	   circle was sitting over the word "GOT IT". Osi, 2026-08-04.

	   Two overlays, one corner, and only one of them is ours to move. If the
	   trigger moves again, re-measure rather than assume: the comment above this
	   one was true when it was written and wrong when it was read. */
	.cc-window.cc-window .cc-compliance {
		flex: 0 0 auto;
		margin-left: 0;
		margin-right: auto;
	}
}

/* ==========================================================================
   08 · MEDIA PRIMITIVES — figures, image bands, hero
   ========================================================================== */

.fo-figure {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--fo-line);
	margin: 0;
}

.fo-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The house warm treatment. Not a gradient, not a shadow. */
	filter: saturate(0.82) contrast(1.02);
}

.fo-figure--dark img { filter: saturate(0.7) contrast(1.02) brightness(0.92); }

/* Caption for an editorial figure inside prose, as used in the coverage
   bodies. Sits outside the bordered frame, in the small UI face, so it reads
   as a note about the picture rather than as body copy. */
.fo-figure__caption {
	display: block;
	margin: 10px 0 0;
	padding: 0;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* The figure is a block in the prose flow, not a full-bleed band, so it needs
   its own rhythm. .fo-prose only spaces its own direct children. */
.fo-prose .fo-figure {
	margin-block: 36px;
}
.fo-figure--portrait { aspect-ratio: 4 / 5; }
.fo-figure--landscape { aspect-ratio: 4 / 3; }

/* Photography is on the §07 [CONFIRM] list. Where a location or portrait image
   has not been supplied the block prints this instead of collapsing the column
   or substituting stock imagery — the same 1px frame, holding a stone label. */
.fo-figure-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border: 1px solid var(--fo-line);
	background-color: var(--fo-parchment);
	text-align: center;
}

.fo-figure-placeholder > * { margin: 0; }

/* Offset brass frame — the second image in the agency section. */
.fo-figure-offset {
	position: relative;
	margin: 44px 0 0 78px;
}

.fo-figure-offset::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 18px;
	right: 18px;
	bottom: -18px;
	border: 1px solid var(--fo-brass);
	pointer-events: none;
}

.fo-figure-offset > .fo-figure { position: relative; }

@media (max-width: 768px) {
	.fo-figure-offset { margin: 28px 0 0 0; }
	.fo-figure-offset::before { display: none; }
}

/* Full-bleed image band with an ivory caption plaque. */
.fo-imgband {
	position: relative;
	height: 420px;
	overflow: hidden;
	border-top: 1px solid var(--fo-line);
}

.fo-imgband img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82) contrast(1.02);
}

.fo-imgband__plaque {
	position: absolute;
	left: var(--fo-gutter);
	bottom: 40px;
	max-width: calc(100% - (var(--fo-gutter) * 2));
	padding: 16px 22px;
	background-color: var(--fo-ivory);
	border-left: 2px solid var(--fo-brass);
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-ink);
}

@media (max-width: 768px) {
	.fo-imgband { height: 260px; }
	.fo-imgband__plaque { bottom: 20px; padding: 12px 16px; }
}

/* --- Homepage hero --- */
.fo-hero {
	position: relative;
	min-height: var(--fo-hero-h);
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--fo-line);
	background-color: var(--fo-ink);
}

.fo-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.fo-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.7) contrast(1.02) brightness(0.45);
}

/* Flat ink scrim at 55%. A flat colour, not a gradient. */
.fo-hero__scrim {
	position: absolute;
	inset: 0;
	/*
	 * margin:0 is load-bearing, not tidiness. theme.json sets a root blockGap of
	 * 24px, which core emits as `:where(.wp-site-blocks) > * { margin-block-start: 24px }`.
	 * That rule reached this element, and on an absolutely positioned box with
	 * inset:0 a top margin shifts the box down AND shortens it: the scrim was
	 * measuring 723px tall at y=153 inside a 747px hero at y=129, leaving a 24px
	 * band of unscrimmed photograph across the top of every homepage.
	 * .fo-hero__media escaped it only because it already declared margin:0.
	 */
	margin: 0;
	background-color: var(--fo-ink);
	opacity: 0.55;
}

.fo-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-inline: var(--fo-gutter);
}

.fo-hero__content {
	max-width: var(--fo-wide);
	margin-inline: auto;
	width: 100%;
}

/* The hero copy starts at column 2 — asymmetry is the house grid. */
.fo-hero__well {
	margin-left: 112px;
	max-width: 684px;
}

.fo-hero__eyebrow {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass-light);
	margin-bottom: 34px;
}

.fo-hero__title {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--fo-ivory);
	margin: 0 0 30px;
	text-wrap: balance;
}

.fo-hero__lede {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-on-dark-lede);
	max-width: 54ch;
	margin: 0 0 44px;
}

.fo-hero__credit {
	position: absolute;
	right: 28px;
	bottom: 20px;
	z-index: 1;
	font-family: var(--fo-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(248, 245, 239, 0.62);
}

@media (max-width: 1200px) {
	.fo-hero__well { margin-left: 0; }
}

@media (max-width: 768px) {
	.fo-hero {
		align-items: flex-end;
	}

	.fo-hero__inner { padding-block: 44px; }
	.fo-hero__eyebrow { margin-bottom: 20px; }
	.fo-hero__title { line-height: 1.08; margin-bottom: 18px; }
	.fo-hero__lede { margin-bottom: 28px; }
	.fo-hero__credit { display: none; }
}

/* ==========================================================================
   09 · BLOCK — florida-one/section-head
   The numeral is a sibling of the heading, never inside it.
   ========================================================================== */

.fo-section-head,
.wp-block-florida-one-section-head { max-width: 100%; }

.fo-section-head__num {
	display: block;
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--fo-brass);
	margin-bottom: 26px;
	font-variant-numeric: lining-nums;
}

.fo-section-head__eyebrow {
	display: block;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 20px;
}

.fo-section-head__heading {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h2);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fo-ink);
	margin: 0;
	text-wrap: balance;
}

/* Optional intro paragraph beneath the heading, used by the location-hub
   section heads (blocks/location-hero.php fo_hub_section_head_html()). */
.fo-section-head__intro {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-stone);
	max-width: 64ch;
	margin: 20px 0 0;
}

.fo-section-head--center { text-align: center; }
.fo-section-head--right { text-align: right; }

.fo-section-head--on-dark .fo-section-head__num { color: var(--fo-brass-light); }
.fo-section-head--on-dark .fo-section-head__eyebrow { color: var(--fo-on-dark); }
.fo-section-head--on-dark .fo-section-head__heading { color: var(--fo-ivory); }

@media (max-width: 768px) {
	.fo-section-head__num { margin-bottom: 18px; }
}

/* ==========================================================================
   10 · BLOCKS — florida-one/coverage-tiles and florida-one/location-coverage
   4-up, separated by VERTICAL 1px rules. No card chrome of any kind.
   ========================================================================== */

.fo-tiles,
.wp-block-florida-one-coverage-tiles > .fo-tiles {
	--fo-tile-pad: 44px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Every modifier below repeats the `.wp-block-florida-one-coverage-tiles >`
 * prefix, and it is load-bearing rather than tidy.
 *
 * The base rule above is written as two selectors, the second of which scores
 * (0,2,0). A modifier written as a bare `.fo-tiles--1` scores (0,1,0) and
 * therefore LOSES to it, at every viewport width, however far down the file it
 * appears. The modifiers were silently doing nothing inside that wrapper.
 *
 * The visible consequence was on the location hubs: four of the five carry a
 * single coverage line and set `--1`, which never applied, so one tile was
 * being laid into a four-track grid and rendered at a quarter of the column
 * with three empty tracks beside it. Found in live QA 2026-07-30 while fixing
 * the same trap in the responsive blocks further down.
 */
.fo-tiles--3,
.wp-block-florida-one-coverage-tiles > .fo-tiles--3 {
	--fo-tile-pad: 56px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fo-tiles--2,
.wp-block-florida-one-coverage-tiles > .fo-tiles--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A single coverage line — the case on four of the five location hubs. The
   vertical rule between tiles has nothing to separate, so drop the inset. */
.fo-tiles--1,
.wp-block-florida-one-coverage-tiles > .fo-tiles--1 {
	--fo-tile-pad: 0;
	grid-template-columns: minmax(0, 1fr);
}

/* Tiles on an ink or navy ground. The rules and the icon stroke lift to
   brass-light (7.7:1 on ink); the summary keeps the on-dark body colour. */
.fo-tiles--on-dark .fo-tile { border-color: var(--fo-line-dark); }
.fo-tiles--on-dark .fo-tile + .fo-tile { border-left-color: var(--fo-line-dark); }
.fo-tiles--on-dark .fo-tile__icon { stroke: var(--fo-brass-light); }
.fo-tiles--on-dark .fo-tile__eyebrow { color: var(--fo-on-dark-soft); }
.fo-tiles--on-dark .fo-tile__eyebrow--primary { color: var(--fo-ivory); }
.fo-tiles--on-dark .fo-tile__title { color: var(--fo-ivory); }
.fo-tiles--on-dark .fo-tile__text { color: var(--fo-on-dark); }

.fo-tiles--on-dark .fo-tile__link {
	color: var(--fo-ivory);
	border-bottom-color: var(--fo-brass-light);
}

.fo-tiles--on-dark .fo-tile__link:hover,
.fo-tiles--on-dark .fo-tile__link:focus-visible {
	color: var(--fo-brass-light);
	border-bottom-color: var(--fo-brass-light);
}

.fo-tile {
	padding-inline: var(--fo-tile-pad);
	min-width: 0;
}

.fo-tile:first-child { padding-left: 0; }
.fo-tile:last-child { padding-right: 0; }
.fo-tile + .fo-tile { border-left: 1px solid var(--fo-line); }

/* TWO ROWS OF THREE, for the /coverage/ index only.
   The tile component was written for a SINGLE ROW: `:first-child` kills the
   left padding, `:last-child` kills the right, and `.fo-tile + .fo-tile` draws
   the vertical hairline. Give it six tiles in three tracks and every one of
   those assumptions breaks on the second row — tile 4 keeps a left inset and
   gains a stray vertical rule at the left edge, and tile 3 keeps a right inset,
   so the two rows do not line up with each other or with the container.

   The 2-column tablet rules below already handle this correctly with
   odd/even; these are the same idea counted in threes. Scoped to `--3`, which
   nothing but the coverage index uses, and to desktop, because below 993px the
   grid is two tracks and 3n would fight the odd/even rules that own it there.

   Six lines exist as of 2026-08-04 (flood and SR-22 joined the four). The
   homepage still asks for four and is unaffected. */
@media (min-width: 993px) {
	.fo-tiles--3,
	.wp-block-florida-one-coverage-tiles > .fo-tiles--3 { row-gap: 56px; }

	.fo-tiles--3 > .fo-tile:nth-child(3n+1) {
		padding-left: 0;
		border-left: 0;
	}

	.fo-tiles--3 > .fo-tile:nth-child(3n) { padding-right: 0; }

	/* The hairline between the rows. Tiles are adjacent grid cells with no
	   column gap, so three border-tops read as one continuous rule, and the
	   zeroed insets at each end take it cleanly to the container edges. */
	.fo-tiles--3 > .fo-tile:nth-child(n+4) {
		padding-top: 56px;
		border-top: 1px solid var(--fo-line);
	}
}

.fo-tile__icon {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 26px;
	fill: none;
	stroke: var(--fo-brass);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Tile eyebrow. Brass would be 3.2:1 here, so the "primary line" emphasis is
   carried by ink weight rather than by colour. */
.fo-tile__eyebrow {
	display: block;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 12px;
}

.fo-tile__eyebrow--primary {
	color: var(--fo-ink);
	font-weight: 600;
}

.fo-tile__title {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.25;
	color: var(--fo-ink);
	margin: 0 0 16px;
}

.fo-tile__text {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-stone);
	margin: 0 0 22px;
	max-width: 40ch;
}

.fo-tile__link {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--fo-brass);
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-navy);
	text-decoration: none;
	transition: color var(--fo-ease), border-color var(--fo-ease);
}

.fo-tile__link:hover,
.fo-tile__link:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-ink);
}

/* Footnote line under a tile row ("Commercial lines are written from ..."). */
.fo-tiles__note {
	margin: 56px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--fo-line);
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.7;
	color: var(--fo-stone);
}

.fo-tiles__note a {
	color: var(--fo-navy);
	border-bottom: 1px solid var(--fo-brass);
	text-decoration: none;
	transition: color var(--fo-ease), border-color var(--fo-ease);
}

.fo-tiles__note a:hover,
.fo-tiles__note a:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-ink);
}

/*
 * SPECIFICITY, NOT BREAKPOINTS. Both of the blocks below must repeat the
 * `.wp-block-florida-one-coverage-tiles > .fo-tiles` selector, and it is not
 * decoration.
 *
 * The base rule at the top of this section is written as two selectors:
 *
 *     .fo-tiles,
 *     .wp-block-florida-one-coverage-tiles > .fo-tiles { … 4 columns … }
 *
 * The second scores (0,2,0). A media query adds NO specificity to what it
 * contains, so a `.fo-tiles` rule inside one still scores (0,1,0) and loses to
 * it at every viewport width, no matter how far down the file it sits.
 *
 * The effect was that the coverage tiles rendered as FOUR columns on a phone.
 * On a 390px screen that is four 87.5px tracks: "Commercial Insurance" and
 * "Boat Insurance" collided into "CommercialBoat" and every summary set one
 * word per line. Reported from a device 2026-07-30.
 *
 * Matching the wrapper selector here puts these rules at (0,2,0) as well, and
 * source order then does the rest.
 */
@media (max-width: 992px) {
	.fo-tiles,
	.fo-tiles--3,
	.wp-block-florida-one-coverage-tiles > .fo-tiles,
	.wp-block-florida-one-coverage-tiles > .fo-tiles--3 {
		--fo-tile-pad: 32px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 48px;
	}

	/* Re-assert the single-line case AFTER the rule above. A `--1` element also
	   carries the plain `fo-tiles` class, so it is matched by that selector too
	   and would otherwise be forced into two tracks it has nothing to put in. */
	.fo-tiles--1,
	.wp-block-florida-one-coverage-tiles > .fo-tiles--1 {
		--fo-tile-pad: 0;
		grid-template-columns: minmax(0, 1fr);
	}

	.fo-tile:first-child,
	.fo-tile:last-child { padding-inline: var(--fo-tile-pad); }
	.fo-tile:nth-child(odd) { padding-left: 0; }
	.fo-tile:nth-child(even) { padding-right: 0; }
	.fo-tile + .fo-tile { border-left: 0; }
	.fo-tile:nth-child(even) { border-left: 1px solid var(--fo-line); }
}

/* Mobile: the vertical rules become horizontal rules — still hairlines,
   still not cards. Matches "FO Homepage - Mobile.dc.html". */
@media (max-width: 768px) {
	.fo-tiles,
	.fo-tiles--3,
	.fo-tiles--2,
	.wp-block-florida-one-coverage-tiles > .fo-tiles,
	.wp-block-florida-one-coverage-tiles > .fo-tiles--3,
	.wp-block-florida-one-coverage-tiles > .fo-tiles--2 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	/* Tightened 2026-08-03. The hairline already does the separating and the
	   extra padding was not earning it, so this is worth having on its own
	   terms. It is NOT the fix for page length: measured after, the mobile
	   homepage went 15,097px to 15,025px, 72px, because a stacked tile is 251px
	   rather than the ~490px estimated during the review. Anything that
	   meaningfully shortens this page has to come out of the number of sections,
	   not their padding. */
	.fo-tile,
	.fo-tile:first-child,
	.fo-tile:last-child,
	.fo-tile:nth-child(odd),
	.fo-tile:nth-child(even) {
		padding: 22px 0;
		border-left: 0;
		border-top: 1px solid var(--fo-line);
	}

	.fo-tile:last-child { border-bottom: 1px solid var(--fo-line); }
	.fo-tile__icon { width: 28px; height: 28px; margin-bottom: 12px; }
	.fo-tiles__note { margin-top: 32px; }
}

/* ==========================================================================
   11 · BLOCK — florida-one/locations-map
   Static styled image that upgrades to interactive on interaction.
   ========================================================================== */

/* `.fo-map` is the SECTION wrapper: it holds the numeral, the h2, the map
   frame, the intro and the grouped office index. Painting it as a bordered
   parchment card boxed all of that — in the approved design only the map
   itself carries a border. The card treatment lives on `.fo-map__frame`, which
   assets/css/map.css owns; nothing here may reset that frame's border. */
.fo-map {
	position: relative;
}

.fo-map__main { min-width: 0; }

.fo-map--tall .fo-map__frame { aspect-ratio: 16 / 11; }
.fo-map--wide .fo-map__frame { aspect-ratio: 16 / 9; }

.fo-map__static img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Warm the tiles to the Ledger palette. Only applied to raw tiles; a pre-warmed
   static export needs no filter, so add .fo-map__static--tiles when the image is
   unprocessed OSM output. */
.fo-map__static--tiles img {
	filter: grayscale(1) sepia(0.42) brightness(1.05) contrast(0.88);
}

/* `.fo-map__frame` is styled in assets/css/map.css (1px line border, parchment
   ground, 720/452 ratio). Only the embedded-iframe fallback is handled here. */
.fo-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	min-height: 300px;
}

/* Numbered brass pins. Shared with assets/map/ and the fo-map iframe. */
.fo-pin { display: flex; }

.fo-pin i {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-family: var(--fo-font-display);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.06em;
	background-color: var(--fo-ivory);
	border: 1px solid var(--fo-brass);
	color: var(--fo-brass);
}

/* Paired pins (suites 231/235, and the three Naples desks) overlap by 5px. */
.fo-pin i + i { margin-left: -5px; }

.fo-pin i.is-active,
.fo-pin i.on {
	background-color: var(--fo-brass);
	color: var(--fo-ivory);
}

/* The numbered list beside the map is `.fo-map__index` / `__group` / `__list` /
   `__row*`, styled in assets/css/map.css alongside the markup that emits it.
   A parallel `.fo-map-legend*` tree used to sit here and matched nothing. */

/* ==========================================================================
   12 · BLOCK — florida-one/locations-grid, and the location card
   Design spec 6.3. The workhorse. No shadow, no fill, 1px border.

   THIS SECTION IS DELIBERATELY EMPTY. The grid, the group heads and the whole
   card live in assets/css/map.css under the `.fo-loc-grid`, `.fo-loc-group`
   and `.fo-loc-card*` names that blocks/locations-grid.php actually emits, and
   that file is enqueued by the block's own render callback
   (fo_locations_block_assets(), blocks/locations-map.php) so it always ships
   with the markup.

   A parallel `.fo-locations-grid` / `.fo-location-card*` tree used to sit here.
   It matched nothing: the block has never emitted those names, so it was ~200
   lines of dead CSS on every page and a standing invitation to "fix" the card
   in the file that does not style it. If the card is ever promoted into the
   shared component layer, lift `.fo-loc-card*` out of map.css wholesale rather
   than re-typing it here — one vocabulary, one file.
   ========================================================================== */

/* ==========================================================================
   13 · BLOCK — florida-one/team-grid, and the person card (design spec 6.4)
   The block used to ship this as an inline <style> in the footer. It lives
   here now so there is one cascade: the two copies disagreed about the type
   scale (the inline one referenced --wp--preset--font-size--h2, which WP
   kebab-cases to --h-2, so every person name was locked at its desktop px
   fallback and never scaled down on mobile).
   ========================================================================== */

/* The wrapper holds the principal's feature band AND one or more card grids,
   so it is a flow container, never a grid itself. Column counts live on
   `.fo-team-grid__list--N`. */
.fo-team-grid { min-width: 0; }

.fo-team-grid__list {
	display: grid;
	gap: var(--fo-gap-cards);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A second grid (staff after managers) is separated by a hairline, not by a
   heading — the rank is carried by size and order, as in the mockup. */
.fo-team-grid__list + .fo-team-grid__list {
	margin-top: 64px;
	padding-top: 64px;
	border-top: 1px solid var(--fo-line);
}

.fo-team-grid__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fo-team-grid__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fo-team-grid__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fo-team-grid__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fo-team-grid__list--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }

.fo-team-grid__more { margin: 48px 0 0; text-align: right; }

.fo-team-grid__more a {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--fo-brass);
	padding-bottom: 4px;
	transition: color var(--fo-ease), border-color var(--fo-ease);
}

.fo-team-grid__more a:hover,
.fo-team-grid__more a:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-ink);
}

/* --- Portrait plate — shared by the card and the feature band --- */
.fo-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--fo-line);
	background-color: var(--fo-parchment);
	margin: 0;
	transition: border-color var(--fo-ease);
}

.fo-portrait img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	filter: saturate(0.82) contrast(1.02);
	transition: filter var(--fo-ease);
}

/* No photograph on record: initials set in the display face over parchment,
   with one brass hairline. Never a grey silhouette icon. */
.fo-portrait--placeholder { display: flex; align-items: center; justify-content: center; }

.fo-portrait__plate {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.fo-portrait__initials {
	font-family: var(--fo-font-display);
	font-size: clamp(2rem, 4.4vw, 3.375rem);
	line-height: 1;
	letter-spacing: 0.08em;
	font-weight: 400;
	color: var(--fo-navy-soft);
}

.fo-portrait__rule {
	display: block;
	width: 28px;
	height: 1px;
	background-color: var(--fo-brass);
}

/* --- Person card --- */
.fo-person-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.fo-person-card__name {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h4);
	font-weight: 400;
	line-height: 1.35;
	color: var(--fo-ink);
	margin: 22px 0 0;
}

/* The name anchor is stretched across the whole card, so the card has exactly
   one link and the portrait is not a second tab stop. */
.fo-person-card__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-person-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fo-person-card__link:hover,
.fo-person-card__link:focus-visible { color: var(--fo-navy); }

.fo-person-card:hover .fo-portrait,
.fo-person-card:focus-within .fo-portrait { border-color: var(--fo-brass); }

.fo-person-card:hover .fo-portrait img,
.fo-person-card:focus-within .fo-portrait img { filter: saturate(0.9) contrast(1.02); }

/* One brass hairline between name and role. The only brass in the card. */
.fo-person-card__rule {
	display: block;
	width: 32px;
	height: 1px;
	border: 0;
	background-color: var(--fo-brass);
	margin: 12px 0;
}

.fo-person-card__role {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0;
}

.fo-person-card__place {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-stone);
	margin: 8px 0 0;
}

.fo-person-card__bio {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-body);
	margin: 10px 0 0;
	max-width: 34ch;
}

.fo-person-card .fo-chip { margin: 16px 0 0; }

/* --- The principal's feature band (design spec 9.4) --- */
.fo-person-feature {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 96px;
	align-items: start;
	margin: 0 0 88px;
}

.fo-person-feature__portrait { min-width: 0; }
.fo-person-feature__body { padding-top: 8px; min-width: 0; }

.fo-person-feature__name {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h2);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fo-ink);
	margin: 0;
}

.fo-person-feature__rule {
	display: block;
	width: 48px;
	height: 1px;
	background-color: var(--fo-brass);
	margin: 20px 0;
}

.fo-person-feature__role { margin: 0; }

.fo-person-feature__place {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-stone);
	margin: 10px 0 0;
}

.fo-person-feature__bio { margin: 28px 0 0; max-width: 60ch; }

.fo-person-feature__bio p {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-body);
	margin: 0 0 16px;
}

.fo-person-feature__bio p:last-child { margin-bottom: 0; }

.fo-person-feature__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	list-style: none;
	margin: 32px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--fo-line);
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-person-feature__contact a {
	color: var(--fo-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--fo-brass);
	padding-bottom: 3px;
	transition: color var(--fo-ease), border-color var(--fo-ease);
}

.fo-person-feature__contact a:hover,
.fo-person-feature__contact a:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-ink);
}

.fo-person-feature .fo-chip { margin: 24px 0 0; }

@media (max-width: 1200px) {
	.fo-team-grid__list--5,
	.fo-team-grid__list--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.fo-person-feature { gap: 56px; }
}

@media (max-width: 992px) {
	.fo-team-grid__list--4,
	.fo-team-grid__list--5,
	.fo-team-grid__list--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.fo-team-grid__list + .fo-team-grid__list { margin-top: 48px; padding-top: 48px; }

	.fo-person-feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		margin-bottom: 64px;
	}

	.fo-person-feature__portrait { max-width: 420px; }
}

@media (max-width: 768px) {
	.fo-team-grid__list--2,
	.fo-team-grid__list--3,
	.fo-team-grid__list--4,
	.fo-team-grid__list--5,
	.fo-team-grid__list--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

	/* The first card of a lead grid takes the full row on a phone. */
	.fo-team-grid__list--lead > .fo-person-card:first-child { grid-column: 1 / -1; }
	.fo-team-grid__list--lead > .fo-person-card:first-child .fo-portrait { aspect-ratio: 5 / 4; }
	.fo-team-grid__list--lead > .fo-person-card:first-child .fo-person-card__name { font-size: var(--fo-fs-h3); }

	.fo-person-feature__contact { gap: 10px 20px; }
}

/* Contact pair rows (Direct / Email) used on person and manager blocks. */
.fo-contact-pairs {
	display: flex;
	flex-wrap: wrap;
	gap: 44px;
	align-items: flex-start;
	border-top: 1px solid var(--fo-line);
	padding-top: 26px;
	margin-top: 32px;
}

.fo-contact-pair { min-width: 0; }

.fo-contact-pair__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 8px;
}

.fo-contact-pair__value {
	font-family: var(--fo-font-display);
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--fo-ink);
	text-decoration: none;
	font-variant-numeric: lining-nums tabular-nums;
	margin: 0;
}

.fo-contact-pair__value a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-contact-pair__value a:hover,
.fo-contact-pair__value a:focus-visible { color: var(--fo-navy); }

/* The visible "(239) 000-0000" / "[Confirm]" placeholders. */
.fo-contact-pair__value .is-placeholder { color: var(--fo-stone); }

@media (max-width: 560px) {
	.fo-contact-pairs { gap: 24px; }
}

/* ==========================================================================
   14 · BLOCKS — location-hero / location-manager / location-area /
        location-nearby
   ========================================================================== */

/* --- Breadcrumbs ---

   `.fo-crumbbar` is the band the trail sits in. It replaces the inline
   `style="padding:52px var(--fo-gutter) 0"` that was repeated in fourteen
   templates, and the 12px of bottom padding replaces the `margin-bottom:12px`
   that was on each `<nav>`, so the rendered spacing is unchanged. The trail
   itself is now blocks/breadcrumbs.php. */
.fo-crumbbar {
	padding: 52px var(--fo-gutter) 12px;
}

/* An empty band is still a 64px band. blocks/breadcrumbs.php returns nothing
   when a trail has fewer than two crumbs — the notes index is one such page,
   and the 2026-08-04 comp draws it with the masthead following straight from
   the header — but the band it would have sat in kept its padding, so the page
   opened with 64px of nothing. `:empty` cannot see this: the div holds a
   .fo-container holding whitespace. Where :has is unsupported the band simply
   keeps the space it has always kept. */
.fo-crumbbar:not(:has(.fo-breadcrumbs)) { display: none; }

.fo-breadcrumbs {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 64px;
}

.fo-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fo-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-breadcrumbs a:hover,
.fo-breadcrumbs a:focus-visible { color: var(--fo-ink); }

.fo-breadcrumbs [aria-current] { color: var(--fo-ink); }

@media (max-width: 768px) {
	.fo-breadcrumbs { margin-bottom: 32px; }
}

/* --- Location hero ---
   6fr / 6fr, vertically centred, 88px gutter — "FO Location Hub - Naples
   Mazda.dc.html" line 49. The grid itself is `.fo-split--6-6 .fo-split--centre`
   from §03, emitted by the block, so the breakpoints are single-sourced.
   The photograph is a fixed 604px frame, not an aspect-ratio box: the left
   column's height varies with the address and hours, and the mockup pins the
   image height rather than its shape. */
.fo-location-hero { padding: 52px var(--fo-gutter) var(--fo-section-y); }

.fo-location-hero__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
}

.fo-location-hero__body { min-width: 0; }

.fo-location-hero__num {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--fo-brass);
	margin-bottom: 26px;
	font-variant-numeric: lining-nums;
}

.fo-location-hero__title {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h1);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--fo-ink);
	margin: 0 0 14px;
	text-wrap: balance;
}

.fo-location-hero__meta {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-location-hero__rule {
	height: 1px;
	border: 0;
	background-color: var(--fo-line);
	margin: 40px 0;
}

.fo-location-hero__intro {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-body);
	max-width: 52ch;
	margin: 0 0 36px;
}

.fo-location-hero__address {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.7;
	color: var(--fo-body);
	font-style: normal;
}

.fo-location-hero__phone {
	display: inline-block;
	font-family: var(--fo-font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	line-height: 1.1;
	color: var(--fo-ink);
	text-decoration: none;
	font-variant-numeric: lining-nums tabular-nums;
	margin: 28px 0 6px;
	transition: color var(--fo-ease);
}

/* The class sits on the <p>; the tel: link is its child. Without `inherit` the
   number would be painted navy by theme.json's link element style, and a
   `a.fo-location-hero__phone` hover selector could never match. */
.fo-location-hero__phone a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-location-hero__phone a:hover,
.fo-location-hero__phone a:focus-visible { color: var(--fo-navy); }

/* The visible "(239) 000-0000" placeholder. Rendered as plain text, never as a
   tel: link — a link to a number nobody answers is a broken action and a false
   NAP signal. Stone keeps it legible without asserting it as real. */
.fo-location-hero__phone.is-placeholder { color: var(--fo-stone); }

.fo-location-hero__note {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-location-hero__actions { margin-top: 44px; }

/* Opening hours as a description list. `.fo-hours` below is the table variant
   used where a full seven-day structure is authored; the hub hero prints only
   the rows it actually has, so it uses a <dl>. */
/* THE 1C LEDGER — Osi's pick from "Florida One - Location Phone Block"
   (2026-08-05). Both phone numbers and the hours share one rhythm: a BRASS
   rule opens the ledger, hairlines separate the rows, labels sit left in the
   standard uppercase voice, values right. The phone values take the display
   serif a step above the hours so the numbers still read as the point of the
   panel; the manager's name sits under their label in a quieter weight, per
   the comp. Replaces both the separate hours <dl> and the two-row phone
   stack that briefly preceded it. */
.fo-location-hero__ledger {
	margin: 30px 0 0;
	max-width: 420px;
	border-top: 1px solid var(--fo-brass);
}

.fo-location-hero__ledger-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--fo-line);
}

.fo-location-hero__ledger-row dd {
	margin: 0;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	color: var(--fo-body);
	text-align: right;
	font-variant-numeric: lining-nums tabular-nums;
}

.fo-location-hero__ledger-phone,
.fo-location-hero__ledger-row dd.fo-location-hero__ledger-phone {
	font-family: var(--fo-font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--fo-ink);
}

.fo-location-hero__ledger-phone a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-location-hero__ledger-phone a:hover,
.fo-location-hero__ledger-phone a:focus-visible { color: var(--fo-navy); }

/* The manager's name under their label: same tracked uppercase line, one
   weight and one shade quieter, exactly as the comp draws it. */
.fo-location-hero__ledger-name {
	display: block;
	margin-top: 4px;
	font-weight: 500;
	letter-spacing: 0.1em;
	opacity: 0.75;
}

.fo-location-hero__media { height: 604px; }
.fo-location-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Additional photographs beneath the hero image. A static row, never a
   carousel: the design spec forbids them, and two or three pictures of one
   office is exactly the case where a carousel hides most of what you have.
   Auto-fit means one extra photo fills the width and two or three share it,
   with no per-count rules. Added 2026-08-03. */
.fo-location-hero__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.fo-location-hero__gallery .fo-figure { height: 190px; }
.fo-location-hero__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 992px) {
	.fo-location-hero__media { height: 420px; }
	.fo-location-hero__gallery .fo-figure { height: 150px; }
}

@media (max-width: 768px) {
	.fo-location-hero { padding-top: 32px; }
	.fo-location-hero__rule { margin: 28px 0; }
	.fo-location-hero__media { height: 300px; }
	.fo-location-hero__gallery .fo-figure { height: 120px; }
}

@media (max-width: 560px) {
	/* The hub's address, phone and hours sit under this image. At 300px the
	   photograph pushed all of them below the fold on a small phone. */
	.fo-location-hero__media { height: 240px; }
}

/* --- Opening hours (fixed 7-day structure) --- */
.fo-hours {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	color: var(--fo-body);
	max-width: 420px;
}

.fo-hours caption {
	text-align: left;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fo-brass);
	margin-bottom: 4px;
}

.fo-hours th,
.fo-hours td {
	text-align: left;
	font-weight: 400;
	padding: 12px 0;
	border-bottom: 1px solid var(--fo-line);
}

.fo-hours td { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.fo-hours tr.is-today th,
.fo-hours tr.is-today td { color: var(--fo-ink); }
.fo-hours .is-closed { color: var(--fo-stone); }

.fo-hours__note {
	margin-top: 14px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* --- Location manager ---
   A parchment band, offset from the left margin: 1fr spacer / 4fr portrait /
   6fr body, 56px gutter ("FO Location Hub - Naples Mazda.dc.html" line 71).
   The grid itself is `.fo-split--offset` (§03) so the collapse behaviour and
   the spacer are single-sourced; only the band chrome lives here. */
.fo-location-manager {
	padding: var(--fo-section-y) var(--fo-gutter);
	border-top: 1px solid var(--fo-line);
	border-bottom: 1px solid var(--fo-line);
}

.fo-location-manager__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
}

/* 4:5 portrait in a 1px frame. `.fo-figure--portrait` supplies the ratio; the
   cap stops it towering over the body copy on a wide viewport. */
.fo-location-manager__portrait {
	max-width: 420px;
	width: 100%;
	align-self: start;
}

.fo-location-manager__image { display: block; width: 100%; height: 100%; object-fit: cover; }

.fo-location-manager__bio {
	margin: 0;
	max-width: 54ch;
}

.fo-location-manager__bio p {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-body);
	margin: 0 0 20px;
}

.fo-location-manager__bio p:last-child { margin-bottom: 0; }

.fo-location-manager__num { margin-bottom: 22px; }

.fo-location-manager__eyebrow {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 20px;
}

.fo-location-manager__name {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h2);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fo-ink);
	margin: 0 0 10px;
}

.fo-location-manager__role {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-location-manager__rule {
	width: 64px;
	height: 1px;
	border: 0;
	background-color: var(--fo-brass);
	margin: 28px 0;
}

.fo-location-manager__body { padding-top: 12px; min-width: 0; }

.fo-location-manager__contact { margin-top: 32px; }

@media (max-width: 992px) {
	.fo-location-manager__portrait { max-width: 320px; }
}

/* --- Location service area ---
   6fr map / 6fr prose, top-aligned ("FO Location Hub - Naples Mazda.dc.html"
   line 131). The right column is SERIF PROSE, never chips and never a grid:
   a sentence naming the communities reads as a claim a person wrote, which is
   what both the design spec and the GEO spec ask for. */
.fo-location-area { padding: 0 var(--fo-gutter) var(--fo-section-y); }

.fo-location-area__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
}

/* No map for this location: the prose takes the full measure rather than
   leaving a dead 6fr column. */
.fo-location-area.is-text-only .fo-location-area__inner {
	grid-template-columns: minmax(0, 1fr);
}

.fo-location-area__map { min-width: 0; }
.fo-location-area__body { min-width: 0; }
.fo-location-area__head { margin-bottom: 28px; }

/* SERIF PROSE, never chips or a grid. */
.fo-location-area__prose {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.75;
	color: var(--fo-body);
	max-width: 60ch;
	margin: 0;
}

/* Each community is underlined with a hairline — it reads as a ledger entry,
   not as a tag. */
.fo-location-area__community {
	border-bottom: 1px solid var(--fo-line);
	white-space: nowrap;
}

a.fo-location-area__community {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease), border-color var(--fo-ease);
}

a.fo-location-area__community:hover,
a.fo-location-area__community:focus-visible {
	color: var(--fo-navy);
	border-bottom-color: var(--fo-brass);
}

.fo-location-area__rule {
	height: 1px;
	border: 0;
	background-color: var(--fo-line);
	margin: 36px 0;
}

.fo-location-area__note {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.7;
	color: var(--fo-stone);
	max-width: 60ch;
	margin: 0;
}

/* --- Nearby offices — compact cards, 4-up, on a parchment band --- */
.fo-location-nearby {
	padding: var(--fo-section-y) var(--fo-gutter);
	border-top: 1px solid var(--fo-line);
	border-bottom: 1px solid var(--fo-line);
}

.fo-location-nearby__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
}

.fo-location-nearby__head { margin-bottom: 56px; }

.fo-location-nearby__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--fo-gap-cards);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The <li> is a flex box only so the card stretches to the tallest row. */
.fo-location-nearby__item {
	display: flex;
	min-width: 0;
	margin: 0;
}

.fo-location-nearby__item > .fo-nearby-card { flex: 1 1 auto; }

.fo-nearby-card {
	border: 1px solid var(--fo-line);
	background-color: var(--fo-white);
	padding: 26px;
	transition: border-color var(--fo-ease);
}

.fo-nearby-card:hover,
.fo-nearby-card:focus-within { border-color: var(--fo-brass); }

.fo-nearby-card__num {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--fo-brass);
	margin-bottom: 16px;
	font-variant-numeric: lining-nums;
}

.fo-nearby-card__name {
	font-family: var(--fo-font-display);
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--fo-ink);
	margin: 0 0 8px;
}

.fo-nearby-card__name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-nearby-card__name a:hover,
.fo-nearby-card__name a:focus-visible { color: var(--fo-navy); }

/* Adjacency note ("500 ft north · same manager"). Emphasised with ink,
   not brass — brass on parchment/white is 3.2:1. */
.fo-nearby-card__relation {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 18px;
}

.fo-nearby-card__relation--adjacent {
	color: var(--fo-ink);
	font-weight: 600;
}

.fo-nearby-card__address {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-body);
	font-style: normal;
}

.fo-nearby-card__link {
	display: inline-block;
	margin-top: 22px;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--fo-brass);
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-navy);
	text-decoration: none;
	transition: color var(--fo-ease), border-color var(--fo-ease);
}

.fo-nearby-card__link:hover,
.fo-nearby-card__link:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-ink);
}

@media (max-width: 992px) {
	.fo-location-nearby__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.fo-location-nearby__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Location coverage — the hub's "What we write at this desk." band ---
   The block delegates its tiles to florida-one/coverage-tiles, so the whole
   tile vocabulary comes from §10. Only the section frame lives here. */
.fo-location-coverage { padding: var(--fo-section-y) var(--fo-gutter); }

.fo-location-coverage__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
}

.fo-location-coverage__head { margin-bottom: 64px; }

/* Degraded path: coverage-tiles produced nothing, so the lines are listed as
   plain ghost links rather than a hand-copied imitation of a tile. */
.fo-location-coverage__fallback {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 44px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fo-location-coverage__fallback li { margin: 0; }

@media (max-width: 768px) {
	.fo-location-coverage__head { margin-bottom: 32px; }
}

/* ==========================================================================
   15 · BLOCK — florida-one/reviews (design spec 6.7)
   Server-rendered pull quotes. No widget chrome, no cards, no avatars.
   ========================================================================== */

/* The block paints no ground and no section padding of its own — the pattern
   or template owns the band. The one opening hairline belongs to the list, not
   to the wrapper: putting it on both stacked two 1px rules into a 2px one. */
.fo-reviews { min-width: 0; }

.fo-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fo-line);
}

.fo-reviews__item { margin: 0; }

/* "★★★★★  4.8 · 20 Google reviews" */
.fo-reviews__rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0 0 44px;
}

.fo-reviews__rating-link {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-reviews__rating-link:hover,
.fo-reviews__rating-link:focus-visible { color: var(--fo-ink); }

.fo-reviews__rating-text { white-space: nowrap; }

.fo-reviews__stars {
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--fo-stone);
}

/* The drawn stars are decorative outline marks, always paired with the text
   rating, so brass is permitted here — it is a mark, not type. */
.fo-reviews__stars--graphic {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--fo-brass);
}

.fo-reviews__star { display: block; }

/* An optional live widget layered beneath the server-rendered quotes. Never
   the only source of review content (GEO spec §4.2). */
.fo-reviews__enhancement { margin-top: 48px; }

.fo-review {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 64px;
	padding: 44px 0;
	border-bottom: 1px solid var(--fo-line);
	margin: 0;
}

.fo-review__quote {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
	color: var(--fo-ink);
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	max-width: 60ch;
	text-wrap: pretty;
}

/* The quote text is a <p> inside the <blockquote>; everything above inherits
   except the margin, which does not. */
.fo-review__quote p { margin: 0; }

.fo-review__attribution {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
}

.fo-review__cite {
	display: block;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-ink);
}

.fo-review__source {
	display: block;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* Single-column variant used on location hubs, where the block sits in the
   narrow column of a 5/7 split and the 8fr/4fr row would be unreadable. */
.fo-reviews--stacked .fo-review {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	padding: 32px 0;
}

.fo-reviews--stacked .fo-review__quote { font-size: 1.5rem; line-height: 1.42; max-width: 52ch; }

.fo-reviews--stacked .fo-review__attribution {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding-top: 0;
}

.fo-reviews--stacked .fo-review__source::before { content: "\00b7\00a0"; }

@media (max-width: 1200px) {
	.fo-review { gap: 40px; }
}

@media (max-width: 992px) {
	.fo-review {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.fo-review__attribution {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px 10px;
		padding-top: 0;
	}

	.fo-review__source::before { content: "\00b7\00a0"; }
}

@media (max-width: 768px) {
	.fo-reviews__rating { margin-bottom: 32px; }
	.fo-review { gap: 18px; padding: 28px 0; }
	.fo-reviews--stacked .fo-review { padding: 28px 0; }
	.fo-review__quote { line-height: 1.42; }
}

/* Trustindex, if it ever renders on a page: strip its chrome so it cannot
   reintroduce cards and shadows. The server-rendered block above is the
   canonical, crawlable version (GEO spec). */
.fo-reviews .ti-widget,
.fo-reviews .ti-widget-container {
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* ==========================================================================
   16 · BLOCK — florida-one/carrier-grid (design spec 6.8)
   Static grid. No carousel, no dots, no autoplay.
   ========================================================================== */

/* The block sets `--fo-carriers-columns` inline from its `columns` attribute;
   the mobile breakpoint below still wins, which is why the count is a custom
   property and not an inline grid-template-columns. */
.fo-carriers { --fo-carriers-columns: 4; }

.fo-carriers__eyebrow {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 44px;
}

.fo-carriers__grid {
	display: grid;
	grid-template-columns: repeat(var(--fo-carriers-columns, 4), minmax(0, 1fr));
	border-top: 1px solid var(--fo-line);
	border-left: 1px solid var(--fo-line);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Carrier links are nofollow outbound marks, not navigation: no underline, no
   colour of their own — the cell is the whole target. */
.fo-carriers__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.fo-carriers__item {
	min-height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-right: 1px solid var(--fo-line);
	border-bottom: 1px solid var(--fo-line);
}

/* Logo marks are non-text, so 40% opacity is permitted. */
.fo-carriers__logo,
.fo-carriers__item img,
.fo-carriers__item svg {
	max-width: 100%;
	max-height: 40px;
	width: auto;
	height: auto;
	display: block;
	filter: grayscale(1);
	opacity: 0.4;
	transition: opacity var(--fo-ease);
}

.fo-carriers__item:hover img,
.fo-carriers__item:hover svg,
.fo-carriers__item:focus-within img,
.fo-carriers__item:focus-within svg { opacity: 1; }

/* Text fallback where a mark has not been supplied. Full stone, not 40% —
   type must stay legible. */
.fo-carriers__name {
	font-family: var(--fo-font-ui);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fo-stone);
	text-align: center;
}

@media (max-width: 768px) {
	.fo-carriers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fo-carriers__item { min-height: 88px; }
	.fo-carriers__eyebrow { margin-bottom: 28px; }
}

/* ==========================================================================
   17 · BLOCK — florida-one/faq
   Hairline rules only. Brass +/- at 14px. The decorative mark is a sibling
   of the question text, never inside it.
   ========================================================================== */

.fo-faq { border-bottom: 1px solid var(--fo-line); }

.fo-faq__item { border-top: 1px solid var(--fo-line); }

/* Works for <button> in a heading, for <summary>, and for a plain element. */
.fo-faq__q,
.fo-faq > .fo-faq__item > details > summary.fo-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 32px;
	width: 100%;
	padding: 30px 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	text-align: left;
	font-family: var(--fo-font-display);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--fo-ink);
	cursor: pointer;
	list-style: none;
	transition: color var(--fo-ease);
}

.fo-faq__q::-webkit-details-marker { display: none; }
.fo-faq__q::marker { content: ""; }

.fo-faq__q:hover,
.fo-faq__q:focus-visible { color: var(--fo-navy); }

/* A heading wrapper around the question must not add its own type. The same
   applies to the plain <span> the block emits when headingLevel is 0 — both
   are text carriers, and the summary above already sets the type. */
.fo-faq__heading,
.fo-faq__text {
	display: block;
	margin: 0;
	min-width: 0;
	font: inherit;
	color: inherit;
}

.fo-faq__mark {
	flex: 0 0 auto;
	font-family: var(--fo-font-ui);
	font-size: 0.875rem;
	line-height: 1;
	color: var(--fo-brass);
	user-select: none;
}

/* If the mark element is left empty, generate it. */
.fo-faq__mark:empty::after { content: "+"; }

.fo-faq__q[aria-expanded="true"] .fo-faq__mark:empty::after,
details[open] > .fo-faq__q .fo-faq__mark:empty::after { content: "\2212"; }

.fo-faq__a {
	padding: 0 0 30px;
	margin: 0;
	max-width: 68ch;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.7;
	color: var(--fo-body);
}

.fo-faq__a[hidden] { display: none; }

/* The answer is either a bare run of text or wpautop()'d paragraphs, so the
   spacing is owned here rather than left to the UA margin. */
.fo-faq__a > * { margin: 0; }
.fo-faq__a > * + * { margin-top: 16px; }

/* When the question is open the answer sits directly beneath it with the
   question's own bottom padding removed, matching the mockup. */
.fo-faq__item.is-open > .fo-faq__q,
.fo-faq__item details[open] > .fo-faq__q { padding-bottom: 0; }

.fo-faq__item.is-open .fo-faq__a,
.fo-faq__item details[open] .fo-faq__a { padding-top: 18px; }

@media (max-width: 768px) {
	.fo-faq__q { gap: 20px; padding: 24px 0; font-size: 1.25rem; }
	.fo-faq__a { padding-bottom: 24px; }
}

/* ==========================================================================
   18 · BLOCK — florida-one/dealership-band
   The dark ink "Insured before you leave the lot" differentiator.
   ========================================================================== */

.fo-band {
	background-color: var(--fo-ink);
	color: var(--fo-on-dark);
	padding: var(--fo-section-y) var(--fo-gutter);
}

.fo-band__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--fo-gap);
	align-items: center;
}

.fo-band__body { min-width: 0; }

/* No photograph supplied: the copy takes the full width rather than leaving a
   dead column. `--media-last` flips the photograph to the trailing column. */
.fo-band--text-only .fo-band__inner { grid-template-columns: minmax(0, 1fr); }
.fo-band--media-last .fo-band__media { order: 2; }

.fo-band__media {
	position: relative;
	height: 460px;
	overflow: hidden;
	border: 1px solid var(--fo-line-dark);
	margin: 0;
}

.fo-band__image,
.fo-band__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.7) contrast(1.02) brightness(0.92);
}

.fo-band__num {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--fo-brass-light);
	margin-bottom: 26px;
	font-variant-numeric: lining-nums;
}

.fo-band__title {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h2);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fo-ivory);
	margin: 0 0 30px;
	text-wrap: balance;
}

.fo-band__lede {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-on-dark);
	max-width: 56ch;
	margin: 0 0 20px;
}

.fo-band__text {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.7;
	color: var(--fo-on-dark-soft);
	max-width: 56ch;
	margin: 0 0 40px;
}

/* The three desks, divided by 1px on-dark rules. */
.fo-band__desks {
	display: flex;
	border-top: 1px solid var(--fo-line-dark);
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
}

.fo-band__desk {
	flex: 1;
	min-width: 0;
	padding: 20px 28px 20px 0;
}

.fo-band__desk + .fo-band__desk { padding-left: 28px; }
.fo-band__desk:not(:last-child) { border-right: 1px solid var(--fo-line-dark); }

.fo-band__desk-num {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--fo-brass-light);
	margin-bottom: 10px;
	font-variant-numeric: lining-nums;
}

.fo-band__desk-name {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--fo-ivory);
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-band__desk-name a { color: inherit; text-decoration: none; transition: color var(--fo-ease); }

a.fo-band__desk-name:hover,
a.fo-band__desk-name:focus-visible,
.fo-band__desk-name a:hover,
.fo-band__desk-name a:focus-visible { color: var(--fo-brass-light); }

@media (max-width: 992px) {
	.fo-band__inner { grid-template-columns: minmax(0, 1fr); }
	.fo-band__media { height: 320px; order: 2; }
}

@media (max-width: 768px) {
	.fo-band__desks { display: block; }

	.fo-band__desk,
	.fo-band__desk + .fo-band__desk {
		padding: 18px 0;
		border-right: 0;
	}

	.fo-band__desk:not(:last-child) { border-bottom: 1px solid var(--fo-line-dark); }
}

/* ==========================================================================
   19 · CLOSING CTA BAND
   ========================================================================== */

.fo-cta {
	background-color: var(--fo-navy);
	color: var(--fo-on-dark);
	padding: 120px var(--fo-gutter);
}

.fo-cta__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--fo-gap);
	align-items: center;
}

.fo-cta__heading {
	font-family: var(--fo-font-display);
	font-size: clamp(1.75rem, 1.35rem + 1.65vw, 2.75rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--fo-ivory);
	margin: 0;
	max-width: 24ch;
	text-wrap: balance;
}

.fo-cta__phone {
	display: inline-block;
	font-family: var(--fo-font-display);
	font-size: clamp(1.875rem, 1.45rem + 1.7vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--fo-ivory);
	text-decoration: none;
	font-variant-numeric: lining-nums tabular-nums;
	transition: color var(--fo-ease);
}

a.fo-cta__phone:hover,
a.fo-cta__phone:focus-visible { color: var(--fo-brass-light); }

.fo-cta__meta {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass-light);
	margin: 14px 0 36px;
}

@media (max-width: 992px) {
	.fo-cta { padding-block: var(--fo-section-y); }
	.fo-cta__inner { grid-template-columns: minmax(0, 1fr); }
	.fo-cta__heading { max-width: none; }
}

/* ==========================================================================
   20 · FOOTER (design spec 6.9)
   ========================================================================== */

.fo-footer {
	background-color: var(--fo-ink);
	color: var(--fo-on-dark);
	padding: 88px var(--fo-gutter) 0;
}

.fo-footer__inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
}

.fo-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding-bottom: 44px;
}

.fo-footer__brand img,
.fo-footer__brand svg {
	display: block;
	height: 53px;
	width: auto;
	/* Knock the mark out to ivory without shipping a second asset. */
	filter: brightness(0) invert(1);
	opacity: 0.94;
}

/* Full-width brass rule beneath the brand row. */
.fo-footer__rule {
	height: 1px;
	border: 0;
	background-color: var(--fo-brass);
	margin: 0;
}

.fo-footer__cols {
	display: grid;
	/* Five columns: Fort Myers, Naples, Coverage, Company, Legal.
	   (Osi, 2026-08-07 — was four with both cities sharing a column.) */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 48px;
	padding: 56px 0 72px;
}

.fo-footer__head {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass-light);
	margin-bottom: 24px;
}

.fo-footer__links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.4;
	color: var(--fo-on-dark);
}

/* THE CITY COLUMNS need no rules of their own: each city is a <nav> column
   of ordinary .fo-footer__links rows whose anchors read city-first, "Fort
   Myers Auto Insurance". A two-tone prefix was tried and cut in review
   (Osi, 2026-08-07): the phrase is one link, one color, like every other
   link down here. See fo_render_matrix_links_footer(). */

.fo-footer__links a {
	color: var(--fo-on-dark);
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-footer__links a:hover,
.fo-footer__links a:focus-visible { color: var(--fo-ivory); }

.fo-footer__lang { margin-top: 28px; }

.fo-footer__bottom {
	border-top: 1px solid var(--fo-line-dark-soft);
	padding: 26px 0;
}

.fo-footer__bottom-inner {
	max-width: var(--fo-wide);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-on-dark-quiet);
}

.fo-footer__bottom-inner a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fo-ease);
}

.fo-footer__bottom-inner a:hover,
.fo-footer__bottom-inner a:focus-visible { color: var(--fo-on-dark); }

@media (max-width: 992px) {
	.fo-footer { padding-top: 64px; }
	.fo-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 40px 0 48px; }
}

@media (max-width: 560px) {
	.fo-footer__cols { grid-template-columns: minmax(0, 1fr); }

	.fo-footer__bottom-inner {
		flex-direction: column;
		gap: 10px;
		line-height: 1.8;
		font-size: 0.625rem;
	}
}

/* ==========================================================================
   21 · FORMS — Gravity Forms restyle (design spec 6.6)

   SELECTOR NOTE (live QA 2026-07-30). Every rule below was originally scoped
   to `.gform_wrapper.gravity-theme`. Gravity Forms only adds `gravity-theme`
   when a form renders in its MODERN markup; forms whose markupVersion is 1
   render as `gform_wrapper gform_legacy_markup_wrapper` instead. Both forms
   on this site (id 2 quote, id 3 contact) render legacy, so all 44 rules in
   this section were matching nothing at all: labels came out at body size in
   uppercase with 2.4px tracking, inputs kept Gravity's default 5px/4px
   padding, and the focus ring, checkbox, radio and validation styling never
   applied.

   The scope is now `.gform_wrapper.gform_wrapper` — the same class twice.
   That is deliberate, not a typo. It keeps specificity at exactly (0,2,0),
   identical to what these rules had before, so nothing else in the cascade
   shifts and the existing !important overrides stay meaningful, while
   matching the wrapper whichever markup version Gravity emits.
   ========================================================================== */

.fo-form,
.gform_wrapper.gform_wrapper {
	font-family: var(--fo-font-ui);
	color: var(--fo-body);
}

.fo-form__intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
	flex-wrap: wrap;
}

.fo-form__step {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* Two-step progress: a 1px/2px brass rule, never a filled pill. */
.fo-form__progress,
.gform_wrapper .gf_progressbar_wrapper .gf_progressbar {
	display: flex;
	gap: 0;
	height: 2px;
	margin-bottom: 44px;
	background-color: var(--fo-line);
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
}

.fo-form__progress-step {
	flex: 1;
	height: 2px;
	background-color: var(--fo-line);
}

.fo-form__progress-step.is-done,
.fo-form__progress-step.is-current { background-color: var(--fo-brass); }

.gform_wrapper .gf_progressbar_percentage {
	background-color: var(--fo-brass) !important;
	border-radius: 0 !important;
	height: 2px;
	text-indent: -9999px;
}

.gform_wrapper .gf_progressbar_title,
.gform_wrapper .gf_progressbar_percentage span {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* --- Numbered group heads: 01 · YOUR DETAILS --- */
.gform_wrapper .gform_fields { counter-reset: fo-gsection; }

.fo-form__group-head,
.gform_wrapper .gsection {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border: 0;
	border-bottom: 1px solid var(--fo-line);
	padding: 0 0 16px;
	margin: 40px 0 28px;
}

.gform_wrapper .gform_fields > .gsection:first-child { margin-top: 0; }

.fo-form__group-num {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	line-height: 1;
	letter-spacing: 0.18em;
	color: var(--fo-brass);
	font-variant-numeric: lining-nums;
}

.fo-form__group-title,
.gform_wrapper .gsection .gsection_title {
	font-family: var(--fo-font-ui) !important;
	font-size: var(--fo-fs-label) !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0;
	line-height: 1.2;
}

/* The 01/02/03 numeral is generated, decorative, and outside the title text. */
.gform_wrapper .gsection .gsection_title::before {
	counter-increment: fo-gsection;
	content: counter(fo-gsection, decimal-leading-zero);
	display: inline-block;
	margin-right: 14px;
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-numeral);
	letter-spacing: 0.18em;
	color: var(--fo-brass);
	text-transform: none;
}

/* --- Labels above fields --- */
.fo-form label,
.gform_wrapper.gform_wrapper .gfield_label,
.gform_wrapper.gform_wrapper .gfield_label_before_complex,
.gform_wrapper.gform_wrapper .ginput_complex label {
	display: block;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 10px;
}

/* --- "(Required)" in claret, never a red asterisk ---
   Doubled class and !important on the two properties Gravity's own theme
   sheet was winning: it set the indicator to 13px in its danger red,
   rgb(192,43,10), which is neither the label scale nor a colour in this
   palette. Surfaced when both forms moved to modern markup 2026-07-30. */
.fo-required,
.gform_wrapper.gform_wrapper .gfield_required,
.gform_wrapper.gform_wrapper .gfield_required_text,
.gform_wrapper.gform_wrapper .gfield_required_custom {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label) !important;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-claret) !important;
	margin-left: 6px;
}

/* Suppress the asterisk glyph and substitute the word. The PHP layer should
   also set GF's "(Required)" required-indicator so assistive tech reads real
   text rather than generated content — see the note in the build report. */
.gform_wrapper.gform_wrapper .gfield_required.gfield_required_asterisk {
	font-size: 0 !important;
	line-height: 0;
}

.gform_wrapper.gform_wrapper .gfield_required.gfield_required_asterisk::after {
	content: "(Required)";
	font-size: var(--fo-fs-label);
	line-height: 1.2;
	color: var(--fo-claret);
}

.gform_wrapper .gform_required_legend { display: none; }

/* --- Fields: 48px, warm white, 1px line border, 2px radius --- */
.fo-form input[type="text"],
.fo-form input[type="email"],
.fo-form input[type="tel"],
.fo-form input[type="url"],
.fo-form input[type="number"],
.fo-form select,
.fo-form textarea,
.gform_wrapper.gform_wrapper input[type="text"],
.gform_wrapper.gform_wrapper input[type="email"],
.gform_wrapper.gform_wrapper input[type="tel"],
.gform_wrapper.gform_wrapper input[type="url"],
.gform_wrapper.gform_wrapper input[type="number"],
.gform_wrapper.gform_wrapper input[type="password"],
.gform_wrapper.gform_wrapper select,
.gform_wrapper.gform_wrapper textarea {
	width: 100%;
	/* min-height is !important for the same reason: Gravity's legacy sheet sets
	   min-height:32px through a `input:not([type=radio]):not([type=checkbox])`
	   chain that scores (0,5,1). It only became visible once the padding and
	   line-height above were corrected — with Gravity's line-height:2 the
	   content box happened to exceed 32px, so the collapse was masked. On a
	   phone the fields dropped to 32px, under the 44px minimum touch target. */
	min-height: var(--fo-field-h) !important;
	/* !important on padding, font-size and line-height only. Gravity's legacy
	   sheet carries `.gform_legacy_markup_wrapper ul.gform_fields li.gfield
	   input[type=text]`, which is (0,3,3) and outranks this rule's (0,3,1).
	   Without these three the fields kept Gravity's 5px/4px padding and
	   line-height 2 inside a 48px box, so the text sat hard against the left
	   border. Everything else here already wins on its own. */
	padding: 0 14px !important;
	background-color: var(--fo-white);
	border: 1px solid var(--fo-line);
	border-radius: 2px;
	box-shadow: none;
	font-family: var(--fo-font-body);
	font-size: 1rem !important;
	line-height: 1.5 !important;
	color: var(--fo-body);
	appearance: none;
	transition: border-color var(--fo-ease), background-color var(--fo-ease);
}

.fo-form textarea,
.gform_wrapper.gform_wrapper textarea {
	min-height: 144px;
	padding: 14px !important;
	line-height: 1.6 !important;
	resize: vertical;
}

/* Native select caret, drawn as the same 6px rotated corner as the nav. */
.fo-form select,
.gform_wrapper.gform_wrapper select {
	padding-right: 40px;
	background-image:
		linear-gradient(var(--fo-stone), var(--fo-stone)),
		linear-gradient(var(--fo-stone), var(--fo-stone));
	background-size: 7px 1px, 1px 7px;
	background-position: right 18px top 50%, right 18px top 50%;
	background-repeat: no-repeat;
}

.fo-form ::placeholder,
.gform_wrapper.gform_wrapper ::placeholder {
	color: var(--fo-stone);
	opacity: 1;
}

/* --- Complex fields (name), and surviving wpautop ------------------------

   A "Your name" field is one .ginput_complex holding a <span> per sub-field.
   Those spans must sit side by side.

   Two things get in the way. Gravity's legacy sheet floats them at fixed
   percentages, which does not survive a narrow column. And core's
   core/shortcode block renders as wpautop( do_shortcode( ... ) ), which reads
   Gravity's indented markup as prose and wraps EACH span in its own <p> with
   <br> around the input and its sub-label. Two spans in two block-level
   paragraphs cannot be laid out as a row, which is how the name field came to
   be 316px tall against 71px for every other field on the form.

   florida_one_render_gravityform_shortcode() in inc/cleanup.php stops the
   wpautop at source. This block is the layout, written so that it holds
   whether or not those stray <p> wrappers are present: display:contents makes
   a wpautop paragraph pass its children straight through to this flex
   container, and matches nothing at all once the PHP fix is live. Keep both.
   Live QA 2026-07-30. */
.gform_wrapper.gform_wrapper .ginput_complex {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 8px;
}

.gform_wrapper.gform_wrapper .ginput_complex > p {
	display: contents;
}

.gform_wrapper.gform_wrapper .ginput_complex > span,
.gform_wrapper.gform_wrapper .ginput_complex > p > span {
	display: block;
	float: none !important;
	width: auto !important;
	min-width: 0;
	flex: 1 1 180px;
	padding: 0 !important;
	margin: 0 !important;
}

/* The <br>s are wpautop's, never Gravity's own, and they only ever separate
   an input from its sub-label. Scoped to the field container so nothing in a
   description or consent paragraph is affected. */
.gform_wrapper.gform_wrapper .ginput_complex br,
.gform_wrapper.gform_wrapper .ginput_container > br {
	display: none;
}

/* Consent: the tick and its sentence are one line, not two. The checkbox is
   already styled correctly by the rules further down; the only problem was
   that Gravity's consent label is display:block, so it wrapped underneath. */
.gform_wrapper.gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.gform_wrapper.gform_wrapper .gfield_consent_label {
	margin: 0;
	line-height: 1.5;
}

/* Sub-labels (First / Last) sit under their input and are a size down from
   the field label, not the 17px body size Gravity leaves them at. */
.gform_wrapper.gform_wrapper .gform-field-label--type-sub,
.gform_wrapper.gform_wrapper .ginput_complex label {
	display: block;
	margin-top: 6px;
	font-family: var(--fo-font-ui);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* Focus: 1px brass border + 2px brass underline. No glow, no shadow. */
.fo-form input:focus,
.fo-form select:focus,
.fo-form textarea:focus,
.gform_wrapper.gform_wrapper input:focus,
.gform_wrapper.gform_wrapper select:focus,
.gform_wrapper.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--fo-brass);
	border-bottom-width: 2px;
	box-shadow: none;
}

/* Keyboard users still get the visible ring on top of the brass border. */
.fo-form input:focus-visible,
.fo-form select:focus-visible,
.fo-form textarea:focus-visible,
.gform_wrapper.gform_wrapper input:focus-visible,
.gform_wrapper.gform_wrapper select:focus-visible,
.gform_wrapper.gform_wrapper textarea:focus-visible {
	outline: 2px solid var(--fo-brass);
	outline-offset: 2px;
}

/* Row layout — GF's own grid, kept, with the house gutter. */
.gform_wrapper.gform_wrapper .gform_fields { grid-row-gap: 24px; }
.gform_wrapper.gform_wrapper .gfield { min-width: 0; }

/* --- Checkboxes and radios: 18px square, 1px border, brass check --- */
.fo-form .gfield_checkbox,
.fo-form .gfield_radio,
.gform_wrapper.gform_wrapper .gfield_checkbox,
.gform_wrapper.gform_wrapper .gfield_radio {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper.gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fo-form input[type="checkbox"],
.fo-form input[type="radio"],
.gform_wrapper.gform_wrapper input[type="checkbox"],
.gform_wrapper.gform_wrapper input[type="radio"] {
	appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: var(--fo-white);
	border: 1px solid var(--fo-line);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--fo-ease);
	display: inline-grid;
	place-content: center;
}

.fo-form input[type="radio"],
.gform_wrapper.gform_wrapper input[type="radio"] { border-radius: 999px; }

.fo-form input[type="checkbox"]::before,
.gform_wrapper.gform_wrapper input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 6px;
	border-left: 1.5px solid var(--fo-brass);
	border-bottom: 1.5px solid var(--fo-brass);
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
	transition: opacity var(--fo-ease);
}

.fo-form input[type="checkbox"]:checked,
.fo-form input[type="radio"]:checked,
.gform_wrapper.gform_wrapper input[type="checkbox"]:checked,
.gform_wrapper.gform_wrapper input[type="radio"]:checked {
	border-color: var(--fo-brass);
}

.fo-form input[type="checkbox"]:checked::before,
.gform_wrapper.gform_wrapper input[type="checkbox"]:checked::before { opacity: 1; }

.fo-form input[type="radio"]::before,
.gform_wrapper.gform_wrapper input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background-color: var(--fo-brass);
	opacity: 0;
	transition: opacity var(--fo-ease);
}

.fo-form input[type="radio"]:checked::before,
.gform_wrapper.gform_wrapper input[type="radio"]:checked::before { opacity: 1; }

/* Choice labels are sentence-case serif, not uppercase UI type. */
.gform_wrapper.gform_wrapper .gchoice label,
.fo-form .gchoice label {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fo-body);
	margin: 0;
	cursor: pointer;
}

@media (max-width: 768px) {
	.fo-form .gfield_checkbox,
	.fo-form .gfield_radio,
	.gform_wrapper.gform_wrapper .gfield_checkbox,
	.gform_wrapper.gform_wrapper .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Consent: parchment inset, 2px brass left rule --- */
.fo-consent,
.gform_wrapper .gfield--type-consent,
.gform_wrapper .gfield.fo-consent {
	background-color: var(--fo-parchment);
	border-left: 2px solid var(--fo-brass);
	padding: 24px 26px;
}

.fo-consent .gfield_consent_description,
.gform_wrapper .gfield_consent_description {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-stone);
	background: transparent;
	border: 0;
	padding: 12px 0 0;
	margin: 0;
	max-height: none;
	overflow: visible;
}

/* --- Field descriptions, validation --- */
.gform_wrapper.gform_wrapper .gfield_description {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-stone);
	padding-top: 8px;
}

.gform_wrapper.gform_wrapper .gfield_validation_message,
.gform_wrapper.gform_wrapper .validation_message {
	background-color: transparent;
	border: 0;
	border-left: 2px solid var(--fo-claret);
	border-radius: 0;
	padding: 6px 0 6px 12px;
	margin-top: 10px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fo-claret);
}

.gform_wrapper.gform_wrapper .gfield_error input,
.gform_wrapper.gform_wrapper .gfield_error select,
.gform_wrapper.gform_wrapper .gfield_error textarea {
	border-color: var(--fo-claret);
}

.gform_wrapper .gform_validation_errors {
	background-color: var(--fo-parchment) !important;
	border: 0 !important;
	border-left: 2px solid var(--fo-claret) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 20px 24px;
}

.gform_wrapper .gform_validation_errors > h2 {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h4);
	font-weight: 400;
	color: var(--fo-claret);
}

/* --- Submit / next / previous --- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin: 36px 0 0;
	padding: 0;
	border: 0;
}

.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 15px 30px;
	background-color: var(--fo-navy);
	border: 1px solid var(--fo-navy);
	border-radius: 2px;
	box-shadow: none;
	font-family: var(--fo-font-ui);
	/* Same override reason as the fields above: Gravity's legacy footer rule
	   sets the submit font-size and beats this one, so the button came out at
	   17px uppercase with 0.14em tracking, roughly half again the width of a
	   .fo-btn and visibly not part of the same button family. */
	font-size: var(--fo-fs-label) !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-ivory);
	cursor: pointer;
	transition: background-color var(--fo-ease), color var(--fo-ease),
		border-color var(--fo-ease);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper .gform_next_button:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible,
.gform_wrapper button[type="submit"]:focus-visible {
	background-color: var(--fo-brass);
	border-color: var(--fo-brass);
	color: var(--fo-ink);
}

.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_previous_button:hover {
	background-color: transparent;
	border-color: var(--fo-ink);
	color: var(--fo-ink);
}

.gform_wrapper .gform_previous_button:hover,
.gform_wrapper .gform_previous_button:focus-visible {
	background-color: var(--fo-ink);
	color: var(--fo-ivory);
}

.fo-form__footnote {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-stone);
	max-width: 46ch;
}

.gform_wrapper .gform_confirmation_message {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body-lg);
	line-height: 1.65;
	color: var(--fo-body);
	border-left: 2px solid var(--fo-brass);
	background-color: var(--fo-parchment);
	padding: 26px 28px;
	max-width: 60ch;
}

@media (max-width: 560px) {
	.gform_wrapper .gform_footer,
	.gform_wrapper .gform_page_footer { flex-direction: column; align-items: stretch; }

	.gform_wrapper .gform_button,
	.gform_wrapper .gform_next_button,
	.gform_wrapper .gform_previous_button,
	.gform_wrapper input[type="submit"] { width: 100%; }
}

/* Kill GF's honeypot layout artefacts without hiding it from the plugin. */
.gform_wrapper .gform_validation_container { display: none !important; }

/* ==========================================================================
   22 · EDITORIAL NOTES AND PLACEHOLDERS
   Per the placeholder law: unknown phone numbers and hours render as VISIBLE
   placeholders. They are styled to read as pending, never as fact.
   ========================================================================== */

.fo-placeholder {
	color: var(--fo-stone);
	font-variant-numeric: lining-nums tabular-nums;
}

.fo-note {
	display: flex;
	gap: 10px;
	align-items: baseline;
	max-width: 900px;
	margin-top: 26px;
}

.fo-note::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background-color: var(--fo-brass);
	transform: translateY(-1px);
}

.fo-note__text {
	font-family: var(--fo-font-mono);
	font-size: 0.625rem;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--fo-stone);
}

/* An editor-only notice printed by a dynamic block that resolved to nothing
   (no fo_person records, no stored review quotes). It never reaches the front
   end — the render callbacks return '' outside the editor — so it is allowed
   to look like scaffolding rather than like content. */
.fo-block-empty {
	margin: 0;
	padding: 20px;
	border: 1px dashed var(--fo-line);
	font-family: var(--fo-font-ui);
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--fo-stone);
	background-color: transparent;
}

/* The covers list inside a coverage line's post content: a serif list ruled
   with hairlines, per design spec 9.5. Explicitly NOT checkmark icons, cards
   or coloured panels — the marker is a short brass rule, nothing more. */
.fo-covers {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fo-line);
	max-width: 68ch;
}

.fo-covers li {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid var(--fo-line);
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-body);
	line-height: 1.6;
	color: var(--fo-body);
}

.fo-covers li::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 1px;
	background-color: var(--fo-brass);
	transform: translateY(-0.35em);
}

/* ==========================================================================
   23 · REDUCED MOTION
   Colour transitions are already the only motion in the system; the drawer
   slide and the dropdown fade are the two exceptions and both are removed.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fo-drawer__panel,
	.fo-drawer__scrim,
	.fo-nav__panel,
	.fo-portrait,
	.fo-portrait img,
	.fo-nearby-card,
	.fo-carriers__logo,
	.fo-carriers__item img,
	.fo-carriers__item svg {
		transition: none;
	}

	.fo-drawer__panel { transform: none; }

	.fo-drawer:not(.is-open):not([aria-hidden="false"]) .fo-drawer__panel {
		display: none;
	}
}

/* ==========================================================================
   24 · EDITORIAL REVIEW FLAG
   Shown only to logged-in editors (see fo_draft_notice_html). The public never
   receives this markup at all, so it costs nothing on a normal page load.
   ========================================================================== */

.fo-draft-flag {
	display: inline-block;
	margin-top: 10px;
	padding: 3px 9px;
	border: 1px solid var(--fo-claret);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--ui, Inter, sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-claret);
	background-color: transparent;
}

/* ==========================================================================
   24 · NOTES — the blog index and article
   Per the "Florida One - Notes (blog)" comp of 2026-08-03. Reuses the existing
   grounds, hairlines and type scale; nothing new is introduced except the card
   and the two meta lines.
   ========================================================================== */

/* The row carries its own layout.
   It used to get `display:flex` from WordPress, because the filter row was a
   core group with {"layout":{"type":"flex"}} and the editor emits is-layout-flex
   for that. The row is a block now (blocks/note-filters.php) so nothing supplies
   it, the `gap` below did nothing, and the categories stacked one per line down
   the left of the page. A component that needs flex should say so itself. */
.fo-notes__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 22px;
	margin-bottom: 40px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--fo-line);
}

.fo-notes__filters > p { margin: 0; }

.fo-notes__filter {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	text-decoration: none;
}

.fo-notes__filter.is-current,
.fo-notes__filter:hover { color: var(--fo-ink); }

/* A card in name only: a hairline and a column, never a box. The design law
   forbids shadows and radii, and the whole point of this grid is that it reads
   as an index rather than a set of tiles. */
.fo-notes__list {
	gap: 0 var(--fo-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fo-note-card {
	padding: 30px 0;
	border-top: 1px solid var(--fo-line);
}

.fo-note-card__cat a,
.fo-note__cat a {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	text-decoration: none;
}

.fo-note-card__date,
.fo-note__date {
	margin: 6px 0 0;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-note-card__title {
	margin: 14px 0 0;
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.25;
}

.fo-note-card__title a { color: var(--fo-ink); text-decoration: none; }
.fo-note-card__title a:hover { color: var(--fo-navy); }

.fo-note-card__standfirst {
	margin: 12px 0 0;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.6;
	color: var(--fo-body);
}

.fo-note-card__author,
.fo-note__byline {
	margin: 16px 0 0;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-note__meta { gap: 18px; align-items: baseline; }
.fo-note__meta .fo-note__date { margin-top: 0; }

.fo-note__hero { margin-block: 0; }
.fo-note__hero img { display: block; width: 100%; height: auto; }

.fo-notes__pagination {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--fo-line);
}

.fo-notes__pagination a {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--fo-brass);
	padding-bottom: 3px;
}

@media (max-width: 768px) {
	.fo-notes__filters { gap: 16px; margin-bottom: 28px; }
	.fo-note-card { padding: 24px 0; }
}

/* ==========================================================================
   25 · COVERAGE SINGLE — the 2026-08-03 comp
        (design/Florida One - Auto Insurance.html)

   Five components, all of them hairline-and-type rather than card-and-shadow,
   so they inherit the house rules without asking for exceptions: no shadow, no
   radius above 2px, no gradient, colour-only transitions.

   `.fo-glance`    the "At a glance" panel beside the hero
   `.fo-covergrid` the two-column list of what a policy covers
   `.fo-pull`      the brass-ruled aside beside a section heading
   `.fo-notegrid`  the 2x2 "what moves the price" grid
   `.fo-aside`     the bordered panel in the right-hand column
   ========================================================================== */

/* --- At a glance ---------------------------------------------------------
   A description list, not a table: these are term/value pairs and a screen
   reader should read them as such. The dt/dd are laid out as a row each with a
   hairline above, which is what the comp draws. */
.fo-glance {
	border-left: 1px solid var(--fo-line);
	padding-left: 40px;
}

.fo-glance__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0 0 22px;
}

.fo-glance__list {
	margin: 0;
	padding: 0;
}

.fo-glance__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid var(--fo-line);
}

.fo-glance__row:last-child { border-bottom: 1px solid var(--fo-line); }

.fo-glance__term {
	font-family: var(--fo-font-body);
	font-size: 1.0625rem;
	color: var(--fo-body);
	margin: 0;
}

.fo-glance__value {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fo-ink);
	margin: 0;
	text-align: right;
}

/* --- What it covers ------------------------------------------------------
   The comp gives the first two items a brass rule and a REQUIRED chip, and the
   rest a line rule. That is not decoration: in Florida two of these are
   compulsory and the rest are choices, and the page should say which is which
   before it says anything else. */
.fo-covergrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
}

.fo-covergrid__item {
	border-top: 1px solid var(--fo-line);
	padding: 22px 0;
}

.fo-covergrid__item--required { border-top-color: var(--fo-brass); }

.fo-covergrid__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.fo-covergrid__name {
	font-family: var(--fo-font-display);
	font-size: 1.4375rem;
	line-height: 1.2;
	color: var(--fo-ink);
}

.fo-covergrid__chip {
	flex: none;
	font-family: var(--fo-font-ui);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fo-brass);
	border: 1px solid var(--fo-brass);
	border-radius: 2px;
	padding: 3px 7px;
	white-space: nowrap;
}

.fo-covergrid__note {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--fo-stone);
}

/* --- The brass-ruled aside beside a heading ------------------------------ */
.fo-pull {
	border-left: 2px solid var(--fo-brass);
	padding-left: 22px;
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fo-body);
}

/* --- What moves the price ------------------------------------------------ */
.fo-notegrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
	border-top: 1px solid var(--fo-brass);
}

.fo-notegrid__item { padding: 26px 0; }

/* The first row sits under the brass rule the grid itself draws; every item
   after it needs its own. nth-child rather than a class so the markup stays
   free of position information. */
.fo-notegrid__item:nth-child(n + 3) { border-top: 1px solid var(--fo-line); }

.fo-notegrid__label {
	font-family: var(--fo-font-ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 14px;
}

.fo-notegrid__body {
	font-family: var(--fo-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--fo-body);
	margin: 0;
}

/* --- The bordered aside panel -------------------------------------------- */
.fo-aside {
	border: 1px solid var(--fo-line);
	background: var(--fo-parchment);
	padding: 32px 30px;
}

.fo-aside__label {
	font-family: var(--fo-font-ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 18px;
}

.fo-aside__title {
	font-family: var(--fo-font-display);
	font-size: 1.625rem;
	line-height: 1.2;
	color: var(--fo-ink);
	margin: 0 0 16px;
}

.fo-aside__body {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fo-body);
	margin: 0 0 24px;
}

.fo-aside .fo-btn { display: block; text-align: center; }

/* --- Narrow ---------------------------------------------------------------
   Everything collapses to one column, and the glance panel loses its left rule
   for a top one, because a vertical rule beside full-width content reads as a
   stray line rather than as a division. */
@media (max-width: 900px) {
	.fo-covergrid,
	.fo-notegrid { grid-template-columns: 1fr; }

	.fo-notegrid__item:nth-child(n + 2) { border-top: 1px solid var(--fo-line); }

	.fo-glance {
		border-left: 0;
		border-top: 1px solid var(--fo-brass);
		padding-left: 0;
		padding-top: 32px;
		margin-top: 40px;
	}
}

@media (max-width: 560px) {
	.fo-glance__row { gap: 12px; }
	.fo-covergrid__head { flex-wrap: wrap; gap: 8px; }
	.fo-aside { padding: 26px 22px; }
}

/* ==========================================================================
   26 · QUOTE HANDOFF — the CTA panel and the source reference

   Two halves of one journey. `.fo-quote-cta` sits at the foot of a coverage
   page or a location hub and sends the reader to /quote/ carrying a reference;
   `.fo-quote-source` sits at the head of the quote page and names what they
   came from. Both are type and hairline, no card and no panel fill, because the
   sections they sit in already carry a ground.
   ========================================================================== */

.fo-quote-cta__lead { margin: 18px 0 0; }
.fo-quote-cta__chip { margin: 24px 0 0; }
.fo-quote-cta__actions { margin-top: 28px; }
.fo-quote-cta__note { margin-top: 26px; }

/* --- The reference on the quote page ---
   Brass rule on the leading edge rather than a box: it is an aside about where
   the reader has been, and a filled panel here would compete with the form it
   sits above. */
.fo-quote-source {
	border-left: 2px solid var(--fo-brass);
	padding-left: 22px;
	margin-bottom: 36px;
}

.fo-quote-source__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 10px;
}

.fo-quote-source__line {
	font-family: var(--fo-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--fo-body);
	margin: 0;
	max-width: 62ch;
}

.fo-quote-source__back {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 14px 0 0;
}

.fo-quote-source__back a { color: var(--fo-stone); }
.fo-quote-source__back a:hover,
.fo-quote-source__back a:focus-visible { color: var(--fo-ink); }

@media (max-width: 560px) {
	.fo-quote-source { padding-left: 18px; margin-bottom: 28px; }
}

/* ==========================================================================
   27 · MAP EMBED

   A real map on the location hubs, replacing the schematic there. Framed with a
   hairline like every other figure on the site rather than left as a bare
   iframe, and with the directions link beneath it in the same voice as the
   figure captions.
   ========================================================================== */

.fo-mapembed {
	margin-top: 28px;
}

.fo-mapembed iframe {
	display: block;
	width: 100%;
	border: 1px solid var(--fo-line);
	/* The provider's own tiles are full colour and the rest of the page is not.
	   A light desaturation settles it into the palette without making the roads
	   unreadable, which is what a heavier filter would do. */
	filter: saturate(0.82) contrast(1.02);
}

.fo-mapembed__link {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 14px 0 0;
}

.fo-mapembed__link a { color: var(--fo-stone); }
.fo-mapembed__link a:hover,
.fo-mapembed__link a:focus-visible { color: var(--fo-ink); }

@media (prefers-reduced-motion: reduce) {
	.fo-mapembed iframe { filter: none; }
}

/* ==========================================================================
   28 · NOTES AND FAQs, FINALISED
   Per the "Florida One - Notes (blog)" and "Florida One - FAQs" comps of
   2026-08-04. Section 24 built the notes index and article as far as static
   markup could take them; this is the rest of both comps, now that the parts
   that had to be derived from the posts are blocks.

   WITHOUT THE NUMERALS. Both comps number things — 01-05 down the FAQ sections,
   01/02/03 on the article's list, "Page 01 of 04" under the grid. Osi,
   2026-08-04: "but without numbers." The numerals were removed sitewide on
   2026-08-02 for the reason they are refused here: a numeral in front of a
   heading reads as a step in a sequence, and nobody is meant to read all
   twenty-five answers in order. Dates and read times stay — those are facts
   about an article, not decoration on it.
   ========================================================================== */

/* --- The masthead photograph ---
   A fixed 4:3 window rather than the source file's 3:4 portrait, so the figure
   sits level with the block of type beside it instead of towering over it. The
   source is the office photograph the FAQ page uses; object-fit takes the top
   of it, which is where the window and the desk are. */
.fo-notes-masthead__figure {
	margin: 0;
	aspect-ratio: 4 / 3;
}

.fo-notes-masthead__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

@media (max-width: 992px) {
	/* Below the split's own collapse the photograph goes last and shorter: on a
	   phone the first thing wanted is the headline and the lede, not a picture
	   of a desk. */
	.fo-notes-masthead__figure {
		aspect-ratio: 16 / 9;
		margin-top: 32px;
	}
}

/* --- The filter row, now with the count and the language pair opposite ---
   `.fo-notes__filters` (§24) keeps its own hairline when it stands alone. In
   the bar it hands the hairline up to the bar, so the row and its meta sit on
   one rule rather than two. */
.fo-notes__filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px 32px;
	margin-bottom: 40px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--fo-line);
}

.fo-notes__filterbar .fo-notes__filters {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
	flex: 1 1 auto;
}

.fo-notes__filtermeta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	flex: 0 0 auto;
}

.fo-notescount {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* --- The read time ---
   Same weight as the date it sits beside; it is the second half of one meta
   line, not a badge. */
.fo-readtime {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* --- The card meta line ---
   Category, date and read time on one baseline, separated by rules rather than
   by punctuation so the three parts stay legible when the card is narrow and
   the line wraps. */
.fo-note-card__meta {
	gap: 6px 14px;
	align-items: baseline;
	margin-top: 16px;
}

.fo-note-card__meta .fo-note-card__date { margin-top: 0; }

.fo-note-card__figure { margin: 0 0 18px; }

.fo-note-card__figure img {
	display: block;
	width: 100%;
	height: auto;
	/* The same restrained treatment the location photographs get (§13): the
	   photograph supports the headline, it does not compete with it. */
	filter: saturate(0.92) contrast(1.02);
}

/* --- THE LEAD ARTICLE ---
   The first card in the grid, given the comp's opening treatment: full width,
   larger type, more air, and a rule beneath rather than above.

   Done here rather than with a second query on purpose. Two queries — one post,
   then nine at offset one — page independently, so the lead reappears at the
   top of page two, and the empty state has to be written twice. One query
   styled by position pages correctly and degrades to a plain grid.

   The selector is deliberately :first-child rather than :nth-child(1) of a
   named class: core/post-template emits <li> and nothing else to hook. */
.fo-notes__list > li:first-child {
	grid-column: 1 / -1;
}

.fo-notes__list > li:first-child .fo-note-card {
	border-top: 0;
	border-bottom: 1px solid var(--fo-line);
	padding-top: 0;
	padding-bottom: 44px;
	margin-bottom: 22px;
}

/* THE LEAD: the photograph on the left, everything else beside it, per the
   comp. `grid-template-areas` rather than per-item columns, because the layout
   has to hold in two quite different cases — with a photograph and without —
   and areas make the second case one line instead of five overrides.

   Without a photograph the figure element does not exist at all (core renders
   nothing), the media column collapses to zero, and the text spreads across the
   full width. `minmax(0, …)` on both tracks is what allows that collapse; `1fr`
   would hold a phantom column open. */
.fo-notes__list > li:first-child .fo-note-card {
	display: grid;
	/* `fit-content(42%)` and not `5fr`, which is the whole point of the line. An
	   fr track claims its share of the free space whether or not anything is in
	   it, so on an article with no photograph — every one of them until these
	   were bundled, and any future one published without — the media column
	   would sit holding two fifths of the row empty. A content-sized track
	   collapses to zero when its only child does not exist, and clamps to 42%
	   when it does. No :has, no template branch. */
	grid-template-columns: fit-content(42%) minmax(0, 1fr);
	grid-template-areas:
		"media meta"
		"media title"
		"media standfirst"
		"media author";
	grid-template-rows: auto auto auto 1fr;
	gap: 0 var(--fo-gap);
	align-items: start;
}

.fo-notes__list > li:first-child .fo-note-card__figure {
	grid-area: media;
	margin: 0;
	align-self: stretch;
}

/* The photograph fills its column at the comp's proportion whatever the source
   file is. Every bundled note photograph is already cropped to 3:2 by the
   build, so this is a guarantee rather than a correction — but a photograph
   swapped in later through the admin should not be able to break the row. */
.fo-notes__list > li:first-child .fo-note-card__figure img {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

.fo-notes__list > li:first-child .fo-note-card__meta { grid-area: meta; margin-top: 0; }
.fo-notes__list > li:first-child .fo-note-card__title { grid-area: title; }
.fo-notes__list > li:first-child .fo-note-card__standfirst { grid-area: standfirst; }
.fo-notes__list > li:first-child .fo-note-card__author { grid-area: author; }

.fo-notes__list > li:first-child .fo-note-card__title {
	font-size: var(--fo-fs-h2);
	margin-top: 18px;
	max-width: 22ch;
}

.fo-notes__list > li:first-child .fo-note-card__standfirst {
	font-size: 1.0625rem;
	line-height: 1.7;
	margin-top: 20px;
	max-width: 54ch;
}

.fo-notes__list > li:first-child .fo-note-card__author { margin-top: 22px; }

/* --- Card photographs ---
   A fixed 3:2 window so the grid keeps its rhythm: cards are a row of equal
   objects, and three thumbnails at three different heights turn the meta lines
   underneath them into a ragged edge. The figure sits above the meta line, per
   the comp. */
.fo-note-card__figure img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* --- THE ARTICLE LAYOUT ---
   A 3/9 grid: the rail, then the article. */
.fo-note-layout {
	display: grid;
	grid-template-columns: 3fr 9fr;
	gap: 0 var(--fo-gap);
	align-items: start;
}

/* Sticky only where there is room for it to be useful. Below the collapse
   breakpoint the rail is a short block above the article and sticking it would
   pin a contents list over the text it points into. */
.fo-note-rail {
	position: sticky;
	top: 104px;
	display: flex;
	flex-direction: column;
	gap: 34px;
	padding-right: 12px;
}

.fo-notetoc__head,
.fo-noteshare__head,
.fo-faqindex__head,
.fo-langpair__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 14px;
}

.fo-notetoc__list,
.fo-faqindex__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fo-notetoc__item,
.fo-faqindex__item {
	border-top: 1px solid var(--fo-line);
}

.fo-notetoc__item:first-child,
.fo-faqindex__item:first-child { border-top: 0; }

.fo-notetoc__link,
.fo-faqindex__link {
	display: block;
	padding: 11px 0;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.45;
	color: var(--fo-body);
	text-decoration: none;
	transition: color 0.18s ease;
}

.fo-notetoc__link:hover,
.fo-notetoc__link:focus-visible,
.fo-faqindex__link:hover,
.fo-faqindex__link:focus-visible { color: var(--fo-ink); }

/* --- Share ---
   The copy button is hidden until assets/js/fo-ui.js marks the block ready. A
   button that does nothing without JavaScript is worse than no button; the
   email link is a plain mailto and needs no such gate. */
.fo-noteshare__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.fo-noteshare__action {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--fo-line);
	padding: 0 0 3px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fo-navy);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.fo-noteshare__action:hover,
.fo-noteshare__action:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-brass);
}

.fo-noteshare button.fo-noteshare__action { display: none; }
.fo-noteshare[data-fo-share-ready] button.fo-noteshare__action { display: inline-block; }
.fo-noteshare__action[data-fo-share-copied] { color: var(--fo-brass); border-bottom-color: var(--fo-brass); }

/* --- The language pair ---
   The rail form stacks; the inline form, used opposite the notes filter row,
   puts the label and the link on one line. */
.fo-langpair__link {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	color: var(--fo-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--fo-brass);
	padding-bottom: 2px;
}

.fo-langpair__link:hover,
.fo-langpair__link:focus-visible { color: var(--fo-ink); }

.fo-langpair--inline {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.fo-langpair--inline .fo-langpair__label { margin: 0; }

.fo-langpair--inline .fo-langpair__link {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 0;
}

/* --- The article body ---
   The measure is set here rather than by .fo-container--prose, because the
   column is already 9/12 of the container and a second max-width would leave
   the rail floating beside a much narrower column than the comp draws. */
.fo-note-body .fo-note__body { max-width: 68ch; }

.fo-note-body .fo-note__byline { margin: 0 0 30px; }

/* THE DROP CAP is CSS rather than the core dropCap support, so it applies to
   every article without an editor remembering to switch it on, and so it can be
   switched off on narrow screens where a three-line capital eats a third of the
   measure. ::first-letter only takes a handful of properties; the ones used
   here are all on that list. */
.fo-note__body > p:first-of-type::first-letter {
	float: left;
	font-family: var(--fo-font-display);
	font-size: 3.6em;
	line-height: 0.82;
	font-weight: 400;
	color: var(--fo-navy);
	padding: 0.06em 0.1em 0 0;
}

/* The pull quote the comp uses to break a long body. Available to an editor as
   a plain core/pullquote with this class; none of the seven articles carries
   one yet, and inserting one would mean duplicating a sentence that is already
   in the body. */
.fo-pullquote {
	margin: 40px 0;
	padding: 0 0 0 26px;
	border-left: 2px solid var(--fo-brass);
}

.fo-pullquote p {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.35;
	color: var(--fo-ink);
	margin: 0;
}

.fo-pullquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--fo-stone);
}

/* --- More notes --- */
.fo-related__head {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.2;
	color: var(--fo-ink);
	margin: 0 0 26px;
}

.fo-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 var(--fo-gap);
}

.fo-related__link {
	display: block;
	padding: 22px 0 0;
	border-top: 1px solid var(--fo-line);
	text-decoration: none;
	height: 100%;
}

.fo-related__title {
	display: block;
	font-family: var(--fo-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--fo-ink);
	transition: color 0.18s ease;
}

.fo-related__link:hover .fo-related__title,
.fo-related__link:focus-visible .fo-related__title { color: var(--fo-navy); }

.fo-related__meta {
	display: block;
	margin-top: 10px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* --- THE FAQ PAGE ---
   The masthead's right-hand column, and the rail beneath the index. */
.fo-faq-masthead { align-items: end; }

.fo-faq-rail {
	position: sticky;
	top: 104px;
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-right: 12px;
}

.fo-askpanel {
	border-top: 2px solid var(--fo-brass);
	padding-top: 20px;
}

.fo-askpanel__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin-bottom: 12px;
}

.fo-askpanel__phone {
	display: block;
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.1;
	color: var(--fo-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}

.fo-askpanel__phone:hover,
.fo-askpanel__phone:focus-visible { color: var(--fo-navy); }

.fo-askpanel__meta {
	margin-top: 10px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-askpanel__link {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fo-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--fo-brass);
	padding-bottom: 3px;
}

.fo-askpanel__link:hover,
.fo-askpanel__link:focus-visible { color: var(--fo-ink); }

.fo-askpanel__lead {
	margin: 0;
	font-family: var(--fo-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--fo-ink);
}

.fo-askpanel__body {
	margin: 12px 0 0;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.65;
	color: var(--fo-body);
}

.fo-askpanel__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: 22px;
}

/* Each subject is its own anchored section. The rule sits above every one but
   the first, which is what .fo-rule-top does; the padding is what stops a
   heading landing under the sticky masthead when the rail jumps to it. */
.fo-faq-section { scroll-margin-top: 120px; }
.fo-faq-section + .fo-faq-section { margin-top: 52px; padding-top: 44px; }

/* The article's own headings get the same treatment, for the contents rail. */
.fo-note__body h2 { scroll-margin-top: 120px; }

@media (max-width: 1120px) {
	.fo-note-layout { grid-template-columns: 4fr 8fr; }
}

@media (max-width: 980px) {
	/* ONE COLUMN, AND THE RAIL SPLITS AROUND THE ARTICLE.

	   Keeping the rail whole above the body put a contents list, two share
	   actions and a language link — 470px of them on a 390px screen — between
	   the standfirst and the first sentence. Only one of those three belongs
	   before the article: a contents list a reader meets after finishing is not
	   a contents list, but a Copy link button they meet before reading is an
	   offer to share something they have not read.

	   `display: contents` on the rail promotes its three children to grid items
	   of .fo-note-layout, which is what makes `order` reach them. The DOM is
	   untouched, so the <aside> is still the element a screen reader announces
	   and nothing is moved for anybody navigating by landmark. */
	.fo-note-layout { grid-template-columns: 1fr; }
	.fo-note-rail { display: contents; }

	.fo-note-layout > .fo-note-rail > .fo-notetoc {
		order: 1;
		margin-bottom: 34px;
		padding-bottom: 26px;
		border-bottom: 1px solid var(--fo-line);
	}

	.fo-note-layout > .fo-note-body { order: 2; }

	.fo-note-layout > .fo-note-rail > .fo-noteshare {
		order: 3;
		margin-top: 34px;
		padding-top: 26px;
		border-top: 1px solid var(--fo-line);
	}

	.fo-note-layout > .fo-note-rail > .fo-langpair {
		order: 4;
		margin-top: 26px;
	}

	/* The share actions go side by side once they are out of a narrow rail. */
	.fo-noteshare__actions {
		flex-direction: row;
		gap: 26px;
	}

	.fo-faq-rail {
		position: static;
		padding-right: 0;
		gap: 28px;
		margin-bottom: 40px;
	}

	.fo-note-body .fo-note__body { max-width: none; }

	.fo-related__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.fo-notes__filterbar {
		gap: 14px;
		margin-bottom: 28px;
	}

	.fo-notes__list > li:first-child .fo-note-card {
		padding-bottom: 30px;
		margin-bottom: 12px;
	}

	.fo-notes__list > li:first-child .fo-note-card__title {
		font-size: var(--fo-fs-h3);
		margin-top: 14px;
	}

	.fo-notes__list > li:first-child .fo-note-card {
		display: block;
		grid-template-columns: none;
		grid-template-areas: none;
	}

	.fo-notes__list > li:first-child .fo-note-card__figure { margin: 0 0 18px; }
	.fo-notes__list > li:first-child .fo-note-card__figure img { min-height: 0; height: auto; }
	.fo-notes__list > li:first-child .fo-note-card__standfirst { margin-top: 12px; max-width: none; }
	.fo-notes__list > li:first-child .fo-note-card__title { max-width: none; }

	/* The drop cap goes. Three lines of capital against a 34ch measure leaves
	   the first paragraph reading around an obstacle. */
	.fo-note__body > p:first-of-type::first-letter {
		float: none;
		font-size: inherit;
		line-height: inherit;
		font-family: inherit;
		color: inherit;
		padding: 0;
	}

	.fo-related__list { grid-template-columns: 1fr; }
	.fo-faq-section + .fo-faq-section { margin-top: 40px; padding-top: 32px; }
}

/* ==========================================================================
   29 · CONTACT — the facts row and the section lede
   Per the "Florida One - Contact" comp of 2026-08-04. The page itself is
   composed in the seeders and rendered by the page-contact shell; everything
   on it reuses existing components (section-head, locations-grid, the
   schematic map, the form column, the askpanel) except these two pieces.
   ========================================================================== */

/* THE FACTS PANEL — the masthead's right-hand column, per the mockup: four
   labelled rows (main line, email, open, closed), label left, value right, a
   hairline between rows. The first build laid these out as a 4-across band
   under the lede; the mockup pairs them WITH the heading instead, the way the
   quote hero pairs its telephone panel, and Osi's side-by-side made the
   difference obvious. */
.fo-contact-facts {
	margin: 0;
}

.fo-contact-facts__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 0;
	border-top: 1px solid var(--fo-line);
}

.fo-contact-facts__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.fo-contact-facts__item .fo-label { margin: 0; flex: 0 0 auto; }

.fo-contact-facts__value {
	display: inline-block;
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--fo-ink);
	margin: 0;
	text-decoration: none;
	text-align: right;
	overflow-wrap: anywhere;
}

a.fo-contact-facts__value:hover,
a.fo-contact-facts__value:focus-visible { color: var(--fo-navy); }

/* The main line keeps the serif figure treatment: it is the row a reader in a
   hurry is looking for, and the mockup sets it a size up from the others. */
.fo-contact-facts__value.fo-figure-number { font-size: 1.75rem; }

/* The lede opposite "Four offices, two counties." — bottom-aligned by the
   split's --end modifier, measured, and quiet. */
.fo-contact-groups__lede {
	margin: 0 0 6px;
	max-width: 44ch;
	color: var(--fo-stone);
}

/* --- The accident panel, boxed ---
   The mockup draws this as a bordered box with a full-width outlined button,
   not as the brass-ruled askpanel the FAQ rail uses: it is a warning, and it
   is allowed to interrupt. Border, no fill, no shadow, per the design law. */
.fo-accident {
	/*
	 * Ivory on the parchment ground, ringed in navy. The first pass used the
	 * standard hairline (--fo-line) with no fill, and on parchment that border
	 * is nearly the ground's own colour — the one panel on the page built to
	 * interrupt was the least visible thing in the rail (Osi, 2026-08-04:
	 * "needs more contrast"). Still no shadow and no radius; the design law
	 * holds, the values just stop whispering.
	 */
	background-color: var(--fo-ivory);
	border: 1px solid var(--fo-navy);
	padding: 26px 26px 24px;
	margin-top: 40px;
}

.fo-accident__head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fo-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--fo-ink);
	margin: 0 0 12px;
}

.fo-accident__head svg { flex: 0 0 auto; color: var(--fo-brass); }

.fo-accident__body {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.65;
	color: var(--fo-body);
	margin: 0 0 20px;
}

/* --- Form 3, laid out to the mockup's two columns ---
   Gravity Forms' modern markup is a 12-column grid; the spans live in the form
   editor, which nobody has driven for this form, so the theme states them.
   Field ids are stable per form, which is what makes this safe: email (3) and
   telephone (4) share a row, as do subject (7) and the office selector when it
   lands. Everything else keeps the full measure. */
.fo-form #field_3_3,
.fo-form #field_3_4,
.fo-form #field_3_7 { grid-column: span 6; }

/* The name field's own label says what its two sub-labels are about to say
   again, so the mockup drops it. Kept for screen readers, removed from view. */
.fo-form #field_3_2 > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Sub-labels above their inputs, styled as the labels they now are. */
.fo-form #field_3_2 .name_first,
.fo-form #field_3_2 .name_last {
	display: flex;
	flex-direction: column-reverse;
}

.fo-form #field_3_2 .gform-field-label--type-sub {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0 0 10px;
}

/* The submit button and its reassurance share a line, per the mockup. The
   span is appended by florida_one_contact_submit_note() in
   inc/gravity-forms.php, inside the footer, which is what makes this flex
   possible at all — a paragraph outside the form cannot sit beside a button
   inside it. */
.fo-form .gform_footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 20px;
}

.fo-form__aside {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.5;
	color: var(--fo-stone);
	max-width: 34ch;
}

@media (max-width: 700px) {
	.fo-form #field_3_3,
	.fo-form #field_3_4,
	.fo-form #field_3_7 { grid-column: 1 / -1; }
}

/* --- The contact page's schematic map, capped ---
   The first version of this rule set height on the SVG and did nothing: the
   tall element is the FRAME, which carries `aspect-ratio: 720/452` in map.css,
   and the svg inside it is height:100%. Capping the frame is the whole fix,
   and the svg's own preserveAspectRatio="slice" then fills the wide band and
   crops top and bottom — which is exactly how the mockup draws it. */
.fo-contact-map .fo-map__frame {
	aspect-ratio: auto;
	height: 480px;
}

/* --- The claims directory --- */
.fo-claims__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px var(--fo-gap);
}

.fo-claims__item {
	border-top: 1px solid var(--fo-line);
	padding-top: 16px;
}

.fo-claims__name {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0 0 10px;
}

.fo-claims__phone {
	display: inline-block;
	font-family: var(--fo-font-display);
	font-size: 1.375rem;
	line-height: 1.2;
	font-variant-numeric: lining-nums;
	color: var(--fo-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}

.fo-claims__phone:hover,
.fo-claims__phone:focus-visible { color: var(--fo-navy); }

.fo-claims__note {
	margin: 8px 0 0;
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.5;
	color: var(--fo-stone);
}

@media (max-width: 992px) {
	.fo-claims__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--fo-gap); }
	.fo-contact-map .fo-map__frame { height: 400px; }
}

@media (max-width: 560px) {
	.fo-claims__grid { grid-template-columns: 1fr; gap: 22px; }
	.fo-contact-map .fo-map__frame { height: auto; aspect-ratio: 1.12; }
}

/* --- The Trustindex widget, standing where the quotes stood ---
   The plugin brings its own stylesheet from the CDN, so this sets position and
   nothing else: no attempt to restyle the widget's internals, which would be a
   fight with a file this theme does not control and would break on their next
   release. It gets the same top margin the aggregate line gave the quote list.
   See inc/trustindex.php. */
.fo-reviews__widget {
	margin-top: 40px;
}

/* The widget's own loader sets a min-height while it fetches; without one the
   section collapses to nothing and then jumps, which is a layout shift on the
   one page whose whole job is to look trustworthy. */
.fo-reviews__widget:empty {
	min-height: 320px;
}

/* ==========================================================================
   30 · MATRIX LINKS — the edges of the coverage x city graph
   Per matrix spec section 11.2. The block renders on three kinds of page and
   has to read as the same component on all three, so it borrows the
   .fo-related geometry wholesale: a hairline above each item, display type for
   the anchor, a muted line of context under it. What it does NOT borrow is the
   three-up grid — these lists are two to five items and a three-column grid
   leaves a hole. Auto-fit keeps a two-item list to two columns.
   See blocks/matrix-links.php.
   ========================================================================== */

.fo-matrixlinks__head {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h3);
	font-weight: 400;
	line-height: 1.2;
	color: var(--fo-ink);
	margin: 0 0 26px;
}

.fo-matrixlinks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 var(--fo-gap);
}

.fo-matrixlinks__link {
	display: block;
	padding: 22px 0 0;
	border-top: 1px solid var(--fo-line);
	text-decoration: none;
	height: 100%;
}

.fo-matrixlinks__anchor {
	display: block;
	font-family: var(--fo-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--fo-ink);
	transition: color 0.18s ease;
}

.fo-matrixlinks__link:hover .fo-matrixlinks__anchor,
.fo-matrixlinks__link:focus-visible .fo-matrixlinks__anchor { color: var(--fo-navy); }

/* The excerpt under the anchor, trimmed to 22 words in PHP. Serif rather than
   the uppercase UI label .fo-related__meta uses, because this is a sentence
   and not a date: setting a sentence in tracked-out caps makes it unreadable
   at exactly the size it needs to be readable. */
.fo-matrixlinks__note {
	display: block;
	margin-top: 10px;
	font-family: var(--fo-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--fo-stone);
}

/* THE LOCATION-HUB ROW. Osi, 2026-08-04: the coverage links on a hub need
   icons and all five on one row at desktop.

   The column count comes from --fo-matrixlinks-cols, set inline by the render
   callback from the number of links it actually produced. Hardcoding five here
   would look right today and wrong the day SR-22 gets its cells and the row
   becomes six. minmax(0,1fr) rather than auto so five long line names cannot
   push the row wider than its container.

   The auto-fit rule above still governs the other two placements (a coverage
   parent's two city links, a cell's three), which want to be wide, not five
   narrow columns. */
.fo-matrixlinks--row .fo-matrixlinks__list {
	grid-template-columns: repeat(var(--fo-matrixlinks-cols, 5), minmax(0, 1fr));
	gap: 0 32px;
}

.fo-matrixlinks__icon {
	display: block;
	width: 28px;
	height: 28px;
	margin-bottom: 18px;
	fill: none;
	stroke: var(--fo-brass);
	stroke-width: 1.5;
	transition: stroke var(--fo-ease);
}

.fo-matrixlinks__link:hover .fo-matrixlinks__icon,
.fo-matrixlinks__link:focus-visible .fo-matrixlinks__icon { stroke: var(--fo-navy); }

/* On a five-up row the anchor is a label, not a headline: the tile-sized
   display face would set two of these names on three lines each. */
.fo-matrixlinks--row .fo-matrixlinks__anchor {
	font-size: 1.0625rem;
	line-height: 1.35;
}

.fo-matrixlinks--row .fo-matrixlinks__note {
	font-size: 0.9rem;
}

/* Two rows of the same links below the desktop breakpoint, then one column on
   a phone. Five 1fr tracks at 900px is 150px each, which is narrower than the
   longest line name. */
@media (max-width: 1100px) {
	.fo-matrixlinks--row .fo-matrixlinks__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 28px;
	}
}

@media (max-width: 780px) {
	.fo-matrixlinks--row .fo-matrixlinks__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The card's two-number stack. Each number carries its small label on the
   line above it; the manager row inherits the phone link treatment. */
.fo-loc-card__phones {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fo-loc-card__phone-label {
	display: block;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin-bottom: 2px;
}

@media (max-width: 640px) {
	.fo-matrixlinks__list,
	.fo-matrixlinks--row .fo-matrixlinks__list { grid-template-columns: 1fr; }
	.fo-matrixlinks__link { padding-top: 18px; }
	.fo-matrixlinks__icon { margin-bottom: 14px; }
}


/* ==========================================================================
   31 · ABOUT THE AGENCY — per the "Florida One - About the Agency" comp of
   2026-08-04. Three components the rest of the site does not have: the hero
   stat panel, the four labelled facts under the story, and the bordered
   "what independent means" note. Everything else on that page is an existing
   block (section-head, team-grid, reviews, carrier-grid, cta-band).
   ========================================================================== */

/* THE STAT PANEL, opposite the H1. Deliberately NOT .fo-contact-facts, which
   the contact masthead uses: that one sets its label as an uppercase
   .fo-label and its value in the body serif, and the comp here inverts the
   pair — a body-serif label against a display-serif figure, which is how the
   quote hero treats its telephone. Reusing the contact rules would have meant
   a modifier that changed both halves, which is a new component wearing
   another one's name. */
.fo-statpanel {
	border-left: 1px solid var(--fo-line);
	padding-left: 40px;
	margin: 0;
}

.fo-statpanel__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 13px 0;
	border-top: 1px solid var(--fo-line);
}

.fo-statpanel__row:last-child { border-bottom: 1px solid var(--fo-line); }

.fo-statpanel__label {
	font-family: var(--fo-font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--fo-body);
	margin: 0;
}

.fo-statpanel__value {
	font-family: var(--fo-font-display);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--fo-ink);
	margin: 0;
	text-align: right;
}

/* THE FOUR FACTS under the story. A 2x2 grid of label-and-sentence pairs,
   hairline above the pair and between the rows, opening on a brass rule so it
   reads as a continuation of the prose rather than a separate panel. */
.fo-factgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
	border-top: 1px solid var(--fo-brass);
	margin-top: 44px;
}

.fo-factgrid__item { padding: 26px 0; }

/* Only the second row takes a rule: the brass line above already closes the
   first, and a hairline under every cell would box them. */
.fo-factgrid__item:nth-child(n+3) { border-top: 1px solid var(--fo-line); }

.fo-factgrid__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 14px;
}

.fo-factgrid__text {
	font-family: var(--fo-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--fo-body);
	margin: 0;
}

/* THE NOTE PANEL. The one bordered box on the page, and the only place the
   parchment ground sits inside an ivory section, so it has to carry its own
   border rather than rely on the ground change. */
.fo-notepanel {
	border: 1px solid var(--fo-line);
	background: var(--fo-parchment);
	padding: 32px 30px;
}

.fo-notepanel__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 18px;
}

.fo-notepanel__head {
	font-family: var(--fo-font-display);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--fo-ink);
	margin: 0 0 16px;
}

.fo-notepanel__text {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fo-body);
	margin: 0 0 24px;
}

/* The caption under the story photograph. Same voice as the [CONFIRM] notes
   elsewhere: it is addressed to whoever swaps the placeholder out. */
.fo-figure__note {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	line-height: 1.55;
	letter-spacing: 0.04em;
	color: var(--fo-stone);
	margin: 14px 0 32px;
}

@media (max-width: 992px) {
	.fo-statpanel {
		border-left: 0;
		padding-left: 0;
		margin-top: 40px;
	}
}

@media (max-width: 640px) {
	.fo-factgrid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Stacked, every item after the first needs the rule the 2x2 rule gave
	   only to the second row. */
	.fo-factgrid__item:nth-child(n+2) { border-top: 1px solid var(--fo-line); }

	.fo-statpanel__value { font-size: 1.3125rem; }
}


/* ==========================================================================
   32 · REVIEWS — per the "Florida One - Reviews" comp of 2026-08-04.
   The page is four bands: a masthead with the rating panel beside it, the live
   Google feed, the curated wall with a "write one" panel in the last cell, and
   a compact row of the people the reviews name.
   ========================================================================== */

/* THE RATING PANEL, opposite the H1. The figure is set at display scale
   because it is the single number the page exists to state; "out of 5" hangs
   off its baseline so the pair reads as one unit rather than two lines. */
.fo-ratingpanel {
	border-left: 1px solid var(--fo-line);
	padding-left: 40px;
}

.fo-ratingpanel__figure {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 10px;
}

.fo-ratingpanel__score {
	font-family: var(--fo-font-display);
	font-size: clamp(2.75rem, 2.2rem + 2vw, 3.5rem);
	line-height: 1;
	color: var(--fo-ink);
}

.fo-ratingpanel__outof {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-ratingpanel__count {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.5;
	color: var(--fo-stone);
	margin: 12px 0 24px;
}

/* THE "WRITE ONE" PANEL, which occupies the last cell of the wall rather than
   sitting under it. Bordered on its left only, so it reads as the end of the
   row and not as a card dropped into it. */
.fo-writepanel {
	border-left: 1px solid var(--fo-line);
	padding-left: 34px;
}

/* Beside the wall (8-4 split on /reviews/), the panel hangs from the top of
   the row; the quotes' first hairline sits 22px down, so the label aligns
   with it rather than with the raw section edge. */
.fo-split > div > .fo-writepanel { padding-top: 22px; }

.fo-writepanel__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 16px;
}

.fo-writepanel__head {
	font-family: var(--fo-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--fo-ink);
	margin: 0 0 14px;
}

.fo-writepanel__text {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fo-body);
	margin: 0 0 22px;
}

/* The count line under the wall, opposite the "more reviews" link. */
.fo-reviews__tally {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	margin: 0;
}

/* THE COMPACT PEOPLE ROW. The same records and the same block /team/ uses,
   at a different density: the portrait becomes a circle, the decorative rule
   between name and role comes off, and the whole card centres. Reviews name a
   person far more often than they name the agency, so this row is the point of
   the section rather than decoration on it. */
.fo-team-grid--compact .fo-person-card {
	text-align: left;
}

.fo-team-grid--compact .fo-portrait {
	width: 68px;
	height: 68px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 18px;
}

.fo-team-grid--compact .fo-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

.fo-team-grid--compact .fo-person-card__name {
	font-size: 1.1875rem;
	line-height: 1.25;
	margin-bottom: 6px;
}

.fo-team-grid--compact .fo-person-card__role {
	margin: 0;
}

.fo-team-grid--compact .fo-person-card__place {
	margin-top: 4px;
}

@media (max-width: 992px) {
	.fo-ratingpanel {
		border-left: 0;
		padding-left: 0;
		margin-top: 36px;
	}
}

@media (max-width: 640px) {
	.fo-writepanel {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--fo-line);
		padding-top: 28px;
	}
}


/* ==========================================================================
   33 · MATRIX CELL, TO THE CITY COMP — "Florida One - Auto Insurance Fort
   Myers", 2026-08-04. Three additions: the desk panel in the hero, the
   photographs through the body, and the eyebrow-and-action lines that turn
   the "Where to go next" list into the comp's cards.
   ========================================================================== */

/* THE DESK THAT WRITES IT. Extends .fo-askpanel (§28), so it inherits the
   label treatment; everything below the label is its own vocabulary. */
.fo-deskpanel__person {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 18px 0 8px;
}

.fo-deskpanel .fo-portrait {
	width: 72px;
	height: 84px;
	flex: 0 0 auto;
	overflow: hidden;
	border: 1px solid var(--fo-line);
}

.fo-deskpanel .fo-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

.fo-deskpanel__name {
	display: block;
	font-family: var(--fo-font-display);
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--fo-ink);
}

.fo-deskpanel__office {
	display: block;
	margin-top: 5px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-deskpanel__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	border-top: 1px solid var(--fo-line);
}

.fo-deskpanel__row .fo-label { margin: 0; flex: 0 0 auto; }

.fo-deskpanel__value {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--fo-ink);
	text-decoration: none;
	text-align: right;
	overflow-wrap: anywhere;
	transition: color var(--fo-ease);
}

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

/* THE PHOTOGRAPHS. The hero band is full container width at a fixed 21:9-ish
   crop; the inset variant leads a prose section and stays inside the measure.
   No radius, no shadow, a hairline border — the same treatment as .fo-figure. */
.fo-matriximg {
	margin: 0;
	border: 1px solid var(--fo-line);
	overflow: hidden;
}

.fo-matriximg img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	filter: saturate(0.9) contrast(1.02);
}

.fo-matriximg--inset { margin-bottom: 34px; }

.fo-matriximg--inset img { aspect-ratio: 3 / 2; }

@media (max-width: 768px) {
	.fo-matriximg img { aspect-ratio: 3 / 2; }
}

/* THE NEXT-LINK CARDS. The eyebrow names the kind of destination, the action
   line says what clicking does. Both are spans inside the one link, so the
   whole card stays a single tap target. */
.fo-matrixlinks__eyebrow {
	display: block;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin-bottom: 12px;
}

.fo-matrixlinks__action {
	display: block;
	margin-top: 14px;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-navy);
	transition: color var(--fo-ease);
}

.fo-matrixlinks__link:hover .fo-matrixlinks__action,
.fo-matrixlinks__link:focus-visible .fo-matrixlinks__action { color: var(--fo-ink); }

/* THE SPLIT SECTIONS of the city comp (2026-08-04): note card, spec cards,
   spec rows, and the FAQ lede. All quiet furniture — hairlines and type, no
   elevation. */

/* The aside under a section heading. Brass-edged like a pull quote, sentence
   set in the body serif. */
.fo-cellnote {
	border-left: 2px solid var(--fo-brass);
	padding: 6px 0 6px 22px;
	margin-top: 30px;
	max-width: 34ch;
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--fo-stone);
}

/* The tagged cards: name + small chip + one line, two up, spanning the
   container under the split. */
.fo-speccards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
	border-top: 1px solid var(--fo-line);
	margin-top: 56px;
}

.fo-speccard { padding: 26px 0 0; }

.fo-speccard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 12px;
}

.fo-speccard__name {
	font-family: var(--fo-font-display);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--fo-ink);
}

.fo-speccard__tag {
	flex: 0 0 auto;
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fo-stone);
	border: 1px solid var(--fo-line);
	border-radius: 2px;
	padding: 4px 10px;
}

.fo-speccard__text {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--fo-body);
	margin: 0;
	max-width: 44ch;
}

/* The stacked label-over-line rows, the comp's right-column pairs. */
.fo-specrows {
	border-top: 1px solid var(--fo-line);
	margin-top: 34px;
}

.fo-specrow { padding: 18px 0 0; }

.fo-specrow + .fo-specrow {
	margin-top: 18px;
	border-top: 1px solid var(--fo-line);
}

.fo-specrow__label {
	font-family: var(--fo-font-ui);
	font-size: var(--fo-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-brass);
	margin: 0 0 8px;
}

.fo-specrow__text {
	font-family: var(--fo-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--fo-body);
	margin: 0;
	max-width: 52ch;
}

/* The matrix cell masthead: half the section's top padding. The desk panel
   is the tall element in the row; the full 128px above it read as a hole
   between the breadcrumb and the page (Osi, 2026-08-04). */
.fo-cellmast { padding-top: 56px; }

/* The FAQ page's content split sits 64px under the masthead hairline — the
   section's own top padding is flushed and this is the whole gap. */
.fo-faq-content { padding-top: 64px; }

/* The trailing "More questions and answers" link under every accordion.

   THE DOUBLE UNDERLINE Osi caught (2026-08-05): .fo-faq closes its list with
   a bottom hairline, which used to sit under the last answer. With the link
   appended inside the wrapper, that hairline landed at the link's baseline —
   two millimetres under the link's own brass underline. The list's closing
   rule moves ONTO the link's top edge when the link is present, so the
   accordion still closes with a hairline and the link floats free below it. */
.fo-faq:has(.fo-faq__all) { border-bottom: 0; }

.fo-faq__all {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--fo-line);
}

/* The FAQ column's sentence, under its heading rather than opposite it. */
.fo-cellfaq__lede {
	font-family: var(--fo-font-body);
	font-size: var(--fo-fs-small);
	line-height: 1.7;
	color: var(--fo-stone);
	margin-top: 22px;
	max-width: 34ch;
}

/* The two-button handoff row reuses .fo-actions (§03). */

@media (max-width: 640px) {
	.fo-speccards {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.fo-speccard + .fo-speccard {
		border-top: 1px solid var(--fo-line);
		margin-top: 22px;
	}
}

/* ==========================================================================
   34 · REGION ARCHIVE — /region/fort-myers/ and /region/naples/.
   The masthead is the only new component; everything below it reuses the
   locations map, the locations grid, the matrix row and the reviews band.
   See blocks/region-intro.php.
   ========================================================================== */

/* The H1 takes the display treatment .fo-section-head__heading carries — a
   region archive has no section-head to inherit from, and a bare h1 inherits
   nothing (the same trap the About and Reviews mastheads fell into). */
.fo-regionmast__heading {
	font-family: var(--fo-font-display);
	font-size: var(--fo-fs-h1);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--fo-ink);
	margin: 22px 0 0;
	max-width: 18ch;
}

.fo-regionmast .fo-lede {
	margin-top: 24px;
	max-width: 54ch;
}

/* The stat panel is the About page's component; on this page it hangs from
   the top of the row rather than the baseline, because the lede beside it
   runs three lines and bottom-alignment left it stranded. */
.fo-regionmast .fo-statpanel { margin-top: 8px; }

@media (max-width: 992px) {
	.fo-regionmast__heading { max-width: none; }
}