/*
Theme Name: WooForge
Theme URI: https://inkdigitals.com/
Author: INK Digital agency
Author URI: https://inkdigitals.com/
Description: A custom classic theme for WordPress + WooCommerce. No page builders, with its own header builder, shop settings, and reusable HTML blocks.
Version: 0.2.57
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wooforge
Domain Path: /languages
Tags: e-commerce, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
WC requires at least: 7.0
WC tested up to: 10.9
*/

/* ==========================================================================
   STR Finance - site styles.

   This is the theme's per-site customization file: enqueued on its own at a
   very late priority (see WooForge_Setup::enqueue_style_css), so everything
   here prints after main.css, woocommerce.css and the rest, and wins a
   specificity tie without needing !important anywhere.

   Layout runs on the theme's Bootstrap grid (libs/bootstrap/bootstrap-grid.min.css,
   grid-only build): containers, columns, gutters and the display/flex/order/
   spacing utilities, and nothing else. No Reboot, no components, no colour or
   typography helpers - so every colour and size below has to be stated here.

   COLOURS AND SIZES COME FROM THE ADMIN, NOT FROM THIS FILE.
   WooForge -> Загальне -> Кольори writes --wooforge-color-primary/accent, and
   -> Типографіка writes --wooforge-fs-* / --wooforge-fw-* / --wooforge-tt-*.
   Colours are only printed when they differ from the theme defaults, and
   typography is only printed for fields that are actually filled - both are
   empty on a fresh install. So every reference below carries a fallback, and
   the fallback is the theme's own documented default, never an invented one.

   Nothing is scoped to a page wrapper. Every class is `str-` prefixed and
   opt-in, so a page picks up a component only by naming it. Page identity,
   when a rule needs it, comes from body_class() (.home, .page-id-N) which the
   theme already prints - no wrapper div required.
   ========================================================================== */

:root {
	/* Straight from Загальне → Кольори. */
	--str-accent: var(--wooforge-color-accent, #d4a13a);
	--str-dark:   var(--wooforge-color-primary, #2c2c2c);

	/* No "muted" setting exists, so it is mixed from the primary colour -
	   change the colour in the admin and this follows it. The flat value on
	   the line above is the fallback for browsers without color-mix. */
	--str-muted:  #787d85;
	--str-muted:  color-mix(in srgb, var(--wooforge-color-primary, #2c2c2c) 55%, #fff);

	--str-line:   #e6e8ec;

	/* One heading size drives the whole scale: set Типографіка → Heading and
	   the hero, the section titles and the prose headings all move together,
	   keeping their proportions. 32px is the theme's own default for it. */
	--str-h:      var(--wooforge-fs-heading, 32px);

	/* Registered through the WordPress Font Library (weights 100-900, woff2 in
	   uploads/fonts). WP prints the @font-face rules itself, so naming the
	   family is all this needs - no @import, no Google Fonts request. */
	--str-font:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* The site font, and ONLY the family.
   font-size, font-weight, text-transform and colour stay on the theme's own
   --wooforge-* variables (see main.css), which the Типографіка screen writes
   to. Hardcoding them here would silently break that screen. The theme has no
   font-family setting of its own, which is why this one lives in CSS. */
body {
	font-family: var(--str-font);
}

/* box-sizing is already border-box on * from main.css - not repeated here. */

/* Sections ---------------------------------------------------------------- */

.str-section {
	padding: 70px 0;
	font-size: var(--wooforge-fs-base, 16px);
	line-height: 1.7;
}

.str-section--muted { background: #f7f8fa; }

/* Headings ---------------------------------------------------------------- */

/* .str-title carries the whole heading; .str-eyebrow is a <span> inside it,
   so the heading reads as one complete phrase for search engines and screen
   readers while still looking like two lines. */
.str-title {
	margin: 0 0 22px;
	font-size: calc(var(--str-h) * .78);
	font-weight: var(--wooforge-fw-heading, 700);
	line-height: 1.2;
	text-transform: var(--wooforge-tt-heading, uppercase);
	color: var(--str-accent);
}

.str-eyebrow {
	display: block;
	margin: 0;
	/* The theme's nominal default for this field is 13px; 20px is the size
	   this design uses, so it stays the fallback. Filling the field in
	   Типографіка takes over. */
	font-size: var(--wooforge-fs-eyebrow, 20px);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--str-muted);
}

/* Media ------------------------------------------------------------------- */

.str-figure {
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
}

.str-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* Key figures ------------------------------------------------------------- */

/* A <ul> laid out with flex rather than the grid, two per row at every width.
   The basis is calc(50% - half the gap), so the pair always fills the line
   exactly - a px basis would let a third item slip in on a wide container. */
.str-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.str-fact {
	flex: 0 1 calc(50% - 8px);
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	font-size: calc(var(--wooforge-fs-base, 16px) + 2px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--str-dark);

	/* Fallback shape, so a fact written without a --modifier still gets a
	   sensible icon instead of the solid square an unset mask would leave. */
	--str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* The icon is a mask rather than an <img> or a background: the shape comes
   from --str-icon on the modifier class, the colour from background-color.
   That is the whole point - change the accent in Загальне → Кольори and every
   icon recolours with it, which a data-URI background could not do (there is
   no currentColor inside one). */
.str-fact::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background-color: var(--str-accent);
	mask: var(--str-icon) center / contain no-repeat;
	-webkit-mask: var(--str-icon) center / contain no-repeat;
}

/* percent - interest rate */
.str-fact--rate { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E"); }

/* banknote - amount */
.str-fact--sum { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }

/* calendar - term */
.str-fact--term { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E"); }

/* person - age */
.str-fact--age { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E"); }

/* Dashed terms list ------------------------------------------------------- */

.str-terms {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.str-terms li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
}

.str-terms li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--str-accent);
}

/* Buttons ----------------------------------------------------------------- */

.str-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.str-btn {
	display: inline-block;
	padding: 13px 32px;
	border: 2px solid var(--str-accent);
	border-radius: 2px;
	font-family: var(--str-font);
	font-size: var(--wooforge-fs-button, 14px);
	font-weight: var(--wooforge-fw-button, 700);
	line-height: 1.2;
	text-transform: var(--wooforge-tt-button, uppercase);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.str-btn--solid { background: var(--str-accent); color: #fff; }

/* Darkened from whatever the accent happens to be, so the hover state keeps
   working when the colour is changed in the admin. */
.str-btn--solid:hover,
.str-btn--solid:focus {
	background: color-mix(in srgb, var(--str-accent) 82%, #000);
	border-color: color-mix(in srgb, var(--str-accent) 82%, #000);
	color: #fff;
}

.str-btn--ghost { background: transparent; color: var(--str-accent); }

.str-btn--ghost:hover,
.str-btn--ghost:focus { background: var(--str-accent); color: #fff; }

/* Numbered cards ---------------------------------------------------------- */

/* Four across from md up, two below - the donor's breakpoint. gap is 24px:
   four items share three gaps (25% - 18px), two share one (50% - 12px).
   The card IS the list item, and equal heights come free from the default
   align-items:stretch. */
.str-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.str-card {
	flex: 0 1 calc(25% - 18px);
	padding: 26px 20px;
	background: #fff;
	border-top: 3px solid var(--str-accent);
	text-align: center;
}

.str-card__num {
	display: block;
	margin-bottom: 10px;
	font-size: calc(var(--str-h) * .8);
	font-weight: 700;
	line-height: 1;
	color: var(--str-accent);
}

.str-card__text {
	margin: 0;
	font-size: var(--wooforge-fs-base, 16px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--str-dark);
}

/* Prose block ------------------------------------------------------------- */

.str-copy { border-top: 1px solid var(--str-line); }

.str-copy h1 {
	margin: 0 0 26px;
	font-size: calc(var(--str-h) * .94);
	font-weight: var(--wooforge-fw-heading, 700);
	line-height: 1.25;
	color: var(--str-dark);
}

.str-copy h2 {
	margin: 38px 0 16px;
	font-size: calc(var(--str-h) * .72);
	font-weight: var(--wooforge-fw-heading, 700);
	line-height: 1.3;
	color: var(--str-dark);
}

.str-copy p { margin: 0 0 16px; }

.str-copy ul { margin: 0 0 16px; padding-left: 22px; }

.str-copy li { margin-bottom: 6px; }

/* Hero --------------------------------------------------------------------
   One hero for the whole site. The home page's only difference is the
   photograph behind it, carried by .str-hero--photo; depth, rhythm and type
   scale are shared so the pages read as one design. */

.str-hero {
	position: relative;
	padding: 60px 0;
	background: var(--str-dark) center / cover no-repeat;
	color: #fff;
	overflow: hidden;
}

/* A photographic hero needs a scrim. White text over an untouched photo lands
   anywhere between 2:1 and 12:1 depending on the crop, so the copy column gets
   the same contrast the flat-dark heroes have, while the right side stays open
   enough for the image to read. */
.str-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .62);
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--str-dark) 90%, transparent) 0%,
		color-mix(in srgb, var(--str-dark) 86%, transparent) 40%,
		color-mix(in srgb, var(--str-dark) 52%, transparent) 100%
	);
}

.str-hero > .container { position: relative; z-index: 1; }

.str-hero__title {
	margin: 0 0 34px;
	font-size: calc(var(--str-h) * 1.375);
	font-weight: var(--wooforge-fw-heading, 700);
	line-height: 1.15;
	text-transform: var(--wooforge-tt-heading, uppercase);
	/* Montserrat is geometric and runs wide; uppercase at display sizes needs
	   the tracking pulled in or the headline breaks awkwardly. */
	letter-spacing: -.01em;
}

.str-hero__title span { color: var(--str-accent); }

/* Three figures on one flex line. A px flex-basis lets them wrap by
   themselves on narrow screens instead of being squeezed by a percentage. */
.str-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.str-hero__stat {
	flex: 1 1 140px;
	text-align: center;
}

.str-hero__num {
	display: block;
	font-size: calc(var(--str-h) * 1.25);
	font-weight: 700;
	line-height: 1;
	color: var(--str-accent);
}

.str-hero__label {
	display: block;
	margin-top: 8px;
	font-size: var(--wooforge-fs-small, 14px);
	line-height: 1.35;
}

/* Breakpoints ------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.str-section { padding: 50px 0; }
	.str-hero__title { font-size: calc(var(--str-h) * 1.06); }
}

@media (max-width: 767.98px) {
	.str-card { flex-basis: calc(50% - 12px); }
}

@media (max-width: 575.98px) {
	.str-hero__title { font-size: calc(var(--str-h) * .81); }
	.str-hero__num { font-size: calc(var(--str-h) * 1); }
	.str-title { font-size: calc(var(--str-h) * .69); }
	.str-fact { font-size: var(--wooforge-fs-base, 16px); }
	.str-copy h1 { font-size: calc(var(--str-h) * .75); }
	.str-copy h2 { font-size: calc(var(--str-h) * .63); }
	.str-actions .str-btn { flex: 1 0 100%; text-align: center; }
}

/* Landing pages ============================================================ */

.str-lead {
	margin: 0 0 28px;
	font-size: calc(var(--wooforge-fs-base, 16px) + 2px);
	line-height: 1.6;
}

.str-hero .str-lead { color: rgba(255, 255, 255, .88); }

.str-hero .str-figure img { border-radius: 4px; }

.str-hero .str-actions { margin-top: 28px; }

/* .str-hero--compact appears in the markup of the pages built before the two
   heroes were unified. It is intentionally not defined here any more - the
   values it used to carry are now the .str-hero defaults, so the class is a
   harmless no-op and can come out of the markup whenever those pages are next
   regenerated. */

/* Numbered steps ---------------------------------------------------------- */

/* An <ol>, so the order is carried by the markup and not only by the printed
   numerals. The counter is what renders the badge - the numbers are never
   typed into the content, which keeps them right when a step is inserted. */
.str-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: str-step;
}

.str-step {
	flex: 0 1 calc(25% - 18px);
	counter-increment: str-step;
	position: relative;
	padding-top: 56px;
}

.str-step::before {
	content: counter(str-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-size: calc(var(--str-h) * .8);
	font-weight: 700;
	line-height: 1;
	color: var(--str-accent);
}

.str-step::after {
	content: "";
	position: absolute;
	top: 14px;
	left: 52px;
	right: 0px;
	height: 2px;
	background: var(--str-line);
}

.str-step:last-child::after { display: none; }

.str-step__title {
	margin: 0 0 8px;
	font-size: calc(var(--wooforge-fs-base, 16px) + 2px);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--str-dark);
}

.str-step__text { margin: 0; }

/* Related links ----------------------------------------------------------- */

/* Internal links are a ranking asset, not decoration: every landing page in
   the matrix links to its siblings so none of them ends up orphaned. */
.str-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.str-link {
	flex: 0 1 calc(33.333% - 11px);
	padding: 20px 22px;
	background: #fff;
	border-left: 3px solid var(--str-accent);
}

.str-link a {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--str-dark);
	text-decoration: none;
}

.str-link a:hover,
.str-link a:focus { color: var(--str-accent); }

.str-link__note {
	display: block;
	font-size: var(--wooforge-fs-small, 14px);
	line-height: 1.4;
	color: var(--str-muted);
}

/* Contacts block =========================================================== */

.str-section--dark {
	background: var(--str-dark);
	color: #fff;
}

.str-title--light { color: #fff; }

.str-section--dark .str-eyebrow { color: rgba(255, 255, 255, .6); }

.str-contacts__list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.str-contact {
	flex: 1 1 180px;
	padding-top: 44px;
	position: relative;
}

/* Same masked-icon mechanism as .str-fact: the shape is a custom property and
   the colour comes from the accent, so the admin colour drives both. */
.str-contact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	background-color: var(--str-accent);
	mask: var(--str-icon) center / contain no-repeat;
	-webkit-mask: var(--str-icon) center / contain no-repeat;
}

.str-contact__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--wooforge-fs-small, 13px);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .6);
}

.str-contact__value {
	display: block;
	font-size: calc(var(--wooforge-fs-base, 16px) + 2px);
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	text-decoration: none;
}

a.str-contact__value:hover,
a.str-contact__value:focus { color: var(--str-accent); }

.str-contact__note {
	display: block;
	margin-top: 4px;
	font-size: var(--wooforge-fs-small, 14px);
	color: rgba(255, 255, 255, .6);
}

/* phone */
.str-contact--phone { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }

/* clock */
.str-contact--clock { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* map pin */
.str-contact--pin { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }

/* Landing breakpoints ----------------------------------------------------- */

@media (max-width: 991.98px) {
	.str-step { flex-basis: calc(50% - 12px); }
	.str-step::after { display: none; }
	.str-link { flex-basis: calc(50% - 8px); }
}

@media (max-width: 575.98px) {
	.str-step,
	.str-link { flex-basis: 100%; }
}

/* Advantages =============================================================== */

.str-usps {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.str-usp {
	flex: 0 1 calc(33.333% - 16px);
	padding-left: 46px;
	position: relative;
}

/* Same masked-icon mechanism as .str-fact - shape in a custom property, colour
   from the accent, so Загальне → Кольори drives it. */
.str-usp::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 30px;
	height: 30px;
	background-color: var(--str-accent);
	mask: var(--str-icon) center / contain no-repeat;
	-webkit-mask: var(--str-icon) center / contain no-repeat;
}

.str-usp__title {
	margin: 0 0 8px;
	font-size: calc(var(--wooforge-fs-base, 16px) + 1px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--str-dark);
}

.str-usp__text { margin: 0; }

.str-usp--clock    { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.str-usp--doc      { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
.str-usp--shield   { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.str-usp--home     { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.str-usp--rate     { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E"); }
.str-usp--calendar { --str-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E"); }

/* CTA band ================================================================= */

.str-cta {
	padding: 42px 0;
	background: var(--str-accent);
	color: #fff;
}

.str-cta__title {
	margin: 0 0 6px;
	font-size: calc(var(--str-h) * .72);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: #fff;
}

.str-cta__text { margin: 0; }

/* On the accent band the solid button would vanish, so it inverts: white fill,
   accent text. */
.str-cta .str-btn--solid {
	background: #fff;
	border-color: #fff;
	color: var(--str-accent);
}

.str-cta .str-btn--solid:hover,
.str-cta .str-btn--solid:focus {
	background: var(--str-dark);
	border-color: var(--str-dark);
	color: #fff;
}

/* SEO copy in a scroller =================================================== */

.str-copy__heading {
	margin: 0 0 20px;
	font-size: calc(var(--str-h) * .78);
	font-weight: var(--wooforge-fw-heading, 700);
	line-height: 1.25;
	text-transform: var(--wooforge-tt-heading, uppercase);
	color: var(--str-accent);
}

/* The text stays in the DOM and stays visible - only the viewport onto it is
   capped. That matters: content collapsed behind display:none is discounted,
   whereas a scrolled region is indexed like any other. tabindex makes the
   region reachable by keyboard, which a scrollable box needs to be usable. */
.str-copy__scroll {
	max-height: 420px;
	overflow-y: auto;
	padding-right: 18px;
	/* Firefox has no px control here - `thin` is a keyword and renders wider
	   than the 2px WebKit gets. The colours match, the width cannot. */
	scrollbar-width: thin;
	scrollbar-color: var(--str-accent) #fff;
	overscroll-behavior: contain;
}

.str-copy__scroll:focus-visible {
	outline: 2px solid var(--str-accent);
	outline-offset: 4px;
}

/* border-radius: 0 is stated rather than just omitted - some engines round the
   thumb in their own UA stylesheet, so leaving it out is not the same as
   switching it off. */
.str-copy__scroll::-webkit-scrollbar { width: 2px; }
.str-copy__scroll::-webkit-scrollbar-track { background: #fff; border-radius: 0; }
.str-copy__scroll::-webkit-scrollbar-thumb { background: var(--str-accent); border-radius: 0; }

.str-copy__scroll h3 {
	margin: 26px 0 12px;
	font-size: calc(var(--wooforge-fs-base, 16px) + 3px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--str-dark);
}

.str-copy__scroll h3:first-child { margin-top: 0; }

/* Contact form ============================================================= */

.str-formbox {
	padding: 32px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 4px;
}

.str-formbox__title {
	margin: 0 0 6px;
	font-size: calc(var(--str-h) * .6);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}

.str-formbox__note {
	margin: 0 0 22px;
	font-size: var(--wooforge-fs-small, 14px);
	color: rgba(255, 255, 255, .65);
}

/* The form markup comes from [wooforge_form]; only its colours are restated
   here, for the dark band it sits on. */
.str-formbox label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wooforge-fs-small, 13px);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .65);
}

.str-formbox input[type="text"],
.str-formbox input[type="tel"],
.str-formbox input[type="email"] {
	width: 100%;
	margin-bottom: 18px;
	padding: 13px 16px;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 2px;
	font-family: var(--str-font);
	font-size: var(--wooforge-fs-base, 16px);
	color: var(--str-dark);
}

.str-formbox input:focus {
	border-color: var(--str-accent);
	outline: none;
}

.str-formbox button[type="submit"] {
	display: inline-block;
	width: 100%;
	padding: 14px 32px;
	background: var(--str-accent);
	border: 2px solid var(--str-accent);
	border-radius: 2px;
	font-family: var(--str-font);
	font-size: var(--wooforge-fs-button, 14px);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}

.str-formbox button[type="submit"]:hover,
.str-formbox button[type="submit"]:focus {
	background: color-mix(in srgb, var(--str-accent) 82%, #000);
}

/* Block breakpoints ------------------------------------------------------- */

@media (max-width: 991.98px) {
	.str-usp { flex-basis: calc(50% - 12px); }
	.str-cta__title { font-size: calc(var(--str-h) * .62); }
}

@media (max-width: 575.98px) {
	.str-usp { flex-basis: 100%; }
	.str-formbox { padding: 24px; }
	.str-copy__scroll { max-height: 340px; }
}

/* Responsive corrections =================================================== */

/* Appended last on purpose: these override the per-component breakpoints
   above by source order, so the earlier rules stay readable next to the
   components they belong to. */

@media (max-width: 767.98px) {
	/* Three contacts against a 200px basis fit two per line at 540-720px and
	   drop the third alone underneath. Full width removes the orphan. */
	.str-contact { flex-basis: 100%; }
}

@media (max-width: 575.98px) {
	/* Padding was still at the 992px value all the way down to 320px - the
	   single biggest source of wasted vertical space on a phone. */
	.str-section { padding: 36px 0; }
	.str-hero { padding: 40px 0; }
	.str-cta { padding: 30px 0; }

	/* Same story inside the boxes: 26px of padding on a 136px-wide card left
	   under 100px for the text. */
	.str-card { padding: 20px 14px; }
	.str-link { padding: 16px 16px; }
	.str-copy__scroll { padding-right: 12px; }

	/* The hero figures are the visible break: a 140px basis fits two per line
	   between 360 and 414px, so the third wrapped alone. `flex: 1 1 0` pins
	   them to three equal columns at every width instead - they are short
	   enough to take it, and min-width:0 lets a column shrink below the
	   width of its own text rather than pushing the row wider. */
	.str-hero__stats { gap: 12px; }
	.str-hero__stat { flex: 1 1 0; min-width: 0; }
	.str-hero__num { font-size: calc(var(--str-h) * .78); }
	.str-hero__label { font-size: 12px; }

	/* Facts stay two per row, as asked. The room comes from the icon and the
	   gaps instead of from the column count. */
	.str-facts { gap: 10px; }
	.str-fact { flex-basis: calc(50% - 5px); gap: 8px; padding: 10px 0; }
	.str-fact::before { width: 22px; height: 22px; }

	/* The step connector is already hidden below 992px; drop the space it
	   reserved too. */
	.str-step { padding-top: 46px; }
	.str-usp { padding-left: 40px; }
}

/* Responsive corrections, round 2 ========================================== */

@media (max-width: 991.98px) {
	/* .wooforge-content pads 24px each side (main.css), which on a phone is
	   48px of the 320 gone before anything is laid out - and it also stopped
	   the --muted / --dark section bands from reaching the screen edge.

	   The theme builds that padding from var(--wooforge-content-gutter, 24px),
	   so zeroing the VARIABLE on this element is enough - no padding override,
	   no !important. The header rows and the footer read the same variable but
	   live outside .wooforge-content, so they keep their 24px. */
	.wooforge-content { --wooforge-content-gutter: 0px; }

	/* With the wrapper flush to the edge the only inset left is Bootstrap's
	   12px half-gutter, which is too tight for body text. 16px is the usual
	   mobile margin; it applies to the containers this site's sections use,
	   not to .container globally, so the grid's own gutters are untouched. */
	.str-section > .container,
	.str-hero > .container,
	.str-cta > .container { padding-left: 16px; padding-right: 16px; }

	/* Four document cards on a tablet left them narrow and the text broken
	   over three lines - two per row reads far better at this width. */
	.str-card { flex-basis: calc(50% - 12px); }

	/* Number beside the heading instead of stacked above it: grid puts the
	   counter and the title on the same row and lets the paragraph span the
	   second one, which recovers ~46px of height per step. */
	.str-steps { gap: 20px; }

	.str-step {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 12px;
		padding-top: 0;
	}

	.str-step::before {
		position: static;
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		font-size: calc(var(--str-h) * .68);
	}

	.str-step__title {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		margin: 0;
	}

	.str-step__text {
		grid-column: 2;
		grid-row: 2;
		margin-top: 6px;
	}
}

@media (max-width: 767.98px) {
	/* The equal-column rule has to reach 767.98, not 575.98: at exactly 576px
	   the 140px basis fits only two of the three figures in a 460px row and
	   drops the third alone. `flex: 1 1 0` cannot produce an orphan at all. */
	.str-hero__stat { flex: 1 1 0; min-width: 0; }
}

/* Breadcrumbs ============================================================== */

/* The theme prints its trail inside the page-title block, which every page here
   hides, so the snippet injects it instead - by preference straight into the
   hero, right above the H1. */

.str-crumbs .wooforge-breadcrumbs { margin-bottom: 0; }

.str-crumbs ol { gap: 6px; }

.str-crumbs li:not(:last-child)::after { margin-left: 6px; opacity: .5; }

/* Inside the hero: on the dark band, muted so it never competes with the H1. */
.str-crumbs--hero {
	margin-bottom: 16px;
	font-size: var(--wooforge-fs-small, 13px);
}

.str-crumbs--hero .wooforge-breadcrumbs,
.str-crumbs--hero .wooforge-breadcrumbs a { color: rgba(255, 255, 255, .62); }

.str-crumbs--hero .wooforge-breadcrumbs a:hover,
.str-crumbs--hero .wooforge-breadcrumbs a:focus {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The current page is the last crumb and carries no link - lift it slightly so
   the trail reads as a path ending here. */
.str-crumbs--hero .wooforge-breadcrumbs li:last-child span { color: rgba(255, 255, 255, .85); }

/* Fallback, above the content on pages with no hero - the legal ones. */
.str-crumbs {
	padding: 14px 0 0;
	font-size: var(--wooforge-fs-small, 13px);
}

.str-crumbs--hero { padding: 0; }

.str-crumbs:not(.str-crumbs--hero) .wooforge-breadcrumbs { color: var(--str-muted); }

.str-crumbs:not(.str-crumbs--hero) .wooforge-breadcrumbs a { color: var(--str-muted); }

.str-crumbs:not(.str-crumbs--hero) .wooforge-breadcrumbs a:hover { color: var(--str-accent); }

@media (max-width: 991.98px) {
	.str-crumbs:not(.str-crumbs--hero) > .container { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 575.98px) {
	.str-crumbs { padding-top: 10px; }
	.str-crumbs--hero { padding-top: 0; margin-bottom: 12px; }
}

/* Legal pages ============================================================= */

/* Long-form legal text: the same prose rules as .str-copy, without the scroll
   box - a policy has to be printable and linkable to by anchor. */

.str-legal { max-width: 74ch; }

.str-legal h2 {
	margin: 40px 0 14px;
	font-size: calc(var(--str-h) * .62);
	font-weight: var(--wooforge-fw-heading, 700);
	line-height: 1.25;
	color: var(--str-dark);
}

.str-legal h2:first-child { margin-top: 0; }

.str-legal h3 {
	margin: 26px 0 10px;
	font-size: calc(var(--wooforge-fs-base, 16px) + 3px);
	font-weight: 600;
	color: var(--str-dark);
}

.str-legal p { margin: 0 0 14px; }

.str-legal ul,
.str-legal ol { margin: 0 0 16px; padding-left: 22px; }

.str-legal li { margin-bottom: 7px; }

.str-legal__meta {
	margin: 0 0 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--str-line);
	font-size: var(--wooforge-fs-small, 14px);
	color: var(--str-muted);
}

/* Terms table ------------------------------------------------------------- */

.str-tablewrap { overflow-x: auto; margin: 0 0 24px; }

.str-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: var(--wooforge-fs-base, 16px);
}

.str-table th,
.str-table td {
	padding: 12px 16px 12px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--str-line);
}

.str-table th {
	font-weight: 600;
	color: var(--str-dark);
	border-bottom: 2px solid var(--str-dark);
}

.str-table td:first-child { color: var(--str-muted); width: 34%; }

.str-table tbody th {
	font-weight: 600;
	border-bottom: 1px solid var(--str-line);
}

@media (max-width: 575.98px) {
	.str-table { font-size: var(--wooforge-fs-small, 14px); }
	.str-table th, .str-table td { padding: 10px 12px 10px 0; }
}

/* Footer =================================================================== */

/* The theme's footer renders one option through do_shortcode(), so the content
   comes from an HTML block - which WPML maps per language, keeping the links
   in the right language without a second footer. */

.str-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	font-size: var(--wooforge-fs-small, 14px);
	line-height: 1.6;
}

.str-footer p { margin: 0; }

.str-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.str-footer__links a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.str-footer__links a:hover { border-bottom-color: currentColor; }

/* The collateral warning is the one line in the footer that has to be read,
   not skimmed past - it is kept quiet but never hidden. */
.str-footer__note {
	max-width: 62ch;
	opacity: .72;
	font-size: calc(var(--wooforge-fs-small, 14px) - 1px);
}

@media (max-width: 575.98px) {
	.str-footer__links { gap: 8px 16px; }
}

/* Consent row and links inside the dark form box ---------------------------- */

/* Two things went wrong here at once.
   .str-formbox label sets display:block, uppercase and 13px on every label in
   the box - correct for a field caption, wrong for a sentence with a link, and
   it also beat the theme's own .wooforge-form-consent flex row on specificity.
   And main.css paints every <a> with --wooforge-color-primary, which on this
   dark band is effectively black on near-black. */

.str-formbox .wooforge-form-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	font-size: var(--wooforge-fs-small, 14px);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .78);
	cursor: pointer;
}

/* A default checkbox on this background renders as a pale square that reads as
   decoration rather than a control, so it is drawn here: white box, accent
   fill when checked. */
.str-formbox .wooforge-form-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	padding: 0;
	background: #fff;
	border: 2px solid #fff;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.str-formbox .wooforge-form-consent input[type="checkbox"]:checked {
	background-color: var(--str-accent);
	border-color: var(--str-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.str-formbox .wooforge-form-consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--str-accent);
	outline-offset: 2px;
}

.str-formbox a {
	color: var(--str-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.str-formbox a:hover,
.str-formbox a:focus { color: #fff; }

/* The theme's validation colours are tuned for a light form; both are too dark
   to read here. */
.str-formbox .wooforge-form-field-error { color: #ff9c90; }

.str-formbox .wooforge-form-row.has-error input { border-color: #ff9c90; }

.str-formbox .wooforge-form-response { color: #fff; }

.str-formbox .wooforge-form-response.is-success { background: rgba(255, 255, 255, .12); }

.str-formbox .wooforge-form-response.is-error { background: rgba(255, 156, 144, .18); }

/* Header call-to-action ---------------------------------------------------- */

/* A smaller .str-btn for the header row: the page-level size (13/32) makes the
   header taller than the logo needs it to be. */

.str-btn--sm {
	padding: 10px 22px;
	white-space: nowrap;
}

.str-header-cta {
	display: flex;
	align-items: center;
}

/* The header builder wraps the block in .wooforge-header-html-block, which is
   a plain div - the button carries its own colours, so it works on a light or
   a dark header without a second rule. */
.wooforge-header-html-block .str-header-cta .str-btn { margin: 0; }

@media (max-width: 575.98px) {
	.str-btn--sm {
		padding: 9px 16px;
		font-size: calc(var(--wooforge-fs-button, 14px) - 1px);
	}
}