/* ==========================================================================
   Site chrome — service bar, header, footer.
   Values come from the approved design system; the text comes from
   Appearance → Customize → Company information.
   ========================================================================== */

/* ---------- shared ---------- */

/* WordPress wraps every template part in its own element. That box is only as tall
   as the chrome itself, which traps position:sticky inside it (the header scrolled
   away after ~111px). `display: contents` removes the box so the sticky header's
   containing block becomes the page, exactly as <body> is in the static build.
   It also avoids a second <header>/<footer> landmark around ours. */
.site-chrome {
	display: contents;
}

.sb-icon {
	width: 1em;
	height: 1em;
	flex: none;
	display: block;
}

/* ---------- service bar ---------- */

.sb-servicebar {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--grey);
	font-size: 0.8125rem;
}

.sb-servicebar__inner {
	max-width: var(--wp--style--global--content-size, 1440px);
	margin-inline: auto;
	padding: 0 clamp(20px, 4vw, 32px);
	min-height: 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.sb-servicebar__group {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* theme.json colours every link red-deep from a one-class rule printed after this
   file, so the bar's white needs to outweigh it. */
.sb-servicebar .sb-servicebar__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sb-servicebar .sb-servicebar__phone .sb-icon {
	width: 14px;
	height: 14px;
	color: var(--wp--preset--color--red-lt);
}

.sb-servicebar .sb-servicebar__phone:hover {
	color: var(--wp--preset--color--red-lt);
	text-decoration: underline;
}

.sb-servicebar__claim {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* the flag-stripe rule (design system §7.4) */
.sb-servicebar__claim i {
	width: 26px;
	height: 3px;
	display: block;
	background: linear-gradient(to right, var(--wp--preset--color--red) 0 55%, var(--wp--preset--color--navy-lt) 55% 100%);
}

@media (max-width: 767px) {
	.sb-servicebar__hours,
	.sb-servicebar__claim {
		display: none;
	}

	.sb-servicebar__inner {
		justify-content: center;
	}
}

/* ---------- header ---------- */

.site-header {
	--sb-header-h: 88px;
	--sb-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	position: sticky;
	top: 0;
	z-index: 50;
	padding-top: 0;
	padding-bottom: 0;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: box-shadow 200ms var(--sb-ease), background-color 200ms var(--sb-ease);
}

/* The reference .header__inner is a .wrap: 1440px INCLUDING its 32px gutter. Global
   padding on the header instead put the gutter outside that budget — below 1440 the
   two look the same, but once the row hits its max-width the padding stops offsetting
   the content and the brand slid 32px further left than the reference (x=240 vs 272
   at 1920). The row carries its own gutter, as the footer rows do. */
.site-header {
	padding-inline: 0;
}

/* The frosted-glass blur lives on a pseudo-element, not on .site-header itself:
   backdrop-filter makes an element the containing block for fixed-position
   descendants, which displaced the mobile panel by the header's own height. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	pointer-events: none;
}

/* the flex row is the fixed-height band, exactly as .header__inner is */
.site-header > .wp-block-group {
	padding-inline: clamp(20px, 4vw, 32px);
	height: var(--sb-header-h);
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	transition: height 200ms var(--sb-ease);
}

/* scrolled past 40px: shrink 12px, drop the border, raise a shadow */
.site-header.is-stuck {
	box-shadow: var(--wp--preset--shadow--md);
	border-bottom-color: transparent;
}

.site-header.is-stuck > .wp-block-group {
	height: calc(var(--sb-header-h) - 12px);
}

.site-header.is-stuck .sb-brand__mark {
	height: 42px;
}

/* the header CTA is the compact variant, not the page-body button */
.site-header .wp-block-button__link {
	padding: 14px 24px;
	min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header > .wp-block-group,
	.sb-brand__mark {
		transition: none;
	}
}

.sb-brand {
	display: flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	flex: none;
}

.sb-brand__mark {
	height: 48px;
	width: auto;
	flex: none;
	transition: height 200ms var(--sb-ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}

.sb-brand__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.5vw, 1.24rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.sb-brand__name em {
	font-style: normal;
	color: var(--wp--preset--color--red);
}

.sb-brand__desc {
	display: block;
	margin-top: 5px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.185em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-lt);
	white-space: nowrap;
}

/* navigation */
.site-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

/* Core's own navigation rule sets these links to inherit, at the same weight as a
   two-class theme rule and printed later, so the navy needs one more class. */
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	position: relative;
	padding-block: 10px;
}

.site-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 2px;
	height: 3px;
	background: var(--wp--preset--color--red);
	transition: right 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.site-header .wp-block-navigation-item__content:hover::after,
.site-header .current-menu-item > .wp-block-navigation-item__content::after {
	right: 0;
}

/* the reference darkens the row it is on, and the one under the pointer */
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy-deep);
}

/* ---------- dropdown (reference §41) ----------
   Values are the static build's. Core styles submenu links with its own three-class
   selectors and prints them after the theme, so the panel and the rows each need one
   repeated class to win — same tie-break as everywhere else in this build. */

.site-header .wp-block-navigation__submenu-icon {
	padding: 0 0 0 6px;
	color: var(--wp--preset--color--navy);
}

.site-header .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
}

@media (min-width: 1180px) {
	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		left: -18px;
		right: auto;
		min-width: 244px;
		padding: 0;
		overflow: hidden;
		background: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 3px;
		box-shadow: var(--wp--preset--shadow--lg);
	}

	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: block;
		padding: 13px 18px;
		font-family: var(--wp--preset--font-family--display);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--wp--preset--color--navy);
		border-left: 3px solid transparent;
		border-bottom: 1px solid var(--wp--preset--color--line);
		transition:
			background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
			color 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
			border-left-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
	}

	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item:last-child
		.wp-block-navigation-item__content.wp-block-navigation-item__content {
		border-bottom: 0;
	}

	/* Core repeats min-width and overflow on the open state itself, from a selector
	   heavier than a plain container rule, so the panel's width and its clipped corners
	   have to be restated there. */
	.site-header .wp-block-navigation .has-child:hover
		> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation .has-child:focus-within
		> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"]
		~ .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		left: -18px;
		right: auto;
		min-width: 244px;
		overflow: hidden;
	}

	/* the sliding rule belongs to the top row only */
	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content::after {
		content: none;
	}

	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container
		.current-menu-item
		.wp-block-navigation-item__content.wp-block-navigation-item__content {
		background: var(--wp--preset--color--bone);
		color: var(--wp--preset--color--red-deep);
		border-left-color: var(--wp--preset--color--red);
	}
}

/* Inside the mobile panel the submenu is part of the list, not a floating card. */
@media (max-width: 1179px) {
	/* Second level stays shut until the arrow is pressed. Core hides the toggle inside the
	   overlay and shows every submenu expanded, both from four-class selectors, so each is
	   turned back around here. The row becomes [ link | arrow ], the panel drops in
	   underneath. */
	/* A grid, not a flex row: the link is full width inside the overlay, which pushed a
	   flex toggle onto its own line. Columns settle it. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child {
		display: grid;
		grid-template-columns: 1fr 56px;
		align-items: stretch;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.has-child
		> .wp-block-navigation-item__content.wp-block-navigation-item__content {
		grid-column: 1;
		min-width: 0;
	}

	/* one arrow per row: for a parent it is the toggle, not the link's own */
	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.has-child
		> .wp-block-navigation-item__content::after {
		content: none;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child
		> .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
		display: flex;
		grid-column: 2;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: auto;
		padding: 0;
		background: none;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--navy);
		cursor: pointer;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child
		> .wp-block-navigation-submenu__toggle svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
		transition: transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child
		> .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
		color: var(--wp--preset--color--red-deep);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child
		> .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child
		> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		display: none;
		grid-column: 1 / -1;
		padding-top: 0;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content
		.has-child
		> .wp-block-navigation-submenu__toggle[aria-expanded="true"]
		~ .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		display: block;
	}

	/* Core gives the submenu 2rem of side padding inside the overlay, from a selector
	   that names the open state — which pushed the rows 6px past the viewport. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.has-child
		> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
	.site-header
		.wp-block-navigation
		.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		position: static;
		left: auto;
		min-width: 0;
		width: auto;
		padding: 0;
		background: var(--wp--preset--color--bone);
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content.wp-block-navigation-item__content {
		min-height: 48px;
		padding-left: 34px;
		font-size: 0.9375rem;
	}
}

@media (max-width: 420px) {
	.sb-brand__mark {
		height: 38px;
	}
}

/* ---------- footer ---------- */

/* Reference rhythm: band flush at the top, then 80px of grid padding above and
   below the columns, then a 22px bottom bar. The footer element itself has none. */
.site-footer {
	--sb-footer-pad: clamp(48px, 6vw, 80px);
	padding-top: 0;
	padding-bottom: 0;
	/* The reference rows are .wrap elements: 1440px INCLUDING the gutter. Global
	   padding on the footer would put the gutter outside that budget and make the
	   columns 64px wider than the reference, so the rows carry it themselves. */
	padding-inline: 0;
}

.site-footer .site-footer__grid,
.site-footer .site-footer__bottom {
	padding-inline: clamp(20px, 4vw, 32px);
}

/* red/black diagonal hazard band along the top edge (design system §7.5) */
.site-footer::before {
	content: "";
	display: block;
	height: 7px;
	margin: 0 calc(-50vw + 50%) 0;
	background-image: repeating-linear-gradient(
		-45deg,
		var(--wp--preset--color--red) 0 14px,
		var(--wp--preset--color--black) 14px 28px
	);
}

.sb-contact {
	margin: 0;
}

.sb-contact {
	display: flow-root;
	margin: 0;
}

.sb-contact dt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey);
	margin-bottom: 4px;
}

.sb-contact dd {
	margin: 0 0 16px;
	color: var(--wp--preset--color--white);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.sb-contact dd a {
	color: inherit;
	text-decoration: none;
}

.sb-contact dd a:hover {
	color: var(--wp--preset--color--red-lt);
	text-decoration: underline;
}

.sb-contact dd a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.sb-copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--grey);
}

.sb-footer-tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-lt);
}

/* theme.json's elements.link colour is red-deep, correct on light grounds but
   only 2.77:1 on the ink footer. On dark, links go white (design system §4.3). */
.site-footer a:not(.wp-block-button__link) {
	color: rgba(255, 255, 255, 0.86);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.site-footer a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--white);
}

.site-footer .wp-block-navigation-item__content {
	text-decoration: none;
}

.site-footer .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* Footer column headings. theme.json's h2 element styling (800 weight, tight
   negative tracking) is wrong here — the reference uses the t-h4 treatment with
   wide tracking and a hairline rule underneath. */
.site-footer h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- footer columns: values mirrored from the static reference ---------- */

.sb-footer-badge {
	display: block;
	width: 300px;
	max-width: 100%;
	height: auto;
	margin-bottom: 22px;
}

/* the reference footer sets its paragraphs to 1.6 line-height and grey */
.site-footer p {
	line-height: 1.6;
}

.site-footer p.sb-footer-tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-lt);
	margin: 0 0 16px;
}

.site-footer p.sb-footer-legal {
	font-size: 1rem;
	line-height: 1.6;
	margin: 16px 0 0;
	color: rgba(173, 177, 183, 0.8);
}

/* Site column. The reference spaces its <li>s with margin-bottom; the last one's
   11px collapses out through the <ul> and lands below the list, making that column
   11px taller than the sum of its children. The block Navigation uses flex gap,
   where nothing escapes, so it is restated here. Only visible once the columns
   stack, where this column is no longer the shortest. */
.site-footer .site-footer__nav {
	margin-top: 0;
}

/* The reference spaces its footer list with margin-bottom on each <li>, which in a
   block <ul> puts 11px between items and leaves 11px below the last one. Flex gap
   cannot express that trailing space, so the margins are reproduced directly. */
.site-footer__nav .wp-block-navigation__container {
	gap: 0;
}

.site-footer__nav .wp-block-navigation-item {
	margin-bottom: 11px;
}

.site-footer .site-footer__nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-footer .site-footer__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0;
	text-transform: none;
	padding-block: 0;
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.site-footer__nav .wp-block-navigation-item__content::before {
	content: "";
	width: 10px;
	height: 10px;
	flex: none;
	transform: translateY(1px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4574A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5.5 18.5 12 12 18.5'/%3E%3C/svg%3E")
		no-repeat center / contain;
}

.site-footer__nav .wp-block-navigation-item__content::after {
	content: none;
}

.site-footer .site-footer__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* Get in touch column */
.sb-contact {
	display: flow-root;
	margin: 0;
}

.sb-contact dt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey);
	margin-bottom: 4px;
}

.sb-contact dd {
	margin: 0 0 16px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
	overflow-wrap: anywhere;
}

.sb-contact dd a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
}

.sb-contact dd a:hover {
	color: var(--wp--preset--color--red-lt);
	text-decoration: underline;
}

.sb-contact dd a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.site-footer .site-footer__cta {
	margin-top: 6px;
}

.site-footer .site-footer__cta .wp-block-button {
	margin-top: 0;
}

.site-footer__cta .wp-block-button__link {
	padding-inline: 16px;
	letter-spacing: 0.06em;
}

/* Bottom bar */
/* The column widths are the block's own (41 / 26 / 33, the reference's 1.6 / 1 / 1.3),
   so they are left to the Columns panel — an earlier version forced a CSS grid here and
   neutralised them with !important, which made the width controls do nothing. Only the
   fluid gap and the band padding stay, neither of which the panel can express. */
.site-footer .site-footer__grid {
	padding-block: var(--sb-footer-pad);
	margin-block: 0;
	column-gap: clamp(28px, 4vw, 56px);
	row-gap: clamp(28px, 4vw, 56px);
}

.site-footer .site-footer__grid > .wp-block-column {
	min-width: 0;
}

.site-footer__bottom {
	margin-top: 0;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--grey);
}

.site-footer__bottom p.sb-copyright {
	margin: 0;
	max-width: none;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--grey);
}

.site-footer__bottom p {
	margin: 0;
	line-height: 1.6;
}

.site-footer__bottom p:not(.sb-copyright) {
	font-size: 1rem;
	line-height: 1.65;
}

/* footer links carry the reference's inline-flex + 9px gap (used by icon links) */
.site-footer a:not(.wp-block-button__link) {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
}

.site-footer a:not(.wp-block-button__link) {
	text-decoration: none;
}

.site-footer a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive chrome (§14). The ported sections.css carries these rules under
   the reference's own class names (.header, .utility, .footer), which do not
   exist in WordPress markup — so the chrome breakpoints are restated here
   against the classes this theme actually renders. Values are unchanged.
   ========================================================================== */

/* Core's Navigation switches to its overlay at 600px. The reference switches at
   1179px, where 16px nav type stops fitting beside the brand and the CTA. */
@media (max-width: 1179px) {
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* reference .burger: a 48px white box with a hairline border and a navy glyph */
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 48px;
		min-height: 48px;
		margin-left: auto;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 3px;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--navy);
	}

	.site-header .wp-block-navigation__responsive-container-open svg {
		width: 22px;
		height: 22px;
		fill: currentColor;
	}

	.site-header > .wp-block-group > .wp-block-group > .wp-block-buttons {
		display: none;
	}

	/* The brand and the burger together exceed a phone's width, and the block's flex
	   row wraps — which dropped the burger onto a second line under the logo. The
	   reference row never wraps; the wordmark gives way instead. */
	.site-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	.site-header > .wp-block-group > .wp-block-group {
		min-width: 0;
		flex: 0 1 auto;
	}

	/* The wordmark gives way, the burger does not: allowing both to shrink squeezed the
	   group around the button to 10px, and the 48px button spilled 18px past the
	   viewport, where body's overflow-x clipped its right edge. */
	.site-header > .wp-block-group > .wp-block-group:has(> .wp-block-navigation) {
		flex: none;
	}

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

	.sb-brand__text {
		min-width: 0;
	}

	.sb-brand__name {
		white-space: normal;
	}
}

@media (min-width: 1180px) and (max-width: 1400px) {
	.sb-brand__mark {
		height: 42px;
	}

	.site-header .wp-block-navigation__container {
		gap: 22px;
	}

	.site-header .wp-block-navigation-item__content {
		letter-spacing: 0.07em;
	}

	.site-header .wp-block-button__link {
		padding-inline: 18px;
	}
}

@media (max-width: 1023px) {
	.site-header {
		--sb-header-h: 74px;
	}

	.site-footer .site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 639px) {
	.site-footer .site-footer__grid {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom {
		padding-bottom: 78px;
	}
}

@media (max-width: 420px) {
	.site-header > .wp-block-group {
		gap: 12px;
	}

	.sb-brand {
		gap: 10px;
	}

	.sb-brand__name {
		font-size: 1rem;
		white-space: normal;
	}

	/* Owner's direction: the wordmark takes two lines here — "Scraper Blades" over
	   "USA". On one line it needs 196px, which left the 48px burger 18px past the
	   viewport edge, where body's overflow-x clipped it. */
	.sb-brand__name em {
		display: block;
	}

	.sb-brand__desc {
		display: none;
	}
}

/* ---------- mobile sticky action bar (§14) ---------- */

.mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: none;
	gap: 1px;
	background: var(--wp--preset--color--navy-deep);
	box-shadow: 0 -6px 20px rgba(10, 12, 16, 0.3);
	transform: translateY(110%);
	transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
	padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bar.is-visible {
	transform: translateY(0);
}

.mobile-bar a {
	flex: 1;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--white);
}

/* The ported base rule turns links red on hover, which put red text on the red
   Get-a-Quote half. The bar's labels stay white, as in the reference. */
.mobile-bar a:hover,
.mobile-bar a:focus-visible {
	color: var(--wp--preset--color--white);
}

.mobile-bar a::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--sb-glyph) no-repeat center / contain;
	mask: var(--sb-glyph) no-repeat center / contain;
}

.mobile-bar__call {
	background: var(--wp--preset--color--navy);
	--sb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a2 2 0 0 1-2.2 2 19.4 19.4 0 0 1-8.5-3 19.1 19.1 0 0 1-5.9-5.9 19.4 19.4 0 0 1-3-8.6A2 2 0 0 1 3.4 2H6a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L7.1 9.9a15.7 15.7 0 0 0 5.9 5.9l1.2-1.1a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E");
}

.mobile-bar__quote {
	background: var(--wp--preset--color--red);
	--sb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.5 2 4 13.6h6.1L9.4 22 20 9.9h-6.4z'/%3E%3C/svg%3E");
}

@media (max-width: 639px) {
	.mobile-bar {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-bar {
		transition: none;
	}
}

/* The reference keeps the wordmark beside the mark down to 360px and only drops it
   below that, where there is no room for it next to the burger. An earlier rule
   hid it from 420px, which lost the wordmark on a 375px phone. */
@media (max-width: 359px) {
	.sb-brand__text {
		display: none;
	}
}

/* ==========================================================================
   Mobile navigation panel.

   The reference is a white dropdown under the header, not a full-screen modal:
   a bordered list of uppercase navy links each with an arrow, a full-width red
   CTA, the rush pill, a contact block and the hours line. Core's Navigation
   overlay is a fixed full-viewport modal, so it is re-anchored below the header
   and restyled to that design. Values are the reference's.
   ========================================================================== */

@media (max-width: 1179px) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		/* Anchored to the viewport just below the header, whose bottom edge the
		   header script keeps in --sb-panel-top as it shrinks on scroll.
		*/
		position: fixed;
		top: var(--sb-panel-top, 123px);
		left: 0;
		right: 0;
		bottom: auto;
		display: block;
		padding: 0 clamp(20px, 4vw, 32px) 24px;
		background: var(--wp--preset--color--white);
		border-bottom: 4px solid var(--wp--preset--color--navy);
		box-shadow: var(--wp--preset--shadow--lg);
		max-height: calc(100vh - var(--sb-panel-top, 123px));
		overflow-y: auto;
		width: auto;
		overscroll-behavior: contain;
		z-index: 49;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		display: block;
		padding: 0;
	}

	/* Core's burger only opens and its close button only closes, so the burger keeps its
	   place and its plate, swaps the bars for an X, and forwards the click to the close
	   button (site.js). Positioning core's own button over the burger was the other
	   route, and it does not survive: the panel clips anything absolute above its top
	   edge, and core animates the panel with a transform, which makes it the containing
	   block for anything fixed. */
	.site-header .wp-block-navigation__responsive-container-close {
		display: none;
	}

	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.wp-block-navigation__responsive-container-open {
		position: relative;
		border-color: var(--wp--preset--color--navy);
	}

	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.wp-block-navigation__responsive-container-open svg {
		visibility: hidden;
	}

	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.wp-block-navigation__responsive-container-open::before,
	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.wp-block-navigation__responsive-container-open::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 22px;
		height: 2px;
		margin: -1px 0 0 -11px;
		background: currentColor;
	}

	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.wp-block-navigation__responsive-container-open::before {
		transform: rotate(45deg);
	}

	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.wp-block-navigation__responsive-container-open::after {
		transform: rotate(-45deg);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		display: block;
		gap: 0;
		margin: 0 0 20px;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		display: block;
		margin: 0;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 56px;
		padding: 14px 14px 14px 16px;
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.0625rem;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--wp--preset--color--navy);
		text-decoration: none;
		border-bottom: 1px solid var(--wp--preset--color--line);
		border-left: 3px solid transparent;
		transition:
			background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
			color 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
			border-left-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
	}

	/* the reference's arrow, as a mask so it takes the row's colour */
	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content::after {
		content: "";
		flex: none;
		width: 16px;
		height: 16px;
		background-color: var(--wp--preset--color--line);
		--sb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5.5 18.5 12 12 18.5'/%3E%3C/svg%3E");
		-webkit-mask: var(--sb-arrow) no-repeat center / contain;
		mask: var(--sb-arrow) no-repeat center / contain;
		transition: transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
			background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
		right: auto;
		bottom: auto;
		position: static;
		opacity: 1;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--bone);
		color: var(--wp--preset--color--red-deep);
		border-left-color: var(--wp--preset--color--red);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:hover::after {
		background-color: var(--wp--preset--color--red);
		transform: translateX(3px);
	}

	/* Direct child only: when the parent of a submenu is the current page, a descendant
	   selector painted every row inside it red as well. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.current-menu-item
		> .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--wp--preset--color--red-deep);
		border-left-color: var(--wp--preset--color--red);
		background: rgba(206, 55, 43, 0.05);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open
		.current-menu-item
		> .wp-block-navigation-item__content::after {
		background-color: var(--wp--preset--color--red);
	}
}

/* ---------- the panel's CTA, pill, contact block and hours ---------- */

/* they live inside the navigation so they render inside the overlay; the full nav
   row is what shows above 1180px, where they must not appear */
.mobile-nav__extras {
	display: none;
}

@media (max-width: 1179px) {
	.wp-block-navigation__responsive-container.is-menu-open .mobile-nav__extras {
		display: block;
	}
}

.mobile-nav__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 16px 32px;
	border: 2px solid transparent;
	border-radius: 3px;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.mobile-nav__cta:hover {
	background: var(--wp--preset--color--red-deep);
	color: var(--wp--preset--color--white);
}

.mobile-nav__extras .pill {
	margin-top: 18px;
}

.mobile-nav__contact {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.mobile-nav__icon {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 3px;
	background: var(--wp--preset--color--navy);
}

.mobile-nav__icon .sb-icon {
	width: 19px;
	height: 19px;
	color: var(--wp--preset--color--white);
}

.mobile-nav__phone {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.mobile-nav__phone strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

.mobile-nav__phone:hover strong {
	color: var(--wp--preset--color--red-deep);
}

.mobile-nav__label {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	margin-bottom: 3px;
}

.mobile-nav__hours {
	margin: 12px 0 0;
	font-size: 1rem;
	color: var(--wp--preset--color--body-text-muted);
}

/* Core treats the overlay as a modal and locks the document, which threw the reader
   back to the top of the page on every tap. This panel is a dropdown, not a modal:
   the page keeps its scroll position and stays scrollable behind it. */
html.has-modal-open,
html.has-modal-open body {
	overflow: visible;
}


