/* Biggy Piggy — base: tokens, header, footer, buttons, pipe labels. Colours and roles: сборка/ДИЗАЙН-СИСТЕМА.md.
   Sizes are first measured off the 1536 px mock-ups (--u = 1 px of the mock-up, smaller below 1536); one type scale comes after all pages. */

/* own font files, Latin subset (сборка/шрифты/make_woff2.py); Plus Jakarta Sans is the closest match to the mock-up headlines
   (сборка/шрифты/сравнение-шрифтов.png, 30.10) */
@font-face { font-family: 'Plus Jakarta Sans'; src: url(../fonts/plus-jakarta-sans.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Red Hat Mono'; src: url(../fonts/red-hat-mono.woff2) format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(../fonts/barlow-condensed-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root {
	--c-forest: #145A34;
	--c-forest-hover: #0F4A2A;
	--c-lime: #C9E02A;
	--c-night: #0E1A14;
	--c-night-2: #153322;
	--c-ink: #17261C;
	--c-muted: #566359;
	--c-muted-dark: #B7C2B9;
	--c-bg: #F2F5F1;
	--c-paper: #FFFFFF;
	--c-sheet: #F4F1EA;      /* the warm paper of the geological section (direction C): header, first screen */
	--c-line: #D6DCD3;
	--c-lime-text: #4E6B10;
	--c-error: #B42318;

	--f-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--f-mono: 'Red Hat Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
	--f-pipe: 'Barlow Condensed', 'Arial Narrow', sans-serif;

	--u: min(calc(100vw / 1536), 1px);
	/* one type scale by role (30.10): sizes of the 1536 px mock-ups × --u, with floors for phones; --s-… are the same sizes without floors
	   for the home's 1536 × 1024 scenes, whose boxes scale with the stage */
	--fs-d1: max(40px, calc(84 * var(--u)));    /* page title (h1); 84 = the home title of the approved mock-up */
	--fs-d2: max(34px, calc(72 * var(--u)));    /* long titles: category, product, basket, article; home screen titles */
	--fs-d3: max(28px, calc(52 * var(--u)));    /* section title (h2) */
	--fs-d4: max(24px, calc(40 * var(--u)));    /* box title: forms, help, side card; article h2 */
	--fs-d5: max(20px, calc(28 * var(--u)));    /* small condensed: core facts, request form parts, grid headings */
	--fs-d6: max(18px, calc(22 * var(--u)));    /* table captions, overview, crews */
	--fs-t1: max(22px, calc(42 * var(--u)));    /* featured card title */
	--fs-t2: max(20px, calc(28 * var(--u)));    /* card title: services, steps, «what we do» */
	--fs-t3: max(16px, calc(21 * var(--u)));    /* small card title, facts */
	--fs-t4: max(16px, calc(18 * var(--u)));    /* product name in a grid, basket line */
	--fs-lead: max(17px, calc(22 * var(--u)));  /* lead under a title, contact lines */
	--fs-body: max(16px, calc(19 * var(--u)));  /* running text */
	--fs-quote: max(17px, calc(25 * var(--u))); /* client quotes */
	--fs-btn-l: max(17px, calc(21 * var(--u))); /* main call to action */
	--fs-btn: max(16px, calc(18 * var(--u)));   /* buttons */
	--fs-ui: 16px;                              /* inputs, chips, tabs, footer links (16 keeps phones from zooming in) */
	--fs-small: 15px;                           /* notes, small buttons */
	--fs-label: 14px;                           /* form labels, legal lines, hints */
	--fs-mono-l: 16px; --fs-mono: 14px; --fs-mono-s: 13px;   /* Red Hat Mono: big labels / labels, crumbs / meta */
	--s-d1: calc(84 * var(--u)); --s-d2: calc(72 * var(--u)); --s-d4: calc(40 * var(--u)); --s-d5: calc(28 * var(--u));
	--s-t2: calc(28 * var(--u)); --s-t3: calc(21 * var(--u)); --s-t4: calc(18 * var(--u)); --s-lead: calc(22 * var(--u));
	--s-body: calc(19 * var(--u)); --s-quote: calc(25 * var(--u)); --s-btn-l: calc(21 * var(--u)); --s-btn: calc(18 * var(--u));
	--s-ui: calc(17 * var(--u)); --s-mono-l: calc(17 * var(--u)); --s-mono: calc(15 * var(--u));
	--gutter: calc(76 * var(--u));          /* axis of the page pipe */
	--side: max(16px, calc(112 * var(--u)));  /* content edge right of the pipe */
	--r-btn: 6px;
	--r-card: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 var(--fs-body)/1.55 var(--f-sans); }
img, svg, picture { max-width: 100%; height: auto; }
/* backgrounds below the first screen wait until they come near (bp.js adds .bp-near; html.bp-lazy comes from an inline script in the head,
   so without JavaScript they load as usual): on a phone they took the line from the first screen (Lighthouse, live, 30.10) */
.bp-lazy :is(.bp-home > [data-layer]:not([data-layer="surface"]), .bp-h8, .bp-qband, .bp-help, .bp-crews, .bp-svcrows, .bp-about, .bp-svc1):not(.bp-near) { background-image: none !important; }
picture { display: contents; }
a { color: var(--c-forest); }
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.bp-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bp-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--c-paper); padding: 8px 14px; }
.bp-skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--c-lime); outline-offset: 2px; }
.bp-wrap { max-width: 1536px; margin: 0 auto; padding: 0 var(--side); }
.bp-dark { color: #fff; }
.bp-dark a { color: #fff; }

/* buttons: primary is forest on light, lime with dark text on dark */
.bp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 calc(26 * var(--u) + 8px);
	border: 2px solid transparent; border-radius: var(--r-btn); font: 700 var(--fs-btn)/1.1 var(--f-sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.bp-btn--primary { background: var(--c-forest); color: #fff; }
.bp-btn--primary:hover { background: var(--c-forest-hover); }
.bp-dark .bp-btn--primary { background: var(--c-lime); color: var(--c-night); }
.bp-dark .bp-btn--primary:hover { background: #D8EC4A; }
.bp-btn--outline { border-color: var(--c-forest); color: var(--c-forest); background: transparent; }
.bp-dark .bp-btn--outline { border-color: #fff; color: #fff; }
.bp-btn--link { min-height: 28px; padding: 0; color: var(--c-forest); text-decoration: underline; text-underline-offset: 3px; }

/* mono fact line */
.bp-facts { font: 400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing: .01em; }

/* pipe marker label: a band on a steel pipe with steel collars at both ends and an arrow, narrow capitals; green, lime or white */
.bp-plabel { margin: 0; font: 700 var(--fs-d4)/1 var(--f-pipe); letter-spacing: .03em; text-transform: uppercase; }
.bp-plabel__band { position: relative; display: inline-flex; align-items: center; gap: .45em; height: 1.55em; padding: 0 .55em; background: var(--c-forest); color: #fff;
	box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .2), inset 0 -.14em 0 rgba(0, 0, 0, .25); }
.bp-plabel__band::before, .bp-plabel__band::after { content: ""; position: absolute; top: -.16em; bottom: -.16em; width: .32em; border-radius: 3px;
	background: linear-gradient(90deg, #5E6764, #E9EDEB 40%, #9AA3A0 75%, #565F5C); box-shadow: 0 0 0 1px #4E5754; }
.bp-plabel__band::before { right: 100%; }
.bp-plabel__band::after { left: 100%; }
.bp-plabel--lime .bp-plabel__band { background: linear-gradient(var(--c-lime), #B8CF1E); color: var(--c-night); }
.bp-plabel--white .bp-plabel__band { background: linear-gradient(#FFFFFF, #E4E9E5); color: var(--c-forest); }
.bp-plabel__arrow { width: .95em; height: auto; flex: none; margin-left: .25em; }
.bp-plabel--left .bp-plabel__arrow { margin: 0 .25em 0 0; transform: scaleX(-1); }

/* strip of grass and topsoil under the header of inner pages */
.bp-band { height: calc(145 * var(--u) + 16px);
	background: linear-gradient(to bottom, transparent 55%, var(--c-bg)), url(../img/band-topsoil.webp) left top / auto 100% repeat-x; }

/* header */
.bp-head { position: sticky; top: 0; z-index: 50; background: var(--c-sheet); border-bottom: 1px solid rgba(23, 38, 28, .12); }   /* owner 30.10: the header on the same paper */
.bp-head__in { display: flex; align-items: center; gap: calc(28 * var(--u) + 4px); max-width: 1536px; margin: 0 auto; height: calc(84 * var(--u) + 8px);
	padding: 0 calc(52 * var(--u) + 4px); }
.bp-head__logo { flex: none; display: block; line-height: 0; }
.bp-head__logo img { height: calc(48 * var(--u) + 6px); width: auto; }
.bp-nav { margin-left: auto; }
.bp-nav ul { display: flex; gap: calc(38 * var(--u) + 4px); margin: 0; padding: 0; list-style: none; }
.bp-nav a { display: block; padding: 10px 0; color: var(--c-ink); font: 500 17px/1 var(--f-sans); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.bp-nav a:hover, .bp-nav a[aria-current] { color: var(--c-forest); border-bottom-color: var(--c-forest); }
.bp-search { display: flex; align-items: center; }
.bp-search input[type=search] { display: none; width: calc(260 * var(--u) + 40px); height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--r-btn);
	font: 400 var(--fs-ui) var(--f-sans); background: var(--c-paper); color: var(--c-ink); }
.bp-search--open input[type=search] { display: block; }
.bp-search button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--c-ink); cursor: pointer; }
.bp-search--open button { margin-left: -44px; }
.bp-head__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--c-ink); font: 500 17px/1 var(--f-sans); text-decoration: none; white-space: nowrap; }
.bp-head__cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--c-ink); }
.bp-head__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--c-forest); color: #fff;
	font: 700 12px/18px var(--f-sans); text-align: center; }
.bp-head__menu { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--c-ink); cursor: pointer; }

@media (max-width: 1280px) {
	.bp-head__phone span { display: none; }
	.bp-search--open input[type=search] { width: 200px; }
}
@media (max-width: 1080px) {
	.bp-head__in { gap: 6px; padding: 0 12px; height: 64px; }
	.bp-head__logo img { height: 36px; }
	.bp-head__menu { display: grid; place-items: center; }
	[data-head-cta], .bp-search { display: none; }
	.bp-head__phone { margin-left: auto; width: 44px; height: 44px; justify-content: center; }
	.bp-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--c-sheet); border-bottom: 1px solid rgba(23, 38, 28, .12); margin: 0; }
	.bp-nav.is-open { display: block; }
	.bp-nav ul { flex-direction: column; gap: 0; padding: 8px 16px 16px; }
	.bp-nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--c-line); }
}

/* footer: dark basalt */
/* the footer: a calmer, darker plate under the basalt layer, set off by a hairline, so the receiver above does not sink into it (owner 30.10) */
.bp-foot { background: #0C120F; border-top: 1px solid rgba(201, 224, 42, .22); }
.bp-foot__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 32px; max-width: 1536px; margin: 0 auto; padding: calc(56 * var(--u) + 16px) var(--side) 32px; }
.bp-foot__brand p { color: var(--c-muted-dark); font-size: var(--fs-ui); }
.bp-foot__brand > a { display: inline-block; }   /* the link box holds the logo: a ≥ 24 px target */
.bp-foot__brand img { height: 52px; width: auto; margin-bottom: 18px; }
.bp-foot__area { font: 400 var(--fs-mono)/1.5 var(--f-mono); }
.bp-foot h2 { margin-bottom: 14px; font: 700 var(--fs-t4)/1.2 var(--f-sans); color: #fff; }
.bp-foot__col ul { margin: 0; padding: 0; list-style: none; }
.bp-foot__col a { display: inline-block; padding: 5px 0; color: var(--c-muted-dark); font-size: var(--fs-ui); text-decoration: none; }
.bp-foot__col a:hover, .bp-foot__brand a:hover { color: var(--c-lime); }
.bp-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bp-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; }
.bp-foot__legal { display: flex; justify-content: space-between; gap: 16px; max-width: 1536px; margin: 0 auto; padding: 18px var(--side) 26px;
	border-top: 1px solid rgba(255, 255, 255, .14); color: var(--c-muted-dark); font-size: var(--fs-label); }
.bp-foot__legal p { margin: 0; }
.bp-foot__legal a { margin-left: 22px; color: var(--c-muted-dark); }
@media (max-width: 900px) {
	.bp-foot__in { grid-template-columns: 1fr 1fr; }
	.bp-foot__brand { grid-column: 1 / -1; }
	.bp-foot__legal { flex-direction: column; }
	.bp-foot__legal a { margin: 0 22px 0 0; }
}

/* text pages (fallback) */
.bp-text { max-width: 860px; padding-top: 24px; padding-bottom: 72px; }
.bp-text h1 { margin-bottom: 24px; font-size: var(--fs-d2); color: var(--c-forest); }

/* forms (W8 C, T3 A, P1 job sheets, C1): white card, short by default */
.bp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bp-form { padding: calc(28 * var(--u) + 8px); background: var(--c-paper); color: var(--c-ink); border-radius: var(--r-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .28); }
.bp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.bp-field { display: block; }
.bp-field span { display: block; margin-bottom: 6px; font: 500 var(--fs-label)/1.3 var(--f-sans); color: var(--c-ink); }
.bp-field i { font-style: normal; color: var(--c-error); }
.bp-field input, .bp-field textarea, .bp-field select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--r-btn);
	font: 400 var(--fs-ui)/1.4 var(--f-sans); color: var(--c-ink); background: var(--c-paper); }
.bp-form__more { margin: 14px 0 0; border: 1px solid var(--c-line); border-radius: var(--r-btn); }
.bp-form__more summary { padding: 12px 14px; font-size: var(--fs-small); cursor: pointer; }
.bp-form__more .bp-field { padding: 0 14px 14px; }
.bp-form__send { width: 100%; margin-top: 16px; }
.bp-dark .bp-form .bp-btn--primary { background: var(--c-lime); color: var(--c-night); }
.bp-form__call { margin: 12px 0 0; text-align: center; font-size: var(--fs-label); color: var(--c-muted); }
.bp-dark .bp-form a { color: var(--c-forest); }
.bp-form__error { padding: 10px 12px; border-radius: var(--r-btn); background: #FDECEA; color: var(--c-error); font-size: var(--fs-small); }
@media (max-width: 600px) { .bp-form__grid { grid-template-columns: 1fr; } }