/**
 * Fair Winds styling class library.
 *
 * Apply a class through a block's Advanced > Additional CSS class(es) field.
 * Every class is documented in CLASSES.md. Colors and sizes come from
 * theme.json tokens; nothing here hardcodes a palette value.
 */

/* ------------------------------------------------------------------
 * Button states theme.json can't express for style variations
 * ------------------------------------------------------------------ */

.wp-element-button {
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-alt);
	outline-offset: 2px;
}

/*
 * Outline: Marine Mist (not Marine Bright) so small uppercase labels pass 4.5:1
 * on Charcoal Medium cards; Light Sections remap it to Marine Blue.
 * Ollie swaps the border for a CSS outline and core shrinks the padding.
 * Restore a real 2px border, sized to match the default button (1px border).
 * The .wp-block-buttons prefix outranks Ollie's core-button.css.
 */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--primary-alt);
	outline: none;
	padding: calc(1rem - 1px) calc(1.75rem - 1px);
}

/* Variations override the default button's cream-outline hover. */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--primary-alt);
	border-color: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-lemon > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--primary-alt-accent);
	border-color: transparent;
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-arrow-link > .wp-block-button__link::after {
	content: " →";
}

.wp-block-button.is-style-arrow-link > .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--primary-alt);
}

/* ------------------------------------------------------------------
 * Ollie parent overrides
 * Ollie's style.css uses `secondary` as muted text. In this dark palette
 * `secondary` is a surface color, so that text would vanish. Ollie's
 * stylesheet loads after this one, so these selectors outrank it.
 * ------------------------------------------------------------------ */

body div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--main-accent);
}

body ::placeholder {
	color: var(--wp--preset--color--dim);
}

/* Ollie gives form fields (search, comments) a white background; keep them dark with light text. */
body :is(input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]), select, textarea) {
	border-color: var(--wp--preset--color--border-dark);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}

/* ------------------------------------------------------------------
 * Sitewide accessibility and rhythm
 * ------------------------------------------------------------------ */

/* Links inside running text are underlined, so they don't rely on color alone. */
main :where(p:not(.has-heading-font-family), li) > a:not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Full-width page sections sit flush; the layout's block gap would show a strip of page background between them. */
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * Class library
 * ------------------------------------------------------------------ */

/* fw-eyebrow: small uppercase label above a heading. */
.fw-eyebrow {
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* fw-wide-type: widened Archivo for hero and section headings. */
.fw-wide-type {
	font-stretch: 112%;
}

/* fw-grout: 2px seams between tiles or cards. Doubled selector beats core's generated layout gap. */
.wp-block-group.fw-grout,
.wp-block-columns.fw-grout,
.wp-block-post-template.fw-grout {
	gap: 2px;
}

/* fw-zoom-hover: the image inside zooms slightly on hover or keyboard focus. */
.fw-zoom-hover {
	overflow: hidden;
}

.fw-zoom-hover img {
	transition: transform 0.6s ease;
}

.fw-zoom-hover:is(:hover, :focus-within) img {
	transform: scale(1.05);
}

/* fw-card-hover: card background lifts to Tint on hover. !important is needed to beat core's has-*-background-color classes. */
.fw-card-hover {
	transition: background-color 0.25s ease;
}

.fw-card-hover:is(:hover, :focus-within) {
	background-color: var(--wp--preset--color--tertiary) !important;
}

/* fw-stretched-link: the link in the card's heading (or its fw-card-title paragraph) makes the whole card clickable. Front end only, so the editor stays clickable. */
.fw-stretched-link {
	position: relative;
}

:where(body:not(.editor-styles-wrapper)) .fw-stretched-link :is(h2, h3, h4, .fw-card-title) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Category links inside a stretched-link card stay clickable above the card link. */
.fw-stretched-link .wp-block-post-terms a {
	position: relative;
	z-index: 2;
}

/* fw-prose: comfortable heading sizes for long-form text (posts), instead of the section-heading scale. */
.fw-prose :is(h2, h3) {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.2;
}

.fw-prose h3 {
	font-size: var(--wp--preset--font-size--medium);
}

/* fw-logo-muted: white brand logo at full opacity. Made for dark backgrounds (see Light Section for light ones). */
.fw-logo-muted img {
	opacity: 1;
	transition: opacity 0.3s ease;
}

.fw-logo-muted:hover img,
.fw-card-hover:is(:hover, :focus-within) .fw-logo-muted img {
	opacity: 1;
}

/* fw-sticky: column stays in view while its neighbor scrolls. Desktop only. */
@media (min-width: 1025px) {
	.fw-sticky {
		position: sticky;
		top: var(--wp--preset--spacing--medium);
		align-self: flex-start;
	}
}

/* fw-divided: hairlines between children; vertical side by side, horizontal once stacked. */
.fw-divided > * + * {
	border-left: 1px solid var(--wp--preset--color--border-light);
}

@media (max-width: 781px) {
	.fw-divided > * + * {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border-light);
	}
}

/* ------------------------------------------------------------------
 * Site header (parts/header.html)
 * ------------------------------------------------------------------ */

/* Arrow after top-level links, as in the Miles header. */
.fw-header-nav .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-item__content::after {
	content: " →";
}

/* Keep long service names on one line in the Services dropdown. */
.fw-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* The open mobile menu is dark; keep its close icon light. */
.fw-header-nav .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--main);
}

/* fw-mobile-cta: call-for-service strip under the header; shows only while the mobile menu is in use (1024px and below). Apply to: Group. */
.fw-mobile-cta .wp-element-button {
	padding: 0.7rem 1rem;
}

/* fw-call-link: phone link with a leading phone glyph in the text color. Apply to: Paragraph holding a tel: link. */
.fw-call-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 44px;
	text-decoration: none;
}

.fw-call-link a::before {
	content: "";
	flex: none;
	width: 0.85em;
	height: 0.85em;
	background-color: currentColor;
	-webkit-mask: var(--fw-icon-phone) center / contain no-repeat;
	mask: var(--fw-icon-phone) center / contain no-repeat;
}

.fw-call-link a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* fw-mobile-only / fw-desktop-only: show a block only on one side of the mobile menu breakpoint (1025px). Front end only, so the editor shows both. */
@media (min-width: 1025px) {
	body:not(.editor-styles-wrapper) :is(.fw-mobile-cta, .fw-mobile-only) {
		display: none;
	}
}

@media (max-width: 1024px) {
	body:not(.editor-styles-wrapper) .fw-desktop-only {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Labels, chips and icons
 * ------------------------------------------------------------------ */

/* fw-rule: short accent rule above a numbered item. */
.wp-block-separator.fw-rule {
	width: 32px;
	height: 2px;
	margin: 0;
	border: 0;
	background-color: var(--wp--preset--color--primary-accent);
}

/* fw-badge: small solid status label; set its colors in the block's Color panel. */
.fw-badge {
	padding: 0.2em 0.8em;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* fw-tag: outlined spec chip. */
.fw-tag {
	padding: 0.3em 0.8em;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* fw-icon--phone, --location, --hours, --info: Marine Blue icon tile above a heading. */
[class*="fw-icon--"]::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	margin-bottom: var(--wp--preset--spacing--small);
	border-radius: 3px;
	background: var(--wp--preset--color--primary) var(--fw-icon) center / 16px no-repeat;
}

:root {
	--fw-icon-phone: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f7f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}

.fw-icon--phone {
	--fw-icon: var(--fw-icon-phone);
}

.fw-icon--location {
	--fw-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f7f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>");
}

.fw-icon--hours {
	--fw-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f7f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>");
}

.fw-icon--info {
	--fw-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f7f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>");
}

/* ------------------------------------------------------------------
 * Section layouts (patterns/home-*.php)
 * !important is used only to beat inline styles and core's generated layout rules.
 * ------------------------------------------------------------------ */

/* fw-hero: full-height sidebar + photo mosaic; stacks below 1025px. Apply to: Columns. */
.wp-block-columns.fw-hero {
	min-height: 100vh;
}

@media (max-width: 1024px) {
	.wp-block-columns.fw-hero {
		flex-wrap: wrap !important;
		min-height: 0;
	}

	.wp-block-columns.fw-hero > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.fw-hero > .wp-block-column:first-child {
		border-right-width: 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--border-light);
	}
}

/* fw-hero-nav: vertical link list with trailing arrows; a row on tablets, hidden on phones. Apply to: Group of link paragraphs. */
.fw-hero-nav a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding-block: var(--wp--preset--spacing--x-small);
	font-weight: 500;
	transition: color 0.2s ease, transform 0.2s ease;
}

.fw-hero-nav a::after {
	content: "→";
}

.fw-hero-nav a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--primary-alt-accent);
	text-decoration: none;
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.wp-block-group.fw-hero-nav {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: var(--wp--preset--spacing--medium);
	}
}

@media (max-width: 781px) {
	.wp-block-group.fw-hero-nav {
		display: none;
	}
}

/* fw-mosaic: photo tile grid; tiles shorten on tablets and stack on phones. Apply to: Group (grid) of Covers. */
@media (max-width: 1024px) {
	.fw-mosaic > .wp-block-cover {
		min-height: 280px !important;
	}
}

@media (max-width: 781px) {
	.wp-block-group.fw-mosaic {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.fw-mosaic > * {
		grid-column: auto !important;
	}

	.fw-mosaic > .wp-block-cover {
		min-height: 220px !important;
	}
}

/* Homepage editorial patterns: scoped so service-page layouts stay unchanged. */
.fw-home-section {
	padding: var(--wp--preset--spacing--x-large) var(--wp--preset--spacing--medium);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}
.fw-home-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
.fw-home-section-heading {
	margin-bottom: var(--wp--preset--spacing--large);
}
.fw-home-section .fw-eyebrow {
	color: var(--wp--preset--color--primary-alt-accent);
	margin: 0 0 var(--wp--preset--spacing--small);
}
.fw-home-section h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
}
.fw-home-section h3 {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--small);
}
.fw-home-feature {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--wp--preset--spacing--x-large);
	align-items: center;
}
.fw-home-feature + .fw-home-feature {
	margin-top: var(--wp--preset--spacing--large);
}
.fw-home-feature > *,
.fw-home-service-grid > *,
.fw-home-sales-layout > * {
	margin-block-start: 0;
}
.fw-home-feature-reverse {
	grid-template-columns: 1fr 1.1fr;
}
.fw-home-feature-reverse .fw-home-photo {
	order: 2;
}
.fw-home-photo {
	margin: 0;
	width: 100%;
}
.fw-home-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.fw-home-feature-copy > p:not(.fw-eyebrow),
.fw-home-service-card > p:not(.fw-eyebrow) {
	color: var(--wp--preset--color--main-accent);
	line-height: 1.7;
	margin: 0 0 var(--wp--preset--spacing--medium);
	max-width: 48ch;
}
.fw-home-section .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--medium);
}
.fw-home-service-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--medium);
}
.fw-home-service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--wp--preset--color--secondary);
	border-top: 2px solid var(--wp--preset--color--primary-alt);
	padding: var(--wp--preset--spacing--large);
}
.fw-home-service-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--small);
}
.fw-home-sales {
	background: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--base);
}
.fw-home-sales .fw-eyebrow {
	color: var(--wp--preset--color--primary);
}
.fw-home-sales h2 {
	color: var(--wp--preset--color--base);
}
.fw-home-sales-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--large);
	align-items: center;
}
.fw-home-sales-copy > p:last-child {
	max-width: 60ch;
	margin-bottom: 0;
}
.fw-home-sales-layout > .wp-block-buttons {
	justify-content: flex-end;
	margin: 0;
}
@media (max-width: 781px) {
	.fw-home-feature,
	.fw-home-feature-reverse,
	.fw-home-service-grid,
	.fw-home-sales-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--medium);
	}
	.fw-home-feature-reverse .fw-home-photo { order: 0; }
	.fw-home-sales-layout > .wp-block-buttons { justify-content: flex-start; }
}

/* Interior editorial system: native blocks, continuous light reading surface. */
.fw-interior-inner { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.fw-interior-hero { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--main); padding: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium); }
.fw-interior-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--wp--preset--spacing--large); align-items: center; }
.fw-interior-text-hero { grid-template-columns: minmax(0, 920px); padding-block: var(--wp--preset--spacing--small); }
.fw-interior-intro h1 { font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.08; font-weight: 800; margin-block: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium); text-wrap: balance; }
.fw-interior-intro > p:not(.fw-eyebrow) { color: var(--wp--preset--color--main-accent); max-width: 65ch; line-height: 1.65; }
.fw-interior-hero .fw-eyebrow { color: var(--wp--preset--color--primary-alt); }
.fw-interior-intro .wp-block-buttons { margin-top: var(--wp--preset--spacing--medium); }
.fw-interior-hero-photo figure { margin: 0; }
.fw-interior-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.fw-interior-hero-photo figcaption { color: var(--wp--preset--color--main-accent); font-size: var(--wp--preset--font-size--x-small); }
.fw-interior-section, .fw-interior-gallery-section { background: var(--wp--preset--color--base); color: var(--wp--preset--color--main); padding: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium); }
.fw-interior-section + .fw-interior-section { padding-top: 0; }
.fw-interior-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--wp--preset--spacing--large); border-top: 1px solid var(--wp--preset--color--border-light); padding-top: var(--wp--preset--spacing--medium); }
.fw-interior-row > *, .fw-interior-hero-grid > *, .fw-interior-cards > *, .fw-interior-gallery > *, .fw-interior-contact-grid > * { margin-block-start: 0; min-width: 0; }
.fw-interior-section h2 { font-size: var(--wp--preset--font-size--large); line-height: 1.25; font-weight: 800; margin: 0; max-width: 24ch; }
.fw-interior-section h3 { font-size: var(--wp--preset--font-size--medium); line-height: 1.3; margin-top: 0; }
.fw-interior-section-body > p:first-child { margin-top: 0; }
.fw-interior-section p { line-height: 1.7; }
.fw-interior-section-body > p, .fw-interior-card p { color: var(--wp--preset--color--main-accent); }
.fw-interior-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--wp--preset--spacing--medium); }
.fw-interior-card { padding: var(--wp--preset--spacing--medium); background: var(--wp--preset--color--secondary); }
.fw-interior-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fw-interior-card p:last-child { margin-bottom: 0; }
.fw-interior-section .wp-block-list { background: var(--wp--preset--color--secondary); padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--large); margin-top: var(--wp--preset--spacing--small); }
.fw-interior-section .wp-block-list li + li { margin-top: var(--wp--preset--spacing--small); }
.fw-interior-faq details { border-bottom: 1px solid var(--wp--preset--color--border-light); padding-block: var(--wp--preset--spacing--small); margin: 0; }
.fw-interior-faq summary { cursor: pointer; font-weight: 700; line-height: 1.5; padding-right: var(--wp--preset--spacing--small); }
.fw-interior-faq summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.fw-interior-gallery-section { padding-top: 0; }
.fw-interior-gallery-section .fw-eyebrow { color: var(--wp--preset--color--primary); }
.fw-interior-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--wp--preset--spacing--small); }
.fw-interior-gallery figure { margin: 0; min-width: 0; }
.fw-interior-gallery-pairs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.fw-interior-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.fw-interior-gallery figcaption { color: var(--wp--preset--color--main-accent); font-size: var(--wp--preset--font-size--x-small); text-align: left; }
.fw-interior-contact { padding: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium); background: var(--wp--preset--color--secondary); }
.fw-interior-contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: var(--wp--preset--spacing--x-large); }
.fw-interior-contact h2 { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.15; max-width: 14ch; }
.fw-interior-phone { font-size: var(--wp--preset--font-size--x-large); font-weight: 800; }
.fw-interior-contact-copy > p { max-width: 35ch; }
.fw-interior-form { background: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--medium); }
.fw-interior-form > h2 { font-size: var(--wp--preset--font-size--large); margin-top: 0; }
.fw-interior-form > p { color: var(--wp--preset--color--main-accent); font-size: var(--wp--preset--font-size--small); }
@media (max-width: 1024px) {
	.fw-interior-hero-grid { grid-template-columns: minmax(0,1fr); }
	.fw-interior-hero-photo img { max-height: 420px; }
	.fw-interior-row { grid-template-columns: minmax(0,1fr) minmax(0,2.3fr); gap: var(--wp--preset--spacing--medium); }
	.fw-interior-contact-grid { gap: var(--wp--preset--spacing--medium); }
}
@media (max-width: 781px) {
	.fw-interior-row, .fw-interior-cards, .fw-interior-contact-grid { grid-template-columns: minmax(0,1fr); }
	.fw-interior-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.fw-interior-section h2 { font-size: var(--wp--preset--font-size--x-large); max-width: none; }
	.fw-interior-contact h2 { max-width: none; }
}

/* Reference interiors: native image/group blocks, photo-led editorial layouts. */
.fw-reference-inner { width: min(100%, 1200px); margin-inline: auto; }
.fw-reference-hero { position: relative; isolation: isolate; overflow: hidden; background: #10181d; color: #fff; }
.fw-reference-hero > .fw-reference-backdrop { position: absolute; inset: 0; margin: 0; z-index: -2; }
.fw-reference-backdrop img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 65% 50%; }
.fw-reference-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(10,19,25,.97) 0%,rgba(10,19,25,.89) 30%,rgba(10,19,25,.36) 67%,rgba(10,19,25,.12) 100%); }
.fw-reference-hero .fw-reference-hero-inner { min-height: 610px; display: flex; align-items: center; padding: 80px 40px; box-sizing: border-box; margin-block: 0; }
.fw-reference-hero-copy { max-width: 660px; }
.fw-reference-hero h1 { font-size: clamp(2.5rem,4.4vw,4.4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; max-width: 17ch; margin-block: 24px; text-wrap: balance; color: #fff; }
.fw-reference-hero-copy > p { color: #e7eef3; max-width: 42ch; font-size: 1.125rem; }
.fw-reference-hero-copy > .fw-eyebrow { color: #b6d5e8; font-size: .75rem; }
.fw-reference-hero-call { margin-top: 32px; }
.fw-reference-hero-call a { display: inline-block; padding: 15px 23px; background: #256184; color: #fff; text-decoration: none; font-size: .9rem; font-weight: 700; border: 1px solid #91bbd5; }
.fw-reference-section { padding: 88px 40px; background: #f3f6f8; color: #142128; margin-block-start: 0; }
.fw-reference-section p { color: #445760; line-height: 1.75; }
.fw-reference-section h2 { color: #142128; font-size: clamp(1.75rem,2.7vw,2.8rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; margin-top: 0; }
.fw-reference-section .fw-eyebrow { color: #256184; font-size: .75rem; line-height: 1.5; margin-bottom: 24px; }
.fw-reference-feature-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; gap: 80px; }
.fw-reference-feature-grid > *, .fw-reference-two-up > *, .fw-reference-lead-grid > * { min-width: 0; margin-block-start: 0; }
.fw-reference-photo { margin: 0; }
.fw-reference-photo img { display: block; width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; }
.fw-reference-section .fw-reference-photo figcaption { font-size: .8rem; line-height: 1.5; color: #50646f; margin-top: 12px; text-align: left; }
.fw-reference-feature-copy > p:last-child { margin-bottom: 0; }
.fw-reference-lead { padding-block: 44px; border-bottom: 1px solid #d4dfe5; }
.fw-reference-lead-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 80px; align-items: center; }
.fw-reference-lead-copy p { margin-block: 0 12px; }
.fw-reference-lead-copy p:last-child { font-weight: 700; color: #142128; margin-bottom: 0; }
.fw-reference-text-link { justify-self: end; }
.fw-reference-text-link a { font-weight: 700; color: #205773; text-underline-offset: 5px; }
.fw-reference-two-up { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; }
.fw-reference-planning, .fw-reference-services { background: #e7eef3; }
.fw-reference-note { border-top: 2px solid #7d9dad; padding-top: 28px; }
.fw-reference-note h2 { font-size: clamp(1.6rem,2.1vw,2.1rem); max-width: 24ch; }
.fw-reference-note .wp-block-buttons { gap: 16px 24px; margin-top: 26px; }
.fw-reference-note .wp-block-button__link { background: transparent; color: #205773; padding: 0; border: 0; text-decoration: underline; text-underline-offset: 5px; text-align: left; line-height: 1.6; }
.fw-reference-checklist .wp-block-list { padding-left: 22px; color: #445760; }
.fw-reference-checklist li { padding-left: 8px; margin-block: 16px; line-height: 1.6; }
.fw-reference-close { background: #18262f; padding-block: 60px; }
.fw-reference-close h2 { color: #fff; }
.fw-reference-close p { color: #d1dfe7; max-width: 65ch; }
.fw-reference-close .wp-block-buttons { gap: 20px; margin-top: 28px; }
.fw-reference-close .wp-block-button:first-child .wp-block-button__link { background: #256184; color: #fff; border: 1px solid #91bbd5; }
.fw-reference-close .wp-block-button + .wp-block-button .wp-block-button__link { background: transparent; color: #fff; padding-inline: 4px; text-decoration: underline; text-underline-offset: 5px; }
.fw-reference-section a:focus-visible, .fw-reference-hero a:focus-visible { outline: 3px solid #91bbd5; outline-offset: 5px; }
.fw-reference-hero-call a:hover { background: #1b4c69; }
@media (max-width: 900px) {
 .fw-reference-feature-grid, .fw-reference-lead-grid { gap: 36px; }
 .fw-reference-hero .fw-reference-hero-inner { min-height: 560px; }
 .fw-reference-two-up { gap: 36px; }
}
@media (max-width: 600px) {
 .fw-reference-hero .fw-reference-hero-inner { min-height: 650px; align-items: flex-end; padding: 220px 24px 40px; }
 .fw-reference-hero h1 { font-size: 2.65rem; }
 .fw-reference-hero::after { background: linear-gradient(0deg,rgba(10,19,25,.99) 0%,rgba(10,19,25,.92) 43%,rgba(10,19,25,.25) 80%); }
 .fw-reference-backdrop img { object-position: 66% 20%; }
 .fw-reference-section { padding: 52px 24px; }
 .fw-reference-feature-grid, .fw-reference-two-up, .fw-reference-lead-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .fw-reference-text-link { justify-self: start; margin: 0; }
 .fw-reference-feature .fw-reference-photo { order: 2; }
 .fw-reference-photo img { aspect-ratio: 4/3; }
 .fw-reference-hero-copy > p { font-size: 1rem; }
}

/* Site-wide service layouts share the reference system without additional JS. */
.fw-service-page { max-width: none !important; }
.fw-service-page > * { margin-block-start: 0; }
.fw-service-hero { background: #18262f; color: #fff; padding: 72px 40px; }
.fw-service-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: 64px; }
.fw-service-hero-grid > * { min-width: 0; margin-block-start: 0; }
.fw-service-hero h1 { font-size: clamp(2.4rem,3.8vw,3.8rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; margin-block: 24px; max-width: 20ch; color: #fff; }
.fw-service-hero p { color: #d5e3eb; max-width: 60ch; line-height: 1.65; }
.fw-service-hero .fw-eyebrow { color: #b6d5e8; font-size: .75rem; }
.fw-service-hero-photo { margin: 0; }
.fw-service-hero-photo img { width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; display: block; }
.fw-service-text-hero .fw-service-hero-grid { grid-template-columns: minmax(0,900px); }
.fw-service-text-hero { padding-block: 56px; }
.fw-service-lead { max-width: 900px; }
.fw-service-lead > p:first-child { margin-top: 0; }
.fw-service-lead > p:last-child { margin-bottom: 0; }
.fw-service-page .fw-interior-section, .fw-service-page .fw-interior-gallery-section { padding-inline: 40px; }
.fw-service-page .fw-interior-row { grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 64px; }
.fw-service-page .fw-interior-section h2 { font-size: clamp(1.6rem,2.4vw,2.2rem); line-height: 1.15; letter-spacing: -.025em; }
.fw-service-page .fw-interior-card { background: transparent; border-top: 2px solid #91a9b7; padding: 24px 0 0; }
.fw-service-page .fw-interior-cards { gap: 32px; }
.fw-service-page .fw-interior-gallery { gap: 20px; }
.fw-service-page .fw-interior-gallery img { aspect-ratio: 4/3; }
.fw-service-page .fw-interior-contact { padding-block: 56px; }
.fw-service-page .wp-block-button + .wp-block-button .wp-block-button__link { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 5px; }
.fw-policy-page .is-style-section-light { --wp--preset--color--primary-alt-accent: #205773; }
.fw-policy-page .wp-block-post-title { text-transform: none !important; letter-spacing: -.025em; }
.fw-policy-page p, .fw-policy-page li { line-height: 1.75; }
body.single-post .site-content > section:first-child, body.archive .site-content > section:first-child, body.search .site-content > section:first-child { padding-block: 56px !important; }
body.single-post .wp-block-post-title, body.archive .wp-block-query-title, body.search .wp-block-query-title { text-transform: none !important; letter-spacing: -.025em; }
body.single-post .fw-prose p { line-height: 1.75; }
body.single-post .wp-block-post-featured-image img { max-height: 520px; object-fit: contain; }
@media (max-width: 781px) {
 .fw-service-hero { padding: 40px 24px; }
 .fw-service-hero-grid, .fw-service-page .fw-interior-row { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .fw-service-hero h1 { font-size: 2.5rem; }
 .fw-service-hero-photo img { max-height: 340px; }
 .fw-service-page .fw-interior-section, .fw-service-page .fw-interior-gallery-section { padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
 .fw-card-hover, .fw-zoom-hover img, .fw-stretched-link, .wp-block-button__link { transition: none !important; animation: none !important; }
}

/* fw-contact-grid: 1-2-1 contact layout; the fw-contact-form card goes full width first on tablets, all stacks on phones. Apply to: Group (grid). */
@media (max-width: 1024px) {
	.wp-block-group.fw-contact-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.fw-contact-grid > .fw-contact-form {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		order: -1;
	}
}

@media (max-width: 781px) {
	.wp-block-group.fw-contact-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.fw-contact-grid > * {
		grid-column: auto !important;
	}
}

/* fw-form: dark Fair Winds styling for a SureForms form. Apply to: Group wrapping the form. */
.fw-form .srfm-form-container {
	--srfm-bg-color: transparent;
	--srfm-color-input-label: var(--wp--preset--color--main-accent);
	--srfm-color-input-text: var(--wp--preset--color--main);
	--srfm-color-input-placeholder: var(--wp--preset--color--dim);
	--srfm-color-input-prefix: var(--wp--preset--color--main-accent);
	--srfm-color-input-background: var(--wp--preset--color--secondary);
	--srfm-color-input-border: var(--wp--preset--color--border-light);
	--srfm-color-input-border-hover: var(--wp--preset--color--primary-accent);
	--srfm-color-scheme-primary: var(--wp--preset--color--primary);
	--srfm-color-scheme-text-on-primary: var(--wp--preset--color--main);
	--srfm-input-field-border-radius: 4px;
	--srfm-btn-border-radius: 4px;
}

.fw-form .srfm-block-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
 * Light Section (Group style variation, styles/blocks/group/section-light.json)
 * Re-points the palette tokens inside the section to the light values in
 * theme.json settings.custom.light, so every block inside keeps its color
 * choices (Text, Text Muted, Charcoal Medium…) and simply renders light.
 * ------------------------------------------------------------------ */

.is-style-section-light {
	--wp--preset--color--base: var(--wp--custom--light--base);
	--wp--preset--color--secondary: var(--wp--custom--light--secondary);
	--wp--preset--color--tertiary: var(--wp--custom--light--tertiary);
	--wp--preset--color--main: var(--wp--custom--light--main);
	--wp--preset--color--main-accent: var(--wp--custom--light--main-accent);
	--wp--preset--color--dim: var(--wp--custom--light--dim);
	--wp--preset--color--primary-accent: var(--wp--custom--light--primary-accent);
	--wp--preset--color--primary-alt: var(--wp--custom--light--primary-alt);
	--wp--preset--color--primary-alt-accent: var(--wp--custom--light--primary-alt-accent);
	--wp--preset--color--border-light: var(--wp--custom--light--border-light);
	--wp--preset--color--border-dark: var(--wp--custom--light--border-dark);
	color: var(--wp--preset--color--main);
}

/* Solid buttons keep light text on Marine Blue. */
.is-style-section-light .wp-block-button:not(.is-style-outline):not(.is-style-arrow-link) > .wp-element-button:not(:hover):not(:focus-visible) {
	color: var(--wp--custom--light--base);
}

/* On the light background, the white brand logos turn into dark silhouettes. */
.is-style-section-light .fw-logo-muted img {
	filter: brightness(0);
	opacity: 0.7;
}

.is-style-section-light .fw-logo-muted:hover img,
.is-style-section-light .fw-card-hover:is(:hover, :focus-within) .fw-logo-muted img {
	opacity: 1;
}

/* ------------------------------------------------------------------
 * Photo band (patterns/photo-band.php)
 * ------------------------------------------------------------------ */

/* fw-photo-band: full-width shop photo between sections; its content lines up with the wide content width; shorter on phones. Apply to: Cover. */
.wp-block-cover.fw-photo-band {
	padding-inline: var(--wp--preset--spacing--medium);
}

/* Repeated class outranks core's content-position rule, which sets width:auto and zero margins. */
.wp-block-cover.fw-photo-band.fw-photo-band.fw-photo-band > .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

@media (max-width: 781px) {
	.wp-block-cover.fw-photo-band {
		min-height: 360px !important;
	}
}

/* ------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.fw-zoom-hover img,
	.fw-card-hover,
	.fw-logo-muted img,
	.fw-hero-nav a {
		transition: none;
	}

	.fw-zoom-hover:is(:hover, :focus-within) img,
	.fw-hero-nav a:is(:hover, :focus-visible) {
		transform: none;
	}
}

/* ============================================================
   EDITORIAL INTERIORS — fw-ed-*
   Magazine-weight layouts and CSS-only surface textures for the
   interior pages. No images, fonts, JS or libraries are added:
   every texture is a gradient or a sub-1KB inline SVG.
   ============================================================ */

/* Texture ink colour. Dark sections get a cool marine ink; light
   sections override it so one texture class works on both. */
.fw-ed-sec { --fw-ed-ink: 145, 187, 213; --fw-ed-a: .07; }
.fw-ed-sec.is-style-section-light,
.fw-ed-sec.fw-ed-light { --fw-ed-ink: 32, 87, 115; --fw-ed-a: .09; }

/* Every textured section paints its pattern in a ::before layer and
   lifts real content above it. isolation keeps the z-index local. */
.fw-ed-sec { position: relative; isolation: isolate; overflow: hidden; }
.fw-ed-sec > * { position: relative; z-index: 1; }
.fw-ed-sec::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	pointer-events: none; background-repeat: repeat;
}

/* fw-ed-tex-chart: nautical depth contours. Apply to: Group (section). */
.fw-ed-tex-chart::before {
	background-image:
		repeating-radial-gradient(circle at 16% 26%, transparent 0 40px, rgba(var(--fw-ed-ink), var(--fw-ed-a)) 40px 41px),
		repeating-radial-gradient(circle at 84% 78%, transparent 0 52px, rgba(var(--fw-ed-ink), calc(var(--fw-ed-a) * .8)) 52px 53px);
}

/* fw-ed-tex-grid: blueprint / plotting grid. Apply to: Group (section). */
.fw-ed-tex-grid::before {
	background-image:
		linear-gradient(rgba(var(--fw-ed-ink), calc(var(--fw-ed-a) * .7)) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--fw-ed-ink), calc(var(--fw-ed-a) * .7)) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 78%);
	mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 78%);
}

/* fw-ed-tex-weave: woven fabric twill, for upholstery. Apply to: Group. */
.fw-ed-tex-weave::before {
	background-image:
		repeating-linear-gradient(45deg, rgba(var(--fw-ed-ink), var(--fw-ed-a)) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(-45deg, rgba(var(--fw-ed-ink), calc(var(--fw-ed-a) * .75)) 0 1px, transparent 1px 7px);
}

/* fw-ed-tex-rule: fine horizontal ruling, like a spec sheet. Apply to: Group. */
.fw-ed-tex-rule::before {
	background-image: repeating-linear-gradient(180deg, rgba(var(--fw-ed-ink), calc(var(--fw-ed-a) * .55)) 0 1px, transparent 1px 13px);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 62%);
	mask-image: linear-gradient(90deg, #000 0%, transparent 62%);
}

/* fw-ed-tex-grain: photographic grain over a dark panel. Apply to: Group. */
.fw-ed-tex-grain::before {
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---- Section shell ------------------------------------------------ */

/* fw-ed-sec: editorial section padding. Apply to: Group (alignfull). */
.fw-ed-sec { padding: clamp(56px, 8vw, 116px) 40px; margin-block-start: 0; }
.fw-ed-inner { width: min(100%, 1240px); margin-inline: auto; }
.fw-ed-inner > * { margin-block-start: 0; }

/* Dark editorial panel. */
.fw-ed-dark { background: #141d24; color: #eef4f7; }
.fw-ed-dark h2, .fw-ed-dark h3 { color: #fff; }
.fw-ed-dark p, .fw-ed-dark li { color: #c6d6df; }
.fw-ed-dark .fw-eyebrow { color: #91bbd5; }

/* Light editorial panel. */
.fw-ed-light { background: #f3f6f8; color: #142128; }
.fw-ed-light h2, .fw-ed-light h3 { color: #142128; }
.fw-ed-light p, .fw-ed-light li { color: #445760; }
.fw-ed-light .fw-eyebrow { color: #205773; }

/* Deeper panel for pause sections. */
.fw-ed-tint { background: #e7eef3; color: #142128; }
.fw-ed-tint h2, .fw-ed-tint h3 { color: #142128; }
.fw-ed-tint p, .fw-ed-tint li { color: #445760; }
.fw-ed-tint .fw-eyebrow { color: #205773; }

/* ---- Section headers ---------------------------------------------- */

/* fw-ed-head: eyebrow + oversized heading with a hairline above.
   Apply to: Group at the top of a section. */
.fw-ed-head { border-top: 1px solid rgba(var(--fw-ed-ink), .38); padding-top: 22px; margin-bottom: clamp(32px, 4vw, 56px); }
.fw-ed-head .fw-eyebrow { font-size: .72rem; letter-spacing: .16em; margin: 0 0 18px; }
.fw-ed-head h2 {
	font-size: clamp(1.9rem, 3.4vw, 3.15rem); line-height: 1.07;
	letter-spacing: -.032em; text-wrap: balance; max-width: 20ch; margin: 0;
}
.fw-ed-head > p:last-child:not(.fw-eyebrow) { max-width: 56ch; margin: 20px 0 0; line-height: 1.7; }

/* fw-ed-head-split: heading left, supporting note right. Apply to: Group. */
.fw-ed-head-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.fw-ed-head-split > * { min-width: 0; margin-block-start: 0; }
.fw-ed-head-split h2 { max-width: 16ch; }

/* ---- Specimen list: numbered editorial capability items ----------- */

/* fw-ed-specimen: auto-numbered capability grid with hairline rules and
   an oversized index numeral. Apply to: Group (grid) of Groups. */
.fw-ed-specimen { counter-reset: fwspec; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 0; }
.fw-ed-specimen > * {
	counter-increment: fwspec; min-width: 0; margin-block-start: 0;
	border-top: 2px solid rgba(var(--fw-ed-ink), .55);
	border-right: 1px solid rgba(var(--fw-ed-ink), .22);
	padding: 26px 30px 36px; position: relative;
}
.fw-ed-specimen > *:last-child { border-right: 0; }
.fw-ed-specimen > *::before {
	content: counter(fwspec, decimal-leading-zero);
	display: block; font-family: var(--wp--preset--font-family--heading, Archivo, system-ui, sans-serif);
	font-size: 2.6rem; font-weight: 800; line-height: 1;
	letter-spacing: -.04em; color: rgba(var(--fw-ed-ink), .48); margin-bottom: 18px;
}
.fw-ed-specimen h3 { font-size: 1.16rem; line-height: 1.3; letter-spacing: -.012em; margin: 0 0 12px; }
.fw-ed-specimen p { font-size: .97rem; line-height: 1.68; margin: 0; }

/* ---- Offset feature: photo breaks the text column ----------------- */

/* fw-ed-offset: asymmetric photo/copy row; the photo runs wider than the
   copy and the copy plate overlaps it. Apply to: Group (section child). */
.fw-ed-offset { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); align-items: center; gap: 0; }
.fw-ed-offset > * { min-width: 0; margin-block-start: 0; }
.fw-ed-offset .fw-ed-photo img { aspect-ratio: 16 / 11; }
.fw-ed-offset-copy {
	background: #141d24; color: #eef4f7; padding: clamp(28px, 3.4vw, 52px);
	margin-left: -72px; box-shadow: 0 24px 60px -32px rgba(8, 16, 22, .75);
	/* The copy plate always sits above the photo it overlaps, in either direction. */
	position: relative; z-index: 2;
}
.fw-ed-offset-copy h2, .fw-ed-offset-copy h3 { color: #fff; margin-top: 0; }
.fw-ed-offset-copy p { color: #c6d6df; }
.fw-ed-offset-copy .fw-eyebrow { color: #91bbd5; }
/* Reversed: photo on the right, plate pushes left. */
.fw-ed-offset-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); }
.fw-ed-offset-rev .fw-ed-offset-copy { order: -1; margin-left: 0; margin-right: -72px; }

/* ---- Photos -------------------------------------------------------- */

/* fw-ed-photo: editorial crop with an optional caption. Apply to: Image. */
.fw-ed-photo { margin: 0; }
.fw-ed-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fw-ed-photo .wp-element-caption, .fw-ed-photo figcaption {
	font-size: .78rem; line-height: 1.55; margin-top: 12px; text-align: left;
	color: rgba(var(--fw-ed-ink), .95); letter-spacing: .01em;
}
.fw-ed-dark .fw-ed-photo .wp-element-caption, .fw-ed-dark .fw-ed-photo figcaption { color: #9fb6c4; }
.fw-ed-photo-tall img { aspect-ratio: 3 / 4; }
.fw-ed-photo-wide img { aspect-ratio: 16 / 9; }
.fw-ed-photo-square img { aspect-ratio: 1 / 1; }

/* fw-ed-bleed: full-width photo band that breaks the section rhythm.
   Apply to: Group (alignfull) wrapping one Image. */
.fw-ed-bleed { padding: 0; margin-block: 0; background: #0f171d; }
.fw-ed-bleed img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.fw-ed-bleed .wp-element-caption, .fw-ed-bleed figcaption {
	width: min(100%, 1240px); margin: 0 auto; padding: 14px 40px 20px;
	font-size: .78rem; color: #8ea5b3; text-align: left;
}

/* fw-ed-mosaic: uneven editorial photo wall — first photo spans two
   columns and two rows. Apply to: Group (grid) of Images. */
.fw-ed-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 2px; }
.fw-ed-mosaic > * { min-width: 0; margin-block-start: 0; }
.fw-ed-mosaic > figure img, .fw-ed-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.fw-ed-mosaic > *:first-child { grid-column: span 2; grid-row: span 2; }
.fw-ed-mosaic > *:first-child img { aspect-ratio: 1 / 1; }

/* fw-ed-pair: a confirmed matched before/after set, held side by side
   with a labelled hairline between. Apply to: Group (grid) of Images. */
.fw-ed-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.fw-ed-pair > * { min-width: 0; margin-block-start: 0; }
.fw-ed-pair img { aspect-ratio: 4 / 3; }
.fw-ed-pair-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(24px, 3vw, 44px); }
.fw-ed-pair-set > * { min-width: 0; margin-block-start: 0; }

/* ---- Spec list: checklist as a ruled specification sheet ---------- */

/* fw-ed-spec: ruled list where each item reads as a spec row.
   Apply to: List block. */
.fw-ed-spec { list-style: none; padding-left: 0; margin: 0; counter-reset: fwrow; }
.fw-ed-spec li {
	counter-increment: fwrow; display: grid;
	grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: baseline;
	border-bottom: 1px solid rgba(var(--fw-ed-ink), .28);
	padding: 17px 0; margin: 0; line-height: 1.6;
}
.fw-ed-spec li::before {
	content: counter(fwrow, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--heading, Archivo, system-ui, sans-serif);
	font-size: .74rem; font-weight: 800; letter-spacing: .1em;
	color: rgba(var(--fw-ed-ink), .95);
}
.fw-ed-spec li:first-child { border-top: 1px solid rgba(var(--fw-ed-ink), .28); }

/* ---- Pull quote / statement --------------------------------------- */

/* fw-ed-statement: oversized editorial statement line. Apply to: Paragraph. */
.fw-ed-statement {
	font-family: var(--wp--preset--font-family--heading, Archivo, system-ui, sans-serif);
	font-size: clamp(1.45rem, 2.9vw, 2.45rem) !important; line-height: 1.22;
	letter-spacing: -.028em; font-weight: 700; max-width: 22ch; text-wrap: balance; margin: 0;
}

/* ---- Two-column reading rail -------------------------------------- */

/* fw-ed-rail: sticky label column beside a scrolling body column.
   Apply to: Group (section child). */
.fw-ed-rail { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.fw-ed-rail > * { min-width: 0; margin-block-start: 0; }
.fw-ed-rail-label { position: sticky; top: 92px; }
.fw-ed-rail-label h2 { font-size: clamp(1.6rem, 2.5vw, 2.35rem); line-height: 1.12; letter-spacing: -.028em; margin: 0; max-width: 15ch; }
.fw-ed-rail-body > p { line-height: 1.78; max-width: 62ch; }
.fw-ed-rail-body > p:first-child { margin-top: 0; }

/* ---- Facts strip ---------------------------------------------------- */

/* fw-ed-facts: short ruled facts row (address, hours, terms).
   Apply to: Group (grid) of Groups. */
.fw-ed-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: rgba(var(--fw-ed-ink), .28); }
.fw-ed-facts > * { min-width: 0; margin-block-start: 0; padding: 26px 28px; background: inherit; }
.fw-ed-dark .fw-ed-facts > * { background: #141d24; }
.fw-ed-light .fw-ed-facts > * { background: #f3f6f8; }
.fw-ed-tint .fw-ed-facts > * { background: #e7eef3; }
.fw-ed-facts .fw-eyebrow { font-size: .68rem; margin: 0 0 12px; }
.fw-ed-facts p:not(.fw-eyebrow) { font-size: .98rem; line-height: 1.6; margin: 0; }

/* ---- Brand partners ------------------------------------------------- */

/* fw-ed-brands: hairline grid of authorized-brand cards (logo + relationship).
   Apply to: Group (grid) of Groups, each holding one fw-logo-muted Image and an fw-eyebrow Paragraph. */
.fw-ed-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: rgba(var(--fw-ed-ink), .28); }
.fw-ed-brands > * { min-width: 0; margin-block-start: 0; padding: 34px 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 172px; }
.fw-ed-dark .fw-ed-brands > * { background: #141d24; }
.fw-ed-light .fw-ed-brands > * { background: #f3f6f8; }
.fw-ed-tint .fw-ed-brands > * { background: #e7eef3; }
.fw-ed-brands .wp-block-image { margin: 0; flex: 1; display: flex; align-items: center; }
.fw-ed-brands .wp-block-image img { max-height: 56px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
/* fw-logo-tall: add to a square or stacked logo so it gets the height a wide wordmark gets in width. */
.fw-ed-brands .fw-logo-tall img { max-height: 84px; }
.fw-ed-brands .wp-block-image a { display: block; }
.fw-ed-brands .fw-eyebrow { font-size: .66rem; line-height: 1.5; margin: 0; }
/* fw-ed-verify: small link to the manufacturer's dealer listing, under a brand card's label. */
.fw-ed-brands .fw-ed-verify { font-size: .78rem; margin: -14px 0 0; }
.fw-ed-brands .fw-ed-verify a { color: inherit; opacity: .78; text-underline-offset: 3px; }
.fw-ed-brands .fw-ed-verify a:is(:hover, :focus-visible) { opacity: 1; }
@media (max-width: 600px) {
	.fw-ed-brands { grid-template-columns: repeat(2, 1fr); }
	.fw-ed-brands > * { padding: 26px 18px 18px; min-height: 140px; }
	.fw-ed-brands .wp-block-image img { max-height: 44px; max-width: 120px; }
	.fw-ed-brands .fw-logo-tall img { max-height: 68px; }
	/* An odd card out spans the row instead of leaving an empty cell. */
	.fw-ed-brands > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* fw-ed-reviews: hairline grid of verbatim reviews; five decorative stars sit above each quote.
   Apply to: Group (grid) of Quote blocks, each with one Paragraph and a citation. */
.fw-ed-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: rgba(var(--fw-ed-ink), .28); }
.fw-ed-reviews > .wp-block-quote { margin: 0; border: 0; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.fw-ed-dark .fw-ed-reviews > .wp-block-quote { background: #141d24; }
.fw-ed-light .fw-ed-reviews > .wp-block-quote { background: #f3f6f8; }
.fw-ed-tint .fw-ed-reviews > .wp-block-quote { background: #e7eef3; }
.fw-ed-reviews > .wp-block-quote::before { content: "★★★★★" / ""; color: #d98a1f; letter-spacing: .18em; font-size: .9rem; }
.fw-ed-reviews p { font-size: 1.02rem; line-height: 1.62; margin: 0; flex: 1; }
.fw-ed-reviews cite { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #205773; }
.fw-ed-dark .fw-ed-reviews cite { color: #91bbd5; }

/* White logos turn into dark silhouettes on the light editorial surfaces too. */
:is(.fw-ed-light, .fw-ed-tint) .fw-logo-muted img { filter: brightness(0); opacity: .7; }
:is(.fw-ed-light, .fw-ed-tint) :is(.fw-logo-muted:hover, .fw-card-hover:is(:hover, :focus-within) .fw-logo-muted) img { opacity: 1; }

/* ---- Notes / caveats ------------------------------------------------ */

/* fw-ed-note: bordered aside for an availability or scope caveat.
   Apply to: Group. */
.fw-ed-note {
	border-left: 3px solid rgba(var(--fw-ed-ink), .8);
	padding: 4px 0 4px 22px; margin-top: 30px;
}
.fw-ed-note p { font-size: .93rem; line-height: 1.65; margin: 0; }

/* ---- Buttons inside editorial sections ------------------------------ */
.fw-ed-sec .wp-block-buttons { gap: 18px; margin-top: 32px; }
.fw-ed-dark .wp-block-button:first-child .wp-block-button__link { background: #256184; color: #fff; border: 1px solid #91bbd5; }
.fw-ed-dark .wp-block-button + .wp-block-button .wp-block-button__link { background: transparent; color: #fff; padding-inline: 4px; text-decoration: underline; text-underline-offset: 5px; border: 0; }
.fw-ed-light .wp-block-button:first-child .wp-block-button__link,
.fw-ed-tint .wp-block-button:first-child .wp-block-button__link { background: #205773; color: #fff; border: 1px solid #205773; }
.fw-ed-light .wp-block-button + .wp-block-button .wp-block-button__link,
.fw-ed-tint .wp-block-button + .wp-block-button .wp-block-button__link { background: transparent; color: #205773; padding-inline: 4px; text-decoration: underline; text-underline-offset: 5px; border: 0; }
.fw-ed-sec a:focus-visible { outline: 3px solid #91bbd5; outline-offset: 4px; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 1024px) {
	.fw-ed-offset, .fw-ed-offset-rev { grid-template-columns: minmax(0, 1fr); }
	.fw-ed-offset-copy { margin-left: 0; margin-right: 0; }
	.fw-ed-offset-rev .fw-ed-offset-copy { order: 0; margin-right: 0; }
	.fw-ed-rail { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.fw-ed-rail-label { position: static; }
	.fw-ed-head-split { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
}
@media (max-width: 781px) {
	.fw-ed-sec { padding-inline: 24px; }
	.fw-ed-specimen { grid-template-columns: minmax(0, 1fr); }
	.fw-ed-specimen > * { border-right: 0; padding: 22px 0 28px; }
	.fw-ed-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fw-ed-bleed img { aspect-ratio: 4 / 3; }
	.fw-ed-bleed figcaption { padding-inline: 24px; }
	.fw-ed-pair-set { grid-template-columns: minmax(0, 1fr); }
	.fw-ed-facts { grid-template-columns: minmax(0, 1fr); }
	.fw-ed-offset .fw-ed-photo img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.fw-ed-rail-label { position: static; }
}

/* ---- Button hover states ---------------------------------------------
   theme.json's default hover (transparent + Cool Off-White text) is made for
   dark sections. These rules give every surface a hover that stays readable
   and visibly changes. Solid buttons shift shade; text-style buttons thicken
   their underline. */

/* Home sales band: its background is Cool Off-White, so the default hover text vanished. */
.fw-home-sales .wp-block-button:not(.is-style-outline):not(.is-style-arrow-link) > .wp-element-button:is(:hover, :focus-visible) {
	background: transparent;
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* Editorial and reference sections set their own button colors, which also blocked the hover. */
.fw-ed-light .wp-block-button:first-child .wp-block-button__link:is(:hover, :focus-visible),
.fw-ed-tint .wp-block-button:first-child .wp-block-button__link:is(:hover, :focus-visible) { background: #163f55; border-color: #163f55; color: #fff; }
.fw-ed-dark .wp-block-button:first-child .wp-block-button__link:is(:hover, :focus-visible),
.fw-reference-close .wp-block-button:first-child .wp-block-button__link:is(:hover, :focus-visible) { background: #1b4a66; border-color: #d4e6f1; color: #fff; }
.fw-ed-sec .wp-block-button + .wp-block-button .wp-block-button__link:is(:hover, :focus-visible),
.fw-reference-close .wp-block-button + .wp-block-button .wp-block-button__link:is(:hover, :focus-visible),
.fw-reference-note .wp-block-button__link:is(:hover, :focus-visible) { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fw-ed-light .wp-block-button + .wp-block-button .wp-block-button__link:is(:hover, :focus-visible),
.fw-ed-tint .wp-block-button + .wp-block-button .wp-block-button__link:is(:hover, :focus-visible),
.fw-reference-note .wp-block-button__link:is(:hover, :focus-visible) { color: #163f55; }

/* ======================================================================
 * Design + agent pass (2026-10-22)
 * Sitewide focus and motion rules, the fixed mobile call bar, and the
 * trust strip, how-it-works steps and footer visit block. Tokens only.
 * ====================================================================== */

/* One visible focus ring for every interactive element, on every surface. */
:where(a, summary, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-alt);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Headings break into even lines; body text avoids one-word last lines. */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(main p, main li) { text-wrap: pretty; }

/* In-page jumps (Request Service → form) glide, and land clear of the screen edge. */
html { scroll-padding-top: var(--wp--preset--spacing--medium); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Buttons: a short lift on hover so the state change reads as intentional. */
.wp-element-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wp-element-button:hover { transform: translateY(-1px); }
.wp-element-button:active { transform: none; }

/* Placeholders rendered near-black at 50%: SureForms colors them from its dropdown
 * variable, not the input one. Point both at Text Muted so they read on Charcoal. */
.fw-form .srfm-form-container {
	--srfm-color-input-placeholder: var(--wp--preset--color--main-accent);
	--srfm-dropdown-placeholder-color: var(--wp--preset--color--main-accent);
}

/* The phone field's flag shows its "+1" dial code past the 56px that intl-tel-input
 * reserves inline, so typed numbers and the placeholder ran under it. */
.fw-form .iti--show-flags input[type="tel"] { padding-left: 5rem !important; }

/* No-JS fallback printed after each form by functions.php (form_fallback). */
.fw-form-fallback {
	margin-top: var(--wp--preset--spacing--small);
	color: var(--wp--preset--color--main-accent);
	font-size: var(--wp--preset--font-size--x-small);
}

/* fw-mobile-cta, 1024px and below: the call strip becomes a bar fixed to the
 * bottom of the screen, in thumb reach on every page. The body gets matching
 * bottom padding so the footer is never hidden behind it. */
@media (max-width: 1024px) {
	body:not(.editor-styles-wrapper) .fw-mobile-cta {
		position: fixed;
		inset: auto 0 0;
		z-index: 90;
		margin: 0;
		padding-bottom: calc(var(--wp--preset--spacing--small) + env(safe-area-inset-bottom)) !important;
		box-shadow: 0 -8px 24px rgb(0 0 0 / 0.28);
	}
	body:not(.editor-styles-wrapper) { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}

/* fw-trust: one-line proof strip (rating, BoatUS, authorizations, pickup). Apply to: Group (grid) of Paragraphs. */
.fw-trust {
	border-block: 1px solid var(--wp--preset--color--border-light);
}
/* Four across, two by two on phones. Outranks the grid layout's auto-fill columns. */
.fw-trust > .wp-block-group.wp-block-group {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}
.fw-trust > .wp-block-group > * {
	margin: 0;
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	line-height: 1.4;
}
.fw-trust > .wp-block-group > * + * {
	border-left: 1px solid var(--wp--preset--color--border-light);
}
.fw-trust strong {
	display: block;
	color: var(--wp--preset--color--main);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
}
.fw-trust .fw-stars {
	display: block;
	margin-bottom: 0.2em;
	color: var(--wp--preset--color--primary-alt);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
}
@media (min-width: 782px) {
	.fw-trust .fw-stars { display: inline; margin-right: 0.4em; }
}
@media (max-width: 781px) {
	.fw-trust > .wp-block-group.wp-block-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fw-trust > .wp-block-group > * { padding-inline: var(--wp--preset--spacing--small); }
	.fw-trust > .wp-block-group > :nth-child(odd) { border-left: 0; }
	.fw-trust > .wp-block-group > :nth-child(n + 3) { border-top: 1px solid var(--wp--preset--color--border-light); }
}

/* fw-steps: numbered "how it works" cards from an ordered List. Apply to: List (ordered). */
ol.fw-steps {
	counter-reset: fw-step;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--small);
	padding: 0;
	margin-block: var(--wp--preset--spacing--medium) 0;
}
ol.fw-steps > li {
	counter-increment: fw-step;
	margin: 0;
	padding: var(--wp--preset--spacing--medium);
	background: var(--wp--preset--color--secondary);
	border-top: 2px solid var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--main-accent);
	line-height: 1.6;
}
/* Core's inline `.entry-content :not(.wp-block-group) > li:first-child` strips the first card's top padding. */
ol.fw-steps.fw-steps > li:nth-child(n) {
	padding-top: var(--wp--preset--spacing--medium);
}
ol.fw-steps > li::before {
	content: counter(fw-step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--wp--preset--spacing--small);
	color: var(--wp--preset--color--primary-alt);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
}
ol.fw-steps > li strong {
	display: block;
	margin-bottom: 0.35em;
	color: var(--wp--preset--color--main);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}
@media (max-width: 1024px) {
	ol.fw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	ol.fw-steps { grid-template-columns: minmax(0, 1fr); }
}

/* fw-footer-visit: address, appointment note and directions in the footer brand column. Apply to: Group. */
.fw-footer-visit p { margin: 0; }
.fw-footer-visit a:not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Subtle entrance for cards and steps as they scroll in. CSS scroll-driven
 * animation only: no script, nothing runs in browsers without support, and
 * nothing moves for visitors who ask for reduced motion. */
@keyframes fw-rise {
	from { opacity: 0; transform: translateY(1.25rem); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		body:not(.editor-styles-wrapper) :is(ol.fw-steps > li, .fw-home-service-card, .fw-home-feature, .fw-ed-reviews > .wp-block-quote) {
			animation: fw-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}

/* Reduced motion: drop the hover lift and image zoom too. */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button:hover { transform: none; }
	.fw-zoom-hover:is(:hover, :focus-within) img { transform: none; }
}

/* Inner-page hero call link (7 pages): set in the same type and shape as the
 * theme button so every primary action on the site looks alike. The extra
 * class outranks the running-text underline rule. */
.fw-reference-hero .fw-reference-hero-call a {
	border-radius: 4px;
	padding: 1rem 1.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fw-reference-hero .fw-reference-hero-call a:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
	.fw-reference-hero .fw-reference-hero-call a:hover { transform: none; }
}

/* About's dealer and service-center notes sit on Cool Off-White, but their H3s
 * inherited the sitewide light heading color and were invisible (1.08:1). */
.fw-reference-section .fw-reference-note h3 { color: #142128; font-size: var(--wp--preset--font-size--large); line-height: 1.25; }

/* Owner support message, using the Ukrainian flag palette. */
.fw-ukraine-banner {
 margin-block: 0;
 padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small);
}
.fw-ukraine-banner p { margin: 0; font-weight: 700; }
.fw-ukraine-banner p::before {
 content: "";
 display: inline-block;
 width: 1.5em;
 height: 1em;
 margin-inline-end: var(--wp--preset--spacing--x-small);
 vertical-align: -.1em;
 border: 1px solid var(--wp--preset--color--ukraine-yellow);
 background: linear-gradient(to bottom, var(--wp--preset--color--ukraine-blue) 50%, var(--wp--preset--color--ukraine-yellow) 50%);
}
.site-header:has(> .fw-ukraine-banner) > .wp-block-group { margin-block-start: 0; }

/* Balance the six brand marks within the narrow homepage sidebar. */
.fw-hero .wp-block-group:has(> .fw-logo-muted) {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--wp--preset--spacing--small);
 align-items: center;
}
.fw-hero .fw-logo-muted { margin: 0; }
.fw-hero .fw-logo-muted img { max-width: 100%; }