/* =====================================================================
   StackPress — global.css
   Design tokens + base styles. Loaded on every page (after Bootstrap).
   Add your project's reusable components and tokens here. The few rules
   below only support the bundled JS behaviours (nav toggle, scroll
   reveal, search overlay) — delete or restyle freely.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Design Tokens — define your palette / type scale here.
   --------------------------------------------------------------- */
:root {
	--primary-color: #f00004;   /* Roman Scaffolding brand red */
	--primary-hover: #c70003;
	--dark: #141414;            /* dark section / header / footer strip */
	--dark-2: #1f1f1f;
	--heading-color: #141414;
	--text-color: #4a4a4a;
	--border-color: #e6e6e6;
	--font-head: 'Roboto Slab', Georgia, serif;
	--font-body: 'Jost', 'Futura PT', 'Century Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------
   2. Mobile navigation ([data-sp-toggle] toggles `.is-open`)
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
	/* Primary menu becomes a full-screen overlay (matches the live site). */
	#primary-nav {
		position: fixed;
		inset: 0;
		z-index: 1100;
		width: 100%;
		height: 100dvh;
		margin: 0;
		padding: 5.25rem 1.5rem 2rem;
		border-radius: 0;
		background: var(--dark);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
	}
	#primary-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .3s ease, transform .3s ease, visibility 0s;
	}
	/* The menu list sits in a centred column within the full-screen overlay. */
	#primary-nav > .sp-menu,
	#primary-nav > .header-actions { max-width: 32rem; margin-inline: auto; }
}

/* Drawer backdrop + scroll lock (overlay element is added by global.js). */
.nav-overlay { position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .34s ease; }
.nav-overlay.is-open { opacity: 1; }
body.nav-open { overflow: hidden; }

/* Drawer close (×) button — mobile only. */
.nav-drawer__close { display: none; }
@media (max-width: 991.98px) {
	.nav-drawer__close {
		display: inline-flex; align-items: center; justify-content: center;
		position: absolute; top: .85rem; right: 1rem;
		width: 42px; height: 42px; padding: 0;
		background: transparent; border: 0; color: #fff; cursor: pointer;
		font-size: 2.1rem; line-height: 1;
	}
}

/* Submenus: MenuHelper adds a .submenu-toggle button to each top-level
   primary item with children. Closed by default in the mobile drawer;
   a dropdown on hover, focus or toggle at desktop widths. */
.primary-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav .menu-item-has-children {
	position: relative;
}
.submenu-toggle {
	background: none;
	border: 0;
	padding: .5rem;
	color: inherit;
	line-height: 1;
}
.submenu-toggle::after {
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-25%) rotate(45deg);
	transition: transform .2s ease;
}
.menu-item-has-children.is-open > .submenu-toggle::after {
	transform: translateY(25%) rotate(-135deg);
}
/* Desktop keeps the plain show/hide. The mobile drawer animates instead, so
   it must not be display:none there - that is what made the services dropdown
   snap open. */
@media (min-width: 992px) {
	.menu-item-has-children:not(.is-open) > .sub-menu {
		display: none;
	}
}

/* Mobile drawer: the submenu slides. max-height is the animatable stand-in
   for `height: auto`; 32rem clears the longest submenu (Our Services, 8
   items) with little enough slack that the close easing still reads tight.
   Opening eases out, closing eases in, which hides most of the leftover
   max-height travel. */
@media (max-width: 991.98px) {
	.primary-nav .menu-item-has-children > .sub-menu {
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transform: translateY(-.25rem);
		transition: max-height .28s cubic-bezier(.4, 0, 1, 1), opacity .18s ease, transform .28s ease;
	}
	.primary-nav .menu-item-has-children.is-open > .sub-menu {
		max-height: 32rem;
		opacity: 1;
		transform: translateY(0);
		transition: max-height .36s cubic-bezier(0, 0, .2, 1), opacity .3s ease .05s, transform .36s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.primary-nav .sub-menu {
		transition: none;
	}
}
@media (min-width: 992px) {
	.primary-nav .menu-item-has-children {
		display: flex;
		align-items: center;
	}
	.primary-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;
		min-width: 12rem;
		padding: .5rem 0;
		background: var(--bs-body-bg, #fff);
		border: 1px solid var(--border-color);
	}
	.primary-nav .menu-item-has-children:hover > .sub-menu,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}
}

/* A sticky or fixed #site-header publishes --nav-height (global.js), so
   anchor jumps land below it instead of underneath. */
html {
	scroll-padding-top: var(--nav-height, 0px);
}

/* ---------------------------------------------------------------
   3. Scroll-reveal animations ([data-animate])
   --------------------------------------------------------------- */
/* The hidden state carries no transition. Declared here, adding `aos-ready`
   animated the first screen TOWARD hidden, and the reveal then reversed a fade
   that had barely started. It belongs on .is-visible, where it runs from
   hidden to visible. */
.aos-ready [data-animate] {
	opacity: 0;
	transform: translateY(24px);
}
.aos-ready [data-animate="fade-left"]  { transform: translateX(-24px); }
.aos-ready [data-animate="fade-right"] { transform: translateX(24px); }
.aos-ready [data-animate="zoom"]       { transform: scale(.94); }
.aos-ready [data-animate="fade"]       { transform: none; }
.aos-ready [data-animate].is-visible {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s ease;
}

/* ---------------------------------------------------------------
   4. Header live-search overlay (rendered by SearchService)
   --------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1080;
	/* Algolia-style: dim + blur what's behind the modal. */
	background: rgba(17, 24, 39, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 1rem 1rem;
	opacity: 0;
	transition: opacity .2s ease;
}
.search-overlay.is-open { opacity: 1; }
.search-overlay.is-open .search-panel { transform: none; }
.search-overlay[hidden] { display: none; }
.search-panel {
	width: 100%;
	max-width: 40rem;
	/* Translucent frosted card floating over the blurred backdrop. */
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(17, 24, 39, .35);
	overflow: hidden;
	transform: translateY(-8px);
	transition: transform .2s ease;
}
.search-panel .container { max-width: none; padding: 0; }
.search-form {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .75rem .35rem 1rem;
	border-bottom: 1px solid var(--border-color);
	/* Magnifier glyph sized to the input. */
	background:
		no-repeat 1rem center / 20px 20px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.search-form__input {
	flex: 1;
	padding: .75rem .5rem .75rem 2rem;
	font-size: 1.1rem;
	color: var(--text-color);
	background: transparent;
	border: 0;
	border-radius: 0;
}
.search-form__input:focus,
.search-form__input:focus-visible { outline: none; box-shadow: none; }
.search-form__close {
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--text-color);
	opacity: .7;
}
.search-form__close:hover, .search-form__close:focus-visible { opacity: 1; }
.search-results:not(:empty) { padding: .5rem 1rem 1rem; max-height: 60vh; overflow-y: auto; }
.search-result { display: block; padding: .5rem 0; border-bottom: 1px solid var(--border-color); text-decoration: none; }
.search-result__type { font-size: .8rem; color: var(--text-color); }
body.search-open { overflow: hidden; }

/* ---------------------------------------------------------------
   5. Components (template-parts/components/*). Structural defaults
      only; restyle freely. Kept here, not in a page stylesheet,
      because a component is used on more than one page.
   --------------------------------------------------------------- */
.text-accent { color: var(--primary-color); }
.eyebrow {
	display: inline-block;
	margin-bottom: .5rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--primary-color);
}

.stars { display: inline-flex; gap: 2px; color: #f5a623; }
.stars__star { fill: currentColor; }
.stars__star--empty { opacity: .25; }

.snackbar {
	position: fixed;
	inset-inline: 0;
	bottom: 1.5rem;
	z-index: 1090;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	pointer-events: none;
}
.snackbar__item {
	padding: .75rem 1.25rem;
	border-radius: .5rem;
	color: #fff;
	background: #111827;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.snackbar__item--error { background: #b91c1c; }
.snackbar__item.is-visible { opacity: 1; transform: none; }

details[data-accordion] > summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.snackbar__item,
	.submenu-toggle::after { transition: none; }
}

/* =====================================================================
   ROMAN SCAFFOLDING — brand layer (fonts, type, buttons, header, footer)
   Migrated from the Squarespace site. Section styles: pages/home.css.
   ===================================================================== */

/* ---- Self-hosted fonts ----
   Body/nav/buttons: Jost — an open-source geometric sans used as the Futura PT
   equivalent the live site uses. Headings: Roboto Slab. Both variable (one file
   covers every weight). */
@font-face { font-family:'Jost'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/jost-var.woff2') format('woff2'); }
@font-face { font-family:'Roboto Slab'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/robotoslab-var.woff2') format('woff2'); }

/* ---- Base typography ---- */
/* clip (not hidden) kills stray horizontal scroll without turning the root
   into a scroll container, which would break the sticky header. */
html { overflow-x: clip; }
body {
	font-family: var(--font-body);
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	color: var(--heading-color);
	font-weight: 700;
	line-height: 1.12;
}
/* Inline content links — black by default, red on hover. */
a { color: var(--heading-color); text-decoration: none; }
a:hover { color: var(--primary-color); }
.sp-dark a:not(.btn):hover { color: var(--primary-color); }
.text-accent { color: var(--primary-color) !important; }

.sp-h2        { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.35rem); }
.sp-h3        { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.27rem); }   /* 36.3px, live's h3 */
.lead-lg      { font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem); line-height: 1.3; }
.sp-strong    { font-weight: 600; color: var(--heading-color); }
.sp-footnote  { font-size: .85rem; opacity: .75; margin-top: .75rem; }

/* Section rhythm — Bootstrap's scale stops at 3rem, so define our own. */
.py-section { padding-block: clamp(3rem, 6vw, 6.25rem); }

/* ---- Tall photo banner (.page-banner--tall) ----
   Live's banner section measures 688px, but its header is FIXED and sits over
   the top 159px of it -- only 529px of photograph is ever visible. Our header
   is sticky and takes its own space, so matching 688 here made the banner a
   header taller than live. 529px (28.9vw at the 1830px viewport it was
   measured at) is the like-for-like figure.

   The shared banner's flat 88% scrim would bury the photograph, so this one
   fades in from the bottom instead. Shared by About Us and the service
   pages, so it lives here rather than in a single page's stylesheet. */
.page-banner--tall {
	min-height: clamp(280px, 28.9vw, 529px);
	display: flex;
	align-items: flex-end;
}
/* Live sets the title at 70.9px; the shared banner tops out at 64px. */
.page-banner--tall .page-banner__title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.43rem); }
/* Live paints no scrim at all over these banners -- its
   .section-background-overlay sits at opacity 0 on both the About and the
   service pages, so the photograph shows at full strength. The shared
   banner's 88% gradient has to come off. */
.page-banner--tall::after { display: none; }
/* ...unless the photograph is too bright or too busy to carry white type --
   Erecting and Dismantling is the first. Then the scrim comes back as a
   bottom-up fade, so the title sits on dark while the top of the photograph
   still reads at full strength. Asked for with 'service_banner_scrim'. */
.page-banner--tall.page-banner--scrim::after {
	display: block;
	background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, 0) 72%);
}
/* Live's banner lead runs at 23.9px, well above the 1rem the shared banner
   gives it, and spans the same 714px column as the title block. */
.page-banner--tall .page-banner__text {
	font-size: clamp(1.1rem, .8rem + 1.1vw, 1.495rem);
	line-height: 1.2;
	max-width: 714px;
}
.page-banner--tall > .container-xxl { width: 100%; }

/* ---- Testimonials slider (template-parts/global/testimonials.php) ----
   Shared by the homepage and About Us, so it lives here rather than in
   home.css, which only loads on the front page. */
.sp-testimonials { background: #fff; }
.sp-testi { position: relative; }
.sp-testi__viewport { overflow: hidden; padding: 12px 0; }
.sp-testi__track { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; will-change: transform; }
.sp-testi__slide { flex: 0 0 calc((100% - 3rem) / 3); display: flex; }
.sp-testi__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--primary-color); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: background-color .25s ease; }
.sp-testi__arrow:hover { background: var(--primary-hover); }
.sp-testi__arrow--prev { left: -22px; }
.sp-testi__arrow--next { right: -22px; }
@media (max-width: 575.98px) {
	.sp-testi__arrow--prev { left: 4px; }
	.sp-testi__arrow--next { right: 4px; }
}
@media (max-width: 991.98px) { .sp-testi__slide { flex-basis: calc((100% - 1.5rem) / 2); } }
/* Tighten the gap under the "Testimonials" heading on phones (.mb-5 is 3rem). */
@media (max-width: 767.98px) { .sp-testimonials .sp-h3 { margin-bottom: 1.25rem !important; } }
@media (max-width: 575.98px)  { .sp-testi__slide { flex-basis: 100%; } }

.sp-review { background: #fff; border: 1px solid var(--border-color); border-radius: 10px; padding: 1.75rem; height: 100%; width: 100%;
	display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 6px 20px rgba(0,0,0,.08); margin: 0; }
.sp-review__quote { font-style: italic; margin: 0; font-size: .95rem; line-height: 1.7; color: var(--text-color); flex: 1; }
.sp-review__name { font-weight: 600; color: var(--heading-color); }


/* ---- Closing CTA (template-parts/global/final-cta.php) ----
   Shared by the homepage and the Gallery page, so it belongs here and not in
   home.css, which only loads on the front page. The gaps are the live site's,
   measured off it: 42px under the heading, 106px under the lead. Sits after
   .py-section so its own padding-block wins. */
.sp-final { position: relative; overflow: hidden; padding-block: 70px 60px; }
.sp-final::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.sp-final::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); z-index: 1; }
.sp-final > .container { position: relative; z-index: 2; }
/* Measured off the live section once its entry animation has settled: 70px
   above the heading, 43px under it, 33px under the lead, 60px below the
   button. Measuring it mid-animation reads far looser than it really is --
   the button is still travelling up into place. */
.sp-final .sp-h2 { margin-bottom: 43px; }
.sp-final .lead-lg {
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: 33px;
	color: rgba(255,255,255,.9);
}
@media (max-width: 767.98px) {
	.sp-final { padding-block: 3rem 2.5rem; }
	.sp-final .sp-h2 { margin-bottom: 1.5rem; }
	.sp-final .lead-lg { margin-bottom: 1.25rem; }
	.sp-final .btn-sp-light { padding: 1.05rem 2.1rem; font-size: .9rem; }
}

/* Content width — match the live site's page model (4vw side gutters capped at
   1440px). Applies to the header, every section and the footer uniformly, so
   they all line up. Bootstrap's 12px container padding stays, so .row negative
   margins keep working. */
.container { width: 92vw; max-width: 1440px; }

/* Dark sections (hero, about, services, latest, steps, final CTA) */
.sp-dark { background: var(--dark); color: rgba(255,255,255,.88); }
.sp-dark h1, .sp-dark h2, .sp-dark h3, .sp-dark h4, .sp-dark .sp-strong { color: #fff; }
.sp-dark a:not(.btn) { color: #fff; }

/* Tick lists */
.sp-ticks { list-style: none; padding: 0; margin: 1.25rem 0; display: flex; flex-direction: column; gap: .7rem; }
.sp-ticks li { display: flex; gap: .65rem; align-items: flex-start; }
.sp-ticks .icon { color: var(--primary-color); flex: none; margin-top: 4px; }

/* ---- Buttons ---- */
/* Sharp-cornered, bold buttons matching the live Squarespace set (no hover
   lift — the hover inverts the fill instead). */
.btn {
	font-family: var(--font-body);
	font-weight: 700;
	border-radius: 0;
	letter-spacing: .02em;
	line-height: 1.2;
	padding: .8rem 1.9rem;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.btn-sm { padding: .55rem 1.2rem; font-size: .9rem; }
.btn-sp-red { background: var(--primary-color); color: #fff; border: 2px solid var(--primary-color); }
.btn-sp-red:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-sp-light { background: #fff; color: var(--dark); border: 2px solid #fff; }
.btn-sp-light:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn-sp-outline-light { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-sp-outline-light:hover { background: #fff; color: var(--dark); border-color: #fff; }
/* Hero / CTA buttons are the large Squarespace size (~212×68, 15px/700). */
.btn-sp-light, .btn-sp-outline-light { padding: 1.55rem 3.3rem; font-size: .95rem; }

/* ====================== HEADER ====================== */
/* Top utility strip above the red nav: the Global Options contact details on
   a light-black band. Desktop only - the mobile drawer already carries the
   same phone/email pills. */
/* Slim contact strip above the nav: phone + email read as pill buttons on a
   dark band, so they sit as their own row on top of the red nav below. */
.topbar { background: var(--dark); font-size: .9rem; }
.topbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-height: 54px; }
.topbar__item {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .5rem 1.15rem; border-radius: 50px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2);
	color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap;
	transition: background .2s ease, border-color .2s ease;
}
.topbar__item .icon { flex: none; color: var(--primary-color); transition: color .2s ease; }
.topbar__item:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.topbar__item:hover .icon { color: #fff; }

.site-header { position: sticky; top: 0; z-index: 1030; background: var(--primary-color); border: 0 !important; }
.site-header.is-stuck { box-shadow: 0 3px 20px rgba(0,0,0,.25); }
.sp-nav { padding: 0.5rem 0; }
/* Override Bootstrap .navbar's inherited flex-wrap:wrap, which otherwise drops
   the nav onto a second row below the logo. */
.sp-nav > .container { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; }
.site-brand { display: inline-flex; align-items: center; }
/* Full-colour brand logo on the red header (dark wordmark + grey shield + white
   tagline), exactly as the live site uses it. */
.site-brand img, .brand-logo { height: 120px; width: auto; display: block; }

.navbar-toggler { border: 1px solid rgba(255,255,255,.6); padding: .35rem .6rem; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); }

.sp-menu { display: flex; flex-direction: row; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.sp-menu .nav-link { color: #fff; font-weight: 600; font-size: 1rem; padding: .25rem 0; white-space: nowrap; }
/* Compact dropdown chevron so "Our Services" + arrow hugs together and the gap
   to the next item stays uniform. */
.sp-menu .submenu-toggle { color: #fff; padding: 0 0 0 .25rem; }
.sp-menu > .nav-item > .nav-link { position: relative; }
.sp-menu > .nav-item > .nav-link::after {
	content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px;
	background: #fff; transition: width .25s ease;
}
.sp-menu > .nav-item > .nav-link:hover::after,
.sp-menu > .nav-item.is-current > .nav-link::after { width: 100%; }
.sp-menu .submenu-toggle { color: #fff; }

/* Last primary item ("Get A Quote") reads as the header CTA rather than a
   plain link - the same black pill the header contact pills used. Keyed to
   :last-child, so it follows whatever sits last in the Global Options nav. */
.sp-menu > .nav-item:last-child > .nav-link {
	background: var(--dark);
	color: #fff;
	border-radius: 50px;
	padding: .7rem 1.5rem;
	margin-left: .4rem;
	transition: background .25s ease;
}
.sp-menu > .nav-item:last-child > .nav-link:hover,
.sp-menu > .nav-item:last-child.is-current > .nav-link {
	background: #333;
	color: #fff;
}
/* A button does not take the sliding underline. */
.sp-menu > .nav-item:last-child > .nav-link::after { display: none; }

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-pill {
	display: inline-flex; align-items: center; gap: .5rem; height: 60px; padding: 0 1.3rem;
	border-radius: 50px; font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap;
	background: #111; color: #fff;
}
.header-pill .icon { flex: none; }
.header-pill:hover { background: #333; color: #fff; }
.header-cta { height: 46px; display: inline-flex; align-items: center; }

/* Submenu panel: dark links on the white dropdown. */
.sp-menu .sub-menu .nav-link { color: var(--dark); padding: .4rem 1rem; display: block; white-space: nowrap; }
.sp-menu .sub-menu .nav-link:hover { color: var(--primary-color); }

@media (min-width: 992px) {
	.navbar-toggler { display: none; }
	/* The desktop contact row above the menu carries phone + email; hide the
	   in-drawer pills that repeat them. */
	.header-actions { display: none; }
	/* Right side stacks a contact row over the menu row, with a hairline rule
	   between. flex:1 so the rule spans from the logo's edge to the right margin. */
	/* Shrink to content (not flex:1) so the column is exactly as wide as its
	   widest row — the menu — and the contact row + divider match the nav width. */
	.header-right { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
	.header-contact {
		display: flex; align-items: center; justify-content: flex-end; gap: 2rem;
		padding-bottom: .65rem; margin-bottom: .65rem;
		border-bottom: 1px solid rgba(255,255,255,.55);
	}
	.header-contact__item { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; white-space: nowrap; transition: color .2s ease; }
	.header-contact__item .icon { flex: none; color: #fff; transition: color .2s ease; }
	.header-contact__item:hover { color: #000; }
	.header-contact__item:hover .icon { color: #000; }
	#primary-nav { display: flex !important; align-items: center; justify-content: flex-end; width: 100%; gap: 1.25rem; }
	.sp-menu .sub-menu { min-width: 15rem; border: 0; box-shadow: 0 12px 30px rgba(0,0,0,.18); border-radius: 8px; }
}
@media (max-width: 991.98px) {
	.topbar { display: none; }
	/* Contact row is desktop-only; the drawer already carries phone + email. */
	.header-contact { display: none; }
	.sp-nav { padding: .6rem 0; }
	/* Header bar: hamburger on the left, logo centred (matches the live site). */
	.sp-nav > .container { justify-content: center; position: relative; }
	.navbar-toggler { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; }
	.site-brand { margin-inline: auto; }
	.site-brand img, .brand-logo { height: 82px; }
	.sp-menu { flex-direction: column; align-items: stretch; gap: .25rem; }
	.sp-menu > .nav-item { border-bottom: 1px solid rgba(255,255,255,.08); }
	/* Smaller menu font than the live site (live runs 15.4px; this is 14px). */
	.sp-menu .nav-link { padding: .6rem 0; font-size: .875rem; }
	.sp-menu .sub-menu .nav-link { font-size: .8125rem; }
	/* Keep the submenu expander inline, to the right of its label. */
	.sp-menu .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.sp-menu .menu-item-has-children > .nav-link { flex: 1 1 auto; }
	.sp-menu .menu-item-has-children > .submenu-toggle { flex: 0 0 auto; color: #fff; }
	.sp-menu .menu-item-has-children > .sub-menu { flex-basis: 100%; }
	.sp-menu .sub-menu { background: transparent; padding-left: .75rem; }
	.sp-menu .sub-menu .nav-link { color: rgba(255,255,255,.8); white-space: normal; }
	.sp-menu .sub-menu .nav-link:hover { color: #fff; }
	/* In the drawer the CTA spans the full width instead of hugging its text. */
	.sp-menu > .nav-item:last-child { border-bottom: 0; margin-top: .75rem; }
	.sp-menu > .nav-item:last-child > .nav-link { text-align: center; padding: .85rem 1.5rem; margin-left: 0; }
	.header-actions { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1rem; }
	.header-pill, .header-cta { height: 50px; justify-content: center; }
	/* On the dark overlay the black CTA + pills would vanish — give the CTA the
	   brand red and lift the pills so they read against #141414. */
	.sp-menu > .nav-item:last-child > .nav-link { background: var(--primary-color); border-radius: 4px; }
	.sp-menu > .nav-item:last-child > .nav-link:hover { background: var(--primary-hover); }
	.header-pill { background: var(--dark-2); border: 1px solid rgba(255,255,255,.14); }
	.header-pill:hover { background: #2a2a2a; }
}

/* ====================== FOOTER ====================== */
.site-footer { background: #fff; color: var(--text-color); }
.footer-grid {
	display: grid; grid-template-columns: 1.5fr 0.8fr 1fr 1.4fr; gap: 2rem;
	padding-block: clamp(2.5rem, 5vw, 4rem); align-items: start;
}
/* Logo sits in a red box (as on the live site). */
.footer-brand { display: inline-block; background: var(--primary-color); padding: 14px 20px; line-height: 0; margin-bottom: 1.4rem; }
.footer-logo { height: 130px; width: auto; display: block; }
.footer-blurb { font-size: 1.0625rem; line-height: 1.45; margin-bottom: 1.1rem; }
.footer-company { font-weight: 700; color: var(--heading-color); font-size: 1.5rem; margin-bottom: 1rem; font-family: var(--font-body); }
.footer-contact { display: flex; flex-direction: column; gap: .85rem; margin: 0; }
.footer-contact li { display: flex; align-items: center; gap: .7rem; }
.footer-contact .icon { color: var(--heading-color); flex: none; }
.footer-contact a, .footer-contact span { color: var(--heading-color); font-weight: 700; font-size: 1.0625rem; }
.footer-contact a { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact a:hover { color: var(--primary-color); }
/* Column headings use the heading font (Roboto Slab), like the live footer. */
.footer-col__title { font-size: 1.28rem; font-weight: 700; font-family: var(--font-head); margin-bottom: 1.2rem; color: var(--heading-color); }
.footer-links { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; }
.footer-links a { color: var(--heading-color); text-decoration: underline; text-underline-offset: 3px; font-size: .955rem; letter-spacing: .02em; }
.footer-links a:hover { color: var(--primary-color); }
/* The column title is a <button> so it can drive the mobile accordion. At
   desktop widths it must read and behave exactly like the old heading. */
.footer-col__toggle { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: default; }
.footer-col--badges { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 1.1rem; }
.footer-badges { max-width: 360px; height: auto; }
.footer-badge--sitesafe { max-width: 360px; height: auto; width: 100%; }
.footer-bottom { background: #000; color: #fff; padding: 1.1rem 0; text-align: center; font-size: 1.0625rem; }
.footer-bottom a { color: #fff; font-weight: 600; margin-left: .35rem; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--primary-color); }

@media (max-width: 1199.98px) {
	/* Brand takes a full-width row of its own; Pages, Our Services and the
	   badges then share the row beneath it. */
	.footer-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
	.footer-col--brand { grid-column: 1 / -1; }
	.footer-col--badges { align-items: flex-start; }
	.footer-badges { max-width: 100%; }
}
@media (max-width: 767.98px) {
	/* Phones: every column stacks one per row... */
	.footer-grid { grid-template-columns: 1fr; }
	/* ...and Pages / Our Services collapse into accordions; the brand and
	   badge columns have no .footer-col__title, so they are untouched. */
	.footer-col__title { margin-bottom: 0; border-bottom: 1px solid rgba(0,0,0,.12); }
	.footer-col__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; cursor: pointer; }
	.footer-col__toggle::after {
		content: ""; flex: none; width: .5em; height: .5em;
		border: solid currentColor; border-width: 0 2px 2px 0;
		transform: translateY(-25%) rotate(45deg); transition: transform .25s ease;
	}
	.footer-col__toggle[aria-expanded="true"]::after { transform: translateY(25%) rotate(-135deg); }
	/* 28rem clears the longer list (Our Services, 8 links). */
	.footer-links { overflow: hidden; max-height: 0; gap: 0; transition: max-height .28s cubic-bezier(.4, 0, 1, 1); }
	.footer-links.is-open { max-height: 28rem; transition: max-height .36s cubic-bezier(0, 0, .2, 1); }
	.footer-links li { padding: .5rem 0; }
	.footer-links li:first-child { padding-top: .85rem; }
}

/* ---- Shared tick list (Why Choose Us / Why Us) ---- */
.sp-why-list { list-style: none; padding-left: 0; margin: 1.3rem 0 1.6rem; display: flex; flex-direction: column; gap: .7rem; }
.sp-why-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: 1.0625rem; line-height: 1.45; }
.sp-why-list .icon { color: var(--primary-color); flex: none; margin-top: 3px; }
.sp-why-list strong { font-weight: 700; }

/* ---- Inner-page banner (template-parts/global/page-banner.php) ---- */
.container-xxl { width: 92vw; max-width: 1440px; }   /* align banner with the site grid */
.page-banner { position: relative; background: var(--dark); color: #fff; overflow: hidden;
	padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-banner__bg { position: absolute; inset: 0; z-index: 0; }
.page-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-banner::after { content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to right, rgba(0,0,0,.88), rgba(0,0,0,.55)); }
.page-banner > .container-xxl { position: relative; z-index: 2; }
.page-banner__title { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); color: #fff; margin: 0; line-height: 1.05; }
.page-banner__text { color: rgba(255,255,255,.85); margin-top: .6rem; max-width: 640px; }
.page-banner__breadcrumb { margin-top: .5rem; font-size: .9rem; }
/* Banners that carry a 'paras' list and a call to action rather than one lead
   line -- Solar Scaffolding is the only one so far. Live spaces both at 11px. */
.page-banner__text + .page-banner__text { margin-top: .7rem; }
.page-banner__btn { margin-top: 1.1rem; }
.page-banner__breadcrumb a { color: rgba(255,255,255,.7); }
/* Light banner variant (white, bottom rule) — e.g. Contact Us. */
.page-banner--light { background: #fff; color: var(--heading-color); border-bottom: 1px solid var(--border-color); padding-block: clamp(1.75rem, 3vw, 2.75rem); }
.page-banner--light::after { display: none; }
.page-banner--light .page-banner__title { color: var(--heading-color); }

/* Mobile overlay submenu refinements (client). */
.sp-menu .sub-menu .nav-link {
	padding: .4rem 0.5rem;
}
.primary-nav .menu-item-has-children.is-open > .sub-menu {
	padding-left: 0;
}
.primary-nav .menu-item-has-children.is-open > .sub-menu > li {
	border-bottom: 1px solid #cccccc3b;
}
.primary-nav .menu-item-has-children.is-open > .sub-menu > li:last-child {
	border-bottom: 0;
}

/* ============================================================
   LP-STYLE HEADER (2026-10-28)
   Full-width red top bar (note | email) above the main bar;
   main bar = logo + nav + dark phone pill + white "Get A Quote"
   CTA. Header is already position:sticky (above). "only layout".
   ============================================================ */

/* Full-width red top bar */
.site-topbar { background: var(--primary-color); color: #fff; font-size: .95rem; }
.site-topbar > .container { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.site-topbar__note, .site-topbar__contact { display: inline-flex; align-items: center; gap: .5rem; }
.site-topbar a { color: #fff; text-decoration: none; font-weight: 600; transition: color .2s ease; }
.site-topbar a:hover { color: var(--dark); }
.site-topbar .icon { flex: none; color: #fff; }
@media (max-width: 600px) { .site-topbar { font-size: .85rem; } .site-topbar__note { display: none; } }

/* White "Get A Quote" CTA button (LP .btn-white look) */
.header-cta {
	display: inline-flex; align-items: center; justify-content: center;
	height: 60px; padding: 0 1.6rem;
	background: #fff; color: var(--dark); font-weight: 700; font-size: .95rem;
	border: 2px solid #fff; border-radius: 50px; text-decoration: none; white-space: nowrap;
	transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.header-cta:hover {
	background: var(--dark); color: #fff; border-color: var(--dark);
	transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* The dedicated CTA replaces the old "Get A Quote" nav pill — hide the
   duplicate last nav item everywhere (desktop bar + mobile drawer both
   show the header-actions CTA instead). */
.sp-menu > .nav-item:last-child { display: none; }

@media (min-width: 992px) {
	/* Show dark phone pill + white CTA on the main bar (LP layout). */
	.header-actions { display: flex !important; align-items: center; gap: .6rem; margin-left: .6rem; }
	/* header-right now carries only the nav row (contact moved to top bar). */
	.header-right { flex-direction: row; }
}

/* ---- Shrink-on-scroll (LP behaviour). global.js adds .is-stuck after
   scrollY > 40; compact the top bar, logo, phone pill and CTA. Desktop/
   tablet only — the mobile header is already compact. ---- */
.site-topbar, .site-topbar > .container, .sp-nav,
.site-brand img, .brand-logo, .header-pill, .header-cta {
	transition: height .25s ease, padding .25s ease, font-size .25s ease;
}
@media (min-width: 992px) {
	.site-header.is-stuck .site-topbar { font-size: .85rem; }
	.site-header.is-stuck .site-topbar > .container { padding-top: .3rem; padding-bottom: .3rem; }
	.site-header.is-stuck .sp-nav { padding: .2rem 0; }
	.site-header.is-stuck .site-brand img,
	.site-header.is-stuck .brand-logo { height: 72px; }
	.site-header.is-stuck .header-pill { height: 48px; }
	.site-header.is-stuck .header-cta { height: 48px; }
}