/*
 * Company Theme - main stylesheet
 *
 * Colors (fine-tune exact hex values from Figma):
 *   --color-dark-green:  #1a5632
 *   --color-light-green: #e8f0e9
 *
 * Class reference from header.php / front-page.php / footer.php:
 *
 * .site-header, .site-branding, .site-logo, .site-logo__image, .site-logo__text,
 *   .primary-navigation, .nav-menu
 * .hero, .hero__inner, .hero__content, .hero__eyebrow, .hero__title,
 *   .hero__text, .hero__cta, .hero__media, .hero__image
 * .goals, .goals__inner, .goals__media, .goals__image, .goals__content,
 *   .goals__title, .goals__text, .goals__list, .goals__list-item, .goals__cta
 * .services, .services__inner, .services__content, .services__title,
 *   .services__subheading, .services__list, .services__item,
 *   .services__item-title, .services__item-text, .services__item-link,
 *   .services__media, .services__image
 * .blog, .blog__inner, .blog__title, .blog__subheading, .blog__grid,
 *   .blog__card, .blog__card-image, .blog__card-title, .blog__card-date, .blog__cta
 * .clients, .clients__inner, .clients__title, .clients__subheading,
 *   .clients__grid, .clients__logo
 * .why-us, .why-us__inner, .why-us__title, .why-us__subheading,
 *   .why-us__grid, .why-us__item, .why-us__icon, .why-us__item-title, .why-us__item-text
 * .certifications, .certifications__inner, .certifications__title,
 *   .certifications__grid, .certifications__badge
 * .site-footer, .site-footer__inner, .site-footer__about, .site-footer__text,
 *   .site-footer__social, .site-footer__social-item, .site-footer__links,
 *   .site-footer__links-title, .site-footer__links-list, .site-footer__links-item,
 *   .site-footer__copyright
 * .section__title, .link-more, .button, .button--primary
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
	/* Confirmed via Figma dev-mode export (nav links, Request A Quote,
	   Goals CTA all use this exact value) — corrects the initial guess. */
	--color-dark-green: #2e5e4e;
	--color-dark-green-hover: #234a3d;
	--color-light-green: #eef4f0;
	--color-text: #1f2a24;
	--color-text-muted: #4b5a52;
	--color-border: #d7e3da;
	--content-max-width: 1200px;
	--section-padding-y: 5rem;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
.serb-page {
	--serb-ink: #1d3931;
	--serb-mint: #b8edcf;
	--serb-paper: #f4f6f0;
	--serb-line: rgba(19, 35, 31, 0.14);
	background: var(--serb-paper);
	color: var(--serb-ink);
}

.serb-container {
	width: min(1200px, calc(100% - 60px));
	max-width: none;
	padding: 0;
}

.serb-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(5rem, 11vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
	background: var(--serb-ink);
	color: #f6f8f2;
}

.serb-hero::after {
	content: "";
	position: absolute;
	right: 7%;
	top: 18%;
	width: 260px;
	height: 260px;
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 0 30px rgba(184, 237, 207, 0.06), 0 0 0 60px rgba(184, 237, 207, 0.03);
	pointer-events: none;
}

.serb-hero__content {
	position: relative;
	z-index: 1;
	max-width: 900px;
}

.serb-title {
	margin: 0;
	font-size: clamp(3.2rem, 8vw, 7.2rem);
	line-height: 0.98;
	letter-spacing: -0.07em;
	font-weight: 800;
	text-wrap: balance;
}

.serb-title::first-line {
	color: var(--serb-mint);
}

.serb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 2.25rem 0 0;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #fff;
}

.serb-meta span {
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 999px;
}

.serb-meta span + span::before {
	display: none;
}

.serb-overview {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: #fff;
}

.serb-overview__grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
	gap: clamp(3rem, 7vw, 7rem);
}

.serb-copy {
	max-width: 680px;
	padding-right: 0;
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.7;
	color: #294139;
}

.serb-copy p {
	margin: 0 0 1.6rem;
}

.serb-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

.serb-stat {
	min-height: 175px;
	padding: 1.5rem;
	border: 0;
	border-right: 1px solid var(--serb-line);
	border-bottom: 1px solid var(--serb-line);
	border-radius: 0;
	background: var(--serb-paper);
	box-shadow: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.serb-stat:hover {
	background: var(--serb-mint);
	box-shadow: none;
	transform: translateY(-5px);
}

.serb-stat__value {
	font-size: clamp(2.8rem, 5vw, 4.2rem);
	line-height: 0.95;
	letter-spacing: -0.07em;
	color: var(--serb-ink);
}

.serb-stat__label {
	max-width: 150px;
	margin-top: 0.9rem;
	font-size: 0.88rem;
	line-height: 1.35;
	color: #52635b;
}

.serb-flow {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: var(--serb-paper);
}

.serb-section-heading {
	margin: 0 0 1.75rem;
	font-size: clamp(1.8rem, 3vw, 2.7rem);
	line-height: 1;
	letter-spacing: -0.05em;
	font-weight: 800;
	color: var(--serb-ink);
}

.serb-flow__track {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.7rem;
	padding: 1.5rem 0 0;
	margin-bottom: 1.5rem;
	border-top: 1px solid var(--serb-line);
}

.serb-flow__step {
	min-height: 64px;
	padding: 1rem 1.15rem;
	border: 1px solid var(--serb-line);
	border-radius: 0;
	background: #fff;
	color: var(--serb-ink);
	font-size: 0.92rem;
	font-weight: 700;
}

.serb-flow__arrow {
	align-self: center;
	font-size: 1.2rem;
	color: rgba(19, 35, 31, 0.55);
}

.serb-flow__tags {
	gap: 0.7rem;
	padding: 0;
}

.serb-tag {
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(19, 35, 31, 0.25);
	border-radius: 999px;
	background: transparent;
	font-size: 0.82rem;
	color: var(--serb-ink);
}

.serb-coverage {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: var(--serb-ink);
}

.serb-coverage .serb-section-heading {
	color: #f6f8f2;
}

.serb-rings {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 1rem;
}

.serb-ring {
	--ring-color: var(--serb-mint) !important;
	--size: 190px;
	--thickness: 14px;
	background: conic-gradient(var(--ring-color) calc(var(--percent) * 1%), rgba(184, 237, 207, 0.12) 0);
}

.serb-ring::before {
	background: var(--serb-ink);
}

.serb-ring__inner {
	font-size: clamp(2.2rem, 3vw, 3.2rem);
	color: #f6f8f2;
}

.serb-ring-card p {
	max-width: 220px;
	font-size: 0.95rem;
	color: rgba(246, 248, 242, 0.72);
}

@media (max-width: 1023px) {
	.serb-overview__grid {
		grid-template-columns: 1fr;
	}

	.serb-rings {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.serb-container {
		width: min(calc(100% - 36px), 1200px);
	}

	.serb-hero::after {
		right: -110px;
		top: 12%;
	}

	.serb-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

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

	.serb-stat {
		min-height: 135px;
		padding: 1.1rem;
	}

	.serb-flow__track {
		flex-direction: column;
	}

	.serb-flow__arrow {
		transform: rotate(90deg);
		align-self: flex-start;
		margin-left: 1.4rem;
	}
}

@media (max-width: 400px) {
	.serb-title {
		font-size: 3rem;
	}

	.serb-stats,
	.serb-rings {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.serb-stat,
	.serb-flow__step,
	.serb-tag,
	.serb-ring-card {
		transition: none;
	}

	.serb-stat:hover {
		transform: none;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* .site-header::before below intentionally uses width: 100vw for its
   full-bleed backdrop, which on Windows/Linux (non-overlay scrollbars)
   is wider than the visible viewport by the scrollbar's own width — this
   clips that overflow at the root instead of shrinking the scrollbar-aware
   fix into the header rule itself (sticky positioning can't tolerate an
   overflow:hidden ancestor between it and the true scroll container, so
   the clip has to live here, not on a wrapper closer to the header). */
html {
	overflow-x: hidden;
}

body {
	margin: 0;
	color: var(--color-text);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
}

/* Sitewide subtle grain texture — pure CSS, no JS/markup, so it applies
   everywhere (including templates the motion system hasn't reached yet).
   Static (no animation), so it needs no prefers-reduced-motion handling. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1050;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Every image is constrained by its container by default; specific sections
   below cap intrinsic sizes so large source exports (e.g. 1024x1024) don't
   render at full native size. */
img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

a {
	color: inherit;
}

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

/* ============================================================
   PAGE TRANSITIONS (cross-document View Transitions API)
   Sitewide, CSS-only, progressive enhancement: opts every same-origin
   navigation into a soft cross-fade instead of a hard reload flash.
   Unsupported browsers (no @view-transition support) just ignore this
   at-rule and fall back to the normal instant page load — no JS,
   no fallback code needed. Reduced-motion override lives in the shared
   block below (search "prefers-reduced-motion").
   ============================================================ */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.35s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SHARED / UTILITY
   ============================================================ */
.section__title {
	margin: 0 0 1rem;
	font-size: 2rem;
	text-align: center;
}

.button {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* .header__cta is a <button> (opens the quote modal), not a link — undo
   the browser's default button chrome so it renders identically to the
   .button--outline styling applied to it. */
button.button {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.button--primary {
	background: var(--color-dark-green);
	color: #fff;
}

.button--primary:hover {
	background: var(--color-dark-green-hover);
}

.button--outline {
	padding: 10px 24px;
	background: transparent;
	color: #2e5e4e;
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	border: 2px solid #000;
	border-radius: 4px;
}

.button--outline:hover {
	background: var(--color-light-green);
}

.link-more {
	color: var(--color-dark-green);
	font-weight: 600;
	text-decoration: none;
}

.link-more:hover {
	text-decoration: underline;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	padding: 5px 10px;
	max-width: 1400px; /* per Figma nav bar spec, not the shared 1200px content width */
	margin: 24px auto 0;
}

/* Full-bleed glass background behind the (max-width, centered) header —
   a pseudo-element rather than styling .site-header itself, since the
   backdrop needs to span 100vw while the header's own box stays centered
   at 1400px. Toggled by main.js once the page has scrolled past the hero.
   The 100vw here is wider than the visible viewport on Windows/Linux
   (includes scrollbar width) — clipped sitewide via `html { overflow-x:
   hidden; }` near the top of this file rather than adding overflow:hidden
   on an ancestor here, which would break this element's sticky positioning. */
.site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX(-50%);
	z-index: -1;
	background: #ffffff;
	box-shadow: none;
	backdrop-filter: none;
	transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.is-scrolled::before {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	box-shadow: 0 8px 24px rgba(31, 42, 36, 0.08);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}

/* cloud-logo-header.png already bakes in the wordmark + tagline, so only
   width is fixed at 320px per Figma's Logo frame; height scales to preserve
   the cropped image's own aspect ratio. */
.site-logo__image {
	width: 320px;
	height: auto;
}

.primary-navigation {
	flex: 1 1 auto;
}

.primary-navigation .nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
}

.primary-navigation .menu-item {
	position: relative;
}

.primary-navigation .menu-item > a {
	position: relative;
	text-decoration: none;
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 25px;
	color: #2e5e4e;
	white-space: nowrap;
}

/* Underline indicator: static (scaleX(1)) for whichever nav item matches
   the current page (see company_theme_nav_fallback() in functions.php,
   which adds .current-menu-item by comparing each link's URL to the
   current request); animates in on :hover for every other top-level link.
   Uses ::before (not ::after) so it doesn't collide with the "Resources ▼"
   caret, which is its own ::after on .menu-item-has-children > a. */
.primary-navigation > .nav-menu > .menu-item > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.primary-navigation > .nav-menu > .menu-item > a:hover::before,
.primary-navigation > .nav-menu > .menu-item.current-menu-item > a::before {
	transform: scaleX(1);
}

.primary-navigation .sub-menu .menu-item.current-menu-item > a {
	background: var(--color-light-green);
}

/* "Resources ▼" dropdown */
.primary-navigation .menu-item-has-children > a::after {
	content: "\25BC";
	margin-left: 0.4em;
	font-size: 0.6em;
}

.primary-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	margin-top: 0.5rem;
	padding: 0.5rem 0;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	z-index: 10;
}

.primary-navigation .sub-menu .menu-item > a {
	display: block;
	padding: 0.5rem 1rem;
}

.primary-navigation .sub-menu .menu-item > a:hover {
	background: var(--color-light-green);
}

.primary-navigation .menu-item-has-children:hover > .sub-menu,
.primary-navigation .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.header__cta {
	flex-shrink: 0;
	font-weight: 700;
}

/* These two wrappers exist only so the mobile menu has something to toggle.
   On desktop they're display:contents — invisible to layout — so
   .site-header's flex children are effectively still just
   [site-branding, nav-toggle(hidden), primary-navigation, header__cta],
   pixel-identical to the original markup. */
.site-header__row,
.site-header__panel {
	display: contents;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 2px solid #000;
	border-radius: 6px;
	cursor: pointer;
	flex-shrink: 0;
}

.nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: #000;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   1. HERO — two-column: copy left, illustration right
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	background: #fff;
	min-height: 850px; /* per Figma hero background frame */
	display: flex;
	align-items: center;
}

/* Soft blurred depth blobs behind the hero content — decorative only,
   sit below .hero__inner (z-index: 0 vs 1) so they never intercept clicks. */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.hero::before {
	top: -140px;
	right: -100px;
	width: 440px;
	height: 440px;
	background: radial-gradient(circle, rgba(46, 94, 78, 0.16), transparent 70%);
}

.hero::after {
	bottom: -180px;
	left: -120px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(46, 94, 78, 0.1), transparent 70%);
}

/* Aurora drift: the depth blobs (both here and on .about-hero) slowly
   wander and shift hue instead of sitting static, for a "living gradient
   mesh" background feel. Two different durations/delays on ::before vs
   ::after keep the two blobs out of sync so it doesn't look mechanical. */
.hero::before,
.hero::after,
.about-hero::before,
.about-hero::after {
	animation: aurora-drift 16s ease-in-out infinite, aurora-hue 12s ease-in-out infinite;
}

.hero::after,
.about-hero::after {
	animation-duration: 20s, 15s;
	animation-delay: -6s, -3s;
}

@keyframes aurora-drift {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(24px, -18px) scale(1.06);
	}
	66% {
		transform: translate(-18px, 14px) scale(0.96);
	}
}

@keyframes aurora-hue {
	0%,
	100% {
		filter: blur(60px) hue-rotate(0deg);
	}
	50% {
		filter: blur(60px) hue-rotate(40deg);
	}
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 3rem;
	max-width: var(--content-max-width);
	width: 100%;
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
}

.hero__content {
	flex: 1 1 50%;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
	color: var(--color-dark-green);
}

.hero__eyebrow::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-dark-green);
	box-shadow: 0 0 0 4px rgba(46, 94, 78, 0.15);
}

.hero__title {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 72px;
	color: #000;
}

/* Gradient shimmer: base color stays dark/high-contrast (the gradient's
   two outer stops are near-black), so this is a moving highlight sweep
   rather than a permanent color change — kept off .section__title
   generally since most section titles set their own explicit color
   elsewhere at equal specificity and would just silently cancel it.
   (The .motion-done half of this lives further down, right after the
   generic .motion-done resets it needs to win a cascade tie against —
   see the comment there.) */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.hero__title,
	.about-hero__title {
		background-image: linear-gradient(100deg, #111 35%, var(--color-dark-green) 50%, #111 65%);
		background-size: 250% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

@keyframes heading-shimmer {
	0%,
	100% {
		background-position: 200% 0;
	}
	50% {
		background-position: 0% 0;
	}
}

.hero__text {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: #000;
}

.hero__cta {
	align-self: flex-start;
	padding: 19px 40px;
	border-radius: 8px; /* not the pill shape used elsewhere */
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
}

/* Added for the two-offer hero (Audit + Dedicated seat CTAs side by side). */
.hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 1rem;
}

.hero__cta-group .hero__cta {
	align-self: auto;
}

.hero__note {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #4a4a4a;
}

.hero__media {
	flex: 1 1 50%;
	min-width: 280px;
	display: flex;
	justify-content: center;
	/* JS (animations.js) sets an inline rotateX/rotateY transform on
	   mousemove to tilt this wrapper toward the cursor; the illustration's
	   own idle float animation lives on the .hero__image child instead so
	   the two transforms never fight over the same element. */
	transition: transform 0.2s ease-out;
	will-change: transform;
}

.hero__image {
	width: 100%;
	max-width: 640px; /* image nearly fills its 680px column per Figma */
}

/* ============================================================
   2. OUR GOALS — two-column: illustration left, copy right,
   light green section background
   ============================================================ */
.goals {
	/* #F3F5F4 per Figma — distinct from the #EEF4F0 used by Clients/Certifications */
	background: #f3f5f4;
}

.goals__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 1320px; /* Goals Content width per Figma */
	margin: 0 auto;
	padding: 50px 2rem; /* Goals Content top/bottom inset within the 750px section */
}

.goals__media {
	/* Goals Left is ~700px within the 1320px content width */
	flex: 1 1 53%;
	min-width: 260px;
	display: flex;
	justify-content: center;
}

.goals__image {
	width: 100%;
	max-width: 640px; /* image fills nearly all of its 700px column per Figma */
}

.goals__content {
	flex: 1 1 47%;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 24px; /* Frame 1 auto-layout gap */
}

.goals__title {
	text-align: left;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	color: #000;
	margin: 0;
}

.goals__text {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	color: #000;
	margin: 0;
}

.goals__list {
	margin: 0;
	padding-left: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #000;
}

.goals__list-item {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	line-height: 150%;
}

.goals__list-item::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--color-dark-green);
	font-weight: 700;
}

.goals__cta {
	align-self: flex-start;
	padding: 16px 32px;
	border-radius: 6px; /* not the pill shape used by .button--primary elsewhere */
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 100%;
}

/* ============================================================
   3. OUR SERVICES — two-column: copy left, illustration right
   ============================================================ */
.services__inner {
	display: flex;
	align-items: center;
	gap: 3rem;
	max-width: 1320px; /* Services Content Container width per Figma */
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
}

.services__content {
	flex: 1 1 47%;
	min-width: 280px;
}

.services__title,
.services__subheading {
	text-align: left;
}

.services__title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 100%;
	color: #000;
	margin: 0 0 1rem;
}

.services__subheading {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 27px;
	line-height: 140%;
	color: #000;
	margin: 0 0 2rem;
}

.services__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-left: 24px;
}

/* Plain gray track for the full list height; the green segment on top of it
   (.services__list-indicator) is the part that actually highlights the
   active item — see assets/js/animations.js for the hover-follow logic. */
.services__list::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #d9d9d9;
	border-radius: 2px;
}

/* Positioned/sized by JS to match whichever .services__item is hovered
   (defaults to the first item). The transition is what makes it look like
   it "scrolls" from one item to the next. */
.services__list-indicator {
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 170px;
	background: var(--color-dark-green);
	border-radius: 2px;
	transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.services__item {
	padding: 0;
	cursor: pointer;
}

.services__item-title {
	margin: 0 0 0.4rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	color: #000;
}

.services__item-text {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	color: #000;
}

.services__item-link {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 100%;
	color: #356854; /* distinct third green used only for these inline links */
}

.services__media {
	flex: 1 1 53%;
	min-width: 260px;
	display: flex;
	justify-content: center;
}

.services__image {
	width: 100%;
	max-width: 640px; /* image nearly fills its 750px column per Figma */
}

/* ============================================================
   4. BLOG LISTING — vertical editorial archive
   ============================================================ */
.blog-page__hero {
	background: #fff;
}

.blog-page__hero-inner,
.blog__inner {
	max-width: 1340px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem 2.5rem;
}

.blog-page .blog__title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: clamp(2.75rem, 3vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: #111827;
	text-align: center;
}

.blog-page .blog__subheading {
	max-width: 980px;
	margin: 0 auto 2.75rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: clamp(1.125rem, 1.7vw, 1.5rem);
	line-height: 1.55;
	color: #1c2b2a;
	text-align: center;
}

.blog-page__search {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1340px;
	margin: 0 auto;
	text-align: left;
}

.blog-page__search input[type="search"] {
	min-width: 0;
	flex: 1;
	min-height: 60px;
	padding: 0 18px;
	border: 1px solid #c9d2d1;
	border-radius: 4px;
	font: inherit;
	font-size: 16px;
	color: #172019;
	background: #fff;
}

.blog-page__search button {
	min-width: 140px;
	min-height: 60px;
	padding: 0 26px;
	border: 0;
	border-radius: 4px;
	background-color: #2F5F4F;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-page__search button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(4, 67, 19, 0.18);
}

/* Blog search results dropdown */
.blog-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 8px;
	background: #fff;
	border: 1px solid #c9d2d1;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 100;
	max-height: 400px;
	overflow-y: auto;
}

.blog-page__search {
	position: relative;
}

.blog-search-header {
	padding: 12px 16px;
	font-weight: 600;
	font-size: 13px;
	color: #4b5a52;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #e3e8e6;
}

.blog-search-item {
	display: block;
	padding: 12px 16px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
	border-bottom: 1px solid #f0f3f2;
}

.blog-search-item:last-child {
	border-bottom: none;
}

.blog-search-item:hover {
	background-color: #eef4f0;
	color: #2f5f4f;
}

.blog-search-item-title {
	font-weight: 500;
	font-size: 15px;
	color: #000;
	margin-bottom: 4px;
	line-height: 1.4;
}

.blog-search-item:hover .blog-search-item-title {
	color: #2f5f4f;
}

.blog-search-item-date {
	font-size: 13px;
	color: #4b5a52;
}

.blog-search-no-results,
.blog-search-error {
	padding: 16px;
	text-align: center;
	font-size: 14px;
	color: #4b5a52;
}

.blog-search-error {
	color: #d9534f;
}

.blog-page__archive {
	background: #fff;
}

.blog-page__archive .blog__inner {
	padding-top: 0;
}

.blog-page__archive .blog__list {
	display: flex;
	flex-direction: column;
}

.blog-page__archive .blog__item {
	display: grid;
	grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.7rem);
	align-items: center;
	padding: 2.5rem 0;
	border-bottom: 1px solid #e5e5e5;
}

.blog-page__archive .blog__item:first-child {
	padding-top: 1.2rem;
}

.blog-page__archive .blog__item-image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #edf2ee;
	text-decoration: none;
}

.blog-page__archive .blog__item-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-page__archive .blog__item-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.blog-page__archive .blog__item-title {
	margin: 0 0 0.8rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 2.2vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #101812;
}

.blog-page__archive .blog__item-title a {
	color: inherit;
	text-decoration: none;
}

.blog-page__archive .blog__item-date {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: #53615d;
}

.blog-page__archive .blog__item-excerpt {
	margin-top: 1rem;
	font-family: "Inter", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #34433b;
}

.blog-page__archive .blog__item-excerpt p {
	margin: 0;
}

.blog-page__archive .blog__item-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1.2rem;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-dark-green);
	text-decoration: none;
}

.blog-page__archive .blog__item-read-more span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.blog-page__archive .blog__item-read-more:hover span {
	transform: translateX(4px);
}

.blog__pagination {
	margin-top: 3rem;
	text-align: center;
}

.blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	margin: 0 4px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	color: var(--color-dark-green);
	text-decoration: none;
}

.blog__pagination .page-numbers.current,
.blog__pagination .page-numbers:hover {
	background: var(--color-dark-green);
	border-color: var(--color-dark-green);
	color: #fff;
}

.blog__empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 4rem 2rem;
	text-align: center;
}

.blog__empty-title {
	margin: 0 0 0.75rem;
	font-family: "Inter", sans-serif;
	font-size: 32px;
	color: var(--color-dark-green);
}

.blog__empty p {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

@media (max-width: 1023px) {
	.blog-page__hero-inner,
	.blog__inner {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.blog-page__archive .blog__item {
		grid-template-columns: minmax(240px, 40%) minmax(0, 1fr);
		gap: 1.5rem;
		padding: 2rem 0;
	}
}

@media (max-width: 767px) {
	.blog-page__hero-inner,
	.blog__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.blog-page__search {
		flex-direction: column;
		gap: 12px;
	}

	.blog-page__search button {
		width: 100%;
		min-height: 52px;
	}

	.blog-page__archive .blog__item {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 2rem 0;
	}

	.blog-page__archive .blog__item-title {
		font-size: clamp(1.7rem, 5vw, 2.2rem);
	}

	.blog-page__archive .blog__item-meta {
		flex-wrap: wrap;
	}

	.blog-page__archive .blog__item-excerpt {
		font-size: 1rem;
	}
}

.blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	margin: 0 4px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	color: var(--color-dark-green);
	text-decoration: none;
}

.blog__pagination .page-numbers.current,
.blog__pagination .page-numbers:hover {
	background: var(--color-dark-green);
	border-color: var(--color-dark-green);
	color: #fff;
}

.blog__empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 4rem 2rem;
	text-align: center;
}

.blog__empty-title {
	margin: 0 0 0.75rem;
	font-family: "Inter", sans-serif;
	font-size: 32px;
	color: var(--color-dark-green);
}

.blog__empty p {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

/* Individual blog posts */
.single-blog-page {
	background: #fff;
}

.single-blog-hero {
	background: linear-gradient(135deg, var(--color-light-green) 0%, #fff 76%);
}

.single-blog-hero__inner,
.single-blog__content,
.single-blog__navigation {
	max-width: 920px;
	margin: 0 auto;
}

.single-blog-hero__inner {
	padding: 5rem 2rem 3.5rem;
	text-align: center;
}

.single-blog__label {
	display: inline-block;
	margin-bottom: 1.25rem;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-dark-green);
}

.single-blog__title {
	max-width: 900px;
	margin: 0 auto;
	font-size: 54px;
	line-height: 1.12;
	color: var(--color-dark-green);
}

.single-blog__excerpt {
	max-width: 820px;
	margin: 1.5rem auto 0;
	font-size: 20px;
	line-height: 1.55;
	color: #34433b;
}

.single-blog__excerpt p {
	margin: 0;
}

.single-blog__featured-image {
	margin: 3rem 0 0;
	border-radius: 8px;
	overflow: hidden;
}

.single-blog__featured-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
}

.single-blog__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	margin-top: 1.5rem;
	font-size: 15px;
	line-height: 1.5;
	color: #46554d;
}

.single-blog__meta strong {
	margin-right: 0.25rem;
	color: var(--color-dark-green);
}

.single-blog__content {
	padding: 4.5rem 2rem 2rem;
	font-size: 18px;
	line-height: 1.78;
	color: #26332c;
}

.single-blog__meta-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	max-width: 920px;
	margin: 0 auto;
	padding: 0 2rem 2.5rem;
}

.single-blog__published {
	display: flex;
	gap: 1.25rem;
}

.single-blog__published div {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.single-blog__published strong {
	font-size: 0.75rem;
	line-height: 1.2;
	color: #101812;
}

.single-blog__published span,
.single-blog__published time {
	font-size: 0.875rem;
	line-height: 1.35;
	color: #53615d;
}

.single-blog__social {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-left: auto;
}

.single-blog__social a,
.single-blog__social button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 1px solid #52615b;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	color: #394840;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.single-blog__social a:hover,
.single-blog__social a:focus-visible,
.single-blog__social button:hover,
.single-blog__social button:focus-visible {
	border-color: var(--color-dark-green);
	color: var(--color-dark-green);
	transform: translateY(-2px);
}

.single-blog__content p {
	margin: 0 0 1.5rem;
}

.single-blog__content h2 {
	margin: 3rem 0 1rem;
	font-size: 34px;
	line-height: 1.25;
	color: var(--color-dark-green);
}

.single-blog__content h3 {
	margin: 2.25rem 0 0.75rem;
	font-size: 26px;
	line-height: 1.3;
	color: var(--color-dark-green);
}

.single-blog__content h4 {
	margin: 1.75rem 0 0.5rem;
	font-size: 21px;
	color: var(--color-dark-green);
}

.single-blog__content a {
	color: var(--color-dark-green);
	text-underline-offset: 3px;
}

.single-blog__content ul,
.single-blog__content ol {
	margin: 0 0 1.75rem;
	padding-left: 1.5rem;
}

.single-blog__content li + li {
	margin-top: 0.5rem;
}

.single-blog__content blockquote {
	margin: 2.5rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--color-dark-green);
	background: var(--color-light-green);
	font-size: 21px;
	font-style: italic;
}

.single-blog__content img,
.single-blog__content figure {
	max-width: 100%;
	height: auto;
}

.single-blog__content figure {
	margin: 2rem 0;
}

.single-blog__content .wp-block-table {
	margin: 2rem 0;
	overflow-x: auto;
}

.single-blog__content .wp-block-table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 16px;
}

.single-blog__content .wp-block-table th,
.single-blog__content .wp-block-table td {
	padding: 0.8rem 1rem;
	border: 1px solid #cbd8d0;
	text-align: left;
}

.single-blog__content .wp-block-table th {
	background: var(--color-light-green);
	color: var(--color-dark-green);
}

.single-blog__navigation {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	padding: 2rem 2rem 5rem;
	border-top: 1px solid var(--color-border);
}

.single-blog__navigation-item {
	max-width: 45%;
}

.single-blog__navigation-item--next {
	text-align: right;
}

.single-blog__navigation a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: var(--color-dark-green);
	text-decoration: none;
}

.single-blog__navigation span {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.single-blog__navigation strong {
	font-size: 17px;
	line-height: 1.4;
}

/* ============================================================
   5. OUR CLIENTS — 4-column logo grid, light green background
   ============================================================ */
.clients {
	background: var(--color-light-green);
}

.clients__inner {
	/* 1320px per Figma dev-mode export, not the shared 1200px content width. */
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
	text-align: center;
}

.clients__title {
	font-weight: 700;
	font-size: 3rem; /* 48px */
	line-height: 1.3;
	color: #000;
}

.clients__subheading {
	max-width: 1100px;
	margin: 0 auto 3rem;
	font-weight: 600;
	font-size: 1.5rem; /* 24px */
	line-height: 1.3;
	color: #000;
}

.clients__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem; /* 32px */
}

.clients__logo {
	position: relative;
	height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
}

/* Each source PNG is now cropped to its own tight bounding box (see
   assets/images/clients/), so contain scales every logo by its real content
   proportions instead of a fixed cover-crop that sliced into taller logos
   like the ZoomBooks circular badge. */
.clients__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ============================================================
   CLIENTS PAGE — hero + logo grid, namespaced to .clients-page
   ============================================================ */
.clients-page {
	background: #f7faf8;
}

.clients-page__hero {
	position: relative;
	overflow: hidden;
	background: #eaf4ee;
	padding: 7rem 0 6.5rem;
}

.clients-page__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	gap: 5rem;
}

.clients-page__content {
	flex: 1 1 52%;
	max-width: 620px;
}

.clients-page__eyebrow {
	margin: 0 0 1rem;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-dark-green);
}

.clients-page__title {
	max-width: 600px;
	margin: 0 0 1.5rem;
	font-weight: 700;
	font-size: clamp(2.75rem, 4.5vw, 4.75rem);
	line-height: 1.12;
	color: #000;
}

.clients-page__text {
	max-width: 570px;
	margin: 0 0 1.15rem;
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.75;
	color: #31443a;
}

.clients-page__cta {
	display: inline-flex;
	margin-top: 1rem;
}

.clients-page__media {
	position: relative;
	flex: 1 1 48%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.clients-page__image {
	position: relative;
	display: block;
	width: min(100%, 530px);
	height: auto;
	object-fit: contain;
}

.clients-page__showcase {
	background: #fff;
	padding: 7rem 0 7.5rem;
}

.clients-page__showcase-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 2rem;
}

.clients-page__section-heading {
	max-width: 690px;
	margin: 0 auto 3.5rem;
	text-align: center;
}

.clients-page__section-heading .clients-page__eyebrow {
	font-size: 30px;
}

.clients-page__logos-title {
	margin: 0 0 1rem;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.2;
	white-space: nowrap;
	color: #000;
}

.clients-page__section-text {
	max-width: 560px;
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #52645a;
}

.clients-page__logo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.clients-page__logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 138px;
	padding: 1.5rem;
	background: #f7faf8;
	border: 1px solid #e2ebe5;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.clients-page__logo-item:hover,
.clients-page__logo-item:focus-within {
	background: #fff;
	box-shadow: 0 14px 28px rgba(31, 42, 36, 0.1);
	transform: translateY(-4px);
}

.clients-page__logo-item img {
	max-width: 100%;
	max-height: 76px;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 1023px) {
	.clients-page__hero {
		padding: 5rem 0;
	}

	.clients-page__hero-inner {
		flex-direction: column;
		gap: 3rem;
		text-align: center;
	}

	.clients-page__content,
	.clients-page__media {
		max-width: 100%;
		flex-basis: 100%;
	}

	.clients-page__text {
		margin-left: auto;
		margin-right: auto;
	}

	.clients-page__media {
		order: -1;
	}

	.clients-page__logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.clients-page__hero {
		padding-top: 4rem;
	}

	.clients-page__hero-inner,
	.clients-page__showcase-inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.clients-page__title {
		font-size: 2.6rem;
	}

	.clients-page__text {
		font-size: 1rem;
	}

	.clients-page__logos-title {
		font-size: 2rem;
		white-space: normal;
	}

	.clients-page__logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.clients-page__logo-item {
		min-height: 112px;
		padding: 1rem;
	}

	.clients-page__showcase {
		padding: 5rem 0;
	}

}

@media (max-width: 400px) {
	.clients-page__logo-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   6. WHY LEADING TEAMS CHOOSE CLOUDROOTS — 3-column x 2-row grid
   ============================================================ */
.why-us__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 100px 2rem;
	text-align: center;
}

.why-us__title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 120%;
	color: #000;
}

.why-us__subheading {
	max-width: 1200px;
	margin: 0 auto 3rem;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 140%;
	color: #000;
}

.why-us__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 64px;
	row-gap: 56px;
	text-align: left;
}

/* Per Figma: a plain colored icon glyph, no badge/background — this reverses
   the dark-green badge treatment added earlier; the export is ground truth. */
.why-us__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}

.why-us__icon img {
	width: 100%;
	height: 100%;
}

/* Two columns: icon | text. Title and description share the text column's
   left edge exactly, so the title's first letter always lines up with the
   description's first letter below it, no matter the icon's width. */
.why-us__item {
	display: grid;
	grid-template-columns: 68px 1fr;
	column-gap: 0px;
	/* Row 1's height is set by the tallest cell (the 56px icon). Without this,
	   the title's cell stretches to that height and its text sits at the top
	   of it by default, while the icon centers within the same row — hence
	   the vertical mismatch. Centering both cells fixes it. */
	align-items: center;
	/* Glassmorphic card frame — kept per client request even though the
	   section background itself stays flat white (client explicitly asked
	   for that back). A translucent white border reads as invisible on a
	   white section, so the border/shadow here are tinted dark instead —
	   what makes this look like a distinct card at rest, not the blur
	   (which has nothing patterned behind it to actually distort). */
	padding: 28px;
	background: rgba(255, 255, 255, 0.55);
	border: 2px solid #2f6b57;
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(31, 42, 36, 0.06);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
}

.why-us__item-title {
	margin: 0;
	grid-column: 2;
	grid-row: 1;
	text-align: left;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 120%;
	text-transform: uppercase;
	color: var(--color-dark-green);
}

.why-us__item-text {
	margin: 0;
	grid-column: 2;
	grid-row: 2;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 120%;
	color: #1e1e1e;
}

/* ============================================================
   7. QUALITY ASSURED BY INDUSTRY-CERTIFIED EXPERTS
   3-4 column badge grid, light green background
   ============================================================ */
.certifications {
	background: var(--color-light-green);
}

.certifications__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 96px 0;
	text-align: center;
}

.certifications__title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 120%;
	color: #000;
	margin: 0 0 64px;
}

/* Flex-wrap (not grid) so 9 badges wrap into clean rows regardless of count
   (6 on the first row, 3 centered on the second, matching the Figma layout)
   instead of a fixed column count leaving an awkward leftover row. */
.certifications__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
}

/* 6 cells x 190px + 5 gaps x 24px = 1260px, fits inside the 1280px container
   so the first row wraps at exactly 6 (then 3 on the second row) instead of
   overflowing to 4-per-row like the previous 240px cell did. */
.certifications__badge {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 190px;
	height: 150px;
}

/* Shine sweep on hover — a diagonal highlight passes over the badge, like
   light catching glass. Uses ::after (not ::before) so it paints on top of
   the logo image rather than underneath it. Kept as a color-neutral overlay
   rather than a grayscale-by-default treatment: the client explicitly asked
   to remove that pattern from .clients__logo (see note above), so the same
   look isn't reused here either. */
.certifications__badge::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.6s ease;
	pointer-events: none;
}

.certifications__badge:hover::after {
	transform: translateX(120%);
}

/* All 9 source PNGs were 1024x1024 canvases with the actual logo occupying
   only ~30-50% of that square — object-fit: contain was scaling the mostly
   empty canvas, so the visible logo barely grew even as this box got bigger.
   Cropped every source file to its real content (see assets/images/badges/)
   so a modest box now renders a much bigger-looking logo. */
.certifications__badge img {
	width: 160px;
	height: 140px;
	margin: 0 auto;
	object-fit: contain;
}

/* ============================================================
   MOTION — front page entrance + scroll reveals + micro-interactions
   ============================================================ */

/* Hero: pure-CSS entrance (no JS needed for above-the-fold content),
   staggered per child so eyebrow/title/text/cta cascade in. */
.hero__content > * {
	opacity: 0;
	transform: translateY(20px);
	animation: hero-in 0.7s ease forwards;
}

.hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero__content > *:nth-child(2) { animation-delay: 0.15s; }
.hero__content > *:nth-child(3) { animation-delay: 0.25s; }
.hero__content > *:nth-child(4) { animation-delay: 0.35s; }

.hero__image {
	animation: hero-image-in 0.8s ease 0.2s both;
}

@keyframes hero-in {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hero-image-in {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes hero-image-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

/* A running (even finished-and-held) CSS animation keeps overriding any
   property it animates, which would permanently block the hero CTA's
   :hover transform. Once the entrance settles, animations.js adds
   .motion-done so the button's transform is free for :hover again — and
   the hero image swaps into a slow continuous idle float. */
.hero__content > *.motion-done {
	animation: none;
	opacity: 1;
	transform: none;
}

.hero__image.motion-done {
	opacity: 1;
	animation: hero-image-float 4s ease-in-out infinite;
}

/* Scroll progress bar — injected into the DOM by animations.js. */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(to right, var(--color-dark-green), #4f8f76);
	z-index: 999;
	pointer-events: none;
}

/* Scroll-drawn icons (About page service cards): shapes start fully
   "undrawn" (see animations.js, which sets stroke-dasharray/dashoffset per
   shape) and animate to dashoffset: 0 once their card scrolls into view. */
.about-services__icon svg {
	overflow: visible;
}

/* Why Us icons (raster PNGs, can't stroke-draw) get an equivalent "pop in"
   flourish instead once their card's reveal fires, for visual parity
   between the two pages' icon reveals. */
@keyframes icon-pop {
	0% {
		opacity: 0;
		transform: scale(0.5) rotate(-15deg);
	}
	60% {
		opacity: 1;
		transform: scale(1.08) rotate(4deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.why-us__item.is-visible .why-us__icon img {
	animation: icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: 0.15s;
}

/* Scroll reveals: sections/cards below the fold fade + rise into view via
   assets/js/animations.js toggling .is-visible through IntersectionObserver.
   Kept to transform/opacity only so it's GPU-accelerated. */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Hover micro-interactions */
.button--primary,
.button--outline {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(46, 94, 78, 0.28);
}

.button--outline:hover {
	transform: translateY(-2px);
}

.button--primary:active,
.button--outline:active {
	transform: translateY(0);
}

.link-more {
	display: inline-block;
	transition: transform 0.2s ease;
}

.link-more:hover {
	transform: translateX(4px);
}

.services__item-link {
	display: inline-block;
	transition: transform 0.2s ease;
}

.services__item-link:hover {
	transform: translateX(4px);
}

.blog__card,
.why-us__item,
.clients__logo,
.certifications__badge {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog__card:hover,
.why-us__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(31, 42, 36, 0.12);
}

.blog__card-image img {
	transition: transform 0.4s ease;
}

.blog__card:hover .blog__card-image img {
	transform: scale(1.06);
}

.front-page-blog .blog__inner {
	max-width: 1065px;
	padding-top: 4.5rem;
	padding-bottom: 5rem;
	text-align: center;
}

.front-page-blog .blog__title {
	margin-bottom: 14px;
	font-size: 44px;
	line-height: 1.1;
	color: #000;
}

.front-page-blog .blog__subheading {
	max-width: 820px;
	margin: 0 auto 26px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #000;
	text-align: center;
}

.front-page-blog .blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin-bottom: 40px;
	text-align: left;
}

.front-page-blog .blog__card {
	display: flex;
	min-width: 0;
	min-height: 340px;
	padding: 20px;
	border-radius: 12px;
	background: #eef3f0;
}

.front-page-blog .blog__card-link {
	display: flex;
	width: 100%;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.front-page-blog .blog__card-image {
	width: 100%;
	height: 210px;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 10px;
	background: #eef3f0;
}

.front-page-blog .blog__card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: transparent;
}

.front-page-blog .blog__card:hover .blog__card-image img {
	transform: none;
}

.front-page-blog .blog__card-title {
	margin: 0 0 7px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #000;
}

.front-page-blog .blog__card-date {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: #000;
}

@media (max-width: 1023px) {
	.front-page-blog .blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.front-page-blog .blog__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.front-page-blog .blog__title {
		font-size: 36px;
	}

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

.clients__logo:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(31, 42, 36, 0.1);
}

.certifications__badge:hover {
	transform: translateY(-4px) scale(1.04);
}

/* Keyboard focus should stay visible everywhere motion is added. */
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--color-dark-green);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Respect users who've asked for less motion: keep content instantly
   visible and drop all page-load/scroll/hover animation. */
@media (prefers-reduced-motion: reduce) {
	.hero__content > *,
	.hero__image,
	.hero__image.motion-done,
	.about-hero__title,
	.about-hero__text,
	.about-hero__image,
	.about-hero__image.motion-done,
	.services-hero__title,
	.services-hero__text,
	.contact-hero__title,
	.contact-hero__text,
	.case-study-hero__title,
	.case-study-hero__text,
	.case-study-visual,
	.why-us__item.is-visible .why-us__icon img,
	.services-overview__grid .about-services__card.is-visible .about-services__icon {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* Higher specificity than the plain .hero__title.motion-done shimmer
	   rule (which is otherwise equal-specificity to, and declared after,
	   the resets above) — the extra `html` guarantees this always wins
	   regardless of source order, so shimmer never runs under reduced
	   motion even though the .motion-done class still gets added by JS. */
	html .hero__title.motion-done,
	html .about-hero__title.motion-done {
		animation: none;
	}

	.site-header::before,
	.primary-navigation > .nav-menu > .menu-item > a::before,
	.team__linkedin,
	.hero::before,
	.hero::after,
	.about-hero::before,
	.about-hero::after {
		transition: none;
		animation: none;
	}

	/* Cross-document view transition (page-to-page cross-fade) — the API
	   doesn't auto-respect this preference, so it's disabled explicitly. */
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.button--primary,
	.button--outline,
	.link-more,
	.services__item-link,
	.blog__card,
	.why-us__item,
	.clients__logo,
	.certifications__badge,
	.blog__card-image img,
	.services__list-indicator,
	.team__member,
	.team__avatar,
	.about-services__card,
	.about-services__icon,
		.single-blog__social a,
		.single-blog__social button,
	.hero__media,
	.about-hero__media,
	.certifications__badge::after,
		.service-detail__more-icon,
		.blog-page__search button,
		.blog__card-read-more span {
		transition: none;
	}

	.button--primary:hover,
	.button--outline:hover,
	.link-more:hover,
	.services__item-link:hover,
	.blog__card:hover,
	.why-us__item:hover,
	.clients__logo:hover,
	.certifications__badge:hover,
	.blog__card:hover .blog__card-image img,
	.team__member:hover,
	.team__member:hover .team__avatar,
	.about-services__card:hover,
		.about-services__card:hover .about-services__icon,
		.single-blog__social a:hover,
		.single-blog__social a:focus-visible,
		.single-blog__social button:hover,
		.single-blog__social button:focus-visible,
		.blog-page__search button:hover,
		.blog__card:hover .blog__card-read-more span {
		transform: none;
	}
}

/* ============================================================
   ABOUT US PAGE (template-about.php)
   ============================================================ */
.about-hero {
	position: relative;
	overflow: hidden;
}

.about-hero::before,
.about-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.about-hero::before {
	top: -140px;
	right: -100px;
	width: 440px;
	height: 440px;
	background: radial-gradient(circle, rgba(46, 94, 78, 0.16), transparent 70%);
}

.about-hero::after {
	bottom: -160px;
	left: -120px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(46, 94, 78, 0.1), transparent 70%);
}

.about-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 40px 120px 0;
	text-align: center;
}

/* Entrance: same staggered fade-rise as the homepage hero (see .hero__content
   > * / keyframes hero-in) for the title + intro text; the illustration below
   gets its own scale-in + idle float instead (see .about-hero__image). */
.about-hero__title,
.about-hero__text {
	opacity: 0;
	transform: translateY(20px);
	animation: hero-in 0.7s ease forwards;
}

.about-hero__title { animation-delay: 0.05s; }
.about-hero__text { animation-delay: 0.15s; }

.about-hero__title.motion-done,
.about-hero__text.motion-done {
	animation: none;
	opacity: 1;
	transform: none;
}

/* Shimmer kicks in once the entrance settles. Equal specificity to (and
   declared after) both generic .motion-done resets above, so it wins the
   cascade tie and swaps hero__title/about-hero__title from static gradient
   text into the shimmer sweep instead of staying at animation: none. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.hero__title.motion-done,
	.about-hero__title.motion-done {
		animation: heading-shimmer 7s ease-in-out infinite;
	}
}

.about-hero__image {
	animation: hero-image-in 0.8s ease 0.3s both;
}

.about-hero__image.motion-done {
	opacity: 1;
	animation: hero-image-float 4s ease-in-out infinite;
}

.about-hero__title {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 70px;
	color: #1a1a1a;
}

.about-hero__text {
	max-width: 1160px;
	margin: 0 auto;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	color: #000;
}

.about-hero__media {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	/* See .hero__media: JS tilts this wrapper on mousemove, while the idle
	   float animation stays on the .about-hero__image child. */
	transition: transform 0.2s ease-out;
	will-change: transform;
}

.about-hero__image {
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
}

/* ---- Get To Know Us ---- */
.team__inner {
	display: flex;
	align-items: flex-start;
	gap: 4rem;
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
}

.team__intro {
	flex: 1 1 50%;
	min-width: 280px;
}

.team__eyebrow {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #000;
}

.team__title {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	color: #000;
	text-align: left;
}

.team__text {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	color: #000;
}

.team__text--strong {
	font-weight: 700;
}

.team__list {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #000;
	list-style: disc;
}

.team__list-item {
	margin-bottom: 0.4rem;
	line-height: 150%;
}

.team__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.team__grid {
	flex: 1 1 46%;
	min-width: 280px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	align-self: center;
	justify-items: center;
}

.team__member {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	position: relative;
	left: 6rem;
	margin-left: 0;
	transition: transform 0.25s ease;
}

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

.team__avatar {
	display: block;
	width: 200px;
	height: auto;
	margin: 0 auto;
	color: #000;
	transition: color 0.25s ease, transform 0.25s ease;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

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

.team__member:hover .team__avatar {
	color: var(--color-dark-green);
	transform: scale(1.05);
}

.team__linkedin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--color-dark-green);
	border-radius: 50%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.team__linkedin:hover {
	background: var(--color-dark-green-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(46, 94, 78, 0.28);
}

.team__linkedin img {
	width: 26px;
	height: 26px;
}

.team__avatar svg {
	width: 166px;
	height: 166px;
}

.team__name {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 40px;
	color: #000;
}

.team__role {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 40px;
	color: #000;
}

/* ---- Our Services (About page card grid) ---- */
.about-services {
	/* Wash background so the --six variant's glass cards (below) have
	   something with visual interest to blur against. Scoped to the
	   section itself, not .about-services__card, since that class is also
	   reused by services-overview__grid on page-what-we-do.php — this
	   section only renders on page-about.php. */
	background: linear-gradient(135deg, #f8faf9 0%, var(--color-light-green) 100%);
}

.about-services__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
	text-align: center;
}

.about-services__title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	color: #000;
}

.about-services__subheading {
	max-width: 800px;
	margin: 0 auto 3rem;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: #000;
}

.about-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	text-align: left;
}

.about-services__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;
	border: 1px solid var(--color-dark-green);
	border-radius: 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-services__card:hover,
.about-services__grid--six .about-services__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(31, 42, 36, 0.15);
}

.about-services__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1rem;
	color: var(--color-dark-green);
	transition: transform 0.25s ease;
}

.about-services__card:hover .about-services__icon {
	transform: scale(1.1);
}

.about-services__icon svg {
	width: 32px;
	height: 32px;
}

.about-services__card-title {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--color-dark-green);
}

.about-services__card-text {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: #000;
}

.about-services__link {
	margin-top: auto;
}

/* ---- Six-card "Services" grid variant (page-about.php) ---- */
.about-services__grid--six {
	grid-template-columns: repeat(3, 1fr);
	column-gap: 64px;
	row-gap: 56px;
	text-align: center;
}

.about-services__grid--six .about-services__card {
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 0;
	padding: 8px;
	/* Glassmorphic: translucent + blurred instead of solid white, so the
	   section's gradient wash shows through. */
	background: rgba(255, 255, 255, 0.55);
	border: 2px solid #2f6b57;
	border-radius: 18px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
}

.about-services__grid--six .about-services__icon {
	width: 72px;
	height: 72px;
	margin-bottom: 0;
}

.about-services__grid--six .about-services__icon svg {
	width: 72px;
	height: 72px;
}

.about-services__grid--six .about-services__card-title {
	margin: 0;
	font-size: 30px;
	text-transform: uppercase;
}

.about-services__grid--six .about-services__card-text {
	margin: 0;
	max-width: 320px;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.22;
	color: #595f68;
}

.about-services__grid--six .about-services__link {
	margin-top: 0;
	font-size: 20px;
}

@media (max-width: 1023px) {
	.services-overview {
		padding: 2.5rem 0 2rem;
	}

	.services-overview__inner {
		padding: 0 1.5rem;
	}

	.about-services__grid--six .about-services__card {
		min-height: 0;
		padding: 8px;
	}

	.about-services__grid--six .about-services__card-title {
		font-size: 22px;
	}
}

@media (max-width: 767px) {
	.about-services__grid--six .about-services__card {
		min-height: 0;
		gap: 6px;
		padding: 8px;
	}

	.about-services__grid--six .about-services__icon,
	.about-services__grid--six .about-services__icon svg {
		width: 56px;
		height: 56px;
	}

	.about-services__grid--six .about-services__card-title {
		font-size: 20px;
	}

	.about-services__grid--six .about-services__card-text {
		max-width: none;
		font-size: 15px;
	}
}

/* ============================================================
   WHAT WE DO / SERVICES PAGE (page-services.php)
   ============================================================ */
.services-hero__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 4rem 2rem 3rem;
	text-align: center;
}

.services-hero__title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.2;
	color: #000;
}

.services-hero__text {
	max-width: 1100px;
	margin: 0 auto;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5;
	color: #000;
}

/* ============================================================
   HIRE QA ENGINEERS PAGE STYLES
   ============================================================ */
.hire-qa-hero {
	background: #fff;
}

.hire-qa-hero__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 5rem 2rem 2rem;
	text-align: center;
}

.hire-qa-hero__title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 1.1;
	color: #000;
}

.hire-qa-hero__text {
	max-width: 1040px;
	margin: 0 auto 0.6rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.75;
	color: #222;
}

@media (min-width: 1280px) {
	.hire-qa-hero__text {
		white-space: nowrap;
	}
}

.hire-qa-hero__media {
	display: flex;
	justify-content: center;
	/* removed bottom gap to tighten spacing between hero image and CTA */
	margin-bottom: 0;
}

.hire-qa-hero__image {
	width: 100%;
	max-width: 686px;
	height: auto;
	transform: translateY(-50px); /* move hero image upward by ~30px to tighten spacing to CTA */
}

.hire-qa-hero__cta {
	margin: 0 auto;
	min-width: 260px;
	/* move CTA upward by ~60px relative to previous spacing */
	margin-top: -3.75rem; /* approx -60px */
}

.hire-qa-hero__cta .button {
	padding: 1rem 2rem;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 700;
}

/* make CTA a small rounded rectangle rather than pill */
.hire-qa-hero__cta,
.hire-qa-cta__button {
	border-radius: 6px;
}

.hire-qa-reasons {
	/* reduced vertical padding to tighten spacing to the next section
	   bottom padding set lower to achieve an overall 60px reduction */
	padding: 80px 2rem 0;
}

.hire-qa-reasons__inner {
	display: grid;
	/* Left column ~42%, right column ~58% per design */
	grid-template-columns: 42% 58%;
	gap: 3rem;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
}

.hire-qa-reasons__content {
	max-width: 620px;
}

.hire-qa-reasons__title {
	margin-bottom: 1.25rem;
	margin-left: 0;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 100%;
	letter-spacing: 0%;
	leading-trim: none;
	text-align: left;
}

.hire-qa-reasons__text {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.8;
	color: #1f2937;
}

.hire-qa-reasons__features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	/* reserve larger left gutter so divider/indicator never overlap text */
	padding-left: 4rem; /* ~64px, moves right-column content ~28px further right */
	position: relative;
}

.hire-qa-reasons__features-inner {
	position: relative;
	min-height: 1px;
}

.hire-qa-feature {
	padding: 0.5rem 0 0.5rem 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer; /* clearly hoverable */
}

.hire-qa-reasons__divider {
	position: absolute;
	/* shift divider left so it sits in its own margin area, away from text */
	left: -1.25rem; /* moved about 20px left */
	top: 0;
	bottom: 0;
	width: 4px;
	pointer-events: none;
	z-index: 0; /* keep behind text */
}

.hire-qa-reasons__divider-track {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--color-border, #e6eef2); /* light gray full-height track */
	border-radius: 2px;
}

.hire-qa-reasons__divider-progress {
	position: absolute;
	left: 0;
	width: 4px;
	height: 25%; /* initial reduced height (~1/4) */
	background: var(--color-dark-green);
	border-radius: 2px;
	transition: top 280ms cubic-bezier(.22,.9,.33,1), height 280ms cubic-bezier(.22,.9,.33,1);
	top: 0;
}

@media (max-width: 766px) {
	.hire-qa-reasons__features {
		padding-left: 4.75rem; /* keep text clear of the bar in the 704–766px range */
	}
	.hire-qa-reasons__divider {
		left: -1.5rem; /* move the scroll rail farther left so it never touches content */
	}
	.hire-qa-reasons__divider-track,
	.hire-qa-reasons__divider-progress {
		width: 3px;
	}
}

.hire-qa-feature:hover .hire-qa-feature__title,
.hire-qa-feature:focus .hire-qa-feature__title,
.hire-qa-feature.is-active .hire-qa-feature__title {
	text-decoration: none;
}

.hire-qa-feature:hover .hire-qa-feature__text,
.hire-qa-feature:focus .hire-qa-feature__text,
.hire-qa-feature.is-active .hire-qa-feature__text {
	opacity: 1;
}

.hire-qa-feature__title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #111;
}

.hire-qa-feature__text {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	letter-spacing: 0%;
	leading-trim: none;
	color: #111;
	width: 100%;
	max-width: 560px;
}

.hire-qa-feature.is-active .hire-qa-feature__title,
.hire-qa-feature.is-active .hire-qa-feature__text,
.hire-qa-feature:hover .hire-qa-feature__title,
.hire-qa-feature:hover .hire-qa-feature__text,
.hire-qa-feature:focus .hire-qa-feature__title,
.hire-qa-feature:focus .hire-qa-feature__text {
	color: var(--color-dark-green);
}

/* Hire QA team cards section */
.hire-qa-team {
	padding: 120px 0 60px;
	background: #fff;
}

.hire-qa-team__inner {
	max-width: 1400px;
	margin: 0 auto;
}

.hire-qa-team__header {
	/* reduce top padding of the team header to decrease gap between sections (further -40px) */
	padding: 20px 0 40px;
	text-align: center;
	max-width: 860px;
	margin: 0 auto 80px;
}

.hire-qa-team__title {
	font-size: 48px;
	font-weight: 700;
	color: #000;
	margin-bottom: 12px;
	white-space: normal;
	text-align: center;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Section subtitle that should appear on two desktop lines */
.hire-qa-team__subtitle {
	margin: 1rem 0 0 -30px;
	font-family: "Inter", sans-serif;
	/* semibold / strong but not full 700 weight */
	font-weight: 600;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	leading-trim: none;
	color: #000; /* ensure dark/black text */
	text-align: left;
	max-width: 620px;
	white-space: normal;
}

@media (max-width: 1023px) {
	.hire-qa-team__title {
		font-size: 36px;
	}
	.hire-qa-team__subtitle {
		/* allow natural wrapping on tablet/mobile */
		max-width: 100%;
		padding: 0 1rem;
		text-align: center;
		margin: 1rem auto 0;
	}
	.hire-qa-team__subtitle-line1 {
		padding-left: 20px; /* move right */
	}
	.hire-qa-team__subtitle-line2 {
		padding-left: 0;
		margin-top: 12px; /* move down */
	}
}

/* Force subtitle into two explicit lines on desktop by making each span a block. On smaller screens they remain inline and wrap naturally. */
@media (min-width: 1024px) {
	/* keep first subtitle line unwrapped on desktop, second line below it */
	.hire-qa-team__subtitle-line1 {
		display: block;
		white-space: nowrap; /* force single line */
		transform: none; /* remove nudge to allow proper centering */
		margin-left: -15px; /* move left */
	}
	.hire-qa-team__subtitle-line2 {
		display: block;
		white-space: nowrap; /* keep second subtitle line on a single line on desktop */
		padding-left: 30px; /* move right */
		margin-top: 12px; /* move down */
	}
	.hire-qa-team__subtitle {
		/* tighten max-width so the header flows nicely with left alignment */
		max-width: 620px;
		text-align: left; /* align left */
	}
}

/* Card grid with 3 cards on top and 2 centered below */
.hire-qa-team__grid {
	display: grid;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.hire-qa-team__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 360px));
	column-gap: 1.75rem;
	row-gap: 1.75rem;
	justify-content: center;
	margin-bottom: 64px; /* increased gap between row 1 and row 2 */
}

.hire-qa-team__row--bottom {
	grid-template-columns: repeat(2, minmax(0, 360px));
}

.hire-qa-team__card {
	width: 100%;
	max-width: 360px;
	min-height: 360px;
	padding: 2rem;
	border: 1px solid var(--color-dark-green); /* CloudRoots green */
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(31, 41, 55, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: flex-start;
}

.hire-qa-team__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(31, 41, 55, 0.12);
}

.hire-qa-team__card .about-services__icon {
	width: auto;
	height: auto;
	margin-bottom: 1.5rem;
}

.hire-qa-team__card .about-services__icon img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.hire-qa-team__card .about-services__card-title {
	margin: 0 0 0.75rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--color-dark-green);
}

.hire-qa-team__card .about-services__card-text {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
	max-width: 280px;
}

@media (max-width: 1023px) {
	.hire-qa-team__row {
		grid-template-columns: repeat(2, minmax(0, 373px));
		justify-content: center;
	}

	.hire-qa-team__card {
		width: min(373px, calc(50vw - 32px));
	}
}

@media (max-width: 767px) {
	.hire-qa-team__row {
		grid-template-columns: minmax(0, calc(100vw - 32px));
	}

	.hire-qa-team__card {
		width: min(373px, calc(100vw - 32px));
	}

	.hire-qa-team__subtitle {
		max-width: 100%;
		text-align: center;
		margin: 1rem auto 0;
	}
	.hire-qa-team__subtitle-line1 {
		padding-left: 20px; /* move right */
	}
	.hire-qa-team__subtitle-line2 {
		padding-left: 0;
		margin-top: 12px; /* move down */
	}
}

.about-services__icon img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	display: block;
	margin: 0 auto 1rem;
}

.hire-qa-cta {
	background: #f3f5f4;
}

.hire-qa-cta__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 4rem 2rem 6rem;
	text-align: center;
}

.hire-qa-cta__eyebrow {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #1f2937;
	display: inline-block;
	padding: 6px 12px;
	border: 2px solid var(--color-dark-green);
	border-radius: 6px;
	background: #fff;
}

.hire-qa-cta__title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.1;
	color: #000;
}

.hire-qa-cta__text {
	max-width: 760px;
	margin: 0 auto 2rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.7;
	color: #1e1e1e;
}

.hire-qa-cta__button {
	margin-bottom: 2rem;
	/* nudge the Contact Us button upward to align with the floated image */
	transform: translateY(-30px);
}

.hire-qa-cta__media {
	display: flex;
	justify-content: center;
}

.hire-qa-cta__image {
	width: 100%;
	max-width: 686px; /* reduced by ~30% from 980px */
	height: auto;
	/* nudge the CTA illustration upward to visually align with the button */
	transform: translateY(-30px);
}

@media (max-width: 767px) {
	.hire-qa-cta__image {
		transform: none; /* keep natural flow on small screens */
	}
	.hire-qa-cta__button {
		transform: none; /* avoid overlap on small screens */
	}
}

@media (max-width: 1023px) {
	.hire-qa-reasons__inner {
		grid-template-columns: 1fr;
	}

	.hire-qa-reasons__features {
		grid-template-columns: 1fr;
	}

	.hire-qa-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Scoped tablet-range rules: 766px — 1022px
   Ensure two cards per row, centered, with consistent gaps
   This prevents overlap by using flexible columns and max-widths
   without changing desktop (>1022px) or mobile (<766px) behavior. */
@media (min-width: 766px) and (max-width: 1022px) {
	.hire-qa-team__row,
	.hire-qa-team__row--bottom {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem; /* horizontal gap between cards */
		row-gap: 1.5rem; /* vertical gap between rows */
		justify-content: center;
		align-items: start;
	}

	.hire-qa-team__card {
		width: 100%;
		max-width: 360px; /* preserve existing card size where possible */
		box-sizing: border-box;
		margin: 0 auto; /* center within each grid column */
	}

	.hire-qa-team__grid {
		gap: 1.5rem; /* keep consistent gap inside outer grid */
		padding: 0 1rem; /* avoid touching viewport edges */
		box-sizing: border-box;
	}
}

@media (max-width: 767px) {
	.hire-qa-hero__inner {
		padding: 3rem 1.25rem 2rem;
	}

	.hire-qa-hero__title {
		font-size: 36px;
	}

	.hire-qa-hero__text,
	.hire-qa-team__subtitle,
	.hire-qa-cta__text {
		font-size: 16px;
	}

	.hire-qa-reasons {
		padding: 3rem 1.25rem;
	}

	.hire-qa-team {
		padding: 3rem 1.25rem 2rem;
	}

	.hire-qa-team__grid {
		grid-template-columns: 1fr;
	}

	.hire-qa-reasons__features {
		gap: 1.25rem;
	}

	.hire-qa-cta__inner {
		padding: 3rem 1.25rem 4rem;
	}
}

@media (max-width: 400px) {
	.hire-qa-hero__title {
		font-size: 32px;
	}

	.hire-qa-cta__title {
		font-size: 32px;
	}
}

/* Entrance: same staggered fade-rise as the homepage/About hero (see
   .hero__content > * / .about-hero__title, .about-hero__text and
   @keyframes hero-in) — this hero has no image, so just the two text
   elements need it. animations.js adds .motion-done ~1200ms after load
   (see heroMotionEls), matching those other heroes' lifecycle. */
.services-hero__title,
.services-hero__text {
	opacity: 0;
	transform: translateY(20px);
	animation: hero-in 0.7s ease forwards;
}

.services-hero__title { animation-delay: 0.05s; }
.services-hero__text { animation-delay: 0.15s; }

.services-hero__title.motion-done,
.services-hero__text.motion-done {
	animation: none;
	opacity: 1;
	transform: none;
}

/* ---- Services overview: intro copy + 6-card grid, light background
   band per the reference layout ---- */
/* Light gray / very light green rectangular band behind the services
   overview content and cards only, without spilling into the rest of the
   page. Keep the band contained to this section with clean top/bottom
   boundaries like the reference. */
.services-overview {
	padding: 3.5rem 0 3rem;
}

.services-overview__inner {
	display: flex;
	align-items: center;
	gap: 3rem;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 2rem;
}

.services-overview__intro {
	flex: 1 1 34%;
	min-width: 260px;
	background: linear-gradient(180deg, #f3f5f3 0%, #edf5ef 100%);
	padding: 2.5rem 4rem;
	border-radius: 8px;
	margin-left: -2rem;
	margin-right: 0;
	padding-left: calc(4rem + 2rem);
}

.services-overview__title {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.3;
	color: #000;
}

/* Reference layout's "A comprehensive suite of Accessibility Services"
   line — one step down from the h2 above, one step up from the plain
   body text below (not a bold-dark-green eyebrow above the heading, which
   is what this used to be before the heading order was corrected). */
.services-overview__subheading {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.35;
	color: #000;
}

.services-overview__text {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	color: #000;
}

.services-overview__grid {
	position: relative;
	flex: 1 1 62%;
	min-width: 280px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* start (not the grid default of stretch) so the nth-child(2)/(5)
	   offset below moves each card without also stretching it taller/
	   shorter to fill its row track. */
	align-items: start;
	gap: 2.5rem 1.5rem;
}

/* Transparent wrapper: its 6 <article> children become direct grid items
   of .services-overview__grid exactly as if this element weren't there,
   so [data-reveal-group] can be scoped to just the cards (excluding the
   .services-overview__mark sibling below) without affecting the grid
   layout or nth-child(2)/(5) staggering. */
.services-overview__cards {
	display: contents;
}

/* Reuses .about-services__card, but the overview cards are compact
   (no border, just icon + title + one-line blurb) since the full
   description lives in each detail section below. Centered (rather than
   the base class's left-aligned layout) to match the reference cards. */
.services-overview__grid .about-services__card {
	position: relative;
	z-index: 1;
	align-items: center;
	padding: 1.5rem 1.25rem;
	background: #fff;
	text-align: center;
	/* Apply a subtle, theme-consistent green border for the six overview cards */
	border-color: var(--color-dark-green);
}

.services-overview__grid .about-services__card-text {
	margin: 0;
	font-size: 15px;
	/* Ensure overview card descriptions use regular weight only in the
	   Services "What We Do" overview grid. This is intentionally scoped
	   so other uses of .about-services__card-text remain unchanged. */
	font-weight: 400;
}

/* Bigger icons than the base .about-services__card default (48px box /
   32px svg) — these cards are the whole focus of this grid (icon, title,
   one-line blurb, nothing else), so the icon can carry more visual weight
   than it does in the narrower service-detail context that class also
   serves. */
.services-overview__grid .about-services__icon {
	width: 64px;
	height: 64px;
}

.services-overview__grid .about-services__icon svg {
	width: 64px;
	height: 64px;
}

/* Icon pop-in on reveal — reuses the same icon-pop keyframe/timing as the
   homepage Why Us icons (see @keyframes icon-pop above) rather than a new
   one, triggered by the same .is-visible class [data-reveal-group]/the
   IntersectionObserver already add to each card. This is in addition to,
   not instead of, the stroke-draw animation already running generically
   on every .about-services__icon svg (see animations.js) — that one only
   draws the icon's own lines and is easy to miss on a small clipboard
   icon; this adds a much more noticeable bounce-scale of the whole icon. */
.services-overview__grid .about-services__card.is-visible .about-services__icon {
	animation: icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: 0.2s;
}

/* Staggered "hourglass" layout matching the reference: the middle-column
   card in each row is offset vertically away from its row, leaving a gap
   at the grid's center for .services-overview__mark. Only meaningful at
   the 3-column desktop layout — reset to 0 wherever the grid drops to 2
   or 1 columns (see the 767px/400px breakpoints). Offset is deliberately
   large (not a subtle nudge) so the stagger actually reads at a glance,
   matching how pronounced it is in the reference. */
.services-overview__grid .about-services__card:nth-child(2) {
	margin-top: -72px;
}

.services-overview__grid .about-services__card:nth-child(5) {
	margin-top: 72px;
}

/* ---- Service detail sections: alternating image/text ---- */
.service-detail--alt {
	background: var(--color-light-green);
}

.service-detail__inner {
	display: flex;
	align-items: center;
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
}

/* .service-detail--reverse sections (Test Automation, Performance Testing,
   Quality Consulting) already put .service-detail__content before
   .service-detail__media in the DOM specifically to alternate sides —
   default row flex direction is enough to render that as text-left/
   media-right. A flex-direction: row-reverse used to live here too, which
   flipped the visual order straight back to media-left, silently
   cancelling the alternation the DOM order was already set up to do. */

/* Service detail media wrapper — the white placeholder box is removed
   once a real image is placed here. Images are lifted up slightly so they
   sit naturally at the top of the media area. */
.service-detail__media {
	flex: 1 1 45%;
	min-width: 260px;
	height: 448px;
	background: transparent;
	border: none;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}

.service-detail__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	margin-top: 10px;
	transform: scale(0.92);
	transform-origin: center;
}

.service-detail__content {
	flex: 1 1 55%;
	min-width: 280px;
}

.service-detail__title {
	margin: 0 0 0.4rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: #000;
}

.service-detail__subheading {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--color-dark-green);
}

.service-detail__text {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	color: #000;
}

.service-detail__list {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
	list-style: disc;
}

.service-detail__list li {
	margin-bottom: 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	color: #000;
}

/* Read More toggle: a plain <button> (see main.js) sitting AFTER the
   hidden extra-bullets list, not a <details>/<summary> wrapping it — a
   <summary> is always the FIRST child of a <details>, which would pin the
   button above the revealed content permanently. Placing the button after
   the hidden list instead means it sits directly below whichever content
   currently precedes it, so it visually moves down as the extra bullets
   reveal rather than staying fixed above them. */
.service-detail__list--more[hidden] {
	display: none;
}

.service-detail__more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 0.75rem;
	margin-bottom: 1.25rem;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.service-detail__more-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.25s ease;
}

.service-detail__more-toggle.is-open .service-detail__more-icon {
	transform: rotate(180deg);
}

/* Anchor link offset for sticky header — ensures sections with IDs
   don't get hidden behind the sticky header when scrolled to */
#database-qa,
#automation,
#dedicated-resource-allocation {
	scroll-margin-top: 100px;
}

/* ============================================================
   CONTACT US PAGE (page-contact.php)
   ============================================================ */
.contact-hero__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 4rem 2rem 1rem;
	text-align: center;
}

.contact-hero__title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.2;
	color: #000;
}

.contact-hero__text {
	max-width: 760px;
	margin: 0 auto;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5;
	color: #000;
}

/* Entrance: same staggered fade-rise as the other text-only heroes (see
   .services-hero__title/.text and @keyframes hero-in) — this hero has no
   image either, so just the two text elements need it. animations.js adds
   .motion-done ~1200ms after load (see heroMotionEls). */
.contact-hero__title,
.contact-hero__text {
	opacity: 0;
	transform: translateY(20px);
	animation: hero-in 0.7s ease forwards;
}

.contact-hero__title { animation-delay: 0.05s; }
.contact-hero__text { animation-delay: 0.15s; }

.contact-hero__title.motion-done,
.contact-hero__text.motion-done {
	animation: none;
	opacity: 1;
	transform: none;
}

.contact-section__inner {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
}

.contact-form-col {
	flex: 1 1 46%;
	min-width: 280px;
}

.contact-office-col,
.contact-info-col {
	flex: 1 1 24%;
	min-width: 220px;
}

.contact-section__title {
	margin: 0 0 0.75rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
	color: #000;
}

.contact-section__lead {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: #000;
}

.contact-form__required-note {
	margin: 0 0 1.25rem;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: var(--color-text-muted);
}

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

.contact-form__row {
	display: flex;
	gap: 1rem;
}

.contact-form__field {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.contact-form__field--full {
	flex: 1 1 100%;
}

.contact-form__label {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #000;
}

.contact-form__input {
	width: 100%;
	padding: 12px 14px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	color: #000;
	background: #fff;
	border: 1px solid #000;
	border-radius: 6px;
	box-sizing: border-box;
}

.contact-form__textarea {
	resize: vertical;
}

.contact-form__agree {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #000;
}

.contact-form__agree a {
	color: var(--color-dark-green);
	font-weight: 600;
}

.contact-form__submit {
	align-self: flex-start;
	border-radius: 6px;
}

.contact-office {
	margin-bottom: 1.5rem;
}

.contact-office__address {
	display: inline-block;
	min-height: 1.2em;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-dark-green);
	text-decoration: underline;
}

.contact-info__item {
	margin-bottom: 1.5rem;
}

.contact-info__label {
	margin: 0 0 0.4rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #000;
}

.contact-info__value {
	display: inline-block;
	min-height: 1.2em;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	color: var(--color-dark-green);
	text-decoration: underline;
}

.contact-info__note {
	margin: 0.5rem 0 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: #4a4a4a;
}

/* ============================================================
   REQUEST A QUOTE MODAL (triggered from the header CTA)
   ============================================================ */
.quote-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.quote-modal.is-open {
	display: block;
}

.quote-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 24, 19, 0.82);
	backdrop-filter: blur(8px);
}

.quote-modal__dialog {
	position: relative;
	width: calc(100% - 2rem);
	max-width: 680px;
	max-height: calc(100vh - 4rem);
	margin: 2rem auto;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: #1d3931;
	border: 1px solid rgba(184, 237, 207, 0.28);
	border-radius: 24px;
	box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38), 0 0 0 10px rgba(184, 237, 207, 0.04);
}

.quote-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(184, 237, 207, 0.2);
}

.quote-modal__title {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	color: #f6f8f2;
}

.quote-modal__close {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: rgba(184, 237, 207, 0.12);
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: #f6f8f2;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.quote-modal__close:hover {
	background: rgba(184, 237, 207, 0.25);
	transform: rotate(90deg);
}

body.modal-open {
	overflow: hidden;
}

#quote-modal .contact-form__required-note {
	color: rgba(246, 248, 242, 0.72);
}

#quote-modal .contact-form {
	gap: 1.1rem;
}

#quote-modal .contact-form__input {
	padding: 13px 15px;
	background: rgba(246, 248, 242, 0.08);
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 10px;
	color: #f6f8f2;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#quote-modal .contact-form__input::placeholder {
	color: rgba(246, 248, 242, 0.62);
}

#quote-modal .contact-form__input:focus {
	background: rgba(246, 248, 242, 0.14);
	border-color: var(--serb-mint, #b8edcf);
	box-shadow: 0 0 0 3px rgba(184, 237, 207, 0.14);
	outline: none;
}

#quote-modal .contact-form__label,
#quote-modal .contact-form__agree {
	color: #f6f8f2;
}

#quote-modal .contact-form__agree a {
	color: var(--color-light-green);
}

#quote-modal .contact-form__submit {
	margin-top: 0.35rem;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
}

#quote-modal select.contact-form__input option {
	background: #1d3931;
	color: #f6f8f2;
}

/* Quote form validation + submit feedback (see the fetch() handler in
   main.js). Kept in this section rather than the generic .contact-form
   rules above since page-contact.php's own form isn't wired to
   admin-ajax.php yet and doesn't use these states. */
.contact-form__status {
	margin-bottom: 0.25rem;
	padding: 12px 16px;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 8px;
}

.contact-form__status[hidden] {
	display: none;
}

.contact-form__status--success {
	background: var(--color-light-green);
	color: var(--color-dark-green);
	border: 1px solid var(--color-dark-green);
}

.contact-form__status--error {
	background: #fbeaea;
	color: #a13327;
	border: 1px solid #a13327;
}

.contact-form__error {
	min-height: 1em;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	color: #a13327;
}

.contact-form__field.is-invalid .contact-form__input {
	border-color: #a13327;
}

.contact-form__submit[disabled] {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Honeypot spam trap (see the "website" field in footer.php / page-contact.php
   and company_theme_handle_quote_request() in functions.php). Positioned
   off-screen rather than display:none/visibility:hidden — some bots skip
   fields hidden that way but still fill anything still present in layout. */
.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	max-width: 1300px;
	margin: 0 auto;
	padding: 60px 75px 2rem;
}

.site-footer__about {
	flex: 1 1 60%;
	min-width: 280px;
}

.site-footer__text {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 160%;
	color: #1a1a1a;
}

.site-footer__social {
	display: flex;
	gap: 18px;
	margin-top: 1.5rem;
}

/* Figma's own social icon assets are custom-designed square tiles; ours are
   thin line-art PNGs, so they're forced to a white silhouette rather than
   cover-cropped like the source design does. */
.site-footer__social-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--color-dark-green);
	border-radius: 10px;
}

.site-footer__social-item a:hover {
	background: var(--color-dark-green-hover);
}

.site-footer__social-item img {
	width: 42px;
	height: 42px;
	filter: brightness(0) invert(1);
}

.site-footer__links {
	flex: 1 1 30%;
	min-width: 200px;
}

.site-footer__links-title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 120%;
	color: #1a1a1a;
	margin: 0 0 1rem;
}

.site-footer__links-columns {
	display: flex;
	gap: 3rem;
}

.site-footer__links-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.site-footer__links-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 120%;
	color: #1a1a1a;
	text-decoration: none;
}

/* CSS-drawn chevron, matching Figma's small ">" icon before each link */
.site-footer__links-item a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: rotate(-45deg);
}

.site-footer__copyright {
	text-align: center;
	padding: 1rem 2rem 2rem;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* ============================================================
   CASE STUDIES PAGE
   ============================================================ */

.case-studies-page {
	background: #fff;
}

/* Hero / Title section */
.case-studies-hero {
	padding: 5rem 0;
	text-align: center;
	background: #fff;
}

.case-studies-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.case-studies-hero__title {
	margin: 0;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	opacity: 1;
	transform: translateY(0);
}

/* Case studies grid section */
.case-studies-section {
	padding: 3rem 0 5rem;
	background: #fff;
}

.case-studies-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.case-studies-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
}

/* Case study card */
.case-study-card {
	border-radius: 18px;
	overflow: hidden;
	background: var(--color-light-green);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	opacity: 1;
	transform: translateY(0);
}

.case-study-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(31, 42, 36, 0.12);
}

.case-study-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* Card image area */
.case-study-card-image {
	width: 100%;
	padding: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	background: var(--color-light-green);
	border-radius: 12px;
	overflow: hidden;
}

.case-study-card-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	object-fit: contain;
	object-position: center;
}

/* Card content / title */
.case-study-card-content {
	padding: 0 20px 22px;
}

.case-study-card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text);
}

/* ============================================================
   COTREAT CASE STUDY PAGE
   ============================================================ */
.cotreat-page {
	background: #f4f4f1;
	color: var(--color-text);
}

.cotreat-container {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 30px;
}

.cotreat-hero {
	padding-top: 3.5rem;
}

.cotreat-hero__content {
	max-width: 1100px;
}

.cotreat-kicker {
	margin: 0 0 0.8rem;
	color: var(--color-dark-green);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.cotreat-title {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 5rem);
	line-height: 1;
	letter-spacing: -0.06em;
	font-weight: 800;
}

.cotreat-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.4rem;
	margin: 1.2rem 0 0;
	font-size: 1rem;
	color: var(--color-text-muted);
}

.cotreat-meta span {
	position: relative;
}

.cotreat-meta span + span::before {
	content: "|";
	margin-right: 1rem;
	color: rgba(31, 42, 36, 0.38);
}

.cotreat-overview {
	padding-top: 1.5rem;
}

.cotreat-overview__grid {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 2rem;
	align-items: start;
}

.cotreat-copy {
	padding-right: 0.5rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-text);
}

.cotreat-copy p {
	margin: 0 0 1.2rem;
}

.cotreat-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem;
}

.cotreat-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 170px;
	padding: 1.45rem 1.2rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(31, 42, 36, 0.08);
	box-shadow: 0 14px 26px rgba(31, 42, 36, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cotreat-stat:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 30px rgba(31, 42, 36, 0.08);
}

.cotreat-stat__value {
	font-size: clamp(2.5rem, 4vw, 3.4rem);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.06em;
	color: var(--color-text);
}

.cotreat-stat__label {
	margin-top: 0.7rem;
	font-size: 0.94rem;
	line-height: 1.35;
	color: var(--color-text-muted);
}

.cotreat-flow,
.cotreat-health {
	padding-top: 2.2rem;
}

.cotreat-section-heading {
	margin: 0 0 1.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.cotreat-flow__before,
.cotreat-flow__after {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 0.45rem;
	padding: 1.1rem 0;
	margin-bottom: 1.2rem;
	border-top: 1px solid rgba(31, 42, 36, 0.12);
}

.cotreat-flow__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(31, 42, 36, 0.1);
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
}

.cotreat-flow__arrow {
	font-size: 1.4rem;
	color: rgba(31, 42, 36, 0.65);
}

.cotreat-rings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 0.5rem;
}

.cotreat-ring-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.cotreat-ring {
	--size: 200px;
	--thickness: 16px;
	--percent: 0;
	--ring-color: #191d1a;
	position: relative;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: conic-gradient(var(--ring-color) calc(var(--percent) * 1%), rgba(31, 42, 36, 0.1) 0);
	display: grid;
	place-items: center;
	transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.cotreat-ring:hover {
		transform: scale(1.03);
	}
}

.cotreat-ring::before {
	content: "";
	position: absolute;
	inset: var(--thickness);
	border-radius: 50%;
	background: #f4f4f1;
}

.cotreat-ring__inner {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: clamp(2.2rem, 3vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	color: var(--color-text);
}

.cotreat-ring-card p {
	margin: 0;
	max-width: 220px;
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

@media (max-width: 1023px) {
	.cotreat-overview__grid,
	.cotreat-rings {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 767px) {
	.cotreat-title {
		font-size: 2.5rem;
	}

	.cotreat-meta {
		flex-direction: column;
		gap: 0.5rem;
	}

	.cotreat-meta span + span::before {
		content: "";
		margin: 0;
	}

	.cotreat-stats,
	.cotreat-rings {
		grid-template-columns: 1fr;
	}

	.cotreat-container {
		padding: 0 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cotreat-stat,
	.cotreat-flow__chip,
	.cotreat-ring-card {
		transition: none;
	}

	.cotreat-stat:hover {
		transform: none;
		box-shadow: none;
	}
}

/* ============================================================
   SERB CASE STUDY PAGE
   ============================================================ */
.cotreat-page {
	--cotreat-ink: #1d3931;
	--cotreat-mint: #b8edcf;
	--cotreat-paper: #f4f6f0;
	--cotreat-line: rgba(19, 35, 31, 0.14);
	background: var(--cotreat-paper);
	color: var(--cotreat-ink);
}

.cotreat-container {
	width: min(1200px, calc(100% - 60px));
	max-width: none;
	padding: 0;
}

.cotreat-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(5rem, 11vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
	background: var(--cotreat-ink);
	color: #f6f8f2;
}

.cotreat-hero::after {
	content: "";
	position: absolute;
	right: 7%;
	top: 18%;
	width: 260px;
	height: 260px;
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 0 30px rgba(184, 237, 207, 0.06), 0 0 0 60px rgba(184, 237, 207, 0.03);
	pointer-events: none;
}

.cotreat-hero__content {
	position: relative;
	z-index: 1;
	max-width: 900px;
}

.cotreat-title {
	margin: 0;
	font-size: clamp(3.2rem, 8vw, 7.2rem);
	line-height: 0.98;
	letter-spacing: -0.07em;
	font-weight: 800;
	text-wrap: balance;
}

.cotreat-title::first-line {
	color: var(--cotreat-mint);
}

.cotreat-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 2.25rem 0 0;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #fff;
}

.cotreat-meta span {
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 999px;
}

.cotreat-meta span + span::before {
	display: none;
}

.cotreat-overview {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: #fff;
}

.cotreat-overview__grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
	gap: clamp(3rem, 7vw, 7rem);
}

.cotreat-copy {
	max-width: 680px;
	padding-right: 0;
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.7;
	color: #294139;
}

.cotreat-copy p {
	margin: 0 0 1.6rem;
}

.cotreat-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--cotreat-line);
	border-left: 1px solid var(--cotreat-line);
}

.cotreat-stat {
	min-height: 175px;
	padding: 1.5rem;
	border: 0;
	border-right: 1px solid var(--cotreat-line);
	border-bottom: 1px solid var(--cotreat-line);
	border-radius: 0;
	background: var(--cotreat-paper);
	box-shadow: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.cotreat-stat:hover {
	background: var(--cotreat-mint);
	box-shadow: none;
	transform: translateY(-5px);
}

.cotreat-stat__value {
	font-size: clamp(2.8rem, 5vw, 4.2rem);
	line-height: 0.95;
	letter-spacing: -0.07em;
	color: var(--cotreat-ink);
}

.cotreat-stat__label {
	max-width: 150px;
	margin-top: 0.9rem;
	font-size: 0.88rem;
	line-height: 1.35;
	color: #52635b;
}

@keyframes cotreat-stat-value-in {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.88);
	}
	70% {
		opacity: 1;
		transform: translateY(-2px) scale(1.03);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.cotreat-stat.is-visible .cotreat-stat__value {
	animation: cotreat-stat-value-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cotreat-stat:nth-child(2).is-visible .cotreat-stat__value {
	animation-delay: 90ms;
}

.cotreat-stat:nth-child(3).is-visible .cotreat-stat__value {
	animation-delay: 180ms;
}

.cotreat-stat:nth-child(4).is-visible .cotreat-stat__value {
	animation-delay: 270ms;
}

.cotreat-flow {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: var(--cotreat-paper);
}

.cotreat-section-heading {
	margin: 0 0 1.75rem;
	font-size: clamp(1.8rem, 3vw, 2.7rem);
	line-height: 1;
	letter-spacing: -0.05em;
	font-weight: 800;
	color: var(--cotreat-ink);
}

.cotreat-flow__before,
.cotreat-flow__after {
	gap: 0.7rem;
	padding: 1.5rem 0;
	margin-bottom: 0;
	border-top: 1px solid var(--cotreat-line);
}

.cotreat-flow__after {
	border-top: 0;
}

.cotreat-flow__chip {
	min-height: 52px;
	padding: 0.8rem 1.15rem;
	border: 1px solid var(--cotreat-line);
	border-radius: 14px;
	background: #fff;
	color: var(--cotreat-ink);
	font-size: 0.92rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cotreat-flow__description {
	max-width: 820px;
	min-height: 1.4em;
	margin: -0.45rem 0 1.2rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
	.cotreat-flow__chip:hover {
		background: var(--cotreat-ink);
		border-color: var(--cotreat-ink);
		color: #fff;
		transform: translateY(-2px);
	}
}

.cotreat-flow__arrow {
	font-size: 1.2rem;
	color: rgba(19, 35, 31, 0.55);
}

.cotreat-health {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: var(--cotreat-ink);
}

.cotreat-health .cotreat-section-heading {
	color: #f6f8f2;
}

.cotreat-rings {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 1rem;
}

.cotreat-ring {
	--ring-color: var(--cotreat-mint) !important;
	--size: 190px;
	--thickness: 14px;
	background: conic-gradient(var(--ring-color) calc(var(--percent) * 1%), rgba(184, 237, 207, 0.12) 0);
}

.cotreat-ring::before {
	background: var(--cotreat-ink);
}

.cotreat-ring__inner {
	font-size: clamp(2.2rem, 3vw, 3.2rem);
	color: #f6f8f2;
}

.cotreat-ring-card.is-visible .cotreat-ring__inner {
	animation: cotreat-stat-value-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cotreat-ring-card:nth-child(2).is-visible .cotreat-ring__inner {
	animation-delay: 90ms;
}

.cotreat-ring-card:nth-child(3).is-visible .cotreat-ring__inner {
	animation-delay: 180ms;
}

.cotreat-ring-card p {
	max-width: 220px;
	font-size: 0.95rem;
	color: #fff;
}

@media (max-width: 1023px) {
	.cotreat-overview__grid {
		grid-template-columns: 1fr;
	}

	.cotreat-rings {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cotreat-container {
		width: min(calc(100% - 36px), 1200px);
	}

	.cotreat-hero::after {
		right: -110px;
		top: 12%;
	}

	.cotreat-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

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

	.cotreat-stat {
		min-height: 135px;
		padding: 1.1rem;
	}

	.cotreat-flow__before,
	.cotreat-flow__after {
		flex-direction: column;
		align-items: stretch;
	}

	.cotreat-flow__arrow {
		transform: rotate(90deg);
		align-self: flex-start;
		margin-left: 1.4rem;
	}
}

@media (max-width: 400px) {
	.cotreat-title {
		font-size: 3rem;
	}

	.cotreat-stats,
	.cotreat-rings {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cotreat-stat,
	.cotreat-flow__chip,
	.cotreat-ring-card,
	.cotreat-stat__value,
	.cotreat-ring__inner,
	.cotreat-ring {
		transition: none;
		animation: none;
	}

	.cotreat-stat:hover {
		transform: none;
	}

	.cotreat-ring:hover {
		transform: none;
	}
}

.serb-page {
	background: #f4f4f1;
	color: var(--color-text);
}

.serb-container {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 30px;
}

.serb-hero {
	padding-top: 3.5rem;
}

.serb-hero__content {
	max-width: 1100px;
}

.serb-kicker {
	margin: 0 0 0.8rem;
	color: var(--color-dark-green);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.serb-title {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.06em;
	font-weight: 800;
}

.serb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.4rem;
	margin: 1.2rem 0 0;
	font-size: 1rem;
	color: #fff;
}

.serb-meta span {
	position: relative;
}

.serb-meta span + span::before {
	content: "|";
	margin-right: 1rem;
	color: rgba(31, 42, 36, 0.38);
}

.serb-overview {
	padding-top: 1.5rem;
}

.serb-overview__grid {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 2rem;
	align-items: start;
}

.serb-copy {
	padding-right: 0.5rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-text);
}

.serb-copy p {
	margin: 0 0 1.2rem;
}

.serb-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem;
}

.serb-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 170px;
	padding: 1.45rem 1.2rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(31, 42, 36, 0.08);
	box-shadow: 0 14px 26px rgba(31, 42, 36, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.serb-stat:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 30px rgba(31, 42, 36, 0.08);
}

.serb-stat__value {
	font-size: clamp(2.8rem, 4vw, 4rem);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.06em;
	color: var(--color-text);
}

.serb-stat__label {
	margin-top: 0.7rem;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--color-text-muted);
}

.serb-flow,
.serb-coverage {
	padding-top: 2.2rem;
}

.serb-section-heading {
	margin: 0 0 1.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.serb-flow__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 0.45rem;
	padding: 1.1rem 0 0.1rem;
	margin-bottom: 1.2rem;
	border-top: 1px solid rgba(31, 42, 36, 0.12);
}

.serb-flow__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.8rem 1.15rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(31, 42, 36, 0.1);
	color: var(--color-text);
	font-size: 0.96rem;
	font-weight: 500;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.serb-flow__arrow {
	font-size: 1.4rem;
	color: rgba(31, 42, 36, 0.65);
}

.serb-flow__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	padding: 0.2rem 0 0.6rem;
}

.serb-flow__description,
.serb-flow__testing-description {
	max-width: 760px;
	margin: 0 0 1.2rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.serb-flow__testing-description {
	margin-top: 0.15rem;
}

.serb-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(31, 42, 36, 0.08);
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}


@media (hover: hover) and (pointer: fine) {
	.serb-flow__step:hover,
	.serb-tag:hover {
		background: #171b1a;
		border-color: #171b1a;
		color: #fff;
	}
}

.serb-rings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-top: 0.5rem;
}

.serb-ring-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.serb-ring {
	--size: 200px;
	--thickness: 16px;
	--percent: 0;
	--ring-color: #171b1a;
	position: relative;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: conic-gradient(var(--ring-color) calc(var(--percent) * 1%), rgba(31, 42, 36, 0.1) 0);
	display: grid;
	place-items: center;
	transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.serb-ring:hover {
		transform: scale(1.03);
	}
}

.serb-ring::before {
	content: "";
	position: absolute;
	inset: var(--thickness);
	border-radius: 50%;
	background: #f4f4f1;
}

.serb-ring__inner {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: clamp(2.2rem, 3vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	color: var(--color-text);
}

.serb-ring-card p {
	margin: 0;
	max-width: 220px;
	font-size: 0.95rem;
	color: #fff;
}

@media (max-width: 1023px) {
	.serb-overview__grid,
	.serb-rings {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 767px) {
	.serb-title {
		font-size: 2.5rem;
	}

	.serb-meta {
		flex-direction: column;
		gap: 0.5rem;
	}

	.serb-meta span + span::before {
		content: "";
		margin: 0;
	}

	.serb-stats,
	.serb-rings {
		grid-template-columns: 1fr;
	}

	.serb-container {
		padding: 0 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.serb-stat,
	.serb-flow__step,
	.serb-tag,
	.serb-ring-card,
	.serb-ring {
		transition: none;
	}

	.serb-stat:hover {
		transform: none;
		box-shadow: none;
	}

	.serb-ring:hover {
		transform: none;
	}
}

/* ============================================================
   CURATELY CASE STUDY PAGE
   ============================================================ */
.curately-page {
	--curately-ink: #1d3931;
	--curately-mint: #b8edcf;
	--curately-paper: #f4f6f0;
	--curately-line: rgba(19, 35, 31, 0.13);
	background: var(--curately-paper);
	color: var(--curately-ink);
}

.curately-container {
	width: min(1200px, calc(100% - 60px));
	margin: 0 auto;
}

.curately-intro {
	position: relative;
	overflow: hidden;
	padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
	background: var(--curately-ink);
	color: #f6f8f2;
}

.curately-intro::after {
	content: "";
	position: absolute;
	right: 7%;
	top: 18%;
	width: 230px;
	height: 230px;
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 50%;
	box-shadow: 0 0 0 28px rgba(184, 237, 207, 0.05), 0 0 0 56px rgba(184, 237, 207, 0.03);
	pointer-events: none;
}

.curately-intro__content {
	position: relative;
	z-index: 1;
	max-width: 920px;
}

.curately-hero__title.reveal,
.curately-hero__meta.reveal {
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.curately-hero__title.reveal {
	transform: translateY(20px);
}

.curately-hero__title.reveal.is-visible,
.curately-hero__meta.reveal.is-visible {
	transform: none;
}

.curately-hero__meta.reveal {
	transform: translateY(16px);
	transition-delay: 120ms;
}

.curately-title {
	max-width: 850px;
	margin: 0;
	font-size: clamp(3.2rem, 8vw, 7.3rem);
	line-height: 0.96;
	letter-spacing: -0.07em;
	font-weight: 800;
	text-wrap: balance;
}

.curately-title::first-line {
	color: var(--curately-mint);
}

.curately-title__i {
	display: inline-block;
	margin-left: 0.06em;
}

.curately-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 2.25rem 0 0;
	font-size: 0.82rem;
	line-height: 1.35;
	color: rgba(246, 248, 242, 0.84);
}

.curately-meta span {
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(184, 237, 207, 0.3);
	border-radius: 999px;
}

.curately-meta span + span::before {
	display: none;
}

.curately-overview {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: #fff;
}

.curate-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
	gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}

.curately-copy {
	max-width: 680px;
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.7;
	color: #294139;
}

.curately-copy p {
	margin: 0 0 1.6rem;
}

.curately-story__challenge.reveal {
	transform: translateX(-20px);
	transition-duration: 0.6s;
}

.curately-story__challenge.reveal.is-visible {
	transform: none;
}

.curately-story__solution.reveal {
	transform: translateY(20px);
	transition-delay: 100ms;
	transition-duration: 0.6s;
}

.curately-story__solution.reveal.is-visible {
	transform: none;
}

.curately-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--curately-line);
	border-left: 1px solid var(--curately-line);
}

.curately-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 175px;
	padding: 1.5rem;
	border-right: 1px solid var(--curately-line);
	border-bottom: 1px solid var(--curately-line);
	background: var(--curately-paper);
	transition: background 0.25s ease, transform 0.25s ease;
}

.curately-stat:hover {
	background: var(--curately-mint);
	transform: translateY(-5px);
}

.curately-story__results .curately-stat.reveal {
	transform: translateX(20px);
	transition-duration: 0.6s;
}

.curately-story__results .curately-stat.reveal.is-visible {
	transform: none;
}

.curately-story__results .curately-stat.reveal.is-visible:hover {
	transform: translateY(-5px);
}

.curately-stat__value {
	font-size: clamp(2.8rem, 5vw, 4.2rem);
	line-height: 0.95;
	letter-spacing: -0.07em;
	font-weight: 800;
	color: var(--curately-ink);
}

.curately-stat__label {
	max-width: 130px;
	margin-top: 0.9rem;
	font-size: 0.88rem;
	line-height: 1.35;
	color: #52635b;
}

.curately-matrix {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: var(--curately-paper);
}

.curately-section-heading {
	margin: 0 0 1.75rem;
	font-size: clamp(1.8rem, 3vw, 2.7rem);
	line-height: 1;
	letter-spacing: -0.05em;
	font-weight: 800;
	color: var(--curately-ink);
}

.curately-table-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--curately-line);
	box-shadow: 12px 12px 0 var(--curately-mint);
}

.curately-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
}

.curately-table thead th {
	padding: 1.1rem 1.2rem;
	background: var(--curately-ink);
	color: #fff;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.curately-table thead th:not(:first-child),
.curately-table tbody td:not(:first-child) {
	text-align: center;
}

.curately-table tbody td {
	padding: 1.2rem;
	border-bottom: 1px solid var(--curately-line);
	background: #fff;
	font-size: 0.96rem;
}

.curately-table tbody tr:last-child td {
	border-bottom: 0;
}

.curately-table tbody tr:nth-child(even) td {
	background: #f8faf5;
}

.checkmark {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--curately-mint);
	color: var(--curately-ink);
	font-weight: 800;
}

.dash {
	color: rgba(19, 35, 31, 0.4);
}

.curately-strength {
	padding: clamp(4rem, 8vw, 7rem) 0;
	background: var(--curately-ink);
	color: #f6f8f2;
}

.strength-layout {
	display: grid;
	grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: start;
}

.strength-visual {
	position: sticky;
	top: 7rem;
	padding: 2rem;
	background: #1b332b;
	border: 1px solid rgba(184, 237, 207, 0.25);
}

.strength-visual .curately-section-heading {
	color: #f6f8f2;
}

.radar-chart {
	max-width: 360px;
	margin: 1rem auto 0;
}

.radar-chart__outline {
	fill: rgba(184, 237, 207, 0.06);
	stroke: rgba(246, 248, 242, 0.75);
	stroke-width: 1.2;
}

.radar-chart__fill {
	fill: rgba(184, 237, 207, 0.35);
	stroke: var(--curately-mint);
	stroke-width: 1.2;
}

.radar-chart__axis {
	stroke: rgba(246, 248, 242, 0.35);
	stroke-width: 1;
}

.radar-chart__label {
	font-size: 11px;
	fill: rgba(246, 248, 242, 0.85);
	font-weight: 600;
}

.strength-details {
	display: grid;
	gap: 0.8rem;
}

.strength-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(246, 248, 242, 0.2);
	font-size: 1rem;
}

.strength-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.strength-label {
	font-weight: 700;
	color: #f6f8f2;
}

.strength-score {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--curately-mint);
}

.strength-copy {
	margin: 0 0 0.55rem;
	padding-left: 0.15rem;
	font-size: 0.95rem;
	color: rgba(246, 248, 242, 0.68);
}

.strength-copy p {
	margin: 0;
}

@media (max-width: 1023px) {
	.curate-layout,
	.strength-layout {
		grid-template-columns: 1fr;
	}

	.strength-visual {
		position: relative;
		top: auto;
	}
}

@media (max-width: 767px) {
	.curately-container {
		width: min(calc(100% - 36px), 1200px);
	}

	.curately-intro {
		padding-top: 4rem;
	}

	.curately-intro::after {
		right: -100px;
		top: 12%;
	}

	.curately-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

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

	.curately-stat {
		min-height: 135px;
		padding: 1.1rem;
	}

	.curately-table-wrap {
		box-shadow: 7px 7px 0 var(--curately-mint);
	}

	.strength-visual {
		padding: 1.25rem;
	}
}

@media (max-width: 400px) {
	.curately-title {
		font-size: 3rem;
	}

	.curately-stats {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.curately-stat,
	.curately-table-wrap,
	.curately-intro__content,
	.curately-copy,
	.curately-hero__title,
	.curately-hero__meta,
	.curately-story__challenge,
	.curately-story__solution,
	.curately-section-heading,
	.strength-details {
		transition: none;
	}

	.curately-stat:hover {
		transform: none;
	}
}

/* ============================================================
   COMPLIANCE PAGE
   ============================================================ */

.compliance-page {
	background: #fff;
}

/* Hero section */
.compliance-hero {
	padding: 5rem 0;
	text-align: center;
	background: #fff;
}

.compliance-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.compliance-hero__eyebrow {
	margin: 0 0 1rem;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-dark-green);
	opacity: 1;
	transform: translateY(0);
}

.compliance-hero__title {
	margin: 0 0 1.5rem;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	opacity: 1;
	transform: translateY(0);
}

.compliance-hero__text {
	max-width: 820px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text-muted);
	opacity: 1;
	transform: translateY(0);
}

/* Compliance sections */
.compliance-section {
	padding: 4rem 0;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
}

.compliance-section:last-of-type {
	border-bottom: none;
}

.compliance-section--alt {
	background: var(--color-light-green);
}

.compliance-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.compliance-content {
	max-width: 900px;
	margin: 0 auto;
	opacity: 1;
	transform: translateY(0);
}

.compliance-content p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	margin-bottom: 1.5rem;
}

.compliance-content p:last-child {
	margin-bottom: 0;
}

/* Compliance standard sections */
.compliance-standard {
	max-width: 900px;
	margin: 0 auto;
	opacity: 1;
	transform: translateY(0);
}

.compliance-standard__title {
	margin: 0 0 0.5rem;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.compliance-standard__subtitle {
	margin: 0 0 1.5rem;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-dark-green);
}

.compliance-standard p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	margin-bottom: 1.5rem;
}

.compliance-standard p:last-child {
	margin-bottom: 0;
}

.compliance-standard__list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.compliance-standard__list li {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	padding-left: 0;
}

/* Support section */
.compliance-support-title {
	margin-bottom: 2rem;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	text-align: center;
}

.compliance-support-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 2rem;
}

.compliance-support-card {
	padding: 30px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--color-border);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	opacity: 1;
	transform: translateY(0);
}

.compliance-support-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(31, 42, 36, 0.1);
}

.compliance-support-card__title {
	margin: 0 0 0.8rem;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
}

.compliance-support-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* Disclaimer section */
.compliance-disclaimer {
	background: #f9faf9;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 2rem;
	margin-top: 0;
	border-bottom: none;
}

.compliance-disclaimer__content {
	max-width: 900px;
	margin: 0 auto;
	opacity: 1;
	transform: translateY(0);
}

.compliance-disclaimer__content p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
	text-align: center;
}

/* CTA section */
.compliance-cta {
	padding: 5rem 0;
	text-align: center;
	background: var(--color-light-green);
}

.compliance-cta__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 30px;
	opacity: 1;
	transform: translateY(0);
}

.compliance-cta__title {
	margin: 0 0 1rem;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.compliance-cta__text {
	margin: 0 0 2rem;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.compliance-cta__button {
	display: inline-block;
	margin: 0;
}

/* ============================================================
   CAREERS PAGE
   ============================================================ */

.careers-page {
	background: #fff;
}

/* Hero section */
.careers-hero {
	padding: 5rem 0;
	text-align: center;
	background: #fff;
}

.careers-hero__container,
.careers-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.careers-hero__title {
	margin: 0 0 1rem;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	opacity: 1;
	transform: translateY(0);
}

.careers-hero__subtitle {
	margin: 0 0 1.5rem;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-dark-green);
	opacity: 1;
	transform: translateY(0);
}

.careers-hero__text {
	max-width: 820px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text-muted);
	opacity: 1;
	transform: translateY(0);
}

/* Careers sections */
.careers-section {
	padding: 4rem 0;
	background: #fff;
}

.careers-section--alt {
	background: var(--color-light-green);
}

.careers-section__container,
.careers-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.careers-section__title {
	margin: 0 0 2rem;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	text-align: center;
}

/* Why Work With CloudRoots section */
.careers-section--why-us .careers-section__content,
.careers-why-work__content {
	max-width: 900px;
	margin: 0 auto;
	opacity: 1;
	transform: translateY(0);
}

.careers-section--why-us .careers-section__content p,
.careers-why-work__content p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	margin-bottom: 1.5rem;
}

.careers-section--why-us .careers-section__content p:last-child,
.careers-why-work__content p:last-child {
	margin-bottom: 0;
}

/* Benefits Grid */
.careers-benefits-list,
.careers-benefits__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-top: 0;
	list-style: none;
	padding: 0;
}

.careers-benefits-list__item {
	list-style: none;
}

.careers-benefit-card {
	padding: 30px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(31, 42, 36, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	opacity: 1;
	transform: translateY(0);
}

.careers-benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(31, 42, 36, 0.1);
}

.careers-benefit-card__title {
	margin: 0 0 0.8rem;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
}

.careers-benefit-card__description,
.careers-benefit-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* Positions section */
.careers-positions__title {
	margin-bottom: 1rem;
}

.careers-section__subtitle--center,
.careers-positions__intro {
	max-width: 900px;
	margin: 0 auto 2rem;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	text-align: center;
	opacity: 1;
	transform: translateY(0);
}

.careers-positions__content {
	max-width: 700px;
	margin: 0 auto;
	padding: 2rem;
	background: #f9faf9;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	text-align: center;
	opacity: 1;
	transform: translateY(0);
}

.careers-positions__status,
.careers-positions__no-openings {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text);
	margin: 0 0 1rem;
}

.careers-positions__description {
	font-size: 16px;
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 1rem;
}

.careers-positions__cta,
.careers-positions__interested {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
}

/* Values Grid */
.careers-values__title {
	margin-bottom: 2rem;
}

.careers-values-list,
.careers-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 0;
	list-style: none;
	padding: 0;
}

.careers-values-list__item {
	list-style: none;
}

.careers-value-card {
	padding: 30px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(31, 42, 36, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	opacity: 1;
	transform: translateY(0);
}

.careers-value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(31, 42, 36, 0.1);
}

.careers-value-card__title {
	margin: 0 0 0.8rem;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
}

.careers-value-card__description,
.careers-value-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* Join CTA section */
.careers-section--cta,
.careers-join-cta {
	background: var(--color-light-green);
	padding: 3rem 0;
}

.careers-cta__content,
.careers-join-cta__content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	opacity: 1;
	transform: translateY(0);
}

.careers-cta__title,
.careers-join-cta__title {
	margin: 0 0 1rem;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.careers-cta__description,
.careers-join-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* Form section */
.careers-section--form,
.careers-form-section {
	background: #fff;
	padding: 4rem 0;
}

.careers-form__wrapper,
.careers-form-wrapper {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 30px;
}

.careers-form__heading,
.careers-form__title {
	margin: 0 0 2rem;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	text-align: center;
	opacity: 1;
	transform: translateY(0);
}

.careers-form {
	width: 100%;
}

/* Honeypot */
.careers-form__honeypot {
	display: none;
	position: absolute;
	left: -9999px;
}

/* Status message */
.careers-form__status {
	margin-bottom: 1.5rem;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.careers-form__status--success {
	background: rgba(26, 86, 50, 0.08);
	color: var(--color-dark-green);
	border: 1px solid rgba(26, 86, 50, 0.2);
}

.careers-form__status--error {
	background: rgba(220, 38, 38, 0.08);
	color: #dc2626;
	border: 1px solid rgba(220, 38, 38, 0.2);
}

/* Form rows and fields */
.careers-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.careers-form__field {
	display: flex;
	flex-direction: column;
}

.careers-form__field--full-width,
.careers-form__field--full {
	grid-column: 1 / -1;
}

.careers-form__label {
	margin-bottom: 0.5rem;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
	display: block;
}

.careers-form__required {
	margin-left: 0.25rem;
}

.careers-form__input {
	padding: 12px 14px;
	border: 1px solid rgba(31, 42, 36, 0.15);
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.careers-form__input:focus {
	outline: none;
	border-color: var(--color-dark-green);
	box-shadow: 0 0 0 3px rgba(26, 86, 50, 0.1);
}

.careers-form__textarea {
	resize: vertical;
	min-height: 100px;
	font-family: inherit;
}

.careers-form__input[aria-invalid="true"] {
	border-color: #dc2626;
	background: rgba(220, 38, 38, 0.02);
}

/* File input styling */
.careers-form__file-input-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

.careers-form__file-input {
	position: absolute;
	left: -9999px;
	opacity: 0;
}

.careers-form__file-label {
	display: inline-block;
	padding: 10px 16px;
	background: #f3f4f3;
	border: 1px solid rgba(31, 42, 36, 0.15);
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
	transition: background-color 0.2s ease;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.careers-form__file-label:hover {
	background: #e8ebe8;
}

.careers-form__file-name {
	display: block;
	margin-top: 0.55rem;
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-text);
	word-break: break-word;
}

.careers-form__file-note {
	margin-top: 0.5rem;
	font-size: 12px;
	color: var(--color-text-muted);
}

.careers-form__error {
	margin-top: 0.4rem;
	font-size: 12px;
	line-height: 1.4;
	color: #dc2626;
	display: block;
	min-height: 1.4em;
}

/* reCAPTCHA field */
.careers-form__field[data-field="recaptcha"],
.careers-form__recaptcha {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Form actions */
.careers-form__actions {
	margin-top: 10px;
}

.g-recaptcha {
	transform: scale(1);
	transform-origin: center;
}

/* Submit button */
.careers-form__submit {
	width: 100%;
	margin-top: 10px;
}

/* ============================================================
   RESPONSIVE
   Breakpoints: 1280px+ desktop (untouched above), 1024-1279px small
   laptop, 768-1023px tablet, 320-767px mobile. Everything in this
   section only narrows/stacks/rescales the desktop rules above — no
   desktop-width rule is overridden.
   ============================================================ */

/* ---------- small laptop: 1024px-1279px ---------- */
@media (max-width: 1279px) {
	.site-header {
		padding: 5px 24px;
		gap: 24px;
	}

	.primary-navigation .nav-menu {
		gap: 20px;
	}

	.primary-navigation .menu-item > a {
		font-size: 16px;
	}

	.hero__inner,
	.goals__inner,
	.services__inner {
		gap: 2rem;
	}

	.hero__title {
		font-size: 52px;
		line-height: 60px;
	}

	.goals__title,
	.services__title,
	.blog__title,
	.clients__title,
	.why-us__title,
	.certifications__title {
		font-size: 40px;
	}

	.why-us__grid {
		column-gap: 32px;
		row-gap: 40px;
	}
}

/* ---------- tablet: 768px-1023px ---------- */
@media (max-width: 1023px) {
	:root {
		--section-padding-y: 3.5rem;
	}

	.about-hero__inner {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.site-header {
		flex-wrap: wrap;
		margin: 16px auto 0;
	}

	.site-header__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.nav-toggle {
		display: flex;
	}

	/* The panel becomes a real collapsible block instead of display:contents;
	   it's hidden until .nav-toggle flips it open via main.js. */
	.site-header__panel {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: 1rem 0 1.5rem;
		border-top: 1px solid var(--color-border);
		margin-top: 12px;
	}

	.site-header__panel.is-open {
		display: flex;
	}

	.primary-navigation {
		width: 100%;
	}

	.primary-navigation .nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
	}

	.primary-navigation .menu-item {
		width: 100%;
	}

	.primary-navigation .menu-item > a {
		display: block;
		padding: 10px 4px;
		font-size: 18px;
	}

	/* Submenu becomes an inline, click-toggled block (see main.js) instead
	   of a hover flyout — hover has no equivalent on touch devices. */
	.primary-navigation .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		border: none;
		margin: 0 0 0 1rem;
		padding: 0;
		width: calc(100% - 1rem);
	}

	.primary-navigation .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.primary-navigation .menu-item-has-children:hover > .sub-menu,
	.primary-navigation .menu-item-has-children:focus-within > .sub-menu {
		display: none;
	}

	.primary-navigation .menu-item-has-children.is-open:hover > .sub-menu,
	.primary-navigation .menu-item-has-children.is-open:focus-within > .sub-menu {
		display: block;
	}

	.header__cta {
		width: 100%;
		text-align: center;
	}

	.hero {
		min-height: 0;
	}

	.hero__inner,
	.goals__inner,
	.services__inner {
		flex-direction: column;
		padding-top: var(--section-padding-y);
		padding-bottom: var(--section-padding-y);
	}

	.hero__content,
	.goals__content,
	.services__content {
		text-align: left;
	}

	.hero__media,
	.goals__media {
		order: -1;
	}

	.hero__title {
		font-size: 44px;
		line-height: 52px;
	}

	.goals__title,
	.services__title,
	.blog__title,
	.clients__title,
	.why-us__title,
	.certifications__title,
	.about-hero__title,
	.about-services__title {
		font-size: 34px;
		line-height: 1.25;
	}

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

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

	.why-us__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
		row-gap: 36px;
	}

	.why-us__inner {
		padding: 64px 2rem;
	}

	.certifications__inner {
		padding: 64px 1.5rem;
	}

	.certifications__title {
		margin-bottom: 40px;
	}

	.certifications__badge {
		flex: 0 0 140px;
		height: 110px;
	}

	.certifications__badge img {
		width: 110px;
		height: 90px;
	}

	.site-footer__inner {
		padding: 48px 32px 2rem;
	}

	.team__inner {
		flex-direction: column;
		gap: 2.5rem;
	}

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

	.services-overview__inner {
		flex-direction: column;
	}

	.services-overview__grid {
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
	}

	.service-detail__inner,
	.service-detail--reverse .service-detail__inner {
		flex-direction: column;
	}

	.service-detail--reverse .service-detail__media {
		order: -1;
	}

	.contact-section__inner {
		flex-direction: column;
	}

	/* Case studies page responsive */
	.case-studies-hero__title {
		font-size: 36px;
	}

	.case-studies-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	/* Compliance page responsive */
	.compliance-hero__title {
		font-size: 40px;
	}

	.compliance-standard__title {
		font-size: 28px;
	}

	.compliance-support-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}

	.compliance-cta__title {
		font-size: 28px;
	}

	/* Careers page responsive */
	.careers-hero__title {
		font-size: 40px;
	}

	.careers-hero__subtitle {
		font-size: 20px;
	}

	.careers-benefits-list,
	.careers-benefits__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}

	.careers-values-list,
	.careers-values__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}

	.careers-join-cta__title {
		font-size: 28px;
	}

	.careers-form__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- mobile: up to 767px ---------- */
@media (max-width: 767px) {
	.site-logo__image {
		width: 220px;
	}

	.site-header {
		padding: 5px 16px;
	}

	.hero__inner,
	.goals__inner,
	.services__inner,
	.blog__inner,
	.clients__inner,
	.why-us__inner,
	.certifications__inner,
	.about-hero__inner,
	.team__inner,
	.about-services__inner,
	.services-hero__inner,
	.services-overview__inner,
	.service-detail__inner,
	.contact-hero__inner,
	.contact-section__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.hero__title {
		font-size: 34px;
		line-height: 42px;
	}

	.hero__eyebrow {
		font-size: 18px;
		line-height: 24px;
	}

	.hero__text {
		font-size: 17px;
		line-height: 1.5;
	}

	.hero__cta,
	.goals__cta,
	.blog__cta {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.goals__title,
	.services__title,
	.blog__title,
	.clients__title,
	.why-us__title,
	.certifications__title {
		font-size: 28px;
		line-height: 1.3;
	}

	.goals__subheading,
	.services__subheading,
	.blog__subheading,
	.clients__subheading,
	.why-us__subheading {
		font-size: 18px;
	}

	.goals__text,
	.goals__list {
		font-size: 16px;
	}

	.services__item-title {
		font-size: 20px;
	}

	.services__item-text {
		font-size: 16px;
	}

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

	.blog__card-image {
		height: 200px;
	}

	.single-blog-hero__inner {
		padding: 3.5rem 1.25rem 2.5rem;
	}

	.single-blog__title {
		font-size: 38px;
		line-height: 1.2;
	}

	.single-blog__excerpt {
		font-size: 18px;
	}

	.single-blog__meta {
		align-items: center;
		flex-direction: column;
		gap: 0.35rem;
	}

	.single-blog__content {
		padding: 3rem 1.25rem 1rem;
		font-size: 17px;
		line-height: 1.7;
	}

	.single-blog__meta-row {
		flex-wrap: wrap;
		padding: 0 1.25rem 2rem;
	}

	.single-blog__content h2 {
		font-size: 28px;
	}

	.single-blog__content h3 {
		font-size: 23px;
	}

	.single-blog__navigation {
		flex-direction: column;
		padding: 1.5rem 1.25rem 3.5rem;
	}

	.single-blog__navigation-item,
	.single-blog__navigation-item--next {
		max-width: 100%;
		text-align: left;
	}

	.blog-page__hero-inner {
		padding-top: 2rem;
		padding-bottom: 2.5rem;
	}

	.blog-page__hero .blog__subheading {
		margin-bottom: 2rem;
	}

	.blog-page__search {
		flex-direction: column;
		gap: 12px;
	}

	.blog-page__search button {
		min-height: 52px;
	}

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

	.clients__logo {
		height: 90px;
		padding: 12px;
	}

	.why-us__grid {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.certifications__grid {
		gap: 16px;
	}

	.certifications__badge {
		flex: 0 0 calc(50% - 8px);
		height: 100px;
	}

	.certifications__badge img {
		width: 100%;
		max-width: 130px;
		height: 80px;
	}

	.site-footer__inner {
		flex-direction: column;
		padding: 40px 20px 1.5rem;
		gap: 32px;
	}

	.site-footer__social {
		flex-wrap: wrap;
	}

	.site-footer__links-columns {
		flex-direction: column;
		gap: 1rem;
	}

	.site-footer__copyright {
		padding: 1rem 1.25rem 1.5rem;
	}

	.about-hero__title {
		font-size: 32px;
		line-height: 1.3;
	}

	.about-hero__text {
		font-size: 17px;
		line-height: 1.5;
	}

	.team__title,
	.about-services__title {
		font-size: 28px;
	}

	.team__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		justify-items: center;
	}

	.team__member {
		margin-left: 0;
		left: 0;
		position: relative;
	}

	.team__avatar {
		width: 160px;
		height: auto;
	}

	.team__avatar svg {
		width: 132px;
		height: 132px;
	}

	.about-services__grid {
		grid-template-columns: 1fr;
	}

	.team__actions .button {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.services-hero__title {
		font-size: 32px;
	}

	.services-overview {
		padding: 2rem 0 1.5rem;
	}

	.services-overview__title {
		font-size: 26px;
	}

	.services-overview__inner {
		padding: 0 1.25rem;
	}

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

	/* Stagger + centered mark only read correctly as a 3-column "hourglass";
	   at 2 columns nth-child(2)/(5) aren't the middle column anymore. */
	.services-overview__grid .about-services__card:nth-child(2),
	.services-overview__grid .about-services__card:nth-child(5) {
		margin-top: 0;
	}

	.services-overview__mark {
		display: none;
	}

	.service-detail__title {
		font-size: 26px;
	}

	.service-detail__media {
		height: 308px;
	}

	.contact-hero__title {
		font-size: 32px;
	}

	.contact-form__row {
		flex-direction: column;
	}

	.quote-modal__dialog {
		padding: 1.5rem;
	}

	.quote-modal__title {
		font-size: 26px;
	}
}

/* ---------- small phones: up to 400px ---------- */
@media (max-width: 400px) {
	.hero__title {
		font-size: 30px;
		line-height: 38px;
	}

	.goals__title,
	.services__title,
	.blog__title,
	.clients__title,
	.why-us__title,
	.certifications__title {
		font-size: 24px;
	}

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

	.certifications__badge {
		flex: 0 0 100%;
	}

	.services-overview__grid {
		grid-template-columns: 1fr;
	}

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

	.single-blog__title {
		font-size: 32px;
	}

	.about-hero__title,
	.services-hero__title,
	.contact-hero__title {
		font-size: 26px;
	}

	/* Case studies page responsive */
	.case-studies-hero {
		padding: 3rem 0;
	}

	.case-studies-hero__title {
		font-size: 28px;
	}

	.case-studies-container {
		padding: 0 16px;
	}

	.case-studies-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Compliance page responsive */
	.compliance-hero {
		padding: 3rem 0;
	}

	.compliance-hero__title {
		font-size: 32px;
	}

	.compliance-hero__text {
		font-size: 16px;
	}

	.compliance-section {
		padding: 2.5rem 0;
	}

	.compliance-standard__title {
		font-size: 24px;
	}

	.compliance-standard__subtitle {
		font-size: 18px;
	}

	.compliance-support-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.compliance-support-card {
		padding: 20px;
	}

	.compliance-cta {
		padding: 3rem 0;
	}

	.compliance-cta__title {
		font-size: 24px;
	}

	.compliance-cta__text {
		font-size: 16px;
	}

	/* Careers page responsive */
	.careers-hero {
		padding: 3rem 0;
	}

	.careers-hero__title {
		font-size: 32px;
	}

	.careers-hero__subtitle {
		font-size: 18px;
	}

	.careers-hero__text {
		font-size: 16px;
	}

	.careers-section {
		padding: 2.5rem 0;
	}

	.careers-section__title {
		font-size: 28px;
	}

	.careers-benefits-list,
	.careers-benefits__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.careers-benefit-card {
		padding: 20px;
	}

	.careers-values-list,
	.careers-values__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.careers-value-card {
		padding: 20px;
	}

	.careers-join-cta {
		padding: 2.5rem 0;
	}

	.careers-join-cta__title {
		font-size: 24px;
	}

	.careers-join-cta__text {
		font-size: 15px;
	}

	.careers-form-section {
		padding: 2.5rem 0;
	}

	.careers-form__title {
		font-size: 22px;
	}

	.careers-form__label {
		font-size: 13px;
	}

	.careers-form__input,
	.careers-form__textarea {
		font-size: 14px;
	}

	.careers-form__row {
		margin-bottom: 16px;
		gap: 16px;
	}

	.careers-form-wrapper {
		padding: 0 16px;
	}

	.g-recaptcha {
		transform: scale(0.85);
		transform-origin: center;
	}
}

/* ============================================================
   PRIVACY POLICY PAGE
   ============================================================ */

.privacy-policy-page {
	padding: var(--section-padding-y) 0;
}

.privacy-policy-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}

.privacy-policy-header {
	margin-bottom: 3rem;
	text-align: center;
}

.privacy-policy-title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 100%;
	letter-spacing: 0%;
	color: var(--color-text);
}

.privacy-policy-updated {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.privacy-policy-content {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
}

.privacy-policy-content h2 {
	margin: 2.5rem 0 1rem;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.3;
	color: var(--color-text);
}

.privacy-policy-content h3 {
	margin: 1.75rem 0 0.75rem;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: var(--color-text);
}

.privacy-policy-content p {
	margin: 0 0 1rem;
}

.privacy-policy-content ul,
.privacy-policy-content ol {
	margin: 0 0 1rem;
	padding-left: 2rem;
}

.privacy-policy-content li {
	margin-bottom: 0.5rem;
}

.privacy-policy-content strong {
	font-weight: 600;
	color: var(--color-text);
}

@media (max-width: 1023px) {
	.privacy-policy-title {
		font-size: 36px;
	}

	.privacy-policy-content h2 {
		font-size: 24px;
		margin-top: 2rem;
	}

	.privacy-policy-content h3 {
		font-size: 18px;
	}
}

@media (max-width: 766px) {
	.privacy-policy-page {
		padding: 2.5rem 0;
	}

	.privacy-policy-title {
		font-size: 28px;
	}

	.privacy-policy-updated {
		font-size: 14px;
	}

	.privacy-policy-content {
		font-size: 15px;
	}

	.privacy-policy-content h2 {
		font-size: 20px;
		margin-top: 1.75rem;
	}

	.privacy-policy-content h3 {
		font-size: 16px;
	}
}

/* ============================================================
   TERMS & CONDITIONS PAGE
   ============================================================ */

.terms-page {
	padding: 0 0 0;
}

.terms-page__container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}

.terms-page__header {
	margin-top: 0;
	margin-bottom: 0.5rem;
	text-align: center;
}

.terms-page__title {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 100%;
	letter-spacing: 0%;
	color: var(--color-text);
}

.terms-page__updated {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.terms-page__content {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
}

.terms-page__section-title {
	margin: 0 0 1rem;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.3;
	color: var(--color-text);
}

.terms-page__updated--content {
	margin: 0 0 1.5rem;
}

.terms-page__content h2 {
	margin: 2.5rem 0 1rem;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.3;
	color: var(--color-text);
}

.terms-page__content p {
	margin: 0 0 1rem;
}

.terms-page__content ul,
.terms-page__content ol {
	margin: 0 0 1rem;
	padding-left: 2rem;
}

.terms-page__content li {
	margin-bottom: 0.5rem;
}

.terms-page__content a {
	color: var(--color-accent, #1b8d60);
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.terms-page__title {
		font-size: 36px;
	}

	.terms-page__content h2 {
		font-size: 24px;
		margin-top: 2rem;
	}
}

@media (max-width: 766px) {
	.terms-page {
		padding: 0 0 0;
	}

	.terms-page__container {
		padding: 0 1.25rem;
	}

	.terms-page__title {
		font-size: 28px;
	}

	.terms-page__updated {
		font-size: 14px;
	}

	.terms-page__content {
		font-size: 15px;
	}

	.terms-page__content h2 {
		font-size: 20px;
		margin-top: 1.75rem;
	}
}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */

.sitemap-page {
	padding: var(--section-padding-y) 0;
}

.sitemap-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}

.sitemap-header {
	margin-bottom: 3rem;
	text-align: center;
}

.sitemap-title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 100%;
	letter-spacing: 0%;
	color: var(--color-text);
}

.sitemap-description {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.sitemap-content {
	font-family: "Inter", sans-serif;
}

.sitemap-section {
	margin-bottom: 3rem;
}

.sitemap-section__title {
	margin: 0 0 1.5rem;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.3;
	color: var(--color-text);
	border-bottom: 2px solid var(--color-border);
	padding-bottom: 0.75rem;
}

.sitemap-section__nav {
	margin: 0;
	padding: 0;
}

.sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.sitemap-list li {
	margin: 0;
	padding: 0;
}

.sitemap-list a {
	display: inline-block;
	padding: 0.75rem 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-dark-green);
	text-decoration: none;
	transition: all 200ms ease-out;
	border-radius: 4px;
}

.sitemap-list a:hover,
.sitemap-list a:focus {
	color: var(--color-dark-green-hover);
	background-color: var(--color-light-green);
	outline: none;
}

@media (max-width: 1023px) {
	.sitemap-title {
		font-size: 36px;
	}

	.sitemap-section__title {
		font-size: 24px;
	}

	.sitemap-list {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 0.75rem;
	}

	.sitemap-list a {
		font-size: 15px;
		padding: 0.65rem 0.85rem;
	}
}

@media (max-width: 766px) {
	.sitemap-page {
		padding: 2.5rem 0;
	}

	.sitemap-title {
		font-size: 28px;
	}

	.sitemap-header {
		margin-bottom: 2rem;
	}

	.sitemap-description {
		font-size: 14px;
	}

	.sitemap-section {
		margin-bottom: 2rem;
	}

	.sitemap-section__title {
		font-size: 20px;
		margin-bottom: 1rem;
	}

	.sitemap-list {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.sitemap-list a {
		display: block;
		padding: 0.6rem 0.75rem;
		font-size: 14px;
	}
}

/* ============================================================
   FAQ section (front-page.php) — added for the "Questions teams
   actually ask" content block. Uses native <details>/<summary>,
   styled to match the theme's existing section/card language.
   ============================================================ */
.faq {
	background: #fff;
}

.faq__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 60px 2rem;
}

.faq__list {
	max-width: 900px;
	margin: 32px auto 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq__item {
	border: 1px solid #e2e6e4;
	border-radius: 8px;
	padding: 18px 22px;
	background: #fafcfb;
}

.faq__question {
	cursor: pointer;
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	color: #14251d;
	list-style: none;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	color: var(--color-dark-green);
	font-weight: 700;
}

.faq__item[open] .faq__question::before {
	content: "\2212"; /* minus sign */
}

.faq__answer {
	margin: 12px 0 0;
	padding-left: 1.1em;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #4a4a4a;
}

/* ============================================================
   Delivery team roster (page-about.php) — text-only list for
   team members without a supplied photo yet. Kept separate from
   .team__grid so it never breaks that photo-avatar layout.
   ============================================================ */
.delivery-team {
	list-style: none;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid #e2e6e4;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.delivery-team__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.delivery-team__name {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #14251d;
}

.delivery-team__role {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: #4a4a4a;
}