/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
	font-family: 'Aktiv Grotesk';
	src: url('../fonts/Aktiv.Grotesk/OTF/AktivGrotesk-Regular.otf') format('opentype'),
		 url('../fonts/Aktiv.Grotesk/TTF/AktivGrotesk-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aktiv Grotesk';
	src: url('../fonts/Aktiv.Grotesk/OTF/AktivGrotesk-Italic.otf') format('opentype'),
		 url('../fonts/Aktiv.Grotesk/TTF/AktivGrotesk-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Aktiv Grotesk';
	src: url('../fonts/Aktiv.Grotesk/OTF/AktivGrotesk-Medium.otf') format('opentype'),
		 url('../fonts/Aktiv.Grotesk/TTF/AktivGrotesk-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aktiv Grotesk';
	src: url('../fonts/Aktiv.Grotesk/OTF/AktivGrotesk-Bold.otf') format('opentype'),
		 url('../fonts/Aktiv.Grotesk/TTF/AktivGrotesk-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aktiv Grotesk';
	src: url('../fonts/Aktiv.Grotesk/OTF/AktivGrotesk-Black.otf') format('opentype'),
		 url('../fonts/Aktiv.Grotesk/TTF/AktivGrotesk-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: 'Aktiv Grotesk', Arial, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: #222222;
	background-color: #ffffff;
	min-height: 100vh;
	width: 100%;
	/* Absolutely-positioned children (e.g. .service-panel) can round up to
	   1-2px past their container on some zoom levels; without this a
	   horizontal scrollbar would appear, shrinking the viewport *after*
	   services-expand.js already measured it — a feedback loop that pushes
	   the row's own edges out of alignment with everything else. */
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ==========================================================================
   Scroll reveal (site-wide): elements start hidden/shifted left and only
   animate in once main.js's IntersectionObserver sees them enter the
   viewport — never on page load for content below the fold. Stack a
   .reveal-delay-N class on siblings for a left-to-right stagger. */

.reveal {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-delay-1 {
	transition-delay: 0.15s;
}

.reveal-delay-2 {
	transition-delay: 0.3s;
}

.reveal-delay-3 {
	transition-delay: 0.45s;
}

.reveal-delay-4 {
	transition-delay: 0.6s;
}

/* Vertical counterpart to .reveal — drops in from above instead of
   sliding in from the left. Same .is-visible trigger, same delay
   classes; main.js observes both together. */
.reveal-down {
	opacity: 0;
	transform: translateY(-40px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-down.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* sticky (not static) so the header stays pinned to the top on every
   page as you scroll, instead of scrolling away with the content. It
   still reserves its own space in normal flow like a static header
   would, so no other section needs extra top padding to compensate. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	width: 100%;
	background-color: #ffffff;
	padding: 24px 0;
}

/* Used on pages that start with a full-bleed hero (see $heroHeader in
   header.php): the header floats transparently over the hero image
   instead of sitting in a solid bar above it. fixed (not sticky) here
   because it must NOT reserve space in normal flow — that space is
   exactly what lets it overlap the hero in the first place — but it
   still needs to stay pinned to the viewport while scrolling, so fixed
   is the one that keeps it visible everywhere, same as the sticky
   header does on interior pages. */
.site-header--overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 40;
	background-color: transparent;
}

.header-inner {
	display: flex;
	align-items: center;
}

/* Part 1: the white capsule holding logo + nav. Its right corner uses a
   small radius (not a full pill) so it sits almost flush against the
   divider instead of leaving a big rounded gap above/below it. */
.nav-pill {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px;
	padding: 28px;
	background-color: #000000;
	border-radius: 999px;
}

/* Part 2: the small connector image, sitting on its own between the pill
   and the button, vertically centered. Slightly taller than the pill's
   small inner radius (12px) and pulled in a hair on each side so its
   flat edges fully cover that corner curve with no black showing through. */
.nav-divider {
	flex-shrink: 0;
	display: block;
	height: 24px;
	width: auto;
	margin: 0 -2px;
	position: relative;
	z-index: 1;
}

.logo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

.logo-img {
	height: 58px;
	width: auto;
	border-radius: 6px;
}

.site-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: 60px;
}

.site-nav a {
	font-size: 18px;
	font-weight: 500;
	color: #ffffff;
}

.site-nav a:hover {
	opacity: 0.6;
}

/* Part 3: the button, standing on its own. Its left corner mirrors the
   pill's small inner radius so it meets the divider the same way. */
.contact-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 30px;
	border: 8px solid #000000;
	border-radius: 999px;
	background-color: #4CAF50;
	color: #ffffff;
	font-size: 18px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.contact-btn:hover {
	background-color: #43a047;
}

/* ==========================================================================
   Main
   ========================================================================== */

.site-main {
	width: 100%;
	min-height: 70vh;
}

/* Simple page header for interior pages (about, contact) that don't use
   the full-bleed video hero below. */
.page-hero {
	width: 100%;
	padding: 80px 0;
	text-align: center;
}

.page-hero h1 {
	font-size: 40px;
	font-weight: 500;
	margin-bottom: 12px;
}

.page-hero p {
	font-size: 17px;
	color: #555555;
}

/* Full-bleed hero: background photo, dark overlay for contrast, and the
   transparent header (see .site-header--overlay) floats on top of it. */
.hero {
	position: relative;
	width: 100%;
	min-height: 85vh;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	color: #ffffff;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero-bg img,
.hero-bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 60px;
	padding: 160px 20px 60px;
}

.hero-content {
	max-width: 600px;
}

.hero-content h1 {
	font-size: 52px;
	font-weight: 500;
	line-height: 1.15;
	margin-bottom: 20px;
}

.hero-content p {
	font-size: 17px;
	line-height: 1.6;
	opacity: 0.9;
	max-width: 480px;
	margin-bottom: 32px;
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	border-radius: 999px;
	background-color: #4CAF50;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	/* Combined with .reveal's transition (not just background-color) so a
	   .btn-primary.reveal element still slides/fades in — a plain
	   "transition: background-color" here would otherwise fully replace
	   .reveal's transition instead of adding to it. */
	transition: background-color 0.2s ease, opacity 0.7s ease, transform 0.7s ease;
}

.btn-primary:hover {
	background-color: #43a047;
}

/* Pinned to the hero's own bottom edge (not centered with hero-content),
   sitting almost entirely on the photo — only its bottom edge grazes the
   section below, instead of hanging deep into the plain white area where
   it'd blend in and look disconnected. */
.hero-card {
	position: absolute;
	right: max(20px, calc((100% - 1600px) / 2 + 20px));
	bottom: -20px;
	z-index: 5;
	width: 380px;
	max-width: calc(100% - 40px);
	background-color: #ffffff;
	color: #222222;
	border-radius: 20px;
	padding: 24px;
	/* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); */
}

.hero-card h3 {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 16px;
}

.hero-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 20px;
}

.hero-stats {
	display: flex;
	gap: 24px;
	padding-top: 16px;
	border-top: 1px solid #eeeeee;
}

.hero-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hero-stat + .hero-stat {
	border-left: 1px solid #eeeeee;
	padding-left: 24px;
}

.hero-stat-value {
	font-size: 26px;
	font-weight: 500;
}

.hero-stat-label {
	font-size: 13px;
	color: #666666;
}

/* ==========================================================================
   Split intro (image left/right split section under the hero)
   ========================================================================== */

.split-intro {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	min-height: 680px;
	padding: 50px 0;
}

.split-intro-content {
	flex: 1 1 480px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	padding: 0 8%;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	background-color: #f2f3f5;
	color: #333333;
	font-size: 14px;
}

.split-intro-content h2 {
	font-size: 48px;
	font-weight: 500;
	line-height: 1.2;
	color: #111111;
}

.intro-video {
	position: relative;
	display: block;
	width: 190px;
	border-left: 4px solid #4CAF50;
	padding-left: 16px;
}

.intro-video img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	border-radius: 8px;
}

.play-btn {
	position: absolute;
	top: 50%;
	left: calc(50% + 8px);
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background-color: #ffffff;
	color: #4CAF50;
	font-size: 13px;
}

.split-intro-content p {
	max-width: 460px;
	font-size: 16px;
	line-height: 1.6;
	color: #555555;
}

.split-intro-media {
	flex: 1 1 480px;
}

.split-intro-media img {
	width: 82%;
	height: 100%;
	min-height: 400px;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Features row (reveal on scroll into view, left to right — see main.js
   for the IntersectionObserver that adds .is-visible per card)
   ========================================================================== */

.features {
	width: 100%;
	background-color: #eef0f7;
	padding: 60px 0;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.feature-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 300px;
	padding: 28px;
	background-color: #ffffff;
	border-radius: 6px;
	overflow: hidden;
}

.feature-icon {
	align-self: flex-end;
	display: inline-flex;
	width: 36px;
	height: 36px;
	color: #222222;
}

.feature-icon svg {
	width: 100%;
	height: 100%;
}

.feature-card h3 {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
	color: #111111;
}

.feature-card--media {
	padding: 0;
	justify-content: flex-end;
	border-radius: 0;
}

.feature-card--media img,
.feature-card--media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

/* An inset translucent box in the corner, not a full-width gradient bar. */
.feature-media-overlay {
	position: absolute;
	z-index: 1;
	right: 0px;
	/* bottom: 16px;
	left: 16px; */
	max-width: 280px;
	margin-left: auto;
	padding: 16px 20px;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 4px;
	color: #ffffff;
}

.feature-media-overlay p {
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 8px;
}

.feature-media-link {
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
}

/* ==========================================================================
   Services expand (GSAP ScrollTrigger scrub — see services-expand.js).
   Each .service-panel is an independent absolutely-positioned card; JS sets
   its width and x-position inline (starting overlapped/stacked, ending
   spread apart with a gap) so this only styles the visuals.
   ========================================================================== */

.services-expand {
	width: 100%;
	padding: 60px 0 80px;
	background-color: #eef0f7;
}

/* Shared white "section head" bar (title + tag) reused by the services
   and about-banner sections below. */
.services-expand-head,
.about-banner-head,
.steps-head,
.quote-head,
.testimonials-head,
.blog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 36px 40px;
	margin-bottom: 32px;
}

.services-expand-head h2,
.about-banner-head h2,
.steps-head h2,
.quote-head h2,
.testimonials-head h2,
.blog-head h2 {
	font-size: 40px;
	font-weight: 500;
}

.services-tag {
	font-size: 15px;
	font-weight: 500;
	color: #4CAF50;
	white-space: nowrap;
}

.services-expand-row {
	position: relative;
	width: 100%;
	height: 480px;
}

.service-panel {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
	padding: 20px;
}

.service-panel-media {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.service-panel-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.service-panel-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background-color: #4CAF50;
	color: #ffffff;
	font-size: 20px;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.service-panel:hover .service-panel-arrow {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.service-panel-caption {
	flex-shrink: 0;
	padding: 20px 16px;
	text-align: center;
}

.service-panel-caption h3 {
	font-size: 20px;
	font-weight: 500;
	color: #111111;
	margin-bottom: 6px;
}

.service-panel-caption p {
	font-size: 14px;
	color: #666666;
}

.services-more {
	margin-top: 24px;
	font-size: 15px;
	color: #444444;
}

.services-more a {
	color: #4CAF50;
	font-weight: 500;
	text-decoration: underline;
}

/* ==========================================================================
   About banner (full-bleed photo, play button, bottom-left caption + CTA)
   ========================================================================== */

.about-banner {
	width: 100%;
	padding: 60px 0 80px;
	background-color: #eef0f7;
}

.about-banner-media {
	position: relative;
	width: 100%;
	height: 790px;
	border-radius: 20px;
	overflow: hidden;
}

.about-banner-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 70%);
}

.about-banner-play {
	position: absolute;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.about-banner-play:hover {
	background-color: rgba(255, 255, 255, 0.4);
}

.about-banner-content {
	position: absolute;
	left: 40px;
	right: 130px;
	bottom: 40px;
	color: #ffffff;
}

.about-banner-content h2,
.about-banner-content h3 {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 20px;
}

.btn-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	background-color: #ffffff;
	color: #111111;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	transition: background-color 0.2s ease;
}

.btn-white:hover {
	background-color: #eeeeee;
}

.btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	background-color: #000000;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn-dark:hover {
	background-color: #222222;
}

/* Rectangular green button (not the full-pill .btn-primary used for page
   CTAs) — for pairing with .btn-dark inside forms/toolbars. */
.btn-accent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	background-color: #4CAF50;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn-accent:hover {
	background-color: #43a047;
}

/* ==========================================================================
   Stats / counters (cards drop in from above, numbers count up — see
   .reveal-down above and the counter logic in main.js)
   ========================================================================== */

.stats {
	width: 100%;
	padding: 0 0 80px;
	background-color: #eef0f7;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stat-card {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 40px 24px;
	text-align: center;
}

/* The window: only one row tall, everything else is clipped — the reel
   itself (.stat-number-track) is what actually holds the stacked values. */
.stat-number {
	display: block;
	overflow: hidden;
	height: 1.2em;
	line-height: 1.2em;
	font-size: 48px;
	font-weight: 500;
	color: #111111;
	margin-bottom: 12px;
}

.stat-number-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateY(0);
}

.stat-number-track span {
	display: block;
	height: 1.2em;
	line-height: 1.2em;
}

.stat-card p {
	font-size: 15px;
	color: #555555;
}

/* ==========================================================================
   Steps (GSAP ScrollTrigger stagger — see steps-reveal.js). Cards start
   shifted down/faded via inline GSAP styles and rise into place one by
   one once the grid scrolls into view.
   ========================================================================== */

.steps {
	width: 100%;
	padding: 100px 0 140px;
	background-color: #eef0f7;
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.step-card {
	background-color: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	padding-bottom: 32px;
}

.step-card img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
	margin-bottom: 28px;
}

.step-card h3 {
	font-size: 20px;
	font-weight: 500;
	color: #111111;
	padding: 0 20px;
	margin-bottom: 10px;
}

.step-card p {
	font-size: 14px;
	line-height: 1.6;
	color: #666666;
	padding: 0 20px;
}

/* ==========================================================================
   Quote (two-tone CTA bar + quick-estimate form)
   ========================================================================== */

.quote {
	width: 100%;
	padding: 60px 0 100px;
	background-color: #ffffff;
}

/* .quote-head shares the sitewide white "section head" style, which
   relies on contrast against a light section background to read as a
   box — but this section's own background is white, so it needs its
   own border to stay visibly defined. */
.quote-head {
	border: 1px solid #e2e4ea;
}

/* Diagonal seam: the left half overlaps the right by --cut with a
   slanted clip-path, instead of a plain vertical divider. */
.quote-cta-bar {
	--cut: 60px;
	display: flex;
	align-items: stretch;
	height: 76px;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 32px;
}

.quote-cta-half {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 18px;
	font-weight: 500;
}

.quote-cta-half--book {
	position: relative;
	z-index: 1;
	background-color: #4CAF50;
	margin-right: calc(var(--cut) * -1);
	padding-right: var(--cut);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.quote-cta-half--track {
	background-color: #000000;
	padding-left: var(--cut);
}

/* The outer wrapper: 30px padding + a gap so the form and image read as
   two separate cards, not one continuous panel. */
.quote-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 30px;
	background-color: #ffffff;
	border: 1px solid #e2e4ea;
	border-radius: 16px;
}

.quote-form-wrap {
	flex: 1 1 480px;
	background-color: #eef0f7;
	border: 1px solid #e2e4ea;
	border-radius: 12px;
	padding: 50px 60px;
}

.quote-form-wrap h3 {
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 32px;
}

.quote-field {
	display: block;
	margin-bottom: 20px;
}

.quote-field span {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #333333;
	margin-bottom: 8px;
}

.quote-field input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	color: #222222;
}

.quote-field input::placeholder {
	color: #999999;
}

.quote-dimensions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.quote-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
}

.quote-media {
	flex: 1 1 480px;
	border-radius: 12px;
	overflow: hidden;
}

.quote-media img {
	width: 100%;
	height: 100%;
	min-height: 500px;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Final CTA banner — reuses .about-banner-media/-overlay/-content (same
   full-bleed photo + gradient + bottom-left content pattern), just
   without the play button and without a section head above it.
   ========================================================================== */

.cta-banner {
	width: 100%;
	padding: 0 0 80px;
	background-color: #ffffff;
}

.cta-banner .container {
	max-width: 1800px;
}

/* ==========================================================================
   Testimonials — a continuous, seamless auto-scroll loop, not a
   click-through carousel. The card set is rendered twice (see the PHP
   loop in index.php) and the track animates from translateX(0) to
   translateX(-50%): since the duplicate is pixel-identical to the
   original, that exact halfway point is indistinguishable from the
   start, so the loop is seamless with no jump/reset.
   ========================================================================== */

.testimonials {
	width: 100%;
	padding: 100px 0 40px;
	background-color: #eef0f7;
	overflow: hidden;
}

/* One continuous white strip divided by border-right lines, not
   separate gapped/rounded cards. */
.testimonial-track-wrap {
	width: 100%;
	padding: 80px 0;
	background-color: #ffffff;
	overflow: hidden;
}

.testimonial-track {
	display: flex;
	align-items: stretch;
	width: max-content;
	animation: testimonial-scroll 40s linear infinite;
}

.testimonial-track-wrap:hover .testimonial-track {
	animation-play-state: paused;
}

/* No gap between cards, so the duplicate set starts at exactly half the
   track's total width — a plain -50% lines up perfectly (no correction
   needed, unlike when a gap was in play). */
@keyframes testimonial-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.testimonial-card {
	flex-shrink: 0;
	width: 640px;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-right: 1px solid #e5e5e5;
	padding: 40px;
}

.testimonial-person {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.testimonial-person img {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	object-fit: cover;
	flex-shrink: 0;
}

.testimonial-person h4 {
	font-size: 17px;
	font-weight: 500;
	color: #111111;
}

.testimonial-person span {
	font-size: 14px;
	color: #777777;
}

.testimonial-card h3 {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 16px;
}

.testimonial-card p {
	font-size: 15px;
	line-height: 1.6;
	color: #555555;
	margin-bottom: 24px;
}

.testimonial-brand {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid #eeeeee;
	font-size: 16px;
	font-weight: 500;
	color: #999999;
}

/* ==========================================================================
   Blog — each post is two separate stacked boxes (media card, then a
   title card below it with a visible gap), not one continuous card.
   ========================================================================== */

.blog {
	width: 100%;
	padding: 60px 0 100px;
	background-color: #eef0f7;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.blog-post {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.blog-post-media {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 20px;
}

.blog-post-author {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #96703f;
	margin-bottom: 12px;
}

.blog-post-media img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.blog-post-title {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 24px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
	color: #111111;
}

/* ==========================================================================
   Partner CTA — a homepage section (logo mark, tagline, CTA, image,
   social links), NOT part of the universal footer below it.
   ========================================================================== */

.partner-cta {
	width: 100%;
	height: 750px;
	background-color: #ffffff;
	padding: 0 0 60px;
}

.partner-cta-inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
	padding: 80px 0 60px;
}

.partner-cta-content {
	flex: 1 1 420px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* Smaller than elsewhere on purpose: the source SVG has its own black
   background baked in, which reads as a clean badge at nav-bar scale but
   as a heavy, cramped block on a plain white background if sized larger. */
.partner-logo img {
	height: 32px;
	width: auto;
	border-radius: 4px;
}

.partner-cta-content h2 {
	font-size: 48px;
	font-weight: 500;
	line-height: 1.15;
	color: #111111;
}

.partner-cta-media {
	flex: 1 1 380px;
	max-width: 500px;
}

.partner-cta-media img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.partner-social {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 12px;
}

.partner-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid #111111;
	border-radius: 999px;
	color: #111111;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.partner-social a svg {
	width: 18px;
	height: 18px;
}

.partner-social a:hover {
	background-color: #111111;
	color: #ffffff;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	width: 100%;
	height: 60px;
	border-top: 1px solid #e5e5e5;
}

.footer-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.header-inner {
		flex-direction: column;
		gap: 12px;
	}

	.nav-pill {
		flex-direction: column;
		height: auto;
		width: 100%;
		padding: 20px;
		border-radius: 24px;
		gap: 16px;
	}

	/* The pinch connector only makes sense between side-by-side elements. */
	.nav-divider {
		display: none;
	}

	.site-nav ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 20px;
	}

	.contact-btn {
		width: 100%;
		height: 48px;
		border-radius: 999px;
	}

	/* Stacked nav is too tall to float gracefully over the hero, so drop
	   back to a normal solid bar above it on small screens. */
	.site-header--overlay {
		position: static;
		background-color: #ffffff;
	}

	.hero {
		min-height: auto;
		margin-bottom: 0;
	}

	.hero-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		padding: 40px 20px 60px;
	}

	.hero-content h1 {
		font-size: 32px;
	}

	/* The bottom-edge cut only reads well against a tall, centered hero;
	   on the stacked mobile layout the card just sits in normal flow. */
	.hero-card {
		position: static;
		width: 100%;
		max-width: 100%;
	}

	.split-intro {
		min-height: auto;
	}

	.split-intro-content {
		padding: 50px 20px;
	}

	.split-intro-content h2 {
		font-size: 32px;
	}

	.split-intro-media img {
		min-height: 280px;
	}

	.features-grid {
		grid-template-columns: 1fr;
	}

	.feature-card {
		min-height: 220px;
	}

	.services-expand-head {
		padding: 24px;
	}

	.services-expand-head h2 {
		font-size: 28px;
	}

	/* !important overrides the inline width/transform GSAP sets in JS —
	   the overlap-and-separate effect only makes sense on a wide row, so
	   panels just stack normally here regardless of scroll position. */
	.services-expand-row {
		display: flex;
		flex-direction: column;
		gap: 12px;
		height: auto;
	}

	.service-panel {
		position: static !important;
		width: 100% !important;
		transform: none !important;
		height: 280px;
	}

	.about-banner-head {
		padding: 24px;
	}

	.about-banner-head h2 {
		font-size: 28px;
	}

	.about-banner-media {
		height: 420px;
	}

	.about-banner-play {
		width: 48px;
		height: 48px;
		right: 20px;
	}

	.about-banner-content {
		left: 20px;
		right: 20px;
		bottom: 24px;
	}

	.about-banner-content h2,
	.about-banner-content h3 {
		font-size: 22px;
	}

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

	.stat-number {
		font-size: 36px;
	}

	.steps-head {
		padding: 24px;
	}

	.steps-head h2 {
		font-size: 28px;
	}

	.steps-grid {
		grid-template-columns: 1fr;
	}

	.step-card img {
		height: 260px;
	}

	.quote-head {
		padding: 24px;
	}

	.quote-head h2 {
		font-size: 28px;
	}

	/* The diagonal seam only reads well when there's room for both
	   labels beside the slant; stack the two halves instead on mobile. */
	.quote-cta-bar {
		flex-direction: column;
		height: auto;
		border-radius: 12px;
	}

	.quote-cta-half {
		height: 56px;
	}

	.quote-cta-half--book {
		margin-right: 0;
		padding-right: 0;
		clip-path: none;
	}

	.quote-form-wrap {
		padding: 32px 20px;
	}

	.quote-form-wrap h3 {
		font-size: 26px;
	}

	.quote-dimensions {
		grid-template-columns: 1fr;
	}

	.quote-media img {
		min-height: 280px;
	}

	.testimonials-head {
		padding: 24px;
	}

	.testimonials-head h2 {
		font-size: 28px;
	}

	.testimonial-card {
		width: 300px;
		padding: 24px;
	}

	.blog-head {
		padding: 24px;
	}

	.blog-head h2 {
		font-size: 28px;
	}

	.blog-grid {
		grid-template-columns: 1fr;
	}

	.blog-post-media img {
		height: 220px;
	}

	.blog-post-title {
		font-size: 20px;
	}

	.partner-cta-inner {
		padding: 50px 0 30px;
	}

	.partner-cta-content h2 {
		font-size: 32px;
	}

	.partner-cta-media img {
		height: 220px;
	}

	/* The absolute bottom-right position only works when there's a wide
	   media column beside it to sit clear of; stack it in normal flow
	   instead on a narrow screen. */
	.partner-social {
		position: static;
		justify-content: center;
		width: 100%;
		margin-top: 8px;
	}
}