/*
 * BioGrunta website styles.
 * Claude Code and Git-managed CSS belongs here.
 */

:root {
	--bio-content-width: 1200px;

	/*
	 * BioGrunta global colour-token API — Colour-system refactor.
	 * See docs/DESIGN_SYSTEM.md for full rationale. This is the site's
	 * entire theme surface: changing these ~13 values recolours every page
	 * (Header, Footer, Homepage, Services, Equipment, Contact), since every
	 * component rule in this file reads its colour from one of them rather
	 * than a hardcoded value. A theme (see themes.css) only ever needs to
	 * redefine this same set of properties, scoped to its activation class.
	 *
	 * Values below are the current approved BioGrunta green palette (the
	 * default theme) — the same green/teal already approved for the Header
	 * navigation and every Homepage section, now promoted here as the
	 * sitewide canonical values instead of being redefined page-by-page.
	 *
	 * --bio-success / --bio-error are validation-state colours, not theme
	 * colours — they stay independent of the palette above and are not
	 * expected to change per-theme.
	 */
	--bio-primary: #2f8f83;        /* primary action (buttons, links, accents) */
	--bio-primary-hover: #1f6f66;  /* hover/active state of the above */
	--bio-accent-dark: #1f6f66;    /* secondary/deeper-emphasis accent (e.g. a hover fill distinct from the primary surface it sits on) */

	--bio-text: #17322d;           /* body/heading text on light surfaces */
	--bio-text-muted: #60706c;     /* secondary/muted text on light surfaces */
	--bio-text-on-dark: #ffffff;   /* text on dark surfaces (e.g. the Footer) */

	--bio-surface: #ffffff;        /* cards, panels, inputs */
	--bio-surface-alt: #f5f7f3;    /* alternate section background */
	--bio-surface-soft: #eef5f1;   /* soft tinted section/placeholder background */
	--bio-surface-strong: #1a1a1a; /* strong/dark surface (e.g. the Footer) */

	--bio-border: #c9d8d1;         /* borders, dividers */
	--bio-focus: #2c7fa3;          /* focus-visible outline */
	--bio-shadow-color: 23, 50, 45; /* RGB triplet for rgba(var(--bio-shadow-color), alpha) panel shadows */

	/*
	 * Surface-role tokens — audit/refactor pass. Introduced by the
	 * Mechanical and Floaty / Warm Earthworks themes, but only ever
	 * consumed via theme-scoped selectors in themes.css; the base
	 * component rules below still read the older, coarser --bio-surface/
	 * --bio-surface-soft/--bio-surface-strong directly. Defining these here
	 * (aliased to the existing tokens whose values already match today's
	 * rendered default appearance) and pointing the relevant component
	 * rules at them instead is what lets every theme override a single,
	 * correctly-scoped token rather than repeating the component selector.
	 */
	--bio-page-bg: var(--bio-surface-alt);      /* .home-page canvas */
	--bio-header-bg: var(--bio-surface);        /* shared Header background */
	--bio-panel-bg: var(--bio-surface);         /* large contained panels (About, Catalogue card, Final CTA panel) */
	--bio-card-bg: var(--bio-surface);          /* Service cards */
	--bio-field-bg: var(--bio-surface);         /* form inputs/textareas */
	--bio-active-bg: var(--bio-surface);        /* nav current-page surface */
	--bio-panel-subtle: var(--bio-surface);     /* secondary/recessed surfaces (e.g. the Catalogue bottom bar) */
	--bio-strong-section-bg: var(--bio-surface-soft); /* Final CTA section background */
	--bio-footer-bg: var(--bio-surface-strong); /* Footer background */

	--bio-success: #2e765f;
	--bio-error: #b5483d;

	--bio-radius-small: 0.625rem;
	--bio-radius-large: 1rem;

	--bio-space-1: 0.5rem;
	--bio-space-2: 0.75rem;
	--bio-space-3: 1rem;
	--bio-space-4: 1.5rem;
	--bio-space-5: 2rem;
	--bio-space-6: 3rem;
	--bio-space-7: 4rem;
}

/*
 * Safe global text/background foundation (Stage 1). Every section on every
 * page already sets its own explicit background (white, alternating light
 * panels, the dark Footer, etc.), so this only shows through in any
 * unstyled gaps — it doesn't touch or override any individual section.
 */
body {
	color: var(--bio-text);
	background-color: var(--bio-surface-alt);
}

/* ==========================================================================
   Equipment archive
   Catalogue listing for the bio_equipment CPT archive (/irenginiai/).
   .equipment-card repeats via the Bricks Query Loop assigned in the
   Archive template — see docs/bricks/equipment-archive.html.
   ========================================================================== */

.equipment-archive {
	padding-block: 3rem;
}

.equipment-archive__container {
	max-width: var(--bio-content-width);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/*
 * Full container width (matches .equipment-grid below, no separate narrow
 * cap). Eyebrow, H1, and intro stay flat siblings (no wrapper div) — at
 * 1024px+ each is placed explicitly (eyebrow/H1 into column 1 as two rows,
 * intro spanning both rows in column 2) rather than relying on a wrapper
 * surviving a manual Bricks rebuild, so this can't silently regress into
 * 3-item grid auto-placement (which put the H1 in column 2 by itself,
 * disconnected from the eyebrow above it and the intro beside it — the
 * reported bug). Below 1024px, plain single-column auto-flow already stacks
 * the three in DOM order (eyebrow, H1, intro) with no extra rules needed.
 */
.equipment-archive__header {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 1rem;
	width: 100%;
	margin-bottom: var(--bio-space-7);
	text-align: left;
}

@media (min-width: 1024px) {
	.equipment-archive__header {
		grid-template-columns: 1.15fr 1fr;
		column-gap: 4rem;
		align-items: end;
	}

	.equipment-archive__eyebrow {
		grid-column: 1;
		grid-row: 1;
	}

	.equipment-archive__title {
		grid-column: 1;
		grid-row: 2;
	}

	.equipment-archive__intro {
		grid-column: 2;
		grid-row: 1 / 3;
	}
}

/*
 * Same terracotta eyebrow treatment as the Homepage's own Hero/Service Area
 * eyebrows: --bio-primary + bold + slightly larger at the base level (all
 * themes), with the Warm Earthworks terracotta swap layered on top in
 * themes.css (see ".theme-warm-earthworks .equipment-archive__eyebrow").
 */
.equipment-archive__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bio-primary);
}

/*
 * text-align: left is explicit here (not left to inherit from the header)
 * so the H1 can't end up right-aligned regardless of ancestor changes —
 * directly addresses the reported "H1 looks disconnected" symptom.
 */
.equipment-archive__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.15;
	text-align: left;
	color: var(--bio-text);
}

@media (min-width: 1024px) {
	.equipment-archive__title {
		font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
		line-height: 1.1;
	}
}

.equipment-archive__intro {
	margin: 0;
	min-width: 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--bio-text-muted);
}

@media (min-width: 1024px) {
	.equipment-archive__intro {
		max-width: 34rem;
		font-size: 1.1875rem;
		line-height: 1.7;
	}
}

.equipment-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

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

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

.equipment-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--bio-border);
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--bio-surface);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.equipment-card:hover {
	box-shadow: 0 4px 16px rgba(var(--bio-shadow-color), 0.08);
	transform: translateY(-2px);
}

.equipment-card:focus-within {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

/*
 * Shared by the Equipment Archive grid and the Homepage catalogue teaser
 * (both use this exact component) — .equipment-single__media is a separate,
 * unrelated rule and is untouched. object-fit: contain (was cover) shows
 * the complete product instead of cropping it; box-sizing: border-box
 * keeps the frame's own aspect-ratio-driven height identical to before
 * even with the new padding included. The existing --bio-surface-soft
 * background now doubles as visible letterboxing around images whose
 * proportions don't exactly match the 4:3 frame, instead of being fully
 * covered edge-to-edge as before.
 */
.equipment-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-sizing: border-box;
	padding: var(--bio-space-2);
	background: var(--bio-surface-soft);
}

.equipment-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.equipment-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.5rem;
	padding: 1.25rem;
}

.equipment-card__manufacturer {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--bio-text-muted);
}

.equipment-card__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--bio-text);
}

.equipment-card__title a {
	color: inherit;
	text-decoration: none;
}

.equipment-card__title a:hover {
	text-decoration: underline;
}

.equipment-card__excerpt {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.equipment-card__link {
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--bio-primary);
	text-decoration: none;
}

.equipment-card__link:hover {
	text-decoration: underline;
}

.equipment-card__link:focus-visible,
.equipment-card__title a:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   Equipment single
   Product family detail template for the bio_equipment CPT
   (/irenginiai/{product-slug}/). Structure matches the Bricks Single
   template markup — see docs/bricks/equipment-single.html.
   ========================================================================== */

.equipment-single__container {
	max-width: var(--bio-content-width);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.equipment-single__hero {
	padding-block: 3rem;
}

.equipment-single__breadcrumb {
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
}

.equipment-single__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.equipment-single__breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 0.375rem;
	color: var(--bio-text-muted);
}

.equipment-single__breadcrumb a {
	color: var(--bio-text-muted);
	text-decoration: none;
}

.equipment-single__breadcrumb a:hover {
	text-decoration: underline;
}

.equipment-single__breadcrumb a:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

.equipment-single__breadcrumb [aria-current="page"] {
	color: var(--bio-text);
	font-weight: 600;
}

/*
 * Stacked (text first, image second, matching DOM order) through tablet;
 * 3fr/2fr split from 1024px+ only, vertically centered once side-by-side.
 */
.equipment-single__hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.equipment-single__hero-grid {
		grid-template-columns: 3fr 2fr;
		gap: 2.5rem;
		align-items: center;
	}
}

.equipment-single__hero-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	text-align: left;
}

/*
 * Same eyebrow treatment as the Homepage/Services/Equipment Archive
 * eyebrows: --bio-primary + bold + this size at the base level (all
 * themes), with the Warm Earthworks terracotta swap layered on top in
 * themes.css (see ".theme-warm-earthworks .equipment-single__manufacturer").
 */
.equipment-single__manufacturer {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bio-primary);
}

.equipment-single__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.15;
	color: var(--bio-text);
}

@media (min-width: 1024px) {
	.equipment-single__title {
		font-size: clamp(3.25rem, 2.9rem + 0.75vw, 3.75rem);
		line-height: 1.1;
	}
}

.equipment-single__summary {
	max-width: 38rem;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--bio-text-muted);
}

/*
 * max-width: none — the 38rem cap above is a sensible width for the
 * mobile/tablet single-column layout, but would unnecessarily compress the
 * summary once it's sitting in the wider 3fr text column at 1024px+ (the
 * grid column itself is the boundary, so this can't spill past it).
 */
@media (min-width: 1024px) {
	.equipment-single__summary {
		max-width: none;
		font-size: 1.25rem;
		line-height: 1.7;
	}
}

.equipment-single__hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

/*
 * Shared "phone" (filled) / "secondary" (outline) CTA button component.
 * Equipment Single, the Homepage (Hero actions), the Services page
 * (Hero + Final CTA), and the Contact page (contact-details column, both
 * phone and email actions) all already used byte-identical padding, radius,
 * type, and color values for this button pair — grouped here so all four
 * stay synchronized instead of drifting into independently-maintained
 * copies. The Header's compact nav phone button (.site-header__phone) is
 * intentionally NOT included: it shares only the color/hover/focus values,
 * not the size/padding, since it's a deliberately smaller nav-bar variant
 * for its own layout context.
 *
 * Design Foundation Stage 1: colors below now use the approved BioGrunta
 * tokens (docs/DESIGN_SYSTEM.md) in place of the old blue placeholder
 * values. Padding/radius/type are unchanged — shape/spacing tokens
 * (--bio-radius-small etc.) are a later stage, not this one.
 */
.equipment-single__cta-phone,
.home-page__cta-phone,
.services-page__cta-phone,
.contact-page__cta-phone,
.equipment-single__cta-enquiry,
.home-page__cta-secondary,
.services-page__cta-secondary,
.contact-page__cta-email {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.equipment-single__cta-phone,
.home-page__cta-phone,
.services-page__cta-phone,
.contact-page__cta-phone {
	background: var(--bio-primary);
	color: var(--bio-surface);
}

.equipment-single__cta-phone:hover,
.home-page__cta-phone:hover,
.services-page__cta-phone:hover,
.contact-page__cta-phone:hover {
	background: var(--bio-primary-hover);
}

.equipment-single__cta-enquiry,
.home-page__cta-secondary,
.services-page__cta-secondary,
.contact-page__cta-email {
	border: 1px solid var(--bio-primary);
	background: transparent;
	color: var(--bio-primary);
}

.equipment-single__cta-enquiry:hover,
.home-page__cta-secondary:hover,
.services-page__cta-secondary:hover,
.contact-page__cta-email:hover {
	background: var(--bio-surface-soft);
}

.equipment-single__cta-phone:focus-visible,
.equipment-single__cta-enquiry:focus-visible,
.home-page__cta-phone:focus-visible,
.home-page__cta-secondary:focus-visible,
.services-page__cta-phone:focus-visible,
.services-page__cta-secondary:focus-visible,
.contact-page__cta-email:focus-visible,
.contact-page__cta-phone:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

/*
 * Equipment Single-only desktop button bump, layered after the shared
 * cross-page button component above (which intentionally stays unchanged
 * for the Homepage/Services/Contact instances it's also used for). These
 * classes are shared by both the Hero actions and the bottom CTA panel's
 * actions, so this one rule covers both — the bottom panel is meant to
 * "match the stronger site CTA controls" already established here.
 */
@media (min-width: 1024px) {
	.equipment-single__cta-phone,
	.equipment-single__cta-enquiry {
		padding: 1rem 2rem;
		font-size: 1.0625rem;
		font-weight: 700;
	}
}

.equipment-single__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--bio-surface-soft);
}

.equipment-single__media-image {
	display: block;
	width: 100%;
	height: 100%;
	/* Contain, not cover: product photos are typically framed as a full standalone unit and shouldn't be cropped. */
	object-fit: contain;
}

.equipment-single__details {
	padding-block: 3rem;
}

/*
 * Content (table) full width, sidebar stacked below it, at every width —
 * the previous 1024px+ side-by-side (2fr/1fr) split is removed, per the
 * brief's explicit "remove the side-by-side layout" requirement.
 */
.equipment-single__details .equipment-single__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.equipment-single__content {
	min-width: 0;
}

.equipment-single__content-heading {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

@media (min-width: 1024px) {
	.equipment-single__content-heading {
		font-size: 2rem;
	}
}

/*
 * Full available width (the 65ch cap this used to have was compressing the
 * table itself, not just the prose) — the Post Content element (including
 * its native WordPress Table block) fills .equipment-single__content,
 * which is now full container width in turn (see the details-layout rule
 * above). overflow-x: auto stays as a safety net regardless of table
 * width or the --wide modifier below: if a table ever ends up wider than
 * its container at some viewport, it scrolls inside this element rather
 * than overflowing the page.
 */
.equipment-single__post-content {
	max-width: none;
	overflow-x: auto;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--bio-text);
}

/*
 * width: 100% + table-layout: auto so every table fills the available
 * space and sizes its own columns by content. No min-width and no
 * white-space: nowrap here — those used to force every column onto one
 * line regardless of table width, which was fine for tables with few,
 * short headings but forced many-column tables with long headings far
 * past the container (the reported overlap/clipping). overflow-wrap +
 * hyphens let a long heading wrap onto multiple lines instead. None of
 * this changes anything visible for a table whose content never needed
 * to wrap in the first place — narrower tables are unaffected.
 */
.equipment-single__post-content table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	font-size: 1.0625rem;
}

.equipment-single__post-content th,
.equipment-single__post-content td {
	padding: 0.875rem 1.25rem;
	border: 1px solid var(--bio-border);
	text-align: left;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.equipment-single__post-content th {
	font-weight: 700;
	color: var(--bio-text);
	background: var(--bio-surface-soft);
}

/*
 * Wide-table modifier: add "equipment-table--wide" as an Additional CSS
 * class (WordPress Table block sidebar) on any table with many columns —
 * see the task report for the exact identification rule. WordPress puts a
 * block's custom class on the <figure class="wp-block-table"> wrapper, not
 * the <table> itself, so every selector below matches whichever element
 * actually ends up carrying the class.
 *
 * min-width is a genuine floor (not the previous blanket one) so an
 * 8–10 column table can't get squeezed unreadably small — kept under the
 * 768px breakpoint's own container width (728px, i.e. 768px minus the
 * container's 1.25rem side padding) so it never binds at 768px+ and this
 * page's own "desktop" range stays scroll-free; it only binds once the
 * viewport is narrower than that, which in practice means mobile. Cell
 * text is slightly smaller/tighter than the default table so more columns
 * fit before that floor is needed at all.
 */
.equipment-single__post-content .equipment-table--wide,
.equipment-single__post-content .equipment-table--wide table {
	min-width: 42rem;
}

.equipment-single__post-content .equipment-table--wide th,
.equipment-single__post-content .equipment-table--wide td {
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.equipment-single__post-content .equipment-table--wide th:first-child,
.equipment-single__post-content .equipment-table--wide td:first-child {
	min-width: 9rem;
}

/*
 * Full-width grid below the table: 1 column mobile, 2 tablet, 3 desktop.
 * Blocks that Bricks hides entirely (Warranty/Certificates/Installation
 * Notes are each conditional on their ACF field being non-empty) simply
 * aren't grid items when absent, so the remaining visible blocks reflow
 * without leaving empty cells or gaps — no extra CSS needed for that.
 */
.equipment-single__sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.equipment-single__sidebar {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.equipment-single__sidebar {
		grid-template-columns: repeat(3, 1fr);
	}
}

.equipment-single__sidebar-block {
	min-width: 0;
	padding: 1.25rem;
	border: 1px solid var(--bio-border);
	border-radius: var(--bio-radius-large);
	background: var(--bio-panel-bg);
	box-shadow: 0 1px 2px rgba(var(--bio-shadow-color), 0.05), 0 12px 32px rgba(var(--bio-shadow-color), 0.06);
}

.equipment-single__sidebar-heading {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--bio-text);
}

.equipment-single__sidebar-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

@media (min-width: 1024px) {
	.equipment-single__sidebar-heading {
		font-size: 1.25rem;
	}

	.equipment-single__sidebar-text {
		font-size: 1.0625rem;
	}
}

.equipment-single__sidebar-link {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--bio-primary);
	text-decoration: none;
}

.equipment-single__sidebar-link + .equipment-single__sidebar-link {
	margin-top: 0.375rem;
}

.equipment-single__sidebar-link:hover {
	text-decoration: underline;
}

.equipment-single__sidebar-link:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

.equipment-single__cta {
	padding-block: 3rem;
	background: var(--bio-surface-alt);
	text-align: center;
}

.equipment-single__cta .equipment-single__container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	max-width: 44rem;
}

.equipment-single__cta-heading,
.equipment-single__cta-text {
	flex: 1 1 100%;
	margin: 0;
}

/*
 * Previously had no font-size at all (relied on the browser/Bricks default
 * H2/P style) — now matches the same base scale already established for
 * the Services page's Final CTA heading. Color is handled separately by
 * the existing dark-panel theme override (out of scope here — this rule
 * only sets size/weight).
 */
.equipment-single__cta-heading {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--bio-text);
}

.equipment-single__cta-text {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

@media (min-width: 1024px) {
	.equipment-single__cta-heading {
		font-size: clamp(2.25rem, 1.65rem + 1vw, 2.5rem);
	}

	.equipment-single__cta-text {
		font-size: 1.125rem;
		line-height: 1.65;
	}
}

/* ==========================================================================
   Site header
   Global header rendered by the Bricks Header template (Entire website
   condition) — see docs/bricks/site-header.html.
   ========================================================================== */

/*
 * Visual rescue (round 2): the header previously felt undersized. Logo,
 * nav, and phone CTA are now noticeably larger, especially at desktop
 * (1024px+) where the logo was previously *smaller* than on mobile — that
 * inversion is corrected here. Structure and responsive show/hide logic
 * (nav hidden below 1024px, toggle shown instead) are unchanged.
 */
.site-header {
	background: var(--bio-header-bg);
	border-bottom: 1px solid var(--bio-border);
}

.site-header__container {
	width: 100%;
	max-width: var(--bio-content-width);
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: var(--bio-space-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: 84px;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
}

.site-header__logo img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.site-header__nav {
	display: none;
}

.site-header__nav ul {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: 100%;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Alignment fix: every list item and link now stretches through a
 * consistent flex chain (ul -> li -> a) so the link's rendered height
 * always matches the navigation wrapper's height exactly, with its label
 * centred both ways via its own flex centring — rather than being centred
 * only vertically (align-items on the ul) while sized by its own padding,
 * which is what let the active/hover state drift slightly off-centre.
 * Colour, font-size, font-weight, and horizontal padding are unchanged
 * from the approved treatment.
 */
.site-header__nav li {
	display: flex;
	align-items: stretch;
}

.site-header__nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	color: var(--bio-surface);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	padding-inline: 1.75rem;
	border-radius: var(--bio-radius-small);
	text-decoration: none;
}

/*
 * Hover: a solid deeper-accent fill (distinct from the wrapper's own
 * --bio-primary background) rather than a translucent white overlay —
 * background/color are the only properties involved, so hovering never
 * changes the link's box size.
 */
.site-header__nav a:hover {
	background: var(--bio-accent-dark);
}

/*
 * Current-page state: styles WordPress/Bricks' own current-page markers
 * (`aria-current="page"` on the link, or a `.current-menu-item` ancestor
 * `<li>`) if the live Nav Menu element outputs them — no new HTML is added
 * here, this only activates on attributes/classes WordPress core already
 * provides. Same padding/radius as every other link, so dimensions never
 * change between states. --bio-primary-hover (rather than --bio-primary)
 * is used for the text colour deliberately — the plain primary tone reads
 * too light for body-weight legibility against the white background at
 * this size; the hover/darker shade keeps stronger contrast.
 */
.site-header__nav a[aria-current="page"],
.site-header__nav .current-menu-item > a {
	background: var(--bio-active-bg);
	color: var(--bio-primary-hover);
}

.site-header__nav a:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

/*
 * Colour-system refactor: now reads the same global --bio-primary /
 * --bio-primary-hover tokens as every other primary action on the site
 * (previously a one-off hardcoded blue, unrelated to the rest of the
 * palette and invisible to any sitewide theme change). Size/padding are
 * still this header's own compact variant, kept modest at mobile/tablet
 * (where the long "Skambinti: +370 606 95538" label already needs the
 * room) and matched to the Hero primary CTA's dimensions at desktop below.
 */
/*
 * font-size bumped from 0.8125rem (13px, inside the "11-13px" range flagged
 * as hard to read) to 0.875rem — deliberately kept below the general 1rem
 * button minimum, since this control carries a long dynamic phone-number
 * label inside a fixed-width mobile header row; a full 1rem bump measured
 * wider than the typical mobile viewport has room for alongside the logo
 * and menu toggle, which risked the header wrapping to two rows. See the
 * readability-pass report for the reasoning.
 */
.site-header__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 40px;
	padding-inline: var(--bio-space-2);
	border-radius: 0.375rem;
	background: var(--bio-primary);
	color: var(--bio-surface);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.site-header__phone:hover {
	background: var(--bio-primary-hover);
}

.site-header__phone:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.site-header__toggle:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

.site-header__mobile-panel {
	display: none;
	flex-basis: 100%;
	width: 100%;
}

.site-header__mobile-panel.is-open {
	display: block;
	padding-block: 1rem;
	border-top: 1px solid var(--bio-border);
}

.site-header__mobile-panel nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__mobile-panel nav a {
	display: block;
	padding: 0.875rem 0.5rem;
	border-radius: 0.375rem;
	color: var(--bio-text);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.site-header__mobile-panel nav a:hover {
	background: var(--bio-surface-soft);
}

.site-header__mobile-panel nav a:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	/*
	 * Alignment fix: a true three-column grid (logo | nav | actions)
	 * replaces `justify-content: space-between`, so the centre column is
	 * always exactly centred on the page regardless of how wide the logo
	 * and phone-CTA columns are — space-between only balances the *gaps*
	 * between items, not the true centre, which is what let the nav drift
	 * off-centre whenever the logo and CTA widths differed.
	 */
	.site-header__container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		min-height: 112px;
		padding-block: var(--bio-space-4);
	}

	.site-header__logo {
		display: flex;
		justify-self: start;
	}

	/*
	 * Desktop logo grows slightly further to stay proportionate to the
	 * taller header and larger navigation.
	 */
	.site-header__logo img {
		height: 64px;
	}

	.site-header__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		justify-self: center;
	}

	/*
	 * Wrapper is internally centred (both axes) via the flex properties
	 * above, and min-height now matches the phone CTA's exactly (56px) so
	 * the two controls share the same outer height and vertical centre
	 * line. Padding is symmetrical on each axis (top/bottom equal,
	 * left/right equal); vertical padding is deliberately small (0.25rem
	 * each side = 8px total) so it never forces the wrapper taller than
	 * 56px on top of the link's own 48px min-height (56 - 8 = 48, an exact
	 * fit with no conflict/overflow between the two).
	 */
	.site-header__nav {
		min-height: 56px;
		background: var(--bio-primary);
		padding: 0.25rem 0.75rem;
		border-radius: var(--bio-radius-small);
		box-sizing: border-box;
	}

	.site-header__actions {
		justify-self: end;
	}

	/*
	 * Alignment fix: min-height now matches the navigation wrapper exactly
	 * (56px) so both controls share the same outer height and vertical
	 * centre line within the grid row. line-height: 1 (rather than 1.2)
	 * removes the small amount of extra line-box space that could nudge
	 * the label off true centre. Font-size/weight/blue colour/radius/
	 * horizontal padding are unchanged from the approved treatment;
	 * display/align-items/justify-content: center are already set on the
	 * base .site-header__phone rule above.
	 */
	.site-header__actions > .site-header__phone {
		height: auto;
		min-height: 56px;
		padding-inline: 1.75rem;
		border-radius: var(--bio-radius-small);
		font-size: 1.1875rem;
		font-weight: 700;
		line-height: 1;
	}

	.site-header__toggle {
		display: none;
	}

	.site-header__mobile-panel,
	.site-header__mobile-panel.is-open {
		/* Defensively hidden on desktop regardless of the panel's `is-open` state. */
		display: none;
	}
}

/* ==========================================================================
   Site footer
   Global footer rendered by the Bricks Footer template (Entire website
   condition) — see docs/bricks/site-footer.html.
   ========================================================================== */

/*
 * Colour-system refactor: the footer now reads entirely from the global
 * --bio-* tokens (--bio-surface-strong for its dark background,
 * --bio-text-on-dark for full-brightness text/hover states), plus a
 * handful of dimmer text/divider/focus shades derived locally via
 * color-mix() toward --bio-surface-strong or white — so the whole footer
 * recolours automatically whenever the global tokens change, with no
 * hardcoded hex left. These derived custom properties are scoped to
 * `.site-footer` (not :root) since they're only ever used here.
 */
.site-footer {
	--bio-footer-text: color-mix(in srgb, var(--bio-text-on-dark) 75%, var(--bio-footer-bg));
	--bio-footer-text-dim: color-mix(in srgb, var(--bio-text-on-dark) 60%, var(--bio-footer-bg));
	--bio-footer-text-dimmer: color-mix(in srgb, var(--bio-text-on-dark) 50%, var(--bio-footer-bg));
	--bio-footer-divider: color-mix(in srgb, var(--bio-text-on-dark) 15%, var(--bio-footer-bg));
	--bio-footer-focus: color-mix(in srgb, var(--bio-focus) 65%, white);

	background: var(--bio-footer-bg);
	color: var(--bio-footer-text);
}

.site-footer__container {
	width: 100%;
	max-width: var(--bio-content-width);
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.site-footer__main .site-footer__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bio-space-6);
	padding-block: var(--bio-space-7);
}

@media (min-width: 768px) {
	.site-footer__main .site-footer__container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.site-footer__main .site-footer__container {
		grid-template-columns: 2fr 1fr 1fr;
		gap: var(--bio-space-6);
	}
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--bio-space-3);
}

.site-footer__logo {
	display: inline-flex;
	align-items: center;
}

.site-footer__logo img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.site-footer__description {
	max-width: 32rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bio-footer-text-dim);
}

.site-footer__heading {
	margin: 0 0 var(--bio-space-4);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--bio-text-on-dark);
}

.site-footer__nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__nav a {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--bio-footer-text);
	font-size: 1rem;
	text-decoration: none;
}

.site-footer__nav a:hover {
	color: var(--bio-text-on-dark);
	text-decoration: underline;
}

.site-footer__nav a:focus-visible {
	outline: 2px solid var(--bio-footer-focus);
	outline-offset: 2px;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.site-footer__contact-link {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--bio-footer-text);
	font-size: 1rem;
	text-decoration: none;
}

.site-footer__contact-link:hover {
	color: var(--bio-text-on-dark);
	text-decoration: underline;
}

.site-footer__contact-link:focus-visible {
	outline: 2px solid var(--bio-footer-focus);
	outline-offset: 2px;
}

.site-footer__area {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--bio-footer-text-dim);
}

.site-footer__bottom {
	border-top: 1px solid var(--bio-footer-divider);
}

.site-footer__bottom .site-footer__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: var(--bio-space-4);
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.875rem;
	color: var(--bio-footer-text-dimmer);
}

.site-footer__privacy-link {
	font-size: 0.875rem;
	color: var(--bio-footer-text);
	text-decoration: none;
}

.site-footer__privacy-link:hover {
	color: var(--bio-text-on-dark);
	text-decoration: underline;
}

.site-footer__privacy-link:focus-visible {
	outline: 2px solid var(--bio-footer-focus);
	outline-offset: 2px;
}

/*
 * Polish pass, mobile only: the footer reads noticeably smaller at narrow
 * widths than the rest of the page. Logo, body text, and link sizing are
 * bumped up and the three content groups (brand, nav, contact) get more
 * room to breathe when stacked in a single column; the legal row switches
 * to a stacked layout so it doesn't feel cramped at ~390px. Structure,
 * content, colors, and the desktop/tablet layout are all unchanged.
 */
@media (max-width: 767px) {
	.site-footer__logo img {
		height: 52px;
	}

	.site-footer__main .site-footer__container {
		gap: var(--bio-space-7);
	}

	.site-footer__description {
		font-size: 1.0625rem;
	}

	.site-footer__heading {
		font-size: 1.0625rem;
		margin-bottom: var(--bio-space-3);
	}

	.site-footer__nav ul,
	.site-footer__contact {
		gap: 0.5rem;
	}

	.site-footer__nav a,
	.site-footer__contact-link {
		font-size: 1.0625rem;
		padding-block: 0.625rem;
	}

	.site-footer__area {
		font-size: 1rem;
	}

	.site-footer__bottom .site-footer__container {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--bio-space-2);
	}

	.site-footer__copyright,
	.site-footer__privacy-link {
		font-size: 0.9375rem;
	}
}

/* ==========================================================================
   Homepage
   Structural launch styling for the Pradžia static homepage template.
   See docs/bricks/homepage/homepage-reference.html. The catalogue teaser section reuses the
   existing .equipment-grid / .equipment-card component as-is.
   ========================================================================== */

/*
 * Colour-system refactor: the Homepage previously shadowed --bio-primary /
 * --bio-primary-hover / --bio-surface-soft / --bio-text / --bio-border to a
 * slightly different palette scoped just to `.home-page`, and gave its own
 * phone CTA a one-off blue distinct from the rest of the site. Both are
 * gone now — those exact values are the sitewide :root defaults, and the
 * phone CTA reads the same shared --bio-primary/--bio-primary-hover as
 * every other page's phone button, so the Homepage no longer needs any
 * colour override of its own; every rule below reads colour straight from
 * the global tokens.
 *
 * Token-wiring audit: `.home-page` itself now owns the shared page-canvas
 * background (--bio-page-bg) directly, rather than relying on `body`'s own
 * background showing through — this is what a theme's continuous-canvas
 * override (see themes.css) actually targets, instead of repeating this
 * selector per theme.
 */
.home-page {
	background: var(--bio-page-bg);
}

.home-page__container {
	width: 100%;
	max-width: var(--bio-content-width);
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/*
 * Visual Stage 2A (Homepage Hero only). Structure, CTA links, image, and
 * responsive stacking order are unchanged — only visual hierarchy (type
 * scale, color tokens, column alignment) is refined. The removed
 * hero-only 1400px container override lets Hero use the same
 * --bio-content-width as every other section ("use the container
 * deliberately" rather than a one-off exception).
 */
/*
 * Visual rescue (round 2): Hero gets an explicit, distinctly green
 * background (--bio-surface-soft) instead of relying on the barely-visible
 * page-level --bio-surface-alt showing through — this is the section that
 * must read as the strongest on the page, so it needs its own clear
 * identity, not a near-white non-decision.
 */
.home-page__hero {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface-soft);
}

.home-page__hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bio-space-5);
}

@media (min-width: 768px) {
	.home-page__hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		align-items: start;
	}
}

/*
 * fr units, not percentages: raw percentage tracks summing to 100% plus a
 * column gap is a confirmed overflow bug elsewhere in this codebase (the
 * gap gets added on top of the already-100%-wide tracks). 4fr/5fr keeps
 * the same ~44/56 proportion the old "45% 55%" intended, safely.
 */
@media (min-width: 1024px) {
	.home-page__hero-grid {
		grid-template-columns: 4fr 5fr;
		align-items: center;
	}
}

.home-page__hero-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bio-space-3);
	text-align: left;
}

.home-page__eyebrow {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bio-text-muted);
}

/*
 * Scoped to the Hero instance only — .home-page__eyebrow itself is shared
 * with the About and Service Area sections (out of scope this stage), so
 * its base rule directly above is left exactly as it was; this descendant
 * selector overrides color/weight for the Hero's eyebrow specifically,
 * without touching how it renders in About/Service Area.
 */
.home-page__hero-content .home-page__eyebrow {
	color: var(--bio-primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

/* Visual rescue (round 2): pushed noticeably larger/tighter — this must
   read as the dominant element on the page. */
.home-page__hero-title {
	margin: 0;
	font-size: clamp(2.75rem, 5vw, 4.5rem);
	line-height: 1.05;
	color: var(--bio-text);
}

/*
 * Full --bio-text instead of --bio-text-muted: the muted token is
 * deliberately lower-contrast for secondary copy, which is exactly what
 * made the Hero intro read as weak. Size increased too.
 */
.home-page__hero-text {
	max-width: 36rem;
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--bio-text);
}

.home-page__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bio-space-3);
	margin-top: var(--bio-space-3);
}

/*
 * Visual rescue (round 2): the Hero's phone/secondary buttons are the
 * shared cross-page CTA button component (also used by Equipment Single,
 * Services, Contact) — that shared rule itself is intentionally left
 * alone so those other pages don't change. This descendant selector
 * overrides size/padding only for the buttons inside Hero's own action
 * wrapper, giving Hero a bigger, more confident CTA without touching the
 * shared component or any other page.
 */
.home-page__hero-actions .home-page__cta-phone,
.home-page__hero-actions .home-page__cta-secondary {
	padding: var(--bio-space-3) var(--bio-space-5);
	border-radius: var(--bio-radius-small);
	font-size: 1.0625rem;
}

/* Visual Stage 2B: same image treatment as About/Projects — see the note
   near .home-page__about-media below. */
.home-page__hero-media {
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bio-radius-large);
	border: 1px solid var(--bio-border);
	box-shadow: 0 1px 2px rgba(var(--bio-shadow-color), 0.06), 0 10px 30px rgba(var(--bio-shadow-color), 0.08);
	background: var(--bio-surface-soft);
}

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

/*
 * Visual rescue (round 2): Trust previously leaned on a hairline top
 * border for separation from Hero — now that Hero has its own distinct
 * green background, the white-vs-green contrast alone is a much stronger
 * seam, so the hairline is dropped (per the instruction to rely on
 * background changes rather than divider lines). Padding, heading, and
 * body sizes are all bumped up; a CSS-only numbered badge (via
 * counter-increment/::before, no HTML change, no icon library) gives each
 * item a clear visual anchor instead of disappearing into plain text.
 */
.home-page__trust {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface);
}

.home-page__trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bio-space-6);
	counter-reset: bio-trust-item;
}

@media (min-width: 768px) {
	.home-page__trust-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Subtle divider between columns at wider widths only — mobile stacks
	   with no divider, avoiding any awkward horizontal rule between rows. */
	.home-page__trust-item:not(:first-child) {
		border-left: 1px solid var(--bio-border);
		padding-left: var(--bio-space-4);
	}
}

/*
 * Mobile/tablet gap increased (was space-3) for more breathing room between
 * badge/heading/text now that all three are larger below 1024px too; the
 * 1024px+ override further down (space-5) is unchanged from before.
 */
.home-page__trust-item {
	display: flex;
	flex-direction: column;
	gap: var(--bio-space-4);
	counter-increment: bio-trust-item;
}

/*
 * Extra breathing room at 1024px+ specifically, since the badge grows
 * substantially larger there (see .home-page__trust-item::before below) and
 * needs more clearance before the heading than the smaller tablet/mobile
 * badge does.
 */
@media (min-width: 1024px) {
	.home-page__trust-item {
		gap: var(--bio-space-5);
	}
}

/*
 * Readability pass: badge substantially enlarged at every breakpoint —
 * 3.75rem mobile (was 3.25rem), 4rem tablet from 768px+, 4.5rem desktop
 * from 1024px+ (unchanged from before). Set directly here in the shared
 * base rule (not theme-scoped) so every theme benefits uniformly, per the
 * "prefer shared typography tokens" guidance — the Warm Earthworks theme
 * override further down only changes colour.
 */
.home-page__trust-item::before {
	content: counter(bio-trust-item);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin-bottom: var(--bio-space-3);
	border-radius: 50%;
	background: var(--bio-primary);
	color: var(--bio-surface);
	font-size: 1.375rem;
	font-weight: 700;
}

@media (min-width: 768px) {
	.home-page__trust-item::before {
		width: 4rem;
		height: 4rem;
	}
}

/*
 * Desktop-only further increase (unchanged from before): 4.5rem/1.5rem
 * font, well past the tablet/mobile sizes above.
 */
@media (min-width: 1024px) {
	.home-page__trust-item::before {
		width: 4.5rem;
		height: 4.5rem;
		font-size: 1.5rem;
	}
}

/*
 * Mobile/tablet heading scale — 1.5rem mobile, 1.625rem tablet from
 * 768px+. font-weight: 700 applies at every breakpoint from this one
 * declaration. The 1024px+ override further down (1.75rem/1.25) is
 * unchanged from before.
 */
.home-page__trust-heading {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--bio-text);
}

@media (min-width: 768px) {
	.home-page__trust-heading {
		font-size: 1.625rem;
	}
}

@media (min-width: 1024px) {
	.home-page__trust-heading {
		font-size: 1.75rem;
		line-height: 1.25;
	}
}

/*
 * Mobile/tablet supporting-text scale — 1.0625rem mobile, 1.125rem tablet
 * from 768px+ (line-height bumped to 1.6 at both, was 1.55). The 1024px+
 * override further down is unchanged from before (already 1.125rem/1.6).
 */
.home-page__trust-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

@media (min-width: 768px) {
	.home-page__trust-text {
		font-size: 1.125rem;
	}
}

@media (min-width: 1024px) {
	.home-page__trust-text {
		font-size: 1.125rem;
		line-height: 1.6;
	}
}

/*
 * Visual Stage 2B. Section-rhythm background alternates --bio-surface-alt /
 * --bio-surface down the page (see the "Section rhythm" note near
 * .home-page__cta below for the full sequence) so sections are easier to
 * tell apart at a glance without heavy dividers or cards.
 */
/*
 * Visual rescue (round 2): About previously read as a generic two-column
 * content block. It's now a distinct warm-neutral section containing a
 * single white "panel" — reusing the existing .home-page__about-grid
 * wrapper itself as the panel (no new HTML), so the text and image sit
 * together as one designed, contained composition rather than two loose
 * columns directly on the page background. The hairline border previously
 * separating Trust from About is dropped — the section's own distinct
 * background is now the separator.
 */
.home-page__about {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface-alt);
}

.home-page__about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	box-sizing: border-box;
	padding: var(--bio-space-4);
	background: var(--bio-panel-bg);
	border: 1px solid var(--bio-border);
	border-radius: var(--bio-radius-large);
	box-shadow: 0 1px 2px rgba(var(--bio-shadow-color), 0.05), 0 12px 32px rgba(var(--bio-shadow-color), 0.06);
}

@media (min-width: 768px) {
	.home-page__about-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		align-items: center;
		padding: var(--bio-space-6);
	}
}

/*
 * Give the photo a bit more presence at desktop, echoing the Hero's own
 * asymmetric (not 50/50) split, now that images are meant to read as more
 * than an equal-weight afterthought. Tablet (768–1023px) keeps the even
 * 1fr/1fr split from above — only this one breakpoint changes.
 * Deliberately fr units, not percentages: raw percentage tracks that sum
 * to 100% plus a column gap caused a confirmed overflow bug elsewhere in
 * this codebase (Installation/Assessment/Maintenance/Service Area), since
 * the gap gets added on top of the already-100%-wide tracks. Plain fr
 * units divide only the space left after the gap, so this can't overflow.
 */
@media (min-width: 1024px) {
	.home-page__about-grid {
		grid-template-columns: 3fr 4fr;
	}
}

.home-page__about-content {
	display: flex;
	flex-direction: column;
	gap: var(--bio-space-3);
}

/* Same "more intentional eyebrow" treatment as the Hero — scoped to this
   section's eyebrow only; the shared .home-page__eyebrow base rule (used
   by Hero/About/Service Area) is untouched. */
.home-page__about-content .home-page__eyebrow {
	color: var(--bio-primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

/*
 * The image now sits inside the white panel above rather than directly on
 * the page background, so it no longer needs its own border/shadow (that
 * would stack two shadows and read as heavy) — just the rounded corners.
 * Radius is slightly smaller than the panel's own so the image reads as
 * nested within it rather than competing with it.
 */
.home-page__about-media {
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bio-radius-small);
	background: var(--bio-surface-soft);
}

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

/*
 * Visual rescue (round 2): the two cards previously used a section
 * background (white) almost identical to their own card background,
 * which is exactly why they "almost disappeared into the page." Inverted
 * now — a distinctly green section background with pure-white cards on
 * top, giving real contrast. Hairline border dropped in favor of this
 * much stronger background-driven separation from About.
 */
.home-page__services {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface-soft);
}

/*
 * Visual Stage 2B: this is the shared section-heading/intro-text pair used
 * by About, Services, Catalogue, Process, and Service Area on the Homepage
 * only (Services/Contact pages use their own separately-named
 * .services-page__section-heading / .contact-page__section-heading, so
 * this change cannot leak into them). Stronger, clearly-scaled H2 plus a
 * more readable, muted-but-legible intro paragraph — the two biggest
 * "text feels small/weak" offenders on the page.
 */
.home-page__section-heading {
	margin: 0 0 var(--bio-space-4);
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--bio-text);
}

.home-page__section-text {
	max-width: 40rem;
	margin: 0 0 var(--bio-space-4);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.home-page__service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bio-space-5);
}

@media (min-width: 768px) {
	.home-page__service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Visual rescue (round 2): pure white card surface (was
 * --bio-surface-alt, too close to the old white section — see the note on
 * .home-page__services above) against the now-green section, with a
 * restrained 3px primary-color top rule as the "accent" the brief asked
 * for, instead of an icon. Padding/gap increased for a substantial,
 * confident card rather than a shallow box. Hover-lift mirrors the
 * existing .equipment-card pattern elsewhere in this file (same timing,
 * palette-tinted shadow). Homepage-only class, safe to restyle
 * independently of any other page.
 */
.home-page__service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
	gap: var(--bio-space-2);
	padding: var(--bio-space-5);
	border: 1px solid var(--bio-border);
	border-top: 3px solid var(--bio-primary);
	border-radius: var(--bio-radius-large);
	box-shadow: 0 1px 2px rgba(var(--bio-shadow-color), 0.05);
	background: var(--bio-card-bg);
	text-align: left;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.home-page__service-card:hover {
	box-shadow: 0 4px 16px rgba(var(--bio-shadow-color), 0.1);
	transform: translateY(-2px);
}

.home-page__service-title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--bio-text);
}

.home-page__service-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--bio-text-muted);
}

/*
 * Outlined button (bigger than before) instead of a plain text link —
 * reuses the site's existing secondary-button color logic (--bio-primary
 * border/text, --bio-surface-soft hover fill, --bio-focus outline; see the
 * shared CTA button component earlier in this file) rather than inventing
 * a new button style. The "→" is CSS content, not a new HTML element or
 * icon library. Homepage-only class; the shared CTA button rule itself is
 * untouched.
 */
.home-page__service-link {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--bio-primary);
	border-radius: var(--bio-radius-small);
	font-size: 1rem;
	font-weight: 600;
	color: var(--bio-primary);
	text-decoration: none;
}

.home-page__service-link::after {
	content: "\2192";
}

.home-page__service-link:hover {
	background: var(--bio-surface-soft);
}

.home-page__service-link:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

/*
 * Visual continuation: Process is a numbered-item list, the same
 * component language as Trust above — its background now matches Trust's
 * white (was the same neutral tone as About/neighbours, making it blend
 * in), and its numbered-circle badge is resized to match Trust's exactly,
 * so the two read as one consistent "numbered item" pattern used twice on
 * the page. Layout (1 col mobile, 2 tablet, 4 desktop) is unchanged.
 */
.home-page__process {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface);
}

.home-page__process-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bio-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.home-page__process-list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--bio-space-5);
	}
}

@media (min-width: 1024px) {
	.home-page__process-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.home-page__process-step {
	display: flex;
	flex-direction: column;
	gap: var(--bio-space-4);
}

/*
 * Polish pass: steps stack in a single column below 768px, so a hairline
 * divider (rather than a card border) reads as a clear step-by-step
 * sequence without turning each step into a boxed card. Tablet/desktop
 * already separate steps visually via the grid gap and column layout, so
 * the divider is scoped to the mobile single-column case only.
 */
@media (max-width: 767px) {
	.home-page__process-step:not(:last-child) {
		padding-bottom: var(--bio-space-6);
		border-bottom: 1px solid var(--bio-border);
	}
}

/*
 * Readability pass: substantially enlarged (was 2.5rem) — same 3.25rem/
 * 3.5rem scale as the Trust badge above, set in the shared base rule so
 * every theme benefits uniformly.
 */
.home-page__process-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--bio-primary);
	color: var(--bio-surface);
	font-size: 1.375rem;
	font-weight: 700;
}

@media (min-width: 1024px) {
	.home-page__process-number {
		width: 3.5rem;
		height: 3.5rem;
	}
}

.home-page__process-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--bio-text);
}

.home-page__process-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--bio-text-muted);
}

/*
 * Compact teaser grid: builds on the Equipment Archive's own .equipment-card
 * component (image on top, body below, same colours/link/radius/shadow) with
 * a smaller type scale and tighter body padding, so this reads as a
 * compact catalogue preview rather than the Archive's card at full size.
 * Every rule below is scoped through ".home-page__catalogue" so it only
 * ever matches this teaser instance; the Equipment Archive/Single page's
 * own .equipment-grid/.equipment-card rendering is untouched.
 */
.home-page__catalogue {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface-soft);
}

/*
 * 1 column mobile, 2 tablet (768px+), 3 desktop (1024px+) — mobile-first
 * ladder at the project's standard breakpoints. Higher specificity than the
 * shared .equipment-grid rule (and its own max-width media queries)
 * guarantees this wins at every breakpoint without needing to duplicate
 * those queries here. fr units only (equal-width tracks at every column
 * count, no percentages), so this can't hit the percentage-plus-gap
 * overflow issue. Gap is set once here, explicitly, rather than left to
 * inherit from the shared rule, so it stays the same fixed value across
 * all three column counts. The Query Loop repeats .equipment-card as a
 * child of this grid, so any number of cards reflows into these columns
 * without further changes here.
 */
.home-page__catalogue .equipment-grid {
	grid-template-columns: 1fr;
	gap: var(--bio-space-5);
}

@media (min-width: 768px) {
	.home-page__catalogue .equipment-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.home-page__catalogue .equipment-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/*
 * Trimmed down from the Archive's own card proportions: this is a smaller
 * teaser preview (3-up rather than the Archive's occasional 2-up), so a
 * tighter body and a slightly smaller type scale keep each card compact
 * rather than looking like an undersized copy of the Archive's card. Image/
 * colours/link/radius/shadow are all still inherited from .equipment-card
 * unmodified. The excerpt is clamped to 2 lines so cards stay a uniform,
 * scannable height regardless of how long an individual product's excerpt
 * is — matters more here than on the Archive since more items can land in
 * the same row as the catalogue grows.
 */
.home-page__catalogue .equipment-card__body {
	padding: var(--bio-space-3);
	gap: var(--bio-space-1);
}

.home-page__catalogue .equipment-card__title {
	font-size: 1.0625rem;
}

.home-page__catalogue .equipment-card__excerpt {
	font-size: 1.0625rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Standalone button below the grid — previously a bar fused to the bottom
 * of a single featured card, which no longer applies now that the section
 * shows a multi-card grid instead of one large card.
 */
.home-page__catalogue-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	width: fit-content;
	margin-inline: auto;
	margin-top: var(--bio-space-5);
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--bio-primary);
	border-radius: var(--bio-radius-small);
	font-size: 1rem;
	font-weight: 600;
	color: var(--bio-primary);
	text-decoration: none;
}

.home-page__catalogue-link::after {
	content: "\2192";
}

.home-page__catalogue-link:hover {
	background: var(--bio-surface-soft);
	text-decoration: none;
}

.home-page__catalogue-link:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

.home-page__projects {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface-alt);
}

.home-page__projects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bio-space-5);
}

@media (min-width: 768px) {
	.home-page__projects-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Already matches the established image-treatment language (border/
   shadow/radius/soft gutter, same as Hero/About) from the previous round —
   only the grid gap above was increased for more breathing room; the media
   frame itself needed no further change to stay consistent. */
.home-page__project-media {
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bio-radius-large);
	border: 1px solid var(--bio-border);
	box-shadow: 0 1px 2px rgba(var(--bio-shadow-color), 0.06), 0 10px 30px rgba(var(--bio-shadow-color), 0.08);
	background: var(--bio-surface-soft);
}

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

.home-page__testimonials {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface);
}

/* Wrapper-level heading only — the Swiper slider internals below remain
   untouched (already tested for layout/a11y behavior; out of scope here). */
.home-page__testimonials-heading {
	margin: 0 0 var(--bio-space-5);
	text-align: center;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--bio-text);
}

/*
 * .home-page__testimonials-slider wraps the native Bricks "Testimonials"
 * element (see docs/bricks/homepage/testimonials.html), which renders as a
 * Swiper slider. Card padding, avatar size, and typography/colors are
 * configured via that element's own Bricks settings (see the recommended
 * settings in docs/CLIENT_QUESTIONS_AND_RECOMMENDATIONS.md); the rules below
 * only fix layout/overlap issues in Bricks' generated Swiper markup, scoped
 * under this wrapper class rather than applied globally.
 */
.home-page__testimonials-slider {
	margin-top: var(--bio-space-5);
	max-width: 100%;
	overflow: visible;
}

.home-page__testimonials-slider .swiper-wrapper {
	align-items: stretch;
}

.home-page__testimonials-slider .swiper-slide {
	height: auto;
}

.home-page__testimonials-slider .repeater-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	align-items: flex-start;
	text-align: left;
	cursor: pointer;
}

.home-page__testimonials-slider .repeater-item:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

/*
 * Actual rendered markup (inspected on the live Bricks Testimonials output):
 * .repeater-item > blockquote.testimonial-content-wrapper (quote) +
 * div.testimonial-meta-wrapper (avatar + .testimonial-meta-data > name/title).
 * The DOM order is quote-then-author; these order values flip the visual
 * order to author-then-quote without touching the DOM itself.
 */
.home-page__testimonials-slider .testimonial-meta-wrapper {
	order: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

/*
 * font-size/line-height/color set here are inherited by the quote text
 * inside — a safe way to strengthen "quote hierarchy" without guessing at
 * or touching Bricks' own inner markup (only .testimonial-content-wrapper
 * and .testimonial-meta-wrapper are confirmed from the live rendered
 * output — see the comment above). Meta (name/source label) is
 * deliberately left untouched: its internal name-vs-label contrast is
 * controlled by Bricks' own element settings, and guessing at it here
 * risks flattening that hierarchy rather than improving it.
 */
.home-page__testimonials-slider .testimonial-content-wrapper {
	order: 2;
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	width: 100%;
	margin-top: var(--bio-space-4);
	text-align: left;
	font-size: 1.25rem;
	line-height: 1.65;
	color: var(--bio-text);
}

.home-page__testimonials-slider .swiper-pagination {
	display: flex !important;
	justify-content: center;
	align-items: center;
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	transform: none !important;
	margin-top: 1.5rem;
}

.home-page__testimonials-slider .bricks-swiper-button-prev,
.home-page__testimonials-slider .bricks-swiper-button-next {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
}

/*
 * Polish pass: -3rem previously pushed the arrows past the container's own
 * 1.25rem padding at viewport widths between 1024px and roughly 1300px
 * (before the 1200px-max container has enough outside margin to absorb the
 * offset), clipping them at the browser edge. -1rem stays inside the
 * container's padding at every width from 1024px up, so the arrows are
 * always fully visible.
 */
.home-page__testimonials-slider .bricks-swiper-button-prev {
	left: -1rem;
}

.home-page__testimonials-slider .bricks-swiper-button-next {
	right: -1rem;
}

@media (max-width: 1023px) {
	.home-page__testimonials-slider {
		padding-inline: 2.75rem;
	}

	.home-page__testimonials-slider .swiper-wrapper {
		align-items: flex-start;
	}

	.home-page__testimonials-slider .swiper-slide {
		height: auto !important;
	}

	.home-page__testimonials-slider .repeater-item {
		height: auto;
		min-height: 0;
	}

	.home-page__testimonials-slider .testimonial-content-wrapper {
		flex-grow: 0;
		min-height: 0;
	}

	.home-page__testimonials-slider .bricks-swiper-button-prev,
	.home-page__testimonials-slider .bricks-swiper-button-next {
		width: 2.25rem;
		height: 2.25rem;
	}

	.home-page__testimonials-slider .bricks-swiper-button-prev {
		left: 0.5rem;
	}

	.home-page__testimonials-slider .bricks-swiper-button-next {
		right: 0.5rem;
	}
}

@media (max-width: 767px) {
	.home-page__testimonials-slider {
		padding-inline: 0;
	}

	/*
	 * Bricks' own frontend CSS sets ".swiper-button { display: flex !important; }"
	 * inside its own "@layer bricks". Per the CSS cascade-layers spec, !important
	 * declarations in a named layer always beat !important declarations in an
	 * unlayered stylesheet (this file), regardless of specificity or source
	 * order. Rejoining the same "bricks" layer here lets normal specificity
	 * (our two-class selector vs. Bricks' one-class selector) decide instead.
	 */
	@layer bricks {
		.home-page__testimonials-slider .bricks-swiper-button-prev,
		.home-page__testimonials-slider .bricks-swiper-button-next {
			display: none !important;
		}
	}

	.home-page__testimonials-slider .swiper-pagination {
		margin-top: 1rem;
	}
}

.home-page__area {
	padding-block: var(--bio-space-7);
	background: var(--bio-surface-alt);
}

/*
 * Service Area is a structurally identical component on the Homepage,
 * Services page, and Contact page — same eyebrow + H2 + paragraph content
 * column, same location-list column, same breakpoint. Grouped here (rather
 * than duplicated separately per page) so all three stay synchronized
 * instead of drifting into independently-maintained copies of the same
 * responsive behavior. See docs/bricks/homepage/service-area.html,
 * docs/bricks/services/service-area.html, and
 * docs/bricks/contact/service-area.html.
 */
.home-page__area-grid,
.services-page__area-grid,
.contact-page__area-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.home-page__area-grid,
	.services-page__area-grid,
	.contact-page__area-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
		gap: 2.5rem;
		align-items: start;
	}
}

.home-page__area-content,
.services-page__area-content,
.contact-page__area-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.home-page__area-text,
.services-page__area-text,
.contact-page__area-text {
	max-width: 42rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.home-page__area-list,
.services-page__area-list,
.contact-page__area-list {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.home-page__area-list li,
.services-page__area-list li,
.contact-page__area-list li {
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--bio-border);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--bio-text);
}

.home-page__area-list li:last-child,
.services-page__area-list li:last-child,
.contact-page__area-list li:last-child {
	border-bottom: none;
}

/*
 * Homepage-scoped overrides — typography sizing only now. The shared
 * `.home-page__area-*` base rules above already read var(--bio-text-muted)
 * / var(--bio-text) / var(--bio-border) directly (Colour-system refactor),
 * so the colour re-declarations that used to live here were redundant and
 * have been removed; only the Homepage's own larger type scale remains.
 */
.home-page__area .home-page__area-content {
	gap: var(--bio-space-4);
}

.home-page__area .home-page__area-text {
	font-size: 1.0625rem;
}

.home-page__area-content .home-page__eyebrow {
	color: var(--bio-primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

/*
 * Services-scoped Service Area bump — same base type-scale increase as the
 * Homepage's own override immediately above, so both pages' Service Area
 * sections read at the same strength.
 */
.services-page__area .services-page__area-content {
	gap: var(--bio-space-4);
}

.services-page__area .services-page__area-text {
	font-size: 1.0625rem;
}

/*
 * Full section-rhythm sequence (backgrounds alternate so adjacent
 * sections are always visually distinct — no two neighbours share a
 * tone): Hero (surface-soft) → Trust (surface) → About (background, white
 * panel inside) → Services (surface-soft, white cards) → Process
 * (surface) → Catalogue (surface-soft) → Projects (background) →
 * Testimonials (surface) → Service Area (background) → CTA
 * (surface-soft, deliberately the same "important zone" tone as
 * Hero/Services to bookend the page).
 */
.home-page__cta {
	padding-block: var(--bio-space-7);
	background: var(--bio-strong-section-bg);
	text-align: center;
}

/*
 * The heading + form now sit inside a contained white panel — the same
 * pattern already established for About — rather than loose content
 * directly on the green section background, so the final enquiry area
 * reads as a clear, deliberate page conclusion rather than a plain
 * afterthought.
 */
.home-page__cta .home-page__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bio-space-5);
	max-width: 48rem;
	box-sizing: border-box;
	padding: var(--bio-space-5);
	background: var(--bio-surface);
	border: 1px solid var(--bio-border);
	border-radius: var(--bio-radius-large);
	box-shadow: 0 1px 2px rgba(var(--bio-shadow-color), 0.05), 0 12px 32px rgba(var(--bio-shadow-color), 0.06);
}

@media (min-width: 768px) {
	.home-page__cta .home-page__container {
		padding: var(--bio-space-6);
	}
}

/* Stronger, clearly-scaled heading (previously relied entirely on the
   browser/Bricks default H2 style) so the final CTA reads as a deliberate,
   important zone rather than an afterthought. */
.home-page__cta-heading {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--bio-text);
}

.home-page__cta-form {
	width: 100%;
	max-width: 48rem;
	text-align: left;
}

/*
 * Native Bricks Form internals below (.form-group, label, .submit-button-wrapper,
 * .bricks-button) are inspected on the live rendered output, not guessed. Bricks'
 * own rules for .form-group/label/.submit-button-wrapper are wrapped in
 * :where(...) (zero specificity), and .bricks-button carries no !important, so a
 * plain scoped override here is enough — no @layer trick needed (unlike the
 * Testimonials Swiper case). The Contact page's Form element (docs/bricks/contact/CONTACT_QA.md)
 * uses the exact same field set, submit action, and messages as this Homepage
 * form, so its control styling (.contact-page__form ...) is grouped alongside
 * .home-page__cta-form's below rather than duplicated — but the two forms'
 * outer layout wrappers (.home-page__cta-form itself, above, vs.
 * .contact-page__form, in the Contact block) stay separate, since one sits
 * centered in a narrow CTA block and the other fills a grid column. Scoping
 * every rule under these two form classes keeps it local to just these form
 * instances; .bricks-button itself is never touched unscoped, so no other
 * Bricks button on the site is affected.
 *
 * Design Foundation Stage 1: border/text/surface/focus colors below now use
 * the approved BioGrunta tokens (docs/DESIGN_SYSTEM.md). The submit button's
 * background was previously left to Bricks' own native button styling —
 * it now gets an explicit brand color here too, still scoped only to these
 * two form instances. The success/error message color rules
 * (.message.success / .message.error) assume Bricks' documented convention
 * of adding a "success" or "error" modifier class to the message element;
 * this has not been independently re-verified against the live rendered
 * output yet — flag for confirmation during the next browser QA pass.
 */
.home-page__cta-form .form-group label,
.contact-page__form .form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--bio-text);
}

.home-page__cta-form input[type="text"],
.home-page__cta-form input[type="email"],
.home-page__cta-form input[type="tel"],
.home-page__cta-form textarea,
.contact-page__form input[type="text"],
.contact-page__form input[type="email"],
.contact-page__form input[type="tel"],
.contact-page__form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--bio-border);
	border-radius: 0.375rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--bio-text);
	background: var(--bio-field-bg);
}

.home-page__cta-form input[type="text"],
.home-page__cta-form input[type="email"],
.home-page__cta-form input[type="tel"],
.contact-page__form input[type="text"],
.contact-page__form input[type="email"],
.contact-page__form input[type="tel"] {
	height: 44px;
}

.home-page__cta-form textarea,
.contact-page__form textarea {
	min-height: 120px;
	resize: vertical;
}

.home-page__cta-form input::placeholder,
.home-page__cta-form textarea::placeholder,
.contact-page__form input::placeholder,
.contact-page__form textarea::placeholder {
	color: var(--bio-text-muted);
	opacity: 0.8;
}

.home-page__cta-form input:focus-visible,
.home-page__cta-form textarea:focus-visible,
.contact-page__form input:focus-visible,
.contact-page__form textarea:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
	border-color: var(--bio-focus);
}

.home-page__cta-form .form-group-error-message,
.contact-page__form .form-group-error-message {
	margin-top: 0.375rem;
	border-radius: 0.375rem;
	font-size: 0.9375rem;
	color: var(--bio-error);
}

.home-page__cta-form .submit-button-wrapper,
.contact-page__form .submit-button-wrapper {
	width: 100%;
}

.home-page__cta-form button[type="submit"],
.contact-page__form button[type="submit"] {
	width: 100%;
	height: 44px;
	border-radius: 0.375rem;
	background: var(--bio-primary);
	color: var(--bio-surface);
}

.home-page__cta-form button[type="submit"]:hover,
.contact-page__form button[type="submit"]:hover {
	background: var(--bio-primary-hover);
}

.home-page__cta-form button[type="submit"]:focus-visible,
.contact-page__form button[type="submit"]:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}

.home-page__cta-form .message,
.contact-page__form .message {
	margin-top: 1rem;
	border-radius: 0.375rem;
}

.home-page__cta-form .message.success,
.contact-page__form .message.success {
	color: var(--bio-success);
}

.home-page__cta-form .message.error,
.contact-page__form .message.error {
	color: var(--bio-error);
}

/*
 * Homepage-only field-size increase. The shared rule above intentionally
 * stays untouched (it's also .contact-page__form's styling, and the
 * Contact page is out of scope this round) — these compound selectors
 * (".home-page__cta .home-page__cta-form ...") are more specific and only
 * ever match the Homepage's own form instance, giving it bigger, more
 * substantial fields to match the panel it now sits in above.
 */
.home-page__cta .home-page__cta-form .form-group label {
	margin-bottom: var(--bio-space-1);
	font-size: 0.9375rem;
}

.home-page__cta .home-page__cta-form input[type="text"],
.home-page__cta .home-page__cta-form input[type="email"],
.home-page__cta .home-page__cta-form input[type="tel"],
.home-page__cta .home-page__cta-form textarea {
	padding: 0.875rem 1rem;
	font-size: 1rem;
}

.home-page__cta .home-page__cta-form input[type="text"],
.home-page__cta .home-page__cta-form input[type="email"],
.home-page__cta .home-page__cta-form input[type="tel"] {
	height: 52px;
}

.home-page__cta .home-page__cta-form button[type="submit"] {
	height: 52px;
	font-size: 1.0625rem;
	font-weight: 600;
}

/* ==========================================================================
   Services page
   Structural launch styling for the Paslaugos static page template.
   See docs/bricks/services/services-reference.html. Values mirror the
   Homepage's established container/hero/CTA/process/media patterns under a
   page-scoped prefix, following the same per-page-namespace convention
   already used for Homepage/Equipment Archive/Equipment Single — no new
   colors, type scale, radii, or shadows are introduced here.
   ========================================================================== */

.services-page__container {
	width: 100%;
	max-width: var(--bio-content-width);
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.services-page__hero {
	padding-block: 3rem;
}

.services-page__hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.services-page__hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		align-items: center;
	}
}

/*
 * Was `45% 55%` — percentage tracks plus a fixed gap add up to over 100% of
 * the container, causing horizontal overflow. Switched to the same
 * minmax(0, 3fr) minmax(0, 5fr) proportion already used by the
 * Installation/Assessment/Maintenance two-column sections below, so every
 * two-column layout on this page shares one consistent ratio and none of
 * them can overflow.
 */
@media (min-width: 1024px) {
	.services-page__hero-grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
	}
}

.services-page__hero-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	text-align: left;
}

.services-page__eyebrow {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bio-text-muted);
}

/*
 * Hero and Service Area eyebrow — same bump as the Homepage's own Hero/
 * About/Service Area eyebrows (see .home-page__hero-content .home-page__
 * eyebrow above): colored, bolder, slightly larger than the shared base
 * rule. Scoped per-section like the Homepage so the base rule itself stays
 * untouched for any future plain use.
 */
.services-page__hero-content .services-page__eyebrow,
.services-page__area-content .services-page__eyebrow {
	color: var(--bio-primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

/*
 * Hero H1/supporting text brought up to the Homepage's own Hero scale
 * (same base clamp/line-height/size the Homepage Hero uses) — this page's
 * hero previously matched Equipment Single's smaller "page title" scale,
 * which read as noticeably weaker than the Homepage.
 */
.services-page__hero-title {
	margin: 0;
	font-size: clamp(2.75rem, 5vw, 4.5rem);
	line-height: 1.05;
	color: var(--bio-text);
}

.services-page__hero-text {
	max-width: 36rem;
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--bio-text);
}

.services-page__hero-actions,
.services-page__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

/* .services-page__cta-phone / .services-page__cta-secondary are now
   grouped with the equivalent Homepage and Equipment Single buttons — see
   the shared CTA button component comment near .equipment-single__cta-phone
   above. */

.services-page__hero-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--bio-surface-soft);
}

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

.services-page__installation,
.services-page__assessment,
.services-page__maintenance,
.services-page__warning-signs,
.services-page__process,
.services-page__proof,
.services-page__area,
.services-page__cta {
	padding-block: 3rem;
}

/*
 * Reuses the Homepage's own shared section-heading/section-text scale
 * (same clamp/size/weight as .home-page__section-heading /
 * .home-page__section-text) — previously fixed at a flat 1.5rem/1rem with
 * no viewport scaling at all, which read as much weaker than the Homepage's
 * equivalent headings.
 */
.services-page__section-heading {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--bio-text);
}

.services-page__section-text {
	max-width: 40rem;
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.services-page__list {
	max-width: 40rem;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

/*
 * Restrained custom marker (small forest-green dot) instead of the browser's
 * default disc — each li becomes its own small flex row so the marker sits
 * at a fixed, consistent offset from the text regardless of font-size,
 * rather than relying on the browser's bullet-indent reserve (previously
 * padding-left: 1.25rem on the <ul>, which also made the whole list start
 * further from its heading than necessary in the two-column sections).
 */
.services-page__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.services-page__list li::before {
	content: "";
	flex-shrink: 0;
	width: 0.4375rem;
	height: 0.4375rem;
	margin-top: 0.6em;
	border-radius: 50%;
	background: var(--bio-primary);
}

/*
 * Shared "detail panel" component — Installation, Assessment, and
 * Maintenance are one reusable pattern (warm ivory panel, large step number
 * + heading + intro on the left, list on the right) rather than three
 * separately-maintained layouts. One class set covers all three sections;
 * each section's own outer .services-page__installation/-assessment/
 * -maintenance/.services-page__container wrapper is untouched (alignment
 * only), so all three still align to the same page container.
 *
 * Panel geometry follows the same recipe already used for
 * .contact-page__details (warm ivory background, warm border, existing
 * large radius, restrained shadow) — no new colors or shadow values
 * introduced. The left border-left is layered on top of the general
 * border afterwards (longhand overrides shorthand for that one side only),
 * giving a restrained terracotta side accent without a new element.
 *
 * 1 column through tablet, 2 columns (approx. 2fr/3fr) from 1024px+ only —
 * deliberately later than the old 768px breakpoint, per the brief's
 * explicit "tablet/mobile: panels stack cleanly" requirement.
 */
.services-page__detail-panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bio-space-4);
	background: var(--bio-panel-bg);
	border: 1px solid var(--bio-border);
	border-left: 4px solid var(--bio-focus);
	border-radius: var(--bio-radius-large);
	box-shadow: 0 8px 24px rgba(var(--bio-shadow-color), 0.10);
	padding: var(--bio-space-5);
}

@media (min-width: 1024px) {
	.services-page__detail-panel {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: 2.5rem;
		align-items: start;
		padding: var(--bio-space-6);
	}
}

.services-page__detail-content {
	display: flex;
	flex-direction: column;
	gap: var(--bio-space-2);
	min-width: 0;
}

.services-page__detail-number {
	margin: 0;
	font-size: 2rem;
	line-height: 1;
	font-weight: 700;
	color: var(--bio-focus);
}

/*
 * The list's own max-width: none overrides the shared rule's 40rem cap,
 * which — inside an already-narrower ~3fr grid track — was leaving dead
 * space to the list's right instead of letting it use the full track.
 * min-width: 0 is the standard grid-item overflow-prevention pairing.
 * .services-page__list itself stays untouched (shared with Warning Signs
 * and the Proof section's own text).
 */
.services-page__detail-panel .services-page__list {
	min-width: 0;
	max-width: none;
}

/*
 * Warning Signs — distinct "warning panel": same border/radius/shadow
 * recipe as the detail panels above, but a deeper sand surface
 * (--bio-surface-soft, one step down from the ivory --bio-panel-bg used by
 * Installation/Assessment/Maintenance) and no side accent, so this section
 * reads as its own kind of panel rather than a fourth identical copy.
 */
.services-page__warning-panel {
	background: var(--bio-surface-soft);
	border: 1px solid var(--bio-border);
	border-radius: var(--bio-radius-large);
	box-shadow: 0 8px 24px rgba(var(--bio-shadow-color), 0.10);
	padding: var(--bio-space-5);
}

@media (min-width: 768px) {
	.services-page__warning-panel {
		padding: var(--bio-space-6);
	}
}

/*
 * The H2 + intro paragraph form a full-width introduction above the
 * four-item grid, rather than the shared .services-page__section-text
 * max-width (40rem) leaving a narrow-column look inside the panel. Scoped
 * so .services-page__section-text itself stays untouched (shared with
 * other Services sections).
 */
.services-page__warning-signs-intro .services-page__section-text {
	max-width: none;
}

/*
 * Four items, capped at 2 columns even at desktop (previously grew to
 * 4-across at 1024px+) — 1 column mobile/tablet-portrait, 2x2 from 768px+.
 * Internal row/column dividers (via nth-child, safe since this is a fixed
 * 4-item list, not a growing query loop) replace individual card borders,
 * so the four signs read as one panel rather than four floating cards.
 */
.services-page__list.services-page__warning-signs-list {
	max-width: none;
	gap: 0;
}

.services-page__warning-signs-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	padding-block: var(--bio-space-3);
	border-bottom: 1px solid var(--bio-border);
}

.services-page__warning-signs-list li:last-child {
	border-bottom: none;
}

/*
 * Small terracotta circular "!" marker — a later, more specific rule than
 * the shared .services-page__list li::before dot, so it fully replaces
 * content/size/color for this list only.
 */
.services-page__warning-signs-list li::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: 0;
	border-radius: 50%;
	background: var(--bio-focus);
	color: var(--bio-surface);
	font-size: 0.9375rem;
	font-weight: 700;
}

@media (min-width: 768px) {
	.services-page__list.services-page__warning-signs-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.services-page__warning-signs-list li {
		padding-inline: var(--bio-space-4);
		border-bottom: none;
	}

	.services-page__warning-signs-list li:nth-child(-n + 2) {
		border-bottom: 1px solid var(--bio-border);
	}

	.services-page__warning-signs-list li:nth-child(odd) {
		border-right: 1px solid var(--bio-border);
	}
}

.services-page__process-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.services-page__process-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.services-page__process-list {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--bio-space-5);
	}
}

.services-page__process-step {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

/*
 * Title/text sized as their own explicit spec (not a direct reuse of the
 * Homepage Process step's scale — the previous pass's title size (1.25rem)
 * read as inconsistent with the description scale). The badge itself now
 * matches the Homepage's Trust/Process badges exactly (readability pass:
 * 3.25rem through tablet, 3.5rem from 1024px+ — was 2.75rem/3rem).
 */
.services-page__process-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--bio-primary);
	color: var(--bio-surface);
	font-size: 1.375rem;
	font-weight: 700;
}

.services-page__process-title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--bio-text);
}

.services-page__process-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

/*
 * Desktop-only substantial increase (1024px+) — column count (1/2/4) is
 * untouched; only size/spacing change. The section heading itself is
 * covered separately: the shared .services-page__section-heading rule (used
 * by every Services section) already gets a desktop bump elsewhere, so
 * nothing extra is needed here for it.
 */
@media (min-width: 1024px) {
	.services-page__process-step {
		gap: var(--bio-space-4);
	}

	.services-page__process-number {
		width: 3.5rem;
		height: 3.5rem;
	}

	.services-page__process-title {
		font-size: 1.25rem;
	}

	.services-page__process-text {
		font-size: 1.0625rem;
		line-height: 1.6;
	}
}

/*
 * Proof section only. The H2 + supporting sentence form a full-width
 * introduction above the two-photo grid, rather than the shared
 * .services-page__section-text max-width (40rem) leaving a narrow-column,
 * large-empty-area look on a wide container — same fix already applied to
 * the Warning Signs section. Scoped so .services-page__section-text itself
 * stays untouched (shared with other Services sections).
 */
.services-page__proof-intro .services-page__section-text {
	max-width: none;
}

.services-page__proof-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.services-page__proof-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.services-page__proof-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--bio-surface-soft);
}

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

/* .services-page__area-grid / -content / -text / -list are now grouped
   with their Homepage equivalents above (see the comment there) rather than
   duplicated here. */

.services-page__cta {
	text-align: center;
}

.services-page__cta .services-page__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.services-page__cta .services-page__cta-actions {
	justify-content: center;
}

/*
 * Previously had no font-size at all (relied on the browser/Bricks default
 * H2 style), which is why this read as weak — now matches the Homepage's
 * own Final CTA heading scale (.home-page__cta-heading). Color is handled
 * separately by the dark-panel theme override further below (out of scope
 * here — this rule only sets size/weight).
 */
.services-page__cta-heading {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--bio-text);
}

/* ==========================================================================
   Contact page
   Structural launch styling for the Kontaktai static page template.
   See docs/bricks/contact/contact-reference.html. Values mirror the
   established container/hero/section/list patterns already used on the
   Homepage and Services page, under a page-scoped prefix — no new colors,
   type scale, radii, or shadows are introduced here. The Service Area
   selectors and both CTA buttons (.contact-page__cta-phone primary,
   .contact-page__cta-email secondary) are added to the existing shared
   Homepage/Services grouped rules rather than duplicated (see those rules
   above); the native Bricks Form control styling is likewise added to the
   existing shared Homepage form rules (see .home-page__cta-form above).
   ========================================================================== */

.contact-page__container {
	width: 100%;
	max-width: var(--bio-content-width);
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.contact-page__hero,
.contact-page__main,
.contact-page__area {
	padding-block: 3rem;
}

.contact-page__hero-title {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.15;
	color: var(--bio-text);
}

.contact-page__hero-text {
	max-width: 34rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.contact-page__section-heading {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--bio-text);
}

.contact-page__section-text {
	max-width: 40rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.contact-page__eyebrow {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bio-text-muted);
}

.contact-page__main-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.contact-page__main-grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
		gap: 2.5rem;
		align-items: start;
	}
}

.contact-page__details {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

/*
 * One action wrapper holding both the primary phone CTA and the secondary
 * email CTA — same flex-row/wrap/gap pattern as the Hero and Final CTA
 * action groups on the Homepage/Services/Contact pages, so the two buttons
 * sit inline when there's room and wrap to stack on narrow viewports
 * without overflowing.
 */
.contact-page__contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.contact-page__form {
	width: 100%;
	min-width: 0;
}

/* .contact-page__area-grid / -content / -text / -list and both CTA buttons
   (.contact-page__cta-phone, .contact-page__cta-email) are grouped with their
   Homepage/Services equivalents above (see the Service Area and shared CTA
   button component comments) rather than duplicated here. The native Bricks
   Form control styling for .contact-page__form is likewise grouped with
   .home-page__cta-form's rules above. */

/* ==========================================================================
   Privacy page
   Structural styling for the Privatumo politika static page template. See
   docs/bricks/privacy/privacy-policy.html. Legal/informational page — one
   simple hero (eyebrow + H1, no media/CTA, mirroring the Contact page's own
   hero) plus one flowing content section. Deliberately no cards, icons, or
   the dark-forest panel treatment used elsewhere: a long legal document
   reads best as plain text directly on the page canvas. Values mirror the
   established container/hero/section/list patterns already used on
   Contact/Services, under a page-scoped prefix — no new colors, type
   scale, radii, or shadows are introduced here.
   ========================================================================== */

.privacy-page__container {
	width: 100%;
	max-width: var(--bio-content-width);
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.privacy-page__hero,
.privacy-page__content {
	padding-block: 3rem;
}

.privacy-page__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bio-text-muted);
}

.privacy-page__hero-title {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.15;
	color: var(--bio-text);
}

/*
 * Comfortable reading column, centered inside the wider page container —
 * the same ~40rem prose width already used for section-text elsewhere on
 * the site, applied here to the whole policy body rather than a single
 * paragraph, since this is one continuous document rather than short
 * marketing copy.
 */
.privacy-page__body {
	max-width: 42rem;
	margin-inline: auto;
}

.privacy-page__updated {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	color: var(--bio-text-muted);
}

.privacy-page__section-heading {
	margin: 2.5rem 0 1rem;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--bio-text);
}

.privacy-page__section-text {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--bio-text-muted);
}

.privacy-page__list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.privacy-page__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bio-text-muted);
}

.privacy-page__list li::before {
	content: "";
	flex-shrink: 0;
	width: 0.4375rem;
	height: 0.4375rem;
	margin-top: 0.6em;
	border-radius: 50%;
	background: var(--bio-primary);
}

.privacy-page__section-text a,
.privacy-page__list a {
	color: var(--bio-primary);
	text-decoration: underline;
}

.privacy-page__section-text a:hover,
.privacy-page__list a:hover {
	color: var(--bio-primary-hover);
}

.privacy-page__section-text a:focus-visible,
.privacy-page__list a:focus-visible {
	outline: 2px solid var(--bio-focus);
	outline-offset: 2px;
}