/*
Theme Name: GeneratePress Child - Agroots
Theme URI: https://agroots.local
Description: Child theme of GeneratePress for the Agroots / Satvikann site.
Author: Sethuraj R
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

:root {
	--brand-green: #086831;
	--brand-green-dark: #054d24;
	--brand-green-light: #0e8a41;
	--bg-light: #eeeeee;
	--bg-soft: #f3f3f3;
	--accent-teal: #1ad9a3;
	--text-dark: #1c1c1c;
	--text-muted: #5c5c5c;
	--radius-lg: 14px;
	--radius-pill: 50px;
	--font-heading: "Times New Roman", Times, serif;
	--font-body: "Alexandria", sans-serif;
}

html {
	overflow-x: hidden;
}

body {
	font-family: var(--font-body);
	/**
	 * Alexandria Light (300), not the default Regular (400) weight - this
	 * is the base every other element inherits from unless it sets its
	 * own font-weight (nav links, buttons, .ops-card h3, etc. already do,
	 * so they're unaffected).
	 */
	font-weight: 300;
	color: var(--text-dark);
	overflow-x: hidden;
}

/**
 * GeneratePress's own #page wrapper carries a class literally named
 * "container" (as part of "site grid-container container hfeed"), which
 * collides with Bootstrap's .container rule and boxes the entire site to
 * ~1200px. Neutralize that specific collision so GP's outer wrapper isn't
 * affected by Bootstrap...
 */
#page.container {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/**
 * ...then explicitly break each homepage section out to full viewport
 * width, regardless of any ancestor max-width (GP's own .grid-container
 * included). Inner .container elements still center content normally.
 */
/**
 * GeneratePress's #content is a flex container; without explicit sizing our
 * <main> collapses to a 0-width flex item (breaking every percentage-based
 * calc() inside it), so force it to take the full available width.
 */
#front-page-content,
.custom-page-main {
	width: 100%;
	flex: 1 1 100%;
	min-width: 0;
}

#front-page-content > section,
.custom-page-main > section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

h1, h2, h3, h4,
.font-heading {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ---------- Utility / layout ---------- */
.section {
	padding: 80px 0;
}

.section-sm {
	padding: 56px 0;
}

.bg-brand {
	background-color: var(--brand-green);
	color: #fff;
}

.bg-light {
	background-color: var(--bg-light);
}

.bg-soft {
	background-color: var(--bg-soft);
}

.text-brand {
	color: var(--brand-green);
}

.section-heading {
	text-align: center;
	margin-bottom: 48px;
}

.section-heading h2 {
	font-size: 2.25rem;
	margin-bottom: 12px;
}

.section-heading p {
	color: var(--text-muted);
	max-width: 640px;
	margin: 0 auto;
}

.bg-brand .section-heading p {
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- Buttons ---------- */
.btn-brand {
	display: inline-block;
	background-color: var(--brand-green);
	color: #fff !important;
	border: none;
	padding: 12px 30px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 0;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.btn-brand:hover {
	background-color: var(--brand-green-dark);
	color: #fff !important;
}

.btn-outline-light {
	display: inline-block;
	background-color: transparent;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 11px 27px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 4px;
	text-decoration: none !important;
}

/* ---------- Site logo ---------- */
.site-logo-img {
	max-height: 46px;
	width: auto;
}

/**
 * Site header - matches the design's full-width brand-green nav bar with
 * the white Satvikann seal logo on the left and white nav links on the
 * right. The uploaded logo is white/light artwork on a transparent
 * background, so it sits directly on the green bar with no card/chip.
 */
.site-header,
.site-header .inside-header {
	background-color: var(--brand-green);
}

.site-header .inside-header {
	padding-top: 14px;
	padding-bottom: 14px;
}

.site-logo img,
.site-logo img.custom-logo,
.site-logo img.header-logo,
.site-logo img.header-image {
	max-height: 55px;
	width: auto;
}

/**
 * GeneratePress gives .main-navigation its own white background by
 * default, which hid our white nav text against it. Make it transparent
 * so the green .site-header bar shows through.
 */
.site-header .main-navigation,
.site-header .main-navigation .inside-navigation,
.site-header .main-navigation ul.sf-menu,
.site-header .main-navigation ul.sf-menu ul {
	background-color: transparent;
}

.main-navigation .main-nav > ul > li > a,
.main-navigation .main-nav > ul > li > span {
	color: #fff;
	font-weight: 500;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul li.current-menu-item > a,
.main-navigation .main-nav > ul li.current_page_item > a {
	color: rgba(255, 255, 255, 0.75);
}

.main-navigation .menu-toggle {
	color: #fff;
}

/* ---------- Hero ----------
 * Strict 50/50 split, measured directly off the design mockup
 * (Satvikann-Website.png). Uses flexbox rather than CSS Grid deliberately:
 * with Grid, `.hero-media img { height:100% }` inside an auto-height row
 * resolves against the IMAGE'S OWN intrinsic aspect ratio (percentage
 * heights are indefinite there), so an unusually tall/wide source photo
 * could balloon or shrink the whole row - which is exactly the broken
 * bottom-alignment the design-review screenshot showed (thumbnails/button
 * sitting mid-column instead of flush with the image's bottom edge).
 * Flexbox avoids this: .hero-media's img is taken out of flow via
 * position:absolute + inset:0, so it never contributes to the row's
 * height at all. The row's height is driven ONLY by .hero-copy's natural
 * content (heading + paragraph + button + thumbnails + padding), and
 * .hero-media (align-items:stretch, the flex default) is stretched to
 * exactly match that - so the image always fills the same height as the
 * text column and both columns' bottoms land on the same line.
 */
.hero-section {
	display: flex;
	align-items: stretch;
}

.hero-copy {
	width: 50%;
	background-color: var(--bg-light);
	display: flex;
	flex-direction: column;
	/**
	 * Only two flex items now: .hero-copy-text (heading/paragraph/button)
	 * and .hero-thumbs. space-between pins the thumbnails to the bottom
	 * edge of this panel - matching .hero-media's photo, which fills its
	 * column edge-to-edge via object-fit:cover - instead of leaving them
	 * wherever the text content happened to end. Any slack collapses into
	 * the single gap between the text block and the thumbnails.
	 */
	justify-content: space-between;
	/**
	 * Padding-bottom is deliberately 0 (overridden below), not the 5% the
	 * other three sides use. With symmetric padding the thumbnails bottom
	 * out at the padding edge, 5% short of this panel's actual bottom -
	 * while .hero-media's image has zero padding and runs flush to that
	 * same bottom edge. That mismatch is the "bottom alignment" bug: the
	 * two columns' content visibly stopped at different heights. Dropping
	 * the bottom padding here lets the thumbnail row's bottom edge land on
	 * the exact same line as the photo's.
	 */
	padding: 5% 10% 0;
	/**
	 * Percentage-based padding keeps the copy responsive, but on very wide
	 * viewports it drifts away from where the below sections' Bootstrap
	 * .container actually starts (that container caps out at 1320px and
	 * centers, so its left edge stops moving inward past ~1344px). The
	 * max() floors the padding at that same computed inset once the
	 * viewport is wide enough for it to matter, so the hero heading's left
	 * edge lines up with every .container-based section beneath it instead
	 * of continuing to creep right as a pure percentage would.
	 */
	padding-left: max(10%, calc((100vw - 1320px) / 2 + 12px));
	/**
	 * Percentage padding is resolved against the *containing block's width*
	 * (this panel's own containing block is the full-bleed 100vw
	 * .hero-section, not this 50%-wide column) - so the inherited 10% right
	 * padding above was actually 10% of the full 1920px viewport, ~192px.
	 * That left a large dead gray gap between the thumbnails and the photo
	 * split line that had nothing to do with the panel's own proportions.
	 * clamp() keeps a real margin without it scaling out of control on wide
	 * screens.
	 */
	padding-right: clamp(24px, 3vw, 64px);
}

/**
 * Grouping the heading/paragraph/button under this wrapper (rather than
 * having them as direct children of the flex column above) takes them out
 * of flex-item layout entirely. That matters for the button: as a direct
 * flex item it was "blockified" and stretched to the column's full width
 * by the column's default align-items: stretch, turning an
 * inline-block-sized button into a full-width bar. As a normal block-flow
 * child of a plain <div> it just sizes to its own text again.
 */
.hero-copy-text {
	width: 100%;
}

/**
 * Heading size/line-height measured from the design source at its native
 * 1920px reference width: capital-letter height ~53px against a Playfair
 * Display cap-height ratio of ~0.7 gives a ~76px (4.7rem) font-size, with
 * a line-to-line leading of 96px (~1.27x). clamp() reproduces that at the
 * 1920-1536px range this site is built at, and scales down gracefully on
 * narrower screens instead of needing separate breakpoint overrides.
 */
.hero-copy h1 {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 4.5rem);
	line-height: 1.2;
	margin-bottom: 20px;
}

.hero-copy p {
	color: var(--text-muted);
	margin-bottom: 28px;
	max-width: 480px;
}

.hero-media {
	width: 50%;
	position: relative;
}

.hero-media img.hero-main {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

/**
 * Thumbnails measure 1:1 (square) in the design, not the wide/short
 * rectangles used previously - aspect-ratio keeps them square at any
 * column width instead of a fixed px height.
 */
.hero-thumbs {
	display: flex;
	gap: 24px;
	margin-top: 32px;
	/**
	 * No max-width here (unlike the 480px cap on the paragraph, which
	 * exists for text readability): the row should fill whatever content
	 * width .hero-copy's own padding leaves available, so tightening that
	 * padding actually grows the thumbnails to close the gap rather than
	 * leaving a second, independent dead zone at a fixed 480px.
	 */
}

.hero-thumbs img {
	flex: 1 1 0;
	/**
	 * Flex items default to `min-width: auto`, which for a replaced element
	 * (an <img>) resolves to the image's own intrinsic pixel width - not
	 * its flex-basis. That floor silently wins over `width: 100%` once the
	 * column gets narrower than the source photo, so on small screens the
	 * second thumbnail refused to shrink and pushed itself off the right
	 * edge of the viewport. min-width: 0 removes that floor so the pair
	 * still shares the row 50/50 at every width instead of one overflowing.
	 */
	min-width: 0;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 991px) {
	.hero-section {
		flex-direction: column;
	}

	.hero-copy {
		width: 100%;
		padding: 40px 6%;
	}

	.hero-media {
		width: 100%;
		height: 320px;
	}
}

/* ---------- Image utility ---------- */
.img-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rounded-lg {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* ---------- Why buyers trust us ---------- */
/**
 * This section's own .container needs more breathing room than the site's
 * default Bootstrap container (1140px/1320px) - the image + bullet list
 * pairing reads cramped at that width. Scoped to .trust-container only, so
 * every other section keeps the standard Bootstrap container width.
 */
.trust-container {
	max-width: 1400px;
}

/**
 * .trust-row lives outside .trust-container, as a direct child of the
 * full-bleed <section> (see the HTML comment in front-page.php) - the same
 * pattern .hero-section uses. That's what lets .trust-media reach the true
 * left edge of the viewport (x:0) instead of stopping at the container's
 * left padding, which is what was creating the visible gap on the left the
 * design doesn't have. Bootstrap's .row/.col grid can't do this: a column
 * can never be wider than its .container, by definition.
 */
.trust-row {
	display: flex;
	align-items: stretch;
	margin-top: 48px;
}

.trust-media {
	width: 50%;
	position: relative;
	min-height: 460px;
}

.trust-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trust-content {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/**
	 * Left padding is a fixed, comfortable gutter after the image (which
	 * now ends at this column's own left edge, the row's center line).
	 * Right padding mirrors .hero-copy's clamp() approach: a real margin
	 * that doesn't balloon into empty space on very wide screens.
	 */
	padding: 40px clamp(24px, 4vw, 96px) 40px clamp(32px, 5vw, 80px);
}

.trust-heading {
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom: 24px;
	max-width: 420px;
}

.trust-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

/**
 * Flexbox instead of the old absolutely-positioned ::before arrow: that
 * approach pinned the arrow to `top: 0` of the <li> and relied on the
 * arrow glyph and body text sharing an identical line-height to look
 * aligned, which broke the moment the text size changed. align-items:
 * center lets the arrow's own box center against the text's box directly,
 * so the two stay vertically centered on each other regardless of font
 * size.
 */
.trust-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--text-dark);
}

.trust-list li::before {
	content: "\25B8";
	flex: 0 0 auto;
	font-size: 1.2rem;
	color: var(--brand-green);
	font-weight: 700;
}

@media (max-width: 991px) {
	.trust-row {
		flex-direction: column;
		margin-top: 32px;
	}

	.trust-media {
		width: 100%;
		min-height: 280px;
	}

	.trust-content {
		width: 100%;
		padding: 32px 6%;
	}
}

/* ---------- What we do ----------
 * Image is pinned to the left ~70% of the section (not full-bleed); the
 * remaining strip is filled with a solid brand color so the white card can
 * genuinely overlap the photo's right edge instead of just sitting on top
 * of an edge-to-edge image. `overflow-x: hidden` here is redundant with
 * the global html/body rule above, but this section is exactly where the
 * bleed bug showed up historically, so it's kept as an explicit,
 * self-documenting guard against any future ancestor that re-enables
 * horizontal scroll.
 */
.whatwedo-wrap {
	position: relative;
	/**
	 * A deliberate height, not an accidental one - previously nothing here
	 * actually enforced a height, so the section was only ever as tall as
	 * the card's own text needed (~446px), cropping the photo to whatever
	 * that happened to leave behind.
	 */
	min-height: 640px;
	display: flex;
	/**
	 * align-items: center vertically centers the card; justify-content:
	 * flex-end pins it to the section's own right edge (minus the padding
	 * below), not the right edge of some narrower, separately-centered
	 * .container floating well short of it - that mismatch was the "text
	 * container size/alignment" problem: a wide, mostly-empty gray gap
	 * between the card and the section's actual right edge.
	 */
	align-items: center;
	justify-content: flex-end;
	overflow-x: hidden;
	/**
	 * Fills the ~28% strip .whatwedo-bg doesn't cover. Grey (matching
	 * .hero-copy's --bg-light panel), not brand green - the design uses a
	 * neutral backdrop here, not a color block.
	 */
	background-color: var(--bg-light);
}

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

.whatwedo-card {
	position: relative;
	z-index: 1;
	background: #fff;
	padding: 56px 48px;
	max-width: 460px;
	text-align: right;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	/**
	 * Right margin between the card and the section's true right edge -
	 * a real, modest gutter instead of the leftover space a narrower
	 * .container used to strand it in.
	 */
	margin-right: clamp(24px, 4vw, 80px);
}

.whatwedo-card p {
	color: var(--text-muted);
	margin-bottom: 24px;
}

/**
 * Everything in the card - heading, paragraph, and button - is
 * right-aligned against the card's right edge (.whatwedo-card's own
 * text-align: right handles the heading/paragraph). This rule keeps the
 * button pinned the same way independent of that parent setting -
 * display: block + margin-left: auto positions the button's own box
 * directly, rather than relying on text-align (which only positions
 * inline-level content).
 */
.whatwedo-card .btn-brand {
	display: block;
	width: fit-content;
	margin-left: auto;
}

/* ---------- About us ---------- */
.about-section p {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 18px;
}

/**
 * The design shows the photo top-aligned with the heading (not stretched
 * to match the paragraphs' full height, which is what height: 100% +
 * object-fit: cover here used to do). aspect-ratio keeps the image at its
 * natural ~788:713 proportions at any column width instead.
 */
.about-media img {
	width: 100%;
	aspect-ratio: 788 / 713;
	height: auto;
	object-fit: cover;
	display: block;
	position: relative;
	/**
	 * The design deliberately overflows this photo past the green
	 * section's true bottom edge into whatever follows, rather than
	 * containing it. -170px, not -90px: the section still has its own
	 * 80px bottom padding after this column, so the first 80px of negative
	 * margin only eats through that padding zone - it takes margin =
	 * -(desired overflow + padding-bottom), i.e. -(90 + 80), to actually
	 * push the section's outer edge 90px above the image's own rendered
	 * bottom. (Verified: 90px margin alone only produced 10px of real
	 * overflow past the section's true border - exactly 90 - 80.)
	 * z-index keeps the image painting above the section that comes
	 * after, since document order alone would let that section's
	 * background paint over the overflowing part instead.
	 */
	z-index: 2;
	margin-bottom: -170px;
}

@media (max-width: 991px) {
	.about-media img {
		/**
		 * The overlap effect only makes sense against the next section's
		 * flat background sitting directly beside/below the image at
		 * desktop widths. Once the layout stacks (image full-width, its
		 * own row), disable it - the picture is followed immediately by
		 * more of this same section's content, not the next section.
		 */
		margin-bottom: 0;
	}
}

/**
 * .about-media img (above) deliberately overflows 90px past the About Us
 * section's bottom edge into this section - but this section's own
 * `.section` padding-top is only 80px, 10px short of that. The gap wasn't
 * even close to zero: the image's bottom edge was actually landing 10px
 * *below* this section's heading's top edge, genuinely covering part of
 * the heading text. This section is the specific one sitting directly
 * beneath that overflow, so it - not the shared `.section` class every
 * other section also uses - gets the extra top clearance: 90px to clear
 * the image entirely, plus a 40px visual gap so the heading doesn't just
 * graze it.
 */
.ops-section {
	padding-top: 130px;
}

@media (max-width: 991px) {
	/* No overflowing image to clear once the layout above stacks (see .about-media img's own 991px override) - back to the standard section padding. */
	.ops-section {
		padding-top: 80px;
	}
}

/* ---------- Operations cards ---------- */
.ops-card {
	background-color: var(--brand-green);
	border-radius: var(--radius-lg);
	padding: 30px 20px 28px;
	text-align: center;
	color: #fff;
	height: 100%;
}

.ops-icon {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 16px;
	display: block;
	border: none;
}

.ops-step {
	display: inline-block;
	background: rgba(255, 255, 255, 0.15);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	padding: 3px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.ops-card h3 {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.ops-card p {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* ---------- Investors ----------
 * Replaces the old Bootstrap col-lg-2 grid: those columns forced each logo
 * card to stretch to 1/6th of a 1140-1400px container (~200px+) with a
 * full 1.5rem gutter between them, which read as oversized, widely-spaced
 * boxes. A flex row with fixed-width cards and a tight gap gives the
 * smaller, closer-together card sizing the design uses instead.
 */
.investors-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.investor-logo {
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 150px;
	height: 76px;
}

.investor-logo img {
	max-height: 46px;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 575px) {
	.investor-logo {
		width: calc((100% - 20px) / 2);
	}
}

/* ---------- Technology services ---------- */
.tech-media {
	height: 100%;
	min-height: 300px;
}

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

.tech-copy p {
	color: rgba(255, 255, 255, 0.9);
}

/* Right-aligned per the design, matching the same treatment used in the "What We Do" card. */
.tech-text {
	text-align: right;
}

/* ---------- Gallery ---------- */
.gallery-photo {
	display: block;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
}

.gallery-photo img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.gallery-caption {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 10px;
}

.gallery-stat {
	font-size: 4rem;
	font-weight: 700;
	font-family: var(--font-heading);
	line-height: 1;
	margin-bottom: 10px;
}

.video-tile {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: #7fa393;
}

.video-tile .video-el {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	opacity: 0.9;
	background: #7fa393;
}

/**
 * .gallery-video-nav / .gallery-video-col replace the old flex
 * .carousel-row (prev-button, viewport, next-button flanking the track on
 * both ends). The design instead groups both arrows together in their own
 * column - the same width as a photo column in the row above - with the
 * video track occupying the remaining two columns, not flanked by an
 * arrow on its own right edge.
 */
.gallery-video-nav {
	display: flex;
	gap: 12px;
}

@media (max-width: 767px) {
	.gallery-video-nav {
		margin-bottom: 8px;
	}
}

.video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--brand-green);
	font-size: 1.1rem;
	cursor: pointer;
	border: none;
}

/* Hidden once playback starts (see carousels.js) - native controls take over from here. */
.video-tile.is-playing .video-play {
	display: none;
}

/**
 * Marks the generated-placeholder carousel items (see agroots_dummy_poster()
 * in functions.php) so it's obvious at a glance in the browser which
 * slots still need real footage/thumbnails swapped in, rather than that
 * only being discoverable by reading the template source.
 */
.video-dummy-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 20px;
}

.carousel-arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e2e2e2;
	color: #444;
	flex: 0 0 auto;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.carousel-arrow.active {
	background: var(--brand-green);
	color: #fff;
}

.carousel-arrow:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* ---------- Generic carousel primitives ---------- */
.carousel-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.carousel-viewport {
	flex: 1 1 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.carousel-viewport::-webkit-scrollbar {
	display: none;
}

.carousel-track {
	display: flex;
	gap: 24px;
}

.carousel-item {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

/**
 * Always 3-per-view, at every width (a wider min-width:1400px 4-per-row
 * variant was tried here, but with only a handful of real videos it just
 * left dead space rather than actually showing a 4th - reverted). The
 * carousel now carries more items than fit in one view (see the $videos
 * array in front-page.php), so Prev/Next has real content to scroll to
 * regardless of how many show at once.
 */
.gallery-video-item {
	width: calc((100% - 48px) / 3);
}

.team-carousel-item {
	width: calc((100% - 3 * 24px) / 4);
}

/**
 * .blog-row-carousel (the fade target), not .blog-carousel - the element
 * that actually gets the is-fading class toggled on it is now the whole
 * row (main card + side cards together, see carousels.js renderBlogRow),
 * not just the side-cards wrapper. .blog-carousel is kept below purely
 * for its flex layout, it no longer needs its own fade transition.
 */
.blog-row-carousel,
.testimonial-carousel {
	transition: opacity 0.15s ease;
}

.blog-row-carousel.is-fading,
.testimonial-carousel.is-fading {
	opacity: 0;
}

@media (max-width: 991px) {
	.gallery-video-item {
		width: calc((100% - 24px) / 2);
	}
	.team-carousel-item {
		width: calc((100% - 2 * 24px) / 3);
	}
}

@media (max-width: 767px) {
	.gallery-video-item {
		width: 85%;
	}
	.team-carousel-item {
		width: calc((100% - 24px) / 2);
	}
	.carousel-row {
		gap: 10px;
	}
	.carousel-arrow {
		width: 34px;
		height: 34px;
	}
}

/* ---------- Blog ---------- */
/**
 * Widen this section's container beyond the default Bootstrap 1140/1320px
 * so the 50/50 image-and-entries split has the same room as the design
 * (matches .trust-container's approach above).
 */
.blog-container {
	max-width: 1320px;
}

/**
 * .blog-thumb is an <a> now (the whole card - image, heading, and excerpt
 * - links to the post), not a plain column div, so it needs an explicit
 * display: block (anchors are inline by default) plus a reset of the
 * underline/link-color a browser would otherwise apply to the heading and
 * text inside it.
 */
.blog-thumb {
	display: block;
	color: inherit;
	text-decoration: none;
}

.blog-thumb img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/**
 * The heading/paragraph beneath the image are plain block children of the
 * same column as the <img>, so they already share its exact left/right
 * edges - the width: 100% + box-sizing below just makes that explicit and
 * stops the paragraph from picking up any inherited max-width that would
 * cause it to wrap short of the image's edge.
 */
.blog-thumb h3,
.blog-thumb > p {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/**
 * Text first, then a fixed-size thumbnail - the design puts the image on
 * the right of each side card, the opposite of the old markup order
 * (image first). display: flex just follows DOM order, so the fix was
 * reordering the HTML (see front-page.php); .blog-side-text taking the
 * remaining space (flex: 1 1 auto) is what lets the image stay a fixed
 * 96px on the right instead of both sides fighting over width.
 */
/**
 * The 2 side cards should span exactly the same vertical range as the
 * main card's image (220px, matching .blog-thumb img's own height) -
 * top-aligned with its top edge and bottom-aligned with its bottom edge -
 * not just stack from the top with whatever gap happens to result. Fixed
 * height + justify-content: space-between distributes the 2 items evenly
 * across that same 220px, instead of each item's own margin-bottom
 * pushing the block to an arbitrary total height.
 */
.blog-carousel {
	height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/**
 * Prev/Next align with the main card's TEXT block, not its image - i.e.
 * this row's top edge should land where the main <h3> starts (right after
 * the image + the image's own margin-bottom), not directly under the 2
 * side cards with whatever gap they happened to leave. 16px matches
 * .mt-3, the Bootstrap spacer already used for that same gap on the main
 * card's own heading.
 */
.blog-nav-row {
	margin-top: 16px;
}

.blog-side-item {
	display: flex;
	align-items: center;
	gap: 14px;
	/**
	 * No margin-bottom here - .blog-carousel's own
	 * justify-content: space-between (above) is what spaces the 2 items
	 * apart now, spanning the full 220px rather than the items' own
	 * margins determining an independent, unrelated total height.
	 */
	margin-bottom: 0;
	color: inherit;
	text-decoration: none;
}

.blog-side-text {
	flex: 1 1 auto;
	min-width: 0;
}

/**
 * Bigger than before (96x72 -> 150x100) - this is also what makes the
 * excerpt wrap across multiple lines: the text column is flex: 1 1 auto
 * (see .blog-side-text), so a wider fixed-width image directly narrows
 * how much width is left for the text, which is what forces the wrap
 * instead of everything fitting on one line. It also naturally tightens
 * the gap between the 2 cards - .blog-carousel's height stays locked at
 * 220px to match the main card's image (that's the alignment fix from
 * earlier, untouched), so taller items just leave less of that fixed
 * 220px for justify-content: space-between to distribute as a gap.
 */
.blog-side-item img {
	width: 150px;
	height: 100px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.blog-side-item h4 {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 4px;
}

.blog-side-item p {
	font-size: 0.82rem;
	color: var(--text-muted);
	margin: 0;
}

/* ---------- Testimonials ---------- */
.testimonial-avatars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	margin-bottom: 20px;
}

.testimonial-avatars img {
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/**
 * The "slidesPerView: 3" look: two smaller, faded neighbour avatars
 * flanking a larger, fully-opaque active one. Scale is layered on top of
 * the size difference (rather than relying on width/height alone) so the
 * non-active slides read as visually receded, matching how a real 3-up
 * slider scales its inactive slides.
 */
.avatar-side {
	width: 64px;
	height: 64px;
	opacity: 0.5;
	transform: scale(0.9);
}

.avatar-main {
	width: 90px;
	height: 90px;
	border: 3px solid #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.testimonial-name {
	text-align: center;
	font-weight: 700;
	margin-bottom: 2px;
}

.testimonial-role {
	text-align: center;
	color: var(--text-muted);
	font-size: 0.85rem;
	margin-bottom: 12px;
}

.testimonial-stars {
	text-align: center;
	color: #f5b301;
	margin-bottom: 16px;
}

.testimonial-quote {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	color: var(--text-dark);
}

/* ---------- Site footer (custom) ---------- */
.site-footer-custom {
	padding: 60px 0 30px;
	color: #fff;
}

.site-footer-custom h4 {
	font-family: var(--font-body);
	font-weight: 700;
	margin-bottom: 20px;
}

.site-footer-custom a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.site-footer-custom a:hover {
	color: #fff;
}

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

.site-footer-custom ul li {
	margin-bottom: 10px;
}

.footer-newsletter {
	display: flex;
	border-radius: 4px;
	overflow: hidden;
}

.footer-newsletter input {
	border: none;
	padding: 10px 14px;
	flex: 1;
	font-size: 0.9rem;
}

.footer-newsletter button {
	background: #111;
	color: #fff;
	border: none;
	padding: 0 20px;
	font-size: 0.85rem;
	font-weight: 600;
}

.footer-social {
	display: flex;
	gap: 12px;
	margin-top: 18px;
}

.footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Uploaded icon images (white glyph, transparent bg), not icon-font glyphs - sized to sit centered inside the circle above. */
.footer-social a img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}

@media (max-width: 991px) {
	/**
	 * .whatwedo-card is a flex item of .whatwedo-wrap now (no Bootstrap
	 * column doing this automatically anymore), so it needs an explicit
	 * width here to actually fill the row on mobile instead of just
	 * shrink-wrapping its own content at whatever width that leaves.
	 */
	.whatwedo-card {
		width: 100%;
		margin: 0 auto;
		max-width: none;
	}
}

/* ================================================================
   Content Page template (Blogs & Insights / What We Do)
   ================================================================ */
.content-page-hero-section {
	padding-top: 56px;
}

.content-page-title {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 32px;
}

.content-page-hero-media {
	width: 100%;
	height: 460px;
}

.content-page-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.content-page-body-section {
	padding: 56px 0 80px;
}

.content-page-subheading {
	text-align: center;
	font-size: 1.6rem;
	margin-bottom: 24px;
}

.content-page-body-section p {
	color: var(--text-dark);
	text-align: center;
	line-height: 1.8;
}

.content-page-pagination {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 40px;
}

@media (max-width: 767px) {
	.content-page-hero-media {
		height: 260px;
	}
}

/* ================================================================
   About Us template
   ================================================================ */
.aboutus-intro-section {
	padding: 70px 0;
}

.aboutus-intro-section h1 {
	font-size: 2.5rem;
	margin-bottom: 18px;
}

.aboutus-intro-section p {
	color: var(--text-muted);
}

.aboutus-placeholder-block {
	background-color: var(--brand-green);
	border-radius: 4px;
	width: 100%;
	height: 320px;
}

.aboutus-quote-section {
	padding: 60px 0;
}

.aboutus-quote-section p {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.7;
	color: var(--text-dark);
}

/* ---- Mission / Vision split blocks ---- */
.mv-section {
	padding: 70px 0;
}

.mv-visual {
	position: relative;
	min-height: 340px;
}

.mv-visual .mv-block-main {
	position: absolute;
	top: 0;
	left: 0;
	width: 78%;
	height: 100%;
	background-color: var(--brand-green);
	border-radius: 4px;
}

.mv-visual .mv-block-accent {
	position: absolute;
	bottom: -30px;
	right: 6%;
	width: 46%;
	height: 55%;
	background-color: var(--accent-teal);
	border-radius: 4px;
}

.mv-visual.mv-visual-reverse .mv-block-main {
	left: auto;
	right: 0;
}

.mv-visual.mv-visual-reverse .mv-block-accent {
	right: auto;
	left: 6%;
}

.mv-copy h2 {
	font-size: 2.1rem;
	margin-bottom: 18px;
}

.mv-copy p {
	color: var(--text-muted);
	margin-bottom: 22px;
}

.mv-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mv-checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-weight: 500;
}

.mv-checklist li i {
	color: var(--brand-green);
	font-size: 1.1rem;
}

/* ---- Team section ---- */
.team-section {
	padding: 70px 0;
}

.team-card {
	text-align: left;
}

.team-card-media {
	background-color: var(--accent-teal);
	border-radius: 4px;
	width: 100%;
	height: 260px;
	margin-bottom: 16px;
}

.team-card h4 {
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 4px;
}

.team-card p {
	color: var(--text-muted);
	font-size: 0.85rem;
	margin: 0;
}

.team-pagination {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 44px;
}

@media (max-width: 991px) {
	.mv-visual {
		margin-bottom: 30px;
	}
	.aboutus-placeholder-block {
		height: 240px;
		margin-top: 24px;
	}
}

/* ================================================================
   Gallery & Media page (template-gallery.php)
   ================================================================ */

/**
 * .gallery-hero, .gallery-cta, and the two .gallery-page-section elements
 * are all direct children of <main class="custom-page-main"> (see
 * template-gallery.php), so they automatically get the full-bleed 100vw
 * treatment from the global "#front-page-content > section,
 * .custom-page-main > section" rule near the top of this file - no extra
 * width/margin rules needed here for that part.
 */
.gallery-hero {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.gallery-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 40, 20, 0.35) 0%, rgba(5, 40, 20, 0.55) 55%, rgba(5, 40, 20, 0.92) 100%);
}

.gallery-hero-content {
	position: relative;
	z-index: 1;
	color: #fff;
	padding-top: 80px;
	padding-bottom: 56px;
}

.gallery-hero-kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--accent-teal);
	margin-bottom: 12px;
}

.gallery-hero-content h1 {
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
	line-height: 1.15;
	margin-bottom: 16px;
	max-width: 780px;
}

.gallery-hero-content p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
	margin-bottom: 28px;
}

.gallery-hero-stats {
	display: flex;
	gap: 40px;
}

.gallery-hero-stat {
	display: flex;
	flex-direction: column;
}

.gallery-hero-stat-num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
}

.gallery-hero-stat-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 4px;
}

/**
 * A deliberately irregular grid (not a plain uniform 4-up) - --wide and
 * --tall items span extra columns/rows so a couple of photos read as
 * featured rather than every tile being visually identical, which is
 * what makes this feel like a curated gallery instead of a plain file
 * listing.
 */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: 20px;
}

.gallery-grid-item--wide {
	grid-column: span 2;
}

.gallery-grid-item--tall {
	grid-row: span 2;
}

.gallery-grid-item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: pointer;
	background: var(--bg-light);
}

.gallery-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.gallery-grid-item:hover img {
	transform: scale(1.08);
}

.gallery-grid-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	text-align: center;
	background: linear-gradient(180deg, rgba(5, 40, 20, 0) 40%, rgba(5, 40, 20, 0.85) 100%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gallery-grid-item:hover .gallery-grid-overlay,
.gallery-grid-item:focus-visible .gallery-grid-overlay {
	opacity: 1;
}

.gallery-grid-zoom {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

.gallery-grid-caption {
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.4;
}

.gallery-grid-caption strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	margin-bottom: 4px;
}

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

.gallery-cta {
	padding: 70px 0;
	color: #fff;
}

.gallery-cta h2 {
	color: #fff;
	margin-bottom: 14px;
}

.gallery-cta p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
	margin: 0 auto 28px;
}

/* ---- Lightbox ---- */
.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 15, 10, 0.94);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease;
	padding: 40px;
}

.gallery-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.gallery-lightbox-locked {
	overflow: hidden;
}

.gallery-lightbox-figure {
	max-width: min(1100px, 90vw);
	max-height: 86vh;
	margin: 0;
	text-align: center;
}

.gallery-lightbox-figure img {
	max-width: 100%;
	max-height: 76vh;
	object-fit: contain;
	border-radius: 6px;
	display: block;
	margin: 0 auto;
}

.gallery-lightbox-figure figcaption {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	margin-top: 16px;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
	position: fixed;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.25);
}

.gallery-lightbox-close {
	top: 24px;
	right: 24px;
}

.gallery-lightbox-prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.gallery-lightbox-next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 991px) {
	.gallery-hero {
		min-height: 380px;
	}

	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 200px;
	}

	.gallery-grid-item--wide {
		grid-column: span 2;
	}

	.gallery-grid-item--tall {
		grid-row: span 1;
	}

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

@media (max-width: 767px) {
	.gallery-hero-stats {
		gap: 28px;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	.gallery-grid-item--wide,
	.gallery-grid-item--tall {
		grid-column: span 1;
		grid-row: span 1;
	}

	.gallery-video-grid {
		grid-template-columns: 1fr;
	}

	.gallery-lightbox {
		padding: 20px;
	}

	.gallery-lightbox-prev,
	.gallery-lightbox-next {
		width: 40px;
		height: 40px;
	}
}

/* ================================================================
   Contact Us page (template-contact.php)
   ================================================================ */

/**
 * .contact-hero and .contact-page-section are direct children of
 * <main class="custom-page-main"> (see template-contact.php), so they
 * automatically get the full-bleed 100vw treatment from the global
 * "#front-page-content > section, .custom-page-main > section" rule near
 * the top of this file.
 */
.contact-hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.contact-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(5, 40, 20, 0.94) 0%, rgba(5, 40, 20, 0.75) 55%, rgba(5, 40, 20, 0.5) 100%);
}

.contact-hero-content {
	position: relative;
	z-index: 1;
	color: #fff;
	padding: 64px 0;
}

.contact-hero-kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--accent-teal);
	margin-bottom: 12px;
}

.contact-hero-content h1 {
	font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
	margin-bottom: 14px;
}

.contact-hero-content p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 520px;
	margin: 0;
}

.contact-page-section {
	padding: 90px 0;
}

/**
 * The two-panel card itself: a fixed-proportion split (info panel
 * narrower, form panel wider - the form has more fields to breathe
 * around) inside one shared rounded/shadowed container, rather than two
 * separate boxes floating next to each other.
 */
.contact-card {
	display: flex;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(5, 40, 20, 0.14);
}

.contact-card-info,
.contact-card-form {
	padding: 56px 48px;
}

.contact-card-info {
	flex: 0 0 40%;
	background: var(--brand-green);
	color: #fff;
}

.contact-card-info h2,
.contact-card-form h2 {
	font-size: 1.6rem;
	margin-bottom: 12px;
}

.contact-card-info-lead {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 32px;
}

.contact-info-list {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
}

.contact-info-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 26px;
}

.contact-info-list li:last-child {
	margin-bottom: 0;
}

.contact-info-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	color: var(--accent-teal);
}

.contact-info-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
}

.contact-info-text strong {
	font-family: var(--font-heading);
	font-size: 1.02rem;
	color: #fff;
	margin-bottom: 2px;
}

.contact-info-text a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.contact-info-text a:hover {
	color: #fff;
	text-decoration: underline;
}

.contact-card-social {
	display: flex;
	gap: 12px;
}

.contact-card-social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.contact-card-social a:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Uploaded icon images (white glyph, transparent bg), not icon-font glyphs - sized to sit centered inside the circle above. */
.contact-card-social a img {
	width: 17px;
	height: 17px;
	object-fit: contain;
	display: block;
}

.contact-card-form {
	flex: 1 1 auto;
}

.contact-card-form-lead {
	color: var(--text-muted);
	margin-bottom: 28px;
}

.contact-form-row {
	display: flex;
	gap: 20px;
}

.contact-form-row .contact-form-field {
	flex: 1 1 0;
}

.contact-form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.contact-form-field span {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-dark);
}

.contact-form-field input,
.contact-form-field textarea {
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--text-dark);
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	padding: 13px 16px;
	background: var(--bg-light);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
	outline: none;
	border-color: var(--brand-green);
	background: #fff;
}

.contact-form-field textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-form-submit {
	width: 100%;
	text-align: center;
	margin-top: 4px;
}

@media (max-width: 991px) {
	.contact-card {
		flex-direction: column;
	}

	.contact-card-info,
	.contact-card-form {
		flex: 1 1 auto;
		padding: 40px 32px;
	}
}

@media (max-width: 575px) {
	.contact-form-row {
		flex-direction: column;
		gap: 0;
	}

	.contact-card-info,
	.contact-card-form {
		padding: 32px 24px;
	}
}