/*
 * Airshape Theme — base styles.
 *
 * Tokens pulled 1:1 from Figma Dev Mode (file hZWB1pwDpW6yq01i5kn4B3,
 * node 1:4281 "home"). Values are the file's own variable definitions
 * (get_variable_defs) plus the rendered dimensions of the header,
 * H1/Heading, portfolio card and footer components (get_design_context).
 */

/*
 * Self-hosted, open-license webfonts (Google Fonts / OFL) — matching the
 * exact families named in the Figma variables (font/familiy/title = DM
 * Sans, font/familiy/body = Inter). "PolySans Trial" (font/familiy/title-7)
 * is a paid/trial commercial font with no redistribution license; Space
 * Grotesk is substituted as an open equivalent for those title-7 usages
 * (portfolio card titles, testimonial author names) until a licensed
 * PolySans file is supplied.
 */
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/dm-sans-variable.woff2') format('woff2-variations'), url('../fonts/dm-sans-variable.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-variable.woff2') format('woff2-variations'), url('../fonts/inter-variable.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/space-grotesk-variable.woff2') format('woff2-variations'), url('../fonts/space-grotesk-variable.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* --- Colors ---
	   IMPORTANT: this whole page is dark-themed (confirmed via a full-page
	   get_screenshot render). "black/lighter" resolves to #ffffffbf (white
	   75%) for this page's variable mode — NOT the #151517 fallback baked
	   into Figma's generated React/Tailwind code, which is a stale default
	   and not the live resolved value from get_variable_defs. */
	--color-black-lighter: rgba(242, 239, 228, 0.75);
	--color-black-basic: #ffffff;
	--color-white-basic: #ffffff;
	--color-white-lighter: rgba(242, 239, 228, 0.75);
	--color-grey-basic: rgba(242, 239, 228, 0.5);
	--color-grey-lighter: rgba(242, 239, 228, 0.25);
	--color-grey-neutral-8: rgba(242, 239, 228, 0.08);
	--color-grey-neutral-16: rgba(242, 239, 228, 0.16);
	--color-grey-neutral-32: rgba(242, 239, 228, 0.32);
	--color-grey-neutral-48: rgba(242, 239, 228, 0.48);
	--color-headline-cream: #f2efe4;
	--color-demo8-primary: #4a4f49;
	--color-demo8-primary-hover: color-mix(in srgb, #4a4f49 78%, white 22%);
	--color-components-button: #151517;
	--color-components-border: rgba(242, 239, 228, 0.16);
	--color-components-page: #111013;
	--color-page-bg: #101014;

	/* --- Fonts --- */
	--font-title: 'DM Sans', sans-serif;
	/* Confirmed via live-demo getComputedStyle inspection: body/nav text
	   actually renders in the browser's system-font stack — "Inter" is
	   never loaded on the page at all (checked document.fonts), despite
	   the Figma token being named font/familiy/body: Inter. Matching
	   reality over the design-file token name per explicit instruction. */
	--font-body: -apple-system, 'system-ui', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--font-title-alt: 'Space Grotesk', 'DM Sans', sans-serif; /* stand-in for PolySans Trial (no redistribution license) */

	/* --- Type scale ---
	   h2/h3 sizes verified via live-demo getComputedStyle (not just the
	   Figma tokens): h3 measured 27.06px (Figma said 33.29px) — trusting
	   the live measurement per explicit instruction. h2 is NOT fluid on
	   the live site; it's fixed per Elementor breakpoint tier (48.96px
	   desktop / 36.256px @≤1366px / 31.33px @≤767px — see media queries
	   below and at the bottom of this file). */
	--font-size-h1: 90px;
	--font-size-h2: 48.96px;
	--font-size-h2-large: 56px;
	--font-size-h3: 27.06px;
	--font-size-h5: 19.08px;
	--font-size-body: 16.4px;
	--font-size-caption: 14.4px;
	--font-size-subtitle: 14.76px; /* measured via live-demo computed styles (Figma token said 13.76px) */

	/* --- Spacing scale --- */
	--spacing-0-5: 4px;
	--spacing-1: 8px;
	--spacing-2: 12px;
	--spacing-3: 16px;
	--spacing-4: 20px;
	--spacing-5: 24px;
	--spacing-7: 32px;
	--spacing-spacer: 28px;
	--spacing-grid-gutter-2x: 32px;
	--spacing-grid-gutter-3x: 48px;
	--spacing-grid-gutter-5x: 80px;
	--spacing-grid-gutter-6x: 96px;

	/* --- Radii --- */
	--radius-small: 8px;
	--radius-medium: 12px;
	--radius-large: 16px;
	--radius-xlarge: 20px;
	--radius-2xlarge: 24px;
	--radius-3xlarge: 28px;
	--radius-4xlarge: 32px;

	/* --- Sizing --- */
	--sizing-circle-medium: 56px;
	--sizing-button-medium: 44px;
	--sizing-button-large: 52px;
	--sizing-header-height: 120px;

	/* --- Layout --- */
	--container-default: 1312px;
	--container-full: 1456px;
	--page-frame: 1680px;

	/* --- Header floating overlay --- */
	--header-bg: rgba(255, 255, 255, 0.06);
	--header-radius: var(--spacing-grid-gutter-3x); /* 48px */
	--header-padding-y: var(--spacing-2);
	--header-padding-x: var(--spacing-4);
	--header-blur: 20px;
}

* {
	box-sizing: border-box;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-black-lighter);
	background: var(--color-components-page);
	/* The demo sets these on <body> — without them WebKit/Blink render
	   with subpixel antialiasing by default, which reads noticeably
	   heavier/bolder at regular-to-medium weights than the demo's crisper,
	   thinner text. This is the main driver behind the "too thick" look. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

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

.container {
	max-width: var(--container-full);
	margin: 0 auto;
	padding: 0 var(--spacing-spacer);
}

/* --- Floating header card ------------------------------------------------ */
/* Figma: I1:4484;3053:7785 "Header__Type8" — pill container, bg
   rgba(255,255,255,0.06), radius 48px (spacing/grid-gutter-3x),
   padding 12px 20px 12px 12px. */

.site-header-wrap {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding: var(--spacing-spacer);
}

.site-header--floating {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--container-full);
	padding: var(--header-padding-y) var(--header-padding-x) var(--header-padding-y) var(--spacing-2);
	background: var(--header-bg);
	backdrop-filter: blur(var(--header-blur));
	-webkit-backdrop-filter: blur(var(--header-blur));
	border-radius: var(--header-radius);
	color: var(--color-black-lighter);
}

.site-header__logo-bar {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 280px;
}

.site-header__hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sizing-circle-medium);
	height: var(--sizing-circle-medium);
	border-radius: var(--radius-4xlarge);
	background: var(--color-grey-neutral-8);
	color: var(--color-black-lighter);
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.site-header__logo img {
	height: 40px;
	width: auto;
}

.site-header__nav {
	display: flex;
}

.site-header__menu {
	display: flex;
	gap: var(--spacing-7);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.site-header__menu a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	/* Demo measures `normal` letter-spacing, cream at 75% (not white), and
	   a 1.6 line-height ratio. */
	letter-spacing: normal;
	line-height: 1.6;
	color: color-mix(in srgb, var(--color-headline-cream) 75%, transparent);
	white-space: nowrap;
}

.site-header__badge {
	white-space: nowrap;
}

.site-header__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	padding: var(--spacing-0-5) 6px;
	margin-left: 6px;
	border-radius: var(--radius-small);
	background: var(--color-components-button);
	color: var(--color-white-basic);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: -0.01em;
}

.site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--sizing-button-medium);
	padding: var(--spacing-2) var(--spacing-4);
	border-radius: var(--radius-4xlarge);
	background: var(--color-demo8-primary);
	/* Demo measures cream (not white), weight 500 (not 600), and no
	   letter-spacing (not -0.4px). */
	color: var(--color-headline-cream);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: normal;
}

/* --- Fluid typography ------------------------------------------------------ */
/* Verified against the live demo via getComputedStyle at 375/768/1024/1920px:
   font-size is EXACTLY 4.5vw (46.08px@1024, 86.4px@1920 — both = width*0.045)
   on desktop/tablet, unclamped, then jumps to a fixed ~49.2px below the
   Elementor mobile breakpoint (measured 49.2px @375px, still 34.56px=4.5vw
   @768px, so the switch sits at the standard 767px breakpoint). This
   replaces an earlier clamp() derived from Figma's raw frame ratio
   (5.357vw), which didn't match the shipped site. */

h1,
.section__heading--h1 {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 4.5vw;
	line-height: 1;
	max-width: 1100px;
	/* Measured on the live demo: -0.045em (tight), not the +0.01em this
	   had — opposite sign, so the letters were tracking apart instead of
	   tightening together. */
	letter-spacing: calc(.045em * -1);
	color: var(--color-headline-cream);
	margin: 0 auto var(--spacing-1);
	text-align: center;
}

@media (max-width: 767px) {
	h1,
	.section__heading--h1 {
		font-size: 49.2px;
	}
}

.section__eyebrow {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--font-size-subtitle);
	line-height: 1.6;
	/* Demo measures `normal` (0), not -0.01em. */
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: center;
	/* Demo measures cream at 50% opacity, not white at 75% — color-mix
	   (not a hardcoded rgba) so it still tracks --color-headline-cream's
	   own light-mode flip instead of staying cream on a light background. */
	color: color-mix(in srgb, var(--color-headline-cream) 50%, transparent);
	margin: 0 0 var(--spacing-1);
}

h2,
.section__heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h2);
	line-height: 1.05;
	letter-spacing: calc(.04em * -1);
	margin: 0 0 var(--spacing-3);
}

h3 {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h3);
	line-height: 1.15;
	letter-spacing: calc(.035em * -1);
}

.section__subheading {
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: 1.6;
	opacity: 0.8;
}

/* --- Sections -------------------------------------------------------------- */

.section {
	padding: var(--spacing-grid-gutter-5x) var(--spacing-spacer);
}

.section__inner {
	max-width: var(--container-full);
	margin: 0 auto;
}

.section--hero {
	background-size: cover;
	background-position: center;
}

/* --- Portfolio grid / card --------------------------------------------------- */
/* Figma "PortfolioArchive__Type2" (1:4292): radius/medium (12px), full-bleed
   cover thumbnail, gradient overlay rgba(16,16,24,.82) -> transparent,
   title in PolySans Trial Bold 26px white, tag in Inter Medium 16.4px @75%. */

/* Figma: 3 fixed columns of 464px in a 1456px container, 32px gutter
   (1456 = 3*464 + 2*32). A single demo item keeps its real card width
   instead of stretching to fill the row. */
.portfolio-grid,
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-grid-gutter-2x);
}

/* Asymmetric layout confirmed against the reference site's actual grid
   markup (vc_col-lg-8/-4 "double-width" items): row1 = wide+narrow,
   row2 = 3 narrow, row3 = wide+narrow (mirrored from row1, so item 6 is
   the wide one this time — item 7 auto-flows into the remaining narrow
   slot). Wide cards keep the row's height but double the width, so they
   get a landscape aspect ratio instead of the portrait ratio used by
   narrow cards. */
.portfolio-grid .portfolio-card:nth-child(1),
.portfolio-grid .portfolio-card:nth-child(6) {
	grid-column: span 2;
	aspect-ratio: 960 / 500;
}

@media (max-width: 900px) {
	.portfolio-grid,
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.portfolio-grid .portfolio-card:nth-child(1),
	.portfolio-grid .portfolio-card:nth-child(6) {
		grid-column: span 2;
		aspect-ratio: 464 / 300;
	}
}

@media (max-width: 600px) {
	.portfolio-grid,
	.services-grid {
		grid-template-columns: 1fr;
	}
	.portfolio-grid .portfolio-card:nth-child(1),
	.portfolio-grid .portfolio-card:nth-child(6) {
		grid-column: span 1;
		aspect-ratio: 464 / 500;
	}
}

.portfolio-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: var(--radius-medium);
	aspect-ratio: 464 / 500;
	background: var(--color-components-page);
	color: var(--color-white-basic);
}

.portfolio-card__image {
	position: absolute;
	inset: 0;
}

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

.portfolio-card__cursor {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 108px;
	height: 108px;
	padding: 0;
	border-radius: 50%;
	background: var(--color-headline-cream);
	color: var(--color-components-page);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.portfolio-card:hover .portfolio-card__cursor {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (hover: none) {
	.portfolio-card__cursor {
		display: none;
	}
}

.portfolio-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 16, 24, 0.82), rgba(16, 16, 24, 0));
	pointer-events: none;
}

.portfolio-card__title,
.portfolio-card__subtitle {
	position: relative;
	z-index: 1;
	padding: 0 var(--spacing-spacer);
}

.portfolio-card__title {
	/* Verified via live-demo getComputedStyle: DM Sans 500, not the
	   PolySans-substitute (title-alt) — the Figma component code named
	   PolySans, but that font isn't actually used on the shipped site. */
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 24.6px;
	letter-spacing: -0.738px;
	line-height: 1.2;
	/* With the subtitle hidden, the title is the card's last visible line
	   and needs its own breathing room above the card's bottom edge. */
	margin: 0 0 var(--spacing-spacer);
}

.portfolio-card__subtitle {
	/* Category line hidden per design direction — the card now shows only
	   the project title, plus the "Show project" cursor badge on hover. */
	display: none;
}

.service-card__icon {
	border-radius: var(--radius-large);
}

/* --- Footer ------------------------------------------------------------------ */
/* Figma "Footer" (1:4483): 4-col widget row, gutter-2x (32px) gap,
   footer/widget-gap 40px between widgets, top border components/border,
   30px vertical padding bottom bar. */

.site-footer {
	padding: var(--spacing-grid-gutter-5x) var(--spacing-spacer) 0;
	background: var(--color-components-page);
	color: var(--color-black-lighter);
	font-family: var(--font-body);
	font-weight: 400;
}

.site-footer strong {
	/* --color-black-basic is the theme-aware token (white in dark mode,
	   near-black in light mode) — --color-white-basic stays pure white in
	   both modes, which made bold footer text (addresses, emails) vanish
	   against the light-mode background. */
	color: var(--color-black-basic);
}

.site-footer__inner {
	max-width: var(--container-full);
	margin: 0 auto;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--spacing-grid-gutter-2x);
	margin-bottom: var(--spacing-grid-gutter-5x);
	align-items: flex-start !important;
}

.site-footer__column {
	align-items: flex-start !important;
	align-self: flex-start !important;
	margin-top: 0;
}

.site-footer__column:last-child,
.site-footer__column:last-child h3 {
	align-self: flex-start !important;
	margin-top: 0;
	padding-top: 0;
}

@media (max-width: 560px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
	}
}

.site-footer__columns ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__contact a,
.site-footer__contact address {
	display: block;
	font-size: var(--font-size-body);
	line-height: 1.7;
}

.site-footer__socials {
	display: flex;
	gap: var(--spacing-3);
	list-style: none;
	margin: 0 0 var(--spacing-grid-gutter-5x);
	padding: 0;
}

.site-footer__column p {
	font-size: var(--font-size-body);
	line-height: 1.7;
	letter-spacing: -0.01em;
	margin: 0 0 var(--sizing-footer-widget-gap, 40px);
}

.site-footer__cta-heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: calc(.035em * -1);
	color: var(--color-headline-cream);
	margin: 0 0 var(--spacing-3);
}

.button--footer-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-1);
	height: 44px;
	padding: 0 var(--spacing-4);
	border-radius: var(--radius-4xlarge);
	background: var(--color-demo8-primary);
	color: var(--color-headline-cream);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 15px;
}

.site-footer__socials-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 500;
	line-height: 1.7;
}

.site-footer__subscribe-field {
	position: relative;
	height: var(--sizing-button-medium);
	margin-bottom: var(--spacing-3);
}

.site-footer__subscribe-field input {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: var(--radius-medium);
	background: var(--color-grey-neutral-8);
	padding: 0 90px 0 var(--spacing-3);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-white-basic);
}

.site-footer__subscribe-field input::placeholder {
	color: var(--color-grey-basic);
}

.site-footer__subscribe-field button {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	padding: 0 var(--spacing-4);
	border: none;
	border-radius: var(--radius-medium);
	background: transparent;
	color: var(--color-black-lighter);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
}

.site-footer__checkbox {
	display: flex;
	gap: var(--spacing-1);
	align-items: flex-start;
	font-size: 14px;
	color: var(--color-grey-basic);
	line-height: 1.4;
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-grid-gutter-2x);
	padding: 30px 0;
	border-top: 1px solid var(--color-components-border);
	font-size: 14.76px;
	letter-spacing: -0.01em;
}

.site-footer__bottom .site-footer__links {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: var(--spacing-3);
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

/* Below 600px the copyright + legal links no longer fit on one line —
   the links list' nowrap forced the whole row wider than the viewport,
   which was also the site's main source of mobile horizontal scroll. */
@media (max-width: 600px) {
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-2);
	}

	.site-footer__bottom .site-footer__links {
		justify-content: flex-start;
		flex-wrap: wrap;
		white-space: normal;
	}
}

.site-footer__bottom .site-footer__links li {
	flex: 0 0 auto;
}

/* --- Section eyebrow (left-aligned variant) -------------------------------- */

.section__eyebrow--left {
	text-align: left;
}

/* --- Testimonials ------------------------------------------------------------ */
/* Figma 1:4348: card bg rgba(21,21,23,.96), radius xlarge (20px), padding
   grid-gutter-3x (48px), over a full-bleed background photo. */

.section--testimonials {
	position: relative;
	padding: 0;
	/* Fixed to the card's own height (padding + the card's fixed 460px, see
	   .testimonial-card) so the <img> below always has a stable box to
	   cover — no size that could vary and skew its rendered aspect ratio. */
	height: 620px;
	overflow: hidden;
}

.testimonial-bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	/* object-fit: cover crops to fill the box, same aspect ratio always —
	   this is what actually prevents the stretch/distortion, not the box
	   around it. */
	object-fit: cover;
	object-position: center;
}

.testimonial-slider {
	position: relative;
	z-index: 1;
	max-width: var(--container-full);
	margin: 0 auto;
	padding: var(--spacing-grid-gutter-5x) var(--spacing-spacer);
}

.testimonial-card {
	max-width: 700px;
	/* Fixed, not min-height — a longer review must not grow the card (and
	   with it the whole section), or the page reflows/jumps on every
	   slide change. The quote itself is clamped below so long text is
	   truncated instead of overflowing this box. */
	height: 460px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: rgba(21, 21, 23, 0.96);
	border-radius: var(--radius-xlarge);
	padding: var(--spacing-grid-gutter-3x);
	color: var(--color-white-basic);
}

/* The [hidden] attribute is how main.js swaps slides, but the class rule
   above sets its own `display`, which in the cascade beats the browser's
   built-in `[hidden] { display: none }` UA rule — without this override
   every slide rendered at once instead of one at a time. */
.testimonial-card[hidden] {
	display: none;
}

.testimonial-card {
	transition: opacity 0.25s ease;
	opacity: 1;
}

.testimonial-card.is-fading {
	opacity: 0;
}

.testimonial-card__tag {
	display: inline-flex;
	/* Flex items stretch to the container's cross-axis width by default —
	   .testimonial-card is a column flex container, so without this the
	   tag's own inline-flex sizing was overridden to full card width. */
	align-self: flex-start;
	width: fit-content;
	padding: var(--spacing-0-5) var(--spacing-2);
	border-radius: var(--radius-large);
	background: var(--color-grey-neutral-16);
	font-size: var(--font-size-caption);
	font-weight: 500;
	margin-bottom: var(--spacing-3);
}

.testimonial-card__quote {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: calc(.035em * -1);
	color: var(--color-headline-cream);
	margin: 0 0 var(--spacing-5);
	/* Clamp instead of letting a long review push the card taller — keeps
	   every slide the same fixed height regardless of quote length. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	margin-bottom: var(--spacing-4);
}

.testimonial-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial-card__name {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: var(--font-size-body);
	margin: 0;
}

.testimonial-card__role {
	font-size: 15.58px;
	color: var(--color-black-lighter);
	margin: 0;
}

.testimonial-card__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--spacing-5);
}

.testimonial-card__count {
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 15px;
}

.testimonial-card__rule {
	width: 36px;
	height: 2px;
	background: var(--color-grey-lighter);
}

.testimonial-card__arrows {
	display: flex;
	gap: var(--spacing-1);
}

.testimonial-card__prev,
.testimonial-card__next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	border: 1px solid var(--color-grey-neutral-32);
	background: transparent;
	color: var(--color-white-basic);
	cursor: pointer;
}

.testimonial-card__prev:hover,
.testimonial-card__next:hover {
	background: var(--color-grey-neutral-16);
	border-color: var(--color-grey-lighter);
}

/* --- Logos grid ---------------------------------------------------------------- */
/* Figma 1:4355: 340px intro column + 3-col grid, cards h160px, border
   grey/neutral-32%, radius xlarge (20px). */

.logos-grid-layout {
	display: flex;
	gap: var(--spacing-grid-gutter-2x);
	align-items: flex-start;
}

.logos-grid-layout__intro {
	width: 340px;
	flex-shrink: 0;
}

.section--logos-grid .section__heading {
	font-size: var(--font-size-h3);
	line-height: 1.15;
	letter-spacing: calc(.035em * -1);
}

.logos-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-grid-gutter-2x);
}

.logos-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 160px;
	border: 1px solid var(--color-grey-neutral-32);
	border-radius: var(--radius-xlarge);
}

.logos-grid__item img {
	max-height: 54px;
	width: auto;
	filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
	.logos-grid-layout {
		flex-direction: column;
		align-items: stretch; /* was flex-start, which shrink-wrapped .logos-grid to content width */
	}
	.logos-grid-layout__intro {
		width: 100%;
	}
	.logos-grid {
		width: 100%;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.logos-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Video / Stats -------------------------------------------------------------- */
/* Figma 1:4383: bordered card (grey/neutral-32%, radius xlarge), 56px DM
   Sans heading with a 50%-opacity dimmed portion, progress bar with
   percentage tooltip. */

.video-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-grid-gutter-2x);
	align-items: stretch;
}

.video-stats__col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	padding: var(--spacing-grid-gutter-3x);
	border: 1px solid var(--color-grey-neutral-32);
	border-radius: var(--radius-xlarge);
}

.video-stats__col--media {
	padding: 0;
	overflow: hidden;
	border: none;
}

.video-stats__col--media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-xlarge);
}

.video-stats__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50px;
	background: var(--color-demo8-primary);
	color: var(--color-white-basic);
	box-shadow: 0 0 0 12px rgba(144, 145, 156, 0.2);
}

.video-stats__heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h2-large);
	line-height: 1.05;
	letter-spacing: calc(.04em * -1);
	color: var(--color-headline-cream);
	margin: 0;
}

.video-stats__dim {
	color: rgba(255, 255, 255, 0.5);
}

.video-stats__progress-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h5);
	color: var(--color-headline-cream);
	margin-bottom: var(--spacing-0-5);
}

.video-stats__progress-tooltip {
	background: var(--color-components-button);
	color: var(--color-white-basic);
	font-size: 12.6px;
	font-weight: 500;
	padding: var(--spacing-0-5) var(--spacing-1);
	border-radius: 8px;
}

.video-stats__progress-track {
	height: 4px;
	border-radius: 4px;
	background: var(--color-grey-neutral-16);
	overflow: hidden;
}

.video-stats__progress-fill {
	height: 100%;
	background: var(--color-demo8-primary);
	border-radius: 2px;
}

.video-stats__description {
	font-size: var(--font-size-body);
	line-height: 1.6;
	color: var(--color-black-lighter);
	margin: 0;
}

.button--video-stats {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-1);
	align-self: flex-start;
	height: 52px;
	padding: var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-3);
	border-radius: var(--radius-3xlarge);
	background: var(--color-demo8-primary);
	color: var(--color-headline-cream);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 16px;
}

@media (max-width: 900px) {
	.video-stats {
		grid-template-columns: 1fr;
	}
}

/* --- Stats cards ------------------------------------------------------------------ */
/* Figma 1:4432: "light" = frosted glass rgba(255,255,255,.65) + blur(7px);
   "dark" = solid rgba(74,79,73,.96). Both radius xlarge (20px). */

.section--stats-cards {
	background-size: cover;
	background-position: center;
	background-image: var(--stats-bg, none);
	min-height: 640px;
	padding-top: calc(var(--spacing-grid-gutter-5x) + 48px);
	display: flex;
	align-items: flex-end;
	padding-bottom: 75px;
}

.section--stats-cards .section__inner {
	width: 100%;
}

.stats-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-grid-gutter-2x);
	max-width: 728px;
	margin-block: 0;
	margin-inline-start: max(0px, calc((100% - var(--container-full)) / 2));
	margin-inline-end: auto;
}

.stats-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	padding: var(--spacing-spacer);
	border-radius: var(--radius-xlarge);
}

.stats-card--light {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	color: var(--color-components-page);
}

.stats-card--dark {
	background: rgba(74, 79, 73, 0.96);
	color: var(--color-headline-cream);
}

.stats-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.stats-card__heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h3);
	line-height: 1.15;
	letter-spacing: calc(.035em * -1);
	margin: 0;
}

.stats-card__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: var(--color-components-button);
	color: var(--color-white-basic);
	flex-shrink: 0;
}

.stats-card__label {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	opacity: 0.75;
}

.stats-card--light .stats-card__label {
	color: var(--color-black-lighter-inverse, #151517);
	opacity: 1;
}

.stats-card__value {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h2);
	line-height: 1.15;
	letter-spacing: calc(.04em * -1);
	margin: 0;
}

@media (max-width: 700px) {
	.stats-cards {
		grid-template-columns: 1fr;
	}
}

/* --- Contact + FAQ -------------------------------------------------------------- */
/* Figma 1:4454: form card bg demo-8/primary, radius xlarge; FAQ card
   bordered grey/neutral-32%, first accordion row open (bg
   grey/neutral-8%). */

.contact-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-grid-gutter-2x);
	/* Stretch (not start) — the two columns' own content is never the same
	   height, so "start" let them sit at their own independent heights.
	   Stretching both to the grid row's height (which is at minimum
	   min-height on each, or taller if either needs more) keeps them
	   pixel-equal regardless of which one has more content. */
	align-items: stretch;
}

.contact-faq__form-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-spacer);
	padding: var(--spacing-grid-gutter-3x);
	border-radius: var(--radius-xlarge);
	background: var(--color-demo8-primary);
	color: var(--color-headline-cream);
	min-height: 620px;
	box-sizing: border-box;
}

.contact-faq__form-col .section__heading {
	color: var(--color-headline-cream);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
	margin-bottom: 20px;
}

.contact-form__field:last-of-type {
	margin-bottom: 0;
}

.contact-form__field label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--font-size-caption);
	color: var(--color-black-lighter);
}

/* CF7 wraps every field in its own <span class="wpcf7-form-control-wrap">
   — without this it's the span, not the field, that ends up as the flex
   item, and the input/select/textarea inside it won't stretch to fill the
   row's width on its own. */
.contact-form__field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--radius-medium);
	background: transparent;
	color: var(--color-white-basic);
	padding: 0 var(--spacing-3);
	height: 44px;
	font-family: var(--font-body);
	font-size: 15.6px;
}

.contact-form__field textarea {
	height: 120px;
	padding: var(--spacing-3);
	resize: vertical;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
	color: var(--color-grey-basic);
}

/* CF7's [acceptance] tag renders its own <label><input>...<span
   class="wpcf7-list-item-label">text</span></label> — nested inside
   wpcf7-form-control-wrap/wpcf7-form-control/wpcf7-list-item spans we
   don't control the markup of, so these target by row + tag/attribute
   rather than a class on the label itself. */
.contact-form__row--checkbox {
	margin-bottom: 20px;
}

.contact-form__row--checkbox label {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	font-size: 14px;
	color: var(--color-black-lighter);
	line-height: 1.45;
	cursor: pointer;
}

.contact-form__row--checkbox .wpcf7-list-item-label {
	display: block;
}

.contact-form__row--checkbox a {
	text-decoration: underline;
}

/* Round checkboxes — contact form, subscribe banner and footer subscribe
   all share this: a plain ring normally, filled green with a white
   checkmark once checked (custom-drawn since appearance:none drops the
   browser's native tick). */
.contact-form__row--checkbox input[type='checkbox'],
.newsletter__checkbox input[type='checkbox'],
.site-footer__checkbox input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 50%;
	border: 1px solid var(--color-grey-neutral-48);
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact-form__row--checkbox input[type='checkbox']:checked,
.newsletter__checkbox input[type='checkbox']:checked,
.site-footer__checkbox input[type='checkbox']:checked {
	background-color: var(--color-demo8-primary);
	border-color: var(--color-demo8-primary);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.3L6.3 11L12.5 4.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
}

.button--form {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-1);
	align-self: flex-start;
	height: 52px;
	padding: 0 var(--spacing-5);
	border: none;
	border-radius: var(--radius-3xlarge);
	background: var(--color-headline-cream);
	color: var(--color-demo8-primary);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
}

.contact-faq__faq-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--spacing-grid-gutter-2x);
	padding: var(--spacing-grid-gutter-3x);
	border: 1px solid var(--color-grey-neutral-32);
	border-radius: var(--radius-xlarge);
	min-height: 620px;
	box-sizing: border-box;
}

.contact-faq__faq-intro h3 {
	margin: 0;
	letter-spacing: calc(.035em * -1);
}

.accordion__item {
	border-radius: var(--radius-xlarge);
	overflow: hidden;
}

.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-spacer);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 18px;
	color: var(--color-headline-cream);
}

.accordion__item.is-open .accordion__trigger,
.accordion__item.is-open .accordion__panel {
	background: var(--color-grey-neutral-8);
}

.accordion__item.is-open .accordion__trigger {
	border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0;
}

.accordion__item.is-open .accordion__panel {
	border-radius: 0 0 var(--radius-xlarge) var(--radius-xlarge);
}

.accordion__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 24px;
	background: var(--color-grey-neutral-8);
	flex-shrink: 0;
	position: relative;
}

.accordion__icon::before,
.accordion__icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	color: var(--color-headline-cream);
}

.accordion__icon::before {
	width: 12px;
	height: 2px;
}

.accordion__icon::after {
	width: 2px;
	height: 12px;
}

.accordion__icon::before {
	transition: transform 0.25s ease;
}

.accordion__item.is-open .accordion__icon::after {
	transform: rotate(90deg);
	opacity: 0;
}

.accordion__trigger:hover .accordion__icon {
	background: var(--color-grey-neutral-16);
}

/* Grid-rows trick: animates from 0fr to 1fr without needing JS to measure
   height, and degrades gracefully (no animation, but still functional) on
   browsers without grid-template-rows transition support. */
.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.accordion__item.is-open .accordion__panel {
	grid-template-rows: 1fr;
}

.accordion__panel-inner {
	overflow: hidden;
}

.accordion__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--color-black-lighter);
	font-size: var(--font-size-body);
	line-height: 1.6;
	padding: var(--spacing-0-5) var(--spacing-spacer) var(--spacing-4);
}

.accordion__content p {
	margin: 0;
}

.contact-faq__more {
	color: var(--color-black-lighter);
	font-size: var(--font-size-body);
}

.contact-faq__more a {
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 900px) {
	.contact-faq {
		grid-template-columns: 1fr;
	}

	.contact-faq__form-col {
		min-height: 0;
	}
}

/* --- CTA strip --------------------------------------------------------------------- */
/* Figma 1:4304: 1332px-wide heading, font-size/H2 (48.96px), a trailing
   50%-dimmed span, demo-8/primary pill button below. */

.cta-strip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-7);
	max-width: 1332px;
}

.cta-strip__heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h2);
	line-height: 1.05;
	letter-spacing: calc(.04em * -1);
	color: var(--color-headline-cream);
	margin: 0;
}

.cta-strip__dim {
	color: rgba(255, 255, 255, 0.5);
}

.button--cta-strip {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-1);
	height: 52px;
	padding: var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-3);
	border-radius: var(--radius-3xlarge);
	background: var(--color-demo8-primary);
	color: var(--color-headline-cream);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 16px;
}

/* --- Newsletter subscribe banner ----------------------------------------------------- */
/* Figma 1:4467: container bg grey/neutral-8%, radius xlarge (20px),
   padding grid-gutter-3x/5x. Form capped at 416px. */

.section--newsletter {
	padding-top: 0;
	padding-bottom: var(--spacing-grid-gutter-5x);
}

.newsletter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-grid-gap, 32px);
	background: var(--color-grey-neutral-8);
	border-radius: var(--radius-xlarge);
	padding: var(--spacing-grid-gutter-5x) var(--spacing-grid-gutter-3x);
}

.newsletter__heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h2);
	line-height: 1.05;
	letter-spacing: calc(.04em * -1);
	color: var(--color-headline-cream);
	margin: 0;
}

.newsletter__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-spacer);
}

.newsletter__text {
	font-size: var(--font-size-body);
	line-height: 1.6;
	color: var(--color-black-lighter);
}

.newsletter__text strong {
	color: var(--color-white-basic);
}

.newsletter__field {
	position: relative;
	height: var(--sizing-button-medium);
	max-width: 416px;
	margin-bottom: var(--spacing-3);
}

/* CF7 wraps the email field in its own <span class="wpcf7-form-control-wrap">
   — the submit button isn't wrapped, it renders as a plain sibling
   <input type="submit">, so it's unaffected by this. */
.newsletter__field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	height: 100%;
}

.newsletter__field input[type='email'] {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: var(--radius-medium);
	background: var(--color-grey-neutral-8);
	padding: 0 90px 0 var(--spacing-3);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-white-basic);
}

.newsletter__field input[type='email']::placeholder {
	color: var(--color-grey-basic);
}

.newsletter__field input[type='submit'] {
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	height: auto;
	padding: 0 var(--spacing-4);
	border: none;
	border-radius: calc(var(--radius-medium) - 4px);
	background: var(--color-headline-cream);
	color: var(--color-components-page);
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.newsletter__field input[type='submit']:hover {
	background: var(--color-demo8-primary-hover);
	color: var(--color-white-basic);
}

.newsletter__checkbox {
	display: flex;
	gap: var(--spacing-1);
	max-width: 416px;
	font-size: 14.76px;
	color: var(--color-black-lighter);
	line-height: 1.5;
}

.newsletter__checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-1);
	cursor: pointer;
}

@media (max-width: 900px) {
	.newsletter {
		grid-template-columns: 1fr;
	}
}

/* --- Marquee ticker -------------------------------------------------------------- */
/* Figma 1:4310: bg grey/neutral-8%, words DM Sans Medium, font-size/H2
   (48.96px), tracking 0.9792px, separated by ✦ glyphs. */

.section--marquee {
	padding: var(--spacing-grid-gutter-5x) 0;
	background: var(--color-grey-neutral-8);
	overflow: hidden;
}

.marquee__track {
	display: flex;
	align-items: center;
	gap: var(--spacing-5);
	width: max-content;
	animation: airshape-marquee 30s linear infinite;
}

@keyframes airshape-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.marquee__word {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h2);
	line-height: 1.05;
	letter-spacing: calc(.04em * -1);
	color: var(--color-black-lighter);
	white-space: nowrap;
}

.marquee__sep {
	font-size: 14px;
	color: var(--color-black-lighter);
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}
}

/* --- Two-column text block ------------------------------------------------------- */
/* Figma 1:4332 "Built for the work, not the overhead.": eyebrow + 1px
   divider (grey/neutral-32%) + 712px 56px-heading col beside two narrow
   body columns. */

.text-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-grid-gutter-2x);
	align-items: center;
}

.text-columns__heading-col {
	width: 712px;
	max-width: 100%;
	flex-shrink: 0;
}

.text-columns__rule {
	border: none;
	border-top: 1px solid var(--color-grey-neutral-32);
	margin: var(--spacing-2) 0;
}

.text-columns__heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-h2-large);
	line-height: 1.05;
	letter-spacing: calc(.04em * -1);
	color: var(--color-headline-cream);
	margin: 0;
}

.text-columns__dim {
	color: rgba(255, 255, 255, 0.5);
}

.text-columns__col {
	flex: 1;
	min-width: 220px;
	font-size: var(--font-size-body);
	line-height: 1.6;
	color: var(--color-black-lighter);
}

/* --- Banner row -------------------------------------------------------------------- */
/* Figma 1:4341: 4 equal columns, h420px, radius xlarge (20px); "outline" =
   transparent + grey/neutral-32% border, "solid" = demo-8/primary fill. */

.banner-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-grid-gutter-2x);
}

.banner-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 420px;
	padding: var(--spacing-spacer);
	border-radius: var(--radius-xlarge);
	overflow: hidden;
}

.banner-card__hover-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity 0.45s ease, transform 0.45s ease;
	z-index: 0;
}

.banner-card__hover-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 16, 20, 0.9), rgba(16, 16, 20, 0.35));
}

.banner-card:hover .banner-card__hover-image {
	opacity: 1;
	transform: scale(1);
}

.banner-card__top,
.banner-card__bottom {
	position: relative;
	z-index: 1;
}

.banner-card--outline {
	border: 1px solid var(--color-grey-neutral-32);
}

.banner-card--solid {
	background: var(--color-demo8-primary);
}

.banner-card__heading {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: calc(.035em * -1);
	color: var(--color-headline-cream);
	margin: 0;
}

.banner-card__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-3);
}

.banner-card__description {
	font-size: var(--font-size-body);
	line-height: 1.6;
	color: var(--color-black-lighter);
	margin: 0;
}

.banner-card__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 30px;
	background: var(--color-grey-neutral-16);
	color: var(--color-white-basic);
	flex-shrink: 0;
}

.banner-card--solid .banner-card__arrow {
	background: var(--color-components-button);
}

@media (max-width: 1100px) {
	.banner-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.banner-row {
		grid-template-columns: 1fr;
	}
}

.button--cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-1);
	height: var(--sizing-button-large);
	padding: 0 var(--spacing-4);
	border-radius: var(--radius-4xlarge);
	/* Matches its sibling CTA buttons (cta-strip, video-stats, footer-cta),
	   which all use the sage-green demo8 token rather than near-black. */
	background: var(--color-demo8-primary);
	color: var(--color-headline-cream);
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 16px;
}

/* =========================================================================
   Micro-interactions & animations
   ========================================================================= */

* {
	transition-timing-function: ease;
}

a,
button {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* --- Scroll reveal (fade + rise), progressively enhanced via main.js --- */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Header ------------------------------------------------------------- */

.site-header--floating {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header__hamburger,
.site-header__cta,
.site-header__badge {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-header__hamburger:hover {
	background: var(--color-grey-neutral-16);
}

.site-header__cta {
	transition: background-color 0.25s ease, color 0.25s ease;
}

.site-header__cta:hover {
	background: var(--color-headline-cream);
	color: var(--color-components-page);
}

.site-header__menu a {
	transition: color 0.2s ease;
}

.site-header__menu a:hover {
	color: #ffffff;
}

/* --- Portfolio & service cards -------------------------------------------- */

.portfolio-card {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-card:hover {
	transform: translateY(-6px);
}

.portfolio-card__image img {
	transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-card__image img {
	transform: scale(1.06);
}

.service-card {
	transition: transform 0.3s ease;
}

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

/* --- Logos grid, banners, stats cards -------------------------------------- */

.logos-grid__item {
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.logos-grid__item:hover {
	border-color: var(--color-grey-lighter);
	transform: translateY(-3px);
}

.logos-grid__item img {
	transition: opacity 0.25s ease;
	opacity: 0.85;
}

.logos-grid__item:hover img {
	opacity: 1;
}

.banner-card {
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.banner-card--outline:hover {
	border-color: var(--color-grey-lighter);
	transform: translateY(-4px);
}

.banner-card--solid:hover {
	transform: translateY(-4px);
}

.banner-card__arrow {
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.banner-card:hover .banner-card__arrow {
	transform: rotate(45deg);
}

.stats-card {
	transition: transform 0.3s ease;
}

.stats-card:hover {
	transform: translateY(-4px);
}

.stats-card__arrow {
	transition: transform 0.25s ease;
}

.stats-card:hover .stats-card__arrow {
	transform: rotate(45deg);
}

/* --- Buttons --------------------------------------------------------------- */

.button--cta,
.button--cta-strip,
.button--video-stats,
.button--footer-cta,
.button--form,
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
	transition: background-color 0.25s ease, color 0.25s ease, filter 0.25s ease, border-color 0.2s ease;
}

/* No lift/scale on hover — only the background tone shifts (to the
   -hover token) and the arrow icon animates via airshape-icon-move. */
.button--cta:hover,
.button--cta-strip:hover,
.button--video-stats:hover,
.button--footer-cta:hover {
	background: var(--color-demo8-primary-hover);
}

/* Same no-lift treatment, via filter since this button's base color
   (cream, not the demo8-primary green) doesn't have its own -hover token. */
.button--form:hover {
	filter: brightness(0.94);
}

/* Icon slide-out/slide-in swap, matching the reference site's actual
   `.button:hover .icon { animation: iconMove ... }` keyframe (read from
   its stylesheet) rather than a plain color change. */
@keyframes airshape-icon-move {
	0% {
		transform: translateX(0);
	}
	30% {
		opacity: 0;
	}
	31% {
		transform: translateX(8px);
	}
	32% {
		transform: translateX(-8px);
	}
	84% {
		opacity: 1;
	}
	100% {
		transform: translateX(0);
	}
}

.button--cta svg,
.button--cta-strip svg,
.button--video-stats svg {
	transition: none;
}

.button--cta:hover svg,
.button--cta-strip:hover svg,
.button--video-stats:hover svg {
	animation: airshape-icon-move 0.6s ease-out;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus,
.newsletter__field input[type='email']:focus {
	outline: none;
	border-color: var(--color-headline-cream);
}

.video-stats__play {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-stats__play:hover {
	transform: scale(1.08);
}

/* --- Testimonial crossfade --------------------------------------------------- */
/* Toggling the [hidden] attribute (display:none <-> block) naturally
   restarts a CSS animation each time a slide becomes visible again, so this
   fades/rises in on every slide change without fighting the separate
   scroll-reveal system (which also targets .testimonial-card and must stay
   in sole control of the *resting* opacity). */

@keyframes airshape-testimonial-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.testimonial-card:not([hidden]).reveal--visible {
	animation: airshape-testimonial-in 0.5s ease;
}

.testimonial-card__prev,
.testimonial-card__next {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.testimonial-card__prev:hover,
.testimonial-card__next:hover {
	transform: scale(1.08);
}

/* =========================================================================
   Light theme (Dark/Light switcher)
   Inverts page-chrome tokens only; section-specific dark treatments (hero
   photo, testimonial card, colored form panels) intentionally keep their
   own fixed styling in both modes, matching how the reference site's photo
   -heavy sections don't re-theme either.
   ========================================================================= */

:root[data-theme='light'] {
	--color-components-page: #f7f6f2;
	--color-headline-cream: #151517;
	--color-black-lighter: rgba(21, 21, 23, 0.75);
	--color-black-basic: #151517;
	--header-bg: rgba(0, 0, 0, 0.05);
	--color-components-border: rgba(21, 21, 23, 0.12);
	--color-grey-neutral-8: rgba(21, 21, 23, 0.05);
	--color-grey-neutral-16: rgba(21, 21, 23, 0.08);
	--color-grey-neutral-32: rgba(21, 21, 23, 0.16);
	--color-grey-neutral-48: rgba(21, 21, 23, 0.24);
}

:root[data-theme='light'] .site-header__logo img,
:root[data-theme='light'] .nav-overlay__close svg {
	filter: invert(1) brightness(0.2);
}

/* =========================================================================
   Theme switcher (Dark / Light)
   Sticky vertical pill on the left edge, centered — rotated upright text
   labels ("Dark" on top, "Light" below) with a filled rounded highlight
   behind whichever option is active.
   ========================================================================= */

/* The outer box is deliberately narrow and flex-centered so the rotated
   pill's centroid lands at a known, fixed distance from the edge — rotating
   a wide flex row around its own center shifts it inward by roughly half
   its un-rotated width otherwise. */
.theme-switcher {
	position: fixed;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	width: 28px;
	display: flex;
	justify-content: center;
}

.theme-switcher__inner {
	display: flex;
	gap: 3px;
	padding: 4px;
	border-radius: 14px;
	background: var(--color-grey-neutral-32);
	border: 2px solid var(--color-grey-neutral-16);
	/* Counter-clockwise (mirrored from a plain 90deg rotation) — matches
	   the reference's reading direction. "Light" is first in the DOM so
	   that, mirrored, "Dark" (second/right, pre-rotation) still ends up on
	   top once rotated upright. */
	transform: rotate(-90deg);
}

.theme-switcher__option {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: none;
	border-radius: 14px;
	background: transparent;
	color: var(--color-black-lighter);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14.4px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-switcher__option.is-active {
	background: var(--color-grey-neutral-48);
	color: var(--color-white-basic);
	box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.08);
}

/* The active pill's text relies on --color-white-basic, which stays pure
   white in light mode by design (several fixed-dark sections need it to
   stay white) — that would leave white text on the switcher's light grey
   pill, so it needs its own readable colors here instead. */
:root[data-theme='light'] .theme-switcher__inner {
	background: var(--color-grey-neutral-16);
	border-color: var(--color-grey-neutral-8);
}

:root[data-theme='light'] .theme-switcher__option {
	color: var(--color-black-lighter);
}

:root[data-theme='light'] .theme-switcher__option.is-active {
	background: #151517;
	color: #ffffff;
	box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.12);
}

@media (max-width: 1100px) {
	.theme-switcher {
		display: none;
	}
}

/* =========================================================================
   Follow Us social sidebar
   ========================================================================= */

.social-bar {
	position: fixed;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	width: 20px;
	display: flex;
	justify-content: center;
}

.social-bar--left {
	right: auto;
	left: 22px;
}

.social-bar__list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	transform: rotate(-90deg);
	white-space: nowrap;
	/* Figma "Social Bar": font/familiy/title (DM Sans) SemiBold, 16.4px,
	   tracking -0.328px — was incorrectly set to the title-alt (Space
	   Grotesk) stand-in font with no letter-spacing. */
	font-family: var(--font-title);
	font-weight: 500;
	font-size: var(--font-size-body);
	letter-spacing: -0.328px;
	color: var(--color-black-lighter);
}

.social-bar__list a {
	color: var(--color-black-lighter);
	transition: color 0.2s ease;
}

.social-bar__list a:hover {
	color: var(--color-headline-cream);
}

.social-bar__list li:not(.social-bar__caption)::before {
	content: '/';
	margin-right: 6px;
	opacity: 0.5;
}

.social-bar__list li:nth-child(2)::before {
	content: '\2014'; /* em dash after "Follow Us" */
}

@media (max-width: 1100px) {
	.social-bar {
		display: none;
	}
}

/* =========================================================================
   Full-screen nav overlay
   ========================================================================= */

.nav-overlay {
	position: fixed;
	inset: 0;
	/* Explicit 100vw/100vh alongside inset:0 — belt-and-braces so the
	   overlay is guaranteed edge-to-edge with no side gutter, including on
	   mobile browsers where dynamic toolbars can affect viewport units.
	   100dvh (dynamic viewport height) overrides 100vh where supported so
	   the overlay tracks the real visible area as the address bar
	   shows/hides, instead of leaving a strip of the page visible below. */
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	z-index: 300;
	background: var(--color-components-page);
	display: flex;
	flex-direction: column;
	padding: var(--spacing-5) var(--spacing-grid-gutter-3x);
	overflow: hidden;
}

.nav-overlay[hidden] {
	display: none;
}

.nav-overlay__nav {
	/* Without this the nav sized to its own content and the footer sat
	   wherever that ended — leaving a dead gap below it instead of the
	   footer hugging the bottom edge of the screen. */
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.nav-overlay__close {
	/* Reference places the close control top-left, not top-right. */
	align-self: flex-start;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-grey-neutral-8);
	border: none;
	color: var(--color-white-basic);
	cursor: pointer;
	margin-bottom: var(--spacing-3);
	flex-shrink: 0;
	transition: background-color 0.2s ease, transform 0.3s ease;
}

.nav-overlay__close:hover {
	background: var(--color-grey-neutral-16);
	transform: rotate(90deg);
}

.nav-overlay__menu {
	list-style: none;
	/* Left-aligned block, not centered on the page. */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-grid-gutter-2x);
	flex: 1;
	min-height: 0;
	max-width: 800px;
	width: 100%;
}

.nav-overlay__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	border-bottom: 1px solid var(--color-components-border);
	padding-bottom: var(--spacing-2);
}

.nav-overlay__index {
	align-self: flex-start;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-grey-basic);
	flex-shrink: 0;
	margin-top: 0.35em;
}

.nav-overlay__item a {
	flex: 1;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: clamp(1.5rem, 4.5vh, 2.5rem);
	line-height: 1.3;
	color: var(--color-headline-cream);
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.nav-overlay__item a:hover {
	color: var(--color-black-lighter);
	padding-left: var(--spacing-3);
}

.nav-overlay__plus {
	flex-shrink: 0;
	align-self: center;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 400;
	color: var(--color-grey-basic);
}

.nav-overlay__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-grid-gutter-3x);
	padding-top: var(--spacing-3);
	margin-top: var(--spacing-3);
	border-top: 1px solid var(--color-components-border);
	flex-shrink: 0;
}

.nav-overlay__footer-col {
	flex: 1;
	min-width: 200px;
	color: var(--color-black-lighter);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--font-size-body);
}

.nav-overlay__label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--font-size-subtitle);
	text-transform: uppercase;
	color: var(--color-grey-basic);
	margin: 0 0 var(--spacing-1);
}

.nav-overlay__footer-col p {
	margin: 0 0 var(--spacing-1);
}

.nav-overlay__socials {
	display: flex;
	gap: var(--spacing-3);
	margin-top: var(--spacing-1);
}

.nav-overlay__socials a:hover {
	color: var(--color-headline-cream);
}

/* =========================================================================
   Cookie banner
   ========================================================================= */

.cookie-banner {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--spacing-2);
	/* Intrinsic width (not a fixed/stretched 640px box) so the close
	   button hugs the text instead of leaving a gap on short strings. */
	width: max-content;
	max-width: calc(100vw - 48px);
	padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
	border-radius: var(--radius-4xlarge);
	background: var(--color-components-page);
	border: 1px solid var(--color-components-border);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
	animation: airshape-cookie-in 0.4s ease;
}

.cookie-banner[hidden] {
	display: none;
}

@keyframes airshape-cookie-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cookie-banner__icon {
	flex-shrink: 0;
	color: var(--color-black-lighter);
}

.cookie-banner__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--color-black-lighter);
	white-space: nowrap;
}

.cookie-banner__text a {
	text-decoration: underline;
	font-weight: 600;
}

.cookie-banner__close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--color-grey-neutral-8);
	color: var(--color-headline-cream);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cookie-banner__close:hover {
	background: var(--color-grey-neutral-16);
	transform: rotate(90deg);
}

@media (max-width: 480px) {
	.cookie-banner {
		bottom: 12px;
		max-width: calc(100vw - 24px);
	}

	.cookie-banner__text {
		white-space: normal;
	}
}

/* =========================================================================
   Mobile navigation
   ========================================================================= */

/* Tighten the spacing scale on small screens — cascades to every card /
   section padding that already consumes these tokens via var(). */
@media (max-width: 600px) {
	:root {
		--spacing-spacer: 20px;
		--spacing-grid-gutter-2x: 20px;
		--spacing-grid-gutter-3x: 28px;
		--spacing-grid-gutter-5x: 48px;
		--spacing-grid-gutter-6x: 56px;
		--font-size-h3: 22px;
	}

	.site-header-wrap {
		padding: var(--spacing-3);
	}
}

/* h2-scale sizes verified against the live demo at each Elementor
   breakpoint tier (not fluid — see the --font-size-h2 comment above). */
@media (max-width: 1366px) {
	:root {
		--font-size-h2: 36.256px;
		--font-size-h2-large: 41.5px;
	}
}

@media (max-width: 767px) {
	:root {
		--font-size-h2: 31.33px;
		--font-size-h2-large: 35.8px;
	}
}

@media (max-width: 1024px) {
	.site-header--floating {
		flex-wrap: nowrap;
		position: relative;
	}

	/* The logo-bar's desktop width (280px, sized to fit the full inline
	   nav next to it) left no room for the CTA once the nav is hidden
	   below, pushing it onto its own line. Let it size to its actual
	   content (hamburger + logo) so the CTA stays on the same row. */
	.site-header__logo-bar {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-header__cta {
		flex-shrink: 0;
	}

	/* Below 1024px the inline nav is fully replaced by the hamburger's
	   full-screen overlay (see .nav-overlay). */
	.site-header__nav {
		display: none;
	}
}