/*
Theme Name: Royal Concrete Resurfacing
Theme URI: https://www.rcrau.com.au/
Author: Royal Concrete Resurfacing
Description: Custom block theme for Royal Concrete Resurfacing (RCRAU) — Sydney spray-on concrete resurfacing. Every layout ships as a registered block pattern; all styling lives in theme.json. No page builder, no jQuery, no framework.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rcrau
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, accessibility-ready
*/

/*
 * theme.json carries the design system. Only rules that theme.json cannot
 * express belong here. Component CSS (before/after slider, gallery filters)
 * is enqueued separately and only on pages that contain those blocks.
 */

/* --------------------------------------------------------------------------
   1. Document
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Keep anchor targets clear of the sticky header. */
	scroll-padding-top: 6rem;
}

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

/*
 * Ink on brand, not white on brand.
 *
 * White on #F5811E is 2.61:1 and fails WCAG AA everywhere it is used. Ink
 * (#1D1C1E) on the same orange is 6.50:1. §3 fixes the palette, not the colour
 * of the text sitting on it, so every brand-ground surface below carries ink.
 */
::selection {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

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

/* Headings wrap on sensible break points; body copy avoids orphans. */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   1b. Links

   In-content links are ink with a SUBTLE underline; only real CTAs are brand
   orange. theme.json sets the colour; the underline weight and offset are set
   here because theme.json cannot express them.

   Buttons, navigation, the footer and any component that paints its own link
   colour opt out below — otherwise the orange leaks back into body copy.
   -------------------------------------------------------------------------- */

:where(.entry-content, .wp-block-post-content) a:where(:not(.wp-element-button):not([class*="wp-block-button"])) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: rgba(29, 28, 30, 0.35);
	transition: color var(--wp--custom--transition--base),
		text-decoration-color var(--wp--custom--transition--base);
}

:where(.entry-content, .wp-block-post-content) a:where(:not(.wp-element-button):not([class*="wp-block-button"])):hover {
	text-decoration-color: var(--wp--preset--color--brand);
}

/* Buttons are never underlined, whatever the link element says. */
.wp-element-button,
.wp-block-button__link {
	text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   2. Focus visibility (accessibility)
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   3. Site header
   -------------------------------------------------------------------------- */

/*
 * The frosted header.
 *
 * The blur is on a ::before layer, NOT on the header itself. An element with
 * backdrop-filter (like filter, transform or perspective) becomes the
 * containing block for any position:fixed descendant. Core's mobile navigation
 * overlay is position:fixed;inset:0, so with the filter on the header the
 * overlay sized itself to the header instead of the viewport — 84px tall, with
 * only "Home" visible and the other items clipped out of reach.
 *
 * The pseudo-element has no descendants, so it can carry the filter safely and
 * the appearance is unchanged.
 */
.rcr-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(29, 28, 30, 0.07);
}

.rcr-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(251, 249, 247, 0.9);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
}

/*
 * The approved design sizes the logo by HEIGHT — 40px, rising to 44px from the
 * small breakpoint (h-10 w-auto sm:h-11). The site-logo block sizes by width, so
 * height is pinned here and width left to follow the 250x90 aspect ratio.
 */
.rcr-site-header .wp-block-site-logo img {
	display: block;
	width: auto;
	height: 40px;
	max-width: none;
}

.rcr-site-footer .wp-block-site-logo img {
	display: block;
	width: auto;
	height: 40px;
	max-width: none;
}

@media (min-width: 640px) {
	.rcr-site-header .wp-block-site-logo img,
	.rcr-site-footer .wp-block-site-logo img {
		height: 44px;
	}
}

/* Navigation submenu — soften core's default hard-edged dropdown. */
.rcr-site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid rgba(29, 28, 30, 0.07);
	border-radius: var(--wp--custom--radius--lg);
	padding: 0.4rem;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--lifted);
	min-width: 17rem;
}

.rcr-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--md);
	padding: 0.6rem 0.9rem;
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.rcr-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--mist);
}

/*
 * Core collapses the navigation into its overlay below 600px. Nine top-level
 * items plus a logo and the quote button need roughly 1100px, so the overlay
 * is held open-able up to that width by re-applying core's own closed state.
 */
@media (min-width: 600px) and (max-width: 1099.98px) {
	.rcr-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

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

/*
 * The header quote button is desktop only.
 *
 * Below the nav's collapse point the header had a logo, a hamburger AND a
 * 180px button competing for 375px, and the button wrapped to two lines to fit.
 * On mobile the header is logo left, hamburger right; the quote CTA lives in the
 * overlay, where it is the last item and full width.
 *
 * The breakpoint is deliberately the same 1099.98px the overlay uses below, so
 * there is no intermediate width showing both a cramped button and a hamburger.
 * Change one and change the other.
 */
@media (max-width: 1099.98px) {
	.rcr-site-header .wp-block-buttons {
		display: none;
	}

	/*
	 * The wrapped button was the tallest thing in the row and so was setting the
	 * header's height. Removing it would have shrunk the header from 85px to 68
	 * and lifted the logo with it. This holds the row at the height the button
	 * used to give it, and align-items:center keeps the logo on the same line as
	 * before — same size, same position, one less element.
	 */
	.rcr-site-header .wp-block-group.is-layout-flex {
		min-height: 57px;
	}
}

/*
 * The hamburger glyph renders at 23x24, a pixel under the 24x24 minimum target
 * size. Rather than scale the icon, an invisible 44x44 pseudo-element extends
 * the hit area to the thumb-friendly size on top of it. The button keeps its
 * own box, so the header layout is unchanged.
 */
.rcr-site-header .wp-block-navigation__responsive-container-open {
	position: relative;
}

.rcr-site-header .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	margin-left: -22px;
}

/* Mobile overlay menu. */
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--custom--gutter);
	background-color: var(--wp--preset--color--cream);
}

.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Submenus inside the overlay.
 *
 * Core's overlay design deliberately flattens them: one rule in
 * navigation/style.min.css forces every submenu container open inside
 * .is-menu-open, and a sibling rule hides the chevron, because in core's model
 * there is then nothing left to expand. For a nine-item menu whose Services
 * entry holds seven more, that puts sixteen links on screen at once.
 *
 * The toggle button and its Interactivity bindings are intact underneath —
 * aria-expanded already flips on tap — so this only restores a presentation
 * that follows that state. Nothing here touches the block's openSubmenusOnClick
 * attribute, deliberately: setting it would turn the Services parent from
 * <a href="/services/"> into a <button> and remove the nav link to /services/,
 * the page carrying the only internal route to the 28 suburb pages (§9).
 *
 * Everything is scoped to .is-menu-open, so the desktop dropdown is untouched.
 */
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	height: 0;
	/* Core pads the overlay submenu 2rem left and right; that inset is what put
	   the child items on a different edge from their parents. */
	padding: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}

.rcr-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 {
	height: auto;
	overflow: visible;
	opacity: 1;
	visibility: visible;
}

/*
 * Flat and indented, not a floating card. The dropdown styling above is written
 * for the desktop popover; in the drawer it has to read as nested content, so
 * the border, shadow, radius and white ground all come off and an indent plus a
 * rule down the left carries the nesting instead.
 */
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	min-width: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.rcr-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 {
	margin-top: 0.35rem;
	border-left: 2px solid rgba(29, 28, 30, 0.12);
	padding: 0.15rem 0 0.15rem 0.9rem;
}

.rcr-site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	padding: 0.5rem 0;
	font-size: var(--wp--preset--font-size--base);
}

/*
 * The chevron. Core hides it in the overlay; it is the only affordance saying
 * Services opens rather than navigates, so it comes back and turns to show state.
 */
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	transition: transform var(--wp--custom--transition--base);
}

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

/*
 * One alignment for the whole drawer.
 *
 * justifyContent:"right" on the navigation block is a desktop header decision —
 * the nav sits at the right end of the header row — but core carries it into the
 * overlay, where it left the top-level items flush right at x=355 and the
 * submenu items ranged to the card edge at x=323: two alignments in one menu.
 * A drawer reads left-aligned, so the overlay opts out of the justification.
 */
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open {
	/*
	 * Core reads both of these in several rules to place the items. Setting the
	 * properties rather than out-specifying each rule means every dependent
	 * declaration follows, and it leaves the desktop values alone because the
	 * override only exists while .is-menu-open is on the element.
	 */
	--navigation-layout-align: flex-start;
	--navigation-layout-justification-setting: flex-start;
}

.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

/*
 * Core makes each item a column flex container in the overlay, so align-items
 * here is the HORIZONTAL axis — flex-start is what left-aligns the label.
 */
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	width: 100%;
}

/*
 * The submenu parent holds three children in a column: the label, the toggle,
 * and the list. Switching it to a row to sit the chevron beside the label would
 * also drag the list up alongside them, so the chevron is taken out of flow and
 * pinned to the right of the label line instead — label left, chevron right,
 * which is the usual drawer arrangement — and the list keeps its own row below.
 */
.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	position: relative;
	/* Without border-box the 44px reservation is added to the 100%, pushing the
	   item — and the chevron pinned to its right edge — off the screen. */
	box-sizing: border-box;
	align-items: flex-start;
	width: 100%;
	padding-right: 44px;
}

.rcr-site-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu
	> .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/*
 * The live chat sits above the overlay.
 *
 * <chat-widget> is a 0x0, position:static host whose visible bubble lives in an
 * open shadow root, so its stacking cannot be reached from this stylesheet —
 * raising the overlay's z-index does nothing, and the bubble and its greeting
 * both hit-test above the menu. Hiding the host takes the shadow content with
 * it. Core already puts .has-modal-open on <html> while the overlay is open, so
 * this reverses itself on close with no JavaScript and no contact with the
 * widget's own state.
 */
html.has-modal-open chat-widget {
	visibility: hidden;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Site footer
   -------------------------------------------------------------------------- */

.rcr-site-footer {
	border-top: 1px solid rgba(29, 28, 30, 0.09);
}

/*
 * Footer links are grey, not orange, and never underlined by default — only the
 * hover state brings in brand colour. The global ink-link rule is scoped to
 * post content, but this keeps the footer explicit so it cannot drift again.
 */
.rcr-site-footer a {
	color: var(--wp--preset--color--grey);
	text-decoration: none;
}

.rcr-site-footer a:hover,
.rcr-site-footer a:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* The phone number is the one emphasised item. */
.rcr-site-footer .has-large-font-size a {
	color: var(--wp--preset--color--ink);
}

/* Social icons row. */
/*
 * Footer socials — core/social-links, restyled to the footer's own treatment.
 *
 * These were three inline SVGs in a core/html block, which meant raw markup in
 * the Site Editor and no way for the client to change a URL. The core block
 * renders real icons in the editor and gives each service a URL field.
 *
 * Core ships coloured pill backgrounds; everything below returns them to the
 * outlined circles the footer already used, so the front end is unchanged.
 */
.wp-block-social-links.rcr-socials {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

/*
 * Core paints background and colour on the <li> and lets the anchor inherit
 * through currentColor, so both have to be reset here or the icons stay white
 * on the footer's light ground.
 */
.wp-block-social-links.rcr-socials .wp-social-link {
	margin: 0;
	padding: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
}

.wp-block-social-links.rcr-socials .wp-social-link:hover {
	color: var(--wp--preset--color--brand);
}

.rcr-socials .wp-block-social-link-anchor {
	display: grid;
	place-items: center;
	/* border-box so the 1px border sits inside the 2.25rem circle. */
	box-sizing: border-box;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	line-height: 0;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	transition: color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.rcr-socials .wp-block-social-link-anchor:hover,
.rcr-socials .wp-block-social-link-anchor:focus-visible {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.rcr-socials .wp-block-social-link-anchor svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* Bottom bar: copyright left, legal links right. */
.wp-block-group.rcr-footer-bottom {
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.rcr-footer-bottom p {
	margin: 0;
}

.wp-block-group.rcr-footer-legal {
	gap: 1.25rem;
}

/* Footer navigation lists render as plain stacked links, not bulleted lists. */
.rcr-link-list {
	list-style: none;
}

/* The 28-suburb link list — see CLAUDE.md section 9. Body copy, not a widget. */
.rcr-area-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: var(--wp--preset--spacing--40);
}

.rcr-area-links li {
	break-inside: avoid;
	margin-block-end: 0.55rem;
}

@media (min-width: 600px) {
	.rcr-area-links ul {
		columns: 3;
	}
}

@media (min-width: 900px) {
	.rcr-area-links ul {
		columns: 4;
	}
}

/* --------------------------------------------------------------------------
   5. Utilities used by patterns
   -------------------------------------------------------------------------- */

/*
 * Eyebrow label: small orange caps with a leading rule.
 *
 * Block-level flex, not inline-flex. An inline-level box ignores text-align
 * set on itself — and WordPress puts its alignment class on the element, not
 * the parent — so a centred eyebrow stayed left. It also sat on a line box
 * spanning the whole band, so in a constrained section it started at the band
 * edge instead of lining up with the heading below it. As a block it picks up
 * the same contentSize and auto margins core gives every other child, and
 * justify-content places the rule and label inside that box. This is what the
 * export does: it wraps the label in a flex container to align it.
 */
.rcr-eyebrow {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-block-end: 0.75rem;
}

.rcr-eyebrow::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1px;
	background-color: currentColor;
}

.rcr-eyebrow.has-text-align-center {
	justify-content: center;
}

.rcr-eyebrow.has-text-align-right {
	justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Reviews badge — the 228 five-star Google trust pill.

   Three variants, matching the approved design: light (cream and white
   backgrounds), dark (the ink trust strip and footer) and solid (brand orange).
   The Google mark and the star row are decorative and aria-hidden; the
   accessible text is the "5.0" and "228 Google reviews" paragraphs.
   -------------------------------------------------------------------------- */

.wp-block-group.rcr-reviews-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--subtle);
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--ink);
}

/*
 * Decorative marks are drawn here, not stored in the page.
 *
 * These were inline SVG and a styled span inside core/html blocks. A core/html
 * block is edited through a plain textarea, so in Gutenberg the client saw the
 * raw markup as text instead of the icon — 139 boxes of source across 35 pages.
 * As pseudo-elements the icons never enter block content at all: the editor
 * shows the badge, and only the real copy stays editable.
 *
 * mask, not background-image, so one shape serves every colour variant and
 * currentColor keeps working. Same technique as the before/after grip.
 */
.rcr-reviews-badge::before,
.rcr-reviews-badge__g {
	content: "G";
	display: grid;
	place-items: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--subtle);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}

.rcr-reviews-badge__body {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.rcr-reviews-badge__row {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.rcr-reviews-badge__row::before {
	content: "";
	flex: none;
	order: -1;
	width: 5.5rem;
	height: 1rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20' fill='%23000'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(22.5,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(45,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(67.5,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(90,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20' fill='%23000'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(22.5,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(45,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(67.5,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3Cg transform='translate(90,0)'%3E%3Cpath d='M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.1l-4.95 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}

.rcr-reviews-badge__stars svg {
	display: block;
	width: 1rem;
	height: 1rem;
	fill: var(--wp--preset--color--brand);
}

.rcr-reviews-badge__score {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

.rcr-reviews-badge__count {
	margin: 0.25rem 0 0;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--grey);
}

/* Dark variant — sits on the ink trust strip and in the footer. */
.wp-block-group.rcr-reviews-badge--dark {
	border-color: rgba(255, 255, 255, 0.15);
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--wp--preset--color--cream);
}

.rcr-reviews-badge--dark .rcr-reviews-badge__count {
	color: rgba(251, 249, 247, 0.7);
}

/*
 * 11px is legible on a desktop monitor and genuinely hard work on a phone held
 * at arm's length. There is no WCAG minimum for font size, so nothing flagged
 * it; it is a readability call. Secondary labels stay secondary — this is one
 * pixel, not a promotion.
 */
@media (max-width: 781px) {
	.rcr-reviews-badge__count {
		font-size: 0.75rem;
	}
}

/* Solid variant — brand orange, used above the reviews section heading. */
.wp-block-group.rcr-reviews-badge--solid {
	border-color: transparent;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.rcr-reviews-badge--solid .rcr-reviews-badge__stars svg {
	fill: var(--wp--preset--color--ink);
}

/*
 * The five stars are a CSS mask tinted with background-color, and that tint was
 * brand orange — on the solid badge's brand orange ground they were painted
 * invisibly, 1.0:1. They take ink here for the same 6.50:1 as the score beside
 * them. The default badge sits on white and keeps its orange stars.
 */
.rcr-reviews-badge--solid .rcr-reviews-badge__row::before {
	background-color: var(--wp--preset--color--ink);
}

/*
 * The count is the quiet half of the badge, so it was white at 80% opacity —
 * 2.17:1 on brand orange. Ink at 82% keeps it visibly secondary to the score
 * beside it and still clears AA. Measured, not assumed: 4.86:1.
 */
.rcr-reviews-badge--solid .rcr-reviews-badge__count {
	color: rgba(29, 28, 30, 0.82);
}

/* --------------------------------------------------------------------------
   Primary CTA arrow.

   The approved design's quote button always carries a trailing arrow. Applied
   to solid buttons only — outlined ones stay plain.
   -------------------------------------------------------------------------- */

.wp-block-button:not(.is-style-outline) > .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 0.5em;
	vertical-align: -0.08em;
	background-color: currentColor;
	-webkit-mask: var(--rcr-arrow) center / contain no-repeat;
	mask: var(--rcr-arrow) center / contain no-repeat;
	transition: transform var(--wp--custom--transition--base);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after {
	transform: translateX(2px);
}

:root {
	--rcr-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* The larger CTA size used in heroes and the showcase. */
.rcr-btn-lg > .wp-block-button__link {
	padding: 1rem 2rem;
	font-size: var(--wp--preset--font-size--base);
}

/* --------------------------------------------------------------------------
   Hero — sizing, the highlighted phrase, and the floating stat card.
   -------------------------------------------------------------------------- */

.rcr-hero__title {
	font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
	line-height: 1.03;
	letter-spacing: -0.03em;
	margin: 0;
}

/*
 * The highlighted phrase in the hero headline: brand orange with a soft
 * gradient rule beneath it, as the design has it. <mark> is used because it is
 * an inline tag the block editor preserves; the default yellow ground is reset.
 */
.rcr-hl {
	position: relative;
	background: none;
	color: var(--wp--preset--color--brand);
	white-space: nowrap;
}

.rcr-hl::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.06em;
	height: 0.09em;
	border-radius: var(--wp--custom--radius--pill);
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--brand),
		var(--wp--preset--color--brand-light)
	);
}

/* --------------------------------------------------------------------------
   Trust band — pill chips over a three-column stat row, on ink.
   -------------------------------------------------------------------------- */

.wp-block-group.rcr-trust__chips {
	gap: 0.75rem;
	justify-content: center;
	padding-bottom: var(--wp--preset--spacing--40);
}

.rcr-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--wp--custom--radius--pill);
	background-color: rgba(255, 255, 255, 0.05);
	padding: 0.5rem 1rem;
	color: rgba(251, 249, 247, 0.8);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Small orange dot marker; the award chip gets a star instead. */
.rcr-chip::before {
	content: "";
	flex: none;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand);
}

.rcr-chip--star::before {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 0;
	background-color: var(--wp--preset--color--brand-light);
	-webkit-mask: var(--rcr-star) center / contain no-repeat;
	mask: var(--rcr-star) center / contain no-repeat;
}

:root {
	--rcr-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z'/%3E%3C/svg%3E");
}

.rcr-trust__rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin: 0;
	width: 100%;
}

.wp-block-group.rcr-trust__stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	padding-top: var(--wp--preset--spacing--40);
}

@media (min-width: 768px) {
	.wp-block-group.rcr-trust__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rcr-trust__figure {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	font-weight: 900;
	line-height: 1.1;
}

.rcr-trust__label {
	margin: 0.35rem 0 0;
	color: rgba(251, 249, 247, 0.6);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Before / after showcase — the supporting stat beside the slider.
   -------------------------------------------------------------------------- */

.rcr-showcase__figure {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 900;
	line-height: 1.1;
}

.rcr-showcase__label {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--grey);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   "Resurfacing across Sydney" — map left, copy right.
   -------------------------------------------------------------------------- */

.rcr-areas__map {
	overflow: hidden;
	margin: 0;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--xxl);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
}

.rcr-areas__map img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* The design pins the hero photograph to a fixed height rather than a ratio. */
.rcr-hero__image {
	overflow: hidden;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--xxl);
	background-color: var(--wp--preset--color--mist);
	box-shadow: 0 40px 80px -40px rgba(29, 28, 30, 0.45);
	margin: 0;
}

.rcr-hero__image img {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
}

@media (min-width: 640px) {
	.rcr-hero__image img {
		height: 520px;
	}
}

.rcr-hero__lead {
	max-width: 36rem;
}

/* Check items sitting below the hero CTAs. */
.rcr-hero__checks {
	gap: 0.5rem 1.5rem;
}

.rcr-check {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	margin: 0;
}

/*
 * A pale brand circle with a brand tick inside it. The tick is an inline SVG
 * carried as a data URI — no icon font and no extra request (§14). Drawn as a
 * background image rather than a mask so the circle behind it stays visible.
 */
.rcr-check::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: rgba(245, 129, 30, 0.15);
	background-image: var(--rcr-tick);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.7rem 0.7rem;
}

:root {
	--rcr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5811e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Floating "projects completed" card, overlapping the photograph. */
.rcr-hero__media {
	position: relative;
}

.wp-block-group.rcr-hero__stat {
	display: none;
	position: absolute;
	left: -1rem;
	bottom: -1.5rem;
	gap: 0.75rem;
	align-items: center;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: 1rem;
}

@media (min-width: 640px) {
	.wp-block-group.rcr-hero__stat {
		display: flex;
	}
}

.rcr-hero__stat::before {
	content: "";
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--md);
	/* The tile tint sits behind the masked tick, so the tick is painted by a
	   second layer rather than the element background. */
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 1.4rem 1.4rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 1.4rem 1.4rem no-repeat;
}

.rcr-hero__stat-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: rgba(245, 129, 30, 0.1);
	color: var(--wp--preset--color--brand);
}

.rcr-hero__stat-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.rcr-hero__stat-text {
	line-height: 1.15;
}

.rcr-hero__stat-figure {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.rcr-hero__stat-label {
	margin: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--grey);
}

/* --------------------------------------------------------------------------
   Service cards.

   Explicit 3 / 2 / 1 columns at the design's breakpoints, not auto-fill. Core's
   grid layout emits a fixed three-column track, which is right at desktop; the
   two smaller steps are overridden here.
   -------------------------------------------------------------------------- */

.wp-block-group.rcr-service-grid {
	grid-template-columns: 1fr;
	counter-reset: rcr-service;
}

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

@media (min-width: 1024px) {
	.wp-block-group.rcr-service-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rcr-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--xxl);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--subtle);
	transition:
		box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.rcr-service-card--compact {
	border-radius: var(--wp--custom--radius--xl);
}

.rcr-service-card:hover {
	box-shadow: var(--wp--preset--shadow--lifted);
}

.rcr-service-card--compact:hover {
	transform: translateY(-4px);
}

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

.rcr-service-card .rcr-service-card__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--mist);
}

.rcr-service-card .rcr-service-card__media img {
	display: block;
	width: 100%;
	height: 13rem;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.rcr-service-card--compact .rcr-service-card__media img {
	height: auto;
	aspect-ratio: 16 / 10;
}

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

/*
 * Gradient scrim and the numbered badge. Both are drawn rather than marked up,
 * so the numbering follows document order and survives reordering in the editor.
 */
.rcr-service-card:not(.rcr-service-card--compact) .rcr-service-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(29, 28, 30, 0.6), transparent 55%);
	pointer-events: none;
}

/* Same rule as the step cards: increment on the element, print on the pseudo. */
.rcr-service-card:not(.rcr-service-card--compact) {
	counter-increment: rcr-service 1;
}

.rcr-service-card:not(.rcr-service-card--compact) .rcr-service-card__media::after {
	content: "0" counter(rcr-service);
	position: absolute;
	left: 1rem;
	bottom: 0.75rem;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Body ----------------------------------------------------------------- */

.rcr-service-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
}

/*
 * Card titles are a flat 18px at every width, as the design has them. Set here
 * rather than on the block, because theme.json's fluid typography rewrites any
 * block-level fontSize into a clamp() that falls to 14px on small screens.
 */
.rcr-service-card__body h3 {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.rcr-service-card__body > * {
	margin: 0;
}

.rcr-service-card__pills {
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.rcr-pill {
	margin: 0;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--mist);
	padding: 0.25rem 0.75rem;
	color: rgba(29, 28, 30, 0.6);
	font-weight: 500;
}

/*
 * The stretched link. One real anchor per card, covering the whole card, so the
 * heading can stay plain text while the card remains clickable and keyboard
 * reachable. The focus ring is moved onto the card for the same reason.
 */
.rcr-service-card__more {
	margin-top: auto;
	padding-top: 0.75rem;
}

.rcr-service-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
}

.rcr-service-card__more a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.rcr-service-card__more a::after {
	content: "→";
	transition: transform var(--wp--custom--transition--base);
}

.rcr-service-card:hover .rcr-service-card__more a::after {
	transform: translateX(3px);
}

.rcr-service-card:has(.rcr-service-card__more a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

.rcr-service-card__more a:focus-visible {
	outline: none;
}

/*
 * Reset inherited link styling inside cards. Headings here are plain text, and
 * any stray anchor should not pick up the global underline treatment.
 */
.rcr-service-card h3 a,
.rcr-service-card h2 a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Interior page sections — story, stats, numbered cards, photo pairs.
   Shared by About and reused by the other interior pages.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Page hero — the single centred opening block on every interior page.
   There is no separate page-title band; this carries the page's only H1.
   -------------------------------------------------------------------------- */

.rcr-page-hero .rcr-eyebrow {
	justify-content: center;
	margin-inline: auto;
}

.rcr-page-hero__title {
	font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}

.rcr-page-hero__intro {
	max-width: 42rem;
	margin-inline: auto;
}

/* The lead paragraph continues the template's mist title band. */
.rcr-page-lead-band {
	margin-top: 0;
}

/* Dynamic-heading templates (blog post, archive, search) — centred, no band. */
.rcr-dynamic-hero {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Video facade — poster + play button, iframe swapped in on click.
   The 16:9 box is reserved up front so the swap causes no layout shift.
   -------------------------------------------------------------------------- */

.rcr-video {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--xxl);
	background-color: var(--wp--preset--color--mist);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.rcr-video__poster,
.rcr-video__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.rcr-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand);
	/* Non-text contrast (1.4.11) applies to the glyph too: white is 2.61, ink 6.50. */
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--lifted);
	cursor: pointer;
	transition: transform var(--wp--custom--transition--base),
		background-color var(--wp--custom--transition--base);
}

.rcr-video__play svg {
	width: 2rem;
	height: 2rem;
	margin-left: 0.15rem;
}

.rcr-video__play:hover {
	transform: translate(-50%, -50%) scale(1.06);
	background-color: var(--wp--preset--color--brand-dark);
}

.rcr-video.is-playing .rcr-video__poster,
.rcr-video.is-playing .rcr-video__play {
	display: none;
}

/* --------------------------------------------------------------------------
   HighLevel lead form — the iframe reserves its own height, so nothing shifts.
   -------------------------------------------------------------------------- */

.rcr-leadform {
	width: 100%;
}

.rcr-leadform iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
}

/* --------------------------------------------------------------------------
   CTA band — centred on ink, per the approved design.
   -------------------------------------------------------------------------- */

.rcr-cta-band > * {
	margin-inline: auto;
}

/* Same inline-level problem as the eyebrow: a group gets no alignment class at
   all, and auto margins cannot centre an inline-flex box. The modifier says so
   explicitly rather than inferring it from whatever the badge happens to sit in. */
.wp-block-group.rcr-reviews-badge--center {
	display: flex;
	width: fit-content;
	margin-inline: auto;
}

.rcr-cta-band__title {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	max-width: 42rem;
}

.rcr-cta-band__intro {
	max-width: 36rem;
}

/* Outline button on a dark ground: light border and text, not ink. */
.rcr-btn-on-dark .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: var(--wp--preset--color--cream);
	box-shadow: none;
}

.rcr-btn-on-dark .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--white);
}

.rcr-page-lead {
	max-width: 42rem;
	margin-inline: auto;
}

.rcr-section-heading--center {
	text-align: center;
	margin-inline: auto;
}

.rcr-story__photo {
	overflow: hidden;
	margin: 0;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--xxl);
	background-color: var(--wp--preset--color--mist);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.rcr-story__photo img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

@media (min-width: 640px) {
	.rcr-story__photo img {
		height: 520px;
	}
}

.wp-block-group.rcr-story__actions {
	gap: 1rem;
}

/* Stats on the ink band ------------------------------------------------- */

.rcr-trust-band .rcr-stat__figure {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1.1;
}

.rcr-trust-band .rcr-stat__label {
	margin: 0.25rem 0 0;
	color: rgba(251, 249, 247, 0.6);
	font-size: 0.875rem;
}

.wp-block-group.rcr-stat-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

@media (min-width: 768px) {
	.wp-block-group.rcr-stat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Achiever Award callout ------------------------------------------------ */

.wp-block-group.rcr-award {
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--wp--custom--radius--xl);
	background-color: rgba(255, 255, 255, 0.05);
	padding: 1.25rem 1.5rem;
}

@media (min-width: 640px) {
	.wp-block-group.rcr-award {
		flex-wrap: nowrap;
		justify-content: flex-start;
		text-align: left;
	}
}

.rcr-award__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--wp--custom--radius--xl);
	background-color: rgba(245, 129, 30, 0.2);
	color: var(--wp--preset--color--brand-light);
}

.rcr-award__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.rcr-award__title {
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-weight: 700;
}

.rcr-award__body {
	margin: 0.125rem 0 0;
	color: rgba(251, 249, 247, 0.6);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Numbered cards — values and process steps ----------------------------- */

.wp-block-group.rcr-num-grid {
	grid-template-columns: 1fr;
	gap: 1.5rem;
	counter-reset: rcr-num;
}

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

@media (min-width: 1024px) {
	.wp-block-group.rcr-num-grid--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.wp-block-group.rcr-num-grid--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.rcr-num-card,
.rcr-step-card {
	display: flex;
	gap: 1.25rem;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--xl);
	background-color: var(--wp--preset--color--white);
	padding: 1.75rem;
}

.rcr-step-card {
	flex-direction: column;
	gap: 0;
}

/*
 * The 01/02/03 tile, drawn by counter so reordering in the editor is safe.
 *
 * The increment is on the card, NOT on the ::before that prints it. With both
 * on the same pseudo-element the counter does not accumulate across siblings
 * and every card renders "01".
 */
.rcr-num-card,
.rcr-step-card {
	counter-increment: rcr-num 1;
}

.rcr-num-card::before,
.rcr-step-card::before {
	content: counter(rcr-num, decimal-leading-zero);
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: rgba(245, 129, 30, 0.1);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1;
}

.rcr-step-card::before {
	margin-bottom: 1.25rem;
}

.rcr-num-card__text > *,
.rcr-step-card__text > * {
	margin: 0;
}

.rcr-num-card__text h3,
.rcr-step-card__text h3 {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 0.5rem;
}

/*
 * The closing note under the process cards. In the export this sits inside the
 * section's own layout — centred, with a defined top margin and gap — rather
 * than floating loose beneath the grid.
 */
.wp-block-group.rcr-process__close {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 38.75rem;
	margin-inline: auto;
	margin-top: 2.5rem;
	text-align: center;
}

.rcr-process__close > * {
	margin: 0;
}

/* Cards: shared surface treatment for teasers, gallery items and stat tiles. */
.rcr-card {
	border: 1px solid rgba(29, 28, 30, 0.07);
	border-radius: var(--wp--custom--radius--xl);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}

.rcr-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Constrain long-form body copy to a comfortable measure. */
.rcr-prose {
	max-width: var(--wp--custom--max-width--prose);
}

/*
 * Third-party embed placeholders. Marked clearly so an unreplaced placeholder
 * is impossible to miss in review. Each is swapped for the real LeadConnector
 * embed once the codes are supplied.
 */
.rcr-embed-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px dashed rgba(245, 129, 30, 0.4);
	border-radius: var(--wp--custom--radius--xl);
	background-color: rgba(245, 129, 30, 0.04);
}

/*
 * Gallery filter pills. The pills are ordinary links so they stay keyboard
 * accessible; gallery-filter.js intercepts them and adds the button semantics.
 * With JavaScript off, every card simply remains visible.
 */
.rcr-gallery__filters p {
	margin: 0;
}

/*
 * The pills are stored as ordinary paragraph links so the labels stay editable
 * in Gutenberg (rule 1); gallery-filter.js upgrades each one to a real <button>
 * on the front end so Space activates it. Both selectors are styled because the
 * anchor is what ships in the HTML and the button is what the visitor gets.
 * font: inherit is what stops the button falling back to the UA control font.
 */
.rcr-gallery__filters a,
.rcr-gallery__filters button {
	display: inline-block;
	font: inherit;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(29, 28, 30, 0.12);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition--base),
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.rcr-gallery__filters a:hover,
.rcr-gallery__filters button:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.rcr-gallery__filters .is-active {
	border-color: transparent;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

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

/*
 * The empty-state line is hidden by default and only revealed by
 * gallery-filter.js when a filter matches nothing. With JavaScript off it
 * never appears, because no filtering ever happens.
 */
.rcr-gallery__empty {
	display: none;
}

.rcr-gallery__empty.is-visible {
	display: block;
}

/* FAQ accordion items built on core/details. */
.rcr-faq-item {
	border: 1px solid rgba(29, 28, 30, 0.09);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--white);
}

.rcr-faq-item > summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.rcr-faq-item > summary::-webkit-details-marker {
	display: none;
}

.rcr-faq-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: rotate(45deg) translate(-0.15rem, -0.15rem);
	transition: transform var(--wp--custom--transition--base);
}

.rcr-faq-item[open] > summary::after {
	transform: rotate(225deg) translate(-0.15rem, -0.15rem);
}

/* --------------------------------------------------------------------------
   6. Motion preferences
   -------------------------------------------------------------------------- */

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

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

	.rcr-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Section banding
   The shades are assigned by inc/sections.php; these are the two grounds and
   the rule that makes adjacent bands share an edge. The doubled class beats
   the block-gap margin core prints on .wp-site-blocks > * and on the layout
   container, whichever of the two stylesheets happens to load last.
   --------------------------------------------------------------------------- */

.rcr-band.rcr-band {
	margin-block: 0;
}

.rcr-band--white {
	background-color: var(--wp--preset--color--white);
}

.rcr-band--mist {
	background-color: var(--wp--preset--color--mist);
}

/* Everything at the top level of the page is a band: the header, the content,
   the CTA section and the footer all butt up against one another. The body
   prefix keeps this above the block-gap rule core prints for .wp-site-blocks. */
body .wp-site-blocks > * {
	margin-block: 0;
}

/* HighLevel reviews widget. The embed is not restyled — the wrapper only holds
   the reserved height until review-widget.js resizes the iframe. */
.rcr-reviews-embed {
	margin-inline: auto;
	max-width: 1100px;
	/* Measured settled heights of the widget: 366px at 375, 343px at 1280. The
	   wrapper holds the space so nothing below it moves when review-widget.js
	   resizes the iframe. */
	min-height: 366px;
}

@media (min-width: 782px) {
	.rcr-reviews-embed {
		min-height: 343px;
	}
}

.rcr-reviews-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   Suburb pages — one layout, 28 pages. See _reference/batch4/lib-location.php.
   -------------------------------------------------------------------------- */

.rcr-loc-title {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0;
}

/* The sidebar tracks the body copy on desktop and stacks under it on mobile. */
.rcr-loc-side {
	align-self: start;
	position: sticky;
	top: 6rem;
}

@media (max-width: 781px) {
	.rcr-loc-side {
		position: static;
	}
}

.rcr-card-panel {
	border: 1px solid rgba(29, 28, 30, 0.1);
}

.rcr-card-panel:not(.has-background) {
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--subtle);
}

.rcr-card-panel h3 {
	margin: 0;
}

/* Suburb links read as a plain list, not bulleted navigation. */
.rcr-loc-nearby {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.rcr-loc-nearby a {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--grey);
	text-decoration: none;
}

.rcr-loc-nearby a:hover,
.rcr-loc-nearby a:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/* "View all service areas" — a directional link, so it carries the arrow. */
.rcr-loc-more {
	margin: 0;
}

.rcr-loc-more a {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
}

.rcr-loc-more a::after {
	content: " 92";
}

.rcr-loc-more a:hover,
.rcr-loc-more a:focus-visible {
	text-decoration: underline;
}

/* The hero photograph fills its column at a consistent crop. */
.rcr-loc-hero .wp-block-image img,
.rcr-loc-work .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.rcr-loc-work .wp-block-image img {
	aspect-ratio: 3 / 2;
}

/*
 * The twelve colour names are the crawlable content of /colours/ (§12), so
 * they are a real list rather than an image.
 *
 * Wrapping flex, not a grid: a grid stretched the last row's two names to a
 * full column each and left them hanging under the left edge. Flex sizes each
 * pill to its own name and centres every row, including a short last one.
 */
.rcr-colour-names {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	/* 38rem breaks the twelve names into three even rows of four rather
	   than leaving one name stranded on a line of its own. */
	max-width: 38rem;
}

.rcr-colour-names li {
	flex: 0 0 auto;
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	padding: 0.7rem 1.4rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.2;
}

/* The whole block reads as one centred unit: heading, names, then the note. */
.rcr-colour-block {
	text-align: center;
}

.rcr-colour-block > h3 {
	margin: 0 0 1.75rem;
}

.rcr-colour-block > p {
	max-width: 46rem;
	margin: 2rem auto 0;
}

/* "Filter by technique" — labels the pill row for anyone scanning the page. */
.rcr-gallery__filters-label {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--grey);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Contact — the phone and email lines beside the form. */
.rcr-contact-lines {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.7;
}

/*
 * Tap-to-call targets.
 *
 * The number renders as an inline link about 22px tall — under the 24px minimum,
 * and small for the single most valuable action on a phone. WCAG exempts inline
 * links in prose, which is why the audit passed over it; the exemption is not a
 * reason to leave the primary conversion action hard to hit.
 *
 * An invisible 44px band centred on the link does it, exactly as the hamburger
 * does, with negative margins rather than a transform so it cannot become the
 * containing block for a position:fixed descendant.
 */
a[href^="tel:"] {
	position: relative;
}

a[href^="tel:"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 44px;
	margin-top: -22px;
}

/*
 * That band is 11px taller than the link on each side, and the email sits only
 * 7px below it, so without this the phone's target would cover the top of the
 * email and swallow taps meant for it. Opening the leading gives each its own
 * space. Mobile only — at desktop the pointer is precise and the spacing is a
 * design decision that has been signed off.
 */
@media (max-width: 781px) {
	.rcr-contact-lines,
	.rcr-contact-side p:has(a[href^="tel:"]),
	p:has(> a[href^="tel:"]) {
		line-height: 2.7;
	}
}

/* The two cards sit against the middle of the form rather than stacking at the
   top of a column twice their height. Stacked on mobile this has no effect. */
.rcr-contact-side {
	align-self: center;
}

/*
 * On a phone, the phone number goes above the form.
 *
 * Side by side at desktop the two columns share a top edge, so the number is
 * visible next to the form. Once core stacks them the sidebar lands underneath,
 * putting the number roughly 1,150px below the top of a 1,031px form iframe —
 * so the one page whose job is getting someone to call buried the tap-to-call
 * behind a full screen of form. §12 asks for it above the form, and mobile is
 * the device where that matters.
 *
 * 781px is core's own stacking breakpoint (columns/style.min.css), so the
 * reorder switches on exactly when the layout stops being side by side. Nothing
 * changes at desktop: order has no effect while the columns are in one row in
 * source order.
 */
@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column.rcr-contact-side {
		order: -1;
	}
}

/* Reviews-page trust figures. */
.rcr-stat {
	text-align: center;
}

.rcr-stat__figure {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
}

.rcr-stat__label {
	margin: 0.4rem 0 0;
	color: var(--wp--preset--color--grey);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   The markup is Yoast's, rewritten into <details> by inc/blocks.php. Answers
   are in the HTML on load; <details> collapses them without JavaScript and
   handles keyboard operation and expanded state itself.
   -------------------------------------------------------------------------- */

.rcr-faq {
	display: grid;
	gap: 0.75rem;
}

.rcr-faq__item {
	border: 1px solid rgba(29, 28, 30, 0.1);
	border-radius: var(--wp--custom--radius--lg, 14px);
	background-color: var(--wp--preset--color--white);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.rcr-faq__item[open] {
	border-color: rgba(245, 129, 30, 0.35);
}

.rcr-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	cursor: pointer;
	list-style: none;
}

/* Safari still paints the default triangle without this. */
.rcr-faq__q::-webkit-details-marker {
	display: none;
}

.rcr-faq__q:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: -2px;
}

.rcr-faq__q .schema-faq-question {
	flex: 1;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

/* The chevron is drawn, not an icon font — zero requests, and it rotates. */
.rcr-faq__q::after {
	content: "";
	flex: none;
	width: 0.65rem;
	height: 0.65rem;
	margin-top: 0.4rem;
	border-right: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.rcr-faq__item[open] .rcr-faq__q::after {
	transform: rotate(-135deg);
	margin-top: 0.7rem;
}

.rcr-faq__a {
	padding: 0 1.35rem 1.35rem;
}

.rcr-faq__a .schema-faq-answer {
	margin: 0;
	max-width: 60ch;
	color: var(--wp--preset--color--grey);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
	.rcr-faq__item,
	.rcr-faq__q::after {
		transition: none;
	}
}

/* Step-card icon: sits opposite the counter badge on the top row. */
.rcr-step-card {
	position: relative;
}

.rcr-step-card__icon {
	position: absolute;
	top: 1.75rem;
	right: 1.75rem;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--wp--preset--color--grey-light);
}

.rcr-step-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Keep the heading clear of the icon on the narrowest cards. */
.rcr-step-card__text h3 {
	padding-right: 0.5rem;
}

/* The Achiever Award badge sits at its natural size, not stretched to the column. */
.rcr-award-badge .wp-block-image {
	margin: 0;
}

.rcr-award-badge .wp-block-image img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
}

/* Service-page detail cards — the short sections read as a set. Heading and
   body are centred inside each card, and the cards sit level with each other. */
/*
 * Detail cards.
 *
 * The copy was centred, which is hard to read at paragraph length and worse as
 * bullets — a centred list has no common left edge for the eye to return to.
 * Body copy and lists are left-aligned; the section heading above the grid
 * stays centred, as the export has it.
 */
.rcr-detail-grid .rcr-card-panel {
	position: relative;
	text-align: left;
	padding-top: var(--wp--preset--spacing--50);
}

/*
 * The accent is the eyebrow's own mark — a short rule in brand orange — rather
 * than a new device. A numbered badge was the other candidate and is wrong
 * here: these are points worth knowing, not an ordered sequence, and numbering
 * them would promise an order the copy does not have.
 */
.rcr-detail-grid .rcr-card-panel::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--40);
	left: var(--wp--preset--spacing--40);
	width: 1.5rem;
	height: 2px;
	background-color: var(--wp--preset--color--brand);
}

.rcr-detail-grid .rcr-card-panel h2,
.rcr-detail-grid .rcr-card-panel h3 {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Detail lists
   -------------------------------------------------------------------------- */

/*
 * The client's paragraphs, split at their own sentence boundaries into points.
 * The marker is drawn rather than inherited: a default disc sits too tight to
 * the text, cannot be coloured without ::marker support, and reads as browser
 * furniture next to the rest of the page.
 */
.rcr-detail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.rcr-detail-list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--wp--preset--color--grey);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
}

.rcr-detail-list li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand);
}

/* A lead-in paragraph sits above its list and reads as body copy, not a point. */
.rcr-detail-grid .rcr-card-panel p {
	color: var(--wp--preset--color--grey);
	line-height: 1.7;
}

.rcr-detail-grid .rcr-card-panel p {
	margin: 0 auto;
	max-width: 40ch;
}

/* Process step icons. Same reasoning as the badge: drawn, never stored. */
.rcr-step-card::after {
	content: "";
	position: absolute;
	top: 1.75rem;
	right: 1.75rem;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--grey-light);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.rcr-step-card--wash::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s5 5.5 5 9a5 5 0 0 1-10 0c0-3.5 5-9 5-9Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s5 5.5 5 9a5 5 0 0 1-10 0c0-3.5 5-9 5-9Z'/%3E%3C/svg%3E");
}

.rcr-step-card--mask::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.4-2.9 8.3-7 9.5C7.9 19.3 5 15.4 5 11V6l7-3Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.4-2.9 8.3-7 9.5C7.9 19.3 5 15.4 5 11V6l7-3Z'/%3E%3C/svg%3E");
}

.rcr-step-card--crack::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 9 4l3 6 2-3 6 13'/%3E%3Cpath d='M9 4l1.5 7L9 14l2 3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 9 4l3 6 2-3 6 13'/%3E%3Cpath d='M9 4l1.5 7L9 14l2 3'/%3E%3C/svg%3E");
}

.rcr-step-card--spray::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h7l4-3v9l-4-3H4z'/%3E%3Cpath d='M18 7v10M21 5v14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h7l4-3v9l-4-3H4z'/%3E%3Cpath d='M18 7v10M21 5v14'/%3E%3C/svg%3E");
}

.rcr-step-card--seal::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c2.7 3.2 4.5 5.6 4.5 7.8a4.5 4.5 0 0 1-9 0c0-2.2 1.8-4.6 4.5-7.8Z'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c2.7 3.2 4.5 5.6 4.5 7.8a4.5 4.5 0 0 1-9 0c0-2.2 1.8-4.6 4.5-7.8Z'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");
}

/*
 * The quote CTA inside the mobile menu.
 *
 * The header's own button sits beside the navigation, so the full-screen
 * overlay covers it and a phone visitor loses the primary action the moment
 * they open the menu. This duplicate lives in the navigation itself and is
 * revealed only while the overlay is open, so the desktop header is unchanged
 * and the button is never shown twice.
 */
.rcr-site-header .wp-block-navigation-item.rcr-nav-cta {
	display: none;
}

.rcr-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.rcr-nav-cta {
	display: block;
	margin-top: 0.5rem;
}

.rcr-site-header .is-menu-open .rcr-nav-cta .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand);
	padding: 0.85rem 1.6rem;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
}

.rcr-site-header .is-menu-open .rcr-nav-cta .wp-block-navigation-item__content:hover,
.rcr-site-header .is-menu-open .rcr-nav-cta .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--ink);
}