/**
 * Optiset Belts — global styles.
 *
 * Design tokens live in theme.json. Structural/decorative styling that block
 * supports cannot express cleanly (clip-paths, pseudo-elements, grid
 * breakpoints, form controls, section rhythm) lives here as .opt-* classes so
 * block markup stays free of inline style attributes.
 * Mirrored in editor.css for editor parity.
 */

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

a,
button,
.wp-block-button__link {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	a,
	button,
	.wp-block-button__link {
		transition: none;
	}
}

/* ---------- Boxed shell (same 1320px cap as constrained sections/footer) ---------- */

.opt-shell {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1320px);
	margin-inline: auto;
}

/* ---------- Hazard stripe brand bar ---------- */

.opt-hazard-stripe {
	height: 8px;
	background-image: repeating-linear-gradient(45deg, var(--wp--preset--color--accent) 0 16px, var(--wp--preset--color--base) 16px 32px);
}

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

.opt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 1.25rem 6vw;
	border-block-end: 3px solid var(--wp--preset--color--accent);
}

.opt-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent);
}

.opt-header .wp-block-navigation .current-menu-item > a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Hamburger: yellow-bordered square, matching the source toggle. */
.opt-header .wp-block-navigation__responsive-container-open,
.opt-header .wp-block-navigation__responsive-container-close {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	padding: 8px;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
}

.opt-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/* Header CTA is slightly smaller than standard buttons. */
.opt-header .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	line-height: normal;
}

@media (max-width: 900px) {
	.opt-header .wp-block-buttons {
		display: none;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		align-items: stretch;
		justify-content: flex-end;
		background: rgba(15, 15, 15, 0.78);
		padding: 0;
		backdrop-filter: blur(4px);
		animation: opt-nav-backdrop-in 180ms ease-out;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close {
		width: min(88vw, 380px);
		height: 100dvh;
		margin-inline-start: auto;
		margin-inline-end: 0;
		padding: 24px;
		position: relative;
		overflow-y: auto;
		box-sizing: border-box;
		background: var(--wp--preset--color--surface);
		border-inline-start: 3px solid var(--wp--preset--color--accent);
		box-shadow: -20px 0 48px rgba(0, 0, 0, 0.38);
		animation: opt-nav-drawer-in 220ms ease-out;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		position: static;
		min-height: calc(100dvh - 48px);
		flex-direction: column;
	}

	/* The close control occupies the hamburger's exact on-screen box (40px,
	   28px from the top, 6vw from the right edge, same 2px accent frame), so
	   opening and closing the menu happen in the same spot under the thumb.
	   The drawer panel is flush with the viewport's right edge, which makes
	   the panel-relative 6vw inset equal to the toggle's viewport inset. */
	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		inset-block-start: 28px;
		inset-inline-end: 6vw;
		width: 40px;
		height: 40px;
		box-sizing: border-box;
		border: 2px solid var(--wp--preset--color--accent);
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--accent);
		padding: 6px;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding-block-start: 80px;
		align-items: stretch;
		justify-content: flex-start;
		flex: 1;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0;
		align-items: stretch;
		flex-direction: column;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		box-sizing: border-box;
		border-block-end: 1px solid var(--wp--preset--color--border);
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
		border-block-start: 1px solid var(--wp--preset--color--border);
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 18px 8px;
		box-sizing: border-box;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 20px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-align: start;
		color: var(--wp--preset--color--contrast);
		transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--accent);
		background: rgba(242, 180, 0, 0.08);
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: -2px;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		padding-inline: 5px;
		color: var(--wp--preset--color--accent);
		background: rgba(242, 180, 0, 0.08);
		border-inline-start: 3px solid var(--wp--preset--color--accent);
	}
}

@keyframes opt-nav-backdrop-in {
	from {
		background-color: rgba(15, 15, 15, 0);
	}

	to {
		background-color: rgba(15, 15, 15, 0.78);
	}
}

@keyframes opt-nav-drawer-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.opt-header .wp-block-navigation__responsive-container.is-menu-open,
	.opt-header .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close {
		animation: none;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		transition: none;
	}
}

@media (min-width: 600px) and (max-width: 900px) {
	.opt-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.opt-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Drawer-only "Get a Quote" CTA: a fifth Navigation item (className
   opt-nav-cta on wp_navigation #15) standing in for the standalone header
   button, which the approved design hides at drawer widths. It renders as
   the notched accent button at the end of the drawer rows and never appears
   in the desktop menu, where the standalone button is visible. */

@media (max-width: 900px) {
	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.opt-nav-cta {
		border-block-end: none;
		margin-block-start: 28px;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .opt-nav-cta > .wp-block-navigation-item__content {
		padding: 15px 24px;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		text-align: center;
		font-size: 16px;
		clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .opt-nav-cta > .wp-block-navigation-item__content:hover,
	.opt-header .wp-block-navigation__responsive-container.is-menu-open .opt-nav-cta > .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--accent-dark);
		color: var(--wp--preset--color--base);
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .opt-nav-cta > .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var(--wp--preset--color--contrast);
		outline-offset: -2px;
	}
}

@media (min-width: 901px) {
	.opt-header .wp-block-navigation .opt-nav-cta {
		display: none;
	}
}

/* ---------- Navigation submenus (Products dropdown) ----------
   The Products item is a core navigation-submenu whose children are managed
   in Appearance → Editor → Navigation. Desktop shows a dark card dropdown;
   inside the open drawer, core keeps submenus expanded, so the children
   render as lighter indented rows under their parent. */

@media (min-width: 901px) {
	/* Panel background intentionally comes from the Navigation block's own
	   overlay color setting (editable in the Site Editor); the theme only
	   adds the frame, rail, and shadow. */
	.opt-header .wp-block-navigation .wp-block-navigation__submenu-container {
		min-width: 240px;
		padding: 10px 0;
		border: 1px solid var(--wp--preset--color--border);
		border-block-start: 3px solid var(--wp--preset--color--accent);
		box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
		z-index: 30;
	}

	.opt-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 18px;
		font-size: 12.5px;
		color: var(--wp--preset--color--muted);
	}

	.opt-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.opt-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--accent);
		background: rgba(242, 180, 0, 0.08);
	}
}

/* The chevron is core's submenu toggle button (Interactivity API manages its
   aria-expanded); the theme recolors it and rotates it while its menu is
   open — on desktop hover/focus and whenever the toggle reports expanded. */
.opt-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--accent);
	transition: transform 180ms ease;
}

.opt-header .wp-block-navigation .wp-block-navigation-submenu:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon,
.opt-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.opt-header .wp-block-navigation .wp-block-navigation__submenu-icon {
		transition: none;
	}
}

/* Current-page (active) submenu states — same treatment as hover; the parent
   item lights up whenever one of its children is the current page. Core adds
   current-menu-item natively because the menu uses entity links. */
.opt-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	background: rgba(242, 180, 0, 0.08);
}

.opt-header .wp-block-navigation .wp-block-navigation-submenu:has(.current-menu-item) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 900px) {
	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		width: 100%;
		flex-basis: 100%;
		padding-inline-start: 20px;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-block: none;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 8px;
		font-size: 15px;
		font-weight: 500;
		color: var(--wp--preset--color--muted);
	}

	/* Collapsible drawer groups: core hides its submenu toggle in the overlay
	   and force-opens every submenu; the theme restores the toggle as a 44px
	   tap target beside the parent label and collapses any group whose toggle
	   reports aria-expanded="false" (no :has support → groups simply stay
	   open, matching core's default). */
	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
		display: flex;
		/* core's overlay forces flex-direction: column on menu items */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		width: auto;
		flex: 1;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: inline-flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		width: 16px;
		height: 16px;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:has(> .wp-block-navigation-submenu__toggle[aria-expanded="false"]) > .wp-block-navigation__submenu-container {
		display: none;
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent);
		background: rgba(242, 180, 0, 0.08);
	}

	.opt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:has(.current-menu-item) > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent);
	}
}

/* ---------- Buttons: outline (secondary) variant ----------
   Core ships its own .is-style-outline rules (smaller .667em/1.333em padding,
   2px currentColor border) at higher specificity than theme.json variations,
   which broke secondary button size and hover contrast. Match the source:
   1.5px contrast border with border-compensated padding so primary and
   secondary buttons are exactly the same height. */

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	background-color: transparent;
	background-image: none;
	padding: calc(0.9375rem - 1.5px) calc(1.875rem - 1.5px);
	font-weight: 600;
}

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

/* Notched CTA button (clip-path can't be expressed as a block support). */
.opt-notch .wp-block-button__link {
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	border-radius: 0;
}

/* ---------- Section rhythm (source: 90px between home sections) ---------- */

.opt-section {
	padding-block-end: 5.625rem;
}

.opt-section--first {
	padding-block-start: 5.625rem;
}

/* Home section headings use the approved fixed clamp rather than core's
   fluid preset interpolation. More specific Product/Trust/CTA rules below
   retain their section-specific maximums. */
.opt-section h2 {
	font-size: clamp(26px, 3vw, 36px) !important;
	line-height: normal;
}

/* ---------- Eyebrows / kickers ---------- */

.opt-eyebrow-pill,
.opt-eyebrow-badge,
.opt-kicker {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.opt-kicker {
	line-height: normal;
}

.opt-eyebrow-pill {
	display: inline-block;
	width: fit-content;
	font-size: 11.5px;
	line-height: 17px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	border-radius: 20px;
	padding: 7px 15px;
}

.opt-eyebrow-badge {
	display: inline-block;
	width: fit-content;
	font-size: 0.71875rem;
	letter-spacing: 0.14em;
	line-height: normal;
	background: var(--wp--preset--color--card);
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	padding: 7px 14px;
}

.opt-kicker--dim {
	color: var(--wp--preset--color--dim);
}

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

.opt-hero h1 {
	font-size: clamp(32px, 4.2vw, 50px) !important;
	line-height: 1.1;
}

.opt-hero {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	padding-block: 4.75rem 4rem;
}

.opt-hero > .opt-shell {
	display: flex;
	align-items: center;
	min-height: 380px;
}

.opt-hero-copy {
	position: relative;
	z-index: 3;
	max-width: 640px;
}

.opt-hero-copy > p {
	max-width: 480px;
}

.opt-hero-copy > h1 + p {
	margin-block-start: 20px;
}

.opt-hero-copy > .wp-block-buttons {
	margin-block-start: 30px;
}

.opt-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	padding: 15px 30px;
	font-size: 13.5px;
	line-height: 20px;
}

.opt-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 13.5px 28px;
	font-size: 13.5px;
	line-height: 20px;
}

.opt-hero-media {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	z-index: 1;
	height: 88%;
	max-width: 55%;
	margin: 0;
	opacity: 0.92;
}

.opt-hero-media img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

/* At drawer widths the pinned machine sits behind the copy and competes with
   it. Keep the approved composition but treat the image as a background
   texture: dimmed, non-interactive, and mask-dissolved toward the text
   (opaque at its anchored bottom-right corner, fading to the top-left).
   Tablets keep more presence than phones. Consciously supersedes strict
   source parity at these widths (decision #41). */
@media (max-width: 900px) {
	.opt-hero-media {
		z-index: 0;
		opacity: 0.45;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(315deg, #000 30%, transparent 82%);
		mask-image: linear-gradient(315deg, #000 30%, transparent 82%);
	}
}

@media (max-width: 560px) {
	.opt-hero-media {
		opacity: 0.3;
	}
}

/* Gutenberg gives every block position: relative with greater specificity,
   which pulls the absolute hero media into normal flow. Restore the frontend
   containing block on desktop, then keep the intended mobile stack explicit. */
@media (min-width: 901px) {
	.editor-styles-wrapper .opt-hero .opt-shell {
		position: static;
	}

	.editor-styles-wrapper .opt-hero-media {
		position: absolute;
	}
}

@media (max-width: 900px) {
	.editor-styles-wrapper .opt-hero .opt-shell {
		position: static;
	}

	.editor-styles-wrapper .opt-hero-media {
		position: absolute;
	}
}

/* ---------- Why-choose-us strip ---------- */

.opt-why-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	width: min(100%, 1320px);
	margin-inline: auto;
}

.wp-block-group.alignfull:has(> .opt-why-grid) {
	padding-inline: 0;
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.opt-why-grid > * {
	margin-block-start: 0 !important;
	border-inline-start: 1px solid #232323;
	padding: 28px 20px;
	text-align: center;
}

.opt-ring {
	width: 44px;
	height: 44px;
	box-sizing: content-box;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	margin-block-end: 14px;
}

.opt-why-grid .wp-block-heading {
	font-size: 13px !important;
	line-height: normal;
}

.opt-why-grid p {
	font-size: 12.5px !important;
	line-height: 1.5;
}

.opt-ring::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.opt-ring--square::before {
	border-radius: 2px;
}

/* Empty Groups are intentional decorative shapes. Gutenberg otherwise fills
   them with a four-option Group variation placeholder that covers the copy. */
.editor-styles-wrapper .opt-ring > .components-placeholder,
.editor-styles-wrapper .opt-bar > .components-placeholder {
	display: none;
}

@media (max-width: 900px) {
	.opt-why-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.opt-why-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Cards (products, industries, testimonials) ---------- */

.opt-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-block-start: 3px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	padding: 24px 22px;
}

/* The approved product cards use compact, content-specific type rather than
   the global body leading. Keep the individual core blocks editable while
   reproducing the source card's image / copy / anchored-CTA stack. */
.opt-section--first {
	padding-block-end: 80px;
}

.opt-section--first h2 {
	font-size: clamp(28px, 3.2vw, 40px) !important;
	line-height: normal;
}

.opt-section--first > .wp-block-group:first-child > .opt-cta-link a {
	font-size: 13.5px;
	font-weight: 600;
}

.opt-section--first > .wp-block-group:first-child > .opt-cta-link {
	line-height: normal;
}

.opt-section--first .opt-card {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.opt-section--first .opt-card > * {
	margin-block-start: 0 !important;
}

.opt-section--first .opt-card-img,
.opt-section--first .opt-card-img img {
	display: block;
	line-height: 0;
}

.opt-section--first .opt-card-img {
	margin-block-end: 16px;
}

.opt-section--first .opt-card h3 {
	font-size: 17px !important;
	font-weight: 600;
	line-height: normal;
	margin-block-end: 8px;
}

.opt-section--first .opt-card > p:not(.opt-cta-link) {
	font-size: 13.5px !important;
	line-height: 1.55;
}

.opt-section--first .opt-card > .opt-cta-link {
	line-height: normal;
	margin-block-start: auto !important;
	padding-block-start: 22px;
}

.opt-card--plain {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding: 26px 22px;
}

.opt-section:has(.opt-card--plain) > .wp-block-group:first-child > p {
	max-width: 560px;
	font-size: 15px;
	line-height: 1.7;
}

.opt-card--plain h3 {
	font-size: 15.5px !important;
	font-weight: 600;
	line-height: normal;
}

.opt-card--plain > p {
	font-size: 13.5px !important;
	line-height: 1.6;
}

.opt-quote-card {
	padding: 28px;
}

.opt-card-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 2px;
}

.opt-attrib {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}

.opt-bar {
	width: 36px;
	height: 5px;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
	margin-block-end: 16px;
}

/* Industries has exactly four cards. Core's auto-grid can create an empty
   fifth track on wide screens, so keep the intended 4 / 2 / 1 layout fixed. */
.opt-section > .wp-block-group:has(> .opt-card--plain) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.opt-section > .wp-block-group:has(> .opt-card--plain) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.opt-section > .wp-block-group:has(> .opt-card--plain) {
		grid-template-columns: 1fr;
	}
}

/* ---------- Small accent CTA links ("View Specs →") ---------- */

.opt-cta-link a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* ---------- Trust stats ---------- */

.opt-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: var(--wp--preset--color--border);
	border-radius: 2px;
	overflow: hidden;
}

.opt-section:has(> .opt-trust-grid) {
	padding-block-end: 44px;
}

.opt-section:has(> .opt-trust-grid) > * {
	margin-block-start: 0 !important;
}

.opt-section:has(> .opt-trust-grid) > :first-child {
	margin-block-end: 40px;
}

.opt-section:has(> .opt-trust-grid) h2 {
	font-size: clamp(26px, 3vw, 36px) !important;
	line-height: normal;
}

.opt-section:has(> .opt-trust-grid) > .opt-trust-grid {
	margin-block-end: 26px;
}

.opt-trust-grid > * {
	margin-block-start: 0 !important;
	background: var(--wp--preset--color--card);
	padding: 30px 22px;
	text-align: center;
}

.opt-stat-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.opt-stat-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}

.opt-stat-num,
.opt-stat-label {
	line-height: normal;
}

@media (max-width: 900px) {
	.opt-trust-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.opt-trust-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Placeholder warning note (kept from source) ---------- */

.opt-note {
	background: var(--wp--preset--color--card);
	border: 1px dashed #4a3d1f;
	border-radius: 2px;
	padding: 14px 18px;
	font-size: 0.78rem;
	color: #d1a852;
	line-height: normal;
}

/* ---------- Split panels (capability / materials feature) ---------- */

.opt-panel {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: stretch;
}

.opt-panel-pad {
	padding: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	gap: 16px;
}

.opt-panel-pad > * {
	margin-block-start: 0 !important;
}

.opt-panel-pad h3 {
	font-size: 22px !important;
	line-height: normal;
}

.opt-panel-pad p {
	font-size: 15px;
	line-height: 1.75;
}

.opt-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}

@media (max-width: 900px) {
	.opt-panel,
	.opt-split {
		grid-template-columns: 1fr;
	}

	.opt-split > .wp-block-image {
		order: -1;
	}
}

.opt-fill-img,
.opt-fill-img img {
	height: 100%;
}

.opt-fill-img img {
	width: 100%;
	object-fit: cover;
	min-height: 280px;
	display: block;
}

.opt-ratio-45 img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 2px;
}

.opt-ratio-217 img {
	width: 100%;
	aspect-ratio: 21 / 7;
	object-fit: cover;
}

.opt-ratio-43 img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.opt-underline-heading {
	color: var(--wp--preset--color--accent);
	padding-block-end: 8px;
	border-block-end: 2px solid var(--wp--preset--color--border);
}

.opt-split > .wp-block-group > .wp-block-group:first-child > p {
	max-width: 420px;
	font-size: 15px;
	line-height: 1.7;
}

.opt-split > .wp-block-group > .wp-block-group:last-child {
	column-gap: 24px;
	row-gap: 26px;
}

.opt-underline-heading {
	font-size: 14px !important;
	font-weight: 600;
	line-height: normal;
}

.opt-underline-heading + p {
	font-size: 13px !important;
	line-height: 1.6;
}

/* ---------- Client logo tiles ---------- */

.opt-logo-tile {
	aspect-ratio: 2.2 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
}

.opt-logo-tile p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6862;
}

/* Keep the six client tiles in six real tracks instead of allowing core's
   minimum-width auto-grid to add unused tracks on wide screens. */
.opt-section > .wp-block-group:has(> .opt-logo-tile) {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.opt-section:has(> .wp-block-group > .opt-logo-tile) > .opt-note {
	margin-block-start: 16px !important;
}

/* ---------- Process steps ---------- */

.opt-step {
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	padding-inline-start: 18px;
}

.opt-step-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.125rem;
	font-weight: 700;
	line-height: normal;
	color: var(--wp--preset--color--border);
}

.opt-step > * {
	margin-block-start: 0 !important;
}

.opt-step-num {
	margin-block-end: 10px;
}

.opt-step h3 {
	font-size: 15px !important;
	font-weight: 600;
	line-height: normal;
	margin-block-end: 8px;
}

.opt-step > p:not(.opt-step-num) {
	font-size: 13.5px !important;
	line-height: 1.6;
}

/* These sections have known item counts. Fixed responsive tracks keep the
   editor canvas and frontend layout identical at the same breakpoint. */
.opt-section > .wp-block-group:has(> .opt-step) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.opt-section > .wp-block-group:has(> .opt-quote-card) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opt-section:has(.opt-quote-card) > h2 {
	margin-block-end: 36px;
}

.opt-quote-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.opt-quote-card > * {
	margin-block-start: 0 !important;
}

.opt-quote-card > p:first-child {
	font-size: 15.5px !important;
	line-height: 1.6;
}

.opt-quote-card .opt-attrib {
	line-height: normal;
}

@media (max-width: 900px) {
	.opt-section > .wp-block-group:has(> .opt-logo-tile) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.opt-section > .wp-block-group:has(> .opt-step),
	.opt-section > .wp-block-group:has(> .opt-quote-card) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.opt-section > .wp-block-group:has(> .opt-logo-tile) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.opt-section > .wp-block-group:has(> .opt-step),
	.opt-section > .wp-block-group:has(> .opt-quote-card) {
		grid-template-columns: 1fr;
	}
}

/* ---------- CTA panel ---------- */

.opt-cta-panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 60px 44px;
	text-align: center;
}

.opt-section:has(> .opt-cta-panel) {
	padding-block-end: 100px;
}

.opt-cta-panel > * {
	margin-block-start: 0 !important;
}

.opt-cta-panel h2 {
	font-size: clamp(26px, 3.2vw, 38px) !important;
	line-height: normal;
	margin-block-end: 14px;
}

.opt-cta-panel > p {
	max-width: 480px;
	font-size: 15px;
	line-height: normal;
	margin-inline: auto;
	margin-block-end: 30px;
}

.opt-cta-panel .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	padding: 16px 34px;
	font-size: 14px;
	line-height: normal;
}

.opt-cta-panel .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 14.5px 32px;
	font-size: 14px;
	line-height: normal;
}

/* ---------- Feature lists (▸ bullets) ---------- */

.opt-features {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.opt-features li {
	padding: 0 0 0 1.25rem;
	font-size: 14.5px;
	line-height: normal;
	position: relative;
}

.opt-features li::before {
	content: "▸";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* ---------- Materials page rows ---------- */

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content .opt-mat-letter {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 34px !important;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

.opt-mat-row {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	padding-block: 22px;
	border-block-end: 1px solid #232323;
}

.opt-mat-row h3 {
	font-size: 17px !important;
	line-height: normal;
}

.opt-mat-row p:not(.opt-mat-letter) {
	font-size: 14.5px !important;
	line-height: 1.65;
}

.opt-prop {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	padding-inline-start: 18px;
}

.opt-prop h3 {
	font-size: 14.5px !important;
	line-height: normal;
}

.opt-prop p {
	font-size: 14px !important;
	line-height: 1.65;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) > * + * {
	margin-block-start: 44px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) > .wp-block-group:has(.opt-mat-row) > h2,
:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) > .wp-block-group:has(.opt-prop) > h2 {
	font-size: 24px !important;
	line-height: normal;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) > .wp-block-group:has(.opt-mat-row) > .wp-block-group {
	margin-block-start: 24px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) > .wp-block-group:has(.opt-prop) > .wp-block-group {
	margin-block-start: 20px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) > .wp-block-group:has(> .wp-block-table) > .wp-block-table {
	margin-block-start: 18px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) .wp-block-table th,
:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) .wp-block-table td {
	padding: 14px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-mat-row) > p {
	font-size: 14px !important;
	line-height: 1.7;
}

/* ---------- Sub-page layout: sidebar + content ---------- */

.opt-page-main {
	padding-block: 3.25rem 6.25rem;
}

.opt-page-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 36px;
	align-items: start;
}

@media (max-width: 900px) {
	.opt-page-grid {
		grid-template-columns: 1fr;
	}

	.opt-page-grid > .opt-sidebar,
	.opt-page-grid > aside {
		order: 2;
	}
}

.opt-box {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-block-start: 3px solid var(--wp--preset--color--accent);
	padding: 18px;
}

.opt-box .wp-block-heading {
	font-weight: 600;
	letter-spacing: 0.08em;
}

.opt-sidebar .opt-box .wp-block-heading {
	font-size: 14px !important;
	line-height: normal;
	margin-block: 11.62px;
}

.opt-sidebar-links a {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	color: var(--wp--preset--color--muted);
	padding-block: 11px;
	border-block-end: 1px solid var(--wp--preset--color--border);
	line-height: normal;
}

.opt-sidebar-links a:hover,
.opt-sidebar-links a[aria-current] {
	color: var(--wp--preset--color--accent);
}

.opt-sidebar > .opt-box:last-child > p:not(:last-child) {
	font-size: 1rem !important;
	line-height: normal;
	margin-block: 1rem;
}

.opt-sidebar > .opt-box:last-child > p:last-child {
	margin-block: 0;
	line-height: normal;
}

.opt-sidebar > .opt-box:last-child > p:last-child a {
	display: flex;
	padding-block: 11px;
	color: var(--wp--preset--color--accent);
	line-height: normal;
}

.opt-intro-grid {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 30px;
	align-items: center;
}

.opt-intro-grid img {
	display: block;
}

.opt-intro-grid > p {
	font-size: 15.5px !important;
	line-height: 1.75;
}

@media (max-width: 900px) {
	.opt-intro-grid {
		grid-template-columns: 1fr;
	}
}

.opt-page-grid .wp-block-post-content > .wp-block-group > h2 {
	font-size: 22px !important;
	line-height: normal;
}

.opt-page-grid .wp-block-post-content > .wp-block-group > .opt-features,
.opt-page-grid .wp-block-post-content > .wp-block-group > .wp-block-table {
	margin-block-start: 18px;
}

.opt-page-grid .wp-block-post-content > .wp-block-group.opt-faq > details:first-of-type {
	margin-block-start: 18px;
}

.opt-page-grid .wp-block-post-content .wp-block-table th {
	font-size: 13.5px;
}

.opt-page-grid .wp-block-post-content {
	min-width: 0;
}

/* Timing Belts keeps the approved content as nine minimal top-level blocks.
   Detect its reusable type grids so the page-specific rhythm works in both
   the frontend and Gutenberg without a page-ID selector. */
:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > * + * {
	margin-block-start: 48px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > .opt-intro-grid + .wp-block-group > h2 {
	font-size: 20px !important;
	line-height: normal;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > .opt-intro-grid + .wp-block-group > .wp-block-table {
	margin-block-start: 16px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > .wp-block-group:has(> .opt-features) > .opt-features {
	margin-block: 20px;
	gap: 8px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > .wp-block-group:has(> .opt-features) {
	display: flow-root;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content > .wp-block-group:has(> .opt-type-grid) {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	padding-inline-start: 22px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content > .wp-block-group:has(> .opt-type-grid) > h3 {
	font-size: 18px !important;
	line-height: normal;
}

/* Six-column range tables on phones: the approved source pushed the whole
   content track to the viewport edge, which stripped the page-shell inset
   from the intro image, copy, and features and still crushed the table
   (decision #45 supersedes that). Keep the normal inset on the content and
   instead let the table figure alone bleed full-width and scroll sideways at
   a comfortable natural width. */
@media (max-width: 560px) {
	.opt-page-grid .wp-block-post-content .wp-block-table:has(th:nth-child(6)) {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		overflow-x: auto;
	}

	.opt-page-grid .wp-block-post-content .wp-block-table:has(th:nth-child(6)) table {
		min-width: 600px;
	}
}

.opt-type-grid {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 26px;
	align-items: center;
	margin-block-start: 16px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .opt-type-grid > * {
	margin-block-start: 0;
}

:is(.opt-page-grid, .editor-styles-wrapper) .opt-type-grid {
	margin-block-start: 16px;
}

.opt-type-grid > p {
	font-size: 15px !important;
	line-height: 1.7;
}

.opt-type-grid img {
	display: block;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content > .wp-block-group:has(> .opt-type-grid) > .wp-block-table {
	margin-block-start: 18px;
}

@media (max-width: 900px) {
	.opt-type-grid {
		grid-template-columns: 1fr;
	}
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > p:not(.opt-cta-link) {
	font-size: 14.5px !important;
	line-height: 1.7;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > .opt-cta-link {
	width: fit-content;
	line-height: normal;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-type-grid) > .opt-cta-link > a {
	display: block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 17px 36px;
	font-size: 14.5px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* ---------- FAQ accordion (native core/details, plain-row treatment) ---------- */

.opt-faq details {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.opt-faq details:last-child {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.opt-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
}

.opt-faq summary::-webkit-details-marker {
	display: none;
}

.opt-faq summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
	font-size: 18px;
	font-weight: 700;
}

.opt-faq details[open] summary::after {
	content: "−";
}

.opt-faq details > p {
	margin: 0;
	padding-block-end: 18px;
	font-size: 14px !important;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
}

/* ---------- Forms (static enquiry forms; swap for a form plugin for real delivery) ---------- */

.opt-form input,
.opt-form textarea {
	background: var(--wp--preset--color--base);
	border: 1px solid #333;
	color: var(--wp--preset--color--contrast);
	padding: 11px;
	font-family: inherit;
	font-size: 0.875rem;
	width: 100%;
	box-sizing: border-box;
}

.opt-form textarea {
	resize: vertical;
}

.opt-form button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	padding: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.875rem;
	cursor: pointer;
	width: 100%;
}

.opt-form button:hover {
	filter: brightness(0.94);
}

.opt-form button[disabled] {
	cursor: default;
	filter: none;
}

.opt-form--stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.opt-sidebar .opt-form input,
.opt-sidebar .opt-form textarea {
	font-family: Arial, sans-serif;
	font-size: 13.3333px;
}

.opt-sidebar .opt-form button {
	font-family: Arial, sans-serif;
	font-size: 13.3333px;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
}

.opt-sidebar .opt-box > .opt-form {
	margin-block-start: 21.62px !important;
}

.opt-form--grid .opt-form-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.opt-form--grid input,
.opt-form--grid textarea {
	background: var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--border);
	padding: 15px 16px;
}

.opt-form--grid textarea {
	margin-block-start: 14px;
}

.opt-form--grid button {
	width: auto;
	margin-block-start: 18px;
	padding: 16px 36px;
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

@media (max-width: 900px) {
	.opt-form--grid .opt-form-fields {
		grid-template-columns: 1fr;
	}
}

/* ---------- Tables (every table on the site shares this style) ---------- */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.844rem;
	line-height: normal;
}

.wp-block-table th {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--accent);
	padding: 14px 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	text-align: center;
	border: 0;
	border-block-end: 2px solid var(--wp--preset--color--accent);
}

.wp-block-table td {
	text-align: center;
	padding: 12px 10px;
	color: var(--wp--preset--color--muted);
	border: 0;
	border-block-end: 1px solid #232323;
}

.wp-block-table th:first-child,
.wp-block-table td:first-child {
	text-align: start;
}

/* ---------- Dealer card (contact page) ---------- */

.opt-dealer-card {
	background: var(--wp--preset--color--card);
	border-block-start: 4px solid var(--wp--preset--color--accent);
	padding: 32px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-dealer-card) > * + * {
	margin-block-start: 44px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-dealer-card) > .wp-block-image img {
	display: block;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content .opt-dealer-card > h2 {
	font-size: 20px !important;
	line-height: normal;
}

.opt-dealer-card > p {
	font-size: 14.5px !important;
	line-height: 1.7;
}

.opt-dealer-card > h2 + p {
	margin-block-start: 20px;
}

.opt-dealer-card > p + p {
	margin-block-start: 8px;
}

.opt-dealer-card > p:last-child {
	margin-block-start: 18px;
	line-height: normal;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-dealer-card) > .wp-block-group:has(.opt-form--grid) > :is(.wp-block-html, .wpcf7, .opt-form--grid) {
	margin-block-start: 20px;
}

/* ---------- Footer ---------- */

.opt-footer {
	border-block-start: 3px solid var(--wp--preset--color--accent);
	padding: 4rem 6vw 2.5rem;
}

.opt-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-block-end: 50px;
}

.opt-footer .wp-block-heading {
	font-weight: 600;
	letter-spacing: 0.1em;
}

.opt-footer-tagline {
	max-width: 280px;
	line-height: 1.7;
}

.opt-footer-grid > .wp-block-group:first-child {
	padding-block-end: 13.5px;
}

.opt-footer-grid > .wp-block-group:not(:first-child) .wp-block-heading {
	line-height: 17px;
}

.opt-footer-grid > .wp-block-group:not(:first-child) p {
	font-size: 14px !important;
	line-height: 16px;
}

.opt-footer-grid > .wp-block-group:not(:first-child) .wp-block-heading + p {
	margin-block-start: 16px;
}

.opt-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--muted);
}

.opt-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent);
}

.opt-footer-social {
	font-size: 20px;
	gap: 12px;
	margin-block-start: 16px;
}

.opt-footer-social .wp-social-link {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--muted);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	box-sizing: border-box;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.opt-footer-social .wp-block-social-link-anchor {
	width: 100%;
	height: 100%;
	padding: 0;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--muted);
	transition: color 180ms ease;
}

.opt-footer-social .wp-block-social-link-anchor svg {
	width: 20px;
	height: 20px;
}

.opt-footer-social .wp-social-link:hover,
.opt-footer-social .wp-social-link:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 16px rgba(242, 180, 0, 0.35);
	transform: scale(1.08);
}

.wp-block-social-links.opt-footer-social .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor,
.wp-block-social-links.opt-footer-social .wp-block-social-link.wp-social-link:focus-within .wp-block-social-link-anchor {
	color: var(--wp--preset--color--accent);
}

.opt-footer-social .wp-block-social-link-anchor:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.opt-footer-social .wp-social-link,
	.opt-footer-social .wp-block-social-link-anchor {
		transition: none;
	}

	.opt-footer-social .wp-social-link:hover,
	.opt-footer-social .wp-social-link:focus-within {
		transform: none;
	}
}

.opt-footer-bottom {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block-start: 1.625rem;
	line-height: normal;
	min-height: 42px;
	box-sizing: border-box;
	gap: 10px;
}

.opt-footer-bottom p {
	color: #6b6860;
	font-size: 12.5px !important;
}

.opt-footer-bottom .wp-block-shortcode {
	color: #6b6860;
	font-size: 12.5px;
	margin: 0;
}

@media (max-width: 760px) {
	.opt-footer-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Client logo marquee (progressive enhancement) ---------- */

/*
 * The stored blocks and the editor keep the static 6/4/2 grid defined above.
 * On the frontend, logo-marquee.js moves the tiles into a runtime
 * .opt-marquee-track, appends aria-hidden clones for a seamless loop, and adds
 * .opt-marquee-on to the tile-row Group. Speed is an FSE control: the
 * Slow/Fast/Static block styles on the section Group set --opt-marquee-speed
 * (px per second); the script converts speed + measured loop distance into the
 * animation duration, so the visual pace stays constant for any tile count.
 * :where() keeps the default at class specificity so the preset classes win.
 */

.opt-section:where(:has(.opt-logo-tile)) {
	--opt-marquee-speed: 40;
}

.is-style-opt-marquee-slow {
	--opt-marquee-speed: 22;
}

.is-style-opt-marquee-fast {
	--opt-marquee-speed: 80;
}

.wp-block-group.opt-marquee-on {
	display: block;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.opt-marquee-track {
	display: flex;
	align-items: stretch;
	gap: 16px;
	width: max-content;
	animation: opt-marquee var(--opt-marquee-duration, 40s) linear infinite;
}

.opt-marquee-track > .opt-logo-tile {
	flex: 0 0 206px;
	margin-block-start: 0 !important;
}

.opt-marquee-on:hover .opt-marquee-track,
.opt-marquee-on:focus-within .opt-marquee-track {
	animation-play-state: paused;
}

@keyframes opt-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-1 * var(--opt-marquee-distance, 50%)));
	}
}

@media (max-width: 560px) {
	.opt-marquee-track > .opt-logo-tile {
		flex-basis: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.opt-marquee-track {
		animation: none;
	}
}

/* ---------- 404 template ---------- */

.opt-404 {
	padding-block: 96px 110px;
	text-align: center;
}

.opt-404 > * {
	margin-block-start: 0 !important;
}

.opt-404-code {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(96px, 14vw, 150px);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent);
	margin-block-end: 4px;
}

.opt-404 h1 {
	margin-block-end: 16px;
}

.opt-404-copy {
	max-width: 520px;
	margin-inline: auto;
	color: var(--wp--preset--color--muted);
	font-size: 15px !important;
	line-height: 1.7;
	margin-block-end: 30px;
}

/* ---------- Products index page ---------- */

/*
 * Same card composition as the Home product grid (the .opt-section--first
 * rules above), re-scoped for the Products overview page where six cards sit
 * under the page H1 in a 3/2/1 grid and use level-2 headings.
 */

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-products-grid) > * + * {
	margin-block-start: 30px;
}

:is(.opt-page-grid, .editor-styles-wrapper) .wp-block-post-content:has(.opt-products-grid) > p {
	max-width: 720px;
	font-size: 15.5px !important;
	line-height: 1.75;
}

.opt-products-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.opt-products-grid > .opt-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-block-start: 0 !important;
}

.opt-products-grid .opt-card > * {
	margin-block-start: 0 !important;
}

.opt-products-grid .opt-card-img,
.opt-products-grid .opt-card-img img {
	display: block;
	line-height: 0;
}

.opt-products-grid .opt-card-img {
	margin-block-end: 16px;
}

.opt-products-grid .opt-card h2 {
	font-size: 17px !important;
	font-weight: 600;
	line-height: normal;
	margin-block-end: 8px;
}

.opt-products-grid .opt-card > p:not(.opt-cta-link) {
	font-size: 13.5px !important;
	line-height: 1.55;
}

.opt-products-grid .opt-card > .opt-cta-link {
	line-height: normal;
	margin-block-start: auto !important;
	padding-block-start: 22px;
}

@media (max-width: 900px) {
	.opt-products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.opt-products-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Products archive (/products/): the same card composition rendered by a
 * Query Loop over belt_product posts, so the grid updates automatically when
 * a product is published. The grid class sits on the post-template <ul>; each
 * card group is wrapped in a <li class="wp-block-post"> grid item, and the
 * title/excerpt/read-more blocks carry their own wrappers.
 */

.opt-products-archive > * + * {
	margin-block-start: 30px;
}

.opt-products-archive > p {
	max-width: 720px;
	font-size: 15.5px !important;
	line-height: 1.75;
}

ul.opt-products-grid {
	list-style: none;
	padding: 0;
	margin: 0;
}

.opt-products-grid > .wp-block-post {
	display: flex;
	margin-block-start: 0 !important;
}

.opt-products-grid > .wp-block-post > .opt-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	margin-block-start: 0 !important;
}

.opt-products-grid .opt-card h2 a {
	color: inherit;
	text-decoration: none;
}

.opt-products-grid .opt-card .wp-block-post-excerpt__excerpt {
	font-size: 13.5px !important;
	line-height: 1.55;
	margin: 0;
}

.opt-products-grid .opt-card > a.opt-cta-link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* ---------- Contact Form 7 (real delivery, approved form visuals) ---------- */

.opt-form .wpcf7-form-control-wrap {
	display: block;
}

.opt-sidebar .opt-box > .wpcf7 {
	margin-block-start: 21.62px;
}

.opt-form .wpcf7-spinner {
	display: none;
}

.opt-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 4px;
	font-size: 12px;
	color: #e2574c;
}

/* Scoped above CF7's own .wpcf7 form … defaults without !important. */
.wpcf7 form.opt-form.init .wpcf7-response-output,
.wpcf7 form.opt-form.submitting .wpcf7-response-output,
.wpcf7 form.opt-form.resetting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.opt-form .wpcf7-response-output {
	display: block;
	margin: 14px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--accent);
	font-size: 13px;
	color: var(--wp--preset--color--contrast);
}

.wpcf7 form.opt-form.invalid .wpcf7-response-output,
.wpcf7 form.opt-form.failed .wpcf7-response-output {
	border-color: #e2574c;
}