/* ==========================================================================
   Theme layer — experimental visual themes
   Loaded after site.css (see functions.php). site.css's entire component
   library reads colour exclusively from the global --bio-* custom
   properties defined in its :root block (colour-role tokens plus the
   surface-role tokens: --bio-page-bg, --bio-header-bg, --bio-panel-bg,
   --bio-card-bg, --bio-field-bg, --bio-active-bg, --bio-panel-subtle,
   --bio-strong-section-bg, --bio-footer-bg) — so a theme here only ever
   needs to redefine that same set of properties, scoped to its activation
   class, plus a handful of genuine component-specific exceptions where a
   single semantic token cannot express what the theme needs (documented
   individually below). The default BioGrunta styling in site.css's :root
   remains the fallback whenever no theme class is present.
   ========================================================================== */

/* ==========================================================================
   Warm Earthworks — approved production theme
   Recolours the entire site (Header, Footer, Homepage, Services, Equipment,
   Contact — every one of them reads colour from the tokens below).

   Exact palette (no additional hues introduced). Header/action hierarchy
   set a few passes ago: primary actions are forest green, navigation is
   brown, terracotta is decorative-accent only — all unchanged. This pass:
   (1) lightens the page canvas further; (2) removes the Header nav's solid
   brown wrapper fill in favour of transparent-with-brown-text; (3)
   substantially enlarges the Trust/Process numbered badges; (4) makes
   About a third dark-forest surface alongside the Services cards; and (5)
   reverses the Final CTA's surface relationship — the outer section is now
   transparent (the page canvas continues behind it to the Footer) and the
   inner panel is now the dark-forest surface instead.
     #2E4A3D — primary action green (--bio-primary); also the background of
               About, the Services cards, and the CTA panel (all three
               component exceptions, all reading this same token so they
               can never drift apart from each other)
     #21372E — primary action hover (--bio-primary-hover); also the border
               colour of all three dark surfaces above (component exceptions)
     #7D3E2A — navigation brown (--bio-accent-dark); nav link text colour
               and active-state text (component exceptions), and the CTA
               submit button's background (component exception)
     #63301F — navigation hover background (component exception) and CTA
               submit-button hover (component exception) — both literal,
               since no token represents "the hover shade of the
               navigation brown" specifically
     #B85A32 — decorative terracotta accent (--bio-focus): eyebrows
               (Hero/Service Area only — About's eyebrow uses a lightened
               version, see below), the CTA panel's top accent, and the
               CTA heading's underline (all component exceptions)
     #F1E8DC — page canvas, lightened this pass (--bio-page-bg)
     #FFF8EE — Header background (--bio-header-bg)
     #FFF9F0 — large panels: About's own background is now --bio-primary
               instead (see above) — --bio-panel-bg's remaining consumers
               are the Catalogue card and the Services-card link's light
               "pill" fill (component exception)
     #FFFDF8 — form fields (--bio-field-bg / --bio-surface)
     #E8D8C0 — secondary/subtle surface: Catalogue bottom bar, Service-card
               link hover, Header nav hover/active background, and the
               warm-white text blends on every dark surface (About/Services/
               CTA panel text all color-mix() toward this tone — component
               exceptions) (--bio-panel-subtle)
     #BDAA91 — border (--bio-border)
     #1E2A25 — main text (--bio-text)      #5F675F — muted text (--bio-text-muted)
     #1B2520 — Footer background (--bio-footer-bg)
     #FFFFFF — text on dark surfaces (--bio-text-on-dark): Services/About/
               CTA headings, phone CTA text, and the CTA submit button's
               text (all component exceptions)
   ========================================================================== */

.theme-warm-earthworks {
	/*
	 * Palette refinement: the Header/action hierarchy is now deliberately
	 * reversed from the previous pass — navigation reads as a warm
	 * structural (brown) element, primary actions read as the principal
	 * (forest-green) interaction colour, and terracotta is reserved for
	 * decorative accents only (eyebrows, focus rings, panel accent rules).
	 */
	--bio-primary: #2e4a3d;
	--bio-primary-hover: #21372e;
	/*
	 * --bio-accent-dark is this theme's "navigation brown" role — site.css's
	 * only use of it is the Header nav's own resting background (via the
	 * exception below); it's a token specifically so that role has a name,
	 * even though nothing in site.css reads it directly on its own.
	 */
	--bio-accent-dark: #7d3e2a;

	--bio-text: #1e2a25;
	--bio-text-muted: #5f675f;
	--bio-text-on-dark: #ffffff;

	--bio-surface: #fffdf8;
	--bio-surface-alt: #f3eee4;
	--bio-surface-soft: #e8dfd0;
	--bio-surface-strong: #2e4a3d;

	--bio-border: #bdaa91;
	/*
	 * --bio-focus is now the palette's decorative terracotta accent, not an
	 * alias of --bio-primary — it still drives every actual focus-visible
	 * ring via the core tokens, and is reused (not duplicated) for the CTA
	 * panel's top accent, the CTA heading's underline, and eyebrows below.
	 */
	--bio-focus: #b85a32;
	--bio-shadow-color: 46, 38, 31;

	/*
	 * Surface-role tokens — light side of the hierarchy. Page canvas is
	 * lightened this pass (#F1E8DC, up from the previous #E6D5BF) while
	 * staying visibly darker than the light ivory Header/panels
	 * (#FFF8EE/#FFF9F0) sitting on it, so the canvas/panel contrast stays
	 * clear even at the lighter overall value. --bio-card-bg is
	 * deliberately not defined here: the only component that ever used it
	 * (Services cards) is dark forest via a direct --bio-primary override
	 * (see the component exceptions below), so there is no "universal
	 * light card surface" token in this theme any more — using
	 * --bio-card-bg for anything else would contradict that design
	 * decision. --bio-panel-bg remains for the components that do stay
	 * light this pass (the Catalogue card, the Services-card link's light
	 * "pill" fill) — About no longer uses it, since About is now dark
	 * forest (see the component exceptions further below).
	 */
	--bio-page-bg: #f1e8dc;
	--bio-header-bg: #fff8ee;
	--bio-panel-bg: #fff9f0;
	--bio-field-bg: var(--bio-surface);
	--bio-active-bg: var(--bio-header-bg);
	--bio-panel-subtle: #e8d8c0;
	--bio-footer-bg: #1b2520;
	/*
	 * --bio-strong-section-bg and --bio-form-panel-bg (used by earlier
	 * passes for the CTA's outer-section / inner-panel colours
	 * respectively) are deliberately not defined here any more: this pass
	 * makes the outer .home-page__cta section transparent and the panel
	 * itself dark forest (both via component exceptions below, reusing
	 * --bio-primary/--bio-primary-hover — the same tokens driving About and
	 * the Services cards), so neither of those two surface-role tokens
	 * still has a live consumer in this theme. A future pass reintroducing
	 * a distinct dark CTA-section band would need to both remove those
	 * exceptions and re-add the relevant token here.
	 */
}

/*
 * Component-specific exceptions — every primary button (phone CTA, submit
 * button, and every button/link/border/shadow on the Homepage, Services,
 * Equipment, and Contact pages that reads --bio-primary), the Trust badges,
 * Process markers, the entire Footer (background plus its derived on-dark
 * text/divider/focus shades), and every panel/card/field surface (About,
 * Services cards, the Catalogue card and its bottom bar, form fields, the
 * nav active state's background) all recolour automatically from the
 * token block above alone, since site.css's base component rules consume
 * these tokens directly. The rules below are only the ones that could not
 * be expressed through a token, because site.css's core rule for that
 * component is wired to a token this theme deliberately gives a different
 * value than the role that component needs, or because the property
 * itself (a shadow, an alignment, a width, a decorative accent colour) has
 * no token to begin with.
 */

/*
 * 1. The Header nav wrapper: the previous pass filled this with solid
 *    --bio-accent-dark (navigation brown) — the brief now says the solid
 *    block attracts too much attention. Transparent instead, so the
 *    wrapper's own dimensions/centring/radius are all preserved (nothing
 *    about its geometry changes), but it no longer reads as "one large
 *    button" sitting on the Header.
 */
.theme-warm-earthworks .site-header__nav {
	background: transparent;
}

/*
 * 2. Normal nav link text: site.css's core rule uses --bio-surface (a
 *    warm off-white) — correct when the wrapper was a dark fill, but
 *    invisible now that the wrapper is transparent and the Header behind
 *    it is light (--bio-header-bg). Switched to --bio-accent-dark (the
 *    same navigation-brown token that filled the wrapper before), so the
 *    nav still reads as a distinct warm-brown structural element even
 *    without its own background.
 */
.theme-warm-earthworks .site-header__nav a {
	color: var(--bio-accent-dark);
}

/*
 * 3. Nav hover: site.css's core rule fills the whole link with
 *    --bio-accent-dark (a solid brown block) — exactly the "strong filled
 *    brown block" the brief now rejects. Replaced with the same subtle
 *    sand tone used for other secondary/recessed surfaces
 *    (--bio-panel-subtle), giving a restrained hover fill instead.
 */
.theme-warm-earthworks .site-header__nav a:hover {
	background: var(--bio-panel-subtle);
}

/*
 * 4. Active nav item background: site.css's core rule uses --bio-active-bg
 *    — but --bio-active-bg is aliased to --bio-header-bg (the same value),
 *    so with the wrapper now transparent, an active link's "distinct"
 *    background would be visually identical to the Header behind it (no
 *    visible pill at all). --bio-panel-subtle is genuinely darker/more
 *    saturated than the Header, so it actually reads as a distinct active
 *    surface. Text stays --bio-accent-dark (brown), unchanged from the
 *    existing exception below — same colour as resting links, since the
 *    background pill is what distinguishes the state, not the text colour.
 */
.theme-warm-earthworks .site-header__nav a[aria-current="page"],
.theme-warm-earthworks .site-header__nav .current-menu-item > a {
	background: var(--bio-panel-subtle);
	color: var(--bio-accent-dark);
}

/*
 * 5. Header shadow: site.css's Header rule has no box-shadow at all — a
 *    subtle warm-tinted one is added for this theme only. Not a token
 *    substitution (there's no "has a shadow or not" token), just an
 *    additive decorative touch.
 */
.theme-warm-earthworks .site-header {
	box-shadow: 0 2px 12px rgba(var(--bio-shadow-color), 0.05);
}

/*
 * 6. Nav focus-visible outline: previously forced to white because the
 *    nav wrapper was a dark brown fill (where the core --bio-focus/
 *    terracotta ring would have had too little contrast). Now that the
 *    wrapper is transparent against the light Header, that white-outline
 *    override would itself have too little contrast (white on near-white)
 *    — so it's removed entirely here, letting the core rule's own
 *    `outline: 2px solid var(--bio-focus)` (terracotta) apply, which reads
 *    clearly against the light Header.
 */

/*
 * 7. Phone CTA text: site.css's core rule uses --bio-surface (a warm
 *    off-white) rather than pure white. Unchanged from the previous
 *    pass — the phone CTA stays forest green with white text throughout
 *    this pass, only the nav's own text/background changed.
 */
.theme-warm-earthworks .site-header__phone {
	color: var(--bio-text-on-dark);
}

/*
 * 8. Secondary-action hover: the shared secondary-button component's hover
 *    reads --bio-surface-soft (a neutral sand tone). The brief wants
 *    secondary-action hover specifically to be "a pale green-derived
 *    surface" now that green is the primary interaction colour — derived
 *    from --bio-primary here via color-mix(), not a new hardcoded hue.
 *    (Border and resting text already read --bio-primary correctly via
 *    the shared component's own base rule — no exception needed for
 *    those two properties any more.)
 */
.theme-warm-earthworks .equipment-single__cta-enquiry:hover,
.theme-warm-earthworks .home-page__cta-secondary:hover,
.theme-warm-earthworks .services-page__cta-secondary:hover,
.theme-warm-earthworks .contact-page__cta-email:hover {
	background: color-mix(in srgb, var(--bio-primary) 12%, white);
}

/*
 * 9. Eyebrows — Hero and Service Area only (About's eyebrow is handled
 *    separately below, since About is now a dark panel and needs a
 *    lighter accent than plain terracotta to stay readable). site.css's
 *    core rule for each reads --bio-primary (forest green) — the brief
 *    wants eyebrows to keep the decorative terracotta accent instead, via
 *    --bio-focus (this theme's dedicated decorative-accent token).
 */
.theme-warm-earthworks .home-page__hero-content .home-page__eyebrow,
.theme-warm-earthworks .home-page__area-content .home-page__eyebrow {
	color: var(--bio-focus);
}

/* ==========================================================================
   Warm Earthworks homepage background canvas
   site.css's `.home-page` base rule already consumes --bio-page-bg
   directly, so the only thing this theme needs to add here is making Hero
   through Service Area transparent, since site.css's default rhythm for
   those nine sections alternates --bio-surface / --bio-surface-alt /
   --bio-surface-soft to create visible "stripes" down the page — not
   wanted once the page canvas itself is the intended background. The
   Final CTA section is also transparent in this theme, but that's set
   alongside the rest of the CTA's dark-panel
   treatment further below, not here.
   ========================================================================== */

.theme-warm-earthworks .home-page__hero,
.theme-warm-earthworks .home-page__trust,
.theme-warm-earthworks .home-page__about,
.theme-warm-earthworks .home-page__services,
.theme-warm-earthworks .home-page__process,
.theme-warm-earthworks .home-page__catalogue,
.theme-warm-earthworks .home-page__projects,
.theme-warm-earthworks .home-page__testimonials,
.theme-warm-earthworks .home-page__area {
	background: transparent;
}

/* ==========================================================================
   Warm Earthworks surface hierarchy — About, Services, Projects
   About is now the second deliberate dark-forest surface in this pass
   (alongside Services cards below) — both share the exact same
   background/border tokens so they read as one surface family. The
   Catalogue teaser's own card styling lives with the Archive's
   ".equipment-card" theme rule further below (one component, one rule).
   Projects gets a stronger border/shadow only; its images remain untinted
   and without a card background, per the brief.
   ========================================================================== */

/*
 * About panel: dark forest, matching the Services cards exactly
 * (var(--bio-primary) background, var(--bio-primary-hover) border) — same
 * two tokens, so the two surfaces can never drift apart from each other.
 * Shadow kept at the same "more visible but restrained" value introduced
 * two passes ago (site.css's own core shadow was too subtle against the
 * page canvas; that reasoning still applies now that the panel is dark
 * rather than light).
 */
.theme-warm-earthworks .home-page__about-grid {
	background: var(--bio-primary);
	border-color: var(--bio-primary-hover);
	box-shadow: 0 8px 24px rgba(var(--bio-shadow-color), 0.10);
}

/*
 * About panel text — same treatment language as the Services cards below
 * (white heading, warm-white body via color-mix toward panel-subtle), so
 * the two dark surfaces read as one family. The eyebrow is the one
 * exception: site.css's shared eyebrow rule (also used by Hero/Service
 * Area, which stay light) reads --bio-primary — now forest green, which
 * would be invisible on this now-forest-green panel. A lightened
 * terracotta (rather than plain --bio-focus) keeps the decorative accent's
 * warm hue while clearing accessible contrast against the dark background
 * — raw terracotta measures only ~1.9:1 against this forest green, well
 * under the ~4.5:1 small text needs; lightening it substantially fixes
 * that while still reading as "terracotta", not just another shade of
 * sand.
 */
.theme-warm-earthworks .home-page__about-content .home-page__eyebrow {
	color: color-mix(in srgb, var(--bio-focus) 45%, white);
}

.theme-warm-earthworks .home-page__about-content .home-page__section-heading {
	color: var(--bio-text-on-dark);
}

.theme-warm-earthworks .home-page__about-content .home-page__section-text {
	color: color-mix(in srgb, white 82%, var(--bio-panel-subtle));
}

/*
 * Trust and Process numbered badges: size (3.25rem/3.5rem) and margin are
 * now set directly in site.css's shared base rules (readability pass — see
 * those rules for the full reasoning), so every theme gets the larger
 * badge uniformly. Only colour needs overriding here — --bio-text-on-dark
 * for a truly pure white rather than this theme's warm off-white
 * (site.css's core rule reads --bio-surface).
 */
.theme-warm-earthworks .home-page__trust-item::before {
	color: var(--bio-text-on-dark);
}

.theme-warm-earthworks .home-page__process-number {
	color: var(--bio-text-on-dark);
}

/*
 * Services cards: the one deliberate dark-forest surface in this pass.
 * site.css's core rule reads --bio-primary for the top accent and
 * --bio-border for the general border — both now need overriding, since
 * the card's own background is about to become --bio-primary itself
 * (making the existing top accent invisible against it), and the general
 * border needs to read as a deliberately darker forest edge rather than
 * the page's warm-tan border colour. border-color (all four sides) is set
 * first, then border-top-color afterwards specifically restores the
 * terracotta top accent on just that one side — border-top-color is a
 * more specific longhand than border-color for the same property, so
 * later-in-source wins for the top edge only, leaving the other three
 * sides on --bio-primary-hover.
 */
.theme-warm-earthworks .home-page__service-card {
	background: var(--bio-primary);
	border-color: var(--bio-primary-hover);
	border-top-color: var(--bio-focus);
}

/*
 * Heading/body text on the now-dark card: white for the heading (site.css's
 * core rule uses --bio-text, unreadable on forest), and a warm-white blend
 * for the body copy — color-mix() toward the panel-subtle sand tone rather
 * than pure white keeps it feeling warm rather than stark, while still
 * reading clearly on the dark background.
 */
.theme-warm-earthworks .home-page__service-title {
	color: var(--bio-text-on-dark);
}

.theme-warm-earthworks .home-page__service-text {
	color: color-mix(in srgb, white 82%, var(--bio-panel-subtle));
}

/*
 * Service-card link: site.css's core rule is an outlined button
 * (transparent background, --bio-primary border/text) designed for a
 * light card — invisible (green-on-green) now that the card itself is
 * --bio-primary. Inverted into a light "pill" that pops out of the dark
 * card instead: light panel-bg fill (border colour matched to the fill so
 * there's no visible seam), green text, recessed sand tone on hover.
 */
.theme-warm-earthworks .home-page__service-link {
	background: var(--bio-panel-bg);
	border-color: var(--bio-panel-bg);
	color: var(--bio-primary);
}

.theme-warm-earthworks .home-page__service-link:hover {
	background: var(--bio-panel-subtle);
	color: var(--bio-primary-hover);
}

/*
 * Catalogue teaser card: no card-level override needed here anymore — this
 * section now reuses the Archive's own .equipment-card component
 * unmodified, so it already picks up the dark-forest treatment from the
 * base ".theme-warm-earthworks .equipment-card" rule further below (see
 * "Equipment cards (Archive listing)"), covering the Homepage teaser and
 * the Archive grid identically with one rule.
 */

/*
 * Project image frames: border already reads --bio-border via site.css's
 * base rule (updates automatically with the token above) — only the
 * shadow is strengthened here, per the brief's explicit value. No card
 * background is added; the photographs remain the surface.
 */
.theme-warm-earthworks .home-page__project-media {
	box-shadow: 0 6px 18px rgba(var(--bio-shadow-color), 0.09);
}

/* ==========================================================================
   Warm Earthworks Final CTA — surface relationship reversed
   Previous pass: dark outer section, sand-coloured inner panel. This pass
   reverses it: the outer section is transparent (page canvas continues
   behind it, uninterrupted, all the way to the Footer), and the inner
   panel/container itself becomes the dark-forest surface — a third
   member of the same dark-forest family as About and the Services cards.
   ========================================================================== */

/*
 * Outer section: site.css's core rule reads --bio-strong-section-bg
 * (forest green) for a full-width dark band — this pass wants the page
 * canvas to continue behind the CTA instead, with only the panel itself
 * reading as dark. Section padding-block (spacing) is untouched.
 */
.theme-warm-earthworks .home-page__cta {
	background: transparent;
}

/*
 * Panel: now dark forest, using the exact same two tokens as the About
 * panel and Services cards (var(--bio-primary) background,
 * var(--bio-primary-hover) border) — all three surfaces can never drift
 * apart from each other as a result. The shadow is kept slightly stronger
 * than About/Catalogue's, since this panel needs to visually lift off the
 * lighter page canvas by itself (it's a single centred panel, not part of
 * a larger contained composition). The terracotta top accent remains — it
 * still reads as a distinct warm accent line by hue even though its
 * contrast against forest is modest, and keeps this panel visually
 * connected to the "terracotta accent" language used across the theme.
 *
 * Geometry (unchanged from earlier passes): max-width brought in from
 * 48rem (768px) to 42rem (672px, inside the requested 660-700px range);
 * padding rebalanced to be wider than it is tall so the panel reads as
 * less vertically empty without shrinking the form itself; align-items
 * changes from center to flex-start so the heading and submit button
 * (both handled below) can sit flush left rather than centred as their
 * own shrink-to-fit blocks — the form itself is unaffected, since
 * .home-page__cta-form already has its own explicit width: 100%.
 */
.theme-warm-earthworks .home-page__cta .home-page__container {
	align-items: flex-start;
	max-width: 42rem;
	padding: 2rem 2.25rem;
	background: var(--bio-primary);
	border-color: var(--bio-primary-hover);
	box-shadow: 0 10px 28px rgba(var(--bio-shadow-color), 0.14);
	border-top: 4px solid var(--bio-focus);
}

@media (min-width: 768px) {
	.theme-warm-earthworks .home-page__cta .home-page__container {
		padding: 2.25rem 3rem;
	}
}

/*
 * Heading: left-aligned (both the block itself, via align-self, and its
 * own text — unchanged from the previous pass), now with white/on-dark
 * text (site.css's core rule uses --bio-text, unreadable on the now-dark
 * panel) and the same terracotta underline as before. Because the heading
 * is a non-stretched flex item (align-items: flex-start above), it
 * already shrink-wraps to its own text width, so the border-bottom
 * naturally reads as a short accent under the heading rather than a
 * full-width divider — no display change needed to achieve that. Heading
 * scale itself (the clamp() font-size) is untouched.
 */
.theme-warm-earthworks .home-page__cta-heading {
	align-self: flex-start;
	text-align: left;
	padding-bottom: 0.5rem;
	color: var(--bio-text-on-dark);
	border-bottom: 3px solid var(--bio-focus);
}

/*
 * Form labels: site.css's shared rule (also used by the Contact page,
 * which stays light and is out of scope) reads --bio-text — unreadable on
 * this now-dark panel. Scoped specifically to the Homepage CTA's own form
 * instance so Contact's labels are unaffected. Same warm-white blend as
 * the About panel/Services cards' body text, for one consistent
 * "text on dark" treatment across the theme.
 */
.theme-warm-earthworks .home-page__cta .home-page__cta-form .form-group label {
	color: color-mix(in srgb, white 82%, var(--bio-panel-subtle));
}

/*
 * Submit button: the shared component's background is --bio-primary —
 * now the same forest green as the panel itself, which would make the
 * button disappear into it. Switched to --bio-accent-dark (navigation
 * brown) with a darker literal hover, matching the same brown used
 * elsewhere in the Header, and the same white on-dark text used for the
 * heading above. Scoped to the Homepage CTA's own submit button only —
 * Contact's identical shared button stays forest green, unaffected.
 */
.theme-warm-earthworks .home-page__cta .home-page__cta-form button[type="submit"] {
	background: var(--bio-accent-dark);
	color: var(--bio-text-on-dark);
}

.theme-warm-earthworks .home-page__cta .home-page__cta-form button[type="submit"]:hover {
	background: #63301f;
}

/*
 * Submit button width: the earlier desktop-only width: auto / min-width:
 * 240px override (which made the button narrower than the fields above
 * it) is removed. No replacement rule is needed — the shared component's
 * own width: 100% (site.css core, unchanged) already makes the button
 * match the fields/textarea at every width, exactly like the earlier
 * mobile-only behaviour now applies everywhere.
 */

/* ==========================================================================
   Warm Earthworks desktop typography (1024px+)
   Font-size only — font-family, line-break points, layout, and spacing are
   all untouched (line-height is nudged on a few multi-line paragraphs only
   where a larger size alone would otherwise read cramped). Everything
   below is wrapped in the same @media (min-width: 1024px) query used
   elsewhere in site.css, so mobile/tablet are completely unaffected.
   .home-page__section-heading / .home-page__section-text (the shared pair
   used by About, Services, Process, Catalogue, and Service Area) are each
   bumped exactly once here and apply to all five sections at once — see
   site.css's own comment on that shared rule for the full list of
   consumers. The Header and Footer are shared global template parts (not
   .home-page-scoped), so — consistent with how every previous pass in
   this theme has treated them — these two sections' typography applies
   theme-wide, not only on the Homepage.
   ========================================================================== */

@media (min-width: 1024px) {
	/* Header */
	.theme-warm-earthworks .site-header__nav a {
		font-size: 1.3125rem;
	}

	.theme-warm-earthworks .site-header__actions > .site-header__phone {
		font-size: 1.3125rem;
	}

	/* Hero */
	.theme-warm-earthworks .home-page__hero-content .home-page__eyebrow {
		font-size: 1rem;
	}

	.theme-warm-earthworks .home-page__hero-title {
		font-size: clamp(3.25rem, 2.25rem + 3vw, 5.5rem);
	}

	.theme-warm-earthworks .home-page__hero-text {
		font-size: 1.375rem;
		line-height: 1.5;
	}

	.theme-warm-earthworks .home-page__hero-actions .home-page__cta-phone,
	.theme-warm-earthworks .home-page__hero-actions .home-page__cta-secondary {
		font-size: 1.1875rem;
	}

	/* Trust: sizing now lives entirely in site.css's own 1024px+ rules
	   (.home-page__trust-heading / .home-page__trust-text) — this
	   theme-scoped pair used to duplicate/override those with older,
	   smaller values (1.4rem/1.1875rem) that always won regardless of what
	   site.css set, since ".theme-warm-earthworks .home-page__trust-heading"
	   (2 classes) has higher specificity than site.css's own
	   ".home-page__trust-heading" (1 class), independent of source order.
	   Removed so the shared rule is the single source of truth for every
	   theme. */

	/* Shared section heading/intro — About, Services, Process, Catalogue,
	   Service Area all get this once. */
	.theme-warm-earthworks .home-page__section-heading {
		font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
	}

	.theme-warm-earthworks .home-page__section-text {
		font-size: 1.1875rem;
		line-height: 1.65;
	}

	/* About */
	.theme-warm-earthworks .home-page__about-content .home-page__eyebrow {
		font-size: 1rem;
	}

	/* Services */
	.theme-warm-earthworks .home-page__service-title {
		font-size: 1.75rem;
	}

	.theme-warm-earthworks .home-page__service-text {
		font-size: 1.1875rem;
	}

	.theme-warm-earthworks .home-page__service-link {
		font-size: 1.0625rem;
	}

	/* Process (number markers deliberately unchanged — already enlarged) */
	.theme-warm-earthworks .home-page__process-title {
		font-size: 1.375rem;
	}

	.theme-warm-earthworks .home-page__process-text {
		font-size: 1.1875rem;
	}

	/* Equipment / "Įrenginiai" (Catalogue): no desktop bump here — this
	   teaser reuses the Archive's .equipment-card as-is, and the Archive
	   itself doesn't get a desktop type-scale bump, so the two stay
	   consistent at every breakpoint. */

	/* Testimonials — heading and quote text only; reviewer name/meta text is
	   rendered by Bricks' own Testimonials element with no existing CSS
	   selector targeting it in this codebase, so it's left untouched rather
	   than guessed at (see the end-of-task report). */
	.theme-warm-earthworks .home-page__testimonials-heading {
		font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);
	}

	.theme-warm-earthworks .home-page__testimonials-slider .testimonial-content-wrapper {
		font-size: 1.375rem;
	}

	/* Service Area — paragraph and place-name list text only; heading is
	   covered by the shared .home-page__section-heading rule above.
	   .home-page__area-list li is shared with the Services/Contact pages,
	   so this is scoped through the existing .home-page__area ancestor
	   rather than touching the shared rule directly. */
	.theme-warm-earthworks .home-page__area .home-page__area-text {
		font-size: 1.1875rem;
	}

	.theme-warm-earthworks .home-page__area .home-page__area-list li {
		font-size: 1.1875rem;
	}

	/* CTA form section — heading is covered by its own rule below (not
	   shared with any other section); labels and submit-button text are
	   already Homepage-CTA-scoped in site.css, so overriding them here
	   doesn't affect the Contact page's identical shared form. */
	.theme-warm-earthworks .home-page__cta-heading {
		font-size: clamp(2.125rem, 1.75rem + 1.5vw, 2.75rem);
	}

	.theme-warm-earthworks .home-page__cta .home-page__cta-form .form-group label {
		font-size: 1.0625rem;
	}

	.theme-warm-earthworks .home-page__cta .home-page__cta-form button[type="submit"] {
		font-size: 1.1875rem;
	}

	/* Footer — shared across every page, unchanged from how every previous
	   pass in this theme has treated it. Legal row (copyright/privacy link)
	   is deliberately left at its current size — already legible at this
	   scale, and the brief only asked for it "if needed for readability". */
	.theme-warm-earthworks .site-footer__heading {
		font-size: 1.125rem;
	}

	.theme-warm-earthworks .site-footer__nav a,
	.theme-warm-earthworks .site-footer__contact-link {
		font-size: 1.125rem;
	}

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

/* ==========================================================================
   Warm Earthworks — Services, Equipment Archive, Equipment Single, Contact
   Extends the theme beyond the Homepage/Header/Footer. All four pages
   already read their colours from the global --bio-* tokens (site.css's
   core rules for these pages were tokenised in an earlier colour-system
   pass), so most of each page already renders correctly in this theme
   with zero changes here. The rules below are only the additions that
   couldn't come from a token alone: (1) each page's own outer wrapper
   doesn't yet read --bio-page-bg the way `.home-page` does, so the
   continuous canvas needs to be added per page; (2) a handful of "emphasis"
   panels (Equipment cards, each page's Final/bottom CTA, Contact's direct-
   contact block) don't have an existing panel treatment in the default
   design to inherit — new geometry is added here, but scoped entirely to
   `.theme-warm-earthworks`, so no site.css changes were made for any of
   this.
   ========================================================================== */

/*
 * Page canvas: same role as `.home-page` on the Homepage. Each of these
 * five pages has its own single outer wrapper class already (confirmed in
 * docs/bricks/*.html) that every section sits inside, so this is a direct
 * equivalent of the Homepage's own canvas rule. `.privacy-page` joins this
 * list rather than getting its own rule, matching the existing pattern.
 */
.theme-warm-earthworks .services-page,
.theme-warm-earthworks .contact-page,
.theme-warm-earthworks .equipment-archive,
.theme-warm-earthworks .equipment-single,
.theme-warm-earthworks .privacy-page {
	background: var(--bio-page-bg);
}

/*
 * Archive intro eyebrow: same terracotta swap already applied to the
 * Homepage's own Hero/Service Area eyebrows (see
 * ".theme-warm-earthworks .home-page__hero-content .home-page__eyebrow"
 * above) instead of site.css's base rule's --bio-primary (forest green).
 */
.theme-warm-earthworks .equipment-archive__eyebrow {
	color: var(--bio-focus);
}

/*
 * Equipment Single manufacturer eyebrow: same terracotta swap as the
 * Archive eyebrow immediately above.
 */
.theme-warm-earthworks .equipment-single__manufacturer {
	color: var(--bio-focus);
}

/*
 * Equipment cards: dark-forest treatment applied to the base .equipment-card
 * component itself, so every card matches wherever this component appears —
 * the Archive grid (Query Loop repeats this same class per item) and the
 * Homepage Catalogue teaser, which reuses this exact same component. Text
 * follows the same "warm-white blend" language used everywhere else on a
 * dark surface.
 */
.theme-warm-earthworks .equipment-card {
	background: var(--bio-primary);
	border-color: var(--bio-primary-hover);
	box-shadow: 0 8px 24px rgba(var(--bio-shadow-color), 0.10);
}

.theme-warm-earthworks .equipment-card__manufacturer,
.theme-warm-earthworks .equipment-card__excerpt {
	color: color-mix(in srgb, white 82%, var(--bio-panel-subtle));
}

.theme-warm-earthworks .equipment-card__title {
	color: var(--bio-text-on-dark);
}

/*
 * "Plačiau": in the Archive grid this is a plain text link (no button
 * geometry in the default design) — green-on-green would be invisible
 * once the card itself is --bio-primary. Given the same "reuse Homepage
 * styles" instruction, it gets the identical light-pill button treatment
 * already established for the Homepage's equivalent link (and for
 * Service-card links) rather than a one-off different pattern.
 */
.theme-warm-earthworks .equipment-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--bio-panel-bg);
	border-radius: var(--bio-radius-small);
	background: var(--bio-panel-bg);
	color: var(--bio-primary);
	text-decoration: none;
}

.theme-warm-earthworks .equipment-card__link::after {
	content: "\2192";
}

.theme-warm-earthworks .equipment-card__link:hover {
	background: var(--bio-panel-subtle);
	color: var(--bio-primary-hover);
	text-decoration: none;
}

/*
 * Services / Equipment Single Final CTA: both currently have no panel
 * treatment at all in the default design (a plain full-width band for
 * Equipment Single, no background at all for Services) — each gets the
 * same dark-forest panel language as the Homepage CTA panel: the outer
 * section becomes transparent (continuing the page canvas behind it) and
 * the existing content wrapper becomes the dark panel instead.
 */
.theme-warm-earthworks .services-page__cta,
.theme-warm-earthworks .equipment-single__cta {
	background: transparent;
}

.theme-warm-earthworks .services-page__cta .services-page__container,
.theme-warm-earthworks .equipment-single__cta .equipment-single__container {
	background: var(--bio-primary);
	border: 1px solid var(--bio-primary-hover);
	border-radius: var(--bio-radius-large);
	box-shadow: 0 10px 28px rgba(var(--bio-shadow-color), 0.14);
	padding: var(--bio-space-5);
}

@media (min-width: 768px) {
	.theme-warm-earthworks .services-page__cta .services-page__container,
	.theme-warm-earthworks .equipment-single__cta .equipment-single__container {
		padding: var(--bio-space-6);
	}
}

/*
 * Equipment Single-only: stronger padding than the shared var(--bio-space-6)
 * above (which the Services CTA keeps unchanged), layered after it so it
 * wins without touching the shared rule. Mobile keeps the shared
 * var(--bio-space-5) padding — safe/unchanged, per the brief's mobile
 * "stay inside the page gutter" requirement.
 */
@media (min-width: 768px) {
	.theme-warm-earthworks .equipment-single__cta .equipment-single__container {
		padding: 3rem 3.5rem;
	}
}

.theme-warm-earthworks .services-page__cta-heading,
.theme-warm-earthworks .equipment-single__cta-heading {
	color: var(--bio-text-on-dark);
}

.theme-warm-earthworks .equipment-single__cta-text {
	color: color-mix(in srgb, white 82%, var(--bio-panel-subtle));
}

/*
 * Secondary/outlined action inside these two now-dark panels
 * (.services-page__cta-secondary, .equipment-single__cta-enquiry): both
 * share the cross-page secondary-button component (border/text read
 * --bio-primary), invisible once the panel behind them is --bio-primary
 * too. Same light-pill inversion already used for the Homepage/Service-card
 * equivalents.
 */
.theme-warm-earthworks .services-page__cta .services-page__cta-secondary,
.theme-warm-earthworks .equipment-single__cta .equipment-single__cta-enquiry {
	background: var(--bio-panel-bg);
	border-color: var(--bio-panel-bg);
	color: var(--bio-primary);
}

.theme-warm-earthworks .services-page__cta .services-page__cta-secondary:hover,
.theme-warm-earthworks .equipment-single__cta .equipment-single__cta-enquiry:hover {
	background: var(--bio-panel-subtle);
	color: var(--bio-primary-hover);
}

/*
 * Services — Process step badge: size (3.25rem/3.5rem, readability pass)
 * is set directly in site.css's base rule, so only the colour needs
 * overriding here — pure white text to match the Homepage's equivalent
 * badge exactly. (A duplicate, stale copy of this selector used to live
 * earlier in this file with hardcoded old sizes (2.75rem) that silently
 * won over the base rule's later increases, since a theme-scoped selector
 * always beats the unscoped one in site.css regardless of source order —
 * removed as part of the readability-pass specificity audit.)
 */
.theme-warm-earthworks .services-page__process-number {
	color: var(--bio-text-on-dark);
}

/*
 * Services — Hero eyebrow: reuses the exact same --bio-focus (terracotta)
 * token already applied to the Homepage's own Hero eyebrow (see
 * ".theme-warm-earthworks .home-page__hero-content .home-page__eyebrow"
 * above) instead of site.css's base rule's --bio-primary (forest green),
 * which read as inconsistent with the Homepage.
 */
.theme-warm-earthworks .services-page__hero-content .services-page__eyebrow {
	color: var(--bio-focus);
}

/*
 * Warning Signs — dark-forest emphasis panel, the same family as the About
 * panel and Services cards (var(--bio-primary)/var(--bio-primary-hover)),
 * so it clearly stands out from the sand page canvas instead of reading as
 * a fourth ivory-toned panel. Heading/intro/item text all use the same
 * "text on dark" language used everywhere else on this dark surface;
 * the "!" badge keeps its terracotta background but swaps to pure white
 * text; the row/column divider lines swap from the warm tan --bio-border
 * (low contrast on dark green) to a soft translucent white line — same
 * technique used for the internal dividers on About/Services dark panels
 * elsewhere in this theme.
 */
.theme-warm-earthworks .services-page__warning-panel {
	background: var(--bio-primary);
	border-color: var(--bio-primary-hover);
}

.theme-warm-earthworks .services-page__warning-signs-intro .services-page__section-heading {
	color: var(--bio-text-on-dark);
}

.theme-warm-earthworks .services-page__warning-signs-intro .services-page__section-text,
.theme-warm-earthworks .services-page__warning-signs-list li {
	color: color-mix(in srgb, white 82%, var(--bio-panel-subtle));
}

.theme-warm-earthworks .services-page__warning-signs-list li {
	border-color: rgba(255, 255, 255, 0.15);
}

.theme-warm-earthworks .services-page__warning-signs-list li::before {
	color: var(--bio-text-on-dark);
}

/*
 * Services — 1024px+ desktop typography and CTA buttons, reusing the
 * Homepage's own bump values wherever an equivalent element exists (see the
 * Homepage desktop typography block above for the source values); where no
 * direct equivalent exists (list text, CTA buttons) the same size increment
 * already used elsewhere in this block is applied instead, so the page
 * reads as one consistent scale. Mobile/tablet are untouched. The CTA
 * buttons (.services-page__cta-phone/-secondary) are a Services-only
 * override layered after the shared cross-page button component in
 * site.css, which intentionally stays unchanged for Equipment Single/
 * Homepage/Contact.
 */
@media (min-width: 1024px) {
	.theme-warm-earthworks .services-page__hero-content .services-page__eyebrow {
		font-size: 1rem;
	}

	.theme-warm-earthworks .services-page__hero-title {
		font-size: clamp(3.25rem, 2.25rem + 3vw, 5.5rem);
	}

	.theme-warm-earthworks .services-page__hero-text {
		font-size: 1.375rem;
		line-height: 1.5;
	}

	.theme-warm-earthworks .services-page__cta-phone,
	.theme-warm-earthworks .services-page__cta-secondary {
		padding: 1rem 2rem;
		font-size: 1.1875rem;
		font-weight: 700;
	}

	.theme-warm-earthworks .services-page__section-heading {
		font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
	}

	.theme-warm-earthworks .services-page__section-text {
		font-size: 1.1875rem;
		line-height: 1.65;
	}

	.theme-warm-earthworks .services-page__list li {
		font-size: 1.1875rem;
	}

	/* Process title/text: not bumped further here — their 1024px+ sizes are
	   a fixed spec set directly in site.css's own desktop block, not a
	   smaller-base/larger-desktop pair reusing this shared increment. The
	   section heading, however, needs an explicit override immediately
	   below: it shares .services-page__section-heading with every other
	   Services section, so without this it would inherit the 2.5rem bump
	   above — larger than Process's own "about 2rem" spec. */
	.theme-warm-earthworks .services-page__process .services-page__section-heading {
		font-size: 2rem;
	}

	.theme-warm-earthworks .services-page__area .services-page__area-text {
		font-size: 1.1875rem;
	}

	.theme-warm-earthworks .services-page__area .services-page__area-list li {
		font-size: 1.1875rem;
	}

	.theme-warm-earthworks .services-page__cta-heading {
		font-size: clamp(2.125rem, 1.75rem + 1.5vw, 2.75rem);
	}
}

/*
 * Contact — direct-contact block: a warm ivory panel, matching the
 * "light informational panel" language used for About/Catalogue on the
 * Homepage. Its own heading/text already read --bio-text/--bio-text-muted
 * (core, dark), which is already correct here since the panel itself is
 * light — no colour override needed for its contents, only the panel
 * geometry itself.
 */
.theme-warm-earthworks .contact-page__details {
	background: var(--bio-panel-bg);
	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) {
	.theme-warm-earthworks .contact-page__details {
		padding: var(--bio-space-6);
	}
}

/*
 * Contact — main form panel: dark forest, matching the Homepage CTA form
 * exactly. `.contact-page__form` is the form element itself (there's no
 * separate wrapping div around just the form in the default markup), so
 * the panel treatment is applied directly to it. Field backgrounds
 * (--bio-field-bg) and borders (--bio-border) already read correctly
 * regardless of the panel behind them — fields are meant to stay light on
 * a dark panel, same as the Homepage form — so only the label colour and
 * submit button need overriding here (both currently read core rules
 * meant for a light panel).
 */
.theme-warm-earthworks .contact-page__form {
	background: var(--bio-primary);
	border: 1px solid var(--bio-primary-hover);
	border-radius: var(--bio-radius-large);
	box-shadow: 0 10px 28px rgba(var(--bio-shadow-color), 0.14);
	padding: var(--bio-space-5);
}

@media (min-width: 768px) {
	.theme-warm-earthworks .contact-page__form {
		padding: var(--bio-space-6);
	}
}

.theme-warm-earthworks .contact-page__form .form-group label {
	color: color-mix(in srgb, white 82%, var(--bio-panel-subtle));
}

.theme-warm-earthworks .contact-page__form button[type="submit"] {
	background: var(--bio-accent-dark);
	color: var(--bio-text-on-dark);
}

.theme-warm-earthworks .contact-page__form button[type="submit"]:hover {
	background: #63301f;
}