/**
 * Ottawa Parging Group — main stylesheet.
 *
 * Mobile-first. Every colour, size and duration comes from tokens.css so the admin
 * colour pickers can retune the theme without touching this file. A raw hex here is
 * a bug — the only exceptions are the two-tone gradients that need a literal alpha.
 *
 * Order: reset -> base -> layout -> components -> sections -> utilities.
 *
 * @package OttawaPargingGroup
 * @author  Selman Selman @ Engineered Leads
 * @link    https://engineeredleads.ca
 */

/* =========================================================================
   1. Reset & base
   ========================================================================= */

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

/**
 * The hidden attribute must always win.
 *
 * The UA sheet sets [hidden] { display: none } at the lowest possible specificity, so
 * ANY component rule that sets `display` defeats it — a drawer, an alert, a success
 * panel or a button marked hidden in the markup renders anyway. This one declaration is
 * the difference between a working page and a broken one, so it is deliberately
 * !important and deliberately first.
 */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--opg-header-h) + var(--opg-space-md));
}

html,
body {
	/* clip beats hidden here: overflow-x:hidden on body silently kills position:sticky
	   for descendants, which is what the service-page sidebar depends on. */
	overflow-x: clip;
	max-width: 100%;
}

body {
	margin: 0;
	background: var(--opg-bg);
	color: var(--opg-body);
	font-family: var(--opg-font-body);
	font-size: var(--opg-fs-body);
	line-height: var(--opg-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Nothing may push the page sideways. Long words, wide tables and pasted embed codes
   are the usual culprits on mobile. */
p,
li,
h1,
h2,
h3,
h4,
dd,
dt {
	overflow-wrap: break-word;
}

body.opg-nav-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--opg-space-sm);
	color: var(--opg-ink);
	font-family: var(--opg-font-heading);
	font-weight: 700;
	line-height: var(--opg-lh-snug);
	letter-spacing: var(--opg-tracking-tight);
	text-wrap: balance;
}

h1 { font-size: var(--opg-fs-h1); line-height: var(--opg-lh-tight); }
h2 { font-size: var(--opg-fs-h2); }
h3 { font-size: var(--opg-fs-h3); }
h4 { font-size: var(--opg-fs-h4); }

p {
	margin: 0 0 var(--opg-space-sm);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--opg-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--opg-dur-fast) var(--opg-ease);
}

a:hover {
	color: var(--opg-primary-dark);
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

ul,
ol {
	margin: 0 0 var(--opg-space-sm);
	padding-left: 1.25em;
}

li + li {
	margin-top: var(--opg-space-3xs);
}

hr {
	height: 1px;
	margin: var(--opg-space-lg) 0;
	border: 0;
	background: var(--opg-line);
}

blockquote {
	margin: var(--opg-space-md) 0;
	padding-left: var(--opg-space-md);
	border-left: 3px solid var(--opg-primary);
	color: var(--opg-ink);
	font-size: var(--opg-fs-lead);
	font-style: italic;
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

table {
	width: 100%;
	margin-bottom: var(--opg-space-md);
	border-collapse: collapse;
}

th,
td {
	padding: var(--opg-space-2xs) var(--opg-space-xs);
	border-bottom: 1px solid var(--opg-line);
	text-align: left;
}

th {
	color: var(--opg-ink);
	font-weight: 600;
}

/* --- focus: never remove an outline without a replacement --------------- */

:focus-visible {
	outline: 3px solid var(--opg-primary);
	outline-offset: 2px;
	border-radius: var(--opg-radius-xs);
}

.opg-on-dark :focus-visible,
.opg-footer :focus-visible,
.opg-header :focus-visible {
	outline-color: var(--opg-bg);
}

@media (forced-colors: active) {
	:focus-visible {
		outline-color: Highlight;
	}
}

/* --- accessibility helpers ---------------------------------------------- */

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

.opg-skip-link {
	position: absolute;
	top: -100px;
	left: var(--opg-space-sm);
	z-index: 999;
	padding: var(--opg-space-xs) var(--opg-space-md);
	background: var(--opg-primary);
	color: var(--opg-on-primary);
	border-radius: 0 0 var(--opg-radius) var(--opg-radius);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--opg-dur) var(--opg-ease);
}

.opg-skip-link:focus {
	top: 0;
	color: var(--opg-on-primary);
}

/* =========================================================================
   2. Layout primitives
   ========================================================================= */

.opg-container {
	width: 100%;
	max-width: var(--opg-max);
	margin-inline: auto;
	padding-inline: var(--opg-gutter);
}

.opg-container--wide {
	max-width: var(--opg-max-wide);
}

.opg-container--narrow {
	max-width: 820px;
}

.opg-section {
	padding-block: var(--opg-section);
}

.opg-section--tight {
	padding-block: calc(var(--opg-section) * 0.6);
}

.opg-section--surface {
	background: var(--opg-surface);
}

.opg-section--dark {
	background: var(--opg-ink);
	color: rgb(255 255 255 / 0.78);
}

.opg-section--dark h1,
.opg-section--dark h2,
.opg-section--dark h3,
.opg-section--dark h4 {
	color: var(--opg-bg);
}

.opg-grid {
	display: grid;
	gap: var(--opg-space-md);
}

@media (min-width: 640px) {
	.opg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (min-width: 1080px) {
	.opg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- section heading block ---------------------------------------------- */

.opg-section-head {
	max-width: 760px;
	margin-bottom: var(--opg-space-xl);
}

.opg-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.opg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--opg-space-2xs);
	margin-bottom: var(--opg-space-xs);
	color: var(--opg-primary);
	font-family: var(--opg-font-body);
	font-size: var(--opg-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--opg-tracking-wide);
	text-transform: uppercase;
}

.opg-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--opg-primary);
}

.opg-section-head--center .opg-eyebrow::before {
	display: none;
}

.opg-section--dark .opg-eyebrow {
	color: var(--opg-bg);
	opacity: 0.75;
}

.opg-section--dark .opg-eyebrow::before {
	background: var(--opg-primary);
	opacity: 1;
}

.opg-lead {
	color: var(--opg-muted);
	font-size: var(--opg-fs-lead);
}

.opg-section--dark .opg-lead {
	color: rgb(255 255 255 / 0.72);
}

/* =========================================================================
   3. Buttons
   ========================================================================= */

.opg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--opg-space-2xs);
	min-height: 52px;
	padding: 0.875rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--opg-radius);
	background: var(--opg-primary);
	color: var(--opg-on-primary);
	font-family: var(--opg-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--opg-dur-fast) var(--opg-ease),
		border-color var(--opg-dur-fast) var(--opg-ease),
		color var(--opg-dur-fast) var(--opg-ease),
		transform var(--opg-dur-fast) var(--opg-ease),
		box-shadow var(--opg-dur) var(--opg-ease);
}

.opg-btn:hover {
	background: var(--opg-primary-dark);
	color: var(--opg-on-primary);
	transform: translateY(-1px);
	box-shadow: var(--opg-shadow-sm);
}

.opg-btn:active {
	background: var(--opg-primary-darker);
	transform: translateY(0);
}

.opg-btn[disabled],
.opg-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.opg-btn--lg {
	min-height: 58px;
	padding: 1rem 2.25rem;
	font-size: 1.0625rem;
}

.opg-btn--sm {
	min-height: 42px;
	padding: 0.5rem 1.125rem;
	font-size: 0.9375rem;
}

.opg-btn--block {
	width: 100%;
}

.opg-btn--ghost {
	background: transparent;
	border-color: var(--opg-line-strong);
	color: var(--opg-ink);
}

.opg-btn--ghost:hover {
	background: var(--opg-primary-soft);
	border-color: var(--opg-primary);
	color: var(--opg-primary-dark);
}

.opg-btn--dark {
	background: var(--opg-ink);
	color: var(--opg-bg);
}

.opg-btn--dark:hover {
	background: var(--opg-ink-700);
	color: var(--opg-bg);
}

.opg-btn--onDark,
.opg-on-dark .opg-btn--ghost {
	background: transparent;
	border-color: rgb(255 255 255 / 0.4);
	color: var(--opg-bg);
}

.opg-btn--onDark:hover,
.opg-on-dark .opg-btn--ghost:hover {
	background: var(--opg-bg);
	border-color: var(--opg-bg);
	color: var(--opg-ink);
}

.opg-btn--whatsapp {
	background: #128c7e;
	color: #fff;
}

.opg-btn--whatsapp:hover {
	background: #0d6f63;
	color: #fff;
}

.opg-btn__icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

.opg-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opg-space-xs);
}

.opg-btn-row--center {
	justify-content: center;
}

/* --- text link with arrow ----------------------------------------------- */

.opg-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	text-decoration: none;
}

.opg-link-arrow::after {
	content: "";
	width: 1em;
	height: 1em;
	background: currentColor;
	transition: transform var(--opg-dur) var(--opg-ease);
	-webkit-mask: var(--opg-arrow) center / contain no-repeat;
	mask: var(--opg-arrow) center / contain no-repeat;
	--opg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5.2 20 12l-6.8 6.8-1.4-1.4 4.4-4.4H4v-2h12.2l-4.4-4.4z'/%3E%3C/svg%3E");
}

.opg-link-arrow:hover::after {
	transform: translateX(3px);
}

/* =========================================================================
   4. Header
   ========================================================================= */

.opg-announcement {
	position: relative;
	background: var(--opg-primary);
	color: var(--opg-on-primary);
	font-size: var(--opg-fs-small);
	text-align: center;
}

.opg-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--opg-space-xs);
	min-height: 40px;
	padding: var(--opg-space-2xs) 2.75rem;
}

.opg-announcement a {
	color: inherit;
	font-weight: 600;
}

.opg-announcement__close {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.8;
}

.opg-announcement__close:hover {
	opacity: 1;
}

.opg-topbar {
	display: none;
	background: var(--opg-ink);
	color: rgb(255 255 255 / 0.72);
	font-size: var(--opg-fs-small);
}

@media (min-width: 1024px) {
	.opg-topbar { display: block; }
}

.opg-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--opg-space-md);
	min-height: 42px;
}

.opg-topbar__group {
	display: flex;
	align-items: center;
	gap: var(--opg-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.opg-topbar__group li {
	margin: 0;
}

.opg-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: inherit;
	text-decoration: none;
}

.opg-topbar__item:hover {
	color: var(--opg-bg);
}

.opg-topbar__item svg {
	width: 15px;
	height: 15px;
	fill: var(--opg-primary);
}

.opg-social {
	display: flex;
	gap: var(--opg-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.opg-social li {
	margin: 0;
}

.opg-social a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--opg-radius-sm);
	color: inherit;
	transition: background-color var(--opg-dur-fast) var(--opg-ease);
}

.opg-social a:hover {
	background: rgb(255 255 255 / 0.12);
	color: var(--opg-bg);
}

.opg-social svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* --- main header bar ---------------------------------------------------- */

.opg-header {
	position: sticky;
	top: 0;
	z-index: var(--opg-z-header);
	background: var(--opg-bg);
	border-bottom: 1px solid var(--opg-line);
	transition: box-shadow var(--opg-dur) var(--opg-ease);
}

.opg-header.is-stuck {
	box-shadow: var(--opg-shadow-sm);
}

.opg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--opg-space-md);
	min-height: var(--opg-header-h);
}

.opg-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--opg-space-2xs);
	flex: none;
	text-decoration: none;
}

.opg-brand img {
	width: auto;
	/* The lockup is stacked -- trowel over the name -- so it needs vertical room.
	   At the old 52px cap the lines of type under the trowel were a smudge. */
	max-height: var(--opg-logo-h, 120px);
}

.opg-brand__text {
	display: flex;
	flex-direction: column;
	font-family: var(--opg-font-heading);
	line-height: 1.05;
}

.opg-brand__name {
	color: var(--opg-ink);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: var(--opg-tracking-tight);
	text-transform: uppercase;
}

.opg-brand__tag {
	color: var(--opg-primary);
	font-family: var(--opg-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--opg-tracking-wide);
	text-transform: uppercase;
}

.opg-header__actions {
	display: flex;
	align-items: center;
	gap: var(--opg-space-xs);
	flex: none;
}

.opg-header__call {
	display: none;
	align-items: center;
	gap: var(--opg-space-2xs);
	color: var(--opg-ink);
	text-decoration: none;
}

@media (min-width: 720px) {
	.opg-header__call { display: inline-flex; }
}

.opg-header__call-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--opg-radius-pill);
	background: var(--opg-primary-soft);
	color: var(--opg-primary);
	transition: background-color var(--opg-dur-fast) var(--opg-ease);
}

.opg-header__call:hover .opg-header__call-icon {
	background: var(--opg-primary);
	color: var(--opg-on-primary);
}

.opg-header__call-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.opg-header__call-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.opg-header__call-label {
	color: var(--opg-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Between the nav appearing and the row being genuinely wide, the eyebrow is the
 * cheapest thing to lose: the number underneath it is what people act on, and it stays.
 * Dropping it here is what keeps the Free Quote button on screen rather than shoved
 * past the right edge on a laptop with a long menu.
 */
@media (max-width: 1599px) {
	.opg-header__call-label {
		display: none;
	}

	.opg-header__call-number {
		font-size: 1.125rem;
	}
}

.opg-header__call-number {
	font-family: var(--opg-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	white-space: nowrap;
}

.opg-header__cta {
	display: none;
	/* "Free Quote" wrapping to two lines turned the button into a red square. It is a
	   two-word label; it never needs to break. */
	flex: none;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.opg-header__cta { display: inline-flex; }
}

/* The logo, the phone block and the button all want the same row. Give the first two
   permission to shrink so the button never gets squeezed into a square again. */
.opg-header__actions {
	flex: none;
}

.opg-brand {
	min-width: 0;
}

.opg-brand img {
	max-width: 100%;
}

/* --- desktop navigation -------------------------------------------------- */

.opg-nav {
	display: none;
}

/*
 * 1200, not 1024. Eight menu items beside the logo need about 1150px before the last
 * one starts falling off the right edge -- which it did, silently, on any laptop between
 * 1024 and 1150. Below this the hamburger takes over, which is the honest answer for a
 * menu the operator can add items to.
 *
 * A width breakpoint can only ever be a guess, though, because the menu is theirs to
 * change: five items fit at 1200 and nine do not. So the header also measures itself
 * (assets/js/nav.js) and adds .opg-header--compact when the row genuinely does not fit,
 * whatever the width. This rule is the no-JavaScript baseline.
 */
@media (min-width: 1200px) {
	.opg-nav { display: block; }
}

.opg-header--compact .opg-nav {
	display: none;
}

.opg-header--compact .opg-nav-toggle {
	display: grid;
}

.opg-nav__list {
	display: flex;
	align-items: center;
	gap: var(--opg-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.opg-nav__list li {
	position: relative;
	margin: 0;
}

.opg-nav__list a {
	display: block;
	padding: 0.625rem 0.75rem;
	border-radius: var(--opg-radius-sm);
	color: var(--opg-ink);
	font-weight: 600;
	font-size: 0.9688rem;
	text-decoration: none;
	white-space: nowrap;
}

/* And in the band where it only just fits, let it tighten rather than overflow. */
@media (min-width: 1200px) and (max-width: 1599px) {
	.opg-nav__list {
		gap: 0;
	}

	.opg-nav__list a {
		padding-inline: 0.5rem;
		font-size: 0.9375rem;
	}
}

.opg-nav__list a:hover,
.opg-nav__list .current-menu-item > a,
.opg-nav__list .current-menu-parent > a,
.opg-nav__list .current-menu-ancestor > a {
	background: var(--opg-primary-soft);
	color: var(--opg-primary-dark);
}

.opg-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-left: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.opg-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: var(--opg-z-header);
	min-width: 250px;
	margin: 0;
	padding: var(--opg-space-2xs);
	border: 1px solid var(--opg-line);
	border-top: 3px solid var(--opg-primary);
	border-radius: var(--opg-radius);
	background: var(--opg-bg);
	box-shadow: var(--opg-shadow);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--opg-dur) var(--opg-ease),
		transform var(--opg-dur) var(--opg-ease),
		visibility var(--opg-dur);
}

.opg-nav__list li:hover > .sub-menu,
.opg-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.opg-nav__list .sub-menu a {
	padding: 0.6rem 0.75rem;
	font-weight: 500;
	white-space: normal;
}

/* --- mobile toggle & drawer ---------------------------------------------- */

.opg-nav-toggle {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--opg-line-strong);
	border-radius: var(--opg-radius);
	background: var(--opg-bg);
	color: var(--opg-ink);
	cursor: pointer;
}

@media (min-width: 1200px) {
	.opg-nav-toggle { display: none; }
}

.opg-nav-toggle__bars,
.opg-nav-toggle__bars::before,
.opg-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--opg-dur) var(--opg-ease), opacity var(--opg-dur-fast) var(--opg-ease);
}

.opg-nav-toggle__bars::before,
.opg-nav-toggle__bars::after {
	content: "";
	position: absolute;
}

.opg-nav-toggle__bars::before { transform: translateY(-6px); }
.opg-nav-toggle__bars::after  { transform: translateY(6px); }

.opg-nav-toggle[aria-expanded="true"] .opg-nav-toggle__bars { background: transparent; }
.opg-nav-toggle[aria-expanded="true"] .opg-nav-toggle__bars::before { transform: rotate(45deg); }
.opg-nav-toggle[aria-expanded="true"] .opg-nav-toggle__bars::after  { transform: rotate(-45deg); }

.opg-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--opg-z-drawer);
	display: grid;
	grid-template-columns: 1fr min(88vw, 380px);
	visibility: hidden;
}

.opg-drawer.is-open {
	visibility: visible;
}

.opg-drawer__scrim {
	background: rgb(13 13 13 / 0.55);
	opacity: 0;
	transition: opacity var(--opg-dur) var(--opg-ease);
	border: 0;
	cursor: pointer;
}

.opg-drawer.is-open .opg-drawer__scrim {
	opacity: 1;
}

.opg-drawer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--opg-space-md);
	padding: var(--opg-space-md) var(--opg-space-md) var(--opg-space-xl);
	background: var(--opg-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--opg-dur-slow) var(--opg-ease);
	box-shadow: var(--opg-shadow-lg);
}

.opg-drawer.is-open .opg-drawer__panel {
	transform: translateX(0);
}

.opg-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--opg-space-sm);
	padding-bottom: var(--opg-space-sm);
	border-bottom: 1px solid var(--opg-line);
}

.opg-drawer__close {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--opg-line-strong);
	border-radius: var(--opg-radius);
	background: transparent;
	color: var(--opg-ink);
	cursor: pointer;
}

.opg-drawer__close svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

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

.opg-drawer__nav > ul > li + li {
	border-top: 1px solid var(--opg-line);
}

.opg-drawer__nav li {
	margin: 0;
}

.opg-drawer__nav a {
	display: block;
	padding: 0.9rem 0;
	color: var(--opg-ink);
	font-family: var(--opg-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	text-decoration: none;
}

.opg-drawer__nav a:hover,
.opg-drawer__nav .current-menu-item > a {
	color: var(--opg-primary);
}

.opg-drawer__nav .sub-menu {
	padding-bottom: var(--opg-space-2xs);
	padding-left: var(--opg-space-sm);
	border-left: 2px solid var(--opg-line);
}

.opg-drawer__nav .sub-menu a {
	padding: 0.45rem 0;
	font-family: var(--opg-font-body);
	font-size: 1rem;
	font-weight: 500;
}

.opg-drawer__foot {
	display: grid;
	gap: var(--opg-space-2xs);
	margin-top: auto;
	padding-top: var(--opg-space-md);
	border-top: 1px solid var(--opg-line);
}

.opg-drawer__meta {
	color: var(--opg-muted);
	font-size: var(--opg-fs-small);
}

/* =========================================================================
   5. Hero
   ========================================================================= */

.opg-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(520px, 74vh, 760px);
	padding-block: var(--opg-space-2xl);
	background: var(--opg-ink);
	color: rgb(255 255 255 / 0.82);
	isolation: isolate;
	overflow: hidden;
}

.opg-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.opg-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.opg-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgb(13 13 13 / 0.92) 0%, rgb(13 13 13 / 0.74) 45%, rgb(13 13 13 / 0.42) 100%),
		linear-gradient(to top, rgb(13 13 13 / 0.6), transparent 45%);
}

.opg-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
}

.opg-hero__title {
	margin-bottom: var(--opg-space-sm);
	color: var(--opg-bg);
	text-transform: uppercase;
}

.opg-hero__title .opg-hero__accent {
	color: var(--opg-primary);
}

.opg-hero__sub {
	max-width: 52ch;
	margin-bottom: var(--opg-space-lg);
	color: rgb(255 255 255 / 0.82);
	font-size: var(--opg-fs-lead);
}

.opg-hero__actions {
	margin-bottom: var(--opg-space-lg);
}

.opg-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opg-space-xs) var(--opg-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--opg-fs-small);
	font-weight: 500;
}

.opg-hero__points li {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
}

.opg-hero__points svg {
	flex: none;
	width: 17px;
	height: 17px;
	fill: var(--opg-primary);
}

/* --- trust badge strip under the hero ------------------------------------ */

.opg-trustbar {
	border-bottom: 1px solid var(--opg-line);
	background: var(--opg-bg);
}

.opg-trustbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--opg-space-md) var(--opg-space-xl);
	padding-block: var(--opg-space-md);
}

.opg-trustbar__label {
	width: 100%;
	color: var(--opg-muted);
	font-size: var(--opg-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--opg-tracking-wide);
	text-align: center;
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.opg-trustbar__label {
		width: auto;
		padding-right: var(--opg-space-md);
		border-right: 1px solid var(--opg-line);
		text-align: left;
	}
}

.opg-trustbar img {
	width: auto;
	max-height: 46px;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter var(--opg-dur) var(--opg-ease), opacity var(--opg-dur) var(--opg-ease);
}

.opg-trustbar a:hover img,
.opg-trustbar img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* =========================================================================
   6. Service cards
   ========================================================================= */

.opg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-lg);
	background: var(--opg-bg);
	transition:
		transform var(--opg-dur) var(--opg-ease),
		box-shadow var(--opg-dur) var(--opg-ease),
		border-color var(--opg-dur) var(--opg-ease);
}

.opg-card:hover {
	transform: translateY(-4px);
	border-color: var(--opg-primary-soft);
	box-shadow: var(--opg-shadow);
}

.opg-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--opg-surface-2);
}

.opg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--opg-dur-slow) var(--opg-ease);
}

.opg-card:hover .opg-card__media img {
	transform: scale(1.05);
}

.opg-card__flag {
	position: absolute;
	top: var(--opg-space-xs);
	left: var(--opg-space-xs);
	padding: 0.3rem 0.7rem;
	border-radius: var(--opg-radius-pill);
	background: var(--opg-primary);
	color: var(--opg-on-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.opg-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--opg-space-2xs);
	padding: var(--opg-space-md);
}

.opg-card__title {
	margin: 0;
	font-size: var(--opg-fs-h4);
	text-transform: uppercase;
}

.opg-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Card-wide click target without nesting interactive elements. */
.opg-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.opg-card__excerpt {
	flex: 1;
	color: var(--opg-muted);
	font-size: var(--opg-fs-small);
	margin: 0;
}

.opg-card__more {
	margin-top: var(--opg-space-2xs);
	color: var(--opg-primary);
	font-size: var(--opg-fs-small);
}

.opg-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--opg-space-2xs);
	border-radius: var(--opg-radius);
	background: var(--opg-primary-soft);
	color: var(--opg-primary);
}

.opg-card__icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* =========================================================================
   7. Why choose us / feature list
   ========================================================================= */

.opg-feature {
	display: flex;
	gap: var(--opg-space-sm);
}

.opg-feature__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--opg-radius);
	background: var(--opg-primary-soft);
	color: var(--opg-primary);
}

.opg-feature__icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.opg-feature__title {
	margin-bottom: var(--opg-space-3xs);
	font-size: 1.1875rem;
}

.opg-feature__text {
	margin: 0;
	color: var(--opg-muted);
	font-size: var(--opg-fs-small);
}

.opg-section--dark .opg-feature__icon {
	background: rgb(255 255 255 / 0.08);
	color: var(--opg-bg);
}

.opg-section--dark .opg-feature__text {
	color: rgb(255 255 255 / 0.7);
}

/* --- split media + copy -------------------------------------------------- */

.opg-split {
	display: grid;
	gap: var(--opg-space-xl);
	align-items: center;
}

/*
 * A form is always taller than the copy beside it, so centring the pair pushes the copy
 * halfway down the page and leaves a band of empty white above it. Any split with a form
 * in it top-aligns instead.
 */
.opg-split--top {
	align-items: start;
}

/*
 * On a phone the columns stack, and whichever comes first in the markup wins the screen.
 * On the estimate page that has to be the form: someone who tapped "Free Quote" wants the
 * first field, not two paragraphs of reassurance. Ordering is done in CSS rather than in
 * the markup so the desktop layout keeps the copy on the left where it reads properly.
 */
@media (max-width: 899px) {
	.opg-split--form-first > :last-child,
	.opg-split--media-first > :last-child {
		order: -1;
	}
}

@media (min-width: 900px) {
	.opg-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(2rem, 5vw, 4.5rem);
	}

	.opg-split--reverse .opg-split__media {
		order: 2;
	}
}

.opg-split__media {
	position: relative;
	border-radius: var(--opg-radius-lg);
	overflow: hidden;
	box-shadow: var(--opg-shadow);
}

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

.opg-split__badge {
	position: absolute;
	right: var(--opg-space-md);
	bottom: var(--opg-space-md);
	padding: var(--opg-space-xs) var(--opg-space-sm);
	border-radius: var(--opg-radius);
	background: var(--opg-primary);
	color: var(--opg-on-primary);
	box-shadow: var(--opg-shadow);
	text-align: center;
}

.opg-split__badge strong {
	display: block;
	font-family: var(--opg-font-heading);
	font-size: 2rem;
	line-height: 1;
}

.opg-split__badge span {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.opg-checklist {
	margin: var(--opg-space-md) 0;
	padding: 0;
	list-style: none;
}

.opg-checklist li {
	position: relative;
	margin: 0 0 var(--opg-space-2xs);
	padding-left: 1.9rem;
}

.opg-checklist li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: var(--opg-radius-pill);
	background: var(--opg-primary-soft);
}

.opg-checklist li::after {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0.32rem;
	width: 0.5rem;
	height: 0.28rem;
	border-left: 2px solid var(--opg-primary);
	border-bottom: 2px solid var(--opg-primary);
	transform: rotate(-45deg);
}

/* =========================================================================
   8. Stats
   ========================================================================= */

.opg-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--opg-line);
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-lg);
	overflow: hidden;
}

@media (min-width: 780px) {
	.opg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.opg-stat {
	padding: var(--opg-space-md) var(--opg-space-sm);
	background: var(--opg-bg);
	text-align: center;
}

.opg-stat__value {
	display: block;
	color: var(--opg-primary);
	font-family: var(--opg-font-heading);
	font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
}

.opg-stat__label {
	display: block;
	margin-top: var(--opg-space-3xs);
	color: var(--opg-muted);
	font-size: var(--opg-fs-small);
	font-weight: 500;
}

.opg-section--dark .opg-stats {
	background: var(--opg-ink-700);
	border-color: var(--opg-ink-700);
}

.opg-section--dark .opg-stat {
	background: var(--opg-ink-800);
}

.opg-section--dark .opg-stat__label {
	color: rgb(255 255 255 / 0.6);
}

/* =========================================================================
   9. Gallery
   ========================================================================= */

.opg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opg-space-2xs);
	justify-content: center;
	margin-bottom: var(--opg-space-lg);
}

.opg-filter {
	min-height: 42px;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--opg-line-strong);
	border-radius: var(--opg-radius-pill);
	background: var(--opg-bg);
	color: var(--opg-body);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color var(--opg-dur-fast) var(--opg-ease),
		border-color var(--opg-dur-fast) var(--opg-ease),
		color var(--opg-dur-fast) var(--opg-ease);
}

.opg-filter:hover {
	border-color: var(--opg-primary);
	color: var(--opg-primary);
}

.opg-filter[aria-pressed="true"] {
	background: var(--opg-primary);
	border-color: var(--opg-primary);
	color: var(--opg-on-primary);
}

/* The comparisons are the most persuasive thing in the gallery, so their filter is
   not just one more service name in the row. */
.opg-filter--ba {
	border-color: var(--opg-primary);
	color: var(--opg-primary);
}

.opg-filter--ba::before {
	content: "\2194";
	margin-inline-end: 0.4rem;
	font-weight: 700;
}

.opg-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--opg-space-xs);
}

.opg-gallery__item {
	position: relative;
	margin: 0;
	padding: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--opg-radius);
	background: var(--opg-surface-2);
	cursor: zoom-in;
	border: 0;
}

.opg-gallery__item[hidden] {
	display: none;
}

.opg-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--opg-dur-slow) var(--opg-ease);
}

.opg-gallery__item:hover img,
.opg-gallery__item:focus-visible img {
	transform: scale(1.06);
}

.opg-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(13 13 13 / 0.55), transparent 55%);
	opacity: 0;
	transition: opacity var(--opg-dur) var(--opg-ease);
}

.opg-gallery__item:hover::after,
.opg-gallery__item:focus-visible::after {
	opacity: 1;
}

.opg-gallery__cap {
	position: absolute;
	right: var(--opg-space-xs);
	bottom: var(--opg-space-xs);
	left: var(--opg-space-xs);
	z-index: 1;
	color: var(--opg-bg);
	font-size: var(--opg-fs-small);
	font-weight: 600;
	text-align: left;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--opg-dur) var(--opg-ease), transform var(--opg-dur) var(--opg-ease);
}

.opg-gallery__item:hover .opg-gallery__cap,
.opg-gallery__item:focus-visible .opg-gallery__cap {
	opacity: 1;
	transform: translateY(0);
}

/* --- lightbox ------------------------------------------------------------ */

.opg-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--opg-z-lightbox);
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding: var(--opg-space-sm);
	background: rgb(13 13 13 / 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--opg-dur) var(--opg-ease), visibility var(--opg-dur);
}

.opg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.opg-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--opg-space-sm);
	color: rgb(255 255 255 / 0.7);
	font-size: var(--opg-fs-small);
}

.opg-lightbox__stage {
	display: grid;
	place-items: center;
	min-height: 0;
}

.opg-lightbox__stage img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--opg-radius-sm);
}

.opg-lightbox__cap {
	padding-top: var(--opg-space-xs);
	color: rgb(255 255 255 / 0.72);
	font-size: var(--opg-fs-small);
	text-align: center;
}

.opg-lightbox__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: var(--opg-radius-pill);
	background: rgb(255 255 255 / 0.08);
	color: var(--opg-bg);
	cursor: pointer;
	transition: background-color var(--opg-dur-fast) var(--opg-ease);
}

.opg-lightbox__btn:hover {
	background: rgb(255 255 255 / 0.2);
}

.opg-lightbox__btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.opg-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.opg-lightbox__nav--prev { left: var(--opg-space-sm); }
.opg-lightbox__nav--next { right: var(--opg-space-sm); }

/* --- before / after slider ------------------------------------------------ */

.opg-ba {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--opg-radius-lg);
	background: var(--opg-surface-2);
	touch-action: pan-y;
	user-select: none;
}

.opg-ba img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Stops the browser starting its own image drag, which used to swallow the
	   pointerup and leave the divider stuck to the cursor. */
	-webkit-user-drag: none;
	pointer-events: none;
}

.opg-ba__after {
	clip-path: inset(0 0 0 var(--opg-ba-pos, 50%));
}

.opg-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--opg-ba-pos, 50%);
	z-index: 2;
	width: 3px;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	border: 0;
	background: var(--opg-bg);
	cursor: ew-resize;
	appearance: none;
}

.opg-ba__handle::-webkit-slider-thumb { appearance: none; }

.opg-ba__grip {
	position: absolute;
	top: 50%;
	left: var(--opg-ba-pos, 50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	transform: translate(-50%, -50%);
	border-radius: var(--opg-radius-pill);
	background: var(--opg-bg);
	color: var(--opg-ink);
	box-shadow: var(--opg-shadow);
	pointer-events: none;
}

.opg-ba__grip svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.opg-ba__tag {
	position: absolute;
	top: var(--opg-space-xs);
	z-index: 2;
	padding: 0.25rem 0.65rem;
	border-radius: var(--opg-radius-pill);
	background: rgb(13 13 13 / 0.7);
	color: var(--opg-bg);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.opg-ba__tag--before { left: var(--opg-space-xs); }
.opg-ba__tag--after  { right: var(--opg-space-xs); }

/* =========================================================================
   10. Reviews
   ========================================================================= */

.opg-reviews {
	position: relative;
}

.opg-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(88vw, 420px);
	gap: var(--opg-space-md);
	padding-bottom: var(--opg-space-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

.opg-reviews__track::-webkit-scrollbar { height: 6px; }
.opg-reviews__track::-webkit-scrollbar-thumb {
	background: var(--opg-line-strong);
	border-radius: var(--opg-radius-pill);
}

.opg-review {
	display: flex;
	flex-direction: column;
	gap: var(--opg-space-sm);
	padding: var(--opg-space-md);
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-lg);
	background: var(--opg-bg);
	scroll-snap-align: start;
}

.opg-review__stars {
	display: flex;
	gap: 2px;
	color: #f5a623;
}

.opg-review__stars svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.opg-review__text {
	flex: 1;
	margin: 0;
	color: var(--opg-body);
	font-size: var(--opg-fs-small);
}

.opg-review__foot {
	display: flex;
	align-items: center;
	gap: var(--opg-space-2xs);
	padding-top: var(--opg-space-sm);
	border-top: 1px solid var(--opg-line);
}

.opg-review__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--opg-radius-pill);
	background: var(--opg-primary-soft);
	color: var(--opg-primary);
	font-family: var(--opg-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.opg-review__who {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.opg-review__name {
	color: var(--opg-ink);
	font-weight: 600;
}

.opg-review__meta {
	color: var(--opg-muted);
	font-size: 0.8125rem;
}

.opg-review__src {
	width: auto;
	max-height: 26px;
	margin-left: auto;
}

.opg-reviews__controls {
	display: flex;
	gap: var(--opg-space-2xs);
	justify-content: center;
	margin-top: var(--opg-space-md);
}

.opg-reviews__btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--opg-line-strong);
	border-radius: var(--opg-radius-pill);
	background: var(--opg-bg);
	color: var(--opg-ink);
	cursor: pointer;
	transition: background-color var(--opg-dur-fast) var(--opg-ease), border-color var(--opg-dur-fast) var(--opg-ease);
}

.opg-reviews__btn:hover:not([disabled]) {
	border-color: var(--opg-primary);
	background: var(--opg-primary-soft);
	color: var(--opg-primary);
}

.opg-reviews__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.opg-reviews__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* =========================================================================
   11. Service areas
   ========================================================================= */

.opg-areas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opg-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.opg-areas li {
	margin: 0;
}

.opg-area-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 40px;
	padding: 0.45rem 1rem;
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-pill);
	background: var(--opg-bg);
	color: var(--opg-body);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color var(--opg-dur-fast) var(--opg-ease),
		border-color var(--opg-dur-fast) var(--opg-ease),
		color var(--opg-dur-fast) var(--opg-ease);
}

.opg-area-chip:hover {
	border-color: var(--opg-primary);
	background: var(--opg-primary-soft);
	color: var(--opg-primary-dark);
}

.opg-area-chip svg {
	width: 14px;
	height: 14px;
	fill: var(--opg-primary);
}

.opg-section--dark .opg-area-chip {
	border-color: rgb(255 255 255 / 0.16);
	background: rgb(255 255 255 / 0.05);
	color: rgb(255 255 255 / 0.85);
}

.opg-section--dark .opg-area-chip:hover {
	border-color: var(--opg-primary);
	background: var(--opg-primary);
	color: var(--opg-on-primary);
}

/* =========================================================================
   12. FAQ accordion
   ========================================================================= */

.opg-faq {
	display: grid;
	gap: var(--opg-space-2xs);
}

.opg-faq__item {
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius);
	background: var(--opg-bg);
	overflow: hidden;
}

.opg-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--opg-space-sm);
	width: 100%;
	padding: var(--opg-space-sm) var(--opg-space-md);
	border: 0;
	background: transparent;
	color: var(--opg-ink);
	font-family: var(--opg-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.opg-faq__q:hover {
	color: var(--opg-primary);
}

.opg-faq__sign {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.opg-faq__sign::before,
.opg-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--opg-dur) var(--opg-ease), opacity var(--opg-dur-fast) var(--opg-ease);
}

.opg-faq__sign::before { width: 14px; height: 2px; }
.opg-faq__sign::after  { width: 2px; height: 14px; }

.opg-faq__q[aria-expanded="true"] .opg-faq__sign::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.opg-faq__a {
	padding: 0 var(--opg-space-md) var(--opg-space-md);
	color: var(--opg-muted);
}

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

/* =========================================================================
   13. Forms — shared controls
   ========================================================================= */

.opg-field {
	display: grid;
	gap: var(--opg-space-3xs);
	margin-bottom: var(--opg-space-sm);
}

.opg-field__label {
	color: var(--opg-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.opg-field__req {
	color: var(--opg-primary);
}

.opg-field__hint {
	color: var(--opg-muted);
	font-size: 0.8125rem;
}

.opg-input,
.opg-select,
.opg-textarea {
	width: 100%;
	min-height: 52px;
	padding: 0.8rem 1rem;
	border: 1px solid var(--opg-line-strong);
	border-radius: var(--opg-radius);
	background: var(--opg-bg);
	color: var(--opg-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--opg-dur-fast) var(--opg-ease), box-shadow var(--opg-dur-fast) var(--opg-ease);
}

.opg-textarea {
	min-height: 130px;
	resize: vertical;
}

.opg-select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 15.5 5.5 9l1.4-1.4L12 12.7l5.1-5.1L18.5 9z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 18px;
}

.opg-input:focus,
.opg-select:focus,
.opg-textarea:focus {
	outline: none;
	border-color: var(--opg-primary);
	box-shadow: 0 0 0 3px var(--opg-primary-soft);
}

.opg-input::placeholder,
.opg-textarea::placeholder {
	color: var(--opg-muted);
	opacity: 0.75;
}

.opg-field.has-error .opg-input,
.opg-field.has-error .opg-select,
.opg-field.has-error .opg-textarea {
	border-color: var(--opg-error);
	background: var(--opg-error-soft);
}

.opg-field__error {
	display: none;
	align-items: center;
	gap: 0.35em;
	color: var(--opg-error);
	font-size: 0.8125rem;
	font-weight: 600;
}

.opg-field.has-error .opg-field__error {
	display: flex;
}

.opg-field__error svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* --- choice cards (radio / checkbox rendered as tiles) -------------------- */

.opg-choices {
	display: grid;
	gap: var(--opg-space-2xs);
}

.opg-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
	.opg-choices--cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
	.opg-choices--inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

.opg-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--opg-space-2xs);
	min-height: 56px;
	padding: var(--opg-space-xs) var(--opg-space-sm);
	border: 2px solid var(--opg-line);
	border-radius: var(--opg-radius);
	background: var(--opg-bg);
	cursor: pointer;
	transition:
		border-color var(--opg-dur-fast) var(--opg-ease),
		background-color var(--opg-dur-fast) var(--opg-ease),
		transform var(--opg-dur-fast) var(--opg-ease);
}

.opg-choice:hover {
	border-color: var(--opg-line-strong);
	transform: translateY(-1px);
}

.opg-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.opg-choice__box {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid var(--opg-line-strong);
	border-radius: var(--opg-radius-xs);
	background: var(--opg-bg);
	transition: border-color var(--opg-dur-fast) var(--opg-ease), background-color var(--opg-dur-fast) var(--opg-ease);
}

.opg-choice__box--radio {
	border-radius: var(--opg-radius-pill);
}

.opg-choice__box::after {
	content: "";
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--opg-on-primary);
	border-bottom: 2px solid var(--opg-on-primary);
	opacity: 0;
	transform: rotate(-45deg) translate(1px, -1px);
}

.opg-choice__box--radio::after {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: var(--opg-radius-pill);
	background: var(--opg-on-primary);
	transform: none;
}

.opg-choice input:checked ~ .opg-choice__box {
	border-color: var(--opg-primary);
	background: var(--opg-primary);
}

.opg-choice input:checked ~ .opg-choice__box::after {
	opacity: 1;
}

.opg-choice:has(input:checked) {
	border-color: var(--opg-primary);
	background: var(--opg-primary-softer);
}

.opg-choice input:focus-visible ~ .opg-choice__box {
	outline: 3px solid var(--opg-primary);
	outline-offset: 2px;
}

.opg-choice__label {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-weight: 600;
	line-height: 1.25;
}

.opg-choice__label small {
	color: var(--opg-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.opg-choice__thumb {
	flex: none;
	width: 54px;
	height: 44px;
	border-radius: var(--opg-radius-sm);
	object-fit: cover;
}

/* --- file dropzone -------------------------------------------------------- */

.opg-drop {
	display: grid;
	place-items: center;
	gap: var(--opg-space-2xs);
	padding: var(--opg-space-lg) var(--opg-space-sm);
	border: 2px dashed var(--opg-line-strong);
	border-radius: var(--opg-radius);
	background: var(--opg-surface);
	color: var(--opg-muted);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--opg-dur-fast) var(--opg-ease), background-color var(--opg-dur-fast) var(--opg-ease);
}

.opg-drop:hover,
.opg-drop.is-dragover {
	border-color: var(--opg-primary);
	background: var(--opg-primary-softer);
	color: var(--opg-primary-dark);
}

.opg-drop svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
	opacity: 0.7;
}

.opg-drop strong {
	color: var(--opg-ink);
}

.opg-drop input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.opg-drop-list {
	display: grid;
	gap: var(--opg-space-3xs);
	margin-top: var(--opg-space-2xs);
	padding: 0;
	list-style: none;
}

.opg-drop-list li {
	display: flex;
	align-items: center;
	gap: var(--opg-space-2xs);
	margin: 0;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-sm);
	background: var(--opg-bg);
	font-size: var(--opg-fs-small);
}

.opg-drop-list img {
	width: 38px;
	height: 38px;
	border-radius: var(--opg-radius-xs);
	object-fit: cover;
}

.opg-drop-list__size {
	margin-left: auto;
	color: var(--opg-muted);
	font-size: 0.8125rem;
}

.opg-drop-list__remove {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: var(--opg-radius-sm);
	background: transparent;
	color: var(--opg-muted);
	cursor: pointer;
}

.opg-drop-list__remove:hover {
	background: var(--opg-error-soft);
	color: var(--opg-error);
}

.opg-drop-list__remove svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* =========================================================================
   14. Multi-step quote form
   ========================================================================= */

.opg-form {
	position: relative;
	padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-lg);
	background: var(--opg-bg);
	box-shadow: var(--opg-shadow);

	/*
	 * The form paints its own light background, so it must also reset the text colour.
	 * Without this it inherits from whatever section it sits in — and inside
	 * .opg-section--dark that is near-white, which renders every step heading and choice
	 * label as white text on a white card. The fields looked empty.
	 */
	color: var(--opg-body);
}

.opg-form h1,
.opg-form h2,
.opg-form h3,
.opg-form h4,
.opg-form legend,
.opg-form .opg-choice__label,
.opg-form .opg-step__title {
	color: var(--opg-ink);
}

.opg-form .opg-step__sub,
.opg-form .opg-field__hint,
.opg-form .opg-form__legal,
.opg-form .opg-form__sub {
	color: var(--opg-muted);
}

.opg-form .opg-choice__label small {
	color: var(--opg-muted);
}

.opg-form--flat {
	border: 0;
	padding: 0;
	box-shadow: none;
	background: transparent;
}

.opg-form__head {
	margin-bottom: var(--opg-space-md);
}

.opg-form__title {
	margin-bottom: var(--opg-space-3xs);
	font-size: var(--opg-fs-h3);
}

.opg-form__sub {
	margin: 0;
	color: var(--opg-muted);
	font-size: var(--opg-fs-small);
}

/* progress */

.opg-progress {
	margin-bottom: var(--opg-space-md);
}

.opg-progress__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--opg-space-sm);
	margin-bottom: var(--opg-space-2xs);
	font-size: var(--opg-fs-small);
}

.opg-progress__step {
	color: var(--opg-ink);
	font-weight: 600;
}

.opg-progress__count {
	color: var(--opg-muted);
}

.opg-progress__bar {
	height: 6px;
	overflow: hidden;
	border-radius: var(--opg-radius-pill);
	background: var(--opg-surface-2);
}

.opg-progress__fill {
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--opg-primary);
	transition: width var(--opg-dur-slow) var(--opg-ease);
}

/* steps */

.opg-step {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/*
 * Two columns so short fields pair up instead of stacking into a tall scroll. The
 * heading, sub-heading and any full-width field span both tracks.
 */
.opg-step.is-active {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--opg-space-sm);
	align-content: start;
	animation: opg-step-in var(--opg-dur-slow) var(--opg-ease);
}

.opg-step__title,
.opg-step__sub,
.opg-step > .opg-field--full,
.opg-step > .opg-drop,
.opg-step > .opg-drop-list {
	grid-column: 1 / -1;
}

/* min-width:0 stops a long <select> or datalist from blowing the track out and
   pushing the whole page sideways on mobile. */
.opg-field {
	min-width: 0;
}

@media (max-width: 560px) {
	.opg-step.is-active {
		grid-template-columns: minmax(0, 1fr);
	}
}

@keyframes opg-step-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.opg-step__title {
	margin-bottom: var(--opg-space-3xs);
	font-size: var(--opg-fs-h4);
}

.opg-step__sub {
	margin-bottom: var(--opg-space-md);
	color: var(--opg-muted);
	font-size: var(--opg-fs-small);
}

.opg-form__nav {
	display: flex;
	gap: var(--opg-space-2xs);
	align-items: center;
	margin-top: var(--opg-space-md);
	padding-top: var(--opg-space-md);
	border-top: 1px solid var(--opg-line);
}

.opg-form__nav .opg-btn--next,
.opg-form__nav .opg-btn--submit {
	margin-left: auto;
}

.opg-form__legal {
	margin-top: var(--opg-space-sm);
	color: var(--opg-muted);
	font-size: 0.8125rem;
}

/* busy / result states */

.opg-form.is-busy {
	pointer-events: none;
}

.opg-form.is-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	background: rgb(255 255 255 / 0.6);
}

.opg-spinner {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: opg-spin 0.7s linear infinite;
}

@keyframes opg-spin {
	to { transform: rotate(360deg); }
}

.opg-alert {
	display: flex;
	gap: var(--opg-space-2xs);
	padding: var(--opg-space-sm) var(--opg-space-md);
	margin-bottom: var(--opg-space-sm);
	border-radius: var(--opg-radius);
	font-size: var(--opg-fs-small);
}

.opg-alert svg {
	flex: none;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.opg-alert--error {
	background: var(--opg-error-soft);
	color: var(--opg-error);
}

.opg-alert--success {
	background: var(--opg-success-soft);
	color: var(--opg-success);
}

.opg-success {
	display: grid;
	justify-items: center;
	gap: var(--opg-space-sm);
	padding: var(--opg-space-xl) var(--opg-space-sm);
	text-align: center;
}

.opg-success__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: var(--opg-radius-pill);
	background: var(--opg-success-soft);
	color: var(--opg-success);
}

.opg-success__icon svg {
	width: 38px;
	height: 38px;
	fill: currentColor;
}

/* OTP */

.opg-otp {
	display: grid;
	gap: var(--opg-space-sm);
	justify-items: center;
	padding: var(--opg-space-md);
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius);
	background: var(--opg-surface);
	text-align: center;
}

.opg-otp__input {
	width: min(100%, 260px);
	font-family: var(--opg-font-heading);
	font-size: 1.75rem;
	letter-spacing: 0.4em;
	text-align: center;
}

/* =========================================================================
   15. CTA band
   ========================================================================= */

.opg-cta {
	position: relative;
	overflow: hidden;
	background: var(--opg-ink);
	color: rgb(255 255 255 / 0.78);
	isolation: isolate;
}

.opg-cta__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.opg-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.opg-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgb(13 13 13 / 0.95), rgb(13 13 13 / 0.78));
}

.opg-cta__inner {
	display: grid;
	gap: var(--opg-space-md);
	align-items: center;
	padding-block: var(--opg-section);
}

@media (min-width: 900px) {
	.opg-cta__inner {
		grid-template-columns: 1fr auto;
		gap: var(--opg-space-xl);
	}
}

.opg-cta__title {
	margin-bottom: var(--opg-space-2xs);
	color: var(--opg-bg);
}

.opg-cta__text {
	max-width: 56ch;
	margin: 0;
	color: rgb(255 255 255 / 0.75);
}

/* =========================================================================
   16. Footer
   ========================================================================= */

.opg-footer {
	background: var(--opg-ink);
	color: rgb(255 255 255 / 0.68);
	font-size: var(--opg-fs-small);
}

.opg-footer a {
	color: rgb(255 255 255 / 0.68);
	text-decoration: none;
}

.opg-footer a:hover {
	color: var(--opg-bg);
	text-decoration: underline;
}

.opg-footer__main {
	display: grid;
	gap: var(--opg-space-xl);
	padding-block: var(--opg-space-2xl);
}

@media (min-width: 700px) {
	.opg-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.opg-footer__main { grid-template-columns: 1.6fr 1fr 1.3fr 1fr; }
}

/*
 * No white plate. That existed to rescue a dark logo dropped onto the dark footer; the
 * theme now ships a white-ink version, so the mark sits directly on the band the way it
 * is meant to. An operator who uploads a dark logo of their own gets the plate back via
 * the modifier below.
 */
.opg-footer__logo {
	width: auto;
	/* Stacked lockup: four lines of type under the trowel need the height. */
	max-height: 128px;
	margin-bottom: var(--opg-space-sm);
}

.opg-footer__logo--plated {
	background: var(--opg-bg);
	border-radius: var(--opg-radius-sm);
	padding: var(--opg-space-3xs) var(--opg-space-2xs);
}

.opg-footer__title {
	margin-bottom: var(--opg-space-sm);
	color: var(--opg-bg);
	font-size: 1.0625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.opg-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.opg-footer li {
	margin: 0 0 var(--opg-space-3xs);
}

.opg-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-bottom: var(--opg-space-2xs);
}

.opg-footer__contact svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.25em;
	fill: var(--opg-primary);
}

.opg-footer__hours {
	display: grid;
	gap: 2px;
	margin: 0;
}

.opg-footer__hours div {
	display: flex;
	justify-content: space-between;
	gap: var(--opg-space-sm);
	padding: 0.2rem 0;
}

.opg-footer__hours dt {
	font-weight: 500;
}

.opg-footer__hours dd {
	margin: 0;
}

/*
 * Today's row is emphasised by weight and the brand colour. The white treatment
 * belongs to the footer alone: this same list is reused on the contact page, where
 * white-on-white made the day name for today disappear entirely.
 */
.opg-footer__hours .is-today dt,
.opg-footer__hours .is-today dd {
	color: var(--opg-primary);
	font-weight: 600;
}

.opg-footer .opg-footer__hours dd {
	color: rgb(255 255 255 / 0.55);
}

.opg-footer .opg-footer__hours .is-today dt,
.opg-footer .opg-footer__hours .is-today dd {
	color: var(--opg-bg);
}

.opg-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opg-space-2xs);
	align-items: center;
	margin-top: var(--opg-space-sm);
}

.opg-footer__badges img {
	width: auto;
	max-height: 40px;
	padding: var(--opg-space-3xs);
	border-radius: var(--opg-radius-xs);
	background: var(--opg-bg);
}

.opg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opg-space-2xs) var(--opg-space-md);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--opg-space-md);
	border-top: 1px solid rgb(255 255 255 / 0.1);
	font-size: 0.8125rem;
}

.opg-footer__credit {
	color: rgb(255 255 255 / 0.5);
}

.opg-footer__credit a {
	color: rgb(255 255 255 / 0.68);
	font-weight: 600;
}

/* =========================================================================
   17. Sticky mobile action bar
   ========================================================================= */

.opg-mobilebar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--opg-z-mobilebar);
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 1px;
	background: var(--opg-line);
	border-top: 1px solid var(--opg-line);
	box-shadow: 0 -4px 20px rgb(13 13 13 / 0.12);
	padding-bottom: env(safe-area-inset-bottom);
	transform: translateY(110%);
	transition: transform var(--opg-dur-slow) var(--opg-ease);
}

.opg-mobilebar.is-visible {
	transform: translateY(0);
}

@media (min-width: 900px) {
	.opg-mobilebar { display: none; }
}

.opg-mobilebar__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--opg-mobilebar-h);
	padding: 0.4rem;
	background: var(--opg-bg);
	color: var(--opg-ink);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
}

.opg-mobilebar__btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.opg-mobilebar__btn--primary {
	background: var(--opg-primary);
	color: var(--opg-on-primary);
}

.opg-mobilebar__btn--whatsapp {
	background: #128c7e;
	color: #fff;
}

body.has-mobilebar {
	padding-bottom: calc(var(--opg-mobilebar-h) + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
	body.has-mobilebar { padding-bottom: 0; }
}

/* =========================================================================
   18. Page furniture — breadcrumbs, page hero, pagination, 404, prose
   ========================================================================= */

.opg-pagehero {
	position: relative;
	padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
	background: var(--opg-ink);
	color: rgb(255 255 255 / 0.75);
	isolation: isolate;
	overflow: hidden;
}

.opg-pagehero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.opg-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.opg-pagehero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgb(13 13 13 / 0.93), rgb(13 13 13 / 0.7));
}

.opg-pagehero__title {
	margin-bottom: var(--opg-space-2xs);
	color: var(--opg-bg);
	text-transform: uppercase;
}

.opg-pagehero__sub {
	max-width: 60ch;
	margin: 0;
	color: rgb(255 255 255 / 0.78);
	font-size: var(--opg-fs-lead);
}

.opg-crumbs {
	margin-bottom: var(--opg-space-sm);
	font-size: 0.8125rem;
}

.opg-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opg-crumbs li {
	display: flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
}

.opg-crumbs li + li::before {
	content: "/";
	opacity: 0.45;
}

.opg-pagehero .opg-crumbs a {
	color: rgb(255 255 255 / 0.72);
}

.opg-pagehero .opg-crumbs a:hover {
	color: var(--opg-bg);
}

.opg-pagehero .opg-crumbs [aria-current] {
	color: var(--opg-bg);
	font-weight: 600;
}

.opg-prose {
	max-width: var(--opg-max-prose);
}

/* Long-form pages: one centred column, so the text is not stranded against the left
   edge of a wide container. */
.opg-prose--center {
	margin-inline: auto;
}

.opg-prose--center > h2:first-child,
.opg-prose--center > h3:first-child {
	margin-top: 0;
}

.opg-prose > * + * {
	margin-top: var(--opg-space-sm);
}

.opg-prose h2 {
	margin-top: var(--opg-space-xl);
}

.opg-prose h3 {
	margin-top: var(--opg-space-lg);
}

.opg-prose img,
.opg-prose figure {
	border-radius: var(--opg-radius);
}

.opg-prose figcaption {
	margin-top: var(--opg-space-3xs);
	color: var(--opg-muted);
	font-size: 0.8125rem;
}

.opg-prose ul,
.opg-prose ol {
	padding-left: 1.35em;
}

.opg-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--opg-space-3xs);
	justify-content: center;
	margin-top: var(--opg-space-xl);
}

.opg-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 var(--opg-space-2xs);
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-sm);
	color: var(--opg-ink);
	font-weight: 600;
	text-decoration: none;
}

.opg-pagination .page-numbers:hover {
	border-color: var(--opg-primary);
	color: var(--opg-primary);
}

.opg-pagination .page-numbers.current {
	background: var(--opg-primary);
	border-color: var(--opg-primary);
	color: var(--opg-on-primary);
}

.opg-404 {
	display: grid;
	justify-items: center;
	gap: var(--opg-space-md);
	padding-block: var(--opg-section);
	text-align: center;
}

.opg-404__code {
	color: var(--opg-primary);
	font-family: var(--opg-font-heading);
	font-size: clamp(5rem, 3rem + 12vw, 11rem);
	font-weight: 700;
	line-height: 0.85;
}

.opg-searchform {
	display: flex;
	gap: var(--opg-space-2xs);
	width: min(100%, 460px);
}

.opg-searchform .opg-input {
	flex: 1;
}

.opg-empty {
	padding: var(--opg-space-xl);
	border: 1px dashed var(--opg-line-strong);
	border-radius: var(--opg-radius-lg);
	color: var(--opg-muted);
	text-align: center;
}

/* --- map ----------------------------------------------------------------- */

.opg-map {
	position: relative;
	aspect-ratio: 21 / 9;
	min-height: 300px;
	overflow: hidden;
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-lg);
	background: var(--opg-surface-2);
}

.opg-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 640px) {
	.opg-map {
		aspect-ratio: 4 / 3;
	}
}

/* --- sticky sidebar for service pages ------------------------------------ */

.opg-with-aside {
	display: grid;
	gap: var(--opg-space-xl);
	align-items: start;
}

@media (min-width: 1024px) {
	.opg-with-aside {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: clamp(2rem, 4vw, 3.5rem);
	}

	/*
	 * Sticky only when the sidebar genuinely fits. A sticky element taller than the
	 * viewport pins its top and pushes its bottom permanently off-screen, which is how
	 * the submit button became unreachable. The internal scroll is the safety net for
	 * short viewports and long forms.
	 */
	.opg-aside {
		position: sticky;
		top: calc(var(--opg-header-h) + var(--opg-space-md));
		max-height: calc(100dvh - var(--opg-header-h) - var(--opg-space-lg));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		/* Room for the focus ring and box shadow, which overflow:auto would clip. */
		padding: 4px;
		margin: -4px;
	}
}

/* Under ~820px tall there is no useful sticky room at all — let it scroll with the page. */
@media (max-height: 820px) {
	.opg-aside {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

.opg-aside__card {
	padding: var(--opg-space-md);
	border: 1px solid var(--opg-line);
	border-radius: var(--opg-radius-lg);
	background: var(--opg-bg);
	box-shadow: var(--opg-shadow-sm);
}

.opg-aside__card + .opg-aside__card {
	margin-top: var(--opg-space-sm);
}

/* --- scroll reveal (progressive enhancement; no JS = fully visible) ------- */

.opg-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--opg-dur-slow) var(--opg-ease), transform var(--opg-dur-slow) var(--opg-ease);
}

.opg-reveal.is-in,
.no-js .opg-reveal {
	opacity: 1;
	transform: none;
}

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

/* =========================================================================
   19. WordPress core classes
   ========================================================================= */

.alignleft  { float: left;  margin: 0 var(--opg-space-md) var(--opg-space-sm) 0; }
.alignright { float: right; margin: 0 0 var(--opg-space-sm) var(--opg-space-md); }
.aligncenter { display: block; margin-inline: auto; }

.alignwide {
	width: min(100vw - (var(--opg-gutter) * 2), var(--opg-max-wide));
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.wp-caption-text,
.gallery-caption {
	color: var(--opg-muted);
	font-size: 0.8125rem;
}

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

/* =========================================================================
   20. Print
   ========================================================================= */

@media print {
	.opg-header,
	.opg-topbar,
	.opg-announcement,
	.opg-mobilebar,
	.opg-drawer,
	.opg-cta,
	.opg-form,
	.opg-footer__badges {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 11pt;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}

/* ---------------------------------------------------------------------------
 * Video
 *
 * Two orientations have to work in the same frame: a 16:9 customer testimonial and
 * upright phone footage from the crew. Rather than force one aspect ratio and crop
 * somebody's job in half, the frame is a centred flex box and the video keeps its own
 * proportions inside it, bounded by max-width and max-height.
 * ------------------------------------------------------------------------ */

.opg-video {
	margin: 0;
}

.opg-video__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Shrink to the video rather than to the column, so an upright clip is not
	   surrounded by a slab of black on a white page. */
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	background: #0b0b0d;
	border-radius: var(--opg-radius-lg);
	overflow: hidden;
	box-shadow: var(--opg-shadow);
}

.opg-video__frame video {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(68vh, 620px);
}

.opg-video__caption {
	margin-top: var(--opg-space-xs);
	font-size: var(--opg-fs-small);
	color: var(--opg-muted);
	text-align: center;
}

.opg-on-dark .opg-video__caption {
	color: rgb(255 255 255 / 0.7);
}

/* ---------------------------------------------------------------------------
 * Trust badge without a logo
 *
 * An accreditation is worth listing the day it is granted, which is rarely the day the
 * logo file turns up. A named badge with no image renders as a chip instead of vanishing.
 * ------------------------------------------------------------------------ */

.opg-badge-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--opg-line-strong);
	border-radius: var(--opg-radius-sm);
	background: var(--opg-bg);
	font-family: var(--opg-font-heading);
	font-size: var(--opg-fs-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--opg-ink);
	white-space: nowrap;
}

.opg-on-dark .opg-badge-chip,
.opg-footer .opg-badge-chip {
	background: rgb(255 255 255 / 0.06);
	border-color: rgb(255 255 255 / 0.22);
	color: #ffffff;
}

a:hover > .opg-badge-chip {
	border-color: var(--opg-primary);
	color: var(--opg-primary);
}

/* ---------------------------------------------------------------------------
 * Join our team
 * ------------------------------------------------------------------------ */

.opg-careers {
	display: grid;
	gap: var(--opg-space-lg);
	padding: var(--opg-space-xl);
	border: 1px solid var(--opg-line);
	border-left: 4px solid var(--opg-primary);
	border-radius: var(--opg-radius-lg);
	background: var(--opg-surface);
}

@media (min-width: 900px) {
	.opg-careers {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
	}
}

.opg-careers h2 {
	margin-bottom: var(--opg-space-xs);
}

.opg-careers p {
	margin: 0;
	color: var(--opg-body);
}

/* The testimonial sits above the review cards, narrow enough not to dominate them. */
.opg-reviews__video {
	max-width: 780px;
	margin: 0 auto var(--opg-space-xl);
}

/* The same hours list, on a page rather than in the dark footer. */
.opg-hours--page {
	margin-top: var(--opg-space-lg);
	color: var(--opg-body);
}

.opg-hours--page dd {
	color: var(--opg-muted);
}

.opg-hours--page div {
	border-bottom: 1px solid var(--opg-line);
}

/* A photo strip or a video sitting between two sections of page copy. */
.opg-inline-media {
	margin: var(--opg-space-xl) 0;
}

.opg-inline-media .opg-gallery {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}