/* ================================================================
   CARTER GLOBAL POWER — MAIN STYLESHEET

   1. Root tokens
   2. Base
   3. Container & section utilities
   4. Buttons
   5. Header ribbon
   6. Hero
   7. Section 2 — Deployment models (dark, inset boxes)
   8. Section 3 — Energy as a Service
   9. Section 4 — Smart Power banner
   10. Section 5 — How It Works (timeline)
   11. Section 6 — Who We Serve
   12. Section 7 — Why Carter Global Power
   13. Section 8 — Contact CTA + form
   14. Footer
   15. Back to top / utilities
   16. Content pages (Privacy, Terms, Legal)
   17. 404 / Error page
   ================================================================ */

/* ---------------------------------------------------------------
   1. Root tokens
   --------------------------------------------------------------- */
:root {
	--gold: #FFBC00;
	--gold-hover: #D9A000;
	--gold-light: rgba(255, 188, 0, 0.12);

	--navy: #333645;
	--navy-soft: #3D4155;
	--charcoal: #1B1B1B;

	--body-text: #5A5A5A;
	--text-light: #8A8A8A;
	--eyebrow-color: #5A5F66;

	--white: #FFFFFF;
	--off-white: #FAFAFA;
	--surface-gray: #F4F4F4;
	--border: #E4E4E4;

	--container-max: 1280px;
	--container-wide: 1680px;
	--header-total: 92px;
	--section-pad: 52px;
	--section-pad-sm: 26px;

	--radius: 0;
	--transition: all 0.25s ease;

	--font: Arial, Helvetica, sans-serif;
}

/* Below the >=1440px "roomy" desktop tier, .container and .navbar
   .container (both keyed off --container-max) cap out narrower —
   1180px instead of 1280px — since every screen in that range is
   already the tight fit the header's 1181-1439px compressed nav
   styles are tuned for; the extra margin gives it (and the page
   content) more breathing room instead of stretching edge to edge
   right up to the point content starts cramming together. */
@media (max-width: 1439px) {
	:root { --container-max: 1180px; }
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
/* Without this, every `width: 100%` + `padding` element (starting
   with .container itself) renders wider than its parent in every
   browser — the actual cause of horizontal-scrollbar bugs, not a
   browser quirk. Fix the box model, not the symptom. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	max-width: 100%;
}

body {
	font-family: var(--font);
	color: var(--body-text);
	line-height: 1.6;
	background: var(--white);
}

h1, h2, h3, h4, h5 {
	font-family: var(--font);
	color: var(--navy);
	margin: 0;
	line-height: 1.2;
}

p {
	margin: 0 0 16px;
}

a {
	color: var(--navy);
}

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

/* Note: no overflow-x rule on .site/body — any non-"visible" overflow
   on a sticky element's ancestor breaks position: sticky in every
   browser. Contain overflow at the source (e.g. .hero) instead. */

/* ---------------------------------------------------------------
   3. Container & section utilities
   --------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px;
}

@media (min-width: 768px) {
	.container { padding: 0 32px; }
}

@media (min-width: 1024px) {
	.container { padding: 0 40px; }
}

.section {
	padding: var(--section-pad-sm) 0;
}

@media (min-width: 1024px) {
	.section { padding: var(--section-pad) 0; }
}

.section--dark { background: var(--navy); color: rgba(255, 255, 255, 0.75); }
.section--gray { background: var(--surface-gray); }
.section--white { background: var(--white); }

.eyebrow {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--eyebrow-color);
	margin-bottom: 12px;
}

.section--dark .eyebrow,
.banner-section .eyebrow { color: var(--gold); }

/* Gold underline bar beneath section headings — a signature detail
   used throughout the Carter Power Systems reference that was missing
   here. Suppressed on dark/banner sections, matching the reference's
   own treatment (their gold eyebrow already carries the accent there). */
.section-title {
	position: relative;
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 16px;
	padding-bottom: 18px;
	text-align: left;
}

.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--gold);
}

.section--dark .section-title { color: var(--white); }
.section--dark .section-intro p { color: rgba(255, 255, 255, 0.75); }

.section--dark .section-title::after,
.banner-section .section-title::after { display: none; }

@media (min-width: 768px) {
	.section-title { font-size: 2.25rem; }
}

/* Section headers are left-aligned by default — only opt into
   .section-intro--center where a layout genuinely calls for it. */
.section-intro {
	max-width: 760px;
	text-align: left;
	margin: 0 0 40px;
}

.section-intro .section-title { margin-bottom: 16px; }

.section-intro--center {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.subsection-title {
	font-size: 1.375rem;
	font-weight: 700;
	text-align: left;
	margin-bottom: 24px;
}

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	white-space: nowrap;
}

.btn i { font-size: 0.85em; transition: transform 0.25s ease; }
.btn:hover i { transform: translateX(3px); }

.btn-primary {
	background-color: var(--gold);
	color: var(--navy);
	border-color: var(--gold);
}

.btn-primary:hover {
	background-color: var(--gold-hover);
	border-color: var(--gold-hover);
}

.btn-outline-light {
	background-color: transparent;
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-light:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--white);
}

.btn-outline-dark {
	background-color: transparent;
	color: var(--navy);
	border-color: var(--navy);
}

.btn-outline-dark:hover {
	background-color: var(--navy);
	color: var(--white);
}

.btn-nav-cta {
	padding: 10px 18px;
	font-size: 0.9375rem;
}

/* Logo + hamburger only below 640px — logo, CTA text, and the
   hamburger don't all fit on a phone-width header. The CTA is still
   reachable via the hero button and the mobile nav panel. */
@media (max-width: 639px) {
	.btn-nav-cta { display: none; }
}

@media (max-width: 480px) {
	.btn { font-size: 0.875rem; padding: 12px 20px; }
}

/* ---------------------------------------------------------------
   5. Header ribbon
   --------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

.navbar {
	background-color: var(--navy);
	border-bottom: 3px solid var(--gold);
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Deliberately the SAME max-width as the content .container (not
   --container-wide) — the header must line up with the page content
   below it on every screen. Two independently-centered containers
   with different max-widths drift apart on any viewport wider than
   both caps, which is exactly what produced the logo/content
   misalignment: at e.g. 1920px, a 1200px container centers with
   360px of margin while a 1680px one only has 120px, so their left
   edges land 240px apart. Fit is handled by tightened nav spacing
   below instead of by giving the header extra width. */
.navbar .container {
	max-width: var(--container-max);
}

.nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 88px;
	/* Safety net: if anything still runs a hair too wide, this clips
	   instead of overlapping the CTA. Doesn't affect the sticky
	   .navbar — that element is this one's ancestor, not its
	   descendant. */
	/*overflow: hidden;*/
}

/* The logo file itself is now cropped tight to its visible bounding
   box (no transparent padding around the mark — see
   cgp-logo-reversed-footer.png, reused here), so these heights are
   deliberately smaller than the old 56/68px: that padding used to eat
   most of the box, so the old values rendered the same visual size
   as these do — just wastefully. Same apparent logo size, tighter
   box, more room left for the nav. */
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-img { height: 40px; width: auto; }

/* Section anchors sit under a sticky header — offset the scroll target */
.hero,
.section,
.banner-section {
	scroll-margin-top: var(--header-total);
}

/* Nav menu — inline on desktop (>=1181px), hamburger on everything at
   or below 1180px (see the "Nav menu (mobile + tablet dropdown panel)"
   block below, gated at max-width:1180px). The two breakpoints are
   deliberately adjacent complements (1180/1181), not a shared 1180 on
   both sides — that would show the inline bar AND the dropdown at
   once at exactly 1180px, and a gap here (e.g. leaving the old 1440px
   threshold on this side) leaves a dead zone in between where the nav
   is `display:none` with nothing to override it — invisible at any
   viewport that lands in the gap, which is exactly what browser zoom
   or OS display scaling (125%, 150%) does to the effective CSS
   viewport on common physical resolutions.

   flex-grow:1 below (without min-width:0) lets this box expand to
   soak up whatever slack .nav-wrapper has, so the link list centers
   itself across the full row instead of .nav-wrapper's
   justify-content:space-between dumping all of that slack into just
   the two gaps on either side of a content-sized box — the "giant
   empty rectangle before the links and another after them" look.
   Deliberately NOT paired with min-width:0 though: flex items default
   to min-width:auto (their content's min-content size), so flex-grow
   alone can only ever make this box bigger than its content, never
   smaller — it still can't shrink below the (non-wrapping) links and
   spill into the CTA the way flex:1 + min-width:0 together would. */
.nav-menu {
	display: none;
}

@media (min-width: 1181px) {
	.nav-menu {
		display: block;
		flex: 1 0 auto;
	}
}

.nav-menu ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu ul li {
	flex-shrink: 0;
}

.nav-menu ul li a {
	display: inline-block;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-decoration: none;
	padding: 10px 8px;
	position: relative;
	transition: color 0.2s ease;
}

.nav-menu ul li a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 6px;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.nav-menu ul li a:hover,
.nav-menu ul li a.active {
	color: var(--white);
}

.nav-menu ul li a:hover::after,
.nav-menu ul li a.active::after {
	transform: scaleX(1);
}

/* 1181-1439px is the tightest band the inline nav ever has to fit in
   (logo + 5 links + CTA in as little as ~1100px of usable width), so
   it gets its own compressed sizing — smaller type, tighter padding,
   a narrower header container, and an icon-less CTA — rather than
   reusing either the mobile styles or the >=1440px roomy ones. Placed
   after the base .nav-menu ul li a::after/:hover rules above so these
   overrides actually win the cascade instead of losing to them on
   source order (media query vs. unconditional rule of equal
   specificity is decided by which comes later in the file). */
@media (min-width: 1181px) and (max-width: 1439px) {

	.nav-wrapper { gap: 32px; }

	.nav-menu ul li a {
		font-size: 0.8125rem;
		letter-spacing: 0;
		padding: 10px 6px;
	}

	.nav-menu ul li a::after { left: 6px; right: 6px; }

	.btn-nav-cta {
		font-size: 0.8125rem;
		padding: 10px 14px;
	}

	.btn-nav-cta i { display: none; }
}

@media (min-width: 1440px) {
	/* Padding stays tight even at this tier — the header container is
	   now capped at the same width as page content (see .navbar
	   .container above), so unlike before there's no extra room to
	   spend at wider viewports; usable width is the ceiling at every
	   screen size once the container hits its cap. */
	.nav-menu ul li a {
		font-size: 0.875rem;
		letter-spacing: 0.03em;
		padding: 10px 18px;
	}
}

/* CTA duplicated inside the mobile/tablet dropdown panel — hidden in
   the desktop inline bar, where the standalone header CTA already
   covers it. */
.mobile-nav-cta { display: none; }

/* Hamburger (mobile + tablet nav toggle) */
.nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 33px;
	height: 33px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

@media (min-width: 1181px) {
	.hamburger { display: none; }
}

.hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--white);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav menu (mobile + tablet dropdown panel) */
@media (max-width: 1180px) {
	.nav-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--navy);
		border-bottom: 3px solid var(--gold);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.nav-menu.active { max-height: 560px; overflow-y: auto; }

	.nav-menu ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 8px 24px 8px;
	}

	.nav-menu ul li { width: 100%; }

	.nav-menu ul li a {
		display: block;
		width: 100%;
		font-size: 1rem;
		letter-spacing: 0.03em;
		padding: 14px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.nav-menu ul li a::after { display: none; }

	.mobile-nav-cta {
		display: block;
		padding: 16px 24px 24px;
	}

	.mobile-nav-cta .btn-nav-cta {
		display: flex;
		width: 100%;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------
   6. Hero — same proportions and boxed-content treatment as the
   Carter Power Systems reference hero: near-viewport-height image,
   light overlay tint, and a dark card (blur + gold left border)
   holding the copy rather than a full-width gradient.
   --------------------------------------------------------------- */
.hero {
	position: relative;
	height: calc(100vh - var(--header-total));
	min-height: 520px;
	max-height: 800px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(51, 54, 69, 0.2);
	z-index: 1;
}

.hero .container { position: relative; z-index: 2; }

.hero-content {
	/* Full width on mobile/tablet — a 66.6%-wide card inside an already
	   padded container leaves almost no room for the heading on a
	   phone. Narrow it to the reference's boxed-card proportion only
	   once there's real width to spare, at desktop. */
	max-width: 100%;
	background: rgba(51, 54, 69, 0.68);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border-left: 4px solid var(--gold);
	padding: 24px 20px;
}

@media (min-width: 480px) {
	.hero-content { padding: 32px 32px; }
}

@media (min-width: 768px) {
	.hero-content { padding: 40px 44px; }
}

@media (min-width: 1024px) {
	.hero-content { max-width: 66.6%; }
}

.hero-content h1 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 16px;
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.hero-content h1 { font-size: 2.125rem; }
}

@media (min-width: 1024px) {
	.hero-content h1 { font-size: 2.5rem; }
}

.hero-subtitle {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.65;
	margin-bottom: 28px;
}

@media (min-width: 768px) {
	.hero-subtitle { font-size: 1.0625rem; line-height: 1.7; }
}

@media (min-width: 1024px) {
	.hero-subtitle { font-size: 1.125rem; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 480px) {
	.hero-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------
   7. Section 2 — Deployment models
   --------------------------------------------------------------- */
.models-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.models-grid { grid-template-columns: repeat(3, 1fr); }
}

.model-box {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 32px 28px;
}

.model-box h3 {
	color: var(--white);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.model-box > p {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 20px;
}

.model-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.model-box ul li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9375rem;
}

.model-box ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	background: var(--gold);
}

/* ---------------------------------------------------------------
   8. Section 3 — Energy as a Service
   --------------------------------------------------------------- */
/* Default align-items is `stretch` — both columns fill the row's
   height (set by whichever is taller), so image and text end up the
   same height instead of one floating in empty space next to the
   other. .eaas-text is pinned to the top of its (possibly taller)
   cell so the copy starts flush with the image instead of centering
   into the extra room. */
.eaas-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin-bottom: 56px;
}

@media (min-width: 1024px) {
	.eaas-layout { grid-template-columns: 1fr 1fr; }
}

.eaas-text {
	align-self: start;
}

/* Below 1024px the columns stack into separate grid rows — there's no
   sibling row-height to stretch against, so height: 100% would be
   circular again here. Natural aspect ratio instead; the stretch
   trick below only applies once the two columns actually share a row. */
.eaas-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1024px) {
	.eaas-image img {
		height: 250px;
		object-fit: cover;
	}
}

.delivers-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

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

@media (min-width: 1024px) {
	.delivers-grid { grid-template-columns: repeat(4, 1fr); }
}

.delivers-box {
	background: var(--surface-gray);
	padding: 28px;
}

.delivers-box h4 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 10px;
}

.delivers-box p {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* ---------------------------------------------------------------
   9. Section 4 — Smart Power banner
   --------------------------------------------------------------- */
/* Gradient is the fallback look when no ACF background_image is set —
   the img/overlay layers below sit on top of it once one is uploaded. */
.banner-section {
	position: relative;
	background: linear-gradient(135deg, var(--navy) 0%, #202230 100%);
	overflow: hidden;
}

.banner-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 194, 14, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 194, 14, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	z-index: 1;
}

.banner-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(51, 54, 69, 0.70);
	z-index: 1;
}

.banner-content {
	position: relative;
	max-width: 680px;
	z-index: 2;
}

.banner-content h2 { color: var(--white); }
.banner-content p { color: rgba(255, 255, 255, 0.8); font-size: 1.0625rem; margin: 0; }

/* ---------------------------------------------------------------
   10. Section 5 — How It Works (timeline)
   --------------------------------------------------------------- */
.timeline {
	max-width: 820px;
}

.timeline-step {
	display: flex;
	gap: 24px;
	position: relative;
	padding-bottom: 48px;
}

.timeline-step:last-child { padding-bottom: 0; }

.timeline-step::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 52px;
	bottom: 0;
	width: 2px;
	background: var(--border);
}

.timeline-step:last-child::before { display: none; }

.timeline-num {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gold);
	color: var(--navy);
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timeline-step h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 8px;
	padding-top: 8px;
}

.timeline-step p { margin: 0; }

/* ---------------------------------------------------------------
   11. Section 6 — Who We Serve
   --------------------------------------------------------------- */
.serve-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

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

@media (min-width: 1024px) {
	.serve-grid { grid-template-columns: repeat(4, 1fr); }
}

.serve-card {
	background: var(--white);
	border: 1px solid var(--border);
	height: 100%;
}

.serve-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.serve-card-body {
	padding: 24px 24px 28px;
}

.serve-card h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.serve-card p {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* ---------------------------------------------------------------
   12. Section 7 — Why Carter Global Power
   --------------------------------------------------------------- */
.why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 40px;
}

@media (min-width: 768px) {
	.why-grid { grid-template-columns: repeat(2, 1fr); }
}

.why-card {
	background: var(--surface-gray);
	border: 1px solid var(--border);
	padding: 28px;
}

.why-card h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 10px;
}

.why-card p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

/* Dark-section variant — same treatment as .model-box in Section 2,
   for visual consistency between the two dark sections. */
.section--dark .why-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

.section--dark .why-card h3 { color: var(--white); }
.section--dark .why-card p { color: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------------
   13. Section 8 — Contact CTA + form
   --------------------------------------------------------------- */
.contact-wrap {
	text-align: left;
}

.contact-wrap .section-desc {
	color: var(--body-text);
	max-width: 66.6%;
	margin: 0 0 40px;
	font-size: 1.0625rem;
}

/* No outer card/border — the reference contact form floats directly
   on its section background with no bounding box. */
.contact-form {
	text-align: left;
	max-width: 75%;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

@media (min-width: 640px) {
	.form-row--2 { grid-template-columns: 1fr 1fr; }
}

.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field label {
	color: var(--charcoal);
	font-size: 0.875rem;
	font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
	background: var(--white);
	border: 1px solid var(--border);
	color: var(--charcoal);
	padding: 11px 14px;
	font-family: var(--font);
	font-size: 0.9375rem;
	border-radius: var(--radius);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.form-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8.825L0.575 3.4l0.85-0.85L6 7.125l4.575-4.575 0.85 0.85z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(255, 194, 14, 0.15);
}

.form-field textarea { resize: vertical; min-height: 110px;max-height: 150px;}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-light); }

.form-field select.is-placeholder { color: var(--text-light); }

.form-field select option:first-child { color: var(--text-light); }
.form-field select option:not(:first-child) { color: var(--charcoal); }

.contact-form .btn-primary { margin-top: 8px; width: auto; }

/* Contact Form 7 dynamic states — the static mockup never had these
   (validation errors, submit spinner, success/fail banner), so they're
   restyled here to match the site palette instead of CF7's defaults. */
.contact-form .wpcf7-not-valid-tip {
	color: #C0392B;
	font-size: 0.8125rem;
	font-weight: 500;
	margin-top: 4px;
}

.contact-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #C0392B;
}

.contact-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 0.9375rem;
	color: var(--charcoal);
}

.contact-form.sent .wpcf7-response-output {
	border-color: #2E7D32;
	color: #2E7D32;
}

.contact-form.failed .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output {
	border-color: #C0392B;
	color: #C0392B;
}

.contact-form.spam .wpcf7-response-output {
	border-color: #B8860B;
	color: #B8860B;
}

.contact-form.invalid .wpcf7-response-output,
.contact-form.unaccepted .wpcf7-response-output,
.contact-form.payment-required .wpcf7-response-output {
	border-color: var(--gold);
	color: var(--charcoal);
}

.contact-form .wpcf7-spinner {
	background-color: var(--navy);
	opacity: 1;
	margin: 0 0 0 16px;
	vertical-align: middle;
}

.contact-form .wpcf7-spinner::before {
	background-color: var(--gold);
}

.contact-wrap .contact-form span{
	color: #C0392B;
}
/* ---------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------- */
.footer {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.65);
	border-top: 3px solid var(--gold);
}

.footer-main {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 56px 0 32px;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

@media (min-width: 768px) {
	.footer-brand {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		justify-content: space-between;
	}
}

.footer-logo-img { height: 40px; width: auto; margin-bottom: 20px; }

@media (min-width: 768px) {
	.footer-logo-img { margin-bottom: 0; }
}

.footer-address strong {
	display: block;
	color: var(--white);
	font-size: 1rem;
	margin-bottom: 6px;
}

.footer-address span {
	display: block;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.6;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 0;
}

@media (min-width: 768px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}
}

.footer-bottom p {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
}

.footer-bottom a:hover { color: var(--gold); }

/* ---------------------------------------------------------------
   15. Back to top / utilities
   --------------------------------------------------------------- */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 90px;
	width: 46px;
	height: 46px;
	background: var(--gold);
	color: var(--navy);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: var(--transition);
	z-index: 999;
}

.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover { background: var(--gold-hover); }

/* ---------------------------------------------------------------
   16. Content pages (Privacy, Terms, Legal)
   --------------------------------------------------------------- */
.entry-header {
	margin: 0 auto 32px;
	padding-bottom: 20px;
	border-bottom: 3px solid var(--gold);
}

.entry-meta {
	color: var(--text-light);
	font-size: 0.875rem;
	margin: -20px 0 24px;
}

.entry-content {
	margin: 0 auto;
}

.entry-content h2 {
	margin: 40px 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.entry-content h2:first-child { margin-top: 0; }

.entry-content h3 {
	margin: 28px 0 12px;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin: 0 0 16px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 22px;
}

.entry-content li { margin-bottom: 8px; }

.entry-content strong { color: var(--navy); }

.entry-content a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content a:hover { color: var(--gold-hover); }

/* ---------------------------------------------------------------
   17. 404 / Error page
   --------------------------------------------------------------- */
/* Same faint technical-grid motif as .banner-section, tinted navy on
   off-white instead of gold on navy — ties the error page back to the
   brand without importing a photo or a whole new pattern. */
.error-404-section {
	position: relative;
	min-height: calc(100vh - var(--header-total) - 220px);
	display: flex;
	align-items: center;
	background-color: var(--off-white);
	background-size: 48px 48px;
}

.error-404-wrap {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.error-404-code {
	font-size: 5.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--gold);
	margin: 0 0 8px;
}

@media (min-width: 768px) {
	.error-404-code { font-size: 8.5rem; }
}

.error-404-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 16px;
}

@media (min-width: 768px) {
	.error-404-title { font-size: 2rem; }
}

.error-404-desc {
	max-width: 480px;
	margin: 0 auto 32px;
	font-size: 1.0625rem;
}

.error-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

@media (max-width: 480px) {
	.error-404-actions { flex-direction: column; }
	.error-404-actions .btn { width: 100%; }
}