/*
Theme Name: Sebo Theme
Theme URI: https://sebomarketing.com
Author: Sebo Marketing
Author URI: https://sebomarketing.com
Description: Lazy Gate site theme, built on the Sebo Marketing framework. All color, type, and spacing decisions live as design tokens in theme.json; this stylesheet only covers what theme.json cannot express. WooCommerce-ready.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sebo
Tags: block-theme, full-site-editing, e-commerce, one-column, custom-colors, custom-menu, editor-style
*/

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

:root {
	/* 3:1 against the field background, per WCAG 1.4.11. A hairline that
	   fails contrast is the thing that tells someone where the input is. */
	--sb-field-border: color-mix(in srgb, var(--wp--preset--color--ink) 58%, var(--wp--preset--color--base));
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
}

/* Balance short headings rather than leaving a single orphaned word. */
h1,
h2,
h3,
.wp-block-post-title {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* Body copy caps its measure even inside wide containers. */
:where(.entry-content) p:not([class*="has-"]) {
	max-width: 68ch;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* WordPress puts a block-gap margin between every top-level block, which
   leaves a white strip between the header and the first full-bleed section,
   and another between the last section and the footer. Sections carry their
   own padding, so those gaps are never wanted here. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   2. Focus — a single visible treatment everywhere.
      Never remove this; keyboard users depend on it.
   ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Dark grounds need a light ring to stay visible. */
.sb-on-dark :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--wp--preset--color--yellow);
}

.skip-link {
	position: absolute;
	top: -100vh;
	left: 0;
	z-index: 999999;
	padding: 0.85rem 1.5rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	border-bottom-right-radius: 6px;
}

.skip-link:focus {
	top: 0;
}

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

/* -------------------------------------------------------------------------
   3. Links — underlines that sit below the baseline rather than
      slicing through descenders.
   ---------------------------------------------------------------------- */

:where(.entry-content, .wp-block-post-content) a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--action) 42%, transparent);
	transition: text-decoration-color var(--wp--custom--transition--base);
}

:where(.entry-content, .wp-block-post-content) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* Buttons and nav links must not inherit the content underline. */
.wp-block-navigation a,
.wp-element-button,
.wp-block-button__link {
	text-decoration: none;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: none;
}

/* Primary: yellow with a navy label. Conversion actions only, one per view.
   Never white text on yellow (1.8:1). */
.wp-block-button.is-style-quote > .wp-block-button__link,
.sb-btn-quote {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--yellow);
}

.wp-block-button.is-style-quote > .wp-block-button__link:hover,
.wp-block-button.is-style-quote > .wp-block-button__link:focus-visible,
.sb-btn-quote:hover {
	background: var(--wp--preset--color--yellow-hover);
	border-color: var(--wp--preset--color--yellow-hover);
	color: var(--wp--preset--color--navy);
}

/* Tertiary: navy outline, for downloads and low-priority links. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}

/* On navy the outline turns white. */
.sb-on-dark .wp-block-button.is-style-outline > .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

.sb-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
}

/* -------------------------------------------------------------------------
   4. Header
   ---------------------------------------------------------------------- */

/* header.js adds this to <html> for the length of one measurement, so it can
   read the header's expanded height instead of whatever height the transition
   happened to be part-way through. Removed in the same frame. */
.sb-measuring *,
.sb-measuring *::before,
.sb-measuring *::after {
	transition: none !important;
	animation: none !important;
}

/* Stickiness has to live on the template-part wrapper, not on .sb-header.
   WordPress renders the header part inside a <div class="wp-block-template-part">
   that is exactly as tall as the header, and a sticky element cannot travel
   beyond its containing block — so sticking it to .sb-header gives it zero
   travel and it scrolls away immediately. */
.wp-site-blocks > .wp-block-template-part:has(.sb-header),
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	/* The admin bar is position:fixed at the top of the viewport for logged-in
	   users, so a header stuck to 0 slides underneath it. WordPress exposes the
	   bar's height as a custom property (32px, or 46px under 782px), which also
	   keeps this correct when the bar is absent. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Fallback for WordPress versions that do not set the custom property. */
body.admin-bar .wp-site-blocks > .wp-block-template-part:has(.sb-header),
body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks > .wp-block-template-part:has(.sb-header),
	body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* Below 600px the admin bar stops being fixed and scrolls away with the page,
   so the header must sit flush again or it leaves a 46px gap. */
@media screen and (max-width: 600px) {
	body.admin-bar .wp-site-blocks > .wp-block-template-part:has(.sb-header),
	body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
		top: 0;
	}
}

/* The frosted background lives on a pseudo-element, not on .sb-header itself.
   backdrop-filter makes an element the containing block for its
   position:fixed descendants, which collapsed the mobile menu overlay to the
   height of the header instead of the viewport. Keeping the filter on a
   childless pseudo-element preserves the effect without that side effect. */
.sb-header {
	position: relative;
	background: transparent;
	border-bottom: var(--wp--custom--rule--hairline);
}

.sb-header__main {
	position: relative;
}

.sb-header__main::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
}

.sb-header__bar {
	position: relative;
	z-index: 1;
}

/* The bar carries the vertical rhythm, and shrinks in the compact state.
   Padding is on the bar rather than the header so the sticky background
   still spans the full viewport width. */
.sb-header__bar {
	padding-block: clamp(0.75rem, 1.4vw, 1.125rem);
	transition: padding-block var(--wp--custom--transition--base);
}

.sb-header .custom-logo-link,
.sb-header .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

.sb-header .wp-block-site-logo img {
	/* The brand guide's on-screen minimum is 120px wide. */
	width: clamp(120px, 11vw, 136px);
	height: auto;
	transition: opacity var(--wp--custom--transition--base);
}

.sb-header .wp-block-site-logo a:hover img {
	opacity: 0.78;
}

/* -----------------------------------------------------------------
   Compact (scrolled) header.

   The `is-compact` class is toggled by assets/js/header.js past a
   scroll threshold. The utility strip folds away and the lockup drops to
   its 120px minimum (the guide forbids separating "Since 1973" from it).
   ----------------------------------------------------------------- */

.sb-brand__mark {
	display: none;
	margin: 0;
	line-height: 0;
}

.sb-brand__mark img {
	display: block;
	width: 120px;
	height: auto;
	transition: opacity var(--wp--custom--transition--base);
}

.sb-brand__mark a:hover img {
	opacity: 0.78;
}

.sb-header.is-compact .sb-header__bar {
	padding-block: 0.5rem;
}

.sb-utility {
	max-height: 4rem;
	overflow: hidden;
	transition: max-height var(--wp--custom--transition--base),
		padding var(--wp--custom--transition--base);
}

.sb-header.is-compact .sb-utility {
	max-height: 0;
	padding-block: 0 !important;
}

.sb-header.is-compact .wp-block-site-logo {
	display: none;
}

.sb-header.is-compact .sb-brand__mark {
	display: block;
}

/* Without JS the header simply stays in its full state — the mark is the
   progressive enhancement, not the baseline. */

/* Nav links: an animated rule that grows from the left on hover, and
   stays put for the current page. */
.sb-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	color: var(--wp--preset--color--navy);
}

.sb-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--transition--base);
}

.sb-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.sb-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
.sb-header .wp-block-navigation-item.current-menu-ancestor .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Submenu (Residential / Commercial). */
.sb-header .wp-block-navigation__submenu-container {
	border: none;
	border-radius: var(--wp--custom--radius--lg);
	padding: 0.4rem;
	min-width: 15rem;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.sb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0.85rem;
	border-radius: var(--wp--custom--radius--sm);
	width: 100%;
}

.sb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.sb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--action);
}

/* -----------------------------------------------------------------
   Mobile overlay menu

   Full-screen, translucent so the page stays faintly visible behind
   it, with a large close control. Woo/WP already render the open and
   close buttons; this is presentation only.
   ----------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: clamp(1.25rem, 5vw, 2.5rem);
	/* Warm wash — enough to read against, still showing the page beneath.
	   !important because Woo/WP set `background-color: inherit` here at equal
	   specificity, which otherwise picks up the header's opaque white. */
	background-color: color-mix(in srgb, var(--wp--preset--color--tint) 94%, transparent) !important;
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	align-items: stretch;
	justify-content: flex-start;
}

/* Give the list room below the close button and center it in the sheet. */
/* WordPress nests two wrappers between the overlay and the menu list
   (__responsive-close, then __responsive-dialog). Both must grow, or the
   content has no height to be centered within. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	/* Center the list in the sheet rather than stacking it under the close
	   button with dead space below. */
	justify-content: center;
	padding-block: clamp(2rem, 8vh, 4rem);
	width: 100%;
	min-height: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0;
	width: 100%;
	max-width: 22rem;
	text-align: center;
	/* WordPress gives the list flex-grow, which pins the items to the top of
	   the sheet. Auto block margins center it regardless of that. */
	flex: 0 0 auto;
	margin-block: auto;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	justify-content: center;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--navy);
	/* Comfortable tap target. */
	padding-block: 0.85rem;
	width: 100%;
	justify-content: center;
}

/* The desktop hover rule draws an underline bar; not wanted in the sheet. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--action);
}

/* Submenu (Books) sits indented and quieter, always expanded in the sheet. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	background: transparent;
	border: 0;
	padding: 0 0 0.5rem;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	padding-block: 0.6rem;
}

/* Open (hamburger) control. */
.wp-block-navigation__responsive-container-open {
	padding: 0.4rem;
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--action);
}

/* Close (X) control — enlarged and given a visible hit area, since the
   default is a small bare glyph in the corner. */
.wp-block-navigation__responsive-container-close {
	top: clamp(1.25rem, 5vw, 2.5rem);
	right: clamp(1.25rem, 5vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* The overlay is fixed to the viewport, so it must clear the admin bar. */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 46px);
}

/* -------------------------------------------------------------------------
   5. Cart indicator in the header
   ---------------------------------------------------------------------- */

.sb-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base);
}

.sb-cart:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--action);
}

.sb-cart svg {
	width: 22px;
	height: 22px;
	display: block;
}

.sb-cart__count {
	position: absolute;
	top: -1px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.sb-cart__count:empty,
.sb-cart__count[data-count="0"] {
	display: none;
}

/* -------------------------------------------------------------------------
   6. Footer
   ---------------------------------------------------------------------- */

.sb-footer {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-navy-muted);
}

/* The stacked lockup's fairy mark is hairline linework. At 200px those
   white strokes fall below a device pixel and alias into looking rough,
   which reads as pixelation even though the source is vector. Giving it
   more room is the actual fix. */
.sb-footer .wp-block-site-logo img,
.sb-footer__logo img {
	width: clamp(140px, 13vw, 156px);
	height: auto;
	/* Nudge the fine strokes away from sub-pixel rendering. */
	shape-rendering: geometricPrecision;
}

.sb-footer :where(h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

.sb-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.sb-footer a:hover {
	color: var(--wp--preset--color--yellow);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.sb-footer .wp-block-navigation {
	gap: 0.55rem;
}

.sb-footer__legal {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
}

/* -------------------------------------------------------------------------
   7. Editorial pieces
   ---------------------------------------------------------------------- */

/* Eyebrow label above a section heading. */
.sb-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.23;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--action);
}

/* When the eyebrow is a term list (e.g. the product category on a book page)
   its links must not pick up the content underline — at this size and letter
   spacing an underline reads as noise. */
.sb-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sb-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* A framed image with depth, for a product shot or cover. */
.sb-object img {
	border-radius: 3px 10px 10px 3px;
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* -----------------------------------------------------------------
   Immersive hero — artwork behind the copy

   A whole-image dim would flatten the painting, so the scrim is
   left-weighted: dark enough for white type on the copy side, and
   clear on the right where the cover sits.
   ----------------------------------------------------------------- */

.sb-hero-immersive {
	position: relative;
	overflow: hidden;
}

.sb-hero-immersive::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			100deg,
			rgba(38, 30, 26, 0.88) 0%,
			rgba(38, 30, 26, 0.74) 36%,
			rgba(38, 30, 26, 0.34) 62%,
			rgba(38, 30, 26, 0.12) 100%
		);
}

/* On narrow screens the columns stack, so the copy sits over the middle of
   the image and needs an even wash instead of a side gradient. */
@media (max-width: 781px) {
	.sb-hero-immersive::before {
		background: linear-gradient(
			180deg,
			rgba(38, 30, 26, 0.72) 0%,
			rgba(38, 30, 26, 0.84) 55%,
			rgba(38, 30, 26, 0.72) 100%
		);
	}
}

.sb-hero-immersive .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.sb-hero-immersive__eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Brand green reads well against the dark scrim; it is only unusable
	   on light grounds. */
	color: var(--wp--preset--color--accent);
}

.sb-hero-immersive__meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.sb-hero-immersive h1 em {
	font-style: italic;
}

/* Lift the cover off the artwork so it reads as a physical object rather
   than part of the painting. */
.sb-object--floating img {
	box-shadow: 0 4px 12px rgba(20, 28, 25, 0.3), 0 28px 64px rgba(20, 28, 25, 0.45);
}

/* Outline button on a dark ground. */
.sb-btn-on-dark .wp-block-button__link,
.wp-block-button.is-style-outline.sb-btn-on-dark > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.65);
	background: transparent;
}

.sb-btn-on-dark .wp-block-button__link:hover,
.wp-block-button.is-style-outline.sb-btn-on-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--action);
	border-color: var(--wp--preset--color--base);
}

/* A soft rounded frame for photography and artwork. */
.sb-media img,
.sb-media video {
	display: block;
	border-radius: var(--wp--custom--radius--lg);
}

/* Emphasized pull quote, for a tagline or short testimonial. */
.sb-lede-quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	font-style: italic;
	line-height: 1.55;
	color: var(--wp--preset--color--action);
	text-align: center;
}

/* Decorative divider: a hairline rule either side of a small glyph. */
.sb-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--accent);
}

.sb-divider::before,
.sb-divider::after {
	content: "";
	height: 1px;
	flex: 1 1 auto;
	max-width: 7rem;
	background: currentColor;
}

/* Cards */
.sb-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.sb-card:hover {
	box-shadow: var(--wp--preset--shadow--soft);
}

/* -------------------------------------------------------------------------
   8. Blog
   ---------------------------------------------------------------------- */

/* The post grid is declared as a fixed 3-up in the templates, because
   combining columnCount with minimumColumnWidth made WordPress emit an
   unpredictable 2-up. Collapsing for narrower screens is done here. */
.wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 1024px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 660px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* The blog intro sits in a wide container so its rule spans the grid; its
   text should start at the same left edge as the first card, not be centered
   inside it. */
.sb-blog-intro > * {
	margin-inline: 0;
}

.sb-blog-intro p {
	max-width: 58ch;
}

/* Cards stretch to the row height so the "Keep reading" link lands on a
   consistent baseline instead of floating wherever the excerpt ends. */
.sb-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sb-post-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sb-post-card .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: 0.75rem;
}

.sb-post-card .wp-block-post-excerpt__more-text a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--action) 38%, transparent);
}

.sb-post-card .wp-block-post-excerpt__more-text a:hover {
	border-bottom-color: currentColor;
}

.sb-post-card .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.sb-post-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.sb-post-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.sb-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--action);
}

.sb-meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   9. Forms — Gravity Forms and core inputs share one look
   ---------------------------------------------------------------------- */

input:where([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="date"]),
select,
textarea,
.wp-block-search__input {
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--sb-field-border);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

input:where([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="search"]):focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--action) 16%, transparent);
	outline: none;
}

::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	opacity: 1;
}

label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

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

   Selectors are doubled up on `.gform_wrapper.gravity-theme` where
   Gravity's own stylesheet would otherwise win on specificity.
   ----------------------------------------------------------------- */

.gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: var(--wp--preset--spacing--20);
	grid-column-gap: var(--wp--preset--spacing--20);
}

/* `.gform_fields` is load-bearing. Gravity ships
   `.gform_wrapper.gravity-theme .gfield_label` verbatim and its stylesheet is
   printed after the theme's, so an identical selector loses on source order
   and silently does nothing. */
.gform_wrapper.gravity-theme .gform_fields .gfield_label,
.gform_wrapper.gravity-theme .gform_fields legend.gfield_label,
.gform_wrapper.gravity-theme .gform_fields .gform-field-label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0;
}

.gform_wrapper.gravity-theme .gfield_label .gfield_required,
.gform_wrapper.gravity-theme .gfield_label .gfield_required_text,
.gform_wrapper.gravity-theme .gfield_label .gfield_required_asterisk {
	color: #a4341f;
	font-weight: 600;
}

.gform_wrapper.gravity-theme .gform_fields .gfield_description {
	padding-top: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}

/* Inputs: match the site's field styling, overriding Gravity's. */
.gform_wrapper.gravity-theme .ginput_container input[type="text"],
.gform_wrapper.gravity-theme .ginput_container input[type="email"],
.gform_wrapper.gravity-theme .ginput_container input[type="tel"],
.gform_wrapper.gravity-theme .ginput_container input[type="url"],
.gform_wrapper.gravity-theme .ginput_container input[type="number"],
.gform_wrapper.gravity-theme .ginput_container select,
.gform_wrapper.gravity-theme .ginput_container textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--sb-field-border);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
	transition: border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.gform_wrapper.gravity-theme .ginput_container textarea {
	min-height: 9rem;
	resize: vertical;
}

.gform_wrapper.gravity-theme .ginput_container input:focus,
.gform_wrapper.gravity-theme .ginput_container select:focus,
.gform_wrapper.gravity-theme .ginput_container textarea:focus {
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--action) 16%, transparent);
	outline: none;
}

/* Native select needs its own chevron once the default look is replaced. */
.gform_wrapper.gravity-theme .ginput_container select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4E52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 18px 18px;
	padding-right: 2.6rem;
}

/* Submit button — the brand pill. */
.gform_wrapper.gravity-theme .gform_footer :is(input, button)[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer :is(input, button):is(.gform_next_button, .gform_button, .gform_previous_button) {
	width: auto;
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--yellow);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.625rem 1.375rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.gform_wrapper.gravity-theme .gform_footer :is(input, button)[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_page_footer :is(input, button):is(.gform_next_button, .gform_button, .gform_previous_button):hover:not(:disabled) {
	background: var(--wp--preset--color--yellow-hover);
	border-color: var(--wp--preset--color--yellow-hover);
}

/* Disabled (step 1 until the budget box is ticked): clearly inert, still
   legible. */
.gform_wrapper.gravity-theme .gform_page_footer :is(input, button):disabled {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--steel-300);
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
}

/* "Previous" is the tertiary outline, so it never competes with "Next". */
.gform_wrapper.gravity-theme .gform_page_footer :is(input, button).gform_previous_button {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

.gform_wrapper.gravity-theme .gform_page_footer :is(input, button).gform_previous_button:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}

.gform_wrapper.gravity-theme .gform_footer {
	padding: var(--wp--preset--spacing--20) 0 0;
	margin: 0;
	justify-content: flex-start;
}

/* Validation */
.gform_wrapper.gravity-theme .gfield_description.validation_message,
.gform_wrapper.gravity-theme .validation_message {
	margin-top: 0.4rem;
	padding: 0.5rem 0.75rem;
	background: #fdf3f1;
	border: 0;
	border-left: 3px solid #a4341f;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--x-small);
	color: #8f2d1b;
}

/* These restate the base field selector's shape with `.gfield_error` added.
   Written as `.gfield_error input` alone they are LESS specific than the base
   rule, which carries an [type="..."] attribute selector, so an invalid field
   keeps its normal border and never looks wrong. */
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="text"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="email"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="tel"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="url"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="number"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container select,
.gform_wrapper.gravity-theme .gfield_error .ginput_container textarea,
.gform_wrapper.gravity-theme .gfield_error .gchoice {
	border-color: #a4341f;
	box-shadow: 0 0 0 3px rgba(164, 52, 31, 0.1);
}

.gform_wrapper.gravity-theme .gform_validation_errors {
	border-radius: 10px;
	border: 0;
	border-left: 3px solid #a4341f;
	background: #fdf3f1;
	box-shadow: none;
	padding: 1rem 1.25rem;
}

.gform_wrapper.gravity-theme .gform_validation_errors > h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: #8f2d1b;
	margin: 0;
}

.gform_wrapper.gravity-theme .gform_validation_errors > h2::before {
	display: none;
}

/* Inline confirmation, for any form not routed to a Thank You page. */
.gform_confirmation_message {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--action);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--heading);
}

/* -------------------------------------------------------------------------
   10. Utilities
   ---------------------------------------------------------------------- */

/* Let a wide/full block bleed to the viewport edge on small screens. */
@media (max-width: 600px) {
	.sb-bleed-mobile {
		margin-left: calc(var(--wp--preset--spacing--20) * -1);
		margin-right: calc(var(--wp--preset--spacing--20) * -1);
		border-radius: 0;
	}
}

/* Overlay text needs a scrim to stay readable over artwork. */
.sb-scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(74, 78, 82, 0.55) 0%,
		rgba(74, 78, 82, 0.2) 45%,
		rgba(74, 78, 82, 0.5) 100%
	);
	pointer-events: none;
}

.sb-scrim > * {
	position: relative;
	z-index: 1;
}

/* A monochrome logo can serve both the light header and the dark footer by
   being inverted, rather than needing a separate reversed asset. Only sound for
   single-color marks — a full-color logo must have its own reversed file. */
.sb-footer__logo--invert img {
	filter: invert(1) brightness(1.9);
}

/* -------------------------------------------------------------------------
   11. Motion

   Paired with assets/js/reveal.js. The `sb-js` flag is set by an inline
   script in the head, BEFORE paint, so without JavaScript everything stays
   visible rather than being hidden behind an animation that never runs.
   ---------------------------------------------------------------------- */

.sb-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Without JavaScript nothing is ever revealed, so the content must start
   visible and the animation must be the enhancement. */
html:not(.sb-js) .sb-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.sb-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -----------------------------------------------------------------
   Gravity radios, checkboxes and the datepicker

   Gravity renders the choice input as a SIBLING of its label, not
   inside it, so the card has to be the row. Styling the label instead
   leaves the native control floating outside the bordered box.
   ----------------------------------------------------------------- */

.gform_wrapper.gravity-theme .gfield_radio,
.gform_wrapper.gravity-theme .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper.gravity-theme .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--surface);
	border: 1.5px solid var(--sb-field-border);
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.gform_wrapper.gravity-theme .gchoice:hover,
.gform_wrapper.gravity-theme .gchoice:has(input:checked) {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--action);
}

.gform_wrapper.gravity-theme .gchoice:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gchoice input[type="radio"],
.gform_wrapper.gravity-theme .gchoice input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0.85rem 0 0;
	accent-color: var(--wp--preset--color--action);
	cursor: pointer;
}

/* The label carries the vertical padding so the whole row height is a tap
   target, not just the text. `.gform_fields` for specificity: Gravity sets 600
   here, which otherwise renders UNCHECKED options bolder than the chosen one. */
.gform_wrapper.gravity-theme .gform_fields .gchoice label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0.7rem 0;
	background: none;
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gform_fields .gchoice:has(input:checked) label {
	font-weight: 600;
}

/* Gravity Forms 3.0 ships its OWN datepicker, not jQuery UI, so
   `#ui-datepicker-div` selectors match nothing. */
.gform-datepicker-calendar {
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
	font-family: var(--wp--preset--font-family--body);
}

.gform-datepicker-calendar td.day {
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
}

.gform-datepicker-calendar td.day:hover {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--action);
}

.gform-datepicker-calendar td.day.selected,
.gform-datepicker-calendar td.day[aria-selected="true"] {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	box-shadow: none;
}

.gform-datepicker-calendar td.day.dayToday {
	color: var(--wp--preset--color--action);
	font-weight: 600;
}

/* The honeypot is the whole anti-spam mechanism; it must stay hidden. */
.gform_wrapper.gravity-theme .gform_validation_container,
.gform_wrapper.gravity-theme .gfield--type-honeypot {
	display: none !important;
}

/* =========================================================================
   12. Lazy Gate components

   Built from the Lazy Gate design system (tokens, Button, GateStyleCard,
   SpecTable). Every value is a theme.json token; nothing here names a hex.
   ====================================================================== */

/* Unconfirmed content is visible on purpose, so it cannot ship unnoticed. */
.sb-placeholder {
	padding: 0 0.25em;
	background: var(--wp--preset--color--sky-wash);
	outline: 1px dashed var(--wp--preset--color--action);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.sb-on-dark .sb-placeholder,
.has-navy-background-color .sb-placeholder {
	background: transparent;
	outline-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--base);
}

/* --- Utility strip ----------------------------------------------------- */

.sb-utility p {
	margin: 0;
	line-height: 1.43;
	white-space: nowrap;
}

.sb-utility a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.sb-utility a:hover {
	color: var(--wp--preset--color--yellow);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 781px) {
	.sb-utility__tag,
	.sb-utility__email {
		display: none;
	}
}

/* --- Header navigation ------------------------------------------------- */

/* "Request a Quote" is in the nav for the mobile sheet; on desktop the yellow
   button already says it. */
.sb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .sb-nav-quote {
	display: none;
}

.sb-header__cta .wp-block-button__link {
	white-space: nowrap;
}

/* Six items and a button need ~900px. WordPress only collapses the menu below
   600px, so between 600 and 1080 it would wrap or overflow. Extend the
   hamburger up to 1080. */
@media (min-width: 600px) and (max-width: 1079px) {
	.sb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 420px) {
	.sb-header__cta .wp-block-button__link {
		padding-inline: 0.875rem;
	}
}

/* --- Sections ---------------------------------------------------------- */

/* Section intros: eyebrow, heading, lede stacked tight. */
.sb-intro > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

.sb-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.58;
}

.sb-note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Text on navy */
.has-navy-background-color {
	color: var(--wp--preset--color--base);
}

.has-navy-background-color :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--base);
}

.has-navy-background-color .sb-eyebrow {
	color: var(--wp--preset--color--yellow);
}

.has-navy-background-color .sb-note,
.has-navy-background-color .sb-muted-on-dark {
	color: var(--wp--preset--color--on-navy-muted);
}

.has-navy-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

.has-navy-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--yellow);
}

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

.sb-hero h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
}

.sb-hero--page h1 {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.09;
}

.sb-hero__media img,
.sb-hero__media video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--sky-wash);
}

.sb-hero__media figcaption {
	color: var(--wp--preset--color--on-navy-muted);
}

/* --- Proof strip (four icon facts) ------------------------------------- */

.sb-proof {
	border-bottom: var(--wp--custom--rule--hairline);
}

.sb-proof__item::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--action);
	-webkit-mask: var(--sb-icon) center / contain no-repeat;
	mask: var(--sb-icon) center / contain no-repeat;
}

.sb-proof__item h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.sb-proof__item p {
	margin-top: 0.375rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

/* Icons as masks, so they take the brand color and stay editable as plain
   groups. Stroke icons from the Lucide set (ISC license). */
.sb-icon-clock { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.sb-icon-shield { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.sb-icon-zap { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E"); }
.sb-icon-remote { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); }
.sb-icon-ruler { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); }
.sb-icon-truck { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.sb-icon-snow { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' x2='22' y1='12' y2='12'/%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='m20 16-4-4 4-4'/%3E%3Cpath d='m4 8 4 4-4 4'/%3E%3Cpath d='m16 4-4 4-4-4'/%3E%3Cpath d='m8 20 4-4 4 4'/%3E%3C/svg%3E"); }
.sb-icon-sun { --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); }

/* --- Numbered list (why vertical) -------------------------------------- */

.sb-numbered {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sb-numbered > * {
	margin: 0;
}

.sb-numbered__item {
	display: grid;
	grid-template-columns: 1.625rem 1fr;
	column-gap: 0.875rem;
	align-items: start;
}

.sb-numbered__item > * {
	margin: 0;
}

.sb-numbered__num {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
}

.sb-numbered__item h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.5;
}

.sb-numbered__item p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

/* --- Cards ------------------------------------------------------------- */

.sb-card-outline,
.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--steel-300);
	border-radius: var(--wp--custom--radius--lg);
}

/* White card on a colored ground: no border, the one brand shadow. */
.has-tint-background-color .is-style-card,
.has-surface-background-color .is-style-card,
.has-tint-background-color .sb-card-outline,
.has-surface-background-color .sb-card-outline {
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Package cards */
.sb-package h3 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.sb-price-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sb-price {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.14;
	font-variant-numeric: tabular-nums;
}

.sb-package .wp-block-buttons {
	margin-top: auto;
}

.sb-package {
	display: flex;
	flex-direction: column;
}

/* Gate style chips (homepage) and cards (gate styles page) */
.sb-style-chip h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.sb-style-chip p {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

.sb-style-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sb-style-card .wp-block-video,
.sb-style-card .wp-block-image {
	margin: 0;
	background: var(--wp--preset--color--sky-wash);
}

.sb-style-card video,
.sb-style-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.sb-style-card__body {
	padding: var(--wp--preset--spacing--20);
}

.sb-style-card__body > * {
	margin: 0;
}

.sb-style-card__body > * + * {
	margin-top: 0.5rem;
}

.sb-style-card__body p:not(.sb-eyebrow) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.47;
}

/* Grids built as groups: the CSS gap is the only spacing (see GOTCHAS). */
.sb-grid {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sb-grid > * {
	margin-block: 0 !important;
}

.sb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

@media (max-width: 600px) {
	.sb-grid--3,
	.sb-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.sb-grid--2:not(.sb-grid--keep) { grid-template-columns: minmax(0, 1fr); }
}

/* --- Steps (how it works) ---------------------------------------------- */

.sb-step {
	padding-top: var(--wp--preset--spacing--20);
	border-top: 3px solid var(--wp--preset--color--navy);
}

.sb-step > * {
	margin: 0;
}

.sb-step__num {
	color: var(--wp--preset--color--action);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 700;
	line-height: 1.1;
}

.sb-step h3 {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.sb-step p:last-child {
	margin-top: 0.75rem;
}

/* --- Spec table -------------------------------------------------------- */

.wp-block-table.is-style-spec,
.sb-spec {
	margin: 0;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.wp-block-table.is-style-spec table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--label);
}

.wp-block-table.is-style-spec :where(th, td) {
	padding: 0.75rem var(--wp--preset--spacing--20);
	border: 0;
	border-bottom: var(--wp--custom--rule--hairline);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-spec thead {
	border: 0;
}

.wp-block-table.is-style-spec thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-table.is-style-spec tbody tr:last-child :where(th, td) {
	border-bottom: 0;
}

.wp-block-table.is-style-spec tbody td:first-child {
	color: var(--wp--preset--color--muted);
}

.wp-block-table.is-style-spec tbody td:not(:first-child),
.wp-block-table.is-style-spec thead th:not(:first-child) {
	text-align: right;
}

.wp-block-table.is-style-spec tbody td:not(:first-child) {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wp-block-table.is-style-spec figcaption {
	margin: 0;
	padding: 0.75rem var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

/* On white, the table is a bordered card; on steel/sky it floats. */
.wp-block-table.is-style-spec {
	border: 1px solid var(--wp--preset--color--steel-300);
}

.has-surface-background-color .wp-block-table.is-style-spec,
.has-tint-background-color .wp-block-table.is-style-spec {
	border-color: transparent;
}

/* --- Media ------------------------------------------------------------- */

.sb-media figcaption,
.wp-block-video figcaption {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

.sb-illustration img {
	display: block;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
}

/* Portrait (9:16) clips stay phone-sized rather than towering. */
.sb-video-portrait video {
	max-height: 34rem;
	width: auto;
	margin-inline: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

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

.sb-faq .wp-block-details {
	border-bottom: var(--wp--custom--rule--hairline);
	padding-block: var(--wp--preset--spacing--10);
}

.sb-faq .wp-block-details summary {
	cursor: pointer;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	list-style-position: outside;
}

.sb-faq .wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

/* --- Download links ---------------------------------------------------- */

.sb-downloads a {
	font-weight: 600;
}

/* --- Responsive columns: stack hero media under copy cleanly ----------- */

@media (max-width: 781px) {
	.sb-hero .wp-block-columns {
		gap: var(--wp--preset--spacing--30);
	}
}

/* --- Ambient video pause control (video.js) ---------------------------- */

.wp-block-video.has-toggle {
	position: relative;
}

.sb-video-toggle {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--navy) 78%, transparent);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.wp-block-video:has(figcaption) .sb-video-toggle {
	bottom: calc(0.75rem + 2rem);
}

.sb-video-toggle::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: auto;
	/* Pause: two bars */
	background: linear-gradient(to right, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}

.sb-video-toggle[data-state="paused"]::before {
	/* Play: a triangle */
	background: currentColor;
	clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

.sb-video-toggle:hover {
	background: var(--wp--preset--color--navy);
}

.sb-video-toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--yellow);
	outline-offset: 2px;
}

/* --- Quote form ---------------------------------------------------------- */

.sb-quote-form {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
}

.gform_wrapper.gravity-theme .gf_progressbar_wrapper .gf_progressbar_title {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gform_wrapper.gravity-theme .gf_progressbar {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--sm);
}

.gform_wrapper.gravity-theme .gf_progressbar_percentage {
	background: var(--wp--preset--color--action);
	border-radius: var(--wp--custom--radius--sm);
}

.gform_wrapper.gravity-theme .gf_progressbar_percentage span {
	color: var(--wp--preset--color--base);
}

.gform_wrapper.gravity-theme .lg-price-box {
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--tint);
	border-left: 3px solid var(--wp--preset--color--action);
	border-radius: var(--wp--custom--radius--sm);
}

.gform_wrapper.gravity-theme .lg-price-box p {
	margin: 0;
}

.gform_wrapper.gravity-theme .lg-price-box p + p {
	margin-top: 0.5rem;
}

.gform_wrapper.gravity-theme .lg-thanks {
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--tint);
	border-radius: var(--wp--custom--radius--sm);
}

.gform_wrapper.gravity-theme .lg-thanks h2 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.lg-budget-note {
	margin: 0.5rem 0 0;
	flex-basis: 100%;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gform_wrapper.gravity-theme .gform_page_footer {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

/* Section heading rows with a link on the right stack on phones. */
@media (max-width: 781px) {
	.sb-section-head .has-text-align-right {
		text-align: left;
	}
}

/* Empty style card media until Jeff supplies a drawing. */
.sb-style-card__empty {
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	margin: 0;
}

/* --- Review fixes ------------------------------------------------------ */

/* `.sb-numbered__item p` (muted, small) outranks the number's own class. */
.sb-numbered__item .sb-numbered__num {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
}

/* Footer column labels: the eyebrow treatment, in yellow on navy. */
.sb-footer .sb-footer__heading {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--yellow);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.23;
}

.sb-footer .wp-block-navigation {
	font-weight: 400;
}

/* Package cards share a row height; the button sits on a common baseline.
   The inline margin on the buttons block is the editor's default spacing,
   so it needs !important to give way to auto. */
.sb-grid > .sb-package {
	height: 100%;
}

.sb-package > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--10);
}

.sb-section-head a {
	text-decoration: none;
}

.sb-section-head a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}