/*
 * 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
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

/* 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;
}

/* ============================================================
   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 {
	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;
}

.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 for whichever nav item matches the current page
   (see company_theme_nav_fallback() in functions.php, which adds this
   class by comparing each link's URL to the current request). */
.primary-navigation > .nav-menu > .menu-item.current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: currentColor;
}

.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;
}

/* 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 {
	background: #fff;
	min-height: 850px; /* per Figma hero background frame */
	display: flex;
	align-items: center;
}

.hero__inner {
	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 {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
	color: var(--color-dark-green);
}

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

.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;
}

.hero__media {
	flex: 1 1 50%;
	min-width: 280px;
	display: flex;
	justify-content: center;
}

.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;
}

/* A single vertical timeline: green for the first item's height, then gray
   for the rest — per Figma's separate "Green line"/"Grey line" layers. */
.services__list::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(
		to bottom,
		var(--color-dark-green) 0,
		var(--color-dark-green) 170px,
		#d9d9d9 170px,
		#d9d9d9 100%
	);
}

.services__item {
	padding: 0;
}

.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. OUR BLOG — 3-column card grid
   ============================================================ */
.blog__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--section-padding-y) 2rem;
	text-align: center;
}

.blog__title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	color: #000;
}

.blog__subheading {
	max-width: 1000px;
	margin: 0 auto 3rem;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 29px;
	color: #000;
}

.blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 2.5rem;
	text-align: left;
}

.blog__card {
	padding: 20px;
	background: #eef4f0;
	border-radius: 16px;
}

.blog__card-image {
	width: 100%;
	height: 230px;
	margin: 0 0 16px;
	background: #fff; /* white image slot per Figma, on the card's light-green background */
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.blog__card-date {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 130%;
	color: #000;
}

.blog__cta {
	display: inline-block;
	padding: 18px 32px;
	border-radius: 8px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 120%;
}

/* ============================================================
   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;
}

/* ============================================================
   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;
}

.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 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 190px;
	height: 150px;
}

/* 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;
}

/* ============================================================
   ABOUT US PAGE (template-about.php)
   ============================================================ */
.about-hero__inner {
	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;
}

.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%;
}

.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, 1fr);
	gap: 2rem;
	align-self: center;
}

.team__member {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
}

.team__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	margin: 0 auto;
	color: #000;
}

.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__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;
}

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

.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);
	gap: 40px;
	text-align: center;
}

.about-services__grid--six .about-services__card {
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 28px;
	min-height: 360px;
	padding: 40px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.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) {
	.about-services__grid--six .about-services__card {
		min-height: 0;
		padding: 32px 24px;
	}

	.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: 20px;
		padding: 28px 20px;
	}

	.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: 860px;
	margin: 0 auto;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5;
	color: #000;
}

/* ---- Services overview: intro copy + 6-card grid, light background
   band per the reference layout ---- */
.services-overview {
	background: #f3f5f4;
}

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

.services-overview__intro {
	flex: 1 1 34%;
	min-width: 260px;
}

.services-overview__eyebrow {
	margin: 0 0 0.5rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--color-dark-green);
}

.services-overview__title {
	margin: 0 0 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.3;
	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 {
	flex: 1 1 62%;
	min-width: 280px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* 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. */
.services-overview__grid .about-services__card {
	padding: 1.5rem 1.25rem;
	background: #fff;
	border-color: var(--color-border);
}

.services-overview__grid .about-services__card-text {
	margin: 0;
	font-size: 15px;
}

/* ---- 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 .service-detail__inner {
	flex-direction: row-reverse;
}

/* Intentionally blank placeholder box per the user's request — swap for
   a real illustration/photo per service. */
.service-detail__media {
	flex: 1 1 45%;
	min-width: 260px;
	height: 320px;
	background: #fff;
	border: 1px dashed var(--color-border);
	border-radius: 16px;
}

.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;
}

/* ============================================================
   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;
}

.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__title {
	margin: 0 0 0.4rem;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #000;
}

.contact-office__address {
	margin: 0;
	min-height: 1.2em;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-dark-green);
}

.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;
}

/* ============================================================
   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(0, 0, 0, 0.6);
}

.quote-modal__dialog {
	position: relative;
	width: calc(100% - 2rem);
	max-width: 600px;
	max-height: calc(100vh - 4rem);
	margin: 2rem auto;
	overflow-y: auto;
	padding: 2.5rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.quote-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

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

.quote-modal__close {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #000;
	cursor: pointer;
}

body.modal-open {
	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;
}

/* ============================================================
   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;
	}

	.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;
	}
}

/* ---------- 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;
	}

	.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;
	}

	.team__avatar {
		width: 160px;
		height: 160px;
	}

	.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__title {
		font-size: 26px;
	}

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

	.service-detail__title {
		font-size: 26px;
	}

	.service-detail__media {
		height: 220px;
	}

	.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;
	}

	.about-hero__title,
	.services-hero__title,
	.contact-hero__title {
		font-size: 26px;
	}
}