/* =====================================================================
   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-nav:not(.is-open) {
		display: none;
	}
	.primary-nav.is-open {
		display: block;
	}
}

/* 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);
}
.menu-item-has-children:not(.is-open) > .sub-menu {
	display: 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.1875rem); }
.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); }

/* 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 ====================== */
.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: 1.2rem 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. Height matches live (~115px). */
.site-brand img, .brand-logo { height: 112px; 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: 13px; 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 (matches the live 13px nav gap). */
.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 { width: 100%; }
.sp-menu .submenu-toggle { color: #fff; }

.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; }
	#primary-nav { display: flex !important; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; 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) {
	.sp-nav { padding: .6rem 0; }
	.site-brand img, .brand-logo { height: 68px; }
	#primary-nav { width: 100%; background: var(--dark-2); margin-top: .5rem; padding: 1rem; border-radius: 8px;
		max-height: calc(100dvh - var(--nav-height, 80px) - 1rem); overflow-y: auto; }
	.sp-menu { flex-direction: column; align-items: stretch; gap: .25rem; }
	.sp-menu > .nav-item { border-bottom: 1px solid rgba(255,255,255,.08); }
	.sp-menu .nav-link { padding: .65rem 0; }
	.sp-menu .sub-menu { background: transparent; padding-left: .75rem; }
	.sp-menu .sub-menu .nav-link { color: rgba(255,255,255,.8); }
	.sp-menu .sub-menu .nav-link:hover { color: #fff; }
	.header-actions { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1rem; }
	.header-pill, .header-cta { height: 50px; justify-content: center; }
}

/* ====================== 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); }
.footer-col--badges { display: flex; align-items: flex-start; justify-content: flex-end; }
.footer-badges { max-width: 360px; height: auto; }
.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: 991.98px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.footer-col--badges { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
	.footer-grid { grid-template-columns: 1fr; }
}